feat: Use useWidget hook to load widgets

plugins/manifest.json

@@ -2,23 +2,23 @@
   "plugins": [
     {
       "name": "matplotlib",
-      "version": "0.1.0",
+      "version": "0.0.0",
       "main": "src/js/dist/index.js"
     },
     {
       "name": "plotly-express",
-      "version": "0.1.0",
+      "version": "0.0.0",
       "main": "src/js/dist/bundle/index.js"
     },
     {
       "name": "auth-keycloak",
-      "version": "0.1.0",
+      "version": "0.0.0",
       "main": "src/js/dist/index.js"
     },
-    { "name": "ui", "version": "0.1.0", "main": "src/js/dist/index.js" },
+    { "name": "ui", "version": "0.0.0", "main": "src/js/dist/index.js" },
     {
       "name": "example-theme",
-      "version": "0.1.0",
+      "version": "0.0.0",
       "main": "src/js/dist/index.js"
     }
   ]

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

@@ -14,18 +14,14 @@ import {
   useDashboardPanel,
 } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
-import {
-  DeferredApiBootstrap,
-  useObjectFetcher,
-} from '@deephaven/jsapi-bootstrap';
+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,
-  WidgetFetch,
   WidgetId,
 } from './widget/WidgetTypes';
 import PortalPanel from './layout/PortalPanel';
@@ -54,9 +50,6 @@ interface DashboardPluginData {
 }
 
 interface WidgetWrapper {
-  /** Function to fetch the widget instance from the server */
-  fetch: WidgetFetch;
-
   /** ID of this widget */
   id: WidgetId;
 
@@ -77,20 +70,16 @@ export function DashboardPlugin(
   ) as unknown as [DashboardPluginData, (data: DashboardPluginData) => void];
   const [initialPluginData] = useState(pluginData);
 
-  const objectFetcher = useObjectFetcher();
-
   // Keep track of the widgets we've got opened.
   const [widgetMap, setWidgetMap] = useState<
     ReadonlyMap<WidgetId, WidgetWrapper>
   >(new Map());
 
   const handleWidgetOpen = useCallback(
     ({
-      fetch,
       widgetId = shortid.generate(),
       widget,
     }: {
-      fetch: () => Promise<dh.Widget>;
       widgetId: string;
       widget: WidgetDescriptor;
     }) => {
@@ -99,7 +88,6 @@ export function DashboardPlugin(
         const newWidgetMap = new Map(prevWidgetMap);
         const oldWidget = newWidgetMap.get(widgetId);
         newWidgetMap.set(widgetId, {
-          fetch,
           id: widgetId,
           widget,
           data: getPreservedData(oldWidget?.data),
@@ -131,16 +119,14 @@ export function DashboardPlugin(
 
   const handlePanelOpen = useCallback(
     ({
-      fetch,
       panelId: widgetId = shortid.generate(),
       widget,
     }: PanelOpenEventDetail<dh.Widget>) => {
       const { type } = widget;
 
       switch (type) {
         case NAME_ELEMENT: {
-          const widgetFetch = fetch ?? (() => objectFetcher(widget));
-          handleWidgetOpen({ fetch: widgetFetch, widgetId, widget });
+          handleWidgetOpen({ widgetId, widget });
           break;
         }
         case DASHBOARD_ELEMENT: {
@@ -152,7 +138,7 @@ export function DashboardPlugin(
         }
       }
     },
-    [handleDashboardOpen, handleWidgetOpen, objectFetcher]
+    [handleDashboardOpen, handleWidgetOpen]
   );
 
   useEffect(
@@ -171,7 +157,6 @@ export function DashboardPlugin(
           Object.entries(openWidgets).forEach(
             ([widgetId, { descriptor, data }]) => {
               newWidgetMap.set(widgetId, {
-                fetch: () => objectFetcher(descriptor),
                 id: widgetId,
                 widget: descriptor,
                 data,
@@ -182,7 +167,7 @@ export function DashboardPlugin(
         return newWidgetMap;
       });
     },
-    [objectFetcher, initialPluginData, id]
+    [initialPluginData, id]
   );
 
   const handlePanelClose = useCallback(
@@ -295,10 +280,9 @@ export function DashboardPlugin(
         >
           <DeferredApiBootstrap widget={wrapper.widget}>
             <DashboardWidgetHandler
-              widget={wrapper.widget}
+              widgetDescriptor={wrapper.widget}
               id={wrapper.id}
               initialData={wrapper.data}
-              fetch={wrapper.fetch}
               onDataChange={handleWidgetDataChange}
               onClose={handleWidgetClose}
             />

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

@@ -2,27 +2,17 @@
  * Handles document events for one widget.
  */
 import React, { useCallback } from 'react';
-import { WidgetDescriptor } from '@deephaven/dashboard';
-import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
-import { ReadonlyWidgetData, WidgetDataUpdate, WidgetId } from './WidgetTypes';
-import WidgetHandler from './WidgetHandler';
+import { WidgetDataUpdate, WidgetId } from './WidgetTypes';
+import WidgetHandler, { WidgetHandlerProps } from './WidgetHandler';
 
 const log = Log.module('@deephaven/js-plugin-ui/DashboardWidgetHandler');
 
-export interface DashboardWidgetHandlerProps {
+export interface DashboardWidgetHandlerProps
+  extends Omit<WidgetHandlerProps, 'onClose' | 'onDataChange'> {
   /** ID of this widget instance */
   id: WidgetId;
 
-  /** Widget for this to handle */
-  widget: WidgetDescriptor;
-
-  /** Fetch the widget instance */
-  fetch: () => Promise<dh.Widget>;
-
-  /** Widget data to display */
-  initialData?: ReadonlyWidgetData;
-
   /** Triggered when all panels opened from this widget have closed */
   onClose?: (widgetId: WidgetId) => void;