Improve grid rendering at large volumes (#983)

Author: evshi

.changeset/neat-ads-eat.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-runtime": patch
+---
+
+Improve grid rendering at large volumes

packages/framework/src/evaluate/context.ts

@@ -1,4 +1,4 @@
-import { mapKeys, merge, keys } from "lodash-es";
+import { mapKeys, keys } from "lodash-es";
 import type { EnsembleContext, EnsembleInterface } from "../shared/ensemble";
 import type {
   ApplicationContextDefinition,
@@ -29,22 +29,20 @@ export const createEvaluationContext = ({
   context,
 }: EvaluationContextProps): EnsembleContext => {
   const theme = applicationContext.selectedTheme;
-  const appInputs = merge(
-    {},
-    applicationContext.env,
-    applicationContext.secrets,
-    mapKeys(theme?.Tokens ?? {}, (_, key) => key.toLowerCase()),
-    { styles: theme?.Styles },
-  );
+  const appInputs = {
+    ...applicationContext.env,
+    ...applicationContext.secrets,
+    ...mapKeys(theme?.Tokens ?? {}, (_, key) => key.toLowerCase()),
+    ...{ styles: theme?.Styles },
+  } as Partial<ApplicationContextDefinition>;
 
-  const screenInputs = merge(
-    {},
-    screenContext.inputs,
-    screenContext.widgets
+  const screenInputs = {
+    ...screenContext.inputs,
+    ...(screenContext.widgets
       ? Object.fromEntries(widgetStatesToInvokables(screenContext.widgets))
-      : {},
-    screenContext.data,
-  );
+      : {}),
+    ...screenContext.data,
+  };
 
   const app = {
     languages: applicationContext.application?.languages,
@@ -58,11 +56,12 @@ export const createEvaluationContext = ({
   const env = applicationContext.env;
 
   // FIXME: this requires ensemble interface to be built outside of this function
-  return merge(
-    {},
-    { app, ensemble, env },
-    appInputs,
-    screenInputs,
-    context,
-  ) as EnsembleContext;
+  return {
+    app,
+    ensemble,
+    env,
+    ...appInputs,
+    ...screenInputs,
+    ...context,
+  } as EnsembleContext;
 };

packages/framework/src/hooks/useEvaluate.ts

@@ -6,7 +6,7 @@ import { findExpressions, findHexCodes, findTranslationKeys } from "../shared";
 import { createBindingAtom } from "../evaluate";
 import { useCustomScope } from "./useCustomScope";
 
-export const useEvaluate = <T extends Record<string, unknown>>(
+export const useEvaluate = <T extends { [key: string]: unknown }>(
   values?: T,
   options?: {
     context?: unknown;
@@ -31,7 +31,10 @@ export const useEvaluate = <T extends Record<string, unknown>>(
       expressions.map(([name, expr]) => {
         const valueAtom = createBindingAtom(
           expr,
-          merge({}, customScope, options?.context),
+          {
+            ...customScope,
+            ...(options?.context as { [key: string]: unknown }),
+          },
           options?.debugId,
         );
         return { name, valueAtom };

packages/framework/src/state/application.ts

@@ -8,7 +8,7 @@ export const defaultThemeDefinition = { name: "default" };
 export interface ApplicationContextDefinition {
   application: EnsembleAppModel | null;
   storage: unknown;
-  secrets: unknown;
+  secrets: { [key: string]: unknown };
   env: { [key: string]: unknown };
   auth: unknown;
   user: EnsembleUser | null;

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

@@ -84,7 +84,7 @@ export interface DataGridRowTemplate {
 }
 
 export interface DataGridScrollable {
-  scrollHeight?: string;
+  scrollHeight?: string | number;
   scrollWidth?: string;
 }
 
@@ -109,6 +109,7 @@ export type GridProps = {
   pageSize?: number;
   totalRows?: number;
   curPage?: number;
+  virtual?: boolean;
 } & EnsembleWidgetProps<DataGridStyles>;
 
 function djb2Hash(str: string): number {
@@ -501,6 +502,7 @@ export const DataGrid: React.FC<GridProps> = (props) => {
               ? { display: "none" }
               : undefined),
           }}
+          virtual={values?.virtual}
         >
           {dataColumns.map((col, colIndex) => {
             return (

packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx

@@ -314,8 +314,16 @@ describe("MultiSelect Widget", () => {
 
     // Wait for the combobox to reflect the selected values
     await waitFor(() => {
-      expect(screen.getByText("Option 1")).toBeVisible();
-      expect(screen.getByText("Option 3")).toBeVisible();
+      expect(
+        screen.getByText("Option 1", {
+          selector: ".ant-select-selection-item-content",
+        }),
+      ).toBeVisible();
+      expect(
+        screen.getByText("Option 3", {
+          selector: ".ant-select-selection-item-content",
+        }),
+      ).toBeVisible();
     });
   });