From dcbc8d6c6464277b3972d9350b1864299efb9af2 Mon Sep 17 00:00:00 2001 From: mikebender Date: Mon, 6 Nov 2023 13:35:23 -0500 Subject: [PATCH 1/7] feat: Add `LayoutContext` and `useLayout` - Each dashboard provied the LayoutContext --- packages/dashboard/src/Dashboard.tsx | 29 ++++++++++--------- .../dashboard/src/layout/LayoutContext.ts | 7 +++++ packages/dashboard/src/layout/index.ts | 2 ++ packages/dashboard/src/layout/useLayout.ts | 18 ++++++++++++ 4 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 packages/dashboard/src/layout/LayoutContext.ts create mode 100644 packages/dashboard/src/layout/useLayout.ts diff --git a/packages/dashboard/src/Dashboard.tsx b/packages/dashboard/src/Dashboard.tsx index fac13fa14d..cb808e02b7 100644 --- a/packages/dashboard/src/Dashboard.tsx +++ b/packages/dashboard/src/Dashboard.tsx @@ -20,6 +20,7 @@ import { PanelProps, } from './DashboardPlugin'; import './Dashboard.scss'; +import { LayoutContext } from './layout'; const RESIZE_THROTTLE = 100; @@ -136,19 +137,21 @@ export function Dashboard({
{isInitialized && layout && ( - - {children} - + + + {children} + + )}
); diff --git a/packages/dashboard/src/layout/LayoutContext.ts b/packages/dashboard/src/layout/LayoutContext.ts new file mode 100644 index 0000000000..90218799d5 --- /dev/null +++ b/packages/dashboard/src/layout/LayoutContext.ts @@ -0,0 +1,7 @@ +import React from 'react'; +import GoldenLayout from '@deephaven/golden-layout'; + +export const LayoutContext: React.Context = + React.createContext(undefined); + +export default LayoutContext; diff --git a/packages/dashboard/src/layout/index.ts b/packages/dashboard/src/layout/index.ts index 93772356fb..f682f3357f 100644 --- a/packages/dashboard/src/layout/index.ts +++ b/packages/dashboard/src/layout/index.ts @@ -1,5 +1,7 @@ +export { default as LayoutContext } from './LayoutContext'; export { default as LayoutUtils } from './LayoutUtils'; export { default as GLPropTypes } from './GLPropTypes'; export { default as useDashboardPanel } from './useDashboardPanel'; +export { default as useLayout } from './useLayout'; export { default as useListener } from './useListener'; export { default as usePanelRegistration } from './usePanelRegistration'; diff --git a/packages/dashboard/src/layout/useLayout.ts b/packages/dashboard/src/layout/useLayout.ts new file mode 100644 index 0000000000..45fd936145 --- /dev/null +++ b/packages/dashboard/src/layout/useLayout.ts @@ -0,0 +1,18 @@ +import { useContext } from 'react'; +import GoldenLayout from '@deephaven/golden-layout'; +import LayoutContext from './LayoutContext'; + +/** + * Retrieve the current layout from the context + */ +function useLayout(): GoldenLayout { + const layout = useContext(LayoutContext); + if (layout == null) { + throw new Error( + 'Layout not available, did you add a LayoutContext.Provider to the tree?' + ); + } + return layout; +} + +export default useLayout; From 7c7c728868d8f3fbea012363b9dd7c27fbd67661 Mon Sep 17 00:00:00 2001 From: mikebender Date: Tue, 7 Nov 2023 16:18:50 -0500 Subject: [PATCH 2/7] Rename useLayout to useLayoutManager --- packages/dashboard/src/layout/index.ts | 2 +- .../src/layout/{useLayout.ts => useLayoutManager.ts} | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/dashboard/src/layout/{useLayout.ts => useLayoutManager.ts} (83%) diff --git a/packages/dashboard/src/layout/index.ts b/packages/dashboard/src/layout/index.ts index f682f3357f..7c4fb73046 100644 --- a/packages/dashboard/src/layout/index.ts +++ b/packages/dashboard/src/layout/index.ts @@ -2,6 +2,6 @@ export { default as LayoutContext } from './LayoutContext'; export { default as LayoutUtils } from './LayoutUtils'; export { default as GLPropTypes } from './GLPropTypes'; export { default as useDashboardPanel } from './useDashboardPanel'; -export { default as useLayout } from './useLayout'; +export { default as useLayoutManager } from './useLayoutManager'; export { default as useListener } from './useListener'; export { default as usePanelRegistration } from './usePanelRegistration'; diff --git a/packages/dashboard/src/layout/useLayout.ts b/packages/dashboard/src/layout/useLayoutManager.ts similarity index 83% rename from packages/dashboard/src/layout/useLayout.ts rename to packages/dashboard/src/layout/useLayoutManager.ts index 45fd936145..cc663f3c7d 100644 --- a/packages/dashboard/src/layout/useLayout.ts +++ b/packages/dashboard/src/layout/useLayoutManager.ts @@ -5,7 +5,7 @@ import LayoutContext from './LayoutContext'; /** * Retrieve the current layout from the context */ -function useLayout(): GoldenLayout { +function useLayoutManager(): GoldenLayout { const layout = useContext(LayoutContext); if (layout == null) { throw new Error( @@ -15,4 +15,4 @@ function useLayout(): GoldenLayout { return layout; } -export default useLayout; +export default useLayoutManager; From fb51614976407bd11ee89a1f62bd7837b7627768 Mon Sep 17 00:00:00 2001 From: mikebender Date: Tue, 7 Nov 2023 17:44:29 -0500 Subject: [PATCH 3/7] Rename LayoutContext => LayoutManagerContext --- packages/dashboard/src/Dashboard.tsx | 6 +++--- .../{LayoutContext.ts => LayoutManagerContext.ts} | 4 ++-- packages/dashboard/src/layout/index.ts | 2 +- packages/dashboard/src/layout/useLayoutManager.ts | 12 ++++++------ 4 files changed, 12 insertions(+), 12 deletions(-) rename packages/dashboard/src/layout/{LayoutContext.ts => LayoutManagerContext.ts} (55%) diff --git a/packages/dashboard/src/Dashboard.tsx b/packages/dashboard/src/Dashboard.tsx index cb808e02b7..2daea39be2 100644 --- a/packages/dashboard/src/Dashboard.tsx +++ b/packages/dashboard/src/Dashboard.tsx @@ -20,7 +20,7 @@ import { PanelProps, } from './DashboardPlugin'; import './Dashboard.scss'; -import { LayoutContext } from './layout'; +import { LayoutManagerContext } from './layout'; const RESIZE_THROTTLE = 100; @@ -137,7 +137,7 @@ export function Dashboard({
{isInitialized && layout && ( - + {children} - + )}
); diff --git a/packages/dashboard/src/layout/LayoutContext.ts b/packages/dashboard/src/layout/LayoutManagerContext.ts similarity index 55% rename from packages/dashboard/src/layout/LayoutContext.ts rename to packages/dashboard/src/layout/LayoutManagerContext.ts index 90218799d5..b1804dadfb 100644 --- a/packages/dashboard/src/layout/LayoutContext.ts +++ b/packages/dashboard/src/layout/LayoutManagerContext.ts @@ -1,7 +1,7 @@ import React from 'react'; import GoldenLayout from '@deephaven/golden-layout'; -export const LayoutContext: React.Context = +export const LayoutManagerContext: React.Context = React.createContext(undefined); -export default LayoutContext; +export default LayoutManagerContext; diff --git a/packages/dashboard/src/layout/index.ts b/packages/dashboard/src/layout/index.ts index 7c4fb73046..c4971d1b2d 100644 --- a/packages/dashboard/src/layout/index.ts +++ b/packages/dashboard/src/layout/index.ts @@ -1,4 +1,4 @@ -export { default as LayoutContext } from './LayoutContext'; +export { default as LayoutManagerContext } from './LayoutManagerContext'; export { default as LayoutUtils } from './LayoutUtils'; export { default as GLPropTypes } from './GLPropTypes'; export { default as useDashboardPanel } from './useDashboardPanel'; diff --git a/packages/dashboard/src/layout/useLayoutManager.ts b/packages/dashboard/src/layout/useLayoutManager.ts index cc663f3c7d..f441d30b14 100644 --- a/packages/dashboard/src/layout/useLayoutManager.ts +++ b/packages/dashboard/src/layout/useLayoutManager.ts @@ -1,15 +1,15 @@ import { useContext } from 'react'; -import GoldenLayout from '@deephaven/golden-layout'; -import LayoutContext from './LayoutContext'; +import LayoutManager from '@deephaven/golden-layout'; +import LayoutManagerContext from './LayoutManagerContext'; /** - * Retrieve the current layout from the context + * Retrieve the current LayoutManager from the context */ -function useLayoutManager(): GoldenLayout { - const layout = useContext(LayoutContext); +function useLayoutManager(): LayoutManager { + const layout = useContext(LayoutManagerContext); if (layout == null) { throw new Error( - 'Layout not available, did you add a LayoutContext.Provider to the tree?' + 'Layout not available, did you add a LayoutManagerContext.Provider to the tree?' ); } return layout; From f8c322d101b3eeaaf2c9675bd312ba1c2d9ebd41 Mon Sep 17 00:00:00 2001 From: mikebender Date: Wed, 8 Nov 2023 11:38:42 -0500 Subject: [PATCH 4/7] Externalize @deephaven/dashboard - So that plugins can use the same LayoutManagerContext --- package-lock.json | 2 ++ packages/app-utils/package.json | 1 + packages/app-utils/src/plugins/remote-component.config.ts | 2 ++ packages/app-utils/tsconfig.json | 1 + 4 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1370bc927c..8e29bc9c7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27950,6 +27950,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", @@ -30096,6 +30097,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", diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json index 8a9892f93a..6204aa7c8b 100644 --- a/packages/app-utils/package.json +++ b/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", diff --git a/packages/app-utils/src/plugins/remote-component.config.ts b/packages/app-utils/src/plugins/remote-component.config.ts index 21dfe9f21f..36e8b7f7bb 100644 --- a/packages/app-utils/src/plugins/remote-component.config.ts +++ b/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, diff --git a/packages/app-utils/tsconfig.json b/packages/app-utils/tsconfig.json index f5e6f5ea9b..5f14608102 100644 --- a/packages/app-utils/tsconfig.json +++ b/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" }, From 4504a22062c06d7d5df366692b8f9817def80dd9 Mon Sep 17 00:00:00 2001 From: mikebender Date: Wed, 8 Nov 2023 11:39:04 -0500 Subject: [PATCH 5/7] Remove redundant JsWidget interface - JsWidget was redundant of Widget - Combined with the Widget interface and removed the redundant interface --- packages/jsapi-types/src/dh.types.ts | 12 ++++++------ packages/plugin/src/PluginTypes.ts | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/jsapi-types/src/dh.types.ts b/packages/jsapi-types/src/dh.types.ts index 79f227870c..01b072b65f 100644 --- a/packages/jsapi-types/src/dh.types.ts +++ b/packages/jsapi-types/src/dh.types.ts @@ -359,18 +359,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 { diff --git a/packages/plugin/src/PluginTypes.ts b/packages/plugin/src/PluginTypes.ts index 5efae9bab5..eafcf755ed 100644 --- a/packages/plugin/src/PluginTypes.ts +++ b/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; + fetch: () => Promise; metadata?: { id?: string; name?: string; From 5915f1675b9d65a938251ee696cd2a32150c5a00 Mon Sep 17 00:00:00 2001 From: mikebender Date: Wed, 8 Nov 2023 11:57:33 -0500 Subject: [PATCH 6/7] Clean up some duplicated types - JsWidget => Widget - EventListener is now generic and can be typed --- .../src/TreeTableViewportUpdater.tsx | 3 +- .../jsapi-components/src/useTableListener.ts | 4 +-- packages/jsapi-types/src/dh.types.ts | 28 +++++++------------ 3 files changed, 14 insertions(+), 21 deletions(-) diff --git a/packages/iris-grid/src/TreeTableViewportUpdater.tsx b/packages/iris-grid/src/TreeTableViewportUpdater.tsx index 57c5e4701f..85568410f5 100644 --- a/packages/iris-grid/src/TreeTableViewportUpdater.tsx +++ b/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; } /** diff --git a/packages/jsapi-components/src/useTableListener.ts b/packages/jsapi-components/src/useTableListener.ts index ede2302c01..79c7e6f193 100644 --- a/packages/jsapi-components/src/useTableListener.ts +++ b/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 = ( eventEmitter: Evented | undefined | null, eventName: string, - callback: EventListener + callback: EventListener ): void => useEffect( function initEventEmitter() { diff --git a/packages/jsapi-types/src/dh.types.ts b/packages/jsapi-types/src/dh.types.ts index 01b072b65f..ab2318b9a8 100644 --- a/packages/jsapi-types/src/dh.types.ts +++ b/packages/jsapi-types/src/dh.types.ts @@ -83,20 +83,6 @@ export interface VariableDefinition { id?: string; } -export interface JsWidget extends Evented { - getDataAsBase64: () => string; - getDataAsU8: () => Uint8Array; - getDataAsString: () => string; - exportedObjects: { - fetch: () => Promise; - }[]; - 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: ( + eventType: string, + listener: EventListener + ) => RemoverFn; nextEvent: ( eventType: string, timeoutInMillis?: number ) => Promise; hasListeners: (eventType: string) => boolean; - removeEventListener: (eventType: string, listener: EventListener) => boolean; + removeEventListener: ( + eventType: string, + listener: EventListener + ) => boolean; } export interface Plot { @@ -245,8 +237,8 @@ export interface RemoverFn { (): void; } -export interface EventListener { - (event: CustomEvent): void; +export interface EventListener { + (event: CustomEvent): void; } export interface FigureDescriptor { From b21ac6f5e9cfca86cb204c8e80d5dd0295bb3c33 Mon Sep 17 00:00:00 2001 From: mikebender Date: Wed, 8 Nov 2023 12:10:23 -0500 Subject: [PATCH 7/7] Rename variable Layout to LayoutManager --- packages/dashboard/src/layout/useLayoutManager.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/dashboard/src/layout/useLayoutManager.ts b/packages/dashboard/src/layout/useLayoutManager.ts index f441d30b14..764cc3ee5a 100644 --- a/packages/dashboard/src/layout/useLayoutManager.ts +++ b/packages/dashboard/src/layout/useLayoutManager.ts @@ -6,13 +6,13 @@ import LayoutManagerContext from './LayoutManagerContext'; * Retrieve the current LayoutManager from the context */ function useLayoutManager(): LayoutManager { - const layout = useContext(LayoutManagerContext); - if (layout == null) { + const layoutManager = useContext(LayoutManagerContext); + if (layoutManager == null) { throw new Error( - 'Layout not available, did you add a LayoutManagerContext.Provider to the tree?' + 'LayoutManager not available, did you add a LayoutManagerContext.Provider to the tree?' ); } - return layout; + return layoutManager; } export default useLayoutManager;