improvements to selection handling (#819, #823); side panel only cons…

…umes layout space when selected (#804)
openziti · Jan 8, 2025 · cba3b95 · cba3b95
1 parent 2e839f1
commit cba3b95
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from "react";
+import {JSX, useCallback, useEffect, useRef, useState} from "react";
 import {Configuration, MetadataApi} from "./api";
 import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
 import {Grid2} from "@mui/material";
@@ -25,7 +25,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const selectedNode = useStore((state) => state.selectedNode);
     const updateEnvironments = useStore((state) => state.updateEnvironments);
     const [mainPanel, setMainPanel] = useState(<Visualizer />);
-    const [sidePanel, setSidePanel] = useState(<></>);
+    const [sidePanel, setSidePanel] = useState<JSX>(null);
 
     let showVisualizer = true;
     const handleKeyPress = useCallback((event) => {
@@ -135,20 +135,20 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
                     break;
             }
         } else {
-            setSidePanel(<></>);
+            setSidePanel(null);
         }
     }, [selectedNode]);
 
+    let wrappedSidePanel = sidePanel ? <Grid2 size={4}>{sidePanel}</Grid2> : null;
+
     return (
         <div>
             <NavBar logout={logout} />
             <Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
                 <Grid2 size="grow">
                     {mainPanel}
                 </Grid2>
-                <Grid2 size={4}>
-                    {sidePanel}
-                </Grid2>
+                {wrappedSidePanel}
             </Grid2>
         </div>
     );

diff --git a/ui100/src/TabularView.tsx b/ui100/src/TabularView.tsx
@@ -11,6 +11,7 @@ import {Node} from "@xyflow/react";
 
 const TabularView = () => {
     const nodes = useStore((state) => state.nodes);
+    const updateNodes = useStore((state) => state.updateNodes);
     const selectedNode = useStore((state) => state.selectedNode);
     const updateSelectedNode = useStore((state) => state.updateSelectedNode);
     const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
@@ -25,7 +26,9 @@ const TabularView = () => {
 
     useEffect(() => {
         let sn = nodes.find(node => Object.keys(rowSelection).includes(node.id));
+        console.log("sn", sn);
         updateSelectedNode(sn);
+        updateNodes(nodes.map(node => (sn && node.id === sn.id) ? { ...node, selected: true } : { ...node, selected: false }));
     }, [rowSelection]);
 
     const columns = useMemo<MRT_ColumnDef<Node>[]>(
@@ -52,7 +55,12 @@ const TabularView = () => {
         state: { rowSelection },
         muiTableBodyRowProps: ({ row }) => ({
             onClick: () => {
-                setRowSelection({[row.id]: true})
+                if(rowSelection[row.id]) {
+                    setRowSelection({});
+                } else {
+                    setRowSelection({[row.id]: true});
+                }
+
             },
             selected: rowSelection[row.id],
             sx: {