@1771technologies/lytenyte-pro 1.0.2 → 1.0.4

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

@@ -1,31 +1,31 @@
 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 { clamp, equal, get } 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 makeClientDataSourcePaginated(p) {
-    const rdsStore = createStore();
-    const pageInternal = atom(0);
-    const rowsPerPage = atom(p.rowsPerPage ?? 50);
-    const pageCount = atom((g) => Math.max(Math.ceil(g(flatLength) / g(rowsPerPage)), 1));
-    const page = atom((g) => clamp(0, g(pageInternal), g(pageCount) - 1), (g, s, n) => {
-        const res = typeof n === "function" ? n(g(pageInternal)) : n;
-        s(pageInternal, clamp(0, res, g(pageCount) - 1));
-    });
-    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 pageInternal = signal(0);
+    const rowsPerPage = signal(p.rowsPerPage ?? 50);
+    const pageCount = computed(() => Math.max(Math.ceil(flatLength() / rowsPerPage()), 1));
+    const page = computed(() => clamp(0, pageInternal(), pageCount() - 1));
+    page.set = (n) => {
+        const res = typeof n === "function" ? n(peek(pageInternal)) : n;
+        pageInternal.set(clamp(0, res, peek(pageCount) - 1));
+        return res;
+    };
+    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, {
@@ -40,17 +40,17 @@ export function makeClientDataSourcePaginated(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: {},
@@ -59,24 +59,24 @@ export function makeClientDataSourcePaginated(p) {
         group: [],
         groupExpansions: {},
     });
-    const sortModel = atom((g) => g(models).sort);
-    const filterModel = atom((g) => g(models).filter);
-    const filterInModel = atom((g) => g(models).filterIn);
-    const rowGroupModel = atom((g) => g(models).group);
-    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 rowGroups = g(rowGroupModel)
+    const sortModel = computed(() => models().sort);
+    const filterModel = computed(() => models().filter);
+    const filterInModel = computed(() => models().filterIn);
+    const rowGroupModel = computed(() => models().group);
+    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 rowGroups = rowGroupModel()
             .map((c) => {
             if (typeof c === "string")
-                return (r) => grid.api.columnField(c, { kind: "leaf", data: r.data });
+                return (r) => grid.api.columnField(c, r);
             if (typeof c.field === "string" || typeof c.field === "number")
                 return (r) => r.data[c.field];
             if (typeof c.field === "function")
@@ -84,7 +84,7 @@ export function makeClientDataSourcePaginated(p) {
             return (r) => get(r.data, c.field.path);
         })
             .map((c) => ({ fn: c }));
-        const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
+        const rowAggModel = Object.entries(aggModel()).map(([name, agg]) => {
             if (typeof agg.fn === "function") {
                 const fn = agg.fn;
                 return {
@@ -107,11 +107,11 @@ export function makeClientDataSourcePaginated(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) {
@@ -150,27 +150,27 @@ export function makeClientDataSourcePaginated(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);
@@ -194,32 +194,32 @@ export function makeClientDataSourcePaginated(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 rowCount = rdsStore.get(flatLength);
-        const perPage = rdsStore.get(rowsPerPage);
-        const currentPage = rdsStore.get(pageInternal);
+        const rowCount = flatLength();
+        const perPage = rowsPerPage();
+        const currentPage = pageInternal();
         const center = clamp(0, rowCount - currentPage * perPage, perPage);
         store.rowCenterCount.set(center);
         const updateCounts = () => {
-            const rowCount = rdsStore.get(flatLength);
-            const perPage = rdsStore.get(rowsPerPage);
-            const currentPage = rdsStore.get(pageInternal);
+            const rowCount = flatLength();
+            const perPage = rowsPerPage();
+            const currentPage = pageInternal();
             const center = clamp(0, rowCount - currentPage * perPage, perPage);
             // Move to the last page if we are past the boundary
             if (center === 0 && currentPage !== 0) {
-                const currentPage = rdsStore.get(pageCount) - 1;
-                rdsStore.set(page, currentPage);
-                rdsStore.set(snapshot, (prev) => prev + 1);
+                const currentPage = pageCount() - 1;
+                page.set(currentPage);
+                snapshot.set((prev) => prev + 1);
                 const center = clamp(0, rowCount - currentPage * perPage, perPage);
                 store.rowCenterCount.set(center);
                 grid.state.rowDataStore.rowClearCache();
@@ -228,25 +228,24 @@ export function makeClientDataSourcePaginated(p) {
             store.rowCenterCount.set(center);
             grid.state.rowDataStore.rowClearCache();
         };
-        cleanup.push(rdsStore.sub(flatLength, updateCounts));
-        cleanup.push(rdsStore.sub(page, updateCounts));
-        cleanup.push(rdsStore.sub(rowsPerPage, updateCounts));
-        cleanup.push(rdsStore.sub(pageInternal, () => {
-            grid.state.rowDataStore.rowClearCache();
+        cleanup.push(effect(() => {
+            flatLength();
+            page();
+            rowsPerPage();
+            updateCounts();
         }));
-        const top = rdsStore.get(topData).length;
-        store.rowTopCount.set(top);
-        cleanup.push(rdsStore.sub(topData, () => {
+        cleanup.push(effect(() => {
+            pageInternal();
             grid.state.rowDataStore.rowClearCache();
-            const top = rdsStore.get(topData).length;
-            store.rowTopCount.set(top);
         }));
-        const bottom = rdsStore.get(bottomData).length;
+        const top = topData().length;
+        store.rowTopCount.set(top);
+        const bottom = bottomData().length;
         store.rowBottomCount.set(bottom);
-        cleanup.push(rdsStore.sub(bottomData, () => {
+        cleanup.push(effect(() => {
+            store.rowTopCount.set(topData().length);
+            store.rowBottomCount.set(bottomData().length);
             grid.state.rowDataStore.rowClearCache();
-            const bot = rdsStore.get(bottomData).length;
-            store.rowBottomCount.set(bot);
         }));
         const sort = grid.state.sortModel.get();
         const filter = grid.state.filterModel.get();
@@ -255,65 +254,56 @@ export function makeClientDataSourcePaginated(p) {
         const groupExpansions = grid.state.rowGroupExpansions.get();
         const agg = grid.state.aggModel.get();
         const quickSearch = grid.state.quickSearch.get();
-        rdsStore.set(models, { agg, filter, filterIn, group, groupExpansions, sort, quickSearch });
-        rdsStore.set(initialized, true);
-        // Sort model monitoring
-        cleanup.push(grid.state.sortModel.watch(() => {
-            grid.state.rowDataStore.rowClearCache();
-            rdsStore.set(models, (prev) => ({ ...prev, sort: grid.state.sortModel.get() }));
-        }));
-        // 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(() => {
-            grid.state.filterInModel.watch(() => {
-                rdsStore.set(models, (prev) => ({ ...prev, filterIn: grid.state.filterInModel.get() }));
-                grid.state.rowDataStore.rowClearCache();
+        models.set({
+            agg,
+            filter,
+            filterIn,
+            group,
+            quickSearch,
+            groupExpansions,
+            sort,
+        });
+        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.$(),
             });
-        }));
-        // 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() }));
             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;
         if (index < topOffset)
             return top[index];
         if (index < centerOffset) {
-            const pageOffset = index + rdsStore.get(rowsPerPage) * rdsStore.get(pageInternal);
+            const pageOffset = index + peek(rowsPerPage) * peek(pageInternal);
             return center[pageOffset - topOffset];
         }
         if (index < botOffset)
@@ -321,10 +311,10 @@ export function makeClientDataSourcePaginated(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;
@@ -345,14 +335,14 @@ export function makeClientDataSourcePaginated(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);
@@ -369,7 +359,7 @@ export function makeClientDataSourcePaginated(p) {
         return null;
     };
     const rowAllChildIds = (rowId) => {
-        const t = rdsStore.get(tree);
+        const t = tree();
         const ids = [];
         const node = t.idToNode.get(rowId);
         if (node?.kind === 2) {
@@ -382,9 +372,9 @@ export function makeClientDataSourcePaginated(p) {
     return [
         {
             page: {
-                current: makeGridAtom(page, rdsStore),
-                pageCount: makeGridAtom(pageCount, rdsStore),
-                perPage: makeGridAtom(rowsPerPage, rdsStore),
+                current: makeAtom(page),
+                pageCount: makeAtom(pageCount),
+                perPage: makeAtom(rowsPerPage),
             },
             init,
             rowById,
@@ -392,10 +382,10 @@ export function makeClientDataSourcePaginated(p) {
             rowAllChildIds,
             rowUpdate,
             inFilterItems: (c) => {
-                const grid = rdsStore.get(grid$);
+                const grid = grid$();
                 if (!grid)
                     return [];
-                const data = rdsStore.get(centerNodes);
+                const data = centerNodes();
                 const values = new Set(data.map((row) => {
                     const field = grid.api.columnField(c, row);
                     return field;
@@ -406,7 +396,7 @@ export function makeClientDataSourcePaginated(p) {
                 return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
             },
             rowAreAllSelected: (rowId) => {
-                const g = rdsStore.get(grid$);
+                const g = grid$();
                 if (!g)
                     return false;
                 const selected = g.state.rowSelectedIds.get();
@@ -417,11 +407,11 @@ export function makeClientDataSourcePaginated(p) {
                     const childIds = new Set(rowAllChildIds(rowId));
                     return childIds.isSubsetOf(selected);
                 }
-                const f = rdsStore.get(tree);
+                const f = tree();
                 return f.idsAll.isSubsetOf(selected);
             },
             rowAdd: (newRows, place = "end") => {
-                rdsStore.set(data, (prev) => {
+                data.set((prev) => {
                     if (!newRows.length)
                         return prev;
                     let next;
@@ -435,7 +425,7 @@ export function makeClientDataSourcePaginated(p) {
                     }
                     return next;
                 });
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowDelete: (rows) => {
@@ -447,51 +437,51 @@ export function makeClientDataSourcePaginated(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 = grid$();
                 grid?.state.rowDataStore.rowClearCache();
             },
             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;
             },
             rowExpand: (expansions) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 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")
@@ -542,21 +532,21 @@ export function makeClientDataSourcePaginated(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));
             },
         },
         {
-            top: makeGridAtom(topData, rdsStore),
-            center: makeGridAtom(data, rdsStore),
-            bottom: makeGridAtom(bottomData, rdsStore),
+            top: makeAtom(topData),
+            center: makeAtom(data),
+            bottom: makeAtom(bottomData),
         },
     ];
 }