feat: Lazy loading and code splitting

packages/chart/src/LazyChart.tsx

@@ -0,0 +1,15 @@
+import { LoadingOverlay } from '@deephaven/components';
+import { lazy, Suspense } from 'react';
+
+const Chart = lazy(() => import('./Chart.js'));
+
+function LazyChart(props: React.ComponentProps<typeof Chart>): JSX.Element {
+ return (
+ <Suspense fallback={<LoadingOverlay />}>
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ <Chart {...props} />
+ </Suspense>
+ );
+}
+
+export default LazyChart;

packages/chart/src/index.ts

@@ -1,4 +1,4 @@
-export { default as Chart } from './Chart';
+export { default as Chart } from './LazyChart';
 export { default as ChartModelFactory } from './ChartModelFactory';
 export { default as ChartModel } from './ChartModel';
 export { default as ChartUtils } from './ChartUtils';

packages/chart/src/plotly/Plot.tsx

@@ -0,0 +1,15 @@
+import { LoadingOverlay } from '@deephaven/components';
+import { lazy, Suspense } from 'react';
+
+const PlotBase = lazy(() => import('./PlotBase.js'));
+
+function Plot(props: React.ComponentProps<typeof PlotBase>): JSX.Element {
+ return (
+ <Suspense fallback={<LoadingOverlay />}>
+ {/* eslint-disable react/jsx-props-no-spreading */}
+ <PlotBase {...props} />
+ </Suspense>
+ );
+}
+
+export default Plot;

packages/code-studio/vite.config.ts

