Fixed issue with linked rules not playing well with rulemap/scenarios

bcgov · Jul 9, 2024 · b51c741 · b51c741
1 parent 5b0788f
commit b51c741
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/app/components/RulesDecisionGraph/LinkRuleComponent.tsx b/app/components/RulesDecisionGraph/LinkRuleComponent.tsx
@@ -76,7 +76,7 @@ export default function LinkRuleComponent({ specification, id, isSelected, name
               />
               <Button onClick={closeRuleDrawer}>Done</Button>
             </Flex>
-            {goRulesJSONFilename && <SimulationViewer jsonFile={goRulesJSONFilename} isEditable={false} />}
+            {goRulesJSONFilename && <SimulationViewer ruleId={id} jsonFile={goRulesJSONFilename} />}
           </>
         ) : (
           <Spin tip="Loading rules..." size="large" className={styles.spinner}>

diff --git a/app/components/RulesDecisionGraph/RulesDecisionGraph.tsx b/app/components/RulesDecisionGraph/RulesDecisionGraph.tsx
@@ -41,24 +41,19 @@ export default function RulesDecisionGraph({
   const [reactFlowRef, setReactFlowRef] = useState<ReactFlowInstance>();
 
   useEffect(() => {
-    setGraphValue(graphJSON);
-    fitGraphToView();
-  }, [graphJSON]);
-
-  useEffect(() => {
-    fitGraphToView();
-  }, [reactFlowRef]);
-
-  // Ensure graph is in view
-  const fitGraphToView = () => {
-    if (reactFlowRef) {
-      reactFlowRef.fitView();
-      // Set timeout to fix issue with trying to fit view because fully loaded
-      setTimeout(() => {
+    // Ensure graph is in view
+    const fitGraphToView = () => {
+      if (reactFlowRef) {
         reactFlowRef.fitView();
-      }, 100);
-    }
-  };
+        // Set timeout to fix issue with trying to fit view because fully loaded
+        setTimeout(() => {
+          reactFlowRef.fitView();
+        }, 100);
+      }
+    };
+    // Fit to view
+    fitGraphToView();
+  }, [graphValue, reactFlowRef]);
 
   // Can set additional react flow options here if we need to change how graph looks when it's loaded in
   const reactFlowInit = (reactFlow: ReactFlowInstance) => {

diff --git a/app/components/SimulationViewer/SimulationViewer.tsx b/app/components/SimulationViewer/SimulationViewer.tsx
@@ -19,8 +19,8 @@ const RulesDecisionGraph = dynamic(() => import("../RulesDecisionGraph"), { ssr:
 interface SimulationViewerProps {
   ruleId: string;
   jsonFile: string;
-  rulemap: RuleMap;
-  scenarios: Scenario[];
+  rulemap?: RuleMap;
+  scenarios?: Scenario[];
   editing?: boolean;
 }
 
@@ -41,8 +41,8 @@ export default function SimulationViewer({
     );
   };
 
-  const ruleMapInputs = createRuleMap(rulemap.inputs);
-  const ruleMapResultOutputs = createRuleMap(rulemap.resultOutputs);
+  const ruleMapInputs = createRuleMap(rulemap?.inputs || []);
+  const ruleMapResultOutputs = createRuleMap(rulemap?.resultOutputs || []);
 
   const [graphJSON, setGraphJSON] = useState<DecisionGraphType>();
   const [simulation, setSimulation] = useState<Simulation>();
@@ -116,7 +116,7 @@ export default function SimulationViewer({
     setResetTrigger((prev) => !prev);
   };
 
-  const scenarioTab = (
+  const scenarioTab = scenarios && rulemap && (
     <Flex gap="small" vertical>
       <ScenarioViewer
         scenarios={scenarios}
@@ -129,7 +129,7 @@ export default function SimulationViewer({
     </Flex>
   );
 
-  const scenarioGeneratorTab = (
+  const scenarioGeneratorTab = scenarios && rulemap && (
     <Flex gap="small">
       <ScenarioGenerator
         scenarios={scenarios}
@@ -211,16 +211,18 @@ export default function SimulationViewer({
           isEditable={editing}
         />
       </div>
-      <Flex justify="space-between" align="center" className={styles.contentSection}>
-        <Flex gap="middle" justify="space-between">
-          <Tabs
-            defaultActiveKey={editing ? "3" : "1"}
-            tabBarStyle={{ gap: "10rem" }}
-            items={filteredItems}
-            onChange={handleTabChange}
-          ></Tabs>
+      {scenarios && rulemap && (
+        <Flex justify="space-between" align="center" className={styles.contentSection}>
+          <Flex gap="middle" justify="space-between">
+            <Tabs
+              defaultActiveKey={editing ? "3" : "1"}
+              tabBarStyle={{ gap: "10rem" }}
+              items={filteredItems}
+              onChange={handleTabChange}
+            ></Tabs>
+          </Flex>
         </Flex>
-      </Flex>
+      )}
     </Flex>
   );
 }