feat: De-globalize JSAPI in Console package

packages/app-utils/src/components/ConnectionBootstrap.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useState } from 'react';
 import { LoadingOverlay } from '@deephaven/components';
 import { useApi, useClient } from '@deephaven/jsapi-bootstrap';
-import { IdeConnection } from '@deephaven/jsapi-types';
+import type { IdeConnection } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 
 const log = Log.module('@deephaven/jsapi-components.ConnectionBootstrap');

packages/chart/src/Chart.tsx

@@ -7,7 +7,6 @@ import {
   dhWarningFilled,
   IconDefinition,
 } from '@deephaven/icons';
-import type { dh as DhType } from '@deephaven/jsapi-types';
 import {
   Formatter,
   FormatterUtils,
@@ -36,7 +35,6 @@ type FormatterSettings = ColumnFormatSettings &
   };
 
 interface ChartProps {
-  dh: DhType;
   model: ChartModel;
   settings: FormatterSettings;
   isActive: boolean;
@@ -507,16 +505,14 @@ export class Chart extends Component<ChartProps, ChartState> {
   }
 
   updateFormatter(): void {
-    const { dh } = this.props;
+    const { model } = this.props;
     const formatter = new Formatter(
-      dh,
+      model.dh,
       this.columnFormats,
       this.dateTimeFormatterOptions,
       this.decimalFormatOptions,
       this.integerFormatOptions
     );
-
-    const { model } = this.props;
     model.setFormatter(formatter);
   }
 

packages/chart/src/ChartModel.ts

@@ -1,6 +1,7 @@
 /* eslint class-methods-use-this: "off" */
 /* eslint no-unused-vars: "off" */
 
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import { Formatter } from '@deephaven/jsapi-utils';
 import { Layout, PlotData } from 'plotly.js';
 import { FilterColumnMap, FilterMap } from './ChartUtils';
@@ -28,11 +29,14 @@ class ChartModel {
 
   static EVENT_LOADFINISHED = 'ChartModel.EVENT_LOADFINISHED';
 
-  constructor() {
+  constructor(dh: DhType) {
+    this.dh = dh;
     this.listeners = [];
     this.isDownsamplingDisabled = false;
   }
 
+  dh: DhType;
+
   listeners: ((event: ChartEvent) => void)[];
 
   formatter?: Formatter;

packages/chart/src/FigureChartModel.ts

@@ -46,7 +46,7 @@ class FigureChartModel extends ChartModel {
     settings: Partial<ChartModelSettings> = {},
     theme: typeof ChartTheme = ChartTheme
   ) {
-    super();
+    super(dh);
 
     this.handleFigureUpdated = this.handleFigureUpdated.bind(this);
     this.handleFigureDisconnected = this.handleFigureDisconnected.bind(this);

packages/chart/src/MockChartModel.js

@@ -167,7 +167,7 @@ class MockChartModel extends ChartModel {
       filterFields = [],
     } = {}
   ) {
-    super();
+    super(dh);
 
     this.data = data;
     this.layout = layout;

packages/code-studio/src/main/AppInit.tsx

@@ -126,6 +126,7 @@ function AppInit(props: AppInitProps) {
         try {
           const sessionDetails = await getSessionDetails();
           const sessionWrapper = await loadSessionWrapper(
+            api,
             connection,
             sessionDetails
           );
@@ -279,6 +280,7 @@ AppInit.propTypes = {
   workspaceStorage: PropTypes.shape({ close: PropTypes.func }),
 
   setActiveTool: PropTypes.func.isRequired,
+  setApi: PropTypes.func.isRequired,
   setCommandHistoryStorage: PropTypes.func.isRequired,
   setDashboardData: PropTypes.func.isRequired,
   setFileStorage: PropTypes.func.isRequired,

packages/code-studio/src/main/AppMainContainer.test.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ToolType } from '@deephaven/dashboard-core-plugins';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
 import dh from '@deephaven/jsapi-shim';
 import type {
   IdeConnection,
@@ -69,27 +70,29 @@ function renderAppMainContainer({
   plugins = new Map(),
 } = {}) {
   return render(
-    <AppMainContainer
-      dashboardData={dashboardData as AppDashboardData}
-      layoutStorage={layoutStorage as LayoutStorage}
-      saveWorkspace={saveWorkspace}
-      updateDashboardData={updateDashboardData}
-      updateWorkspaceData={updateWorkspaceData}
-      user={user}
-      workspace={workspace as Workspace}
-      workspaceStorage={workspaceStorage}
-      activeTool={activeTool}
-      setActiveTool={setActiveTool}
-      setDashboardIsolatedLinkerPanelId={setDashboardIsolatedLinkerPanelId}
-      client={client}
-      serverConfigValues={serverConfigValues}
-      dashboardOpenedPanelMaps={dashboardOpenedPanelMaps}
-      connection={connection}
-      session={(session as unknown) as IdeSession}
-      sessionConfig={sessionConfig}
-      match={match}
-      plugins={plugins}
-    />
+    <ApiContext.Provider value={dh}>
+      <AppMainContainer
+        dashboardData={dashboardData as AppDashboardData}
+        layoutStorage={layoutStorage as LayoutStorage}
+        saveWorkspace={saveWorkspace}
+        updateDashboardData={updateDashboardData}
+        updateWorkspaceData={updateWorkspaceData}
+        user={user}
+        workspace={workspace as Workspace}
+        workspaceStorage={workspaceStorage}
+        activeTool={activeTool}
+        setActiveTool={setActiveTool}
+        setDashboardIsolatedLinkerPanelId={setDashboardIsolatedLinkerPanelId}
+        client={client}
+        serverConfigValues={serverConfigValues}
+        dashboardOpenedPanelMaps={dashboardOpenedPanelMaps}
+        connection={connection}
+        session={(session as unknown) as IdeSession}
+        sessionConfig={sessionConfig}
+        match={match}
+        plugins={plugins}
+      />
+    </ApiContext.Provider>
   );
 }
 let mockProp = {};

packages/code-studio/src/main/AppMainContainer.tsx

@@ -756,7 +756,6 @@ export class AppMainContainer extends Component<
       getDownloadWorker: DownloadServiceWorkerUtils.getServiceWorker,
       loadPlugin: this.handleLoadTablePlugin,
       localDashboardId: id,
-      makeApi: () => Promise.resolve(dh),
       makeModel: () => createGridModel(dh, connection, props.metadata, type),
     };
   }
@@ -766,7 +765,6 @@ export class AppMainContainer extends Component<
     return {
       ...props,
       localDashboardId: id,
-      makeApi: () => Promise.resolve(dh),
       makeModel: () => {
         const { metadata, panelState } = props;
         return createChartModel(dh, connection, metadata, panelState);

packages/code-studio/src/styleguide/Charts.tsx

@@ -10,7 +10,7 @@ function Charts(): ReactElement {
     <div>
       <h2 className="ui-title">Chart</h2>
       <div style={{ height: 500 }}>
-        <Chart dh={dh} model={model as ChartModel} />
+        <Chart model={model as ChartModel} />
       </div>
     </div>
   );

packages/code-studio/src/styleguide/Grids.tsx

@@ -16,13 +16,13 @@ import AsyncExample from './grid-examples/AsyncExample';
 import DataBarExample from './grid-examples/DataBarExample';
 
 function Grids(): ReactElement {
+  const dh = useApi();
   const [irisGridModel] = useState(
-    new MockIrisGridTreeModel(new MockTreeGridModel())
+    new MockIrisGridTreeModel(dh, new MockTreeGridModel())
   );
   const [model] = useState(new MockGridModel());
   const [theme] = useState<Partial<GridThemeType>>({ autoSelectRow: true });
   const [contextTheme] = useState<Partial<GridThemeType>>({ rowHeight: 40 });
-  const dh = useApi();
 
   return (
     <div>
@@ -53,7 +53,7 @@ function Grids(): ReactElement {
         </div>
         <h2 className="ui-title">Iris Grid</h2>
         <div style={{ height: 500 }}>
-          <IrisGrid dh={dh} model={irisGridModel} />
+          <IrisGrid model={irisGridModel} />
         </div>
       </ThemeContext.Provider>
     </div>

packages/code-studio/src/styleguide/MockIrisGridTreeModel.ts

@@ -20,6 +20,7 @@ import {
 import type {
   Column,
   CustomColumn,
+  dh as DhType,
   ValueTypeUnion,
 } from '@deephaven/jsapi-types';
 import { Formatter } from '@deephaven/jsapi-utils';
@@ -44,8 +45,8 @@ class MockIrisGridTreeModel
 
   protected editedData: string[][];
 
-  constructor(model = new MockTreeGridModel()) {
-    super();
+  constructor(dh: DhType, model = new MockTreeGridModel()) {
+    super(dh);
 
     this.model = model;
     this.editedData = [];

packages/console/package.json

@@ -26,7 +26,7 @@
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
     "@deephaven/icons": "file:../icons",
-    "@deephaven/jsapi-shim": "file:../jsapi-shim",
+    "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
     "@deephaven/log": "file:../log",
     "@deephaven/storage": "file:../storage",
     "@deephaven/utils": "file:../utils",
@@ -48,6 +48,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
+    "@deephaven/jsapi-shim": "file:../jsapi-shim",
     "@deephaven/mocks": "file:../mocks",
     "@deephaven/tsconfig": "file:../tsconfig"
   },

packages/console/src/Console.test.tsx

@@ -37,6 +37,7 @@ function makeConsoleWrapper(consoleRef = React.createRef<Console>()) {
   const commandHistoryStorage = makeMockCommandHistoryStorage();
   return render(
     <Console
+      dh={dh}
       ref={consoleRef}
       commandHistoryStorage={commandHistoryStorage}
       focusCommandHistory={() => undefined}

packages/console/src/Console.tsx

@@ -14,8 +14,8 @@ import classNames from 'classnames';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import type { JSZipObject } from 'jszip';
-import dh from '@deephaven/jsapi-shim';
 import type {
+  dh as DhType,
   IdeSession,
   LogItem,
   VariableChanges,
@@ -53,6 +53,7 @@ const DEFAULT_SETTINGS: Settings = {
 } as const;
 
 interface ConsoleProps {
+  dh: DhType;
   statusBarChildren: ReactNode;
   settings: Partial<Settings>;
   focusCommandHistory: () => void;
@@ -215,7 +216,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   componentDidMount(): void {
     this.initConsoleLogging();
 
-    const { session } = this.props;
+    const { dh, session } = this.props;
     session.addEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
       this.handleCommandStarted
@@ -234,7 +235,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   }
 
   componentWillUnmount(): void {
-    const { session } = this.props;
+    const { dh, session } = this.props;
 
     session.removeEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
@@ -733,7 +734,13 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   }
 
   handleOpenCsvTable(title: string): void {
-    const { openObject, commandHistoryStorage, language, scope } = this.props;
+    const {
+      dh,
+      openObject,
+      commandHistoryStorage,
+      language,
+      scope,
+    } = this.props;
     const { consoleHistory, objectMap } = this.state;
     const object = { name: title, title, type: dh.VariableType.TABLE };
     const isExistingObject = objectMap.has(title);
@@ -941,6 +948,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   render(): ReactElement {
     const {
       actions,
+      dh,
       historyChildren,
       language,
       statusBarChildren,
@@ -974,6 +982,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
       >
         <div className="console-pane" ref={this.consolePane}>
           <ConsoleStatusBar
+            dh={dh}
             session={session}
             overflowActions={this.handleOverflowActions}
             openObject={openObject}