feat: Add LayoutManagerContext and useLayoutManager (#1625)

- Each dashboard provides the `LayoutManagerContext`

packages/app-utils/package.json

@@ -32,6 +32,7 @@
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
+    "@deephaven/dashboard": "file:../dashboard",
     "@deephaven/icons": "file:../icons",
     "@deephaven/iris-grid": "file:../iris-grid",
     "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",

packages/app-utils/src/plugins/remote-component.config.ts

@@ -12,6 +12,7 @@ import * as AdobeReactSpectrum from '@adobe/react-spectrum';
 import * as DeephavenAuthPlugins from '@deephaven/auth-plugins';
 import * as DeephavenChart from '@deephaven/chart';
 import * as DeephavenComponents from '@deephaven/components';
+import * as DeephavenDashboard from '@deephaven/dashboard';
 import * as DeephavenIcons from '@deephaven/icons';
 import * as DeephavenIrisGrid from '@deephaven/iris-grid';
 import * as DeephavenJsapiBootstrap from '@deephaven/jsapi-bootstrap';
@@ -30,6 +31,7 @@ export const resolve = {
   '@deephaven/auth-plugins': DeephavenAuthPlugins,
   '@deephaven/chart': DeephavenChart,
   '@deephaven/components': DeephavenComponents,
+  '@deephaven/dashboard': DeephavenDashboard,
   '@deephaven/icons': DeephavenIcons,
   '@deephaven/iris-grid': DeephavenIrisGrid,
   '@deephaven/jsapi-bootstrap': DeephavenJsapiBootstrap,

packages/app-utils/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../auth-plugins" },
     { "path": "../chart" },
     { "path": "../components" },
+    { "path": "../dashboard" },
     { "path": "../iris-grid" },
     { "path": "../jsapi-bootstrap" },
     { "path": "../jsapi-components" },

packages/dashboard/src/Dashboard.tsx

@@ -20,6 +20,7 @@ import {
   PanelProps,
 } from './DashboardPlugin';
 import './Dashboard.scss';
+import { LayoutManagerContext } from './layout';
 
 const RESIZE_THROTTLE = 100;
 
@@ -136,19 +137,21 @@ export function Dashboard({
     <div className="dashboard-container w-100 h-100">
       <div className="w-100 h-100" ref={layoutElement} />
       {isInitialized && layout && (
-        <DashboardLayout
-          emptyDashboard={emptyDashboard}
-          id={id}
-          layout={layout}
-          layoutConfig={layoutConfig}
-          onLayoutChange={onLayoutConfigChange}
-          onLayoutInitialized={onLayoutInitialized}
-          hydrate={hydrate}
-          dehydrate={dehydrate}
-          panelWrapper={panelWrapper}
-        >
-          {children}
-        </DashboardLayout>
+        <LayoutManagerContext.Provider value={layout}>
+          <DashboardLayout
+            emptyDashboard={emptyDashboard}
+            id={id}
+            layout={layout}
+            layoutConfig={layoutConfig}
+            onLayoutChange={onLayoutConfigChange}
+            onLayoutInitialized={onLayoutInitialized}
+            hydrate={hydrate}
+            dehydrate={dehydrate}
+            panelWrapper={panelWrapper}
+          >
+            {children}
+          </DashboardLayout>
+        </LayoutManagerContext.Provider>
       )}
     </div>
   );

packages/dashboard/src/layout/LayoutManagerContext.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import GoldenLayout from '@deephaven/golden-layout';
+
+export const LayoutManagerContext: React.Context<GoldenLayout | undefined> =
+  React.createContext<GoldenLayout | undefined>(undefined);
+
+export default LayoutManagerContext;

packages/dashboard/src/layout/index.ts

@@ -1,5 +1,7 @@
+export { default as LayoutManagerContext } from './LayoutManagerContext';
 export { default as LayoutUtils } from './LayoutUtils';
 export { default as GLPropTypes } from './GLPropTypes';
 export { default as useDashboardPanel } from './useDashboardPanel';
+export { default as useLayoutManager } from './useLayoutManager';
 export { default as useListener } from './useListener';
 export { default as usePanelRegistration } from './usePanelRegistration';

packages/dashboard/src/layout/useLayoutManager.ts

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import LayoutManager from '@deephaven/golden-layout';
+import LayoutManagerContext from './LayoutManagerContext';
+
+/**
+ * Retrieve the current LayoutManager from the context
+ */
+function useLayoutManager(): LayoutManager {
+  const layoutManager = useContext(LayoutManagerContext);
+  if (layoutManager == null) {
+    throw new Error(
+      'LayoutManager not available, did you add a LayoutManagerContext.Provider to the tree?'
+    );
+  }
+  return layoutManager;
+}
+
+export default useLayoutManager;

packages/iris-grid/src/TreeTableViewportUpdater.tsx

@@ -7,6 +7,7 @@ import type {
   RemoverFn,
   Sort,
   Table,
+  ViewportData,
 } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 
@@ -22,7 +23,7 @@ interface TreeTableViewportUpdaterProps {
   filters: FilterCondition[];
   sorts: Sort[];
   updateInterval: number;
-  onViewportUpdate: EventListener;
+  onViewportUpdate: EventListener<ViewportData>;
 }
 
 /**

packages/jsapi-components/src/useTableListener.ts

@@ -4,10 +4,10 @@ import Log from '@deephaven/log';
 
 const log = Log.module('useTableListener');
 
-export const useTableListener = (
+export const useTableListener = <T = unknown>(
   eventEmitter: Evented | undefined | null,
   eventName: string,
-  callback: EventListener
+  callback: EventListener<T>
 ): void =>
   useEffect(
     function initEventEmitter() {

packages/jsapi-types/src/dh.types.ts

@@ -83,20 +83,6 @@ export interface VariableDefinition<T extends string = string> {
   id?: string;
 }
 
-export interface JsWidget extends Evented {
-  getDataAsBase64: () => string;
-  getDataAsU8: () => Uint8Array;
-  getDataAsString: () => string;
-  exportedObjects: {
-    fetch: () => Promise<Table | Figure | TreeTable | JsWidget>;
-  }[];
-  sendMessage: (
-    message: string | ArrayBuffer | ArrayBufferView,
-    references?: unknown[]
-  ) => void;
-  close: () => void;
-}
-
 export interface LogItem {
   micros: number;
   logLevel: string;
@@ -212,14 +198,20 @@ export interface IdeSession extends Evented {
 }
 
 export interface Evented {
-  addEventListener: (eventType: string, listener: EventListener) => RemoverFn;
+  addEventListener: <T>(
+    eventType: string,
+    listener: EventListener<T>
+  ) => RemoverFn;
   nextEvent: (
     eventType: string,
     timeoutInMillis?: number
   ) => Promise<CustomEvent>;
 
   hasListeners: (eventType: string) => boolean;
-  removeEventListener: (eventType: string, listener: EventListener) => boolean;
+  removeEventListener: <T>(
+    eventType: string,
+    listener: EventListener<T>
+  ) => boolean;
 }
 
 export interface Plot {
@@ -245,8 +237,8 @@ export interface RemoverFn {
   (): void;
 }
 
-export interface EventListener {
-  (event: CustomEvent): void;
+export interface EventListener<T> {
+  (event: CustomEvent<T>): void;
 }
 
 export interface FigureDescriptor {
@@ -359,18 +351,18 @@ export type WidgetExportedObject = {
   close: () => void;
 };
 
-export interface Widget {
+export interface Widget extends Evented {
   readonly EVENT_MESSAGE: string;
 
-  addEventListener: (
-    type: string,
-    listener: (event: unknown) => void
-  ) => () => void;
   getDataAsBase64: () => string;
   getDataAsString: () => string;
   getDataAsU8: () => Uint8Array;
-  sendMessage: (message: string, references?: never[]) => void;
+  sendMessage: (
+    message: string | ArrayBuffer | ArrayBufferView,
+    references?: never[]
+  ) => void;
   exportedObjects: WidgetExportedObject[];
+  close: () => void;
 }
 
 export interface FigureDataUpdatedEvent {

packages/plugin/src/PluginTypes.ts

@@ -1,5 +1,5 @@
 import type { BaseThemeType } from '@deephaven/components';
-import { type JsWidget } from '@deephaven/jsapi-types';
+import { type Widget } from '@deephaven/jsapi-types';
 import {
   type EventEmitter,
   type ItemContainer,
@@ -105,7 +105,7 @@ export function isDashboardPlugin(
 }
 
 export interface WidgetComponentProps {
-  fetch: () => Promise<JsWidget>;
+  fetch: () => Promise<Widget>;
   metadata?: {
     id?: string;
     name?: string;