initial tabular view mode and additional state to manage viewport tra…

…nsform (#819, #823)

ui100/package.json

@@ -17,6 +17,7 @@
     "@mui/x-charts": "^7.23.2",
     "@xyflow/react": "^12.3.5",
     "d3-hierarchy": "^3.1.2",
+    "material-react-table": "^3.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.0.1",

ui100/src/ApiConsole.tsx

@@ -9,7 +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";
+import TabularView from "./TabularView.tsx";
 
 interface ApiConsoleProps {
     logout: () => void;
@@ -32,7 +32,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
             if(showVisualizer) {
                 setMainPanel(<Visualizer />);
             } else {
-                setMainPanel(<SearchPanel />);
+                setMainPanel(<TabularView />);
             }
         }
     }, []);

ui100/src/TabularView.tsx

@@ -0,0 +1,42 @@
+import {Box, Paper} from "@mui/material";
+import useStore from "./model/store.ts";
+import {MaterialReactTable, type MRT_ColumnDef, useMaterialReactTable} from "material-react-table";
+import {useMemo} from "react";
+import {Node} from "@xyflow/react";
+
+const data: Node[] = [];
+
+const TabularView = () => {
+    const overview = useStore((state) => state.overview);
+
+    const columns = useMemo<MRT_ColumnDef<Node>[]>(
+        () => [
+            {
+                accessorKey: 'data.label',
+                header: 'Label'
+            },
+            {
+                accessorKey: 'type',
+                header: 'Type',
+            }
+        ],
+        [],
+    );
+
+    const table = useMaterialReactTable({
+        columns: columns,
+        data: overview.nodes,
+    });
+
+    console.log(overview.nodes);
+
+    return (
+        <Box sx={{ width: "100%", mt: 2 }} height={{ xs: 400, sm: 600, md: 800 }}>
+            <Paper>
+                <MaterialReactTable table={table} />
+            </Paper>
+        </Box>
+    );
+};
+
+export default TabularView;

ui100/src/Visualizer.tsx

@@ -8,7 +8,8 @@ import {
     ReactFlow,
     ReactFlowProvider,
     useEdgesState,
-    useNodesState
+    useNodesState,
+    useStore as xyStore
 } from "@xyflow/react";
 import {VisualOverview} from "./model/visualizer.ts";
 import {useEffect} from "react";
@@ -30,8 +31,15 @@ const nodeTypes = {
 const Visualizer = () => {
     const overview = useStore((state) => state.overview);
     const updateSelectedNode = useStore((state) => state.updateSelectedNode);
+    const viewport = useStore((state) => state.viewport);
+    const updateViewport = useStore((state) => state.updateViewport);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const transform = xyStore((store) => store.transform);
+
+    useEffect(() => {
+        updateViewport(transform);
+    }, [transform]);
 
     const onSelectionChange = ({ nodes }) => {
         if(nodes.length > 0) {
@@ -77,6 +85,12 @@ const Visualizer = () => {
         }
     }, [overview]);
 
+    const defaultViewport = {
+        x: viewport[0],
+        y: viewport[1],
+        zoom: viewport[2],
+    }
+
     return (
         <ReactFlow
             nodeTypes={nodeTypes}
@@ -86,7 +100,7 @@ const Visualizer = () => {
             onEdgesChange={onEdgesChange}
             onSelectionChange={onSelectionChange}
             nodesDraggable={false}
-            fitView
+            defaultViewport={defaultViewport}
         >
             <Background  />
             <Controls position="bottom-left" orientation="horizontal" showInteractive={false} />

ui100/src/model/store.ts

@@ -9,24 +9,28 @@ type StoreState = {
     environments: Array<Environment>;
     overview: VisualOverview;
     selectedNode: Node;
+    viewport: Array<Number>;
 };
 
 type StoreAction = {
     updateUser: (user: StoreState['user']) => void,
     updateOverview: (vov: StoreState['overview']) => void,
     updateEnvironments: (environments: StoreState['environments']) => void,
-    updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void
+    updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
+    updateViewport: (viewport: StoreState['viewport']) => void,
 };
 
 const useStore = create<StoreState & StoreAction>((set) => ({
     user: null,
     overview: new VisualOverview(),
     environments: new Array<Environment>(),
     selectedNode: null,
+    viewport: [0, 0, 1.5],
     updateUser: (user) => set({user: user}),
     updateOverview: (vov) => set({overview: vov}),
     updateEnvironments: (environments) => set({environments: environments}),
-    updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode})
+    updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode}),
+    updateViewport: (viewport) => set({viewport: viewport})
 }));
 
 export default useStore;