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 <mattrunyonstuff@gmail.com>

Author: mofojed

package-lock.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",

packages/app-utils/package.json

@@ -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,

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

@@ -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" },

packages/app-utils/tsconfig.json

@@ -166,27 +166,33 @@ export class Chart extends Component<ChartProps, ChartState> {
     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<ChartProps, ChartState> {
     });
   }
 
-  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<ChartProps, ChartState> {
     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<ChartProps, ChartState> {
       model.setDimensions(rect);
       // We may need to resubscribe if dimensions were too small before
       if (isActive) {
-        this.subscribe();
+        this.subscribe(model);
       }
     }
   }

packages/chart/src/Chart.tsx

@@ -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",

packages/code-studio/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": {

packages/embed-chart/package.json

@@ -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<unknown>;
+  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.