@1771technologies/lytenyte-pro 1.0.1 → 1.0.3

package/dist/row-data-source-client/use-client-tree-data-source.js

@@ -1,24 +1,22 @@
 import {} from "../+types.js";
 import { useRef } from "react";
-import { atom, createStore } from "@1771technologies/atom";
 import { traverse } from "./tree/traverse.js";
-import { dateComparator, makeGridAtom, numberComparator, stringComparator, } from "@1771technologies/lytenyte-shared";
+import { computed, dateComparator, effect, makeAtom, numberComparator, peek, signal, stringComparator, } from "@1771technologies/lytenyte-shared";
 import { equal } from "@1771technologies/lytenyte-js-utils";
 import { makeClientTree } from "./tree/client-tree.js";
 import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
 import { builtIns } from "./built-ins/built-ins.js";
 export function makeClientTreeDataSource(p) {
-    const rdsStore = createStore();
-    const data = atom(p.data);
-    const topData = atom(p.topData ?? []);
-    const bottomData = atom(p.bottomData ?? []);
-    const dataToSrc$ = atom((g) => {
-        return new Map(g(data).map((c, i) => [c, i]));
+    const data = signal(p.data);
+    const topData = signal(p.topData ?? []);
+    const bottomData = signal(p.bottomData ?? []);
+    const dataToSrc$ = computed(() => {
+        return new Map(data().map((c, i) => [c, i]));
     });
     const cache = new Map();
-    const centerNodes = atom((g) => {
+    const centerNodes = computed(() => {
         const nodes = [];
-        const d = g(data);
+        const d = data();
         for (let i = 0; i < d.length; i++) {
             if (!cache.has(i)) {
                 cache.set(i, {
@@ -33,39 +31,38 @@ export function makeClientTreeDataSource(p) {
         }
         return nodes;
     });
-    const topNodes = atom((g) => {
-        return g(topData).map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
+    const topNodes = computed(() => {
+        return topData().map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
     });
-    const botNodes = atom((g) => {
-        return g(bottomData).map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
+    const botNodes = computed(() => {
+        return bottomData().map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
     });
-    const pinnedIdMap = atom((g) => {
-        const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
+    const pinnedIdMap = computed(() => {
+        const combined = new Map([...topNodes(), ...botNodes()].map((c) => [c.id, c]));
         return combined;
     });
-    const models = atom({
+    const models = signal({
         sort: [],
         filter: {},
         filterIn: {},
         quickSearch: null,
         agg: {},
         groupExpansions: {},
-        columnPivotGroupExpansions: {},
     });
-    const sortModel = atom((g) => g(models).sort);
-    const filterModel = atom((g) => g(models).filter);
-    const filterInModel = atom((g) => g(models).filterIn);
-    const groupExpansions = atom((g) => g(models).groupExpansions);
-    const aggModel = atom((g) => g(models).agg);
-    const quickSearch = atom((g) => g(models).quickSearch);
-    const grid$ = atom(null);
-    const snapshot = atom(0);
-    const tree = atom((g) => {
-        g(snapshot);
-        const grid = g(grid$);
-        const rows = g(centerNodes);
-        const filtered = computeFilteredRows(rows, grid, g(filterModel), g(filterInModel), g(quickSearch), grid?.state.quickSearchSensitivity.get() ?? "case-sensitive", false);
-        const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
+    const sortModel = computed(() => models().sort);
+    const filterModel = computed(() => models().filter);
+    const filterInModel = computed(() => models().filterIn);
+    const groupExpansions = computed(() => models().groupExpansions);
+    const aggModel = computed(() => models().agg);
+    const quickSearch = computed(() => models().quickSearch);
+    const grid$ = signal(null);
+    const snapshot = signal(0);
+    const tree = computed(() => {
+        snapshot();
+        const grid = grid$();
+        const rows = centerNodes();
+        const filtered = computeFilteredRows(rows, grid, filterModel(), filterInModel(), quickSearch(), grid?.state.quickSearchSensitivity.get() ?? "case-sensitive", false);
+        const rowAggModel = Object.entries(aggModel()).map(([name, agg]) => {
             if (typeof agg.fn === "function") {
                 const fn = agg.fn;
                 return {
@@ -88,11 +85,11 @@ export function makeClientTreeDataSource(p) {
             rowIdLeaf: p.rowIdLeaf,
         });
     });
-    const sortComparator = atom((g) => {
-        const model = g(sortModel);
-        const grid = g(grid$);
+    const sortComparator = computed(() => {
+        const model = sortModel();
+        const grid = grid$();
         if (!model.length || !grid)
-            return () => 0;
+            return { fn: () => 0 };
         const comparator = (l, r) => {
             let res = 0;
             for (const sortSpec of model) {
@@ -131,27 +128,27 @@ export function makeClientTreeDataSource(p) {
             }
             return res;
         };
-        return comparator;
+        return { fn: comparator };
     });
-    const idToNode = atom((g) => {
+    const idToNode = computed(() => {
         const map = new Map();
-        traverse(g(tree).root, (node) => {
+        traverse(tree().root, (node) => {
             map.set(node.id, node);
         });
         return map;
     });
-    const initialized = atom(false);
-    const flat = atom((g) => {
-        if (!g(initialized))
+    const initialized = signal(false);
+    const flat = computed(() => {
+        if (!initialized())
             return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
         const idMap = new Map();
         const idToIndexMap = new Map();
         const flattened = [];
-        const comparator = g(sortComparator);
-        const expansions = g(groupExpansions);
-        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
-        let index = g(topNodes).length;
-        traverse(g(tree).root, (node) => {
+        const comparator = sortComparator();
+        const expansions = groupExpansions();
+        const defaultExpansion = grid$()?.state.rowGroupDefaultExpansion.get() ?? false;
+        let index = topNodes().length;
+        traverse(tree().root, (node) => {
             if (node.kind === 1) {
                 node.data.id = node.id;
                 flattened.push(node.data);
@@ -175,103 +172,77 @@ export function makeClientTreeDataSource(p) {
                         : defaultExpansion);
                 return expanded;
             }
-        }, comparator);
+        }, comparator.fn);
         return { flat: flattened, idMap, idToIndexMap };
     });
-    const flatLength = atom((g) => g(flat).flat.length);
+    const flatLength = computed(() => flat().flat.length);
     const cleanup = [];
     const init = (grid) => {
         while (cleanup.length)
             cleanup.pop()?.();
-        rdsStore.set(grid$, grid);
+        grid$.set(grid);
         const store = grid.state.rowDataStore;
         // Monitor row count changes
-        const centerCount = rdsStore.get(flatLength);
+        const centerCount = flatLength();
+        const top = topData().length;
+        const bottom = bottomData().length;
         store.rowCenterCount.set(centerCount);
-        cleanup.push(rdsStore.sub(flatLength, () => {
-            const centerCount = rdsStore.get(flatLength);
-            store.rowCenterCount.set(centerCount);
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        const top = rdsStore.get(topData).length;
         store.rowTopCount.set(top);
-        cleanup.push(rdsStore.sub(topData, () => {
-            const top = rdsStore.get(topData).length;
-            store.rowTopCount.set(top);
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        const bottom = rdsStore.get(bottomData).length;
         store.rowBottomCount.set(bottom);
-        cleanup.push(rdsStore.sub(bottomData, () => {
-            const bot = rdsStore.get(bottomData).length;
-            store.rowBottomCount.set(bot);
+        cleanup.push(effect(() => {
+            store.rowCenterCount.set(flatLength());
+            store.rowTopCount.set(topData().length);
+            store.rowBottomCount.set(bottomData().length);
             grid.state.rowDataStore.rowClearCache();
         }));
         const sort = grid.state.sortModel.get();
         const filter = grid.state.filterModel.get();
         const filterIn = grid.state.filterInModel.get();
-        const groupExpansions = grid.state.rowGroupExpansions.get();
         const agg = grid.state.aggModel.get();
         const quickSearch = grid.state.quickSearch.get();
-        const columnPivotGroupExpansions = grid.state.columnPivotRowGroupExpansions.get();
-        rdsStore.set(models, {
+        const groupExpansions = grid.state.rowGroupExpansions.get();
+        models.set({
             agg,
             filter,
             filterIn,
-            quickSearch,
             groupExpansions,
+            quickSearch,
             sort,
-            columnPivotGroupExpansions,
         });
-        rdsStore.set(initialized, true);
-        // Sort model monitoring
-        cleanup.push(grid.state.sortModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, sort: grid.state.sortModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Filter model monitoring
-        cleanup.push(grid.state.filterModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, filter: grid.state.filterModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(grid.state.quickSearch.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, quickSearch: grid.state.quickSearch.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(grid.state.filterInModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, filterIn: grid.state.filterInModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Row group model monitoring
-        cleanup.push(grid.state.rowGroupModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, group: grid.state.rowGroupModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Row group expansions monitoring
-        cleanup.push(grid.state.rowGroupExpansions.watch(() => {
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                groupExpansions: grid.state.rowGroupExpansions.get(),
-            }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Agg model monitoring
-        cleanup.push(grid.state.aggModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, agg: grid.state.aggModel.get() }));
+        initialized.set(true);
+        cleanup.push(effect(() => {
+            models.set({
+                // @ts-expect-error The $ is defined, but only internally
+                sort: grid.state.sortModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                agg: grid.state.aggModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                filter: grid.state.filterModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                group: grid.state.rowGroupModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                groupExpansions: grid.state.rowGroupExpansions.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                columnPivotGroupExpansions: grid.state.columnPivotColumnGroupExpansions.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                filterIn: grid.state.filterInModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                quickSearch: grid.state.quickSearch.$(),
+            });
             grid.state.rowDataStore.rowClearCache();
         }));
     };
     const rowById = (id) => {
-        const pinned = rdsStore.get(pinnedIdMap);
+        const pinned = peek(pinnedIdMap);
         if (pinned.has(id))
             return pinned.get(id);
-        const t = rdsStore.get(flat);
+        const t = peek(flat);
         return t.idMap.get(id) ?? null;
     };
     const rowByIndex = (index) => {
-        const top = rdsStore.get(topNodes);
-        const bot = rdsStore.get(botNodes);
-        const center = rdsStore.get(flat).flat;
+        const top = peek(topNodes);
+        const bot = peek(botNodes);
+        const center = peek(flat).flat;
         const topOffset = top.length;
         const centerOffset = topOffset + center.length;
         const botOffset = centerOffset + bot.length;
@@ -284,10 +255,10 @@ export function makeClientTreeDataSource(p) {
         return null;
     };
     const rowUpdate = (updates) => {
-        const grid = rdsStore.get(grid$);
-        const d = rdsStore.get(data);
-        const idMap = rdsStore.get(idToNode);
-        const dataToSrc = rdsStore.get(dataToSrc$);
+        const grid = peek(grid$);
+        const d = peek(data);
+        const idMap = peek(idToNode);
+        const dataToSrc = peek(dataToSrc$);
         for (const [key, next] of updates.entries()) {
             const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
             const treeNode = typeof key === "string" ? idMap.get(key) : null;
@@ -308,14 +279,14 @@ export function makeClientTreeDataSource(p) {
                 d[source] = next;
             }
         }
-        rdsStore.set(data, [...d]);
-        rdsStore.set(snapshot, (prev) => prev + 1);
+        data.set([...d]);
+        snapshot.set((prev) => prev + 1);
         grid.state.rowDataStore.rowClearCache();
     };
     const rowToIndex = (rowId) => {
-        const f = rdsStore.get(flat);
-        const top = rdsStore.get(topNodes);
-        const bot = rdsStore.get(botNodes);
+        const f = peek(flat);
+        const top = peek(topNodes);
+        const bot = peek(botNodes);
         const topCount = top.length;
         const center = f.flat.length;
         const rowIndex = f.idToIndexMap.get(rowId);
@@ -332,7 +303,7 @@ export function makeClientTreeDataSource(p) {
         return null;
     };
     const rowAllChildIds = (rowId) => {
-        const t = rdsStore.get(tree);
+        const t = peek(tree);
         const ids = [];
         const node = t.idToNode.get(rowId);
         if (node?.kind === 2) {
@@ -350,10 +321,10 @@ export function makeClientTreeDataSource(p) {
             rowAllChildIds,
             rowUpdate,
             inFilterItems: (c) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return [];
-                const data = rdsStore.get(centerNodes);
+                const data = peek(centerNodes);
                 const values = new Set(data.map((row) => {
                     const field = grid.api.columnField(c, row);
                     return field;
@@ -364,7 +335,7 @@ export function makeClientTreeDataSource(p) {
                 return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
             },
             rowAdd: (newRows, place = "end") => {
-                rdsStore.set(data, (prev) => {
+                data.set((prev) => {
                     if (!newRows.length)
                         return prev;
                     let next;
@@ -378,7 +349,7 @@ export function makeClientTreeDataSource(p) {
                     }
                     return next;
                 });
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowDelete: (rows) => {
@@ -390,42 +361,38 @@ export function makeClientTreeDataSource(p) {
                         return rowById(c)?.data;
                 })
                     .filter((c) => !!c));
-                rdsStore.set(data, (prev) => {
+                data.set((prev) => {
                     if (!rowData.size)
                         return prev;
                     return prev.filter((d) => !rowData.has(d));
                 });
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowSetBotData: (data) => {
-                rdsStore.set(bottomData, data);
-                const grid = rdsStore.get(grid$);
+                bottomData.set(data);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
-            rowSetCenterData: (d) => {
-                rdsStore.set(data, d);
-                const grid = rdsStore.get(grid$);
+            rowSetTopData: (data) => {
+                topData.set(data);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
-            rowSetTopData: (data) => {
-                rdsStore.set(topData, data);
-                const grid = rdsStore.get(grid$);
+            rowSetCenterData: (d) => {
+                data.set(d);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowExpand: (expansions) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
-                const mode = grid.state.columnPivotMode.get();
-                if (mode)
-                    grid.state.columnPivotRowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
-                else
-                    grid.state.rowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
+                grid.state.rowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
             },
             rowToIndex,
             rowSelect: (params) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 if (params.mode === "none")
@@ -476,31 +443,31 @@ export function makeClientTreeDataSource(p) {
                 }
             },
             rowSelectAll: (params) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 if (params.deselect) {
                     grid.state.rowSelectedIds.set(new Set());
                     return;
                 }
-                const t = rdsStore.get(tree);
+                const t = peek(tree);
                 grid.state.rowSelectedIds.set(new Set(t.idsAll));
             },
             rowData: (section) => {
                 const d = [];
                 if (section === "top" || section === "flat") {
-                    d.push(...rdsStore.get(topData));
+                    d.push(...peek(topData));
                 }
                 if (section === "center" || section === "flat") {
-                    d.push(...rdsStore.get(data));
+                    d.push(...peek(data));
                 }
                 if (section === "bottom" || section === "flat") {
-                    d.push(...rdsStore.get(bottomData));
+                    d.push(...peek(bottomData));
                 }
                 return d;
             },
             rowAreAllSelected: (rowId) => {
-                const g = rdsStore.get(grid$);
+                const g = grid$();
                 if (!g)
                     return false;
                 const selected = g.state.rowSelectedIds.get();
@@ -511,14 +478,14 @@ export function makeClientTreeDataSource(p) {
                     const childIds = new Set(rowAllChildIds(rowId));
                     return childIds.isSubsetOf(selected);
                 }
-                const f = rdsStore.get(tree);
+                const f = tree();
                 return f.idsAll.isSubsetOf(selected);
             },
         },
         {
-            top: makeGridAtom(topData, rdsStore),
-            center: makeGridAtom(data, rdsStore),
-            bottom: makeGridAtom(bottomData, rdsStore),
+            top: makeAtom(topData),
+            center: makeAtom(data),
+            bottom: makeAtom(bottomData),
         },
     ];
 }