[WC-2517]: Fix export data performance

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -6,7 +6,7 @@ import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
-import { UpdateDataSourceFn, useDG2ExportApi } from "./features/export";
+import { UpdateDataSourceFn, useDataExportApi } from "./features/data-export";
 import "./ui/Datagrid.scss";
 import { useShowPagination } from "./utils/useShowPagination";
 import { useSelectActionHelper } from "./helpers/SelectActionHelper";
@@ -32,13 +32,10 @@ const Container = observer((props: Props): ReactElement => {
         : props.datasource.offset / props.pageSize;
 
     const { FilterContext } = useFilterContext();
-    const { columnsStore, rootStore } = props;
+    const { columnsStore, rootStore, columns } = props;
 
-    const [{ items, exporting, processedRows }, { abort }] = useDG2ExportApi({
-        columns: useMemo(
-            () => columnsStore.visibleColumns.map(column => props.columns[column.columnIndex]),
-            [columnsStore.visibleColumns, props.columns]
-        ),
+    const [{ items, exporting, processedRows }, { abort }] = useDataExportApi({
+        columns: columnsStore.visibleColumns.map(column => columns[column.columnIndex]),
         hasMoreItems: props.datasource.hasMoreItems || false,
         items: props.datasource.items,
         name: props.name,

packages/pluggableWidgets/datagrid-web/src/features/data-export/constants.ts

@@ -0,0 +1,18 @@
+import { InitState } from "./types";
+export const DATAGRID_DATA_EXPORT = "com.mendix.widgets.web.datagrid.export" as const;
+export const DEFAULT_LIMIT = 200;
+
+export function initState(): InitState {
+    return {
+        callback: null,
+        columns: null,
+        currentItems: [],
+        currentLimit: Number.POSITIVE_INFINITY,
+        currentOffset: 0,
+        exporting: false,
+        hasMoreItems: true,
+        phase: "awaitingCallback",
+        processedRows: 0,
+        snapshot: null
+    };
+}

packages/pluggableWidgets/datagrid-web/src/features/data-export/export-columns.ts

@@ -0,0 +1,12 @@
+import { isAvailable } from "@mendix/widget-plugin-platform/framework/is-available";
+import { ColumnsType } from "../../../typings/DatagridProps";
+import { ColumnDefinition, Message } from "./types";
+
+export function exportColumns(columns: ColumnsType[]): Message {
+    const exportColumns: ColumnDefinition[] = columns.map(column => ({
+        name: column.header && isAvailable(column.header) ? column.header.value?.toString() ?? "" : "",
+        type: column.attribute?.type.toString() ?? ""
+    }));
+
+    return { type: "columns", payload: exportColumns };
+}

packages/pluggableWidgets/datagrid-web/src/features/data-export/export-data.ts

@@ -0,0 +1,72 @@
+import { Big } from "big.js";
+import { ObjectItem } from "mendix";
+import { ColumnsType } from "../../../typings/DatagridProps";
+import { Message } from "./types";
+
+type ExportDataResult =
+    | {
+          status: "pending";
+      }
+    | {
+          status: "ready";
+          message: Message;
+      };
+
+export function exportData(data: ObjectItem[], columns: ColumnsType[]): ExportDataResult {
+    let hasLoadingItem = false;
+    type ExportDataValue = boolean | number | string;
+    type ExportDataColumn = ExportDataValue[];
+
+    const items: ExportDataColumn[] = data.map(item => {
+        return columns.map(column => {
+            let value: ExportDataValue = "";
+
+            switch (column.showContentAs) {
+                case "attribute":
+                    if (column.attribute) {
+                        const attributeItem = column.attribute.get(item);
+                        const attributeType = typeof attributeItem.value;
+
+                        if (attributeItem.status === "available") {
+                            if (attributeType === "boolean") {
+                                value = Boolean(attributeItem.value);
+                            } else if (attributeItem.value instanceof Big) {
+                                value = attributeItem.value.toNumber();
+                            } else {
+                                value = attributeItem.displayValue;
+                            }
+                        } else {
+                            value = "n/a";
+                        }
+                    }
+                    break;
+                case "dynamicText":
+                    if (column.dynamicText) {
+                        const dynamicText = column.dynamicText.get(item);
+
+                        if (dynamicText.status === "loading") {
+                            hasLoadingItem = true;
+                        } else if (dynamicText.status === "unavailable") {
+                            value = "n/a";
+                        } else {
+                            value = dynamicText.value;
+                        }
+                    }
+                    break;
+                default:
+                    value = "n/a (custom content)";
+                    break;
+            }
+
+            return value;
+        });
+    });
+
+    if (hasLoadingItem) {
+        return {
+            status: "pending"
+        };
+    }
+
+    return { status: "ready", message: { type: "data", payload: items } };
+}

packages/pluggableWidgets/datagrid-web/src/features/data-export/export-state-reducer.ts

@@ -0,0 +1,141 @@
+import { initState } from "./constants";
+import { Action, DataSourceUpdate, State } from "./types";
+
+function stateAndPayloadEqual(state: State, { payload }: DataSourceUpdate): boolean {
+    if (
+        state.currentLimit === payload.limit &&
+        state.currentOffset === payload.offset &&
+        state.hasMoreItems === state.hasMoreItems &&
+        state.currentItems.length === payload.items.length
+    ) {
+        const itemsEqual = state.currentItems.every((a, index) => {
+            const b = payload.items[index];
+            return a.id === b.id;
+        });
+
+        return itemsEqual;
+    }
+
+    return false;
+}
+
+export function exportStateReducer(state: State, action: Action): State {
+    if (action.type === "Reset") {
+        return initState();
+    }
+
+    if (action.type === "DataSourceUpdate") {
+        if (state.phase === "awaitingCallback" && stateAndPayloadEqual(state, action)) {
+            return state;
+        }
+
+        const currentPhase = state.phase;
+        const next: State = {
+            ...state,
+            currentOffset: action.payload.offset,
+            currentLimit: action.payload.limit,
+            currentItems: action.payload.items,
+            hasMoreItems: action.payload.hasMoreItems
+        };
+
+        if (next.exporting && currentPhase === "awaitingData") {
+            next.phase = "exportData";
+        }
+
+        if (next.exporting && currentPhase === "resetOffset") {
+            // Skip to finished if we have no items after resetting offset
+            if (next.currentItems.length === 0) {
+                next.phase = "finished";
+            } else {
+                next.phase = "exportData";
+            }
+        }
+
+        if (next.exporting && currentPhase === "finally") {
+            return {
+                ...initState(),
+                currentLimit: action.payload.limit,
+                currentItems: action.payload.items,
+                currentOffset: action.payload.offset
+            };
+        }
+
+        return next;
+    }
+
+    if (action.type === "ColumnsUpdate") {
+        if (
+            state.phase === "readyToStart" ||
+            state.phase === "exportColumns" ||
+            state.phase === "exportData" ||
+            state.phase === "awaitingCallback"
+        ) {
+            return {
+                ...state,
+                columns: action.payload.columns
+            };
+        }
+    }
+
+    if (action.type === "Setup" && state.phase === "awaitingCallback") {
+        return {
+            ...state,
+            phase: "readyToStart",
+            snapshot: {
+                items: state.currentItems,
+                offset: state.currentOffset,
+                limit: state.currentLimit
+            },
+            callback: action.payload.callback,
+            columns: state.columns || action.payload.columns,
+            currentLimit: action.payload.limit,
+            currentOffset: 0
+        };
+    }
+
+    if (action.type === "Start") {
+        if (state.exporting) {
+            return state;
+        }
+
+        if (state.phase === "readyToStart" && state.callback instanceof Function) {
+            return {
+                ...state,
+                phase: "exportColumns",
+                exporting: true
+            };
+        }
+
+        throw new Error("Datagrid (Export): Export start failed: invalid state.");
+    }
+
+    if (action.type === "ColumnsExported") {
+        if (state.exporting && state.phase === "exportColumns") {
+            return { ...state, phase: "resetOffset" };
+        }
+    }
+
+    if (action.type === "PageExported") {
+        if (state.exporting && state.phase === "exportData") {
+            return {
+                ...state,
+                phase: "awaitingData",
+                processedRows: state.processedRows + state.currentLimit
+            };
+        }
+    }
+
+    if (action.type === "Finish" && state.exporting) {
+        return { ...state, phase: "finished" };
+    }
+
+    if (action.type === "Abort" && state.exporting) {
+        return { ...state, phase: "aborting" };
+    }
+
+    if (action.type === "ExportEnd" && state.exporting) {
+        return { ...state, phase: "finally", processedRows: 0 };
+    }
+
+    return state;
+}