feat: De-globalize JSAPI in IrisGrid package (#1262)

- De-globalize JSAPI in the IrisGrid package.
- De-globalize JSAPI in `DateUtils` and `TableUtils` in the`jsapi-utils`
package.
- Update `dashboard-core-plugins`, `code-studio`, embed-grid` to match
the IrisGrid package changes.

BREAKING CHANGE:

- `DateUtils` static methods `makeDateWrapper`, `getNextDate `,
`parseDateRange` now require the JSAPI object as the first argument.
- `IrisGridUtils` static methods `dehydrateIrisGridState`,
`hydrateIrisGridState`, `hydrateQuickFilters`,
`dehydrateAdvancedFilters`, `hydrateAdvancedFilters`,
`dehydrateAdvancedFilterOptions`, `hydrateAdvancedFilterOptions`,
`dehydratePendingDataMap`, `hydratePendingDataMap`, `dehydrateValue`,
`hydrateValue`, `dehydrateDateTime`, `hydrateDateTime`, `hydrateLong`,
`hydrateSort`, `applyTableSettings`, `getFiltersFromInputFilters`,
`rangeSetFromRanges` converted to instance methods. Consumers now need
to create an `IrisGridUtils` instance and pass the JSAPI object to the
constructor.
- `TableUtils` static methods `makeQuickFilter`,
`makeQuickFilterFromComponent`, `makeQuickNumberFilter`,
`makeQuickTextFilter`, `makeQuickBooleanFilter`, `makeQuickDateFilter`,
`makeQuickDateFilterWithOperation`, `makeQuickCharFilter`,
`makeAdvancedFilter`, `makeAdvancedValueFilter`, `makeFilterValue`,
`makeFilterRawValue`, `makeValue`, `makeSelectValueFilter` converted to
instance methods. Consumers now need to create a `TableUtils` instance
and pass the JSAPI object to the constructor.
- `IrisGridTableModel`, `IrisGridTableModelTemplate`,
`IrisGridProxyModel` constructors require the JSAPI object in the first
argument.
- `IrisGridTestUtils.makeModel`, `IrisGridModelFactory.makeModel` now
require the JSAPI object in the first argument.
- `IrisGridContextMenuHandler` constructor requires the JSAPI object in
the second argument.
- `IrisGridPanel` requires a new `makeApi` prop, a function that
resolves with the JSAPI instance.
- `CrossColumnSearch.createSearchFilter` requires the JSAPI object
argument.
- Components `AdvancedFilterCreatorSelectValue`,
`AdvancedFilterCreatorSelectValueList`, `ChartBuilder`, `GotoRow`,
`IrisGrid`, `IrisGridModelUpdater`, `IrisGridPartitionSelector`,
`PartitionSelectorSearch`, `TableCSVExporter`, `TableSaver`,
`TreeTableViewportUpdater`, `RowFormatEditor`, `ColumnFormatEditor`,
`ConditionEditor` now require the JSAPI object passed in the new prop
`dh`.
- Components `AdvancedFilterCreator`, `AdvancedFilterCreatorFilterItem`
require the `TableUtils` instance pass in the new prop `tableUtils`.
- `ConditionalFormattingUtils` static methods `getFormatColumns`,
`isDateConditionValid` require the JSAPI object in the first argument.
- `ConditionalFormattingAPIUtils` static method `makeRowFormatColumn`
requires the JSAPI object in the first argument.

Author: vbabich

package-lock.json

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

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

@@ -1,9 +1,10 @@
 import { ChartModel, ChartModelFactory } from '@deephaven/chart';
-import dh, {
+import {
+  dh as DhType,
   Table,
   VariableTypeUnion,
   IdeConnection,
-} from '@deephaven/jsapi-shim';
+} from '@deephaven/jsapi-types';
 import {
   IrisGridModel,
   IrisGridModelFactory,
@@ -21,6 +22,7 @@ export type GridPanelMetadata = {
 };
 
 export const createChartModel = async (
+  dh: DhType,
   connection: IdeConnection,
   metadata: ChartPanelMetadata,
   panelState?: GLChartPanelState
@@ -76,8 +78,7 @@ export const createChartModel = async (
     type: dh.VariableType.TABLE,
   };
   const table = await connection.getObject(definition);
-
-  IrisGridUtils.applyTableSettings(
+  new IrisGridUtils(dh).applyTableSettings(
     table,
     tableSettings,
     getTimeZone(store.getState())
@@ -88,14 +89,15 @@ export const createChartModel = async (
 };
 
 export const createGridModel = async (
+  dh: DhType,
   connection: IdeConnection,
   metadata: GridPanelMetadata,
   type: VariableTypeUnion = dh.VariableType.TABLE
 ): Promise<IrisGridModel> => {
   const { table: tableName } = metadata;
   const definition = { title: tableName, name: tableName, type };
   const table = (await connection.getObject(definition)) as Table;
-  return IrisGridModelFactory.makeModel(table);
+  return IrisGridModelFactory.makeModel(dh, table);
 };
 
 export default { createChartModel, createGridModel };

packages/code-studio/src/main/WidgetUtils.ts

@@ -1,53 +1,44 @@
-import React, { PureComponent } from 'react';
+import React, { ReactElement, useState } from 'react';
 import {
   Grid,
+  GridThemeType,
   MockGridModel,
   MockTreeGridModel,
   ThemeContext,
-  GridThemeType,
 } from '@deephaven/grid';
 import { IrisGrid } from '@deephaven/iris-grid';
+import { useApi } from '@deephaven/jsapi-bootstrap';
 import MockIrisGridTreeModel from './MockIrisGridTreeModel';
 import StaticExample from './grid-examples/StaticExample';
 import QuadrillionExample from './grid-examples/QuadrillionExample';
 import TreeExample from './grid-examples/TreeExample';
 import AsyncExample from './grid-examples/AsyncExample';
 import DataBarExample from './grid-examples/DataBarExample';
 
-type GridsState = {
-  irisGridModel: MockIrisGridTreeModel;
-  model: MockGridModel;
-  theme: Partial<GridThemeType>;
-  contextTheme: Partial<GridThemeType>;
-};
-
-class Grids extends PureComponent<Record<string, never>, GridsState> {
-  constructor(props: Record<string, never>) {
-    super(props);
-
-    this.state = {
-      irisGridModel: new MockIrisGridTreeModel(new MockTreeGridModel()),
-      model: new MockGridModel(),
-      theme: { autoSelectRow: true },
-      contextTheme: { rowHeight: 40 },
-    };
-  }
+function Grids(): ReactElement {
+  const [irisGridModel] = useState(
+    new MockIrisGridTreeModel(new MockTreeGridModel())
+  );
+  const [model] = useState(new MockGridModel());
+  const [theme] = useState<Partial<GridThemeType>>({ autoSelectRow: true });
+  const [contextTheme] = useState<Partial<GridThemeType>>({ rowHeight: 40 });
+  const dh = useApi();
 
-  render(): React.ReactElement {
-    const { contextTheme, irisGridModel, model, theme } = this.state;
-
-    return (
-      <div>
-        <ThemeContext.Provider value={contextTheme}>
-          <h2 className="ui-title">Grid</h2>
-          <div>
-            <Grid model={model} theme={theme} />
-          </div>
-          <h2 className="ui-title">Static Data</h2>
-          <div style={{ height: 200 }}>
-            <StaticExample />
-          </div>
-        </ThemeContext.Provider>
+  return (
+    <div>
+      <ThemeContext.Provider value={contextTheme}>
+        <h2 className="ui-title">Grid</h2>
+        <div>
+          <Grid model={model} theme={theme} />
+        </div>
+        <h2 className="ui-title">Static Data</h2>
+        <div style={{ height: 200 }}>
+          <StaticExample />
+        </div>
+        <h2 className="ui-title">Data Bar</h2>
+        <div style={{ height: 500 }}>
+          <DataBarExample />
+        </div>
         <h2 className="ui-title">Quadrillion rows and columns</h2>
         <div style={{ height: 500, position: 'relative' }}>
           <QuadrillionExample />
@@ -62,15 +53,11 @@ class Grids extends PureComponent<Record<string, never>, GridsState> {
         </div>
         <h2 className="ui-title">Iris Grid</h2>
         <div style={{ height: 500 }}>
-          <IrisGrid model={irisGridModel} />
-        </div>
-        <h2 className="ui-title">Data Bar</h2>
-        <div style={{ height: 500 }}>
-          <DataBarExample />
+          <IrisGrid dh={dh} model={irisGridModel} />
         </div>
-      </div>
-    );
-  }
+      </ThemeContext.Provider>
+    </div>
+  );
 }
 
 export default Grids;

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

@@ -54,8 +54,11 @@ export function GridPlugin(props: GridPluginProps): JSX.Element | null {
       }
 
       const metadata = { name, table: name, type: widget.type };
+      const makeApi = () => Promise.resolve(dh);
       const makeModel = () =>
-        fetch().then((table: Table) => IrisGridModelFactory.makeModel(table));
+        fetch().then((table: Table) =>
+          IrisGridModelFactory.makeModel(dh, table)
+        );
       const config = {
         type: 'react-component' as const,
         component: IrisGridPanel.COMPONENT,
@@ -65,6 +68,7 @@ export function GridPlugin(props: GridPluginProps): JSX.Element | null {
           localDashboardId: id,
           id: panelId,
           metadata,
+          makeApi,
           makeModel,
           theme,
         },

packages/dashboard-core-plugins/src/GridPlugin.tsx

@@ -8,7 +8,7 @@ import {
   useListener,
 } from '@deephaven/dashboard';
 import { IrisGridModelFactory } from '@deephaven/iris-grid';
-import { Table } from '@deephaven/jsapi-shim';
+import type { Table } from '@deephaven/jsapi-types';
 import shortid from 'shortid';
 import { PandasPanel, PandasPanelProps } from './panels';
 
@@ -29,7 +29,9 @@ export function PandasPlugin(props: PandasPluginProps): JSX.Element | null {
 
       const metadata = { name, table: name };
       const makeModel = () =>
-        fetch().then((table: Table) => IrisGridModelFactory.makeModel(table));
+        fetch().then((table: Table) =>
+          IrisGridModelFactory.makeModel(dh, table)
+        );
       const config = {
         type: 'react-component' as const,
         component: PandasPanel.COMPONENT,

packages/dashboard-core-plugins/src/PandasPlugin.tsx

@@ -44,11 +44,19 @@ function makeGlComponent() {
 }
 
 function makeMakeModel(table = makeTable()) {
-  return () => Promise.resolve(table).then(IrisGridModelFactory.makeModel);
+  return () =>
+    Promise.resolve(table).then(resolved =>
+      IrisGridModelFactory.makeModel(dh, resolved)
+    );
+}
+
+function makeMakeApi() {
+  return () => dh;
 }
 
 function makeIrisGridPanelWrapper(
   makeModel = makeMakeModel(),
+  makeApi = makeMakeApi(),
   metadata = { table: 'table' },
   glContainer = makeGlComponent(),
   glEventHub = makeGlComponent(),
@@ -61,6 +69,7 @@ function makeIrisGridPanelWrapper(
 ) {
   return render(
     <IrisGridPanel
+      makeApi={makeApi}
       makeModel={makeModel}
       metadata={metadata}
       glContainer={(glContainer as unknown) as Container}