[7.x] [visTypeTimeseries] Reduce page load bundle to under 100kB #95873 (#97972)

packages/kbn-optimizer/limits.yml

@@ -92,7 +92,7 @@ pageLoadAssetSize:
   visTypeTable: 95078
   visTypeTagcloud: 37575
   visTypeTimelion: 68883
-  visTypeTimeseries: 155347
+  visTypeTimeseries: 55347
   visTypeVega: 153861
   visTypeVislib: 242982
   visTypeXy: 113478

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -8,7 +8,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { TSVB_EDITOR_NAME } from './application';
+import { TSVB_EDITOR_NAME } from './application/editor_controller';
 import { PANEL_TYPES } from '../common/panel_types';
 import { isStringTypeIndexPattern } from '../common/index_patterns_utils';
 import { toExpressionAst } from './to_ast';

src/plugins/vis_type_timeseries/public/plugin.ts

@@ -6,13 +6,11 @@
  * Side Public License, v 1.
  */
 
-import './application/index.scss';
-
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from 'kibana/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
 import { VisualizePluginSetup } from '../../visualize/public';
-import { EditorController, TSVB_EDITOR_NAME } from './application';
+import { EditorController, TSVB_EDITOR_NAME } from './application/editor_controller';
 
 import { createMetricsFn } from './metrics_fn';
 import { metricsVisDefinition } from './metrics_type';

src/plugins/vis_type_timeseries/public/request_handler.ts

@@ -8,7 +8,8 @@
 
 import { KibanaContext } from '../../data/public';
 
-import { getTimezone, validateInterval } from './application';
+import { getTimezone } from './application/lib/get_timezone';
+import { validateInterval } from './application/lib/validate_interval';
 import { getUISettings, getDataStart, getCoreStart } from './services';
 import { MAX_BUCKETS_SETTING, ROUTES } from '../common/constants';
 import { TimeseriesVisParams } from './types';

src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx

@@ -12,14 +12,16 @@ import { render, unmountComponentAtNode } from 'react-dom';
 
 import { I18nProvider } from '@kbn/i18n/react';
 import { IUiSettingsClient } from 'kibana/public';
-import type { PersistedState } from '../../visualizations/public';
-import { VisualizationContainer } from '../../visualizations/public';
-import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
-import { TimeseriesRenderValue } from './metrics_fn';
+
+import { VisualizationContainer, PersistedState } from '../../visualizations/public';
+
 import { isVisTableData, TimeseriesVisData } from '../common/types';
-import { TimeseriesVisParams } from './types';
 import { getChartsSetup } from './services';
 
+import type { TimeseriesVisParams } from './types';
+import type { ExpressionRenderDefinition } from '../../expressions/common';
+import type { TimeseriesRenderValue } from './metrics_fn';
+
 const TimeseriesVisualization = lazy(
   () => import('./application/components/timeseries_visualization')
 );
@@ -39,6 +41,10 @@ export const getTimeseriesVisRenderer: (deps: {
   name: 'timeseries_vis',
   reuseDomNode: true,
   render: async (domNode, config, handlers) => {
+    // Build optimization. Move app styles from main bundle
+    // @ts-expect-error TS error, cannot find type declaration for scss
+    await import('./application/index.scss');
+
     handlers.onDestroy(() => {
       unmountComponentAtNode(domNode);
     });

src/plugins/vis_type_timeseries/public/to_ast.ts

@@ -7,9 +7,9 @@
  */
 
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
-import { Vis } from '../../visualizations/public';
-import { TimeseriesExpressionFunctionDefinition } from './metrics_fn';
-import { TimeseriesVisParams } from './types';
+import type { Vis } from '../../visualizations/public';
+import type { TimeseriesExpressionFunctionDefinition } from './metrics_fn';
+import type { TimeseriesVisParams } from './types';
 
 export const toExpressionAst = (vis: Vis<TimeseriesVisParams>) => {
   const timeseries = buildExpressionFunction<TimeseriesExpressionFunctionDefinition>('tsvb', {