From 3041e961c43689a8447f4e29c497c5679fc790a3 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Mon, 13 Jan 2025 14:20:44 -0500
Subject: [PATCH] marshall the state back and forth (#819)

---
 ui100/src/TabularView.tsx | 25 +++++++++++++++++++++++--
 ui100/src/model/store.ts  | 15 ++++++++++++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/ui100/src/TabularView.tsx b/ui100/src/TabularView.tsx
index e1c71984..6ade7b12 100644
--- a/ui100/src/TabularView.tsx
+++ b/ui100/src/TabularView.tsx
@@ -3,7 +3,9 @@ import useStore from "./model/store.ts";
 import {
     MaterialReactTable,
     type MRT_ColumnDef,
+    MRT_PaginationState,
     MRT_RowSelectionState,
+    MRT_SortingState,
     useMaterialReactTable
 } from "material-react-table";
 import {useEffect, useMemo, useRef, useState} from "react";
@@ -17,8 +19,14 @@ const TabularView = () => {
     const updateNodes = useStore((state) => state.updateNodes);
     const selectedNode = useStore((state) => state.selectedNode);
     const updateSelectedNode = useStore((state) => state.updateSelectedNode);
-    const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
     const sparkdata = useStore((state) => state.sparkdata);
+    const storedPagination = useStore((state) => state.pagination);
+    const updatePagination = useStore((state) => state.updatePagination);
+    const storedSorting = useStore((state) => state.sorting);
+    const updateSorting = useStore((state) => state.updateSorting);
+    const [pagination, setPagination] = useState<MRT_PaginationState>({} as MRT_PaginationState);
+    const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+    const [sorting, setSorting] = useState<MRT_SortingState>([{id: "data.label", desc: false}] as MRT_SortingState);
     const [combined, setCombined] = useState<Node[]>([]);
 
     useEffect(() => {
@@ -39,8 +47,19 @@ const TabularView = () => {
             selection[selectedNode.id] = true;
             setRowSelection(selection);
         }
+        setPagination(storedPagination);
+        setSorting(storedSorting);
     }, []);
 
+    useEffect(() => {
+        console.log("pagination", pagination);
+        updatePagination(pagination);
+    }, [pagination]);
+
+    useEffect(() => {
+        updateSorting(sorting);
+    }, [sorting]);
+
     useEffect(() => {
         let sn = nodes.find(node => Object.keys(rowSelection).includes(node.id));
         updateSelectedNode(sn);
@@ -119,8 +138,10 @@ const TabularView = () => {
         enableRowSelection: false,
         enableMultiRowSelection: false,
         getRowId: r => r.id,
+        onPaginationChange: setPagination,
         onRowSelectionChange: setRowSelection,
-        state: { rowSelection },
+        onSortingChange: setSorting,
+        state: { pagination, rowSelection, sorting },
         muiTableBodyRowProps: ({ row }) => ({
             onClick: () => {
                 if(rowSelection[row.id]) {
diff --git a/ui100/src/model/store.ts b/ui100/src/model/store.ts
index 4b4770a3..2ff330b9 100644
--- a/ui100/src/model/store.ts
+++ b/ui100/src/model/store.ts
@@ -3,6 +3,7 @@ import {Environment} from "../api";
 import {Graph} from "./graph.ts";
 import {Edge, Node, Viewport} from "@xyflow/react";
 import {User} from "./user.ts";
+import {MRT_PaginationState, MRT_SortingState} from "material-react-table";
 
 type StoreState = {
     user: User;
@@ -13,6 +14,8 @@ type StoreState = {
     edges: Edge[];
     selectedNode: Node;
     viewport: Viewport;
+    pagination: MRT_PaginationState;
+    sorting: MRT_SortingState;
 };
 
 type StoreAction = {
@@ -24,17 +27,21 @@ type StoreAction = {
     updateEdges: (edges: StoreState['edges']) => void,
     updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
     updateViewport: (viewport: StoreState['viewport']) => void,
-};
+    updatePagination: (pagination: StoreState['pagination']) => void,
+    updateSorting: (sorting: StoreState['sorting']) => void,
+ };
 
 const useStore = create<StoreState & StoreAction>((set) => ({
     user: null,
     graph: new Graph(),
     environments: new Array<Environment>(),
-    sparkdata: new Map<string, Sparkdata>(),
+    sparkdata: new Map<string, Number[]>(),
     nodes: [],
     edges: [],
     selectedNode: null,
     viewport: {x: 0, y: 0, zoom: 1},
+    pagination: {pageIndex: 0, pageSize: 15},
+    sorting: [{id: "data.label", desc: false}] as MRT_SortingState,
     updateUser: (user) => set({user: user}),
     updateGraph: (vov) => set({overview: vov}),
     updateEnvironments: (environments) => set({environments: environments}),
@@ -42,7 +49,9 @@ const useStore = create<StoreState & StoreAction>((set) => ({
     updateNodes: (nodes) => set({nodes: nodes}),
     updateEdges: (edges) => set({edges: edges}),
     updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode}),
-    updateViewport: (viewport) => set({viewport: viewport})
+    updateViewport: (viewport) => set({viewport: viewport}),
+    updatePagination: (pagination) => set({pagination: pagination}),
+    updateSorting: (sorting) => set({sorting: sorting})
 }));
 
 export default useStore;