refactor: use gate to avoid computations

Author: iobuhov

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

@@ -7,8 +7,8 @@ enableStaticRendering(true);
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { SelectAllController } from "@mendix/widget-plugin-grid/selection";
-import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
 import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";

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

@@ -9,35 +9,31 @@ import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
-import { ProgressStore } from "./features/data-export/ProgressStore";
 import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
 import { DatagridContext, DatagridRootScope } from "./helpers/root-context";
 import { useSelectActionHelper } from "./helpers/SelectActionHelper";
-import { IColumnGroupStore } from "./helpers/state/ColumnGroupStore";
 import { RootGridStore } from "./helpers/state/RootGridStore";
 import { useRootStore } from "./helpers/state/useRootStore";
 import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
 
 interface Props extends DatagridContainerProps {
-    columnsStore: IColumnGroupStore;
     rootStore: RootGridStore;
-    progressStore: ProgressStore;
 }
 
 const Container = observer((props: Props): ReactElement => {
-    const { columnsStore, rootStore } = props;
-    const { paginationCtrl } = rootStore;
+    const { rootStore } = props;
+    const { paginationCtrl, gate, query, columnsStore, exportProgressStore } = rootStore;
 
-    const items = rootStore.query.items ?? [];
+    const items = query.items ?? [];
 
-    const [exportProgress, abortExport] = useDataExport(props, props.columnsStore, props.progressStore);
+    const [exportProgress, abortExport] = useDataExport(props, columnsStore, exportProgressStore);
 
     const selectionHelper = useSelectionHelper(
-        props.itemSelection,
-        props.datasource,
-        props.onSelectionChange,
+        gate.props.itemSelection,
+        gate.props.datasource,
+        gate.props.onSelectionChange,
         props.keepSelection ? "always keep" : "always clear"
     );
 
@@ -150,14 +146,5 @@ const Container = observer((props: Props): ReactElement => {
 Container.displayName = "DatagridComponent";
 
 export default function Datagrid(props: DatagridContainerProps): ReactElement | null {
-    const rootStore = useRootStore(props);
-
-    return (
-        <Container
-            {...props}
-            rootStore={rootStore}
-            columnsStore={rootStore.columnsStore}
-            progressStore={rootStore.exportProgressStore}
-        />
-    );
+    return <Container {...props} rootStore={useRootStore(props)} />;
 }

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

@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useState } from "react";
+import { DatagridContainerProps } from "../../../typings/DatagridProps";
+import { IColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { ExportController } from "./ExportController";
 import { ProgressStore } from "./ProgressStore";
 import { getExportRegistry } from "./registry";
-import { DatagridContainerProps } from "../../../typings/DatagridProps";
-import { IColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 
 type ResourceEntry = {
     key: string;
     controller: ExportController;
 };
 
 export function useDataExport(
-    props: DatagridContainerProps,
+    props: Pick<DatagridContainerProps, "datasource" | "name" | "columns">,
     columnsStore: IColumnGroupStore,
     progress: ProgressStore
 ): [store: ProgressStore, abort: () => void] {

packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts

@@ -1,7 +1,7 @@
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { SelectAllController, SelectionHelper } from "@mendix/widget-plugin-grid/selection";
-import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
 import { createContext, useContext } from "react";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { EventsController } from "../typings/CellComponent";

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -5,8 +5,8 @@ import { DatasourceController } from "@mendix/widget-plugin-grid/query/Datasourc
 import { QueryController } from "@mendix/widget-plugin-grid/query/query-controller";
 import { RefreshController } from "@mendix/widget-plugin-grid/query/RefreshController";
 import { SelectAllController } from "@mendix/widget-plugin-grid/selection";
-import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { ProgressStore } from "@mendix/widget-plugin-grid/stores/ProgressStore";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/stores/SelectionCountStore";
 import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
@@ -17,9 +17,7 @@ import { DatagridContainerProps } from "../../../typings/DatagridProps";
 import { DatasourceParamsController } from "../../controllers/DatasourceParamsController";
 import { DerivedLoaderController } from "../../controllers/DerivedLoaderController";
 import { PaginationController } from "../../controllers/PaginationController";
-
 import { StaticInfo } from "../../typings/static-info";
-
 import { ColumnGroupStore } from "./ColumnGroupStore";
 import { GridPersonalizationStore } from "./GridPersonalizationStore";
 
@@ -40,6 +38,7 @@ type RequiredProps = Pick<
     | "showNumberOfRows"
     | "selectAllPagesEnabled"
     | "selectAllPagesPageSize"
+    | "onSelectionChange"
 >;
 
 type Gate = DerivedPropsGate<RequiredProps>;
@@ -62,10 +61,9 @@ export class RootGridStore extends BaseControllerHost {
     selectAllProgressStore: ProgressStore;
     loaderCtrl: DerivedLoaderController;
     paginationCtrl: PaginationController;
-    readonly filterAPI: FilterAPI;
-    query!: QueryController;
-
-    private gate: Gate;
+    filterAPI: FilterAPI;
+    query: QueryController;
+    gate: Gate;
 
     constructor({ gate, exportProgressStore, selectAllProgressStore, selectAllController }: Spec) {
         super();
@@ -80,8 +78,7 @@ export class RootGridStore extends BaseControllerHost {
 
         const filterHost = new CustomFilterHost();
 
-        const query = new DatasourceController(this, { gate });
-        this.query = query;
+        const query = (this.query = new DatasourceController(this, { gate }));
 
         this.filterAPI = createContextWithStub({
             filterObserver: filterHost,
@@ -136,12 +133,10 @@ export class RootGridStore extends BaseControllerHost {
         add(super.setup());
         add(this.columnsStore.setup());
         add(() => this.settingsStore.dispose());
-        add(autorun(() => this.updateProps(this.gate.props)));
+        // Column store & settings store is still using old `updateProps`
+        // approach. So, we use autorun to sync props.
+        add(autorun(() => this.columnsStore.updateProps(this.gate.props)));
+        add(autorun(() => this.settingsStore.updateProps(this.gate.props)));
         return disposeAll;
     }
-
-    private updateProps(props: RequiredProps): void {
-        this.columnsStore.updateProps(props);
-        this.settingsStore.updateProps(props);
-    }
 }

packages/shared/widget-plugin-grid/src/select-all/SelectAllController.ts

@@ -146,12 +146,10 @@ export class SelectAllController implements ReactiveController {
             const selectionBeforeReload = this.selection?.selection ?? [];
             // Reload selection to make sure setSelection is working as expected.
             await this.reloadSelection();
-
             this.selection?.setSelection(success ? allItems : selectionBeforeReload);
-
             this.locked = false;
-            console.info(success, initLimit, initOffset);
             this.abortController = undefined;
+
             performance.mark("SelectAll_End");
             const measure1 = performance.measure("Measure1", "SelectAll_Start", "SelectAll_End");
             console.debug(`Data grid 2: 'select all' took ${(measure1.duration / 1000).toFixed(2)} seconds.`);
@@ -161,7 +159,7 @@ export class SelectAllController implements ReactiveController {
     reloadSelection(): Promise<void> {
         const selection = this.selection;
         selection?.setSelection([]);
-        // Resolve when selection value is updated
+        // `when` resolves when selection value is updated
         return when(() => this.selection !== selection);
     }