[#476] - db click navigation

src/components/editor/faultTree/Editor.tsx

@@ -204,30 +204,6 @@ const Editor = () => {
     refreshTree();
   };
 
-  const redirectToInstance = (navigateFrom: string) => {
-    if (faultTree?.manifestingEvent?.children) {
-      let map: { [name: string]: string } = {};
-      let children = faultTree?.manifestingEvent?.children;
-      if (faultTree?.manifestingEvent?.children.length > 0) {
-        faultTree?.manifestingEvent?.children.map((child) => {
-          if (child.children) {
-            children = [...children, ...child.children];
-          }
-        });
-      }
-      for (let i = 0; i < children.length; i++) {
-        const node = children[i];
-        const nodeKey = node.iri;
-        const nodeValue = node?.references?.isPartOf;
-        if (nodeKey && nodeValue) {
-          map[nodeKey] = nodeValue;
-        }
-      }
-      const redirectTo = map[navigateFrom].split("/").pop();
-      history(`/fta/${redirectTo}`);
-    }
-  };
-
   return (
     <div onContextMenu={handleOnContextMenu}>
       {faultTree && (
@@ -249,7 +225,6 @@ const Editor = () => {
           showPath={showPath}
           showTable={showTable}
           onScenarioSelect={(scenario: FaultEventScenario) => handleOnScenarioSelect(scenario)}
-          redirectToInstance={redirectToInstance}
         />
       )}
 

src/components/editor/faultTree/canvas/EditorCanvas.tsx

@@ -25,6 +25,7 @@ import { useCurrentFaultTree } from "@hooks/useCurrentFaultTree";
 import { useFaultTrees } from "@hooks/useFaultTrees";
 import { calculateCutSets } from "@services/faultTreeService";
 import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
+import { useNavigate } from "react-router-dom";
 
 enum MOVE_NODE {
   DRAGGING = 0,
@@ -49,7 +50,6 @@ interface Props {
   showTable: boolean;
   possibleFaultEventScenarios: FaultEventScenario[];
   onScenarioSelect: (scenario: FaultEventScenario) => void;
-  redirectToInstance: (navigateFrom: string) => void;
 }
 
 const EditorCanvas = ({
@@ -70,10 +70,10 @@ const EditorCanvas = ({
   showTable,
   possibleFaultEventScenarios,
   onScenarioSelect,
-  redirectToInstance,
 }: Props) => {
   const { classes } = useStyles();
   const theme = useTheme();
+  const history = useNavigate();
   const { t } = useTranslation();
 
   const containerRef = useRef(null);
@@ -150,11 +150,13 @@ const EditorCanvas = ({
         handleNodeMove(MOVE_NODE.RELEASING, elementView, evt, x, y);
       },
       "element:pointerdblclick": (elementView: joint.dia.ElementView) => {
-        const navigateFrom = elementView?.model.attributes["custom/faultEventIri"];
-        redirectToInstance(navigateFrom);
-        setTimeout(() => {
-          diagramZoom.reset();
-        }, 100);
+        if (elementView?.model.attributes[JOINTJS_NODE_MODEL.redirectTo]) {
+          const redirectTo = elementView?.model.attributes[JOINTJS_NODE_MODEL.redirectTo];
+          history(`/fta/${redirectTo}`);
+          setTimeout(() => {
+            diagramZoom.reset();
+          }, 100);
+        }
       },
       "blank:pointerclick": () => onBlankPointerClick(),
       "blank:pointerdown": () => diagramZoom.enablePan(),

src/components/editor/faultTree/shapes/RenderTree.tsx

@@ -92,6 +92,13 @@ const renderTree = async (container, node, parentShape = null, pathsToHighlight,
   }
   // @ts-ignore
   nodeShape.set(JOINTJS_NODE_MODEL.faultEventIri, node.iri);
+
+  if (node?.references?.isPartOf) {
+    const iriOfReference = node.references.isPartOf.split("/").pop();
+    // @ts-ignore
+    nodeShape.set(JOINTJS_NODE_MODEL.redirectTo, iriOfReference);
+  }
+
   const r = node.rectangle;
   if (r && r.x && r.y && r.width && r.height) {
     nodeShape.position(node.rectangle.x, node.rectangle.y);

src/components/editor/faultTree/shapes/constants.tsx

@@ -1,6 +1,7 @@
 export const JOINTJS_NODE_MODEL = {
   faultEventIri: "custom/faultEventIri",
   hasPersistentPosition: "custom/has-persistent-position",
+  redirectTo: "custom/redirectTo",
 };
 
 export const ERROR_PATH_COLOR = "#ff7f50";