@1771technologies/lytenyte-pro 1.0.16 → 1.0.17

package/dist/filter-selects/clear.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
+export interface ClearProps {
+    readonly as?: SlotComponent<{
+        onClear: () => void;
+    }>;
+}
+export declare const Clear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/filter-selects/clear.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
+import { forwardRef } from "react";
+import { useFilterSelectRoot } from "./context.js";
+function ClearImpl({ as, ...props }, ref) {
+    const ctx = useFilterSelectRoot();
+    const slot = useSlot({
+        props: [
+            {
+                onClick: ctx.clear,
+            },
+            props,
+        ],
+        ref: ref,
+        slot: as ?? _jsx("button", { children: "Clear" }),
+        state: {
+            onReset: ctx.clear,
+        },
+    });
+    return slot;
+}
+export const Clear = forwardRef(ClearImpl);

package/dist/filter-selects/context.d.ts

@@ -7,6 +7,7 @@ export interface FilterSelectRoot {
     readonly maxCount: number;
     readonly apply: () => void;
     readonly reset: () => void;
+    readonly clear: () => void;
 }
 export declare const context: import("react").Context<FilterSelectRoot>;
 export declare const useFilterSelectRoot: () => FilterSelectRoot;

package/dist/filter-selects/index.d.ts

@@ -3,6 +3,7 @@ export declare const FilterSelect: {
     useFilterSelect: <T>({ grid, column, maxCount }: import("./use-filter-select.js").UseFilterSelectParams<T>) => {
         reset: () => void;
         apply: () => void;
+        clear: () => void;
         defaultFilter: import("./use-filter-select.js").FilterSelectFlat;
         filters: import("./use-filter-select.js").FilterSelectFlat[];
         setFilters: (v: import("./use-filter-select.js").FilterSelectFlat[] | ((v: import("./use-filter-select.js").FilterSelectFlat[]) => import("./use-filter-select.js").FilterSelectFlat[])) => void;
@@ -17,4 +18,5 @@ export declare const FilterSelect: {
     FilterCombinator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./filter-combinator.js").FilterCombinatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Apply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./apply.js").ApplyProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Reset: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./reset.js").ResetProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Clear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./clear.js").ClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/filter-selects/index.js

@@ -1,4 +1,5 @@
 import { Apply } from "./apply.js";
+import { Clear } from "./clear.js";
 import { FilterCombinator } from "./filter-combinator.js";
 import { FilterRow } from "./filter-row.js";
 import { OperatorSelect } from "./operator-select.js";
@@ -15,4 +16,5 @@ export const FilterSelect = {
     FilterCombinator,
     Apply,
     Reset,
+    Clear,
 };

package/dist/filter-selects/root.d.ts

@@ -7,6 +7,7 @@ export interface RootProps {
         readonly setFilters: Dispatch<SetStateAction<FilterSelectFlat[]>>;
         readonly apply: () => void;
         readonly reset: () => void;
+        readonly clear: () => void;
         readonly maxCount: number;
     };
 }

package/dist/filter-selects/use-filter-select.d.ts

@@ -30,6 +30,7 @@ export type FilterSelectFlat = FilterSelectFlatFunc | FilterSelectFlatNumber | F
 export declare const useFilterSelect: <T>({ grid, column, maxCount }: UseFilterSelectParams<T>) => {
     reset: () => void;
     apply: () => void;
+    clear: () => void;
     defaultFilter: FilterSelectFlat;
     filters: FilterSelectFlat[];
     setFilters: (v: FilterSelectFlat[] | ((v: FilterSelectFlat[]) => FilterSelectFlat[])) => void;

package/dist/filter-selects/use-filter-select.js

@@ -40,7 +40,6 @@ export const useFilterSelect = ({ grid, column, maxCount = 2 }) => {
                         filters.push({ kind: "date", operator: f.operator, value: f.value, nextExtender });
                     }
                 }
-                console.log(filters);
                 return filters;
             }
             return [];
