@1771technologies/lytenyte-pro 1.0.0-beta.33 → 1.0.0-beta.36

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

@@ -2,7 +2,12 @@ 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 {
+  dateComparator,
+  makeGridAtom,
+  numberComparator,
+  stringComparator,
+} from "@1771technologies/lytenyte-shared";
 import { equal, get, itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
 import { builtIns } from "./built-ins/built-ins.js";
@@ -10,688 +15,718 @@ import { createPivotColumns } from "./pivots/create-pivot-columns.js";
 import { createAggModel } from "./pivots/create-agg-model.js";
 import { makeClientTree } from "./tree/client-tree.js";
 export function makeClientDataSource(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 cache = new Map();
-    const centerNodes = atom((g) => {
-        const nodes = [];
-        const d = g(data);
-        for (let i = 0; i < d.length; i++) {
-            if (!cache.has(i)) {
-                cache.set(i, {
-                    id: "",
-                    kind: "leaf",
-                    data: d[i],
-                });
-            }
-            const node = cache.get(i);
-            node.data = d[i];
-            nodes.push(node);
-        }
-        return nodes;
-    });
-    const topNodes = atom((g) => {
-        return g(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 pinnedIdMap = atom((g) => {
-        const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
-        return combined;
-    });
-    const models = atom({
-        sort: [],
-        filter: {},
-        filterIn: {},
-        quickSearch: null,
-        agg: {},
-        group: [],
-        groupExpansions: {},
-        columnPivotGroupExpansions: {},
-        pivotMode: false,
-        pivotModel: {
-            columns: [],
-            filters: {},
-            filtersIn: {},
-            rows: [],
-            sorts: [],
-            values: [],
-        },
-    });
-    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 columnPivotGroupExpansions = atom((g) => g(models).columnPivotGroupExpansions);
-    const columnPivotMode = atom((g) => g(models).pivotMode);
-    const columnPivotModel = atom((g) => g(models).pivotModel);
-    const grid$ = atom(null);
-    const snapshot = atom(0);
-    const pivotTree = atom((g) => {
-        g(snapshot);
-        const grid = g(grid$);
-        const model = g(columnPivotModel);
-        const lookup = new Map(grid.state.columns.get().map((c) => [c.id, c]));
-        const activeRows = model.rows.filter((c) => c.active ?? true);
-        const rowGroups = activeRows.length
-            ? activeRows.map((c) => {
-                const column = lookup.get(c.field);
-                return {
-                    fn: (r) => {
-                        const res = grid.api.columnField(column, r);
-                        return res == null ? null : `${res}`;
-                    },
-                };
-            })
-            : [{ fn: () => null }];
-        const filtered = computeFilteredRows(g(centerNodes), grid, model.filters, model.filtersIn, "", "case-sensitive", true);
-        const aggModel = createAggModel(model, grid.state.columnPivotColumns.get(), grid.state.columnGroupJoinDelimiter.get());
-        const rowAggModel = Object.entries(aggModel).map(([name, agg]) => {
-            if (typeof agg.fn === "function") {
-                const fn = agg.fn;
-                return {
-                    name,
-                    fn: (rows) => fn(rows.map((c) => c.data), grid),
-                };
-            }
-            const key = agg.fn;
-            const fn = (data) => {
-                const fieldData = data.map((r) => grid?.api.columnField(name, { kind: "leaf", data: r.data }));
-                return builtIns[key](fieldData);
-            };
-            return { name, fn };
+  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 cache = new Map();
+  const centerNodes = atom((g) => {
+    const nodes = [];
+    const d = g(data);
+    for (let i = 0; i < d.length; i++) {
+      if (!cache.has(i)) {
+        cache.set(i, {
+          id: "",
+          kind: "leaf",
+          data: d[i],
         });
-        return makeClientTree({
-            rowData: filtered,
-            rowAggModel: rowAggModel,
-            rowBranchModel: rowGroups,
-            rowIdGroup: p.rowIdBranch,
-            rowIdLeaf: p.rowIdLeaf,
-        });
-    });
-    const normalTree = 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)
-            .map((c) => {
-            if (typeof c === "string")
-                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")
-                return (r) => c.field({ data: r.data, grid: grid });
-            return (r) => get(r.data, c.field.path);
+      }
+      const node = cache.get(i);
+      node.data = d[i];
+      nodes.push(node);
+    }
+    return nodes;
+  });
+  const topNodes = atom((g) => {
+    return g(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 pinnedIdMap = atom((g) => {
+    const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
+    return combined;
+  });
+  const models = atom({
+    sort: [],
+    filter: {},
+    filterIn: {},
+    quickSearch: null,
+    agg: {},
+    group: [],
+    groupExpansions: {},
+    columnPivotGroupExpansions: {},
+    pivotMode: false,
+    pivotModel: {
+      columns: [],
+      filters: {},
+      filtersIn: {},
+      rows: [],
+      sorts: [],
+      values: [],
+    },
+  });
+  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 columnPivotGroupExpansions = atom((g) => g(models).columnPivotGroupExpansions);
+  const columnPivotMode = atom((g) => g(models).pivotMode);
+  const columnPivotModel = atom((g) => g(models).pivotModel);
+  const grid$ = atom(null);
+  const snapshot = atom(0);
+  const pivotTree = atom((g) => {
+    g(snapshot);
+    const grid = g(grid$);
+    const model = g(columnPivotModel);
+    const lookup = new Map(grid.state.columns.get().map((c) => [c.id, c]));
+    const activeRows = model.rows.filter((c) => c.active ?? true);
+    const rowGroups = activeRows.length
+      ? activeRows.map((c) => {
+          const column = lookup.get(c.field);
+          return {
+            fn: (r) => {
+              const res = grid.api.columnField(column, r);
+              return res == null ? null : `${res}`;
+            },
+          };
         })
-            .map((c) => ({ fn: c }));
-        const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
-            if (typeof agg.fn === "function") {
-                const fn = agg.fn;
-                return {
-                    name,
-                    fn: (rows) => fn(rows.map((c) => c.data), grid),
-                };
-            }
-            const key = agg.fn;
-            const fn = (data) => {
-                const fieldData = data.map((r) => grid?.api.columnField(name, { kind: "leaf", data: r.data }));
-                return builtIns[key](fieldData);
-            };
-            return { name, fn };
-        });
-        return makeClientTree({
-            rowData: filtered,
-            rowAggModel: grid ? rowAggModel : [],
-            rowBranchModel: grid ? rowGroups : [],
-            rowIdGroup: p.rowIdBranch,
-            rowIdLeaf: p.rowIdLeaf,
-        });
-    });
-    const sortComparator = atom((g) => {
-        const model = g(columnPivotMode) ? g(columnPivotModel).sorts : g(sortModel);
-        const grid = g(grid$);
-        if (!model.length || !grid)
-            return () => 0;
-        const comparator = (l, r) => {
-            let res = 0;
-            for (const sortSpec of model) {
-                const sort = sortSpec.sort;
-                const columnId = sortSpec.columnId;
-                const ld = l.kind === 2
-                    ? { kind: "branch", data: l.data, key: l.key }
-                    : { kind: "leaf", data: l.data.data };
-                const rd = r.kind === 2
-                    ? { kind: "branch", data: r.data, key: r.key }
-                    : { kind: "leaf", data: r.data.data };
-                if (sort.kind === "custom") {
-                    res = sort.comparator(ld, rd, sort.options ?? {});
-                }
-                else if (sort.kind === "number") {
-                    const left = grid.api.columnField(columnId, ld);
-                    const right = grid.api.columnField(columnId, rd);
-                    res = numberComparator(left, right, sort.options ?? {});
-                }
-                else if (sort.kind === "date") {
-                    const left = grid.api.columnField(columnId, ld);
-                    const right = grid.api.columnField(columnId, rd);
-                    res = dateComparator(left, right, sort.options ?? {});
-                }
-                else if (sort.kind === "string") {
-                    const left = grid.api.columnField(columnId, ld);
-                    const right = grid.api.columnField(columnId, rd);
-                    res = stringComparator(left, right, sort.options ?? {});
-                }
-                else {
-                    res = 0;
-                }
-                res = sortSpec.isDescending ? -res : res;
-                if (res !== 0)
-                    break;
-            }
-            return res;
+      : [{ fn: () => null }];
+    const filtered = computeFilteredRows(
+      g(centerNodes),
+      grid,
+      model.filters,
+      model.filtersIn,
+      "",
+      "case-sensitive",
+      true,
+    );
+    const aggModel = createAggModel(
+      model,
+      grid.state.columnPivotColumns.get(),
+      grid.state.columnGroupJoinDelimiter.get(),
+    );
+    const rowAggModel = Object.entries(aggModel).map(([name, agg]) => {
+      if (typeof agg.fn === "function") {
+        const fn = agg.fn;
+        return {
+          name,
+          fn: (rows) =>
+            fn(
+              rows.map((c) => c.data),
+              grid,
+            ),
         };
-        return comparator;
+      }
+      const key = agg.fn;
+      const fn = (data) => {
+        const fieldData = data.map((r) =>
+          grid?.api.columnField(name, { kind: "leaf", data: r.data }),
+        );
+        return builtIns[key](fieldData);
+      };
+      return { name, fn };
     });
-    const idToNode = atom((g) => {
-        const map = new Map();
-        traverse(g(tree).root, (node) => {
-            map.set(node.id, node);
-        });
-        return map;
+    return makeClientTree({
+      rowData: filtered,
+      rowAggModel: rowAggModel,
+      rowBranchModel: rowGroups,
+      rowIdGroup: p.rowIdBranch,
+      rowIdLeaf: p.rowIdLeaf,
     });
-    const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
-    const initialized = atom(false);
-    const flatPivot = atom((g) => {
-        if (!g(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(columnPivotGroupExpansions);
-        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
-        let index = 0;
-        traverse(g(tree).root, (node) => {
-            if (node.kind === 1) {
-                return;
-            }
-            else {
-                flattened.push({
-                    kind: "branch",
-                    data: node.data,
-                    id: node.id,
-                    key: node.key,
-                    depth: node.depth,
-                });
-            }
-            idMap.set(node.id, flattened.at(-1));
-            idToIndexMap.set(node.id, index);
-            index++;
-            if (node.kind === 2) {
-                const expanded = expansions[node.id] ??
-                    (typeof defaultExpansion === "number"
-                        ? node.depth <= defaultExpansion
-                        : defaultExpansion);
-                return expanded;
-            }
-        }, comparator);
-        return { flat: flattened, idMap, idToIndexMap };
+  });
+  const normalTree = 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)
+      .map((c) => {
+        if (typeof c === "string") 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") return (r) => c.field({ data: r.data, grid: grid });
+        return (r) => get(r.data, c.field.path);
+      })
+      .map((c) => ({ fn: c }));
+    const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
+      if (typeof agg.fn === "function") {
+        const fn = agg.fn;
+        return {
+          name,
+          fn: (rows) =>
+            fn(
+              rows.map((c) => c.data),
+              grid,
+            ),
+        };
+      }
+      const key = agg.fn;
+      const fn = (data) => {
+        const fieldData = data.map((r) =>
+          grid?.api.columnField(name, { kind: "leaf", data: r.data }),
+        );
+        return builtIns[key](fieldData);
+      };
+      return { name, fn };
     });
-    const flatNormal = atom((g) => {
-        if (!g(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) => {
-            if (node.kind === 1) {
-                node.data.id = node.id;
-                flattened.push(node.data);
-            }
-            else {
-                flattened.push({
-                    kind: "branch",
-                    data: node.data,
-                    id: node.id,
-                    key: node.key,
-                    depth: node.depth,
-                });
-            }
-            idMap.set(node.id, flattened.at(-1));
-            idToIndexMap.set(node.id, index);
-            index++;
-            if (node.kind === 2) {
-                const expanded = expansions[node.id] ??
-                    (typeof defaultExpansion === "number"
-                        ? node.depth <= defaultExpansion
-                        : defaultExpansion);
-                return expanded;
-            }
-        }, comparator);
-        return { flat: flattened, idMap, idToIndexMap };
+    return makeClientTree({
+      rowData: filtered,
+      rowAggModel: grid ? rowAggModel : [],
+      rowBranchModel: grid ? rowGroups : [],
+      rowIdGroup: p.rowIdBranch,
+      rowIdLeaf: p.rowIdLeaf,
     });
-    const flat = atom((g) => (g(columnPivotMode) ? g(flatPivot) : g(flatNormal)));
-    const flatLength = atom((g) => g(flat).flat.length);
-    const cleanup = [];
-    const init = (grid) => {
-        while (cleanup.length)
-            cleanup.pop()?.();
-        rdsStore.set(grid$, grid);
-        const store = grid.state.rowDataStore;
-        // Monitor row count changes
+  });
+  const sortComparator = atom((g) => {
+    const model = g(columnPivotMode) ? g(columnPivotModel).sorts : g(sortModel);
+    const grid = g(grid$);
+    if (!model.length || !grid) return () => 0;
+    const comparator = (l, r) => {
+      let res = 0;
+      for (const sortSpec of model) {
+        const sort = sortSpec.sort;
+        const columnId = sortSpec.columnId;
+        const ld =
+          l.kind === 2
+            ? { kind: "branch", data: l.data, key: l.key }
+            : { kind: "leaf", data: l.data.data };
+        const rd =
+          r.kind === 2
+            ? { kind: "branch", data: r.data, key: r.key }
+            : { kind: "leaf", data: r.data.data };
+        if (sort.kind === "custom") {
+          res = sort.comparator(ld, rd, sort.options ?? {});
+        } else if (sort.kind === "number") {
+          const left = grid.api.columnField(columnId, ld);
+          const right = grid.api.columnField(columnId, rd);
+          res = numberComparator(left, right, sort.options ?? {});
+        } else if (sort.kind === "date") {
+          const left = grid.api.columnField(columnId, ld);
+          const right = grid.api.columnField(columnId, rd);
+          res = dateComparator(left, right, sort.options ?? {});
+        } else if (sort.kind === "string") {
+          const left = grid.api.columnField(columnId, ld);
+          const right = grid.api.columnField(columnId, rd);
+          res = stringComparator(left, right, sort.options ?? {});
+        } else {
+          res = 0;
+        }
+        res = sortSpec.isDescending ? -res : res;
+        if (res !== 0) break;
+      }
+      return res;
+    };
+    return comparator;
+  });
+  const idToNode = atom((g) => {
+    const map = new Map();
+    traverse(g(tree).root, (node) => {
+      map.set(node.id, node);
+    });
+    return map;
+  });
+  const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
+  const initialized = atom(false);
+  const flatPivot = atom((g) => {
+    if (!g(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(columnPivotGroupExpansions);
+    const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
+    let index = 0;
+    traverse(
+      g(tree).root,
+      (node) => {
+        if (node.kind === 1) {
+          return;
+        } else {
+          flattened.push({
+            kind: "branch",
+            data: node.data,
+            id: node.id,
+            key: node.key,
+            depth: node.depth,
+          });
+        }
+        idMap.set(node.id, flattened.at(-1));
+        idToIndexMap.set(node.id, index);
+        index++;
+        if (node.kind === 2) {
+          const expanded =
+            expansions[node.id] ??
+            (typeof defaultExpansion === "number"
+              ? node.depth <= defaultExpansion
+              : defaultExpansion);
+          return expanded;
+        }
+      },
+      comparator,
+    );
+    return { flat: flattened, idMap, idToIndexMap };
+  });
+  const flatNormal = atom((g) => {
+    if (!g(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) => {
+        if (node.kind === 1) {
+          node.data.id = node.id;
+          flattened.push(node.data);
+        } else {
+          flattened.push({
+            kind: "branch",
+            data: node.data,
+            id: node.id,
+            key: node.key,
+            depth: node.depth,
+          });
+        }
+        idMap.set(node.id, flattened.at(-1));
+        idToIndexMap.set(node.id, index);
+        index++;
+        if (node.kind === 2) {
+          const expanded =
+            expansions[node.id] ??
+            (typeof defaultExpansion === "number"
+              ? node.depth <= defaultExpansion
+              : defaultExpansion);
+          return expanded;
+        }
+      },
+      comparator,
+    );
+    return { flat: flattened, idMap, idToIndexMap };
+  });
+  const flat = atom((g) => (g(columnPivotMode) ? g(flatPivot) : g(flatNormal)));
+  const flatLength = atom((g) => g(flat).flat.length);
+  const cleanup = [];
+  const init = (grid) => {
+    while (cleanup.length) cleanup.pop()?.();
+    rdsStore.set(grid$, grid);
+    const store = grid.state.rowDataStore;
+    // Monitor row count changes
+    const centerCount = rdsStore.get(flatLength);
+    store.rowCenterCount.set(centerCount);
+    cleanup.push(
+      rdsStore.sub(flatLength, () => {
         const centerCount = rdsStore.get(flatLength);
         store.rowCenterCount.set(centerCount);
-        cleanup.push(rdsStore.sub(flatLength, () => {
-            const centerCount = rdsStore.get(flatLength);
-            store.rowCenterCount.set(centerCount);
-            grid.state.rowDataStore.rowClearCache();
-        }));
+        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);
-        cleanup.push(rdsStore.sub(topData, () => {
-            const top = rdsStore.get(topData).length;
-            store.rowTopCount.set(top);
-            grid.state.rowDataStore.rowClearCache();
+        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);
+        grid.state.rowDataStore.rowClearCache();
+      }),
+    );
+    const sort = grid.state.sortModel.get();
+    const filter = grid.state.filterModel.get();
+    const filterIn = grid.state.filterInModel.get();
+    const group = grid.state.rowGroupModel.get();
+    const groupExpansions = grid.state.rowGroupExpansions.get();
+    const agg = grid.state.aggModel.get();
+    const quickSearch = grid.state.quickSearch.get();
+    const pivotMode = grid.state.columnPivotMode.get();
+    const pivotModel = grid.state.columnPivotModel.get();
+    const columnPivotGroupExpansions = grid.state.columnPivotRowGroupExpansions.get();
+    let prevPivotColumnModel = pivotModel.columns;
+    let prevPivotColumnValues = pivotModel.values;
+    const updatePivotColumns = (model, ignoreEqualCheck = false) => {
+      if (
+        !ignoreEqualCheck &&
+        rdsStore.get(initialized) &&
+        equal(prevPivotColumnModel, model.columns) &&
+        equal(prevPivotColumnValues, model.values)
+      )
+        return;
+      const lookup = itemsWithIdToMap(grid.state.columns.get());
+      const pivotColumns = createPivotColumns(model, lookup, grid, rdsStore.get(centerNodes));
+      grid.state.columnPivotColumns.set(pivotColumns);
+      prevPivotColumnModel = model.columns;
+      prevPivotColumnValues = model.values;
+    };
+    if (pivotMode) updatePivotColumns(pivotModel);
+    rdsStore.set(models, {
+      agg,
+      filter,
+      filterIn,
+      group,
+      quickSearch,
+      groupExpansions,
+      sort,
+      pivotMode,
+      pivotModel,
+      columnPivotGroupExpansions,
+    });
+    rdsStore.set(initialized, true);
+    rdsStore.sub(centerNodes, () => {
+      updatePivotColumns(grid.state.columnPivotModel.get(), true);
+    });
+    // Pivot model monitoring
+    cleanup.push(
+      grid.state.columnPivotMode.watch(() => {
+        const model = grid.state.columnPivotModel.get();
+        updatePivotColumns(model);
+        rdsStore.set(models, (prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
+        grid.state.rowDataStore.rowClearCache();
+      }),
+    );
+    cleanup.push(
+      grid.state.columnPivotModel.watch(() => {
+        const model = grid.state.columnPivotModel.get();
+        updatePivotColumns(model);
+        rdsStore.set(models, (prev) => ({
+          ...prev,
+          pivotModel: model,
         }));
-        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);
-            grid.state.rowDataStore.rowClearCache();
+        grid.state.rowDataStore.rowClearCache();
+      }),
+    );
+    grid.state.columnPivotRowGroupExpansions.watch(() => {
+      rdsStore.set(models, (prev) => ({
+        ...prev,
+        columnPivotGroupExpansions: grid.state.columnPivotRowGroupExpansions.get(),
+      }));
+      grid.state.rowDataStore.rowClearCache();
+    });
+    // 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(),
         }));
-        const sort = grid.state.sortModel.get();
-        const filter = grid.state.filterModel.get();
-        const filterIn = grid.state.filterInModel.get();
-        const group = grid.state.rowGroupModel.get();
-        const groupExpansions = grid.state.rowGroupExpansions.get();
-        const agg = grid.state.aggModel.get();
-        const quickSearch = grid.state.quickSearch.get();
-        const pivotMode = grid.state.columnPivotMode.get();
-        const pivotModel = grid.state.columnPivotModel.get();
-        const columnPivotGroupExpansions = grid.state.columnPivotRowGroupExpansions.get();
-        let prevPivotColumnModel = pivotModel.columns;
-        let prevPivotColumnValues = pivotModel.values;
-        const updatePivotColumns = (model, ignoreEqualCheck = false) => {
-            if (!ignoreEqualCheck &&
-                rdsStore.get(initialized) &&
-                equal(prevPivotColumnModel, model.columns) &&
-                equal(prevPivotColumnValues, model.values))
-                return;
-            const lookup = itemsWithIdToMap(grid.state.columns.get());
-            const pivotColumns = createPivotColumns(model, lookup, grid, rdsStore.get(centerNodes));
-            grid.state.columnPivotColumns.set(pivotColumns);
-            prevPivotColumnModel = model.columns;
-            prevPivotColumnValues = model.values;
-        };
-        if (pivotMode)
-            updatePivotColumns(pivotModel);
-        rdsStore.set(models, {
-            agg,
-            filter,
-            filterIn,
-            group,
-            quickSearch,
-            groupExpansions,
-            sort,
-            pivotMode,
-            pivotModel,
-            columnPivotGroupExpansions,
-        });
-        rdsStore.set(initialized, true);
-        rdsStore.sub(centerNodes, () => {
-            updatePivotColumns(grid.state.columnPivotModel.get(), true);
+        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);
+    if (pinned.has(id)) return pinned.get(id);
+    const t = rdsStore.get(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 topOffset = top.length;
+    const centerOffset = topOffset + center.length;
+    const botOffset = centerOffset + bot.length;
+    if (index < topOffset) return top[index];
+    if (index < centerOffset) return center[index - topOffset];
+    if (index < botOffset) return bot[index - centerOffset];
+    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$);
+    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;
+      if ((!row && !treeNode) || !grid) {
+        console.error(`Failed to find the row with identifier ${key} which is being updated.`);
+        continue;
+      }
+      if (row?.kind === "branch") {
+        row.data = next;
+      } else {
+        const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
+        const source = dataToSrc.get(data);
+        if (source == null) {
+          console.error(`Failed to find the row with identifier ${key} which is being updated.`);
+          continue;
+        }
+        d[source] = next;
+      }
+    }
+    rdsStore.set(data, [...d]);
+    rdsStore.set(snapshot, (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 topCount = top.length;
+    const center = f.flat.length;
+    const rowIndex = f.idToIndexMap.get(rowId);
+    if (rowIndex != null) return rowIndex;
+    if (rowIndex == null) {
+      const foundTop = top.findIndex((row) => row.id === rowId);
+      if (foundTop !== -1) return foundTop;
+      const foundBot = bot.findIndex((row) => row.id === rowId);
+      if (foundBot !== -1) return foundBot + topCount + center;
+    }
+    return null;
+  };
+  const rowAllChildIds = (rowId) => {
+    const t = rdsStore.get(tree);
+    const ids = [];
+    const node = t.idToNode.get(rowId);
+    if (node?.kind === 2) {
+      traverse(node, (n) => {
+        ids.push(n.id);
+      });
+    }
+    return ids;
+  };
+  return [
+    {
+      init,
+      rowById,
+      rowByIndex,
+      rowAllChildIds,
+      rowUpdate,
+      inFilterItems: (c) => {
+        const grid = rdsStore.get(grid$);
+        if (!grid) return [];
+        const data = rdsStore.get(centerNodes);
+        const values = new Set(
+          data.map((row) => {
+            const field = grid.api.columnField(c, row);
+            return field;
+          }),
+        );
+        if (p.transformInFilterItem) {
+          return p.transformInFilterItem({ column: c, values: [...values] });
+        }
+        return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
+      },
+      rowAdd: (newRows, place = "end") => {
+        rdsStore.set(data, (prev) => {
+          if (!newRows.length) return prev;
+          let next;
+          if (place === "beginning") next = [...newRows, ...prev];
+          else if (place === "end") next = [...prev, ...newRows];
+          else {
+            next = [...prev];
+            next.splice(place, 0, ...newRows);
+          }
+          return next;
         });
-        // Pivot model monitoring
-        cleanup.push(grid.state.columnPivotMode.watch(() => {
-            const model = grid.state.columnPivotModel.get();
-            updatePivotColumns(model);
-            rdsStore.set(models, (prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(grid.state.columnPivotModel.watch(() => {
-            const model = grid.state.columnPivotModel.get();
-            updatePivotColumns(model);
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                pivotModel: model,
-            }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        grid.state.columnPivotRowGroupExpansions.watch(() => {
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                columnPivotGroupExpansions: grid.state.columnPivotRowGroupExpansions.get(),
-            }));
-            grid.state.rowDataStore.rowClearCache();
+        const grid = rdsStore.get(grid$);
+        grid?.state.rowDataStore.rowClearCache();
+      },
+      rowDelete: (rows) => {
+        const rowData = new Set(
+          rows
+            .map((c) => {
+              if (typeof c === "number") return rowByIndex(c)?.data;
+              else return rowById(c)?.data;
+            })
+            .filter((c) => !!c),
+        );
+        rdsStore.set(data, (prev) => {
+          if (!rowData.size) return prev;
+          return prev.filter((d) => !rowData.has(d));
         });
-        // 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() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-    };
-    const rowById = (id) => {
-        const pinned = rdsStore.get(pinnedIdMap);
-        if (pinned.has(id))
-            return pinned.get(id);
-        const t = rdsStore.get(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 topOffset = top.length;
-        const centerOffset = topOffset + center.length;
-        const botOffset = centerOffset + bot.length;
-        if (index < topOffset)
-            return top[index];
-        if (index < centerOffset)
-            return center[index - topOffset];
-        if (index < botOffset)
-            return bot[index - centerOffset];
-        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$);
-        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;
-            if ((!row && !treeNode) || !grid) {
-                console.error(`Failed to find the row with identifier ${key} which is being updated.`);
-                continue;
-            }
-            if (row?.kind === "branch") {
-                row.data = next;
-            }
-            else {
-                const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
-                const source = dataToSrc.get(data);
-                if (source == null) {
-                    console.error(`Failed to find the row with identifier ${key} which is being updated.`);
-                    continue;
-                }
-                d[source] = next;
+        grid?.state.rowDataStore.rowClearCache();
+      },
+      rowSetBotData: (data) => {
+        rdsStore.set(bottomData, data);
+        const grid = rdsStore.get(grid$);
+        grid?.state.rowDataStore.rowClearCache();
+      },
+      rowSetCenterData: (d) => {
+        rdsStore.set(data, d);
+        const grid = rdsStore.get(grid$);
+        grid?.state.rowDataStore.rowClearCache();
+      },
+      rowSetTopData: (data) => {
+        rdsStore.set(topData, data);
+        const grid = rdsStore.get(grid$);
+        grid?.state.rowDataStore.rowClearCache();
+      },
+      rowData: (section) => {
+        const d = [];
+        if (section === "top" || section === "flat") {
+          d.push(...rdsStore.get(topData));
+        }
+        if (section === "center" || section === "flat") {
+          d.push(...rdsStore.get(data));
+        }
+        if (section === "bottom" || section === "flat") {
+          d.push(...rdsStore.get(bottomData));
+        }
+        return d;
+      },
+      rowExpand: (expansions) => {
+        const grid = rdsStore.get(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 }));
+      },
+      rowToIndex,
+      rowSelect: (params) => {
+        const grid = rdsStore.get(grid$);
+        if (!grid) return;
+        if (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);
+          }
         }
-        rdsStore.set(data, [...d]);
-        rdsStore.set(snapshot, (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 topCount = top.length;
-        const center = f.flat.length;
-        const rowIndex = f.idToIndexMap.get(rowId);
-        if (rowIndex != null)
-            return rowIndex;
-        if (rowIndex == null) {
-            const foundTop = top.findIndex((row) => row.id === rowId);
-            if (foundTop !== -1)
-                return foundTop;
-            const foundBot = bot.findIndex((row) => row.id === rowId);
-            if (foundBot !== -1)
-                return foundBot + topCount + center;
+        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);
+        }
+      },
+      rowSelectAll: (params) => {
+        const grid = rdsStore.get(grid$);
+        if (!grid) return;
+        if (params.deselect) {
+          grid.state.rowSelectedIds.set(new Set());
+          return;
         }
-        return null;
-    };
-    const rowAllChildIds = (rowId) => {
         const t = rdsStore.get(tree);
-        const ids = [];
-        const node = t.idToNode.get(rowId);
-        if (node?.kind === 2) {
-            traverse(node, (n) => {
-                ids.push(n.id);
-            });
+        grid.state.rowSelectedIds.set(new Set(t.idsAll));
+      },
+      rowAreAllSelected: (rowId) => {
+        const g = rdsStore.get(grid$);
+        if (!g) return false;
+        const selected = g.state.rowSelectedIds.get();
+        if (rowId) {
+          const row = rowById(rowId);
+          if (!row) return false;
+          const childIds = new Set(rowAllChildIds(rowId));
+          return childIds.isSubsetOf(selected);
         }
-        return ids;
-    };
-    return [
-        {
-            init,
-            rowById,
-            rowByIndex,
-            rowAllChildIds,
-            rowUpdate,
-            inFilterItems: (c) => {
-                const grid = rdsStore.get(grid$);
-                if (!grid)
-                    return [];
-                const data = rdsStore.get(centerNodes);
-                const values = new Set(data.map((row) => {
-                    const field = grid.api.columnField(c, row);
-                    return field;
-                }));
-                if (p.transformInFilterItem) {
-                    return p.transformInFilterItem({ column: c, values: [...values] });
-                }
-                return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
-            },
-            rowAdd: (newRows, place = "end") => {
-                rdsStore.set(data, (prev) => {
-                    if (!newRows.length)
-                        return prev;
-                    let next;
-                    if (place === "beginning")
-                        next = [...newRows, ...prev];
-                    else if (place === "end")
-                        next = [...prev, ...newRows];
-                    else {
-                        next = [...prev];
-                        next.splice(place, 0, ...newRows);
-                    }
-                    return next;
-                });
-                const grid = rdsStore.get(grid$);
-                grid?.state.rowDataStore.rowClearCache();
-            },
-            rowDelete: (rows) => {
-                const rowData = new Set(rows
-                    .map((c) => {
-                    if (typeof c === "number")
-                        return rowByIndex(c)?.data;
-                    else
-                        return rowById(c)?.data;
-                })
-                    .filter((c) => !!c));
-                rdsStore.set(data, (prev) => {
-                    if (!rowData.size)
-                        return prev;
-                    return prev.filter((d) => !rowData.has(d));
-                });
-                const grid = rdsStore.get(grid$);
-                grid?.state.rowDataStore.rowClearCache();
-            },
-            rowSetBotData: (data) => {
-                rdsStore.set(bottomData, data);
-                const grid = rdsStore.get(grid$);
-                grid?.state.rowDataStore.rowClearCache();
-            },
-            rowSetCenterData: (d) => {
-                rdsStore.set(data, d);
-                const grid = rdsStore.get(grid$);
-                grid?.state.rowDataStore.rowClearCache();
-            },
-            rowSetTopData: (data) => {
-                rdsStore.set(topData, data);
-                const grid = rdsStore.get(grid$);
-                grid?.state.rowDataStore.rowClearCache();
-            },
-            rowData: (section) => {
-                const d = [];
-                if (section === "top" || section === "flat") {
-                    d.push(...rdsStore.get(topData));
-                }
-                if (section === "center" || section === "flat") {
-                    d.push(...rdsStore.get(data));
-                }
-                if (section === "bottom" || section === "flat") {
-                    d.push(...rdsStore.get(bottomData));
-                }
-                return d;
-            },
-            rowExpand: (expansions) => {
-                const grid = rdsStore.get(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 }));
-            },
-            rowToIndex,
-            rowSelect: (params) => {
-                const grid = rdsStore.get(grid$);
-                if (!grid)
-                    return;
-                if (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);
-                }
-            },
-            rowSelectAll: (params) => {
-                const grid = rdsStore.get(grid$);
-                if (!grid)
-                    return;
-                if (params.deselect) {
-                    grid.state.rowSelectedIds.set(new Set());
-                    return;
-                }
-                const t = rdsStore.get(tree);
-                grid.state.rowSelectedIds.set(new Set(t.idsAll));
-            },
-            rowAreAllSelected: (rowId) => {
-                const g = rdsStore.get(grid$);
-                if (!g)
-                    return false;
-                const selected = g.state.rowSelectedIds.get();
-                if (rowId) {
-                    const row = rowById(rowId);
-                    if (!row)
-                        return false;
-                    const childIds = new Set(rowAllChildIds(rowId));
-                    return childIds.isSubsetOf(selected);
-                }
-                const f = rdsStore.get(tree);
-                return f.idsAll.isSubsetOf(selected);
-            },
-        },
-        {
-            top: makeGridAtom(topData, rdsStore),
-            center: makeGridAtom(data, rdsStore),
-            bottom: makeGridAtom(bottomData, rdsStore),
-        },
-    ];
+        const f = rdsStore.get(tree);
+        return f.idsAll.isSubsetOf(selected);
+      },
+    },
+    {
+      top: makeGridAtom(topData, rdsStore),
+      center: makeGridAtom(data, rdsStore),
+      bottom: makeGridAtom(bottomData, rdsStore),
+    },
+  ];
 }
 export function useClientRowDataSource(p) {
-    const ds = useRef(null);
-    const dataAtomRef = useRef(null);
-    if (!ds.current)
-        [ds.current, dataAtomRef.current] = makeClientDataSource(p);
-    const da = dataAtomRef.current;
-    if (p.reflectData) {
-        // Need to queue the microtask since it we cannot update state during render.
-        if (p.data !== da.center.get())
-            queueMicrotask(() => ds.current.rowSetCenterData(p.data));
-        if (!equal(p.topData ?? [], da.top.get())) {
-            queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
-        }
-        if (!equal(p.bottomData ?? [], da.bottom.get()))
-            queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
+  const ds = useRef(null);
+  const dataAtomRef = useRef(null);
+  if (!ds.current) [ds.current, dataAtomRef.current] = makeClientDataSource(p);
+  const da = dataAtomRef.current;
+  if (p.reflectData) {
+    // Need to queue the microtask since it we cannot update state during render.
+    if (p.data !== da.center.get()) queueMicrotask(() => ds.current.rowSetCenterData(p.data));
+    if (!equal(p.topData ?? [], da.top.get())) {
+      queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
     }
-    return ds.current;
+    if (!equal(p.bottomData ?? [], da.bottom.get()))
+      queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
+  }
+  return ds.current;
 }