feat: DH-21757: WidgetPlugin support in deephaven.ui

- Needs deephaven/web-client-ui#2648
- WidgetPlugin just registers directly
  - Allows for nested ui.resolve deephaven.ui components
- Still maintain DashboardPlugin to handle legacy behaviour
- Works with the ui_home_screen, nested dashboards, etc
- Styling a little bit different (ui.panel is automatically wrapped in a nested dashboard rather than opening up panels in the existing dashboard like before)
- Dashboard now has a `show_headers` option that can be set to False to not show headers on a dashboard. Useful if you're doing a homescreen type dashboard

Author: mofojed

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

@@ -4,15 +4,20 @@
 from ..elements import DashboardElement, FunctionElement
 
 
-def dashboard(element: FunctionElement) -> DashboardElement:
+def dashboard(
+    element: FunctionElement,
+    *,
+    show_headers: bool = True,
+) -> DashboardElement:
     """
     A dashboard is the container for an entire layout.
 
     Args:
         element: Element to render as the dashboard.
                  The element should render a layout that contains 1 root column or row.
+        show_headers: Whether to show headers on the dashboard panels. Defaults to True.
 
     Returns:
         The rendered dashboard.
     """
-    return DashboardElement(element)
+    return DashboardElement(element, show_headers=show_headers)

plugins/ui/src/deephaven/ui/elements/DashboardElement.py

@@ -8,5 +8,14 @@
 
 
 class DashboardElement(BaseElement):
-    def __init__(self, element: FunctionElement):
-        super().__init__("deephaven.ui.components.Dashboard", element)
+    def __init__(
+        self,
+        element: FunctionElement,
+        *,
+        show_headers: bool = True,
+    ):
+        super().__init__(
+            "deephaven.ui.components.Dashboard",
+            element,
+            show_headers=show_headers,
+        )

plugins/ui/src/js/src/DashboardPlugin.tsx

@@ -1,24 +1,19 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { nanoid } from 'nanoid';
 import {
   DashboardPluginComponentProps,
   LayoutManagerContext,
   LayoutUtils,
   PanelEvent,
   useListener,
   useDashboardPluginData,
-  emitCreateDashboard,
   WidgetDescriptor,
-  PanelOpenEventDetail,
   DEFAULT_DASHBOARD_ID,
   useDashboardPanel,
 } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
 import { DeferredApiBootstrap } from '@deephaven/jsapi-bootstrap';
-import { dh } from '@deephaven/jsapi-types';
 import { ErrorBoundary } from '@deephaven/components';
 import { useDebouncedCallback } from '@deephaven/react-hooks';