@@ -101,32 +101,6 @@ export default defineConfig(({ mode }) => {
  emptyOutDir: true,
  sourcemap: true,
  target: 'esnext',
- rollupOptions: {
- output: {
- manualChunks: id => {
- /**
- * Without this, our chunk order may cause a circular reference
- * by putting the helpers in the vendor or plotly chunk
- * This causes failures with loading the compiled version
- *
- * See https://github.com/rollup/plugins/issues/591
- */
- if (id === '\0commonjsHelpers.js') {
- return 'helpers';
- }
-
- if (id.includes('node_modules')) {
- if (id.includes('monaco-editor')) {
- return 'monaco';
- }
- if (id.includes('plotly.js')) {
- return 'plotly';
- }
- return 'vendor';
- }
- },
- },
- },
  },
  optimizeDeps: {
  esbuildOptions: {

packages/console/src/notebook/ScriptEditor.tsx

@@ -6,7 +6,7 @@ import { LoadingOverlay, ShortcutRegistry } from '@deephaven/components';
 import Log from '@deephaven/log';
 import type { IdeSession } from '@deephaven/jsapi-types';
 import { assertNotNull } from '@deephaven/utils';
-import { editor, IDisposable } from 'monaco-editor';
+import type { editor, IDisposable } from 'monaco-editor';
 import Editor from './Editor';
 import { MonacoProviders, MonacoUtils } from '../monaco';
 import './ScriptEditor.scss';

packages/dashboard-core-plugins/src/panels/IrisGridPanel.tsx

@@ -19,6 +19,7 @@ import {
 import {
  AdvancedSettings,
  IrisGrid,
+ IrisGridType,
  IrisGridModel,
  IrisGridUtils,
  isIrisGridTableModelTemplate,
@@ -362,7 +363,7 @@ export class IrisGridPanel extends PureComponent<
  }
  }
 
- irisGrid: RefObject<IrisGrid>;
+ irisGrid: RefObject<IrisGridType>;
 
  pluginRef: RefObject<TablePluginElement>;
 

packages/iris-grid/src/IrisGrid.test.tsx

@@ -4,7 +4,7 @@ import dh from '@deephaven/jsapi-shim';
 import { DateUtils, Settings } from '@deephaven/jsapi-utils';
 import { TestUtils } from '@deephaven/utils';
 import { TypeValue } from '@deephaven/filters';
-import { IrisGrid } from './IrisGrid';
+import IrisGrid from './IrisGrid';
 import IrisGridTestUtils from './IrisGridTestUtils';
 
 class MockPath2D {

packages/iris-grid/src/IrisGrid.tsx

@@ -249,6 +249,7 @@ function isEmptyConfig({
  sorts.length === 0
  );
 }
+
 export type FilterData = {
  operator: FilterTypeValue;
  text: string;
@@ -451,7 +452,7 @@ export interface IrisGridState {
  columnHeaderGroups: readonly ColumnHeaderGroup[];
 }
 
-export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
+class IrisGrid extends Component<IrisGridProps, IrisGridState> {
  static contextType = IrisGridThemeContext;
 
  static minDebounce = 150;

packages/iris-grid/src/IrisGridCellOverflowModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Editor } from '@deephaven/console';
-import * as monaco from 'monaco-editor';
+import type * as monaco from 'monaco-editor';
 import {
  Button,
  CopyButton,

packages/iris-grid/src/LazyIrisGrid.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, lazy, Suspense } from 'react';
+import { LoadingOverlay } from '@deephaven/components';
+import type IrisGridType from './IrisGrid';
+import type { IrisGridProps } from './IrisGrid';
+
+const IrisGrid = lazy(() => import('./IrisGrid.js'));
+
+const LazyIrisGrid = forwardRef<
+ IrisGridType,
+ JSX.LibraryManagedAttributes<typeof IrisGridType, IrisGridProps>
+>(
+ (
+ // This creates the correct type to make defaultProps optional
+ props,
+ ref
+ ): JSX.Element => (
+ <Suspense fallback={<LoadingOverlay />}>
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ <IrisGrid ref={ref} {...props} />
+ </Suspense>
+ )
+);
+
+LazyIrisGrid.displayName = 'LazyIrisGrid';
+
+export default LazyIrisGrid;

packages/iris-grid/src/index.ts

@@ -1,4 +1,4 @@
-import IrisGrid from './IrisGrid';
+import IrisGrid from './LazyIrisGrid';
 
 export default IrisGrid;
 export { IrisGrid };
@@ -8,6 +8,7 @@ export * from './CommonTypes';
 export { default as ColumnHeaderGroup } from './ColumnHeaderGroup';
 export * from './PartitionedGridModel';
 export * from './IrisGrid';
+export { default as IrisGridType } from './IrisGrid';
 export { default as SHORTCUTS } from './IrisGridShortcuts';
 export { default as IrisGridModel } from './IrisGridModel';
 export { default as IrisGridTableModel } from './IrisGridTableModel';

packages/iris-grid/src/key-handlers/ClearFilterKeyHandler.ts

@@ -1,6 +1,6 @@
 import { KeyboardEvent } from 'react';
 import { KeyHandler } from '@deephaven/grid';
-import { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 import IrisGridShortcuts from '../IrisGridShortcuts';
 
 class ClearFilterKeyHandler extends KeyHandler {

packages/iris-grid/src/key-handlers/CopyCellKeyHandler.ts

@@ -2,7 +2,7 @@ import { KeyboardEvent } from 'react';
 import { KeyHandler } from '@deephaven/grid';
 import { ContextActionUtils } from '@deephaven/components';
 import type { Grid } from '@deephaven/grid';
-import { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 
 class CopyCellKeyHandler extends KeyHandler {
  private irisGrid: IrisGrid;

packages/iris-grid/src/key-handlers/CopyKeyHandler.ts

@@ -2,7 +2,7 @@
 import { KeyboardEvent } from 'react';
 import { ContextActionUtils } from '@deephaven/components';
 import { KeyHandler } from '@deephaven/grid';
-import { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 import IrisGridUtils from '../IrisGridUtils';
 
 class CopyKeyHandler extends KeyHandler {

packages/iris-grid/src/key-handlers/ReverseKeyHandler.ts

@@ -1,7 +1,7 @@
 import { KeyboardEvent } from 'react';
 import { KeyHandler } from '@deephaven/grid';
 import { TableUtils } from '@deephaven/jsapi-utils';
-import { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 import IrisGridShortcuts from '../IrisGridShortcuts';
 
 class ReverseKeyHandler extends KeyHandler {

packages/iris-grid/src/mousehandlers/IrisGridColumnSelectMouseHandler.ts

@@ -5,7 +5,7 @@ import {
  EventHandlerResult,
 } from '@deephaven/grid';
 import type { Column } from '@deephaven/jsapi-types';
-import { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 import { DisplayColumn } from '../IrisGridModel';
 
 /**

packages/iris-grid/src/mousehandlers/IrisGridColumnTooltipMouseHandler.ts

@@ -6,7 +6,7 @@ import {
  Grid,
  GridMouseEvent,
 } from '@deephaven/grid';
-import type { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 
 /**
  * Detects mouse hover over column headers and displays the appropriate tooltip

packages/iris-grid/src/mousehandlers/IrisGridDataSelectMouseHandler.ts

@@ -5,7 +5,7 @@ import {
  GridPoint,
  EventHandlerResult,
 } from '@deephaven/grid';
-import type { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 
 /**
  * Handles sending data selected via double click

packages/iris-grid/src/mousehandlers/IrisGridFilterMouseHandler.ts

@@ -4,7 +4,7 @@ import {
  GridPoint,
  EventHandlerResult,
 } from '@deephaven/grid';
-import type { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 
 /**
  * Trigger quick filters and advanced filters

packages/iris-grid/src/mousehandlers/IrisGridSortMouseHandler.ts

@@ -8,7 +8,7 @@ import {
  GridRangeIndex,
  EventHandlerResult,
 } from '@deephaven/grid';
-import type { IrisGrid } from '../IrisGrid';
+import type IrisGrid from '../IrisGrid';
 
 /**
  * Used to handle sorting on column header clicks