Grid performance improvements (#974)

Author: evshi

.changeset/big-beds-rest.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Grid performance improvements

packages/framework/src/evaluate/binding.ts

@@ -1,7 +1,7 @@
 import { parseExpressionAt, tokTypes } from "acorn";
 import type { Atom } from "jotai";
 import { atom } from "jotai";
-import { isNil, merge, omitBy } from "lodash-es";
+import { groupBy, has, isNil, merge, omitBy } from "lodash-es";
 import type { Expression } from "../shared";
 import { isExpression, sanitizeJs, debug, error } from "../shared";
 import {
@@ -13,14 +13,14 @@ import {
   themeAtom,
   envAtom,
   defaultScreenContext,
-  screenDataAtom,
   screenInputAtom,
   widgetFamilyAtom,
   screenGlobalScriptAtom,
   screenImportScriptAtom,
   userAtom,
   appAtom,
   secretAtom,
+  screenDataFamilyAtom,
 } from "../state";
 import { deviceAtom } from "../hooks/useDeviceObserver";
 import { evaluate } from "./evaluate";
@@ -62,16 +62,23 @@ export const createBindingAtom = <T = unknown>(
 
   const dependencyEntries = identifiers.map((identifier) => {
     debug(`found dependency for ${String(widgetId)}: ${identifier}`);
-    // TODO: Account for data bindings also
-    const dependencyAtom = widgetFamilyAtom(identifier);
-    return { name: identifier, dependencyAtom };
+    const widgetDepAtom = widgetFamilyAtom(identifier);
+    const dataDepAtom = screenDataFamilyAtom(identifier);
+    // TODO: find a better way to distinguish data and widget identifiers
+    return { name: identifier, dependencies: [dataDepAtom, widgetDepAtom] };
   });
 
   const bindingAtom = atom((get) => {
-    const data = get(screenDataAtom);
     const appData = get(appAtom);
-    const valueEntries = dependencyEntries.map(({ name, dependencyAtom }) => {
-      const value = get(dependencyAtom);
+    const valueEntries = dependencyEntries.map(({ name, dependencies }) => {
+      let value;
+      for (const depAtom of dependencies) {
+        const depValue = get<unknown>(depAtom);
+        if (depValue) {
+          value = depValue;
+          break;
+        }
+      }
       debug(
         `value for dependency ${name} at ${String(widgetId)}: ${JSON.stringify(
           value,
@@ -80,6 +87,14 @@ export const createBindingAtom = <T = unknown>(
       return [name, value];
     });
 
+    const values = groupBy(valueEntries, ([, value]) => {
+      // is widget state
+      if (has(value, "values") || has(value, "invokables")) {
+        return "widgets";
+      }
+      return "data";
+    });
+
     const evaluationContext = createEvaluationContext({
       applicationContext: {
         application: {
@@ -92,8 +107,8 @@ export const createBindingAtom = <T = unknown>(
       },
       screenContext: {
         inputs: get(screenInputAtom),
-        widgets: omitBy(Object.fromEntries(valueEntries), isNil),
-        data,
+        widgets: omitBy(Object.fromEntries(values.widgets ?? []), isNil),
+        data: omitBy(Object.fromEntries(values.data ?? []), isNil),
       },
       ensemble: {
         storage: createStorageApi(

packages/framework/src/state/screen.ts

@@ -1,6 +1,7 @@
 import { atom } from "jotai";
 import { focusAtom } from "jotai-optics";
 import { assign } from "lodash-es";
+import { atomFamily } from "jotai/utils";
 import { type Response, type WebSocketConnection } from "../data";
 import type { EnsembleAppModel, EnsembleScreenModel } from "../shared";
 import type { WidgetState } from "./widget";
@@ -48,6 +49,10 @@ export const screenDataAtom = atom(
   },
 );
 
+export const screenDataFamilyAtom = atomFamily((id: string) =>
+  focusAtom(screenDataFocusAtom, (optics) => optics.path(id)),
+);
+
 export const screenModelAtom = focusAtom(screenAtom, (optic) =>
   optic.prop("model"),
 );

packages/runtime/package.json

@@ -50,6 +50,7 @@
     "lodash-es": "^4.17.21",
     "react-chartjs-2": "^5.2.0",
     "react-easy-crop": "^5.0.5",
+    "react-fast-compare": "^3.2.2",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.16.0",

packages/runtime/src/widgets/DataGrid/DataCell.tsx

@@ -4,6 +4,7 @@ import {
   CustomScopeProvider,
   useTemplateData,
 } from "@ensembleui/react-framework";
+import { memo } from "react";
 import { EnsembleRuntime } from "../../runtime";
 import type { DataGridRowTemplate } from "./DataGrid";
 
@@ -14,42 +15,41 @@ export interface DataCellProps {
   columnIndex: number;
   rowIndex: number;
 }
-export const DataCell: React.FC<DataCellProps> = ({
-  template,
-  columnIndex,
-  rowIndex,
-  data,
-}) => {
-  const { "item-template": itemTemplate, children } = template.properties;
-  const { namedData } = useTemplateData({
-    ...itemTemplate,
-    context: data,
-  });
+export const DataCell: React.FC<DataCellProps> = memo(
+  ({ template, columnIndex, rowIndex, data }) => {
+    const { "item-template": itemTemplate, children } = template.properties;
+    const { namedData } = useTemplateData({
+      ...itemTemplate,
+      context: data,
+    });
 
-  if (children) {
-    return (
-      <CustomScopeProvider
-        value={{ ...(data as object), index: rowIndex } as CustomScope}
-      >
-        {EnsembleRuntime.render([children[columnIndex]])}
-      </CustomScopeProvider>
-    );
-  }
+    if (children) {
+      return (
+        <CustomScopeProvider
+          value={{ ...(data as object), index: rowIndex } as CustomScope}
+        >
+          {EnsembleRuntime.render([children[columnIndex]])}
+        </CustomScopeProvider>
+      );
+    }
 
-  if (isObject(itemTemplate) && !isEmpty(namedData)) {
-    return (
-      <CustomScopeProvider
-        value={
-          {
-            ...namedData[columnIndex],
-            index: rowIndex,
-          } as CustomScope
-        }
-      >
-        {EnsembleRuntime.render([itemTemplate.template])}
-      </CustomScopeProvider>
-    );
-  }
+    if (isObject(itemTemplate) && !isEmpty(namedData)) {
+      return (
+        <CustomScopeProvider
+          value={
+            {
+              ...namedData[columnIndex],
+              index: rowIndex,
+            } as CustomScope
+          }
+        >
+          {EnsembleRuntime.render([itemTemplate.template])}
+        </CustomScopeProvider>
+      );
+    }
 
-  return null;
-};
+    return null;
+  },
+);
+
+DataCell.displayName = "DataCell";

packages/runtime/src/widgets/DataGrid/DataGrid.tsx

@@ -1,5 +1,6 @@
 import { Table, type TableProps } from "antd";
 import type { SorterResult } from "antd/es/table/interface";
+import isEqual from "react-fast-compare";
 import {
   Resizable,
   type ResizableProps,
@@ -547,6 +548,7 @@ export const DataGrid: React.FC<GridProps> = (props) => {
                     />
                   );
                 }}
+                shouldCellUpdate={(record, prev) => !isEqual(record, prev)}
                 sorter={
                   col.sort?.compareFn
                     ? (a, b): number =>

packages/runtime/src/widgets/PopupMenu.tsx

@@ -199,7 +199,8 @@ export const PopupMenu: React.FC<PopupMenuProps> = ({
         }}
         trigger={[values?.trigger || DEFAULT_POPUPMENU_TRIGGER]}
       >
-        <div>{widgetToRender}</div>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        <div onClick={(e) => e.stopPropagation()}>{widgetToRender}</div>
       </AntdDropdown>
     </div>
   );