feat: Lazy loading and code splitting

packages/chart/src/index.ts

@@ -6,7 +6,7 @@ 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/Plot.tsx → packages/chart/src/plotly/LazyPlot.tsx

@@ -1,7 +1,7 @@
 import { LoadingOverlay } from '@deephaven/components';
 import { lazy, Suspense } from 'react';
 
-const PlotBase = lazy(() => import('./PlotBase.js'));
+const PlotBase = lazy(() => import('./Plot.js'));
 
 function Plot(props: React.ComponentProps<typeof PlotBase>): JSX.Element {
  return (

packages/code-studio/vite.config.ts

@@ -101,6 +101,35 @@ 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';
+ }
+ if (id.includes('mathjax')) {
+ return 'mathjax';
+ }
+ return 'vendor';
+ }
+ },
+ },
+ },
  },
  optimizeDeps: {
  esbuildOptions: {

packages/components/src/theme/theme-spectrum/index.ts

@@ -12,7 +12,9 @@ import './theme-spectrum-overrides.css';
  * e.g.
  * {
  * 'dh-spectrum-palette': '_dh-spectrum-palette_abr16_1',
+ * 'higher-palette-specificity': '_higher-palette-specificity_18mbe_1',
  * 'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',
+ * 'higher-alias-specificity': '_higher-alias-specificity_18mbe_1',
  * }
  */
 export const themeSpectrumClassesCommon = {

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

@@ -1,6 +1,10 @@
 /* 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
+ */
+.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,7 @@
-.dh-spectrum-palette {
+/**
+ * Intentionally using the classname twice so we have higher specificity than spectrum's definitions
+ */
+.dh-spectrum-palette.dh-spectrum-palette {
  /* Gray */
  --spectrum-gray-50: var(--dh-color-gray-50);
  --spectrum-gray-75: var(--dh-color-gray-75);

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

@@ -19,7 +19,7 @@ import {
 import {
  AdvancedSettings,
  IrisGrid,
- IrisGridType,
+ type IrisGridType,
  IrisGridModel,
  IrisGridUtils,
  isIrisGridTableModelTemplate,

packages/iris-grid/src/index.ts

@@ -8,7 +8,7 @@ export * from './CommonTypes';
 export { default as ColumnHeaderGroup } from './ColumnHeaderGroup';
 export * from './PartitionedGridModel';
 export * from './IrisGrid';
-export { default as IrisGridType } 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';

tests/lazy-loading.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('does not load heavy dependencies by default', async ({ page }) => {
+ page.on('request', request => {
+ expect(request.url()).not.toMatch('assets/plotly');
+ expect(request.url()).not.toMatch('assets/mathjax');
+ });
+ await page.goto('');
+ await expect(page.locator('.loading-spinner')).toHaveCount(0);
+});