diff --git a/src/components/Logs/LogCanvas.tsx b/src/components/Logs/LogCanvas.tsx index 5218e22..5b7d355 100644 --- a/src/components/Logs/LogCanvas.tsx +++ b/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 ; @@ -179,7 +183,7 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr return ( - + {!showSingleGraph && } ); }; diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx index 5a52c78..14ea230 100644 --- a/src/pages/Logs.tsx +++ b/src/pages/Logs.tsx @@ -104,6 +104,7 @@ const Logs = ({ const contentRef = useRef(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: ( <> -
+
{fields.map((field) => ( @@ -304,20 +309,24 @@ const Logs = ({
- -
- - - {fields.map((field) => ( - - - {isExpression(field.label) ? stripExpression(field.label) : field.label} - - - ))} - - -
+ {!showSingleGraph && ( + <> + +
+ + + {fields.map((field) => ( + + + {isExpression(field.label) ? stripExpression(field.label) : field.label} + + + ))} + + +
+ + )} ), }, @@ -361,6 +370,7 @@ const Logs = ({ height={canvasHeight} selectedFields1={prepareSelectedFields(selectedFields1)} selectedFields2={prepareSelectedFields(selectedFields2)} + showSingleGraph={showSingleGraph} /> :