diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx index 6efa4565..50496b47 100644 --- a/ui100/src/ApiConsole.tsx +++ b/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(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(); @@ -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 => { diff --git a/ui100/src/TabularView.tsx b/ui100/src/TabularView.tsx index 64434cd2..2dba19d5 100644 --- a/ui100/src/TabularView.tsx +++ b/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", }); diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx index db14a8d1..4ff3f04c 100644 --- a/ui100/src/Visualizer.tsx +++ b/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; diff --git a/ui100/src/model/visualizer.ts b/ui100/src/model/visualizer.ts index f1e1bdd9..71504d95 100644 --- a/ui100/src/model/visualizer.ts +++ b/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 +} \ No newline at end of file