Small fixes (#341)
This commit is contained in:
parent
931b1a0eae
commit
e132eafcb0
|
@ -30,9 +30,9 @@
|
||||||
"@craco/craco": "^6.4.3",
|
"@craco/craco": "^6.4.3",
|
||||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||||
"@types/d3": "^7.0.0",
|
"@types/d3": "^7.0.0",
|
||||||
"@types/node": "^17.0.2",
|
"@types/node": "^17.0.4",
|
||||||
"@types/pako": "^1.0.2",
|
"@types/pako": "^1.0.2",
|
||||||
"@types/react": "^17.0.37",
|
"@types/react": "^17.0.38",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.11",
|
||||||
"@types/react-redux": "^7.1.20",
|
"@types/react-redux": "^7.1.20",
|
||||||
"@types/react-router-dom": "^5.3.2",
|
"@types/react-router-dom": "^5.3.2",
|
||||||
|
@ -3757,9 +3757,9 @@
|
||||||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||||
},
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz",
|
||||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
"integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog=="
|
||||||
},
|
},
|
||||||
"node_modules/@types/normalize-package-data": {
|
"node_modules/@types/normalize-package-data": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
|
@ -3793,9 +3793,9 @@
|
||||||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||||
},
|
},
|
||||||
"node_modules/@types/react": {
|
"node_modules/@types/react": {
|
||||||
"version": "17.0.37",
|
"version": "17.0.38",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
|
||||||
"integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
|
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/prop-types": "*",
|
"@types/prop-types": "*",
|
||||||
"@types/scheduler": "*",
|
"@types/scheduler": "*",
|
||||||
|
@ -26026,9 +26026,9 @@
|
||||||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||||
},
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "17.0.2",
|
"version": "17.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz",
|
||||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
"integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog=="
|
||||||
},
|
},
|
||||||
"@types/normalize-package-data": {
|
"@types/normalize-package-data": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
|
@ -26062,9 +26062,9 @@
|
||||||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||||
},
|
},
|
||||||
"@types/react": {
|
"@types/react": {
|
||||||
"version": "17.0.37",
|
"version": "17.0.38",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
|
||||||
"integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
|
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/prop-types": "*",
|
"@types/prop-types": "*",
|
||||||
"@types/scheduler": "*",
|
"@types/scheduler": "*",
|
||||||
|
|
|
@ -51,9 +51,9 @@
|
||||||
"@craco/craco": "^6.4.3",
|
"@craco/craco": "^6.4.3",
|
||||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||||
"@types/d3": "^7.0.0",
|
"@types/d3": "^7.0.0",
|
||||||
"@types/node": "^17.0.2",
|
"@types/node": "^17.0.4",
|
||||||
"@types/pako": "^1.0.2",
|
"@types/pako": "^1.0.2",
|
||||||
"@types/react": "^17.0.37",
|
"@types/react": "^17.0.38",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.11",
|
||||||
"@types/react-redux": "^7.1.20",
|
"@types/react-redux": "^7.1.20",
|
||||||
"@types/react-router-dom": "^5.3.2",
|
"@types/react-router-dom": "^5.3.2",
|
||||||
|
|
|
@ -55,6 +55,10 @@ const mapStateToProps = (state: AppState) => ({
|
||||||
loadedLogs: state.logs,
|
loadedLogs: state.logs,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const margin = 30;
|
||||||
|
const sidebarWidth = 250;
|
||||||
|
const minCanvasHeightInner = 600;
|
||||||
|
|
||||||
const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
||||||
const { lg } = useBreakpoint();
|
const { lg } = useBreakpoint();
|
||||||
const { Sider } = Layout;
|
const { Sider } = Layout;
|
||||||
|
@ -64,15 +68,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
||||||
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
||||||
const [fetchError, setFetchError] = useState<Error>();
|
const [fetchError, setFetchError] = useState<Error>();
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
const margin = 30;
|
|
||||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||||
const sidebarWidth = 250;
|
|
||||||
const calculateCanvasSize = useCallback(() => {
|
const calculateCanvasSize = useCallback(() => {
|
||||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||||
|
|
||||||
if (window.innerHeight > 600) {
|
if (window.innerHeight > minCanvasHeightInner) {
|
||||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||||
|
} else {
|
||||||
|
setCanvasHeight(minCanvasHeightInner / 2);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
const siderProps = {
|
const siderProps = {
|
||||||
|
|
|
@ -86,6 +86,7 @@ const mapStateToProps = (state: AppState) => ({
|
||||||
const containerStyle = {
|
const containerStyle = {
|
||||||
padding: 20,
|
padding: 20,
|
||||||
maxWidth: 1400,
|
maxWidth: 1400,
|
||||||
|
width: '100%',
|
||||||
margin: '0 auto',
|
margin: '0 auto',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -114,9 +115,9 @@ const Dialog = ({
|
||||||
const { storageSet } = useStorage();
|
const { storageSet } = useStorage();
|
||||||
const { findConstantOnPage } = useConfig(config);
|
const { findConstantOnPage } = useConfig(config);
|
||||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
const calculateCanvasWidth = useCallback(() => {
|
const calculateCanvasWidth = useCallback(() => {
|
||||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - 20);
|
setCanvasWidth((containerRef.current?.clientWidth || 0) - 20);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -217,7 +218,7 @@ const Dialog = ({
|
||||||
if (!dialogConfig) {
|
if (!dialogConfig) {
|
||||||
if (curveConfig) {
|
if (curveConfig) {
|
||||||
return (
|
return (
|
||||||
<div style={containerStyle}>
|
<div ref={containerRef} style={containerStyle}>
|
||||||
<Divider>{curveConfig.title}</Divider>
|
<Divider>{curveConfig.title}</Divider>
|
||||||
{renderCurve(curveConfig)}
|
{renderCurve(curveConfig)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -226,7 +227,7 @@ const Dialog = ({
|
||||||
|
|
||||||
if (tableConfig) {
|
if (tableConfig) {
|
||||||
return (
|
return (
|
||||||
<div style={containerStyle}>
|
<div ref={containerRef} style={containerStyle}>
|
||||||
{renderHelp(tableConfig.help)}
|
{renderHelp(tableConfig.help)}
|
||||||
<Divider>{tableConfig.title}</Divider>
|
<Divider>{tableConfig.title}</Divider>
|
||||||
{renderTable(tableConfig)}
|
{renderTable(tableConfig)}
|
||||||
|
@ -426,7 +427,7 @@ const Dialog = ({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={contentRef} style={containerStyle}>
|
<div ref={containerRef} style={containerStyle}>
|
||||||
{renderHelp(dialogConfig?.help)}
|
{renderHelp(dialogConfig?.help)}
|
||||||
<Form
|
<Form
|
||||||
labelCol={{ span: 10 }}
|
labelCol={{ span: 10 }}
|
||||||
|
|
|
@ -57,6 +57,10 @@ const mapStateToProps = (state: AppState) => ({
|
||||||
loadedLogs: state.logs,
|
loadedLogs: state.logs,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const margin = 30;
|
||||||
|
const sidebarWidth = 250;
|
||||||
|
const minCanvasHeightInner = 600;
|
||||||
|
|
||||||
const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
||||||
const { lg } = useBreakpoint();
|
const { lg } = useBreakpoint();
|
||||||
const { Sider } = Layout;
|
const { Sider } = Layout;
|
||||||
|
@ -69,15 +73,15 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo
|
||||||
const [step, setStep] = useState(0);
|
const [step, setStep] = useState(0);
|
||||||
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
const margin = 30;
|
|
||||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||||
const sidebarWidth = 250;
|
|
||||||
const calculateCanvasSize = useCallback(() => {
|
const calculateCanvasSize = useCallback(() => {
|
||||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||||
|
|
||||||
if (window.innerHeight > 600) {
|
if (window.innerHeight > minCanvasHeightInner) {
|
||||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||||
|
} else {
|
||||||
|
setCanvasHeight(minCanvasHeightInner / 2);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue