feat: ui.fragment, ui.tabs, ui.tab_list, ui.tab_panels

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -1,7 +1,6 @@
 from .icon import icon
 from .make_component import make_component as component
 from .fragment import fragment
-from .object_view import object_view
 from .panel import panel
 from .spectrum import *
 from .table import table
@@ -27,7 +26,6 @@
     "html",
     "number_field",
     "item",
-    "object_view",
     "panel",
     "range_slider",
     "slider",

plugins/ui/src/deephaven/ui/components/spectrum/basic.py

@@ -17,7 +17,7 @@ def action_button(*children, **props):
     return spectrum_element("ActionButton", *children, **props)
 
 
-def button(*children, **props):
+def button(*children, **props: int):
     """
     Python implementation for the Adobe React Spectrum Button component.
     https://react-spectrum.adobe.com/react-spectrum/Button.html

plugins/ui/src/js/src/DocumentUtils.tsx

@@ -10,6 +10,7 @@ import { MixedPanelsError, NoChildrenError } from './errors';
  *
  *
  * @param children Root children of the document.
+ * @param definition Definition of the widget used to create this document. Used for titling panels if necessary.
  */
 export function getRootChildren(
   children: React.ReactNode,
@@ -20,14 +21,13 @@ export function getRootChildren(
   }
 
   const childrenArray = Array.isArray(children) ? children : [children];
-  const childPanelCount = childrenArray.filter(
-    child => child?.type === ReactPanel
-  ).length;
-
   if (childrenArray.length === 0) {
     throw new NoChildrenError('No children to render');
   }
-  if (childPanelCount !== 0 && childPanelCount !== childrenArray.length) {
+  const childPanelCount = childrenArray.filter(
+    child => child?.type === ReactPanel
+  ).length;
+  if (childPanelCount > 0 && childPanelCount !== childrenArray.length) {
     throw new MixedPanelsError('Cannot mix panel and non-panel elements');
   }
 

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

@@ -1,5 +1,4 @@
 import type { WidgetExportedObject } from '@deephaven/jsapi-types';
-import { ReactNode } from 'react';
 
 export const CALLABLE_KEY = '__dhCbid';
 export const OBJECT_KEY = '__dhObid';
@@ -36,9 +35,7 @@ export type ElementNodeWithChildren<
   K extends string = string,
   P extends Record<string, unknown> = Record<string, unknown>
 > = ElementNode<K, P> & {
-  props: P & {
-    children: ReactNode;
-  };
+  props: React.PropsWithChildren<P>;
 };
 
 export function isObjectNode(obj: unknown): obj is ObjectNode {

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

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
 import Log from '@deephaven/log';
 import { isWidgetPlugin, usePlugins } from '@deephaven/plugin';
-import type { Widget } from '@deephaven/jsapi-types';
-import { ObjectViewProps } from './ObjectUtils';
+import type { Widget, WidgetExportedObject } from '@deephaven/jsapi-types';
 
 const log = Log.module('@deephaven/js-plugin-ui/ObjectView');
 
+export type ObjectViewProps = { object: WidgetExportedObject };
 function ObjectView(props: ObjectViewProps) {
   const { object } = props;
   log.info('Object is', object);

plugins/ui/src/js/src/UITableUtils.tsx

@@ -14,9 +14,9 @@ export interface UITableProps {
   [key: string]: unknown;
 }
 
-export type UITableNode = ElementNode<UITableElementName> & {
-  props: UITableProps;
-};
+export type UITableNode = Required<
+  ElementNode<UITableElementName, UITableProps>
+>;
 
 export function isUITable(obj: unknown): obj is UITableNode {
   return (

plugins/ui/src/js/src/WidgetUtils.tsx

@@ -17,7 +17,6 @@ import UITable from './UITable';
 import { isPanelElementNode } from './PanelUtils';
 import ReactPanel from './ReactPanel';
 import ObjectView from './ObjectView';
-import { isObjectElementNode } from './ObjectUtils';
 
 export function getComponentForElement(element: ElementNode): React.ReactNode {
   // Need to convert the children of the element if they are exported objects to an ObjectView
@@ -26,9 +25,14 @@ export function getComponentForElement(element: ElementNode): React.ReactNode {
   if (newElement.props?.children != null) {
     const { children } = newElement.props;
     if (Array.isArray(children)) {
+      const typeMap = new Map<string, number>();
       newElement.props.children = children.map((child, i) => {
         if (isExportedObject(child)) {
-          return <ObjectView key={child.type} object={child} />;
+          const { type } = child;
+          const typeCount = typeMap.get(type) ?? 0;
+          typeMap.set(type, typeCount + 1);
+          const key = `${type}-${typeCount}`;
+          return <ObjectView key={key} object={child} />;
         }
         return child;
       });
@@ -51,9 +55,6 @@ export function getComponentForElement(element: ElementNode): React.ReactNode {
   if (isPanelElementNode(newElement)) {
     return <ReactPanel {...newElement.props} />;
   }
-  if (isObjectElementNode(newElement)) {
-    return <ObjectView object={newElement.props?.object} />;
-  }
   if (isFragmentElementNode(newElement)) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <>{newElement.props?.children}</>;

plugins/ui/src/js/src/spectrum/mapSpectrumProps.ts

@@ -2,8 +2,8 @@ import { PropsWithChildren } from 'react';
 import mapSpectrumChildren from './mapSpectrumChildren';
 
 /**
- * Map the children of an element to Spectrum children, automatically wrapping strings and numbers in `Text` elements.
- * @param children Children to map as spectrum children
+ * Map the props of an element to Spectrum props, automatically wrapping children strings and numbers in `Text` elements.
+ * @param props Props to map as spectrum props
  */
 export function mapSpectrumProps<
   T extends PropsWithChildren<Record<string, unknown>>

plugins/ui/src/js/src/styles.scss

@@ -11,6 +11,5 @@
   display: contents;
   flex-grow: 1;
   flex-shrink: 1;
-  overflow: hidden;
   position: relative;
 }