From 94ab25cb16593f175ef4669a6845cdc22b847fc2 Mon Sep 17 00:00:00 2001 From: Mike Bender Date: Tue, 17 Oct 2023 17:49:32 -0400 Subject: [PATCH] feat: web-client-ui changes required for deephaven.ui (#1567) - Add some more shared packages to the `remote-component.config.ts` - Now plugins can externalize these packages in their build process, and share the same instance - Add Chart handling of model update - Add some more externalized packages - Add max-old-space-size flag to embed-chart - Noticed it was missing, and was causing a build issue with these changes --------- Co-authored-by: Matthew Runyon --- package-lock.json | 10 +++++++ packages/app-utils/package.json | 4 +++ .../src/plugins/remote-component.config.ts | 10 ++++++- packages/app-utils/tsconfig.json | 2 ++ packages/chart/src/Chart.tsx | 26 +++++++++++-------- packages/code-studio/package.json | 1 + packages/embed-chart/package.json | 2 +- packages/jsapi-types/src/dh.types.ts | 21 +++++++++++++++ 8 files changed, 63 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5ffb5eae69..9392a357d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27922,8 +27922,12 @@ "version": "0.50.0", "license": "Apache-2.0", "dependencies": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/auth-plugins": "file:../auth-plugins", + "@deephaven/chart": "file:../chart", "@deephaven/components": "file:../components", + "@deephaven/icons": "file:../icons", + "@deephaven/iris-grid": "file:../iris-grid", "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap", "@deephaven/jsapi-components": "file:../jsapi-components", "@deephaven/jsapi-types": "file:../jsapi-types", @@ -28075,6 +28079,7 @@ "version": "0.50.0", "license": "Apache-2.0", "dependencies": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/app-utils": "file:../app-utils", "@deephaven/auth-plugins": "file:../auth-plugins", "@deephaven/chart": "file:../chart", @@ -30029,8 +30034,12 @@ "@deephaven/app-utils": { "version": "file:packages/app-utils", "requires": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/auth-plugins": "file:../auth-plugins", + "@deephaven/chart": "file:../chart", "@deephaven/components": "file:../components", + "@deephaven/icons": "file:../icons", + "@deephaven/iris-grid": "file:../iris-grid", "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap", "@deephaven/jsapi-components": "file:../jsapi-components", "@deephaven/jsapi-types": "file:../jsapi-types", @@ -30103,6 +30112,7 @@ "@deephaven/code-studio": { "version": "file:packages/code-studio", "requires": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/app-utils": "file:../app-utils", "@deephaven/auth-plugins": "file:../auth-plugins", "@deephaven/chart": "file:../chart", diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json index 90234bcd2d..9968aabfda 100644 --- a/packages/app-utils/package.json +++ b/packages/app-utils/package.json @@ -28,8 +28,12 @@ "redux": "^4.x" }, "dependencies": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/auth-plugins": "file:../auth-plugins", + "@deephaven/chart": "file:../chart", "@deephaven/components": "file:../components", + "@deephaven/icons": "file:../icons", + "@deephaven/iris-grid": "file:../iris-grid", "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap", "@deephaven/jsapi-components": "file:../jsapi-components", "@deephaven/jsapi-types": "file:../jsapi-types", diff --git a/packages/app-utils/src/plugins/remote-component.config.ts b/packages/app-utils/src/plugins/remote-component.config.ts index 26b79e289c..21dfe9f21f 100644 --- a/packages/app-utils/src/plugins/remote-component.config.ts +++ b/packages/app-utils/src/plugins/remote-component.config.ts @@ -8,12 +8,16 @@ import react from 'react'; import * as redux from 'redux'; import * as reactRedux from 'react-redux'; import ReactDOM from 'react-dom'; +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 DeephavenIcons from '@deephaven/icons'; +import * as DeephavenIrisGrid from '@deephaven/iris-grid'; import * as DeephavenJsapiBootstrap from '@deephaven/jsapi-bootstrap'; import * as DeephavenJsapiComponents from '@deephaven/jsapi-components'; import * as DeephavenJsapiUtils from '@deephaven/jsapi-utils'; -import * as DeephavenLog from '@deephaven/log'; +import DeephavenLog from '@deephaven/log'; import * as DeephavenReactHooks from '@deephaven/react-hooks'; // eslint-disable-next-line import/prefer-default-export @@ -22,8 +26,12 @@ export const resolve = { 'react-dom': ReactDOM, redux, 'react-redux': reactRedux, + '@adobe/react-spectrum': AdobeReactSpectrum, '@deephaven/auth-plugins': DeephavenAuthPlugins, + '@deephaven/chart': DeephavenChart, '@deephaven/components': DeephavenComponents, + '@deephaven/icons': DeephavenIcons, + '@deephaven/iris-grid': DeephavenIrisGrid, '@deephaven/jsapi-bootstrap': DeephavenJsapiBootstrap, '@deephaven/jsapi-components': DeephavenJsapiComponents, '@deephaven/jsapi-utils': DeephavenJsapiUtils, diff --git a/packages/app-utils/tsconfig.json b/packages/app-utils/tsconfig.json index f18e274171..f5e6f5ea9b 100644 --- a/packages/app-utils/tsconfig.json +++ b/packages/app-utils/tsconfig.json @@ -8,7 +8,9 @@ "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"], "references": [ { "path": "../auth-plugins" }, + { "path": "../chart" }, { "path": "../components" }, + { "path": "../iris-grid" }, { "path": "../jsapi-bootstrap" }, { "path": "../jsapi-components" }, { "path": "../jsapi-types" }, diff --git a/packages/chart/src/Chart.tsx b/packages/chart/src/Chart.tsx index c05a48ccaf..67220688d0 100644 --- a/packages/chart/src/Chart.tsx +++ b/packages/chart/src/Chart.tsx @@ -166,27 +166,33 @@ export class Chart extends Component { this.initData(); this.initFormatter(); - const { isActive } = this.props; + const { isActive, model } = this.props; if (isActive) { - this.subscribe(); + this.subscribe(model); } } componentDidUpdate(prevProps: ChartProps): void { - const { isActive, settings } = this.props; + const { isActive, model, settings } = this.props; this.updateFormatterSettings(settings as FormatterSettings); + if (model !== prevProps.model) { + this.unsubscribe(prevProps.model); + this.subscribe(model); + } + if (isActive !== prevProps.isActive) { if (isActive) { - this.subscribe(); + this.subscribe(model); } else { - this.unsubscribe(); + this.unsubscribe(model); } } } componentWillUnmount(): void { - this.unsubscribe(); + const { model } = this.props; + this.unsubscribe(model); } currentSeries: number; @@ -315,12 +321,11 @@ export class Chart extends Component { }); } - subscribe(): void { + subscribe(model: ChartModel): void { if (this.isSubscribed) { return; } - const { model } = this.props; if (!this.rect || this.rect.width === 0 || this.rect.height === 0) { log.debug2('Delaying subscription until model dimensions are set'); return; @@ -329,12 +334,11 @@ export class Chart extends Component { this.isSubscribed = true; } - unsubscribe(): void { + unsubscribe(model: ChartModel): void { if (!this.isSubscribed) { return; } - const { model } = this.props; model.unsubscribe(this.handleModelEvent); this.isSubscribed = false; } @@ -510,7 +514,7 @@ export class Chart extends Component { model.setDimensions(rect); // We may need to resubscribe if dimensions were too small before if (isActive) { - this.subscribe(); + this.subscribe(model); } } } diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json index 013408a7a7..d7d555812f 100644 --- a/packages/code-studio/package.json +++ b/packages/code-studio/package.json @@ -11,6 +11,7 @@ "directory": "packages/code-studio" }, "dependencies": { + "@adobe/react-spectrum": "^3.29.0", "@deephaven/app-utils": "file:../app-utils", "@deephaven/auth-plugins": "file:../auth-plugins", "@deephaven/chart": "file:../chart", diff --git a/packages/embed-chart/package.json b/packages/embed-chart/package.json index 74c20cc991..d63eeb80ae 100644 --- a/packages/embed-chart/package.json +++ b/packages/embed-chart/package.json @@ -30,7 +30,7 @@ "scripts": { "analyze": "source-map-explorer build/assets/*.js --no-border-checks", "start": "vite", - "build": "vite build", + "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build", "preview": "vite preview" }, "devDependencies": { diff --git a/packages/jsapi-types/src/dh.types.ts b/packages/jsapi-types/src/dh.types.ts index 365af150b7..d8cd8bf65a 100644 --- a/packages/jsapi-types/src/dh.types.ts +++ b/packages/jsapi-types/src/dh.types.ts @@ -35,6 +35,7 @@ export interface dh { FileContents: FileContentsStatic; }; ValueType: typeof ValueType; + Widget: Widget; } const VariableType = { @@ -335,6 +336,26 @@ export interface Figure extends Evented { close(): void; } +export type WidgetExportedObject = { + type: string; + fetch: () => Promise; + close: () => void; +}; + +export interface Widget { + readonly EVENT_MESSAGE: string; + + addEventListener: ( + type: string, + listener: (event: unknown) => void + ) => () => void; + getDataAsBase64(): string; + getDataAsString(): string; + getDataAsU8(): Uint8Array; + sendMessage: (message: string, references?: never[]) => void; + exportedObjects: WidgetExportedObject[]; +} + export interface FigureDataUpdatedEvent { /** * The series instances which were affected by this event and need to be updated.