-import styles from './styles.scss?inline';
 import {
   ReadonlyWidgetData,
   WidgetDataUpdate,
@@ -27,11 +22,6 @@ import {
 import PortalPanel from './layout/PortalPanel';
 import PortalPanelManager from './layout/PortalPanelManager';
 import DashboardWidgetHandler from './widget/DashboardWidgetHandler';
-import {
-  getPreservedData,
-  DASHBOARD_ELEMENT,
-  WIDGET_ELEMENT,
-} from './widget/WidgetUtils';
 import { usePanelId } from './layout/ReactPanelContext';
 
 const PLUGIN_NAME = '@deephaven/js-plugin-ui.DashboardPlugin';
@@ -63,6 +53,13 @@ interface WidgetWrapper {
   data?: ReadonlyWidgetData;
 }
 
+/**
+ * Handle legacy behaviour of an open widget being saved with the dashboard.
+ *
+ * Now UIWidgetPlugin is responsible for opening widgets in the dashboard.
+ * @param props Dashboard plugin props
+ * @returns Dashboard plugin content, which is responsible for handling legacy behaviour of an open widget being saved with the dashboard
+ */
 function InnerDashboardPlugin(
   props: DashboardPluginComponentProps
 ): JSX.Element | null {
@@ -78,66 +75,6 @@ function InnerDashboardPlugin(
     ReadonlyMap<WidgetId, WidgetWrapper>
   >(new Map());
 
-  const handleWidgetOpen = useCallback(
-    ({ widgetId, widget }: { widgetId: string; widget: WidgetDescriptor }) => {
-      log.debug('Opening widget with ID', widgetId, widget);
-      setWidgetMap(prevWidgetMap => {
-        const newWidgetMap = new Map(prevWidgetMap);
-        const oldWidget = newWidgetMap.get(widgetId);
-        newWidgetMap.set(widgetId, {
-          id: widgetId,
-          widget,
-          data: getPreservedData(oldWidget?.data),
-        });
-        return newWidgetMap;
-      });
-    },
-    []
-  );
-
-  const handleDashboardOpen = useCallback(
-    ({
-      widget,
-      dashboardId,
-    }: {
-      widget: WidgetDescriptor;
-      dashboardId: string;
-    }) => {
-      const { name: title } = widget;
-      log.debug('Emitting create dashboard event for', dashboardId, widget);
-      emitCreateDashboard(layout.eventHub, {
-        pluginId: PLUGIN_NAME,
-        title: title ?? 'Untitled',
-        data: { openWidgets: { [dashboardId]: { descriptor: widget } } },
-      });
-    },
-    [layout.eventHub]
-  );
-
-  const handlePanelOpen = useCallback(
-    ({
-      panelId: widgetId = nanoid(),
-      widget,
-    }: PanelOpenEventDetail<dh.Widget>) => {
-      const { type } = widget;
-
-      switch (type) {
-        case WIDGET_ELEMENT: {
-          handleWidgetOpen({ widgetId, widget });
-          break;
-        }
-        case DASHBOARD_ELEMENT: {
-          handleDashboardOpen({ widget, dashboardId: widgetId });
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    },
-    [handleDashboardOpen, handleWidgetOpen]
-  );
-
   useEffect(
     function loadInitialPluginData() {
       if (initialPluginData == null) {
@@ -203,8 +140,6 @@ function InnerDashboardPlugin(
     });
   }, []);
 
-  // TODO: We need to change up the event system for how objects are opened, since in this case it could be opening multiple panels
-  useListener(layout.eventHub, PanelEvent.OPEN, handlePanelOpen);
   useListener(layout.eventHub, PanelEvent.CLOSE, handlePanelClose);
 
   const sendPluginDataUpdate = useCallback(
@@ -282,12 +217,18 @@ function InnerDashboardPlugin(
 
   return (
     <LayoutManagerContext.Provider value={layout}>
-      <style>{styles}</style>
       <PortalPanelManager>{widgetHandlers}</PortalPanelManager>
     </LayoutManagerContext.Provider>
   );
 }
 
+/**
+ * Dashboard plugin that registers the PortalPanel type for deephaven.ui
+ *
+ * It's also responsible for handling legacy behaviour, for old dashboards that may have opened a deephaven.ui widget previously.
+ * @param props Dashboard plugin props
+ * @returns Dashboard plugin
+ */
 export function DashboardPlugin(
   props: DashboardPluginComponentProps
 ): JSX.Element | null {

plugins/ui/src/js/src/UIComponent.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useMemo } from 'react';
+import { UriVariableDescriptor } from '@deephaven/jsapi-bootstrap';
+import type { dh } from '@deephaven/jsapi-types';
+import {
+  usePersistentState,
+  type WidgetComponentProps,
+} from '@deephaven/plugin';
+import { WidgetDescriptor } from '@deephaven/dashboard';
+import { nanoid } from 'nanoid';
+import { WidgetData, WidgetDataUpdate } from './widget/WidgetTypes';
+import WidgetHandler from './widget/WidgetHandler';
+
+type UIComponentProps = WidgetComponentProps<dh.Widget> & {
+  // TODO: We shouldn't need this, should be added to the WidgetComponentProps type
+  metadata?: WidgetDescriptor;
+
+  // Might be loading a URI resolved widget...
+  uri?: UriVariableDescriptor;
+};
+
+export function UIComponent(props: UIComponentProps): JSX.Element | null {
+  const { metadata: widgetDescriptor, uri, __dhId } = props;
+
+  const [widgetData, setWidgetData] = usePersistentState<
+    WidgetData | undefined
+  >(undefined, { type: 'UIComponentWidgetData', version: 1 });
+
+  const id = useMemo(
+    () => __dhId ?? widgetDescriptor?.id ?? nanoid(),
+    [__dhId, widgetDescriptor]
+  );
+
+  const handleDataChange = useCallback(
+    (data: WidgetDataUpdate) => {
+      setWidgetData(oldData => ({ ...oldData, ...data }));
+    },
+    [setWidgetData]
+  );
+
+  const descriptor = uri ?? widgetDescriptor;
+  if (descriptor == null) {
+    throw new Error('No widget descriptor');
+  }
+  return (
+    <WidgetHandler
+      widgetDescriptor={descriptor}
+      initialData={widgetData}
+      onDataChange={handleDataChange}
+      id={id}
+    />
+  );
+}
+
+export default UIComponent;

plugins/ui/src/js/src/UIWidget.tsx

@@ -0,0 +1,22 @@
+import type { dh } from '@deephaven/jsapi-types';
+import { type WidgetComponentProps } from '@deephaven/plugin';
+import { WidgetDescriptor } from '@deephaven/dashboard';
+import UIComponent from './UIComponent';
+import PortalPanel from './layout/PortalPanel';
+
+type UIWidgetProps = WidgetComponentProps<dh.Widget> & {
+  // TODO: We shouldn't need this, should be added to the WidgetComponentProps type
+  metadata?: WidgetDescriptor;
+};
+
+export function UIWidget(props: UIWidgetProps): JSX.Element | null {
+  const { metadata: widgetDescriptor } = props;
+  if (widgetDescriptor?.type === PortalPanel.displayName) {
+    return null;
+  }
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <UIComponent {...props} />;
+}
+
+export default UIWidget;

plugins/ui/src/js/src/UIWidgetPlugin.ts

@@ -0,0 +1,22 @@
+import { type WidgetPlugin, PluginType } from '@deephaven/plugin';
+import { vsGraph } from '@deephaven/icons';
+import type { dh } from '@deephaven/jsapi-types';
+import { DASHBOARD_ELEMENT, WIDGET_ELEMENT } from './widget/WidgetUtils';
+import PortalPanel from './layout/PortalPanel';
+import UIWidget from './UIWidget';
+import styles from './styles.scss?inline';
+
+// We need to inject the styles into the document when we're loaded... we only want to do this once.
+const styleElement = document.createElement('style');
+styleElement.textContent = styles;
+document.head.appendChild(styleElement);
+
+export const UIWidgetPlugin: WidgetPlugin<dh.Widget> = {
+  name: '@deephaven/js-plugin-ui',
+  type: PluginType.WIDGET_PLUGIN,
+  supportedTypes: [WIDGET_ELEMENT, DASHBOARD_ELEMENT, PortalPanel.displayName],
+  component: UIWidget,
+  icon: vsGraph,
+};
+
+export default UIWidgetPlugin;

plugins/ui/src/js/src/index.ts

@@ -1 +1,23 @@
-export * from './DashboardPlugin';
+import { PluginType } from '@deephaven/plugin';
+import { UIWidgetPlugin } from './UIWidgetPlugin';
+import { DashboardPlugin } from './DashboardPlugin';
+
+// TODO: Remove local MultiPlugin type once @deephaven/plugin is updated
+// to include it (see deephaven/web-client-ui composite-plugins branch)
+const MULTI_PLUGIN = 'MultiPlugin' as const;
+
+const UIDashboardPlugin = {
+  name: '@deephaven/js-plugin-ui.DashboardPlugin',
+  type: PluginType.DASHBOARD_PLUGIN as string,
+  component: DashboardPlugin,
+};
+
+const UIMultiPlugin = {
+  name: '@deephaven/js-plugin-ui',
+  type: MULTI_PLUGIN as string,
+  plugins: [UIWidgetPlugin, UIDashboardPlugin],
+};
+
+export { DashboardPlugin };
+
+export default UIMultiPlugin;

plugins/ui/src/js/src/layout/Dashboard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { usePanelId as useLayoutPanelId } from '@deephaven/dashboard';
 import { ElementIdProps, type DashboardElementProps } from './LayoutUtils';
-import { usePanelId } from './ReactPanelContext';
+import { usePanelId as useReactPanelId } from './ReactPanelContext';
 import NestedDashboard from './NestedDashboard';
 import DashboardContent from './DashboardContent';
 
@@ -12,12 +13,14 @@ import DashboardContent from './DashboardContent';
  */
 function Dashboard({
   children,
-  __dhId,
+  ...otherProps
 }: DashboardElementProps & ElementIdProps): JSX.Element | null {
-  const contextPanelId = usePanelId();
-  const isNested = contextPanelId != null;
+  const contextPanelId = useLayoutPanelId();
+  const reactPanelId = useReactPanelId();
+  const isNested = contextPanelId != null || reactPanelId != null;
   if (isNested) {
-    return <NestedDashboard __dhId={__dhId}>{children}</NestedDashboard>;
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <NestedDashboard {...otherProps}>{children}</NestedDashboard>;
   }
 
   return <DashboardContent>{children}</DashboardContent>;