improvements to interface-switching code (#724)

ui100/src/ApiConsole.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from "react";
+import {useCallback, useEffect, useRef, useState} from "react";
 import {Configuration, MetadataApi} from "./api";
 import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
 import {Grid2} from "@mui/material";
@@ -9,6 +9,7 @@ import EnvironmentPanel from "./EnvironmentPanel.tsx";
 import SharePanel from "./SharePanel.tsx";
 import AccessPanel from "./AccessPanel.tsx";
 import useStore from "./model/store.ts";
+import SearchPanel from "./SearchPanel.tsx";
 
 interface ApiConsoleProps {
     logout: () => void;
@@ -20,10 +21,29 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const updateOverview = useStore((state) => state.updateOverview);
     const oldVov = useRef<VisualOverview>(overview);
     const selectedNode = useStore((state) => state.selectedNode);
-    const updateSelectedNode = useStore((state) => state.updateSelectedNode);
     const updateEnvironments = useStore((state) => state.updateEnvironments);
+    const [mainPanel, setMainPanel] = useState(<Visualizer />);
     const [sidePanel, setSidePanel] = useState(<></>);
 
+    let showVisualizer = true;
+    const handleKeyPress = useCallback((event) => {
+        if(event.ctrlKey === true && event.key === '`') {
+            showVisualizer = !showVisualizer;
+            if(showVisualizer) {
+                setMainPanel(<Visualizer />);
+            } else {
+                setMainPanel(<SearchPanel />);
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyPress);
+        return () => {
+            document.removeEventListener('keydown', handleKeyPress);
+        };
+    }, [handleKeyPress]);
+
     const retrieveOverview = () => {
         let cfg = new Configuration({
             headers: {
@@ -114,7 +134,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
             <NavBar logout={logout} />
             <Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
                 <Grid2 size="grow">
-                    <Visualizer vov={overview} onSelectionChanged={updateSelectedNode} />
+                    {mainPanel}
                 </Grid2>
                 <Grid2 size={4}>
                     {sidePanel}

ui100/src/PropertyTable.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import {useEffect, useState} from "react";
 import {camelToWords, objectToRows} from "./model/util.ts";
 import {Paper, Table, TableBody, TableCell, TableRow} from "@mui/material";
 

ui100/src/SearchPanel.tsx

@@ -0,0 +1,11 @@
+import {Paper} from "@mui/material";
+
+const SearchPanel = () => {
+    return (
+        <Paper>
+            <h1>SearchPanel</h1>
+        </Paper>
+    );
+};
+
+export default SearchPanel;

ui100/src/Visualizer.tsx

@@ -18,11 +18,7 @@ import EnvironmentNode from "./EnvironmentNode.tsx";
 import AccountNode from "./AccountNode.tsx";
 import AccessNode from "./AccessNode.tsx";
 import {Box} from "@mui/material";
-
-interface VisualizerProps {
-    vov: VisualOverview;
-    onSelectionChanged: (node: Node) => void;
-}
+import useStore from "./model/store.ts";
 
 const nodeTypes = {
     access: AccessNode,
@@ -31,15 +27,17 @@ const nodeTypes = {
     share: ShareNode
 };
 
-const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
+const Visualizer = () => {
+    const overview = useStore((state) => state.overview);
+    const updateSelectedNode = useStore((state) => state.updateSelectedNode);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
     const onSelectionChange = ({ nodes }) => {
         if(nodes.length > 0) {
-            onSelectionChanged(nodes[0]);
+            updateSelectedNode(nodes[0]);
         } else {
-            onSelectionChanged(null as Node);
+            updateSelectedNode(null as Node);
         }
     };
 
@@ -72,12 +70,12 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
     }
 
     useEffect(() => {
-        if(vov) {
-            let laidOut = layout(vov.nodes, vov.edges);
+        if(overview) {
+            let laidOut = layout(overview.nodes, overview.edges);
             setNodes(laidOut.nodes);
             setEdges(laidOut.edges);
         }
-    }, [vov]);
+    }, [overview]);
 
     return (
         <ReactFlow
@@ -101,11 +99,11 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
     );
 }
 
-export default ({ vov, onSelectionChanged }: VisualizerProps) => {
+export default () => {
     return (
         <Box sx={{ width: "100%", mt: 2 }} height={{ xs: 400, sm: 600, md: 800 }}>
             <ReactFlowProvider>
-                <Visualizer vov={vov} onSelectionChanged={onSelectionChanged} />
+                <Visualizer />
             </ReactFlowProvider>
         </Box>
     );