Change up how the element type is handled

plugins/ui/src/js/src/DocumentHandler.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WidgetDefinition } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
-import { ElementNode, makeElementKey } from './ElementUtils';
+import { ElementNode, getElementType } from './ElementUtils';
 
 import ReactPanel from './ReactPanel';
 import ElementView from './ElementView';
@@ -24,18 +24,28 @@ function DocumentHandler({ definition, element }: DocumentHandlerProps) {
 
   // Count of each item type to correctly allocate them a key
   const itemTypeCount = new Map<string, number>();
-  return childrenArray.map((child, i) => {
-    const key = makeElementKey(child, itemTypeCount);
-    let title = `${definition.title ?? definition.id ?? definition.type}-${i}`;
-    if (isPanelElementNode(child)) {
-      title = child.props.title ?? title;
-    }
-    return (
-      <ReactPanel title={title} key={key}>
-        <ElementView element={child} />
-      </ReactPanel>
-    );
-  });
+  return (
+    <>
+      {childrenArray.map((child, i) => {
+        const elementType = getElementType(child);
+        const currentCount = itemTypeCount.get(elementType) ?? 0;
+        itemTypeCount.set(elementType, currentCount + 1);
+        const key = `${elementType}-${currentCount}`;
+        let title = `${definition.title ?? definition.id ?? definition.type}`;
+        if (childrenArray.length > 1) {
+          title = `${title} ${i + 1}`;
+        }
+        if (isPanelElementNode(child)) {
+          title = child.props.title ?? title;
+        }
+        return (
+          <ReactPanel title={title} key={key}>
+            <ElementView element={child} />
+          </ReactPanel>
+        );
+      })}
+    </>
+  );
 }
 
 DocumentHandler.displayName = '@deephaven/js-plugin-ui/DocumentHandler';

plugins/ui/src/js/src/ElementUtils.ts

@@ -44,17 +44,10 @@ export type ExportedObject<T = unknown> = {
 };
 
 /**
- * Create a key for an element.
- * @param child Child element
- * @param itemTypeCount Map of item types to counts. Will update the map with this type.
- * @returns A key that can be used for rendering an item.
+ * Gets the type of an element object, or `unknown` if it is not an element.
+ * @param node A node in a document, element or unknown object.
+ * @returns The type of the element
  */
-export function makeElementKey(
-  child: unknown,
-  itemTypeCount: Map<string, number>
-): string {
-  const type = isElementNode(child) ? child[ELEMENT_KEY] : 'unknown';
-  const currentCount = itemTypeCount.get(type) ?? 0;
-  itemTypeCount.set(type, currentCount + 1);
-  return `${type}-${currentCount}`;
+export function getElementType(node: unknown): string {
+  return isElementNode(node) ? node[ELEMENT_KEY] : 'unknown';
 }