improved combined state view in tabular view; includes sparkdata state (#819, #823)

ui100/src/TabularView.tsx

@@ -6,15 +6,32 @@ import {
     MRT_RowSelectionState,
     useMaterialReactTable
 } from "material-react-table";
-import {useEffect, useMemo, useState} from "react";
+import {useEffect, useMemo, useRef, useState} from "react";
 import {Node} from "@xyflow/react";
+import {bytesToSize} from "./model/util.ts";
 
 const TabularView = () => {
     const nodes = useStore((state) => state.nodes);
+    const nodesRef = useRef<Node[]>();
+    nodesRef.current = 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>({});
+    const sparkdata = useStore((state) => state.sparkdata);
+    const [combined, setCombined] = useState<Node[]>([]);
+
+    useEffect(() => {
+        let outNodes = new Array<Node>();
+        nodesRef.current.forEach(node => {
+            let outNode = {
+                ...node
+            };
+            outNode.data.activity = sparkdata.get(node.id);
+            outNodes.push(outNode);
+        });
+        setCombined(outNodes);
+    }, [nodes, sparkdata]);
 
     useEffect(() => {
         if(selectedNode) {
@@ -30,6 +47,18 @@ const TabularView = () => {
         updateNodes(nodes.map(node => (sn && node.id === sn.id) ? { ...node, selected: true } : { ...node, selected: false }));
     }, [rowSelection]);
 
+    const sparkdataTip = (row) => {
+        if(row.data.activity) {
+            let tip = row.data.activity[row.data.activity.length - 1];
+            if(tip > 0) {
+                return bytesToSize(tip);
+            }
+        } else {
+            console.log("no sparkdata", row);
+        }
+        return "";
+    };
+
     const columns = useMemo<MRT_ColumnDef<Node>[]>(
         () => [
             {
@@ -39,6 +68,10 @@ const TabularView = () => {
             {
                 accessorKey: 'type',
                 header: 'Type',
+            },
+            {
+                accessorFn: sparkdataTip,
+                header: 'Activity',
             }
         ],
         [],
@@ -46,7 +79,7 @@ const TabularView = () => {
 
     const table = useMaterialReactTable({
         columns: columns,
-        data: nodes,
+        data: combined,
         enableRowSelection: false,
         enableMultiRowSelection: false,
         getRowId: r => r.id,

ui100/src/model/util.ts

@@ -19,4 +19,22 @@ export const rowToValue = (row) => {
         return new Date(row.value).toLocaleString();
     }
     return row.value.toString();
-};
+};
+
+export const bytesToSize = (bytes: number): string => {
+    let i = -1;
+    const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
+    do {
+        bytes /= 1024;
+        i++;
+    } while (bytes > 1024);
+    return Math.max(bytes, 0.1).toFixed(1) + byteUnits[i];
+}
+
+function getReadableFileSizeString(fileSizeInBytes) {
+    var i = -1;
+    var byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
+
+
+    return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
+}