WIP: UI dashboard

Author: mattrunyon

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

@@ -5,6 +5,10 @@
 from .panel import panel
 from .spectrum import *
 from .table import table
+from .row import row
+from .column import column
+from .stack import stack
+from .dashboard import dashboard
 from . import html
 
 
@@ -13,9 +17,11 @@
     "button",
     "button_group",
     "checkbox",
+    "column",
     "component",
     "content",
     "contextual_help",
+    "dashboard",
     "flex",
     "form",
     "fragment",
@@ -30,8 +36,10 @@
     "object_view",
     "panel",
     "range_slider",
+    "row",
     "slider",
     "spectrum_element",
+    "stack",
     "switch",
     "table",
     "tab_list",

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

@@ -0,0 +1,18 @@
+from __future__ import annotations
+
+from typing import Any
+from ..elements import BaseElement
+
+
+def column(*children: Any, width: float | None = None, **kwargs: Any):
+    """
+    A column is a container that can be used to group elements.
+    Each element will be placed below its prior sibling.
+
+    Args:
+        children: Elements to render in the column.
+        width: The percent width of the column relative to other children of its parent. If not provided, the column will be sized automatically.
+    """
+    return BaseElement(
+        "deephaven.ui.components.Column", *children, width=width, **kwargs
+    )

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

@@ -0,0 +1,14 @@
+from __future__ import annotations
+
+from typing import Any
+from ..elements import BaseElement
+
+
+def dashboard(*children: Any, **kwargs: Any):
+    """
+    A dashboard is the container for an entire layout.
+
+    Args:
+        children: Elements to render in the dashboard. Must have only 1 root element.
+    """
+    return BaseElement("deephaven.ui.components.Dashboard", *children, **kwargs)

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

@@ -0,0 +1,18 @@
+from __future__ import annotations
+
+from typing import Any
+from ..elements import BaseElement
+
+
+def row(*children: Any, height: float | None = None, **kwargs: Any):
+    """
+    A row is a container that can be used to group elements.
+    Each element will be placed to the right of its prior sibling.
+
+    Args:
+        children: Elements to render in the row.
+        height: The percent height of the row relative to other children of its parent. If not provided, the row will be sized automatically.
+    """
+    return BaseElement(
+        "deephaven.ui.components.Row", *children, height=height, **kwargs
+    )

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

@@ -0,0 +1,30 @@
+from __future__ import annotations
+
+from typing import Any
+from ..elements import BaseElement
+
+
+def stack(
+    *children: Any,
+    height: float | None = None,
+    width: float | None = None,
+    activeItemIndex: int | None = None,
+    **kwargs: Any,
+):
+    """
+    A stack is a container that can be used to group elements which creates a set of tabs.
+    Each element will get a tab and only one element can be visible at a time.
+
+    Args:
+        children: Elements to render in the row.
+        height: The percent height of the stack relative to other children of its parent. If not provided, the stack will be sized automatically.
+        width: The percent width of the stack relative to other children of its parent. If not provided, the stack will be sized automatically.
+    """
+    return BaseElement(
+        "deephaven.ui.components.Stack",
+        *children,
+        height=height,
+        width=width,
+        activeItemIndex=activeItemIndex,
+        **kwargs,
+    )

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

@@ -3,7 +3,7 @@ import { WidgetDefinition } from '@deephaven/dashboard';
 import { TestUtils } from '@deephaven/utils';
 import { render } from '@testing-library/react';
 import DocumentHandler, { DocumentHandlerProps } from './DocumentHandler';
-import { PANEL_ELEMENT_NAME, ReactPanelProps } from './PanelUtils';
+import { PANEL_ELEMENT_NAME, ReactPanelProps } from './layout/LayoutUtils';
 import { MixedPanelsError, NoChildrenError } from './errors';
 import { getComponentForElement } from './WidgetUtils';
 

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

@@ -31,17 +31,17 @@ export function getRootChildren(
     throw new MixedPanelsError('Cannot mix panel and non-panel elements');
   }
 
-  if (childPanelCount === 0) {
-    // Just wrap it in a panel
-    return (
-      <ReactPanel
-        key="root"
-        title={definition.title ?? definition.id ?? definition.type}
-      >
-        {children}
-      </ReactPanel>
-    );
-  }
+  // if (childPanelCount === 0) {
+  //   // Just wrap it in a panel
+  //   return (
+  //     <ReactPanel
+  //       key="root"
+  //       title={definition.title ?? definition.id ?? definition.type}
+  //     >
+  //       {children}
+  //     </ReactPanel>
+  //   );
+  // }
 
   // It's already got panels defined, just return it
   return children;

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';
@@ -32,15 +31,6 @@ export type ElementNode<
   props?: P;
 };
 
-export type ElementNodeWithChildren<
-  K extends string = string,
-  P extends Record<string, unknown> = Record<string, unknown>
-> = ElementNode<K, P> & {
-  props: P & {
-    children: ReactNode;
-  };
-};
-
 export function isObjectNode(obj: unknown): obj is ObjectNode {
   return obj != null && typeof obj === 'object' && OBJECT_KEY in obj;
 }