fix(viz): fixes #255, fix opening properties for all nodes

KaotoIO · Oct 26, 2023 · c9b3255 · c9b3255
1 parent b3d4a52
commit c9b3255
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -37,6 +37,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
   /** State for @patternfly/react-topology */
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [selectedNode, setSelectedNode] = useState<CanvasNode | undefined>(undefined);
+  const [nodes, setNodes] = useState<CanvasNode[]>([]);
 
   /** Context to interact with the Canvas catalog */
   const catalogModalContext = useContext(CatalogModalContext);
@@ -76,13 +77,16 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
     });
   }, [catalogModalContext, controller]);
 
-  const handleSelection = useCallback((selectedIds: string[]) => {
-    setSelectedIds(selectedIds);
+  const handleSelection = useCallback(
+    (selectedIds: string[]) => {
+      setSelectedIds(selectedIds);
 
-    /** Current support for single selection at the moment */
-    const selectedId = selectedIds[0];
-    setSelectedNode(CanvasService.nodes.find((node) => node.id === selectedId));
-  }, []);
+      /** Current support for single selection at the moment */
+      const selectedId = selectedIds[0];
+      setSelectedNode(nodes.find((node) => node.id === selectedId));
+    },
+    [nodes],
+  );
 
   /** Set up the controller one time */
   useEffect(() => {
@@ -100,7 +104,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleSelection]);
 
   /** Draw graph */
   useEffect(() => {
@@ -117,6 +121,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
       }
     });
 
+    setNodes([...nodes]);
     const model: Model = {
       nodes,
       edges,

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -491,7 +491,7 @@ exports[`Canvas should render correctly 1`] = `
               </div>
               <div
                 class="pf-v5-c-toolbar__expandable-content"
-                id="pf-topology-control-bar-0-expandable-content-0"
+                id="pf-topology-control-bar-0-expandable-content-1"
               >
                 <div
                   class="pf-v5-c-toolbar__group"
@@ -1009,7 +1009,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
               </div>
               <div
                 class="pf-v5-c-toolbar__expandable-content"
-                id="pf-topology-control-bar-1-expandable-content-1"
+                id="pf-topology-control-bar-1-expandable-content-3"
               >
                 <div
                   class="pf-v5-c-toolbar__group"
@@ -1554,7 +1554,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
               </div>
               <div
                 class="pf-v5-c-toolbar__expandable-content"
-                id="pf-topology-control-bar-2-expandable-content-2"
+                id="pf-topology-control-bar-2-expandable-content-5"
               >
                 <div
                   class="pf-v5-c-toolbar__group"