Small fixes (#341)

.env

@@ -1 +1,2 @@
 BROWSER=none
+NPM_GITHUB_TOKEN=

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": "*",

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",

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<Error>();
   const contentRef = useRef<HTMLDivElement | null>(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 = {

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<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(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 (
-        <div style={containerStyle}>
+        <div ref={containerRef} style={containerStyle}>
           <Divider>{curveConfig.title}</Divider>
           {renderCurve(curveConfig)}
         </div>
@@ -226,7 +227,7 @@ const Dialog = ({
 
     if (tableConfig) {
       return (
-        <div style={containerStyle}>
+        <div ref={containerRef} style={containerStyle}>
           {renderHelp(tableConfig.help)}
           <Divider>{tableConfig.title}</Divider>
           {renderTable(tableConfig)}
@@ -426,7 +427,7 @@ const Dialog = ({
   });
 
   return (
-    <div ref={contentRef} style={containerStyle}>
+    <div ref={containerRef} style={containerStyle}>
       {renderHelp(dialogConfig?.help)}
       <Form
         labelCol={{ span: 10 }}

src/components/Log.tsx

@@ -57,6 +57,10 @@ const mapStateToProps = (state: AppState) => ({
   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<HTMLDivElement | null>(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);
     }
   }, []);