diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx index 5a0adf96..a4c38af5 100644 --- a/ui100/src/ApiConsole.tsx +++ b/ui100/src/ApiConsole.tsx @@ -1,6 +1,6 @@ import {JSX, useCallback, useEffect, useRef, useState} from "react"; import {Configuration, MetadataApi} from "./api"; -import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts"; +import {Graph, layout, mergeGraph, nodesEqual} from "./model/graph.ts"; import {Grid2} from "@mui/material"; import NavBar from "./NavBar.tsx"; import Visualizer from "./Visualizer.tsx"; @@ -17,9 +17,9 @@ interface ApiConsoleProps { const ApiConsole = ({ logout }: ApiConsoleProps) => { const user = useStore((state) => state.user); - const overview = useStore((state) => state.overview); - const updateOverview = useStore((state) => state.updateOverview); - const oldVov = useRef(overview); + const graph = useStore((state) => state.graph); + const updateGraph = useStore((state) => state.updateGraph); + const oldGraph = useRef(graph); const updateNodes = useStore((state) => state.updateNodes); const updateEdges = useStore((state) => state.updateEdges); const selectedNode = useStore((state) => state.selectedNode); @@ -55,11 +55,11 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => { let api = new MetadataApi(cfg); api.overview() .then(d => { - let newVov = mergeVisualOverview(oldVov.current, user, d.accountLimited!, d); - if(!nodesEqual(oldVov.current.nodes, newVov.nodes)) { - console.log("refreshed vov", oldVov.current.nodes, newVov.nodes); - updateOverview(newVov); - oldVov.current = newVov; + let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d); + if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) { + console.log("refreshed vov", oldGraph.current.nodes, newVov.nodes); + updateGraph(newVov); + oldGraph.current = newVov; let laidOut = layout(newVov.nodes, newVov.edges); let selected = laidOut.nodes.map((n) => ({ diff --git a/ui100/src/model/visualizer.ts b/ui100/src/model/graph.ts similarity index 95% rename from ui100/src/model/visualizer.ts rename to ui100/src/model/graph.ts index 71504d95..5773e08a 100644 --- a/ui100/src/model/visualizer.ts +++ b/ui100/src/model/graph.ts @@ -3,13 +3,13 @@ import {Edge, Node} from "@xyflow/react"; import {User} from "./user.ts"; import {stratify, tree} from "d3-hierarchy"; -export class VisualOverview { +export class Graph { nodes: Node[]; edges: Edge[]; } -export const mergeVisualOverview = (oldVov: VisualOverview, u: User, limited: boolean, newOv: Overview): VisualOverview => { - let newVov = new VisualOverview(); +export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Overview): Graph => { + let newVov = new Graph(); let accountNode = { id: u.token, @@ -152,7 +152,7 @@ export const nodesEqual = (a: Node[], b: Node[]) => { 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 => { +export const layout = (nodes, edges): Graph => { if(!nodes) { return { nodes: [], edges: [] }; } @@ -170,5 +170,5 @@ export const layout = (nodes, edges): VisualOverview => { .descendants() .map((node) => ({...node.data, position: {x: node.x, y: node.y}})), edges, - } as VisualOverview + } as Graph } \ No newline at end of file diff --git a/ui100/src/model/store.ts b/ui100/src/model/store.ts index 950f1d85..884ecc92 100644 --- a/ui100/src/model/store.ts +++ b/ui100/src/model/store.ts @@ -1,12 +1,12 @@ import {create} from "zustand"; import {Environment} from "../api"; -import {VisualOverview} from "./visualizer.ts"; +import {Graph} from "./graph.ts"; import {Edge, Node, Viewport} from "@xyflow/react"; import {User} from "./user.ts"; type StoreState = { user: User; - overview: VisualOverview; + graph: Graph; environments: Array; nodes: Node[]; edges: Edge[]; @@ -16,7 +16,7 @@ type StoreState = { type StoreAction = { updateUser: (user: StoreState['user']) => void, - updateOverview: (vov: StoreState['overview']) => void, + updateGraph: (vov: StoreState['graph']) => void, updateEnvironments: (environments: StoreState['environments']) => void, updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void, updateNodes: (nodes: StoreState['nodes']) => void, @@ -26,14 +26,14 @@ type StoreAction = { const useStore = create((set) => ({ user: null, - overview: new VisualOverview(), + graph: new Graph(), environments: new Array(), nodes: [], edges: [], selectedNode: null, viewport: {x: 0, y: 0, zoom: 1}, updateUser: (user) => set({user: user}), - updateOverview: (vov) => set({overview: vov}), + updateGraph: (vov) => set({overview: vov}), updateEnvironments: (environments) => set({environments: environments}), updateNodes: (nodes) => set({nodes: nodes}), updateEdges: (edges) => set({edges: edges}),