@1771technologies/lytenyte-pro 0.9.4 → 1.0.0-beta.0

package/dist/row-data-source-server/use-server-data-source.js

@@ -0,0 +1,679 @@
+import { atom, createStore } from "@1771technologies/atom";
+import { useRef } from "react";
+import { makeAsyncTree } from "./async-tree/make-async-tree";
+import { makeGridAtom } from "@1771technologies/lytenyte-shared";
+import { getNodeDepth } from "./utils/get-node-depth";
+import { getRequestId } from "./utils/get-request-id";
+import { RangeTree } from "./range-tree/range-tree";
+import { getNodePath } from "./utils/get-node-path";
+import { equal } from "@1771technologies/lytenyte-js-utils";
+export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, dataInFilterItemFetcher, cellUpdateHandler, cellUpdateOptimistically = true, blockSize = 200, }) {
+    let grid = null;
+    const snapshot$ = atom(Date.now());
+    const rdsStore = createStore();
+    const tree$ = atom(makeAsyncTree());
+    const tree = makeGridAtom(tree$, rdsStore);
+    const isLoading$ = atom(false);
+    const isLoading = makeGridAtom(isLoading$, rdsStore);
+    const error$ = atom();
+    const loadError = makeGridAtom(error$, rdsStore);
+    const nodesWithError = atom(new Map());
+    const initialized = atom(false);
+    const model$ = atom({
+        sorts: [],
+        filters: {},
+        filtersIn: {},
+        quickSearch: null,
+        group: [],
+        groupExpansions: {},
+        aggregations: {},
+        pivotGroupExpansions: {},
+        pivotMode: false,
+        pivotModel: {
+            columns: [],
+            filters: {},
+            filtersIn: {},
+            rows: [],
+            sorts: [],
+            values: [],
+        },
+    });
+    const model = makeGridAtom(model$, rdsStore);
+    const pivotGroupExpansions = atom((g) => g(model$).pivotGroupExpansions);
+    const rowGroupExpansions = atom((g) => g(model$).groupExpansions);
+    const pivotMode = atom((g) => g(model$).pivotMode);
+    const topData = atom([]);
+    const botData = atom([]);
+    const seenRequests = new Set();
+    const dataResponseHandler = (res) => {
+        const t = tree.get();
+        const dataResponses = res.filter((r) => {
+            return !("kind" in r && (r.kind === "top" || r.kind === "bottom"));
+        });
+        dataResponses.sort((l, r) => l.path.length - r.path.length);
+        const pinResponses = res.filter((r) => {
+            return "kind" in r && (r.kind === "top" || r.kind === "bottom");
+        });
+        pinResponses.forEach((p) => {
+            if (p.kind === "top") {
+                rdsStore.set(topData, p.data);
+            }
+            else {
+                rdsStore.set(botData, p.data);
+            }
+        });
+        dataResponses.forEach((r) => {
+            t.set({
+                path: r.path,
+                items: r.data.map((c, i) => {
+                    if (c.kind === "leaf") {
+                        return {
+                            kind: "leaf",
+                            data: c,
+                            relIndex: r.start + i,
+                        };
+                    }
+                    else {
+                        return {
+                            kind: "parent",
+                            data: c,
+                            path: c.key,
+                            relIndex: r.start + i,
+                            size: c.childCount,
+                        };
+                    }
+                }),
+                size: r.size,
+            });
+        });
+    };
+    const dataRequestHandler = async (p, force = false, onSuccess, onFailure) => {
+        if (!grid)
+            return;
+        const unseen = p.filter((x) => force || !seenRequests.has(x.id));
+        unseen.forEach((x) => seenRequests.add(x.id));
+        if (unseen.length === 0) {
+            onSuccess?.();
+            return;
+        }
+        rdsStore.set(nodesWithError, (prev) => {
+            const next = new Map(prev);
+            p.forEach((r) => {
+                for (let i = r.rowStartIndex; i < r.rowEndIndex; i++) {
+                    next.delete(i);
+                }
+            });
+            return prev;
+        });
+        try {
+            const res = await dataFetcher({
+                grid: grid,
+                model: model.get(),
+                reqTime: Date.now(),
+                requests: p,
+            });
+            dataResponseHandler(res);
+            onSuccess?.();
+        }
+        catch (e) {
+            // Mark them as unseen since the request failed.
+            unseen.forEach((x) => seenRequests.delete(x.id));
+            onFailure?.(e);
+            console.error(e);
+        }
+        finally {
+            rdsStore.set(snapshot$, Date.now());
+            grid.state.rowDataStore.rowClearCache();
+        }
+    };
+    const viewChange = () => {
+        if (!grid)
+            return;
+        const bounds = grid.state.viewBounds.get();
+        const f = flat.get();
+        const te = bounds.rowTopEnd;
+        const seen = new Set();
+        const requests = [];
+        for (let i = bounds.rowCenterStart - te; i < bounds.rowCenterEnd - te; i++) {
+            const ranges = f.rangeTree.findRangesForRowIndex(i);
+            ranges.forEach((c) => {
+                if (c.parent.kind === "root") {
+                    const blockIndex = Math.floor(i / blockSize);
+                    const start = blockIndex * blockSize;
+                    const end = Math.min(start + blockSize, c.parent.size);
+                    const reqId = getRequestId([], start, end);
+                    if (seen.has(reqId))
+                        return;
+                    seen.add(reqId);
+                    const size = start + blockSize > c.parent.size ? c.parent.size - start : blockSize;
+                    requests.push({
+                        id: reqId,
+                        path: [],
+                        start,
+                        end,
+                        rowStartIndex: i,
+                        rowEndIndex: i + size,
+                    });
+                }
+                else {
+                    const blockIndex = Math.floor(c.parent.relIndex / blockSize);
+                    const start = blockIndex * blockSize;
+                    const end = Math.min(start + blockSize, c.parent.size);
+                    const path = getNodePath(c.parent);
+                    const reqId = getRequestId(path, start, end);
+                    if (seen.has(reqId))
+                        return;
+                    seen.add(reqId);
+                    const size = start + blockSize > c.parent.size ? c.parent.size - start : blockSize;
+                    requests.push({
+                        id: reqId,
+                        path,
+                        start,
+                        end,
+                        rowStartIndex: i,
+                        rowEndIndex: i + size,
+                    });
+                }
+            });
+        }
+        dataRequestHandler(requests, false, () => { }, (e) => {
+            rdsStore.set(nodesWithError, (prev) => {
+                const next = new Map(prev);
+                requests.forEach((r) => {
+                    for (let i = r.rowStartIndex; i < r.rowEndIndex; i++) {
+                        next.set(i, e);
+                    }
+                });
+                return prev;
+            });
+        });
+    };
+    const resetRequest = async () => {
+        seenRequests.clear();
+        tree.set(makeAsyncTree());
+        rdsStore.set(nodesWithError, new Map());
+        // Initialize the grid.
+        const initialDataRequest = {
+            path: [],
+            id: getRequestId([], 0, blockSize),
+            rowStartIndex: 0,
+            rowEndIndex: blockSize,
+            start: 0,
+            end: blockSize,
+        };
+        loadError.set(null);
+        isLoading.set(true);
+        await dataRequestHandler([initialDataRequest], false, () => { }, (e) => {
+            loadError.set(e);
+        });
+        isLoading.set(false);
+    };
+    const flat$ = atom((g) => {
+        g(snapshot$);
+        const mode = rdsStore.get(pivotMode);
+        const expansions = mode ? g(pivotGroupExpansions) : g(rowGroupExpansions);
+        const t = g(tree$);
+        const rowIdToRow = new Map();
+        const rowIndexToRow = new Map();
+        const rowIdToRowIndex = new Map();
+        const ranges = [];
+        function processParent(node, start) {
+            const rows = [...node.byIndex.values()].sort((l, r) => l.relIndex - r.relIndex);
+            // Track the additional rows added by expanded groups
+            let offset = 0;
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                const rowIndex = row.relIndex + start + offset;
+                rowIndexToRow.set(rowIndex, row);
+                rowIdToRowIndex.set(row.data.id, rowIndex);
+                rowIdToRow.set(row.data.id, row);
+                if (row.kind === "parent" && expansions[row.data.id]) {
+                    offset += processParent(row, rowIndex + 1);
+                }
+            }
+            ranges.push({ rowStart: start, rowEnd: offset + node.size + start, parent: node });
+            return offset + node.size;
+        }
+        const size = processParent(t, 0);
+        const rangeTree = new RangeTree(ranges);
+        return {
+            size,
+            rowIndexToRow,
+            rowIdToRow,
+            rowIdToRowIndex,
+            rangeTree,
+        };
+    });
+    const flat = makeGridAtom(flat$, rdsStore);
+    const cleanup = [];
+    const init = (g) => {
+        grid = g;
+        const sorts = g.state.sortModel.get();
+        const filters = g.state.filterModel.get();
+        const filtersIn = g.state.filterInModel.get();
+        const quickSearch = g.state.quickSearch.get();
+        const group = g.state.rowGroupModel.get();
+        const groupExpansions = g.state.rowGroupExpansions.get();
+        const aggregations = g.state.aggModel.get();
+        const pivotMode = g.state.columnPivotMode.get();
+        const pivotModel = g.state.columnPivotModel.get();
+        const pivotGroupExpansions = g.state.columnPivotRowGroupExpansions.get();
+        rdsStore.set(model$, {
+            sorts,
+            filters,
+            filtersIn,
+            quickSearch,
+            aggregations,
+            group,
+            groupExpansions,
+            pivotMode,
+            pivotModel,
+            pivotGroupExpansions,
+        });
+        rdsStore.set(initialized, true);
+        // Handle row count changes
+        const f = flat.get();
+        g.state.rowDataStore.rowCenterCount.set(f.size);
+        g.state.rowDataStore.rowBottomCount.set(rdsStore.get(botData).length);
+        g.state.rowDataStore.rowTopCount.set(rdsStore.get(topData).length);
+        rdsStore.sub(flat$, () => {
+            const f = flat.get();
+            g.state.rowDataStore.rowCenterCount.set(f.size);
+            viewChange();
+        });
+        rdsStore.sub(topData, () => {
+            g.state.rowDataStore.rowTopCount.set(rdsStore.get(topData).length);
+            g.state.rowDataStore.rowClearCache();
+        });
+        rdsStore.sub(botData, () => {
+            g.state.rowDataStore.rowBottomCount.set(rdsStore.get(botData).length);
+            g.state.rowDataStore.rowClearCache();
+        });
+        resetRequest();
+        // Watch the view bound changes.
+        g.state.viewBounds.watch(() => {
+            viewChange();
+        });
+        let prevPivotColumnModel = pivotModel.columns;
+        let prevPivotColumnValues = pivotModel.values;
+        const updatePivotColumns = async (mdl, ignoreEqualCheck = false) => {
+            if (!ignoreEqualCheck &&
+                equal(prevPivotColumnModel, mdl.columns) &&
+                equal(prevPivotColumnValues, mdl.values))
+                return;
+            const cols = await dataColumnPivotFetcher?.({
+                grid: grid,
+                model: model.get(),
+                reqTime: Date.now(),
+            });
+            if (cols)
+                grid?.state.columnPivotColumns.set(cols);
+            resetRequest();
+            prevPivotColumnModel = mdl.columns;
+            prevPivotColumnValues = mdl.values;
+        };
+        if (pivotMode)
+            updatePivotColumns(pivotModel);
+        // Make these deep equality checks
+        cleanup.push(g.state.columnPivotMode.watch(() => {
+            const model = g.state.columnPivotModel.get();
+            updatePivotColumns(model, true);
+            rdsStore.set(model$, (prev) => ({ ...prev, pivotMode: g.state.columnPivotMode.get() }));
+            g.state.rowDataStore.rowClearCache();
+        }));
+        cleanup.push(g.state.columnPivotModel.watch(() => {
+            const model = g.state.columnPivotModel.get();
+            updatePivotColumns(model);
+            rdsStore.set(model$, (prev) => ({
+                ...prev,
+                pivotModel: model,
+            }));
+            g.state.rowDataStore.rowClearCache();
+        }));
+        g.state.columnPivotRowGroupExpansions.watch(() => {
+            rdsStore.set(model$, (prev) => ({
+                ...prev,
+                columnPivotGroupExpansions: g.state.columnPivotRowGroupExpansions.get(),
+            }));
+            grid?.state.rowDataStore.rowClearCache();
+        });
+        // Sort model monitoring
+        cleanup.push(g.state.sortModel.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, sorts: g.state.sortModel.get() }));
+            resetRequest();
+        }));
+        // Filter model monitoring
+        cleanup.push(g.state.filterModel.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, filters: g.state.filterModel.get() }));
+            resetRequest();
+        }));
+        cleanup.push(g.state.quickSearch.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, quickSearch: g.state.quickSearch.get() }));
+            resetRequest();
+        }));
+        cleanup.push(g.state.filterInModel.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, filtersIn: g.state.filterInModel.get() }));
+            resetRequest();
+        }));
+        // Row group model monitoring
+        cleanup.push(g.state.rowGroupModel.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, group: g.state.rowGroupModel.get() }));
+            resetRequest();
+        }));
+        // Row group expansions monitoring
+        cleanup.push(g.state.rowGroupExpansions.watch(() => {
+            rdsStore.set(model$, (prev) => ({
+                ...prev,
+                groupExpansions: g.state.rowGroupExpansions.get(),
+            }));
+            grid?.state.rowDataStore.rowClearCache();
+        }));
+        // Agg model monitoring
+        cleanup.push(g.state.aggModel.watch(() => {
+            rdsStore.set(model$, (prev) => ({ ...prev, agg: g.state.aggModel.get() }));
+            resetRequest();
+        }));
+    };
+    const rowById = (id) => {
+        const f = flat.get();
+        const node = f.rowIdToRow.get(id);
+        if (!node) {
+            {
+                const top = rdsStore.get(topData);
+                const node = top.find((c) => c.id === id);
+                if (node)
+                    return { kind: "leaf", data: node.data, id: node.id };
+            }
+            {
+                const bot = rdsStore.get(topData);
+                const node = bot.find((c) => c.id === id);
+                if (node)
+                    return { kind: "leaf", data: node.data, id: node.id };
+            }
+            return null;
+        }
+        if (node.kind === "parent") {
+            return {
+                kind: "branch",
+                data: node.data.data,
+                id: node.data.id,
+                key: node.path,
+                depth: getNodeDepth(node),
+            };
+        }
+        return {
+            kind: "leaf",
+            data: node.data.data,
+            id: node.data.id,
+        };
+    };
+    const rowAllChildIds = (rowId) => {
+        const f = flat.get();
+        const row = f.rowIdToRow.get(rowId);
+        if (!row || row.kind === "leaf")
+            return [];
+        const ids = new Set();
+        const stack = [...row.byPath.values()];
+        while (stack.length) {
+            const item = stack.pop();
+            if (item.kind === "leaf") {
+                ids.add(item.data.id);
+            }
+            else {
+                stack.push(...item.byPath.values());
+                ids.add(item.data.id);
+            }
+        }
+        return [...ids];
+    };
+    const rowByIndex = (ri) => {
+        const f = flat.get();
+        const top = rdsStore.get(topData);
+        const bot = rdsStore.get(botData);
+        const errors = rdsStore.get(nodesWithError);
+        const error = errors.get(ri);
+        if (ri == null || ri < 0 || ri >= f.size + top.length + bot.length)
+            return null;
+        // Top node
+        if (ri < top.length) {
+            const row = top[ri];
+            if (!row)
+                return null;
+            return { kind: "leaf", data: row.data, id: row.id, error };
+        }
+        if (ri >= f.size + top.length) {
+            const i = ri - f.size - top.length;
+            const row = bot[i];
+            if (!row)
+                return null;
+            return { kind: "leaf", data: row.data, id: row.id, error };
+        }
+        const node = f.rowIndexToRow.get(ri - top.length);
+        if (!node && error)
+            return { kind: "leaf", data: null, id: `error-${ri}`, loading: false, error };
+        if (!node)
+            return { kind: "leaf", data: null, id: `loading-${ri}`, loading: true, error: null };
+        if (node.kind === "parent") {
+            return {
+                kind: "branch",
+                data: node.data.data,
+                id: node.data.id,
+                key: node.path,
+                depth: getNodeDepth(node),
+                error,
+            };
+        }
+        return {
+            kind: "leaf",
+            data: node.data.data,
+            id: node.data.id,
+            error,
+        };
+    };
+    const rowExpand = (p) => {
+        const f = flat.get();
+        const rowIndices = [];
+        const requests = Object.entries(p)
+            .map(([rowId, state]) => {
+            if (!state)
+                return null;
+            const rowIndex = rowToIndex(rowId);
+            if (rowIndex == null)
+                return null;
+            const row = f.rowIndexToRow.get(rowIndex);
+            if (!row || row.kind === "leaf")
+                return null;
+            const path = getNodePath(row);
+            rowIndices.push(rowIndex);
+            return {
+                id: getRequestId(path, 0, Math.min(blockSize, row.size)),
+                start: 0,
+                end: Math.min(blockSize, row.size),
+                path,
+                rowStartIndex: rowIndex + 1,
+                rowEndIndex: Math.min(row.size, rowIndex + blockSize + 1),
+            };
+        })
+            .filter((c) => !!c);
+        const mode = rdsStore.get(pivotMode);
+        // Remove the errors before requesting.
+        const errorRows = rdsStore.get(nodesWithError);
+        if (rowIndices.some((c) => errorRows.has(c))) {
+            rdsStore.set(nodesWithError, (prev) => {
+                const n = new Map(prev);
+                rowIndices.forEach((c) => n.delete(c));
+                return prev;
+            });
+        }
+        dataRequestHandler(requests, false, () => {
+            if (mode)
+                grid?.state.columnPivotColumnGroupExpansions.set((prev) => ({ ...prev, ...p }));
+            else
+                grid?.state.rowGroupExpansions.set((prev) => ({ ...prev, ...p }));
+        }, (error) => {
+            rdsStore.set(nodesWithError, (prev) => {
+                const n = new Map(prev);
+                rowIndices.forEach((c) => n.set(c, error));
+                return prev;
+            });
+        });
+    };
+    const rowToIndex = (rowId) => {
+        const f = flat.get();
+        return f.rowIdToRowIndex.get(rowId) ?? null;
+    };
+    const rowSelect = (params) => {
+        if (!grid || params.mode === "none")
+            return;
+        if (params.mode === "single") {
+            if (params.deselect) {
+                grid.state.rowSelectedIds.set(new Set());
+            }
+            else {
+                grid.state.rowSelectedIds.set(new Set([params.startId]));
+            }
+            return;
+        }
+        const ids = new Set();
+        if (params.startId === params.endId) {
+            ids.add(params.startId);
+            if (params.selectChildren) {
+                rowAllChildIds(params.startId).forEach((c) => ids.add(c));
+            }
+        }
+        else {
+            const first = rowToIndex(params.startId);
+            const last = rowToIndex(params.endId);
+            if (first == null || last == null)
+                return;
+            const start = Math.min(first, last);
+            const end = Math.max(first, last);
+            for (let i = start; i <= end; i++) {
+                const row = rowByIndex(i);
+                if (!row)
+                    continue;
+                if (params.selectChildren) {
+                    rowAllChildIds(row.id).forEach((c) => ids.add(c));
+                }
+                if (row?.id)
+                    ids.add(row.id);
+            }
+        }
+        if (params.deselect) {
+            const current = grid.state.rowSelectedIds.get();
+            const next = current.difference(ids);
+            grid.state.rowSelectedIds.set(next);
+        }
+        else {
+            const current = grid.state.rowSelectedIds.get();
+            const next = current.union(ids);
+            grid.state.rowSelectedIds.set(next);
+        }
+    };
+    const rowSelectAll = (params) => {
+        if (!grid)
+            return;
+        if (params.deselect) {
+            grid.state.rowSelectedIds.set(new Set());
+            return;
+        }
+        const t = flat.get();
+        grid.state.rowSelectedIds.set(new Set(t.rowIdToRow.keys()));
+    };
+    const rowSetBotData = () => {
+        throw new Error(`Server data source does not support directly setting pinned rows. Instead send a DataResponsePinned object via the pushData method`);
+    };
+    const rowSetTopData = () => {
+        throw new Error(`Server data source does not support directly setting pinned rows. Instead send a DataResponsePinned object via the pushData method`);
+    };
+    // CRUD ops
+    const rowAdd = () => {
+        throw new Error(`Server data source does not support adding rows directly. Instead push updates via the pushResponses or pushRequests method`);
+    };
+    const rowDelete = () => {
+        throw new Error(`Server data source does not support deleting rows directly. Instead push updates via the pushResponses or pushRequests method`);
+    };
+    const rowUpdate = (updates) => {
+        const f = flat.get();
+        const top = rdsStore.get(topData);
+        const bot = rdsStore.get(botData);
+        const firstBot = f.size + top.length;
+        const idMap = new Map([...updates.entries()]
+            .map(([key, data]) => {
+            if (typeof key === "string")
+                return [key, data];
+            const row = rowByIndex(key);
+            if (!row)
+                return null;
+            return [row.id, data];
+        })
+            .filter((n) => n != null));
+        cellUpdateHandler?.(idMap);
+        if (!cellUpdateOptimistically)
+            return;
+        for (const [key, data] of updates.entries()) {
+            const rowIndex = typeof key === "number" ? key : rowToIndex(key);
+            const row = rowByIndex(rowIndex);
+            if (!row || !grid) {
+                console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+                continue;
+            }
+            if (rowIndex < top.length) {
+                top[rowIndex].data = data;
+            }
+            else if (rowIndex >= firstBot) {
+                bot[rowIndex].data = data;
+            }
+            else {
+                const node = f.rowIndexToRow.get(rowIndex - top.length);
+                if (node)
+                    node.data.data = data;
+            }
+            grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
+        }
+    };
+    const inFilterItems = (c) => {
+        if (!dataInFilterItemFetcher || !grid)
+            return [];
+        return dataInFilterItemFetcher({ column: c, grid, reqTime: Date.now() });
+    };
+    const rowAreAllSelected = () => {
+        return false;
+    };
+    return {
+        init,
+        rowAdd,
+        rowById,
+        rowAllChildIds,
+        rowByIndex,
+        rowDelete,
+        rowExpand,
+        rowSelect,
+        rowSelectAll,
+        rowSetBotData,
+        rowSetTopData,
+        rowToIndex,
+        rowUpdate,
+        inFilterItems,
+        rowAreAllSelected,
+        isLoading,
+        loadError,
+        pushResponses: (res) => {
+            dataResponseHandler(res);
+        },
+        pushRequests: (req, onSuccess, onFailure) => {
+            dataRequestHandler(req, true, onSuccess, onFailure);
+        },
+        reset: resetRequest,
+        retry: () => {
+            viewChange();
+        },
+    };
+}
+export function useServerDataSource(p) {
+    const ds = useRef(null);
+    if (!ds.current) {
+        ds.current = makeServerDataSource(p);
+    }
+    return ds.current;
+}

package/dist/row-data-source-server/utils/get-node-depth.d.ts

@@ -0,0 +1,2 @@
+import type { TreeLeaf, TreeParent } from "../async-tree/+types.async-tree";
+export declare function getNodeDepth(node: TreeParent<any, any> | TreeLeaf<any, any>): number;

package/dist/row-data-source-server/utils/get-node-depth.js

@@ -0,0 +1,9 @@
+export function getNodeDepth(node) {
+    let depth = 0;
+    let current = node.parent;
+    while (current && current.kind !== "root") {
+        depth++;
+        current = current.parent;
+    }
+    return depth;
+}

package/dist/row-data-source-server/utils/get-node-path.d.ts

@@ -0,0 +1,2 @@
+import type { TreeParent, TreeRoot } from "../async-tree/+types.async-tree";
+export declare function getNodePath<T, K>(c: TreeRoot<T, K> | TreeParent<T, K>): (string | null)[];

package/dist/row-data-source-server/utils/get-node-path.js

@@ -0,0 +1,9 @@
+export function getNodePath(c) {
+    const path = [];
+    let current = c;
+    while (current.kind !== "root") {
+        path.unshift(current.path);
+        current = current.parent;
+    }
+    return path;
+}