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);
+});