From dc069418033b5c7ef17abfaf824a6b0a923f120a Mon Sep 17 00:00:00 2001
From: Szymon Kania <26521377+ostatni5@users.noreply.github.com>
Date: Tue, 17 Oct 2023 21:30:15 +0200
Subject: [PATCH] Use name of page in `key` in results (#1275)

* Use name of page in `key` in results

* Disable grouping on input files
---
 src/JsRoot/GraphData.tsx                      |  2 +-
 .../components/Results/ResultsPanel.tsx       | 39 ++++++++++++++-----
 src/shared/components/tooltip/InfoTooltip.tsx |  6 ++-
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/JsRoot/GraphData.tsx b/src/JsRoot/GraphData.tsx
index ddfcfacac..eb380dae2 100644
--- a/src/JsRoot/GraphData.tsx
+++ b/src/JsRoot/GraphData.tsx
@@ -182,7 +182,7 @@ export function generateGraphs(
 		.map(({ page, graph, filter }, idx) => {
 			return (
 				<Grid
-					key={`graph_${name}${jobId ? '_' + jobId : ''}_${idx}`}
+					key={`graph_${name}${jobId ? '_' + jobId : ''}_${page.name ?? idx}`}
 					item
 					xs={12}>
 					<Card>
diff --git a/src/WrapperApp/components/Results/ResultsPanel.tsx b/src/WrapperApp/components/Results/ResultsPanel.tsx
index aee50a45a..1ef1df045 100644
--- a/src/WrapperApp/components/Results/ResultsPanel.tsx
+++ b/src/WrapperApp/components/Results/ResultsPanel.tsx
@@ -14,6 +14,7 @@ import { SyntheticEvent, useEffect, useState } from 'react';
 import { Estimator, generateGraphs, isPage0d, Page, Page0D } from '../../../JsRoot/GraphData';
 import { useDialog } from '../../../services/DialogService';
 import { useStore } from '../../../services/StoreService';
+import { InfoTooltip } from '../../../shared/components/tooltip/InfoTooltip';
 import { titleToKebabCase } from '../../../ThreeEditor/components/Dialog/CustomDialog';
 import { TabPanel } from '../Panels/TabPanel';
 import TablePage0D from './ResultsTable';
@@ -60,6 +61,8 @@ function ResultsPanel() {
 		return estimatorResults;
 	};
 
+	const resultsGeneratedFromProjectFile = !!simulation?.input.inputJson;
+
 	return (
 		<Box
 			sx={{
@@ -93,15 +96,32 @@ function ResultsPanel() {
 							alignItems: 'center',
 							gap: '0.5rem'
 						}}>
-						<FormControlLabel
-							control={
-								<Switch
-									checked={groupQuantities}
-									onChange={e => setGroupQuantities(e.target.checked)}
+						<Box
+							sx={{
+								display: 'flex',
+								alignItems: 'center',
+								marginRight: '0.5rem'
+							}}>
+							<FormControlLabel
+								sx={{ marginRight: '0' }}
+								control={
+									<Switch
+										checked={groupQuantities}
+										onChange={e => setGroupQuantities(e.target.checked)}
+										disabled={!resultsGeneratedFromProjectFile}
+									/>
+								}
+								label='Group Quantities'
+							/>
+							{!resultsGeneratedFromProjectFile && (
+								<InfoTooltip
+									sx={{ marginLeft: '0.25rem' }}
+									title={
+										'Grouping quantities is only available when results are generated from a project file.'
+									}
 								/>
-							}
-							label='Group Quantities'
-						/>
+							)}
+						</Box>
 						<Button
 							color='info'
 							size='small'
@@ -202,7 +222,8 @@ function ResultsPanel() {
 												)}
 												{generateGraphs(
 													estimator,
-													groupQuantities,
+													resultsGeneratedFromProjectFile &&
+														groupQuantities,
 													simulation?.jobId
 												)}
 											</Box>
diff --git a/src/shared/components/tooltip/InfoTooltip.tsx b/src/shared/components/tooltip/InfoTooltip.tsx
index 83f8900ee..fc5e96002 100644
--- a/src/shared/components/tooltip/InfoTooltip.tsx
+++ b/src/shared/components/tooltip/InfoTooltip.tsx
@@ -1,14 +1,18 @@
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { SxProps, Theme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import * as React from 'react';
 
 interface InfoTooltipProps {
 	title: string;
+	sx?: SxProps<Theme> | undefined;
 }
 
 export const InfoTooltip = (props: InfoTooltipProps) => {
 	return (
-		<Tooltip title={props.title}>
+		<Tooltip
+			title={props.title}
+			sx={props.sx}>
 			<InfoOutlinedIcon />
 		</Tooltip>
 	);