wow... selection working (#804)

ui100/src/ApiConsole.tsx

@@ -5,6 +5,7 @@ import {Box} from "@mui/material";
 import NavBar from "./NavBar.tsx";
 import {User} from "./model/user.ts";
 import Visualizer from "./Visualizer.tsx";
+import {Node} from "@xyflow/react";
 
 interface ApiConsoleProps {
     user: User;
@@ -14,6 +15,7 @@ interface ApiConsoleProps {
 const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
     const [version, setVersion] = useState("no version set");
     const [overview, setOverview] = useState(new VisualOverview());
+    const [selectedNode, setSelectedNode] = useState(null as Node);
     const oldVov = useRef<VisualOverview>(overview);
 
     useEffect(() => {
@@ -66,7 +68,11 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
         <div>
             <NavBar logout={logout} />
             <Box>
-                <Visualizer vov={overview} />
+                <Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
+                <div>
+                    <h1>Hello</h1>
+                    <h2><pre>{JSON.stringify(selectedNode)}</pre></h2>
+                </div>
             </Box>
         </div>
     );

ui100/src/Visualizer.tsx

@@ -1,6 +1,15 @@
 import "@xyflow/react/dist/style.css";
 import "./react-flow.css";
-import {Background, Controls, MiniMap, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState} from "@xyflow/react";
+import {
+    Background,
+    Controls,
+    MiniMap,
+    Node,
+    ReactFlow,
+    ReactFlowProvider,
+    useEdgesState,
+    useNodesState
+} from "@xyflow/react";
 import {VisualOverview} from "./model/visualizer.ts";
 import {useEffect} from "react";
 import {stratify, tree} from "d3-hierarchy";
@@ -11,6 +20,7 @@ import AccessNode from "./AccessNode.tsx";
 
 interface VisualizerProps {
     vov: VisualOverview;
+    onSelectionChanged: (node: Node) => void;
 }
 
 const nodeTypes = {
@@ -20,10 +30,18 @@ const nodeTypes = {
     share: ShareNode
 };
 
-const Visualizer = ({ vov }: VisualizerProps) => {
+const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
+    const onSelectionChange = ({ nodes }) => {
+        if(nodes.length > 0) {
+            onSelectionChanged(nodes[0]);
+        } else {
+            onSelectionChanged(null as Node);
+        }
+    };
+
     const layout = (nodes, edges): VisualOverview => {
         if(!nodes) {
             return { nodes: [], edges: [] };
@@ -58,6 +76,7 @@ const Visualizer = ({ vov }: VisualizerProps) => {
             edges={edges}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
+            onSelectionChange={onSelectionChange}
             nodesDraggable={false}
             fitView
         >
@@ -68,11 +87,11 @@ const Visualizer = ({ vov }: VisualizerProps) => {
     );
 }
 
-export default ({ vov }: VisualizerProps) => {
+export default ({ vov, onSelectionChanged }: VisualizerProps) => {
     return (
-        <div style={{ height: "400px" }}>
+        <div style={{ height: "600px" }}>
             <ReactFlowProvider>
-                <Visualizer vov={vov}/>
+                <Visualizer vov={vov} onSelectionChanged={onSelectionChanged} />
             </ReactFlowProvider>
         </div>
     );

ui100/src/model/visualizer.ts

@@ -113,7 +113,6 @@ export const mergeVisualOverview = (oldVov: VisualOverview, u: User, limited: bo
         return oldVov;
     }
 
-    // preserve nodes that exist in the new overview and remove those that do not.
     let outNodes = [];
     if(oldVov.nodes) {
         outNodes = oldVov.nodes.filter(oldNode => newVov.nodes.find(newNode => newNode.id === oldNode.id && newNode.data.limited == oldNode.data.limited && newNode.data.label === oldNode.data.label));