## Description Refactored getUnevaluatedDataTree selector to be more resilient to state changes thereby reselect cache gets triggered less often. Identified an action which was firing the selectors unnecessarily, fixed that as well. For our customer during page load it used to take about 800ms cumulatively, it has now dropped to about 160ms by about 80%. This is also an impactful selector which cumulatively takes about 50,000 seconds for all our client systems per week, hence we focussed our optimisation here ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11658078700> > Commit: 557172d47b2232800355e1dc78c921d9cb56c725 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11658078700&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Mon, 04 Nov 2024 06:00:06 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **Bug Fixes** - Improved state management by preventing unnecessary updates to loading entities, enhancing app performance. - **Refactor** - Updated the `loadingEntitiesReducer` to include an equality check for loading entities before state updates. - Enhanced date handling capabilities in the DatePicker widget tests and commands. - Restructured the `DataTreeFactory` class for improved modularity and clarity in data tree creation. - Simplified selector functions for better readability and maintainability in data tree selectors. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
212 lines
6.4 KiB
TypeScript
212 lines
6.4 KiB
TypeScript
import { createSelector } from "reselect";
|
|
import {
|
|
getCurrentActions,
|
|
getAppData,
|
|
getPluginDependencyConfig,
|
|
getPluginEditorConfigs,
|
|
getCurrentJSCollections,
|
|
getInputsForModule,
|
|
getModuleInstances,
|
|
getModuleInstanceEntities,
|
|
getCurrentModuleActions,
|
|
getCurrentModuleJSCollections,
|
|
} from "ee/selectors/entitiesSelector";
|
|
import type { AppsmithEntity, WidgetEntity } from "ee/entities/DataTree/types";
|
|
import type {
|
|
ConfigTree,
|
|
DataTree,
|
|
UnEvalTree,
|
|
} from "entities/DataTree/dataTreeTypes";
|
|
import {
|
|
DataTreeFactory,
|
|
ENTITY_TYPE,
|
|
} from "entities/DataTree/dataTreeFactory";
|
|
import {
|
|
getIsMobileBreakPoint,
|
|
getMetaWidgets,
|
|
getWidgets,
|
|
getWidgetsMeta,
|
|
} from "sagas/selectors";
|
|
import "url-search-params-polyfill";
|
|
import type { AppState } from "ee/reducers";
|
|
import { getSelectedAppThemeProperties } from "./appThemingSelectors";
|
|
import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
|
|
import _, { get } from "lodash";
|
|
import type { EvaluationError } from "utils/DynamicBindingUtils";
|
|
import { getEvalErrorPath } from "utils/DynamicBindingUtils";
|
|
import ConfigTreeActions from "utils/configTree";
|
|
import { DATATREE_INTERNAL_KEYWORDS } from "constants/WidgetValidation";
|
|
import { getLayoutSystemType } from "./layoutSystemSelectors";
|
|
import {
|
|
getCurrentWorkflowActions,
|
|
getCurrentWorkflowJSActions,
|
|
} from "ee/selectors/workflowSelectors";
|
|
|
|
export const getLoadingEntities = (state: AppState) =>
|
|
state.evaluations.loadingEntities;
|
|
|
|
/**
|
|
* This selector is created to combine a couple of data points required by getUnevaluatedDataTree selector.
|
|
* Current version of reselect package only allows upto 12 arguments. Hence, this workaround.
|
|
* TODO: Figure out a better way to do this in a separate task. Or update the package if possible.
|
|
*/
|
|
const getLayoutSystemPayload = createSelector(
|
|
getLayoutSystemType,
|
|
getIsMobileBreakPoint,
|
|
(layoutSystemType, isMobile) => {
|
|
return {
|
|
layoutSystemType,
|
|
isMobile,
|
|
};
|
|
},
|
|
);
|
|
|
|
const getCurrentActionsEntities = createSelector(
|
|
getCurrentActions,
|
|
getCurrentModuleActions,
|
|
getCurrentWorkflowActions,
|
|
(actions, moduleActions, workflowActions) => {
|
|
return [...actions, ...moduleActions, ...workflowActions];
|
|
},
|
|
);
|
|
const getCurrentJSActionsEntities = createSelector(
|
|
getCurrentJSCollections,
|
|
getCurrentModuleJSCollections,
|
|
getCurrentWorkflowJSActions,
|
|
(jsActions, moduleJSActions, workflowJsActions) => {
|
|
return [...jsActions, ...moduleJSActions, ...workflowJsActions];
|
|
},
|
|
);
|
|
|
|
const getModulesData = createSelector(
|
|
getInputsForModule,
|
|
getModuleInstances,
|
|
getModuleInstanceEntities,
|
|
(moduleInputs, moduleInstances, moduleInstanceEntities) => {
|
|
return {
|
|
moduleInputs: moduleInputs,
|
|
moduleInstances: moduleInstances,
|
|
moduleInstanceEntities: moduleInstanceEntities,
|
|
};
|
|
},
|
|
);
|
|
|
|
const getActionsFromUnevaluatedDataTree = createSelector(
|
|
getCurrentActionsEntities,
|
|
getPluginEditorConfigs,
|
|
getPluginDependencyConfig,
|
|
(actions, editorConfigs, pluginDependencyConfig) =>
|
|
DataTreeFactory.actions(actions, editorConfigs, pluginDependencyConfig),
|
|
);
|
|
|
|
const getJSActionsFromUnevaluatedDataTree = createSelector(
|
|
getCurrentJSActionsEntities,
|
|
(jsActions) => DataTreeFactory.jsActions(jsActions),
|
|
);
|
|
|
|
const getWidgetsFromUnevaluatedDataTree = createSelector(
|
|
getModulesData,
|
|
getWidgets,
|
|
getWidgetsMeta,
|
|
getLoadingEntities,
|
|
getLayoutSystemPayload,
|
|
(moduleData, widgets, widgetsMeta, loadingEntities, layoutSystemPayload) =>
|
|
DataTreeFactory.widgets(
|
|
moduleData.moduleInputs,
|
|
moduleData.moduleInstances,
|
|
moduleData.moduleInstanceEntities,
|
|
widgets,
|
|
widgetsMeta,
|
|
loadingEntities,
|
|
layoutSystemPayload.layoutSystemType,
|
|
layoutSystemPayload.isMobile,
|
|
),
|
|
);
|
|
const getMetaWidgetsFromUnevaluatedDataTree = createSelector(
|
|
getMetaWidgets,
|
|
getWidgetsMeta,
|
|
getLoadingEntities,
|
|
(metaWidgets, widgetsMeta, loadingEntities) =>
|
|
DataTreeFactory.metaWidgets(metaWidgets, widgetsMeta, loadingEntities),
|
|
);
|
|
|
|
export const getUnevaluatedDataTree = createSelector(
|
|
getActionsFromUnevaluatedDataTree,
|
|
getJSActionsFromUnevaluatedDataTree,
|
|
getWidgetsFromUnevaluatedDataTree,
|
|
getMetaWidgetsFromUnevaluatedDataTree,
|
|
getAppData,
|
|
getSelectedAppThemeProperties,
|
|
(actions, jsActions, widgets, metaWidgets, appData, theme) => {
|
|
let dataTree: UnEvalTree = {
|
|
...actions.dataTree,
|
|
...jsActions.dataTree,
|
|
...widgets.dataTree,
|
|
};
|
|
let configTree: ConfigTree = {
|
|
...actions.configTree,
|
|
...jsActions.configTree,
|
|
...widgets.configTree,
|
|
};
|
|
|
|
dataTree.appsmith = {
|
|
...appData,
|
|
// combine both persistent and transient state with the transient state
|
|
// taking precedence in case the key is the same
|
|
store: appData.store,
|
|
theme,
|
|
} as AppsmithEntity;
|
|
(dataTree.appsmith as AppsmithEntity).ENTITY_TYPE = ENTITY_TYPE.APPSMITH;
|
|
dataTree = { ...dataTree, ...metaWidgets.dataTree };
|
|
configTree = { ...configTree, ...metaWidgets.configTree };
|
|
|
|
return { unEvalTree: dataTree, configTree };
|
|
},
|
|
);
|
|
|
|
export const getEvaluationInverseDependencyMap = (state: AppState) =>
|
|
state.evaluations.dependencies.inverseDependencyMap;
|
|
|
|
export const getIsWidgetLoading = createSelector(
|
|
[getLoadingEntities, (_state: AppState, widgetName: string) => widgetName],
|
|
(loadingEntities: LoadingEntitiesState, widgetName: string) =>
|
|
loadingEntities.has(widgetName),
|
|
);
|
|
|
|
/**
|
|
* returns evaluation tree object
|
|
*
|
|
* @param state
|
|
*/
|
|
export const getDataTree = (state: AppState): DataTree =>
|
|
state.evaluations.tree;
|
|
|
|
// TODO: Fix this the next time the file is edited
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export const getConfigTree = (): any => {
|
|
return ConfigTreeActions.getConfigTree();
|
|
};
|
|
|
|
export const getWidgetEvalValues = createSelector(
|
|
[getDataTree, (_state: AppState, widgetName: string) => widgetName],
|
|
(tree: DataTree, widgetName: string) => tree[widgetName] as WidgetEntity,
|
|
);
|
|
|
|
// For autocomplete. Use actions cached responses if
|
|
// there isn't a response already
|
|
export const getDataTreeForAutocomplete = createSelector(
|
|
getDataTree,
|
|
(tree: DataTree) => {
|
|
return _.omit(tree, Object.keys(DATATREE_INTERNAL_KEYWORDS));
|
|
},
|
|
);
|
|
|
|
export const getPathEvalErrors = createSelector(
|
|
[
|
|
getDataTreeForAutocomplete,
|
|
(_: unknown, dataTreePath: string) => dataTreePath,
|
|
],
|
|
(dataTree: DataTree, dataTreePath: string) =>
|
|
get(dataTree, getEvalErrorPath(dataTreePath), []) as EvaluationError[],
|
|
);
|