include ui mode toggle in navbar (#819)

openziti · Jan 14, 2025 · 76e1f2d · 76e1f2d
1 parent 5da0c8c
commit 76e1f2d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
@@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx";
 import EnvironmentPanel from "./EnvironmentPanel.tsx";
 import SharePanel from "./SharePanel.tsx";
 import AccessPanel from "./AccessPanel.tsx";
-import useStore, {Sparkdata} from "./model/store.ts";
+import useStore from "./model/store.ts";
 import TabularView from "./TabularView.tsx";
 import {Node} from "@xyflow/react";
 
@@ -22,7 +22,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const updateGraph = useStore((state) => state.updateGraph);
     const oldGraph = useRef<Graph>(graph);
     const sparkdata = useStore((state) => state.sparkdata);
-    const sparkdataRef = useRef<Map<string, Sparkdata>>();
+    const sparkdataRef = useRef<Map<string, Number[]>>();
     sparkdataRef.current = sparkdata;
     const updateSparkdata = useStore((state) => state.updateSparkdata);
     const nodes = useStore((state) => state.nodes);
@@ -33,19 +33,30 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const selectedNode = useStore((state) => state.selectedNode);
     const [mainPanel, setMainPanel] = useState(<Visualizer />);
     const [sidePanel, setSidePanel] = useState<JSX>(null);
+    const [visualizerEnabled, setVisualizerEnabled] = useState<boolean>(true);
 
-    let showVisualizer = true;
+    let visualizer = true;
     const handleKeyPress = useCallback((event) => {
         if(event.ctrlKey === true && event.key === '`') {
-            showVisualizer = !showVisualizer;
-            if(showVisualizer) {
+            setVisualizerEnabled(!visualizer);
+            visualizer = !visualizer;
+            if(visualizer) {
                 setMainPanel(<Visualizer />);
             } else {
                 setMainPanel(<TabularView />);
             }
         }
     }, []);
 
+    useEffect(() => {
+        visualizer = visualizerEnabled;
+        if(visualizer) {
+            setMainPanel(<Visualizer />);
+        } else {
+            setMainPanel(<TabularView />);
+        }
+    }, [visualizerEnabled]);
+
     useEffect(() => {
         document.addEventListener('keydown', handleKeyPress);
         return () => {
@@ -176,7 +187,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
 
     return (
         <div>
-            <NavBar logout={logout} />
+            <NavBar logout={logout} visualizer={visualizerEnabled} toggleMode={setVisualizerEnabled} />
             <Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
                 <Grid2 size="grow">
                     {mainPanel}

diff --git a/ui100/src/NavBar.tsx b/ui100/src/NavBar.tsx
@@ -1,20 +1,24 @@
-import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
+import {AppBar, Box, Button, Grid2, Toolbar, Tooltip, Typography} from "@mui/material";
 import LogoutIcon from "@mui/icons-material/Logout";
+import VisualizerIcon from "@mui/icons-material/Hub";
+import TabularIcon from "@mui/icons-material/TableRows";
 import zroket from "./assets/zrok-1.0.0-rocket-green.svg";
 
 interface NavBarProps {
     logout: () => void;
+    visualizer: boolean;
+    toggleMode: (boolean) => void;
 }
 
-const NavBar = ({ logout }: NavBarProps) => {
+const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
+    const handleClick = () => {
+        toggleMode(!visualizer);
+    }
+
     return (
         <Box ssx={{ flexGrow: 1 }}>
             <AppBar position="static">
                 <Toolbar>
-                    <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
-                        <MenuIcon />
-                    </IconButton>
                     <Typography variant="h6" sx={{ flexGrow: 1 }}>
                         <Grid2 container sx={{ flexGrow: 1 }}>
                             <Grid2 display="flex" justifyContent="left">
@@ -27,7 +31,14 @@ const NavBar = ({ logout }: NavBarProps) => {
                     </Typography>
                     <Grid2 container sx={{ flexGrow: 1 }}>
                         <Grid2 display="flex" justifyContent="right" size="grow">
-                            <Button color="inherit" onClick={logout}><LogoutIcon /></Button>
+                            <Tooltip title="Toggle Interface Mode (Ctrl-`)">
+                                <Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>
+                            </Tooltip>
+                        </Grid2>
+                        <Grid2 display="flex" justifyContent="right">
+                            <Tooltip title="Logout">
+                                <Button color="inherit" onClick={logout}><LogoutIcon /></Button>
+                            </Tooltip>
                         </Grid2>
                     </Grid2>
                 </Toolbar>