feat: Lazy loading and code splitting (#1802)

This adds lazy loading for `chart` and `iris-grid` and enables it for
`MarkdownComponent` as well.

Replaced the exports for `Chart` and `IrisGrid` with lazy loading
wrappers. This should mean anywhere else we use the components in the
app should be automatically lazy loaded.

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,12 +1,12 @@
-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';
 export * from './ChartUtils';
 export * from './DownsamplingError';
 export { default as FigureChartModel } from './FigureChartModel';
 export { default as MockChartModel } from './MockChartModel';
-export { default as Plot } from './plotly/Plot';
+export { default as Plot } from './plotly/LazyPlot';
 export * from './ChartTheme';
 export * from './ChartThemeProvider';
 export { default as isFigureChartModel } from './isFigureChartModel';

packages/chart/src/plotly/LazyPlot.tsx

@@ -0,0 +1,15 @@
+import { LoadingOverlay } from '@deephaven/components';
+import { lazy, Suspense } from 'react';
+
+const PlotBase = lazy(() => import('./Plot.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

@@ -122,6 +122,9 @@ export default defineConfig(({ mode }) => {
  if (id.includes('plotly.js')) {
  return 'plotly';
  }
+ if (id.includes('mathjax')) {
+ return 'mathjax';
+ }
  return 'vendor';
  }
  },

packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css

@@ -1,6 +1,11 @@
 /* stylelint-disable custom-property-empty-line-before */
 /* stylelint-disable alpha-value-notation */
-.dh-spectrum-alias {
+
+/**
+ * Intentionally using the classname twice so we have higher specificity than spectrum's definitions
+ * This is to ensure that our overrides are applied regardless of CSS chunk loading order
+ */
+.dh-spectrum-alias.dh-spectrum-alias {
  /*********** Override variables in spectrum-global.css **********************/
  --spectrum-alias-background-color-default: var(--dh-color-bg);
  --spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);

packages/components/src/theme/theme-spectrum/theme-spectrum-palette.module.css

@@ -1,4 +1,8 @@
-.dh-spectrum-palette {
+/**
+ * Intentionally using the classname twice so we have higher specificity than spectrum's definitions
+ * This is to ensure that our overrides are applied regardless of CSS chunk loading order
+ */
+.dh-spectrum-palette.dh-spectrum-palette {
  /* Gray */
  --spectrum-gray-50: var(--dh-color-gray-50);
  --spectrum-gray-75: var(--dh-color-gray-75);

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,
+ type 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 type { 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

tests/lazy-loading.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect, Request } from '@playwright/test';
+import { openPlot } from './utils';
+
+/**
+ * Checks the size of the response body of a request
+ * If the response body size is 0, the request is not checked
+ * This seems to happen for Safari sometimes
+ *
+ * @param request The request object. Playwright provides size on the request, not the response
+ * @param size The minimum size in bytes
+ */
+async function expectMinimumResponseSize(
+ request: Request | undefined,
+ size: number
+) {
+ if (!request) {
+ throw new Error('Request is undefined');
+ }
+
+ const responseSize = (await request.sizes()).responseBodySize;
+
+ // Safari doesn't seem to provide response size for some requests
+ if (responseSize > 0) {
+ expect(responseSize).toBeGreaterThan(size);
+ }
+}
+
+test('lazy loads plotly', async ({ page }) => {
+ const requests: Request[] = [];
+ page.on('request', req => requests.push(req));
+
+ await page.goto('');
+ await page.waitForLoadState('networkidle');
+
+ expect(requests.some(req => req.url().includes('assets/plotly'))).toBe(false);
+
+ await openPlot(page, 'simple_plot');
+
+ const plotlyRequest = requests.find(req =>
+ req.url().includes('assets/plotly')
+ );
+ expect(plotlyRequest).toBeDefined();
+ await expectMinimumResponseSize(plotlyRequest, 300 * 1000); // 300kB
+});
+
+test('lazy loads mathjax', async ({ page }) => {
+ const requests: Request[] = [];
+ page.on('request', req => requests.push(req));
+
+ await page.goto('');
+ await page.waitForLoadState('networkidle');
+
+ expect(requests.some(req => req.url().includes('assets/mathjax'))).toBe(
+ false
+ );
+
+ const controlsButton = page.getByText('Controls');
+ await controlsButton.click();
+ const markdownButton = page.getByText('Markdown Widget');
+ await markdownButton.click();
+
+ await expect(page.locator('.markdown-panel')).toBeVisible();
+ await expect(page.locator('.markdown-panel .loading-spinner')).toHaveCount(0);
+
+ const mathjaxRequest = requests.find(req =>
+ req.url().includes('assets/mathjax')
+ );
+ expect(mathjaxRequest).toBeDefined();
+ await expectMinimumResponseSize(mathjaxRequest, 500 * 1000); // 500kB
+});

tests/utils.ts

@@ -109,9 +109,13 @@ export async function openPlot(
 
  if (waitForLoadFinished) {
  // Wait until it's done loading
+ await expect(page.locator('.chart-panel-container')).toHaveCount(1);
  await expect(
  page.locator('.chart-panel-container .loading-spinner')
  ).toHaveCount(0);
+ await expect(
+ page.locator('.chart-panel-container .chart-wrapper')
+ ).toHaveCount(1);
  }
 }