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.

Author: mattrunyon

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;