Update and add tests

Author: mattrunyon

plugins/ui/src/js/src/elements/ObjectView.tsx

@@ -1,17 +1,19 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Log from '@deephaven/log';
 import { isWidgetPlugin, usePlugins } from '@deephaven/plugin';
 import type { dh } from '@deephaven/jsapi-types';
-import { nanoid } from 'nanoid';
 
 const log = Log.module('@deephaven/js-plugin-ui/ObjectView');
 
-export type ObjectViewProps = { object: dh.WidgetExportedObject };
+export type ObjectViewProps = {
+  object: dh.WidgetExportedObject;
+  __dhId?: string;
+};
+
 function ObjectView(props: ObjectViewProps): JSX.Element {
-  const { object } = props;
+  const { object, __dhId } = props;
   log.info('Object is', object);
   const { type } = object;
-  const [__dhId] = useState(() => nanoid());
 
   const fetch = useCallback(async () => {
     // We re-export the object in case this object is used in multiple places or closed/opened multiple times

plugins/ui/src/js/src/elements/UITable/UITable.tsx

@@ -27,7 +27,7 @@ import {
   useTheme,
   viewStyleProps,
 } from '@deephaven/components';
-import { useGlobalFilters } from '@deephaven/dashboard-core-plugins';
+import { useDashboardColumnFilters } from '@deephaven/dashboard-core-plugins';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
@@ -48,7 +48,6 @@ import UITableContextMenuHandler, {
 } from './UITableContextMenuHandler';
 import UITableModel, { makeUiTableModel } from './UITableModel';
 import { UITableLayoutHints } from './JsTableProxy';
-import { nanoid } from 'nanoid';
 
 const log = Log.module('@deephaven/js-plugin-ui/UITable');
 
@@ -148,7 +147,7 @@ function useUITableModel({
   return model;
 }
 
-export function UITableInner({
+export function UITable({
   format_: formatProp = EMPTY_ARRAY as unknown as FormattingRule[],
   onCellPress,
   onCellDoublePress,
@@ -529,7 +528,7 @@ export function UITableInner({
     };
   }, [irisGridServerProps, initialHydratedState]);
 
-  const inputFilters = useGlobalFilters(model?.columns ?? EMPTY_ARRAY);
+  const inputFilters = useDashboardColumnFilters(model?.columns ?? EMPTY_ARRAY);
 
   return model ? (
     <div
@@ -551,9 +550,4 @@ export function UITableInner({
 
 UITable.displayName = 'TableElementView';
 
-export function UITable(props: UITableProps): JSX.Element {
-  const [__dhId] = useState(() => nanoid());
-  return <UITableInner {...props} __dhId={__dhId} />;
-}
-
 export default UITable;

plugins/ui/src/js/src/elements/utils/ElementUtils.test.tsx

@@ -68,32 +68,41 @@ describe('wrapElementChildren', () => {
 
   it.each([
     [
+      'single',
       mock.exportedA1,
-      <ObjectView key={`${mock.exportedA1.type}-0`} object={mock.exportedA1} />,
+      <ObjectView
+        key={`${mock.exportedA1.type}-0`}
+        object={mock.exportedA1}
+        __dhId={`test-root/${mock.exportedA1.type}-0`}
+      />,
     ],
     [
+      'multiple',
       [mock.exportedA1, mock.exportedA2, mock.exportedB1],
       [
         <ObjectView
           key={`${mock.exportedA1.type}-0`}
           object={mock.exportedA1}
+          __dhId={`test-root/${mock.exportedA1.type}-0`}
         />,
         <ObjectView
           key={`${mock.exportedA1.type}-1`}
           object={mock.exportedA1}
+          __dhId={`test-root/${mock.exportedA1.type}-1`}
         />,
         <ObjectView
           key={`${mock.exportedB1.type}-0`}
           object={mock.exportedB1}
+          __dhId={`test-root/${mock.exportedB1.type}-0`}
         />,
       ],
     ],
   ])(
-    'should wrap exported object children in ObjectView: %s, %s',
-    (children, expectedChildren) => {
+    'should wrap exported object children in ObjectView: %s',
+    (testName, children, expectedChildren) => {
       const actual = wrapElementChildren({
         [ELEMENT_KEY]: 'mock.element',
-        props: { children },
+        props: { children, __dhId: 'test-root' },
       });
 
       expect(actual.props?.children).toEqual(expectedChildren);
@@ -119,7 +128,7 @@ describe('wrapElementChildren', () => {
         ],
       ],
     ])(
-      'should wrap primitive item element children in Text elements: %s, %s',
+      'should wrap primitive item element children in Text elements: %s',
       (children, expectedChildren) => {
         const givenProps: Record<string, unknown> = { children };
         if (textValue != null) {

plugins/ui/src/js/src/elements/utils/ElementUtils.tsx

@@ -191,7 +191,15 @@ export function wrapElementChildren(element: ElementNode): ElementNode {
   const wrappedChildren = children.map(child => {
     // Exported objects need to be converted to `ObjectView` to be rendered
     if (isExportedObject(child)) {
-      return <ObjectView key={getChildKey(child.type)} object={child} />;
+      const key = getChildKey(child.type);
+      return (
+        <ObjectView
+          key={key}
+          object={child}
+          // eslint-disable-next-line no-underscore-dangle
+          __dhId={`${element.props?.__dhId}/${key}`}
+        />
+      );
     }
 
     // Auto wrap primitive children of `Item` elements in `Text` elements

plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx

@@ -41,6 +41,7 @@ function DashboardWidgetHandler({
 
   return (
     <WidgetHandler
+      id={id}
       onDataChange={handleDataChange}
       onClose={handleClose}
       // eslint-disable-next-line react/jsx-props-no-spreading

plugins/ui/src/js/src/widget/WidgetHandler.tsx

@@ -58,6 +58,9 @@ export interface WidgetHandlerProps {
   /** Widget for this to handle */
   widgetDescriptor: WidgetDescriptor;
 
+  /** Widget ID maintained by the DashboardPlugin */
+  id: string;
+
   /** Widget data to display */
   initialData?: ReadonlyWidgetData;
 
@@ -73,6 +76,7 @@ function WidgetHandler({
   onDataChange = EMPTY_FUNCTION,
   widgetDescriptor,
   initialData: initialDataProp,
+  id,
 }: WidgetHandlerProps): JSX.Element | null {
   const { widget, error: widgetError } = useWidget(widgetDescriptor);
   const [isLoading, setIsLoading] = useState(true);
@@ -208,49 +212,53 @@ function WidgetHandler({
       // We close those objects that are no longer referenced, as they will never be referenced again.
       const deadObjectMap = new Map(exportedObjectMap.current);
       const deadCallableMap = new Map(renderedCallableMap.current);
-      const hydratedDocument = transformNode(doc, (key, value) => {
-        // Need to re-hydrate any objects that are defined
-        if (isCallableNode(value)) {
-          const callableId = value[CALLABLE_KEY];
-          deadCallableMap.delete(callableId);
-          if (renderedCallableMap.current.has(callableId)) {
-            log.debug2('Reusing callableId', callableId);
-            return renderedCallableMap.current.get(callableId);
+      const hydratedDocument = transformNode(
+        doc,
+        (key, value) => {
+          // Need to re-hydrate any objects that are defined
+          if (isCallableNode(value)) {
+            const callableId = value[CALLABLE_KEY];
+            deadCallableMap.delete(callableId);
+            if (renderedCallableMap.current.has(callableId)) {
+              log.debug2('Reusing callableId', callableId);
+              return renderedCallableMap.current.get(callableId);
+            }
+            log.debug2('Registering callableId', callableId);
+            const callable = wrapCallable(
+              jsonClient,
+              callableId,
+              callableFinalizationRegistry,
+              false
+            );
+            renderedCallableMap.current.set(callableId, callable);
+            return callable;
           }
-          log.debug2('Registering callableId', callableId);
-          const callable = wrapCallable(
-            jsonClient,
-            callableId,
-            callableFinalizationRegistry,
-            false
-          );
-          renderedCallableMap.current.set(callableId, callable);
-          return callable;
-        }
-        if (isObjectNode(value)) {
-          // Replace this node with the exported object
-          const objectKey = value[OBJECT_KEY];
-          const exportedObject = exportedObjectMap.current.get(objectKey);
-          if (exportedObject === undefined) {
-            // The map should always have the exported object for a key, otherwise the protocol is broken
-            throw new Error(`Invalid exported object key ${objectKey}`);
+          if (isObjectNode(value)) {
+            // Replace this node with the exported object
+            const objectKey = value[OBJECT_KEY];
+            const exportedObject = exportedObjectMap.current.get(objectKey);
+            if (exportedObject === undefined) {
+              // The map should always have the exported object for a key, otherwise the protocol is broken
+              throw new Error(`Invalid exported object key ${objectKey}`);
+            }
+            deadObjectMap.delete(objectKey);
+            return exportedObject;
           }
-          deadObjectMap.delete(objectKey);
-          return exportedObject;
-        }
 
-        if (isElementNode(value)) {
-          // Replace the elements node with the Component it maps to
-          try {
-            return getComponentForElement(value);
-          } catch (e) {
-            log.warn('Error getting component for element', e);
-            return value;
+          if (isElementNode(value)) {
+            // Replace the elements node with the Component it maps to
+            try {
+              return getComponentForElement(value);
+            } catch (e) {
+              log.warn('Error getting component for element', e);
+              return value;
+            }
           }
-        }
 
-        return value;
-      });
+          return value;
+        },
+        id
+      );
 
       // Close any objects that are no longer referenced
       deadObjectMap.forEach((deadObject, objectKey) => {
@@ -275,7 +283,13 @@ function WidgetHandler({
       );
       return hydratedDocument;
     },
-    [callableFinalizationRegistry, document, jsonClient, renderEmptyDocument]
+    [
+      callableFinalizationRegistry,
+      document,
+      jsonClient,
+      renderEmptyDocument,
+      id,
+    ]
   );
 
   const updateExportedObjects = useCallback(