Show only one graph on smaller screens (#818)

src/components/Logs/LogCanvas.tsx

@@ -38,6 +38,7 @@ interface Props {
   height: number;
   selectedFields1: SelectedField[];
   selectedFields2: SelectedField[];
+  showSingleGraph: boolean;
 };
 
 export interface PlottableField {
@@ -49,7 +50,7 @@ export interface PlottableField {
   format: string;
 };
 
-const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Props) => {
+const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2, showSingleGraph }: Props) => {
   const { sm } = useBreakpoint();
   const hsl = useCallback((fieldIndex: number, allFields: number) => {
     const [hue] = colorHsl(0, allFields - 1, fieldIndex);
@@ -166,11 +167,14 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
     setOptions1(result1.options);
     setPlotData1([result1.xData, ...result1.yData]);
 
-    const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
-    setOptions2(result2.options);
-    setPlotData2([result2.xData, ...result2.yData]);
+    if (!showSingleGraph) {
+      const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
+      setOptions2(result2.options);
+      setPlotData2([result2.xData, ...result2.yData]);
+    }
 
-  }, [data, hsl, width, height, sm, generatePlotConfig, generateFieldsToPlot, selectedFields1, selectedFields2]);
+
+  }, [data, hsl, width, height, sm, generatePlotConfig, generateFieldsToPlot, selectedFields1, selectedFields2, showSingleGraph]);
 
   if (!sm) {
     return <LandscapeNotice />;
@@ -179,7 +183,7 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
   return (
     <Space direction="vertical" size="large">
       <UplotReact options={options1!} data={plotData1!} />
-      <UplotReact options={options2!} data={plotData2!} />
+      {!showSingleGraph && <UplotReact options={options2!} data={plotData2!} />}
     </Space>
   );
 };

src/pages/Logs.tsx

@@ -104,6 +104,7 @@ const Logs = ({
   const contentRef = useRef<HTMLDivElement | null>(null);
   const [canvasWidth, setCanvasWidth] = useState(0);
   const [canvasHeight, setCanvasHeight] = useState(0);
+  const [showSingleGraph, setShowSingleGraph] = useState(false);
   const { fetchLogFileWithProgress } = useServerStorage();
   const routeMatch = useMatch(Routes.TUNE_LOGS_FILE);
   const navigate = useNavigate();
@@ -113,9 +114,13 @@ const Logs = ({
 
     if (window.innerHeight > minCanvasHeightInner) {
       setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
+      setShowSingleGraph(false);
     } else {
+      // not enough space to put 2 graphs
+      setShowSingleGraph(true);
       setCanvasHeight(minCanvasHeightInner / 2);
     }
+
   }, []);
 
   const siderProps = {
@@ -291,7 +296,7 @@ const Logs = ({
                 key: 'fields',
                 children: (
                   <>
-                    <div style={{ height: '45%' }}>
+                    <div style={showSingleGraph ? {} : { height: '45%' }}>
                       <PerfectScrollbar options={{ suppressScrollX: true }}>
                         <Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}>
                           {fields.map((field) => (
@@ -304,20 +309,24 @@ const Logs = ({
                         </Checkbox.Group>
                       </PerfectScrollbar>
                     </div>
-                    <Divider />
-                    <div style={{ height: '45%' }}>
-                      <PerfectScrollbar options={{ suppressScrollX: true }}>
-                        <Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
-                          {fields.map((field) => (
-                            <Row key={field.name}>
-                              <Checkbox key={field.name} value={field.name}>
-                                {isExpression(field.label) ? stripExpression(field.label) : field.label}
-                              </Checkbox>
-                            </Row>
-                          ))}
-                        </Checkbox.Group>
-                      </PerfectScrollbar>
-                    </div>
+                    {!showSingleGraph && (
+                      <>
+                        <Divider />
+                        <div style={{ height: '45%' }}>
+                          <PerfectScrollbar options={{ suppressScrollX: true }}>
+                            <Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
+                              {fields.map((field) => (
+                                <Row key={field.name}>
+                                  <Checkbox key={field.name} value={field.name}>
+                                    {isExpression(field.label) ? stripExpression(field.label) : field.label}
+                                  </Checkbox>
+                                </Row>
+                              ))}
+                            </Checkbox.Group>
+                          </PerfectScrollbar>
+                        </div>
+                      </>
+                    )}
                   </>
                 ),
               },
@@ -361,6 +370,7 @@ const Logs = ({
                 height={canvasHeight}
                 selectedFields1={prepareSelectedFields(selectedFields1)}
                 selectedFields2={prepareSelectedFields(selectedFields2)}
+                showSingleGraph={showSingleGraph}
               />
               :
               <Space