move overview->[nodes, edges] state management into ApiConsole (#819, #823)

ui100/src/ApiConsole.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useRef, useState} from "react";
 import {Configuration, MetadataApi} from "./api";
-import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
+import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
 import {Grid2} from "@mui/material";
 import NavBar from "./NavBar.tsx";
 import Visualizer from "./Visualizer.tsx";
@@ -20,6 +20,8 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const overview = useStore((state) => state.overview);
     const updateOverview = useStore((state) => state.updateOverview);
     const oldVov = useRef<VisualOverview>(overview);
+    const updateNodes = useStore((state) => state.updateNodes);
+    const updateEdges = useStore((state) => state.updateEdges);
     const selectedNode = useStore((state) => state.selectedNode);
     const updateEnvironments = useStore((state) => state.updateEnvironments);
     const [mainPanel, setMainPanel] = useState(<Visualizer />);
@@ -58,6 +60,14 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
                     console.log("refreshed vov", oldVov.current.nodes, newVov.nodes);
                     updateOverview(newVov);
                     oldVov.current = newVov;
+
+                    let laidOut = layout(newVov.nodes, newVov.edges);
+                    let selected = laidOut.nodes.map((n) => ({
+                        ...n,
+                        selected: selectedNode ? selectedNode.id === n.id : false,
+                    }));
+                    updateNodes(selected);
+                    updateEdges(laidOut.edges);
                 }
             })
             .catch(e => {

ui100/src/TabularView.tsx

@@ -1,7 +1,6 @@
 import {Box, Paper} from "@mui/material";
 import useStore from "./model/store.ts";
 import {
-    getMRT_RowSelectionHandler,
     MaterialReactTable,
     type MRT_ColumnDef,
     MRT_RowSelectionState,
@@ -60,6 +59,12 @@ const TabularView = () => {
                 cursor: 'pointer',
             },
         }),
+        muiToolbarAlertBannerProps: {
+            sx: {
+                color: "#241775",
+                backgroundColor: "#f5fde7",
+            }
+        },
         positionToolbarAlertBanner: "bottom",
     });
 

ui100/src/Visualizer.tsx

@@ -11,9 +11,6 @@ import {
     useOnViewportChange,
     Viewport
 } from "@xyflow/react";
-import {VisualOverview} from "./model/visualizer.ts";
-import {useEffect} from "react";
-import {stratify, tree} from "d3-hierarchy";
 import ShareNode from "./ShareNode.tsx";
 import EnvironmentNode from "./EnvironmentNode.tsx";
 import AccountNode from "./AccountNode.tsx";
@@ -29,15 +26,12 @@ const nodeTypes = {
 };
 
 const Visualizer = () => {
-    const overview = useStore((state) => state.overview);
-    const selectedNode = useStore((state) => state.selectedNode);
     const updateSelectedNode = useStore((state) => state.updateSelectedNode);
     const viewport = useStore((state) => state.viewport);
     const updateViewport = useStore((state) => state.updateViewport);
     const nodes = useStore((state) => state.nodes);
     const updateNodes = useStore((state) => state.updateNodes);
     const edges = useStore((state) => state.edges);
-    const updateEdges = useStore((state) => state.updateEdges);
 
     const onNodesChange = (changes) => {
         updateNodes(applyNodeChanges(changes, nodes));
@@ -57,27 +51,6 @@ const Visualizer = () => {
         }
     };
 
-    const layout = (nodes, edges): VisualOverview => {
-        if(!nodes) {
-            return { nodes: [], edges: [] };
-        }
-        let g = tree();
-        if(nodes.length === 0) return { nodes, edges };
-        const width = 100;
-        const height = 75;
-        const hierarchy = stratify()
-            .id((node) => node.id)
-            .parentId((node) => edges.find((edge) => edge.target === node.id)?.source);
-        const root = hierarchy(nodes);
-        const layout = g.nodeSize([width * 2, height * 2])(root);
-        return {
-            nodes: layout
-                .descendants()
-                .map((node) => ({...node.data, position: {x: node.x, y: node.y}})),
-            edges,
-        } as VisualOverview
-    }
-
     const nodeColor = (node) => {
         if(node.selected) {
             return "#9bf316";
@@ -85,18 +58,6 @@ const Visualizer = () => {
         return "#241775";
     }
 
-    useEffect(() => {
-        if(overview) {
-            let laidOut = layout(overview.nodes, overview.edges);
-            let selected = laidOut.nodes.map((n) => ({
-                ...n,
-                selected: selectedNode ? selectedNode.id === n.id : false,
-            }));
-            updateNodes(selected);
-            updateEdges(laidOut.edges);
-        }
-    }, [overview]);
-
     let fitView = false;
     if(viewport.x === 0 && viewport.y === 0 && viewport.zoom === 1) {
         fitView = true;

ui100/src/model/visualizer.ts

@@ -1,6 +1,7 @@
 import {Overview} from "../api";
 import {Edge, Node} from "@xyflow/react";
 import {User} from "./user.ts";
+import {stratify, tree} from "d3-hierarchy";
 
 export class VisualOverview {
     nodes: Node[];
@@ -150,3 +151,24 @@ export const nodesEqual = (a: Node[], b: Node[]) => {
     if(a.length !== b.length) return false;
     return a.every((e, i) => e.id === b[i].id && e.data.limited === b[i].data.limited && e.data.label === b[i].data.label);
 }
+
+export const layout = (nodes, edges): VisualOverview => {
+    if(!nodes) {
+        return { nodes: [], edges: [] };
+    }
+    let g = tree();
+    if(nodes.length === 0) return { nodes, edges };
+    const width = 100;
+    const height = 75;
+    const hierarchy = stratify()
+        .id((node) => node.id)
+        .parentId((node) => edges.find((edge) => edge.target === node.id)?.source);
+    const root = hierarchy(nodes);
+    const layout = g.nodeSize([width * 2, height * 2])(root);
+    return {
+        nodes: layout
+            .descendants()
+            .map((node) => ({...node.data, position: {x: node.x, y: node.y}})),
+        edges,
+    } as VisualOverview
+}