From aa4f430ed59694b7f8c3d5b318c76e6aef95331e Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 11 Nov 2024 16:38:01 +0100 Subject: [PATCH] [ML] Data Visualizer: Optimize initial load bundles. (#199029) ## Summary Part of https://github.com/elastic/kibana/issues/194171. The `dataVisualizer` plugin loads quite some bundle chunks on the first Kibana load. On `main` it currently looks like this on page load: ![CleanShot 2024-11-05 at 17 51 35@2x](https://github.com/user-attachments/assets/7b2fcc7e-08fb-48b8-a1d9-03063b555e38) This PR refactors how embeddables and UI actions get initialized to avoid loading any additional async bundles on page load. ![CleanShot 2024-11-06 at 10 51 36@2x](https://github.com/user-attachments/assets/019c3c79-49b5-4e63-9b94-3d7b02963a9b) ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) --- packages/kbn-optimizer/limits.yml | 2 +- .../ui_actions/create_field_stats_table.tsx | 38 ++++++++++++++----- .../index_data_visualizer/ui_actions/index.ts | 7 ++-- 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index b0357853720cb..df8a077e844f6 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -33,7 +33,7 @@ pageLoadAssetSize: dataViewFieldEditor: 42021 dataViewManagement: 5300 dataViews: 65000 - dataVisualizer: 27530 + dataVisualizer: 30000 devTools: 38637 discover: 99999 discoverEnhanced: 42730 diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx index 2c1254732c24a..6b788e4acab46 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx @@ -5,29 +5,22 @@ * 2.0. */ +import React from 'react'; + import { i18n } from '@kbn/i18n'; import type { PresentationContainer } from '@kbn/presentation-containers'; -import { tracksOverlays } from '@kbn/presentation-containers'; import type { EmbeddableApiContext } from '@kbn/presentation-publishing'; import type { UiActionsActionDefinition } from '@kbn/ui-actions-plugin/public'; -import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public'; import type { CoreStart } from '@kbn/core-lifecycle-browser'; -import { toMountPoint } from '@kbn/react-kibana-mount'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import React from 'react'; -import { isDefined } from '@kbn/ml-is-defined'; import { COMMON_VISUALIZATION_GROUPING } from '@kbn/visualizations-plugin/public'; import { ENABLE_ESQL } from '@kbn/esql-utils'; -import { FIELD_STATS_EMBEDDABLE_TYPE } from '../embeddables/field_stats/constants'; + import type { DataVisualizerStartDependencies } from '../../common/types/data_visualizer_plugin'; import type { FieldStatisticsTableEmbeddableApi, FieldStatsControlsApi, } from '../embeddables/field_stats/types'; -import { FieldStatsInitializerViewType } from '../embeddables/grid_embeddable/types'; import type { FieldStatsInitialState } from '../embeddables/grid_embeddable/types'; -import { getOrCreateDataViewByIndexPattern } from '../search_strategy/requests/get_data_view_by_index_pattern'; -import { FieldStatisticsInitializer } from '../embeddables/field_stats/field_stats_initializer'; const parentApiIsCompatible = async ( parentApi: unknown @@ -57,6 +50,21 @@ async function updatePanelFromFlyoutEdits({ initialState: FieldStatsInitialState; fieldStatsControlsApi?: FieldStatsControlsApi; }) { + const [ + { getOrCreateDataViewByIndexPattern }, + { FieldStatisticsInitializer }, + { tracksOverlays }, + { toMountPoint }, + { KibanaContextProvider }, + { isDefined }, + ] = await Promise.all([ + import('../search_strategy/requests/get_data_view_by_index_pattern'), + import('../embeddables/field_stats/field_stats_initializer'), + import('@kbn/presentation-containers'), + import('@kbn/react-kibana-mount'), + import('@kbn/kibana-react-plugin/public'), + import('@kbn/ml-is-defined'), + ]); const parentApi = api.parentApi; const overlayTracker = tracksOverlays(parentApi) ? parentApi : undefined; const services = { @@ -148,6 +156,16 @@ export function createAddFieldStatsTableAction( ); }, async execute(context) { + const [ + { IncompatibleActionError }, + { FIELD_STATS_EMBEDDABLE_TYPE }, + { FieldStatsInitializerViewType }, + ] = await Promise.all([ + import('@kbn/ui-actions-plugin/public'), + import('../embeddables/field_stats/constants'), + import('../embeddables/grid_embeddable/types'), + ]); + const presentationContainerParent = await parentApiIsCompatible(context.embeddable); if (!presentationContainerParent) throw new IncompatibleActionError(); diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/index.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/index.ts index faa8f34bdfbd7..ac2f73860e4fb 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/index.ts +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/ui_actions/index.ts @@ -8,14 +8,13 @@ import type { CoreStart } from '@kbn/core-lifecycle-browser'; import type { UiActionsSetup } from '@kbn/ui-actions-plugin/public'; import type { DataVisualizerStartDependencies } from '../../common/types/data_visualizer_plugin'; +import { createAddFieldStatsTableAction } from './create_field_stats_table'; export function registerDataVisualizerUiActions( uiActions: UiActionsSetup, coreStart: CoreStart, pluginStart: DataVisualizerStartDependencies ) { - import('./create_field_stats_table').then(({ createAddFieldStatsTableAction }) => { - const addFieldStatsAction = createAddFieldStatsTableAction(coreStart, pluginStart); - uiActions.addTriggerAction('ADD_PANEL_TRIGGER', addFieldStatsAction); - }); + const addFieldStatsAction = createAddFieldStatsTableAction(coreStart, pluginStart); + uiActions.addTriggerAction('ADD_PANEL_TRIGGER', addFieldStatsAction); }