PromucFlow_constructor/app/client/src/utils/NavigationSelector/WidgetChildren.ts
Apeksha Bhosale 2b25e1e9b0
fix: Improving performance of JS evaluations by splitting the data tree (#21547)
## Description
This is the second phase of the split data tree. In the previous version, we collected all config paths in each entity and put them in the `__config__` property. All those config properties do get inserted into final data tree which we don't need at all. 
As part of this change, we will be creating another tree i.e **'configTree'**  which will contain all config of each entity. 

unEvalTree is split into 2 trees => 
1. unEvalTree 
2.  configTree

Example: 
previous unEvalTree Api1 content 
<img width="1766" alt="image" src="https://user-images.githubusercontent.com/7846888/215990868-0b095421-e7b8-44bc-89aa-065b35e237d6.png">


After this change
unEvalTree Api1 content
<img width="1758" alt="image" src="https://user-images.githubusercontent.com/7846888/215991045-506fb10a-645a-4aad-8e77-0f3786a86977.png">
Note- above example doesn't have '__config__' property

configTree Api1 content 
<img width="1760" alt="image" src="https://user-images.githubusercontent.com/7846888/215991169-a2e03443-5d6a-4ff1-97c5-a12593e46395.png">


## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
- #11351


## How Has This Been Tested?
- Manual
- Jest
- Cypress

### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or manual QA
- [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2023-03-20 16:34:02 +05:30

81 lines
2.7 KiB
TypeScript

import type { EntityDefinitionsOptions } from "ce/utils/autocomplete/EntityDefinitions";
import { entityDefinitions } from "ce/utils/autocomplete/EntityDefinitions";
import type { DataTree, WidgetEntity } from "entities/DataTree/dataTreeFactory";
import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
import { isFunction } from "lodash";
import type { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
import { builderURL } from "RouteBuilder";
import type { EntityNavigationData } from "selectors/navigationSelectors";
import { createNavData } from "./common";
export const getWidgetChildrenNavData = (
widget: FlattenedWidgetProps,
dataTree: DataTree,
pageId: string,
) => {
const peekData: Record<string, unknown> = {};
const childNavData: EntityNavigationData = {};
const dataTreeWidget: WidgetEntity = dataTree[
widget.widgetName
] as WidgetEntity;
if (widget.type === "FORM_WIDGET") {
const children: EntityNavigationData = {};
const formChildren: EntityNavigationData = {};
if (dataTreeWidget) {
Object.keys(dataTreeWidget.data || {}).forEach((widgetName) => {
const childWidgetId = (dataTree[widgetName] as WidgetEntity).widgetId;
formChildren[widgetName] = createNavData({
id: `${widget.widgetName}.data.${widgetName}`,
name: widgetName,
type: ENTITY_TYPE.WIDGET,
url: builderURL({ pageId, hash: childWidgetId }),
peekable: false,
peekData: undefined,
children: {},
});
});
}
children.data = createNavData({
id: `${widget.widgetName}.data`,
name: "data",
type: ENTITY_TYPE.WIDGET,
url: undefined,
peekable: false,
peekData: undefined,
children: formChildren,
});
return { childNavData: children, peekData };
}
if (dataTreeWidget) {
const type: Exclude<
EntityDefinitionsOptions,
| "CANVAS_WIDGET"
| "ICON_WIDGET"
| "SKELETON_WIDGET"
| "TABS_MIGRATOR_WIDGET"
> = dataTreeWidget.type as any;
let config: any = entityDefinitions[type];
if (config) {
if (isFunction(config)) config = config(dataTreeWidget);
const widgetProps = Object.keys(config).filter(
(k) => k.indexOf("!") === -1,
);
widgetProps.forEach((prop) => {
const data = dataTreeWidget[prop];
peekData[prop] = data;
childNavData[prop] = createNavData({
id: `${widget.widgetName}.${prop}`,
name: `${widget.widgetName}.${prop}`,
type: ENTITY_TYPE.WIDGET,
url: undefined,
peekable: true,
peekData: undefined,
children: {},
});
});
}
return { childNavData, peekData };
}
};