From e132eafcb0c54eb9fd1f9ab269b21e8b9ba007a6 Mon Sep 17 00:00:00 2001 From: Piotr Rogowski Date: Thu, 23 Dec 2021 23:58:19 +0100 Subject: [PATCH] Small fixes (#341) --- .env | 1 + package-lock.json | 28 ++++++++++++++-------------- package.json | 4 ++-- src/components/Diagnose.tsx | 10 +++++++--- src/components/Dialog.tsx | 11 ++++++----- src/components/Log.tsx | 10 +++++++--- 6 files changed, 37 insertions(+), 27 deletions(-) diff --git a/.env b/.env index 6ce384e..cb6d070 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ BROWSER=none +NPM_GITHUB_TOKEN= diff --git a/package-lock.json b/package-lock.json index 020d1aa..bf5cf2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,9 +30,9 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^17.0.2", + "@types/node": "^17.0.4", "@types/pako": "^1.0.2", - "@types/react": "^17.0.37", + "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "@types/react-redux": "^7.1.20", "@types/react-router-dom": "^5.3.2", @@ -3757,9 +3757,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "node_modules/@types/node": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz", - "integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==" + "version": "17.0.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz", + "integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog==" }, "node_modules/@types/normalize-package-data": { "version": "2.4.1", @@ -3793,9 +3793,9 @@ "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, "node_modules/@types/react": { - "version": "17.0.37", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz", - "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==", + "version": "17.0.38", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz", + "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -26026,9 +26026,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "@types/node": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz", - "integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==" + "version": "17.0.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz", + "integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog==" }, "@types/normalize-package-data": { "version": "2.4.1", @@ -26062,9 +26062,9 @@ "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, "@types/react": { - "version": "17.0.37", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz", - "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==", + "version": "17.0.38", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz", + "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", diff --git a/package.json b/package.json index 8661a5c..d5a3a78 100644 --- a/package.json +++ b/package.json @@ -51,9 +51,9 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^17.0.2", + "@types/node": "^17.0.4", "@types/pako": "^1.0.2", - "@types/react": "^17.0.37", + "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "@types/react-redux": "^7.1.20", "@types/react-router-dom": "^5.3.2", diff --git a/src/components/Diagnose.tsx b/src/components/Diagnose.tsx index 5f8c1fd..0404f33 100644 --- a/src/components/Diagnose.tsx +++ b/src/components/Diagnose.tsx @@ -55,6 +55,10 @@ const mapStateToProps = (state: AppState) => ({ loadedLogs: state.logs, }); +const margin = 30; +const sidebarWidth = 250; +const minCanvasHeightInner = 600; + const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => { const { lg } = useBreakpoint(); const { Sider } = Layout; @@ -64,15 +68,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa const [edgeLocation, setEdgeLocation] = useState(edgeUnknown); const [fetchError, setFetchError] = useState(); const contentRef = useRef(null); - const margin = 30; const [canvasWidth, setCanvasWidth] = useState(0); const [canvasHeight, setCanvasHeight] = useState(0); - const sidebarWidth = 250; const calculateCanvasSize = useCallback(() => { setCanvasWidth((contentRef.current?.clientWidth || 0) - margin); - if (window.innerHeight > 600) { + if (window.innerHeight > minCanvasHeightInner) { setCanvasHeight(Math.round((window.innerHeight - 250) / 2)); + } else { + setCanvasHeight(minCanvasHeightInner / 2); } }, []); const siderProps = { diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 00e1e71..9c8a0ab 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -86,6 +86,7 @@ const mapStateToProps = (state: AppState) => ({ const containerStyle = { padding: 20, maxWidth: 1400, + width: '100%', margin: '0 auto', }; @@ -114,9 +115,9 @@ const Dialog = ({ const { storageSet } = useStorage(); const { findConstantOnPage } = useConfig(config); const [canvasWidth, setCanvasWidth] = useState(0); - const contentRef = useRef(null); + const containerRef = useRef(null); const calculateCanvasWidth = useCallback(() => { - setCanvasWidth((contentRef.current?.clientWidth || 0) - 20); + setCanvasWidth((containerRef.current?.clientWidth || 0) - 20); }, []); useEffect(() => { @@ -217,7 +218,7 @@ const Dialog = ({ if (!dialogConfig) { if (curveConfig) { return ( -
+
{curveConfig.title} {renderCurve(curveConfig)}
@@ -226,7 +227,7 @@ const Dialog = ({ if (tableConfig) { return ( -
+
{renderHelp(tableConfig.help)} {tableConfig.title} {renderTable(tableConfig)} @@ -426,7 +427,7 @@ const Dialog = ({ }); return ( -
+
{renderHelp(dialogConfig?.help)}
({ loadedLogs: state.logs, }); +const margin = 30; +const sidebarWidth = 250; +const minCanvasHeightInner = 600; + const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => { const { lg } = useBreakpoint(); const { Sider } = Layout; @@ -69,15 +73,15 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo const [step, setStep] = useState(0); const [edgeLocation, setEdgeLocation] = useState(edgeUnknown); const contentRef = useRef(null); - const margin = 30; const [canvasWidth, setCanvasWidth] = useState(0); const [canvasHeight, setCanvasHeight] = useState(0); - const sidebarWidth = 250; const calculateCanvasSize = useCallback(() => { setCanvasWidth((contentRef.current?.clientWidth || 0) - margin); - if (window.innerHeight > 600) { + if (window.innerHeight > minCanvasHeightInner) { setCanvasHeight(Math.round((window.innerHeight - 250) / 2)); + } else { + setCanvasHeight(minCanvasHeightInner / 2); } }, []);