disable graph commands when in readonly

MetaCell · Dec 11, 2024 · b3e8a36 · b3e8a36
1 parent f320e25
commit b3e8a36
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git a/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx b/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx
@@ -50,6 +50,7 @@ interface GraphDiagramProps {
   serializedGraph?: any | undefined;
   statement: ConnectivityStatement;
   setStatement: (statement: any) => void;
+  isDisabled?: boolean;
 }
 
 const GraphDiagram: React.FC<GraphDiagramProps> = ({
@@ -60,6 +61,7 @@ const GraphDiagram: React.FC<GraphDiagramProps> = ({
   serializedGraph,
   statement,
   setStatement,
+  isDisabled = false,
 }) => {
   const theme = useTheme();
   const { statementId } = useParams();
@@ -285,6 +287,7 @@ const GraphDiagram: React.FC<GraphDiagramProps> = ({
         switchLockedGraph={switchLockedGraph}
         statement={statement}
         setStatement={setStatement}
+        isDisabled={isDisabled}
       />
       <Box
         display="flex"

diff --git a/frontend/src/components/ProofingTab/GraphDiagram/NavigationMenu.tsx b/frontend/src/components/ProofingTab/GraphDiagram/NavigationMenu.tsx
@@ -35,10 +35,21 @@ interface NavigationMenuProps {
   switchLockedGraph: (locked: boolean) => void;
   statement: ConnectivityStatement;
   setStatement: (statement: any) => void;
+  isDisabled?: boolean;
 }
 
 const NavigationMenu = (props: NavigationMenuProps) => {
-  const {engine, statementId, toggleRankdir, resetGraph, isGraphLocked, switchLockedGraph, statement, setStatement} = props
+  const {
+    engine,
+    statementId,
+    toggleRankdir,
+    resetGraph,
+    isGraphLocked,
+    switchLockedGraph,
+    statement,
+    setStatement,
+    isDisabled
+  } = props
   const [isSaving, setIsSaving] = useState<boolean>(false)
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [dialogConfig, setDialogConfig] = useState({
@@ -239,43 +250,51 @@ const NavigationMenu = (props: NavigationMenuProps) => {
                 <FitScreenOutlinedIcon/>
               </IconButton>
             </Tooltip>
-            <Tooltip arrow title='Switch orientation'>
-              <IconButton onClick={switchOrientation} disabled={isGraphLocked}>
-                <CameraswitchOutlinedIcon />
-              </IconButton>
-            </Tooltip>
-            <Divider />
-            <Tooltip arrow title='Reset to default visualisation'>
-              <IconButton onClick={redrawGraph} disabled={isGraphLocked}>
-                <RestartAltOutlinedIcon />
-              </IconButton>
-            </Tooltip>
-          </Stack>
-          <Stack direction="row" spacing="1rem" alignItems='center'>
-            {
-              wasChangeDetected || positionChangeOnly ? (
-                <Tooltip arrow title='This diagram does not match the Path Builder. It will be updated with default routing if you leave this page.'>
-                  <Alert severity="warning">The diagram is outdated, please use the reset button on the left to update the diagram</Alert>
+            {!isDisabled && (
+              <>
+                <Tooltip arrow title='Switch orientation'>
+                <IconButton onClick={switchOrientation} disabled={isGraphLocked}>
+                  <CameraswitchOutlinedIcon />
+                </IconButton>
                 </Tooltip>
-              ) : (
-                !isResetInvoked && (
-                  <Tooltip arrow title='The diagram is saved for all users'>
-                    <CheckCircleOutlineRoundedIcon
-                      sx={{
-                        color: "#039855 !important",
-                      }}
-                    />
-                  </Tooltip>
-                )
-              )
-            }
-            <Divider />
-            <CustomSwitch
-              disabled={(wasChangeDetected && !positionChangeOnly) || (wasChangeDetected && positionChangeOnly)}
-              locked={isGraphLocked && !isResetInvoked}
-              setLocked={(lock: boolean) => toggleGraphLock(lock)}
-            />
+                <Divider />
+                <Tooltip arrow title='Reset to default visualisation'>
+                  <IconButton onClick={redrawGraph} disabled={isGraphLocked}>
+                    <RestartAltOutlinedIcon />
+                  </IconButton>
+                </Tooltip>
+              </>
+            )}
           </Stack>
+          {!isDisabled && (
+            <>
+              <Stack direction="row" spacing="1rem" alignItems='center'>
+                {
+                  wasChangeDetected || positionChangeOnly ? (
+                    <Tooltip arrow title='This diagram does not match the Path Builder. It will be updated with default routing if you leave this page.'>
+                      <Alert severity="warning">The diagram is outdated, please use the reset button on the left to update the diagram</Alert>
+                    </Tooltip>
+                  ) : (
+                    !isResetInvoked && (
+                      <Tooltip arrow title='The diagram is saved for all users'>
+                        <CheckCircleOutlineRoundedIcon
+                          sx={{
+                            color: "#039855 !important",
+                          }}
+                        />
+                      </Tooltip>
+                    )
+                  )
+                }
+                <Divider />
+                <CustomSwitch
+                  disabled={(wasChangeDetected && !positionChangeOnly) || (wasChangeDetected && positionChangeOnly)}
+                  locked={isGraphLocked && !isResetInvoked}
+                  setLocked={(lock: boolean) => toggleGraphLock(lock)}
+                />
+              </Stack>
+            </>
+          )}
         </Stack>
       )
     }

diff --git a/frontend/src/components/ProofingTab/ProofingTab.tsx b/frontend/src/components/ProofingTab/ProofingTab.tsx
@@ -81,7 +81,7 @@ const ProofingTab = (props: any) => {
                   p: 0
                 }}>Download graph</Button>
               </Box>
-              <StatementChart statement={statement} setStatement={setStatement} />
+              <StatementChart statement={statement} setStatement={setStatement} isDisabled={isDisabled} />
             </Stack>
             {hasJourney && (
               <>

diff --git a/frontend/src/components/ProofingTab/StatementChart.tsx b/frontend/src/components/ProofingTab/StatementChart.tsx
@@ -5,8 +5,8 @@ import {ConnectivityStatement} from "../../apiclient/backend";
 import {useTheme} from "@mui/system";
 import GraphDiagram from "./GraphDiagram/GraphDiagram";
 
-const StatementChart = (props: { statement: ConnectivityStatement, setStatement: () => void }) => {
-    const {statement, setStatement} = props;
+const StatementChart = (props: { statement: ConnectivityStatement, setStatement: () => void, isDisabled: boolean }) => {
+    const {statement, setStatement, isDisabled} = props;
     const theme = useTheme();
 
     const displayChart = statement.origins && statement.origins.length > 0
@@ -21,6 +21,7 @@ const StatementChart = (props: { statement: ConnectivityStatement, setStatement:
                                   serializedGraph={statement.graph_rendering_state?.serialized_graph}
                                   statement={statement}
                                   setStatement={setStatement}
+                                  isDisabled={isDisabled}
                     />
             ) : (
               <Box