perf: Widget re-rendering refactor

app/client/cypress/fixtures/newFormDsl.json

@@ -278,8 +278,8 @@
                 "parentRowSpace": 38,
                 "leftColumn": 10,
                 "rightColumn": 14,
-                "topRow": 11,
-                "bottomRow": 12,
+                "topRow": 17,
+                "bottomRow": 18,
                 "parentId": "e3tq9qwta6",
                 "widgetId": "ca22py6vlv"
               },
@@ -346,18 +346,18 @@
                 "parentColumnSpace": 6.6856445312499995,
                 "leftColumn": 2,
                 "options": [
-                    {
-                        "label": "Blue",
-                        "value": "BLUE"
-                    },
-                    {
-                        "label": "Green",
-                        "value": "GREEN"
-                    },
-                    {
-                        "label": "Red",
-                        "value": "RED"
-                    }
+                  {
+                    "label": "Blue",
+                    "value": "BLUE"
+                  },
+                  {
+                    "label": "Green",
+                    "value": "GREEN"
+                  },
+                  {
+                    "label": "Red",
+                    "value": "RED"
+                  }
                 ],
                 "isDisabled": false,
                 "key": "vrhzyvir7s",
@@ -382,4 +382,4 @@
       }
     ]
   }
-}
+}

app/client/cypress/integration/Smoke_TestSuite/Application/CommunityIssues_Spec.ts

