roughed in all the side panel types and the necessary responsive layout tweaks (#804)

ui100/src/AccessPanel.tsx

@@ -0,0 +1,24 @@
+import {Node} from "@xyflow/react";
+import {Grid2, Typography} from "@mui/material";
+import AccessIcon from "@mui/icons-material/Lan";
+
+interface AccessPanelProps {
+    access: Node;
+}
+
+const AccessPanel = ({ access }: AccessPanelProps) => {
+    return (
+        <Typography component="div">
+            <Grid2 container spacing={2}>
+                <Grid2 >
+                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                        <Grid2 display="flex"><AccessIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+                        <Grid2 display="flex" component="h3">{String(access.data.label)}</Grid2>
+                    </Grid2>
+                </Grid2>
+            </Grid2>
+        </Typography>
+    );
+}
+
+export default AccessPanel;

ui100/src/AccountPanel.tsx

@@ -0,0 +1,24 @@
+import {Node} from "@xyflow/react";
+import {Grid2, Typography} from "@mui/material";
+import AccountIcon from "@mui/icons-material/Person4";
+
+interface AccountPanelProps {
+    account: Node;
+}
+
+const AccountPanel = ({ account }: AccountPanelProps) => {
+    return (
+        <Typography component="div">
+            <Grid2 container spacing={2}>
+                <Grid2 >
+                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                        <Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+                        <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
+                    </Grid2>
+                </Grid2>
+            </Grid2>
+        </Typography>
+    );
+}
+
+export default AccountPanel;

ui100/src/ApiConsole.tsx

@@ -1,11 +1,15 @@
 import {useEffect, useRef, useState} from "react";
 import {Configuration, MetadataApi} from "./api";
 import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
-import {Box} from "@mui/material";
+import {Grid2} from "@mui/material";
 import NavBar from "./NavBar.tsx";
 import {User} from "./model/user.ts";
 import Visualizer from "./Visualizer.tsx";
 import {Node} from "@xyflow/react";
+import AccountPanel from "./AccountPanel.tsx";
+import EnvironmentPanel from "./EnvironmentPanel.tsx";
+import SharePanel from "./SharePanel.tsx";
+import AccessPanel from "./AccessPanel.tsx";
 
 interface ApiConsoleProps {
     user: User;
@@ -16,6 +20,7 @@ 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 [sidePanel, setSidePanel] = useState(<></>);
     const oldVov = useRef<VisualOverview>(overview);
 
     useEffect(() => {
@@ -64,16 +69,41 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
         }
     }, []);
 
+    useEffect(() => {
+        if(selectedNode) {
+            switch(selectedNode.type) {
+                case "account":
+                    setSidePanel(<AccountPanel account={selectedNode} />);
+                    break;
+
+                case "environment":
+                    setSidePanel(<EnvironmentPanel environment={selectedNode} />);
+                    break;
+
+                case "share":
+                    setSidePanel(<SharePanel share={selectedNode} />);
+                    break;
+
+                case "access":
+                    setSidePanel(<AccessPanel access={selectedNode} />);
+                    break;
+            }
+        } else {
+            setSidePanel(<></>);
+        }
+    }, [selectedNode]);
+
     return (
         <div>
             <NavBar logout={logout} />
-            <Box>
+            <Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
-                <Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
+                <Grid2 size="grow">
-                <div>
+                    <Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
-                    <h1>Hello</h1>
+                </Grid2>
-                    <h2><pre>{JSON.stringify(selectedNode)}</pre></h2>
+                <Grid2 size={4}>
-                </div>
+                    {sidePanel}
-            </Box>
+                </Grid2>
+            </Grid2>
         </div>
     );
 }

ui100/src/EnvironmentPanel.tsx

@@ -0,0 +1,24 @@
+import {Node} from "@xyflow/react";
+import {Grid2, Typography} from "@mui/material";
+import EnvironmentIcon from "@mui/icons-material/Computer";
+
+interface EnvironmentPanelProps {
+    environment: Node;
+}
+
+const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
+    return (
+        <Typography component="div">
+            <Grid2 container spacing={2}>
+                <Grid2 >
+                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                        <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+                        <Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
+                    </Grid2>
+                </Grid2>
+            </Grid2>
+        </Typography>
+    );
+}
+
+export default EnvironmentPanel;

ui100/src/SharePanel.tsx

@@ -0,0 +1,24 @@
+import {Node} from "@xyflow/react";
+import {Card, Grid2, Typography} from "@mui/material";
+import ShareIcon from "@mui/icons-material/Share";
+
+interface SharePanelProps {
+    share: Node;
+}
+
+const SharePanel = ({ share }: SharePanelProps) => {
+    return (
+        <Typography component="div">
+            <Grid2 container spacing={2}>
+                <Grid2 >
+                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                        <Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+                        <Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
+                    </Grid2>
+                </Grid2>
+            </Grid2>
+        </Typography>
+    );
+}
+
+export default SharePanel;

ui100/src/Visualizer.tsx

@@ -15,8 +15,9 @@ import {useEffect} from "react";
 import {stratify, tree} from "d3-hierarchy";
 import ShareNode from "./ShareNode.tsx";
 import EnvironmentNode from "./EnvironmentNode.tsx";
-import AccountNode from "../AccountNode.tsx";
+import AccountNode from "./AccountNode.tsx";
 import AccessNode from "./AccessNode.tsx";
+import {Box} from "@mui/material";
 
 interface VisualizerProps {
     vov: VisualOverview;
@@ -89,10 +90,10 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
 
 export default ({ vov, onSelectionChanged }: VisualizerProps) => {
     return (
-        <div style={{ height: "600px" }}>
+        <Box sx={{ width: "100%" }} height={{ xs: 400, sm: 600, md: 800 }}>
             <ReactFlowProvider>
                 <Visualizer vov={vov} onSelectionChanged={onSelectionChanged} />
             </ReactFlowProvider>
-        </div>
+        </Box>
     );
 }