@@ -49,6 +48,8 @@ export const useFilterSelect = ({ grid, column, maxCount = 2 }) => {
     }, [filterOnModel, defaultFilter]);
     const [filters, setFilters] = useTwoFlowState(filterValue);
     const finalFilters = useMemo(() => {
+        if (!filters.length)
+            return [defaultFilter];
         const last = filters.at(-1);
         if (last.kind === "function" || filters.length >= maxCount)
             return filters;
@@ -88,7 +89,6 @@ export const useFilterSelect = ({ grid, column, maxCount = 2 }) => {
             else if (filter.kind === "string")
                 next = { kind: "string", value: filter.value, operator: filter.operator };
             if (next) {
-                console.log(next);
                 grid.state.filterModel.set((prev) => {
                     const filters = { ...prev };
                     filters[column.id] = next;
@@ -147,12 +147,21 @@ export const useFilterSelect = ({ grid, column, maxCount = 2 }) => {
         const next = typeof v === "function" ? v(finalFilters) : v;
         setFilters(next);
     }, [finalFilters, setFilters]);
+    const clear = useCallback(() => {
+        setF([]);
+        grid.state.filterModel.set((prev) => {
+            const filters = { ...prev };
+            delete filters[column.id];
+            return filters;
+        });
+    }, [column.id, grid.state.filterModel, setF]);
     return useMemo(() => ({
         reset,
         apply,
+        clear,
         defaultFilter,
         filters: finalFilters,
         setFilters: setF,
         maxCount,
-    }), [apply, defaultFilter, finalFilters, maxCount, reset, setF]);
+    }), [apply, clear, defaultFilter, finalFilters, maxCount, reset, setF]);
 };

package/dist/row-data-source-server/server-data.d.ts

@@ -13,7 +13,16 @@ export interface FlatView {
     readonly rowIdToRowIndex: Map<string, number>;
     readonly rowIdToTreeNode: Map<string, LeafOrParent<RowGroup, RowLeaf>>;
     readonly loading: Set<number>;
-    readonly errored: Map<number, unknown>;
+    readonly loadingGroup: Set<number>;
+    readonly errored: Map<number, {
+        error: unknown;
+        request?: DataRequest;
+    }>;
+    readonly erroredGroup: Map<number, {
+        error: unknown;
+        request: DataRequest;
+    }>;
+    readonly seenRequests: Set<string>;
 }
 export interface ServerDataConstructorParams {
     readonly blocksize: number;
@@ -24,11 +33,12 @@ export interface ServerDataConstructorParams {
     readonly onResetLoadError: (error: unknown) => void;
     readonly onResetLoadEnd: () => void;
     readonly onFlatten: (r: FlatView) => void;
+    readonly onInvalidate: () => void;
     readonly defaultExpansion: boolean | number;
 }
 export declare class ServerData {
     #private;
-    constructor({ blocksize, pivotMode, pivotExpansions, expansions, onResetLoadBegin, onResetLoadEnd, onResetLoadError, onFlatten, defaultExpansion, }: ServerDataConstructorParams);
+    constructor({ blocksize, pivotMode, pivotExpansions, expansions, onResetLoadBegin, onResetLoadEnd, onResetLoadError, onFlatten, onInvalidate, defaultExpansion, }: ServerDataConstructorParams);
     set dataFetcher(d: DataFetcher);
     set pivotMode(b: boolean);
     set expansions(d: Record<string, boolean | undefined>);
@@ -36,13 +46,25 @@ export declare class ServerData {
     set defaultExpansion(d: boolean | number);
     set rowViewBounds(viewBounds: [start: number, end: number]);
     reset: () => Promise<void>;
+    requestForGroup(i: number): DataRequest | null;
     handleRequests: (requests: DataRequest[], opts?: {
         onError?: (e: unknown) => void;
         onSuccess?: () => void;
         skipState?: boolean;
     }) => Promise<void>;
     handleResponses: (data: (DataResponse | DataResponsePinned)[], beforeOnFlat?: () => void) => void;
+    requestForNextSlice(req: DataRequest): {
+        id: string;
+        path: (string | null)[];
+        start: number;
+        end: number;
+        rowStartIndex: number;
+        rowEndIndex: number;
+    } | null;
+    requestsForView(start?: number, end?: number): DataRequest[];
     handleViewBoundsChange(): Promise<void>;
+    retry(): void;
     updateRow(id: string, data: any): void;
+    flatten: () => void;
 }
 export {};

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

@@ -19,13 +19,16 @@ export class ServerData {
     #onResetLoadError;
     #onResetLoadEnd;
     #onFlatten;
+    #onInvalidate;
     #rowViewBounds = [0, 0];
-    #prevRequests = [];
+    #seenRequests = new Set();
     #loadingRows = new Set();
+    #loadingGroup = new Set();
     #rowsWithError = new Map();
+    #rowsWithGroupError = new Map();
     #controllers = new Set();
     #defaultExpansion;
-    constructor({ blocksize, pivotMode, pivotExpansions, expansions, onResetLoadBegin, onResetLoadEnd, onResetLoadError, onFlatten, defaultExpansion, }) {
+    constructor({ blocksize, pivotMode, pivotExpansions, expansions, onResetLoadBegin, onResetLoadEnd, onResetLoadError, onFlatten, onInvalidate, defaultExpansion, }) {
         this.#tree = makeAsyncTree();
         this.#blocksize = blocksize;
         this.#pivotMode = pivotMode;
@@ -36,6 +39,7 @@ export class ServerData {
         this.#onResetLoadEnd = onResetLoadEnd;
         this.#onResetLoadError = onResetLoadError;
         this.#onFlatten = onFlatten;
+        this.#onInvalidate = onInvalidate;
     }
     // Properties
     set dataFetcher(d) {
@@ -77,29 +81,54 @@ export class ServerData {
         this.#controllers.forEach((c) => c.abort());
         this.#tree = makeAsyncTree();
         this.#flatten();
+        this.#rowsWithError.clear();
+        this.#rowsWithGroupError.clear();
+        this.#loadingRows.clear();
+        this.#loadingGroup.clear();
         try {
             this.#onResetLoadBegin();
-            this.#prevRequests = [
-                {
-                    rowStartIndex: 0,
-                    rowEndIndex: this.#blocksize,
-                    id: getRequestId([], 0, this.#blocksize),
-                    path: [],
-                    start: 0,
-                    end: this.#blocksize,
-                },
-            ];
-            const res = await this.#dataFetcher(this.#prevRequests, this.#expansions, this.#pivotExpansions);
+            this.#seenRequests.clear();
+            const req = {
+                rowStartIndex: 0,
+                rowEndIndex: this.#blocksize,
+                id: getRequestId([], 0, this.#blocksize),
+                path: [],
+                start: 0,
+                end: this.#blocksize,
+            };
+            this.#seenRequests.add(req.id);
+            const res = await this.#dataFetcher([req], this.#expansions, this.#pivotExpansions);
             this.handleResponses(res);
         }
         catch (e) {
-            console.log(e);
             this.#onResetLoadError(e);
         }
         finally {
             this.#onResetLoadEnd();
         }
     };
+    requestForGroup(i) {
+        const ranges = this.#flat.rangeTree.findRangesForRowIndex(i);
+        const path = ranges.slice(1).map((c) => (c.parent.kind === "parent" ? c.parent.path : null));
+        const row = this.#flat.rowIndexToRow.get(i);
+        if (row?.kind !== "branch")
+            return null;
+        path.push(row.key);
+        const r = (ranges.at(-1)?.parent).byPath.get(row.key);
+        const blocksize = this.#blocksize;
+        const start = 0;
+        const end = Math.min(start + blocksize, r.size);
+        const reqSize = end - start;
+        const req = {
+            path,
+            start: start,
+            end: end,
+            id: getRequestId(path, 0, blocksize),
+            rowStartIndex: i + 1,
+            rowEndIndex: i + 1 + reqSize,
+        };
+        return req;
+    }
     handleRequests = async (requests, opts = {}) => {
         const controller = new AbortController();
         this.#controllers.add(controller);
@@ -133,10 +162,11 @@ export class ServerData {
             if (controller.signal.aborted)
                 return;
             opts?.onError?.(e);
+            this.#onInvalidate();
             if (!skip)
                 requests.forEach((req) => {
                     for (let i = req.rowStartIndex; i < req.rowEndIndex; i++)
-                        this.#rowsWithError.set(i, e);
+                        this.#rowsWithError.set(i, { error: e, request: req });
                     for (let i = req.rowStartIndex; i < req.rowEndIndex; i++)
                         this.#loadingRows.delete(i);
                 });
@@ -204,8 +234,38 @@ export class ServerData {
         // Re-flatten our tree once everything has been re-updated.
         this.#flatten(beforeOnFlat);
     };
-    async handleViewBoundsChange() {
-        const [start, end] = this.#rowViewBounds;
+    requestForNextSlice(req) {
+        let current = this.#tree;
+        for (const c of req.path) {
+            if (current.kind === "leaf")
+                return null;
+            const next = current.byPath.get(c);
+            if (!next)
+                return null;
+            current = next;
+        }
+        if (current.kind === "leaf")
+            return null;
+        const maxSize = current.size;
+        if (req.end >= maxSize)
+            return null;
+        const prevSize = req.end - req.start;
+        const start = req.end;
+        const end = Math.min(req.end + this.#blocksize, maxSize);
+        const size = end - start;
+        return {
+            id: getRequestId(req.path, start, start + this.#blocksize),
+            path: req.path,
+            start,
+            end,
+            rowStartIndex: req.rowStartIndex + prevSize,
+            rowEndIndex: req.rowStartIndex + prevSize + size,
+        };
+    }
+    requestsForView(start, end) {
+        const bounds = this.#rowViewBounds;
+        start = start ?? bounds[0];
+        end = end ?? bounds[1];
         const seen = new Set();
         const requests = [];
         for (let i = start; i < end; i++) {
@@ -237,13 +297,74 @@ export class ServerData {
                 }
             });
         }
-        const newRequests = requests.filter((c) => !this.#prevRequests.find((prev) => prev.id === c.id));
+        return requests;
+    }
+    async handleViewBoundsChange() {
+        const requests = this.requestsForView();
+        const newRequests = requests.filter((c) => !this.#seenRequests.has(c.id));
         // We don't have any new requests to make in our view, so we can return
         if (!newRequests.length)
             return;
-        this.#prevRequests = requests;
+        for (const n of newRequests)
+            this.#seenRequests.add(n.id);
         await this.handleRequests(newRequests);
     }
+    retry() {
+        const inViewSet = new Set(this.requestsForView().map((c) => c.id));
+        const erroredRequests = [...this.#rowsWithError.values()]
+            .map((c) => c.request)
+            .filter(Boolean);
+        const erroredGroups = [...this.#rowsWithGroupError.entries()];
+        const errors = erroredRequests.filter((x) => inViewSet.has(x.id));
+        const [start, end] = this.#rowViewBounds;
+        const groupErrors = erroredGroups
+            .filter(([index]) => {
+            return index >= start && index < end;
+        })
+            .map(([index, c]) => [index, c.request]);
+        const seenRequests = this.#seenRequests;
+        console.log(structuredClone(seenRequests));
+        erroredRequests.map((x) => seenRequests.delete(x.id));
+        erroredGroups.map((x) => seenRequests.delete(x[1].request.id));
+        console.log(structuredClone(seenRequests));
+        this.#rowsWithError.clear();
+        this.#rowsWithGroupError.clear();
+        const requests = [];
+        const seen = new Set();
+        groupErrors.forEach((x) => {
+            if (seen.has(x[1].id))
+                return;
+            requests.push(x[1]);
+            seen.add(x[1].id);
+        });
+        errors.forEach((x) => {
+            if (seen.has(x.id))
+                return;
+            seen.add(x.id);
+            requests.push(x);
+        });
+        for (const x of groupErrors) {
+            this.#loadingGroup.add(x[0]);
+        }
+        requests.forEach((x) => seenRequests.add(x.id));
+        const invalidate = this.#onInvalidate;
+        const withGroupError = this.#rowsWithGroupError;
+        const loadingGroup = this.#loadingGroup;
+        this.handleRequests(requests, {
+            onError: (e) => {
+                invalidate();
+                groupErrors.forEach((c) => {
+                    withGroupError.set(c[0], { error: e, request: c[1] });
+                    loadingGroup.delete(c[0]);
+                });
+            },
+            onSuccess: () => {
+                groupErrors.forEach((c) => {
+                    loadingGroup.delete(c[0]);
+                });
+            },
+        });
+    }
     updateRow(id, data) {
         const centerRow = this.#flat.rowIdToTreeNode.get(id);
         if (centerRow) {
@@ -260,19 +381,28 @@ export class ServerData {
             this.#top.rows[botIndex] = { ...this.#top.rows[botIndex], data };
         }
     }
+    flatten = () => {
+        this.#flatten();
+    };
     #flatten = (beforeOnFlat) => {
+        // The mode we are in determines the expansions we will use for the server data.
         const mode = this.#pivotMode;
         const expansions = mode ? this.#pivotExpansions : this.#expansions;
         const t = this.#tree;
+        // We use these maps to keep track of the current view. These are helpful for
+        // quick lookup. They are also used to implement many of the data source APIs.
         const rowIdToRow = new Map();
         const rowIndexToRow = new Map();
         const rowIdToRowIndex = new Map();
         const rowIdToTreeNode = new Map();
+        // When flattening the tree we need to keep track of the ranges. The tree itself
+        // will only have some rows loaded, but the ranges will be fully defined.
         const ranges = [];
         const blocksize = this.#blocksize;
-        const previousRequests = this.#prevRequests;
-        const withError = this.#rowsWithError;
-        const withLoading = this.#loadingRows;
+        const seen = this.#seenRequests;
+        // Tracks the error and loading state of the rows.
+        const withGroupError = this.#rowsWithGroupError;
+        const withLoadingGroup = this.#loadingGroup;
         const handleRequests = this.handleRequests;
         const defaultExpansion = this.#defaultExpansion;
         const postFlatRequests = [];
@@ -286,11 +416,17 @@ export class ServerData {
                 rowIdToRowIndex.set(row.data.id, rowIndex);
                 rowIdToRow.set(row.data.id, row.data);
                 rowIdToTreeNode.set(row.data.id, row);
+                // If this rows is a parent row, we need to check if it is expanded. There are a couple of
+                // situations this to consider.
+                // - the row is not expanded, in which case we only add the row itself to the flat view
+                // - the row is expanded but it has no data loaded. We should then request data, but not add the rows
+                // - the row is expanded and there is add. This is the easy case, we simply add the child rows as we flatten
                 if (row.kind === "parent") {
                     const expanded = expansions[row.data.id] ??
                         (typeof defaultExpansion === "number"
                             ? getNodeDepth(row) <= defaultExpansion
                             : defaultExpansion);
+                    // Expanded but no data. Fetch the child data.
                     if (expanded && !row.byIndex.size) {
                         const path = getNodePath(row);
                         const start = 0;
@@ -304,8 +440,8 @@ export class ServerData {
                             rowStartIndex: rowIndex + 1,
                             rowEndIndex: rowIndex + 1 + reqSize,
                         };
-                        // If we haven't already requested this node
-                        if (!previousRequests.find((c) => c.id === req.id)) {
+                        // If we haven't already requested the children data for this node, let's request it.
+                        if (!seen.has(req.id)) {
                             postFlatRequests.push([rowIndex, req]);
                         }
                     }
@@ -340,21 +476,25 @@ export class ServerData {
         const rangeTree = new RangeTree(ranges);
         if (postFlatRequests.length > 0) {
             postFlatRequests.forEach((c) => {
-                withLoading.add(c[0]);
-                previousRequests.push(c[1]);
+                withLoadingGroup.add(c[0]);
+                seen.add(c[1].id);
             });
+            const invalidate = this.#onInvalidate;
             const reqs = postFlatRequests.map((c) => c[1]);
             handleRequests(reqs, {
                 skipState: true,
                 onError: (e) => {
+                    invalidate();
                     postFlatRequests.forEach((c) => {
-                        withLoading.delete(c[0]);
-                        withError.set(c[0], e);
+                        const rowIndex = c[0];
+                        const req = c[1];
+                        withLoadingGroup.delete(rowIndex);
+                        withGroupError.set(rowIndex, { error: e, request: req });
                     });
                 },
                 onSuccess: () => {
                     postFlatRequests.forEach((c) => {
-                        withLoading.delete(c[0]);
+                        withLoadingGroup.delete(c[0]);
                     });
                 },
             });
@@ -370,7 +510,10 @@ export class ServerData {
             rowIdToRowIndex,
             rowIdToTreeNode,
             errored: this.#rowsWithError,
+            erroredGroup: this.#rowsWithGroupError,
             loading: this.#loadingRows,
+            loadingGroup: this.#loadingGroup,
+            seenRequests: seen,
         };
         beforeOnFlat?.();
         this.#onFlatten(this.#flat);

package/dist/row-data-source-server/use-server-data-source.d.ts

@@ -1,3 +1,3 @@
 import type { RowDataSourceServer, RowDataSourceServerParams } from "../+types.js";
-export declare function makeServerDataSource<T>({ dataFetcher, dataInFilterItemFetcher, dataColumnPivotFetcher, cellUpdateHandler, cellUpdateOptimistically, blockSize, }: RowDataSourceServerParams<T>): RowDataSourceServer<T>;
+export declare function makeServerDataSource<T>({ dataFetcher, dataInFilterItemFetcher, dataColumnPivotFetcher, cellUpdateHandler, cellUpdateOptimistically, blockSize, }: Omit<RowDataSourceServerParams<T>, "dataFetchExternals">): RowDataSourceServer<T>;
 export declare function useServerDataSource<T>(p: RowDataSourceServerParams<T>): RowDataSourceServer<T>;

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

@@ -9,6 +9,7 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
     void grid;
     const isLoading = makeAtom(signal(false));
     const loadError = makeAtom(signal(null));
+    const requestsForView = makeAtom(signal([]));
     const cleanup = [];
     const init = (g) => {
         grid = g;
@@ -22,6 +23,7 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
                 isLoading.set(true);
                 loadError.set(null);
             },
+            onInvalidate: () => g.state.rowDataStore.rowClearCache(),
             onResetLoadEnd: () => isLoading.set(false),
             onResetLoadError: (e) => loadError.set(e),
             onFlatten: (f) => {
@@ -119,6 +121,11 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
         cleanup.push(g.state.viewBounds.watch(() => {
             const bounds = g.state.viewBounds.get();
             source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+            const requests = source.requestsForView();
+            const current = requestsForView.get();
+            if (equal(requests, current))
+                return;
+            requestsForView.set(requests);
         }));
         source.dataFetcher = (req, expansions, pivotExpansions) => {
             return dataFetcher({
@@ -161,8 +168,9 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
     const rowByIndex = (i) => {
         const row = flat.rowIndexToRow.get(i);
         const isLoading = flat.loading.has(i);
+        const isGroupLoading = flat.loadingGroup.has(i);
+        const errorGroup = flat.erroredGroup.get(i);
         const error = flat.errored.get(i);
-        // If we haven't loaded a row yet.
         if (!row)
             return {
                 id: `__loading__placeholder__${i}`,
@@ -171,13 +179,23 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
                 loading: isLoading,
                 error: error,
             };
-        if (error) {
-            return { ...row, error };
+        if (row.kind === "leaf") {
+            if (error || isLoading) {
+                return { ...row, loading: isLoading, error: error?.error };
+            }
         }
-        if (isLoading) {
-            return { ...row, loading: isLoading };
+        else if (row.kind === "branch") {
+            if (error || isLoading || isGroupLoading || errorGroup) {
+                return {
+                    ...row,
+                    loading: isLoading,
+                    error: error?.error,
+                    errorGroup: errorGroup?.error,
+                    loadingGroup: isGroupLoading,
+                };
+            }
         }
-        return flat.rowIndexToRow.get(i) ?? null;
+        return row ?? null;
     };
     const rowExpand = (expansions) => {
         if (!grid)
@@ -290,7 +308,7 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
         idMap.forEach((data, id) => {
             source.updateRow(id, data);
         });
-        grid?.state.rowDataStore.rowClearCache();
+        source.flatten();
     };
     const inFilterItems = (c) => {
         if (!dataInFilterItemFetcher || !grid)
@@ -309,7 +327,23 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
     const pushRequests = (requests) => {
         source.handleRequests(requests);
     };
-    const retry = () => { };
+    const retry = () => {
+        source.retry();
+        grid?.state.rowDataStore.rowClearCache();
+    };
+    const refresh = (onSuccess, onError) => {
+        const requests = source.requestsForView();
+        pushRequests(requests, onSuccess, onError);
+    };
+    const requestForGroup = (row) => {
+        const index = typeof row === "number" ? row : flat.rowIdToRowIndex.get(row.id);
+        if (index == null)
+            return null;
+        return source.requestForGroup(index);
+    };
+    const requestForNextSlice = (req) => {
+        return source.requestForNextSlice(req);
+    };
     return {
         init,
         rowAdd,
@@ -333,12 +367,47 @@ export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dat
         pushRequests,
         reset,
         retry,
+        refresh,
+        requestsForView: requestsForView,
+        requestForGroup,
+        requestForNextSlice,
+        get seenRequests() {
+            return flat.seenRequests;
+        },
     };
 }
 export function useServerDataSource(p) {
     const ds = useRef(null);
+    const fetcherRef = useRef(p.dataFetcher);
+    const prevExternal = useRef(p.dataFetchExternals ?? []);
+    const animRef = useRef(false);
+    if (!arrayShallow(prevExternal.current, p.dataFetchExternals ?? [])) {
+        prevExternal.current = p.dataFetchExternals ?? [];
+        fetcherRef.current = p.dataFetcher;
+        if (ds.current && !animRef.current) {
+            animRef.current = true;
+            queueMicrotask(() => {
+                ds.current.reset();
+                animRef.current = false;
+            });
+        }
+    }
     if (!ds.current) {
-        ds.current = makeServerDataSource(p);
+        ds.current = makeServerDataSource({
+            ...p,
+            dataFetcher: (params) => {
+                return fetcherRef.current(params);
+            },
+        });
     }
     return ds.current;
 }
+function arrayShallow(left, right) {
+    if (left.length !== right.length)
+        return false;
+    for (let i = 0; i < left.length; i++) {
+        if (left[i] !== right[i])
+            return false;
+    }
+    return true;
+}