@@ -311,10 +311,10 @@ describe("AForce - Community Issues page validations", function() {
     table.SelectTableRow(0);
     agHelper.AssertElementVisible(locator._widgetInDeployed("tabswidget"));
     agHelper
-      .GetNClick(locator._inputWidgetv1InDeployed)
+      .GetNClick(locator._inputWidgetv1InDeployed, 0, true, 0)
       .type("-updating title");
     agHelper
-      .GetNClick(locator._textAreainputWidgetv1InDeployed)
+      .GetNClick(locator._textAreainputWidgetv1InDeployed, 0, true, 0)
       .type("-updating desc");
     agHelper
       .GetNClick(locator._inputWidgetv1InDeployed, 1)
@@ -377,7 +377,7 @@ describe("AForce - Community Issues page validations", function() {
     agHelper.Sleep();
     cy.get(table._trashIcon)
       .closest("div")
-      .click();
+      .click({ force: true });
     agHelper.Sleep(3000); //allowing time to delete!
     agHelper.AssertElementAbsence(locator._widgetInDeployed("tabswidget"));
     table.WaitForTableEmpty();

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Replay_spec.js

@@ -166,6 +166,7 @@ describe("Undo/Redo functionality", function() {
     cy.get(commonlocators.toastmsg)
       .eq(1)
       .contains("UNDO");
+    cy.deleteWidget(widgetsPage.textWidget);
   });
 
   it("checks undo/redo for color picker", function() {

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Button/ButtonGroup_spec.js

@@ -1,4 +1,5 @@
 const explorer = require("../../../../../locators/explorerlocators.json");
+const { modifierKey } = require("../../../../../support/Constants");
 
 const firstButton = ".t--buttongroup-widget > div > button > div";
 const menuButton =
@@ -36,7 +37,7 @@ describe("Button Group Widget Functionality", function() {
     cy.get(firstButton).contains("Add");
 
     // Undo
-    cy.get("body").type("{ctrl+z}");
+    cy.get("body").type(`{${modifierKey}+z}`);
 
     // Check if the button is back
     cy.get(".t--buttongroup-widget")

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/List/List1_spec.js

@@ -108,6 +108,7 @@ describe("Binding the list widget with text widget", function() {
       .click({ force: true })
       .type("#$%1234", { delay: 300 })
       .type("{enter}");
+    cy.wait(500);
     cy.get(".t--widget-name").contains("___1234");
     cy.verifyUpdatedWidgetName("12345");
     cy.get(".t--delete-widget").click({ force: true });

app/client/cypress/support/Constants.js

@@ -0,0 +1 @@
+export const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";

app/client/cypress/support/widgetCommands.js

@@ -245,6 +245,7 @@ Cypress.Commands.add("verifyUpdatedWidgetName", (text) => {
     .click({ force: true })
     .type(text, { delay: 300 })
     .type("{enter}");
+  cy.wait(500);
   cy.get(".t--widget-name").contains(text);
 });
 

app/client/src/actions/pageActions.tsx

@@ -37,6 +37,12 @@ export interface CreatePageActionPayload {
   blockNavigation?: boolean;
 }
 
+export type updateLayoutOptions = {
+  isRetry?: boolean;
+  shouldReplay?: boolean;
+  updatedWidgetIds?: string[];
+};
+
 export const fetchPage = (
   pageId: string,
   isFirstLoad = false,
@@ -130,12 +136,12 @@ export const deletePageSuccess = () => {
 
 export const updateAndSaveLayout = (
   widgets: CanvasWidgetsReduxState,
-  isRetry?: boolean,
-  shouldReplay?: boolean,
+  options: updateLayoutOptions = {},
 ) => {
+  const { isRetry, shouldReplay, updatedWidgetIds } = options;
   return {
     type: ReduxActionTypes.UPDATE_LAYOUT,
-    payload: { widgets, isRetry, shouldReplay },
+    payload: { widgets, isRetry, shouldReplay, updatedWidgetIds },
   };
 };
 

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -902,6 +902,7 @@ export interface UpdateCanvasPayload {
   currentPageName: string;
   currentApplicationId: string;
   pageActions: PageAction[][];
+  updatedWidgetIds?: string[];
 }
 
 export interface ShowPropertyPanePayload {

app/client/src/components/designSystems/appsmith/PositionedContainer.tsx

@@ -8,7 +8,7 @@ import { usePositionedContainerZIndex } from "utils/hooks/usePositionedContainer
 import { useSelector } from "react-redux";
 import { snipingModeSelector } from "selectors/editorSelectors";
 import WidgetFactory from "utils/WidgetFactory";
-import { isEqual, memoize } from "lodash";
+import { memoize } from "lodash";
 import { getReflowSelector } from "selectors/widgetReflowSelectors";
 import { AppState } from "reducers";
 import { POSITIONED_WIDGET } from "constants/componentClassNameConstants";
@@ -59,7 +59,7 @@ export function PositionedContainer(props: PositionedContainerProps) {
 
   const reflowSelector = getReflowSelector(props.widgetId);
 
-  const reflowedPosition = useSelector(reflowSelector, isEqual);
+  const reflowedPosition = useSelector(reflowSelector);
   const dragDetails = useSelector(
     (state: AppState) => state.ui.widgetDragResize.dragDetails,
   );

app/client/src/components/editorComponents/ResizableComponent.tsx

@@ -37,12 +37,11 @@ import {
   snipingModeSelector,
 } from "selectors/editorSelectors";
 import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
-import { getCanvasWidgets } from "selectors/entitiesSelector";
 import { focusWidget } from "actions/widgetActions";
-import { getParentToOpenIfAny } from "utils/hooks/useClickToSelectWidget";
 import { GridDefaults } from "constants/WidgetConstants";
 import { DropTargetContext } from "./DropTargetComponent";
 import { XYCord } from "pages/common/CanvasArenas/hooks/useCanvasDragging";
+import { getParentToOpenSelector } from "selectors/widgetSelectors";
 
 export type ResizableComponentProps = WidgetProps & {
   paddingOffset: number;
@@ -53,7 +52,6 @@ export const ResizableComponent = memo(function ResizableComponent(
 ) {
   // Fetch information from the context
   const { updateWidget } = useContext(EditorContext);
-  const canvasWidgets = useSelector(getCanvasWidgets);
 
   const isSnipingMode = useSelector(snipingModeSelector);
   const isPreviewMode = useSelector(previewModeSelector);
@@ -78,9 +76,8 @@ export const ResizableComponent = memo(function ResizableComponent(
   const isResizing = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isResizing,
   );
-  const parentWidgetToSelect = getParentToOpenIfAny(
-    props.widgetId,
-    canvasWidgets,
+  const parentWidgetToSelect = useSelector(
+    getParentToOpenSelector(props.widgetId),
   );
 
   const isWidgetFocused =

app/client/src/constants/AppConstants.ts

@@ -1,9 +1,13 @@
 import localStorage from "utils/localStorage";
+import { GridDefaults } from "./WidgetConstants";
 
 export const CANVAS_DEFAULT_HEIGHT_PX = 1292;
 export const CANVAS_DEFAULT_MIN_HEIGHT_PX = 380;
 export const CANVAS_DEFAULT_GRID_HEIGHT_PX = 1;
 export const CANVAS_DEFAULT_GRID_WIDTH_PX = 1;
+export const CANVAS_DEFAULT_MIN_ROWS = Math.ceil(
+  CANVAS_DEFAULT_MIN_HEIGHT_PX / GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+);
 export const CANVAS_BACKGROUND_COLOR = "#FFFFFF";
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 256;

app/client/src/constants/WidgetConstants.tsx

@@ -138,6 +138,15 @@ export const WIDGET_STATIC_PROPS = {
   noContainerOffset: false,
 };
 
+export const WIDGET_DSL_STRUCTURE_PROPS = {
+  children: true,
+  type: true,
+  widgetId: true,
+  parentId: true,
+  topRow: true,
+  bottomRow: true,
+};
+
 export type TextSize = keyof typeof TextSizes;
 
 export const DEFAULT_FONT_SIZE = THEMEING_TEXT_SIZES.base;

app/client/src/pages/AppViewer/AppPage.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import WidgetFactory from "utils/WidgetFactory";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { useDynamicAppLayout } from "utils/hooks/useDynamicAppLayout";
-import { DSLWidget } from "widgets/constants";
+import { CanvasWidgetStructure } from "widgets/constants";
 import { RenderModes } from "constants/WidgetConstants";
 
 const PageView = styled.div<{ width: number }>`
@@ -14,10 +14,11 @@ const PageView = styled.div<{ width: number }>`
 `;
 
 type AppPageProps = {
-  dsl: DSLWidget;
-  pageName?: string;
-  pageId?: string;
   appName?: string;
+  canvasWidth: number;
+  pageId?: string;
+  pageName?: string;
+  widgetsStructure: CanvasWidgetStructure;
 };
 
 export function AppPage(props: AppPageProps) {
@@ -33,9 +34,9 @@ export function AppPage(props: AppPageProps) {
   }, [props.pageId, props.pageName]);
 
   return (
-    <PageView className="t--app-viewer-page" width={props.dsl.rightColumn}>
-      {props.dsl.widgetId &&
-        WidgetFactory.createWidget(props.dsl, RenderModes.PAGE)}
+    <PageView className="t--app-viewer-page" width={props.canvasWidth}>
+      {props.widgetsStructure.widgetId &&
+        WidgetFactory.createWidget(props.widgetsStructure, RenderModes.PAGE)}
     </PageView>
   );
 }

app/client/src/pages/AppViewer/AppViewerPageContainer.tsx

@@ -8,17 +8,16 @@ import { theme } from "constants/DefaultTheme";
 import { Icon, NonIdealState, Spinner } from "@blueprintjs/core";
 import Centered from "components/designSystems/appsmith/CenteredWrapper";
 import AppPage from "./AppPage";
-import {
-  getCanvasWidgetDsl,
-  getCurrentPageName,
-} from "selectors/editorSelectors";
+import { getCanvasWidth, getCurrentPageName } from "selectors/editorSelectors";
 import RequestConfirmationModal from "pages/Editor/RequestConfirmationModal";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 import {
   isPermitted,
   PERMISSION_TYPE,
 } from "../Applications/permissionHelpers";
 import { builderURL } from "RouteBuilder";
+import { getCanvasWidgetsStructure } from "selectors/entitiesSelector";
+import { isEqual } from "lodash";
 
 const Section = styled.section`
   height: 100%;
@@ -33,7 +32,8 @@ type AppViewerPageContainerProps = RouteComponentProps<AppViewerRouteParams>;
 
 function AppViewerPageContainer(props: AppViewerPageContainerProps) {
   const currentPageName = useSelector(getCurrentPageName);
-  const widgets = useSelector(getCanvasWidgetDsl);
+  const widgetsStructure = useSelector(getCanvasWidgetsStructure, isEqual);
+  const canvasWidth = useSelector(getCanvasWidth);
   const isFetchingPage = useSelector(getIsFetchingPage);
   const currentApplication = useSelector(getCurrentApplication);
   const { match } = props;
@@ -86,15 +86,17 @@ function AppViewerPageContainer(props: AppViewerPageContainerProps) {
 
   if (isFetchingPage) return pageLoading;
 
-  if (!(widgets.children && widgets.children.length > 0)) return pageNotFound;
+  if (!(widgetsStructure.children && widgetsStructure.children.length > 0))
+    return pageNotFound;
 
   return (
     <Section>
       <AppPage
         appName={currentApplication?.name}
-        dsl={widgets}
+        canvasWidth={canvasWidth}
         pageId={match.params.pageId}
         pageName={currentPageName}
+        widgetsStructure={widgetsStructure}
       />
       <RequestConfirmationModal />
     </Section>

app/client/src/pages/Editor/Canvas.tsx

@@ -2,7 +2,7 @@ import log from "loglevel";
 import * as Sentry from "@sentry/react";
 import styled from "styled-components";
 import store, { useSelector } from "store";
-import { DSLWidget } from "widgets/constants";
+import { CanvasWidgetStructure } from "widgets/constants";
 import WidgetFactory from "utils/WidgetFactory";
 import React, { memo, useCallback, useEffect } from "react";
 
@@ -22,8 +22,9 @@ import { getPageLevelSocketRoomId } from "sagas/WebsocketSagas/utils";
 import { previewModeSelector } from "selectors/editorSelectors";
 
 interface CanvasProps {
-  dsl: DSLWidget;
+  widgetsStructure: CanvasWidgetStructure;
   pageId: string;
+  canvasWidth: number;
 }
 
 type PointerEventDataType = {
@@ -72,7 +73,7 @@ const useShareMousePointerEvent = () => {
 
 // TODO(abhinav): get the render mode from context
 const Canvas = memo((props: CanvasProps) => {
-  const { pageId } = props;
+  const { canvasWidth, pageId } = props;
   const isPreviewMode = useSelector(previewModeSelector);
   const selectedTheme = useSelector(getSelectedAppTheme);
 
@@ -118,11 +119,14 @@ const Canvas = memo((props: CanvasProps) => {
           !!data && delayedShareMousePointer(data);
         }}
         style={{
-          width: props.dsl.rightColumn,
+          width: canvasWidth,
         }}
       >
-        {props.dsl.widgetId &&
-          WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)}
+        {props.widgetsStructure.widgetId &&
+          WidgetFactory.createWidget(
+            props.widgetsStructure,
+            RenderModes.CANVAS,
+          )}
         {isMultiplayerEnabledForUser && (
           <CanvasMultiPointerArena pageId={pageId} />
         )}