Skip to content

Commit

Permalink
[visualizations] lazy load actions (elastic#207147)
Browse files Browse the repository at this point in the history
Clean up visualizations page load size by
* lazy loading actions
* avoid exporting from index files to avoid exporting unused code
* move `urlFor` and `getFullPath` into `url_utils` to avoid including
`utils/saved_visualize_utils` in page load bundle

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
3 people authored Jan 23, 2025
1 parent 8351418 commit d7f801a
Show file tree
Hide file tree
Showing 15 changed files with 60 additions and 45 deletions.
2 changes: 1 addition & 1 deletion packages/kbn-optimizer/limits.yml
Original file line number Diff line number Diff line change
Expand Up @@ -195,5 +195,5 @@ pageLoadAssetSize:
visTypeVega: 153573
visTypeVislib: 242838
visTypeXy: 46868
visualizations: 90000
visualizations: 41000
watcher: 43598
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { updateOldState } from '@kbn/visualizations-plugin/public';
import { updateOldState } from '@kbn/visualizations-plugin/public/legacy/vis_update_state';

/**
* The reason we add this test is to ensure that `convertNumIdsToStringsForTSVB` of the updateOldState runs correctly
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@

import {
AddAggVisualizationPanelAction,
ADD_AGG_VIS_ACTION_ID,
type AddAggVisualizationPanelActionApi,
} from './add_agg_vis_action';
import type { BaseVisType } from '../vis_types/base_vis_type';
import { VisGroups } from '../vis_types/vis_groups_enum';
import { TypesService, type TypesStart } from '../vis_types/types_service';

const mockCompatibleEmbeddableAPI: AddAggVisualizationPanelActionApi = {
type: ADD_AGG_VIS_ACTION_ID,
type: 'anyEmbeddable',
addNewPanel: jest.fn(),
getAppContext: jest.fn(),
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ import { apiCanAddNewPanel, CanAddNewPanel } from '@kbn/presentation-containers'
import { VisGroups } from '../vis_types/vis_groups_enum';
import type { TypesStart } from '../vis_types/types_service';
import { showNewVisModal } from '../wizard/show_new_vis';

export const ADD_AGG_VIS_ACTION_ID = 'ADD_AGG_VIS';
import { ADD_AGG_VIS_ACTION_ID } from './constants';

export type AddAggVisualizationPanelActionApi = HasType & CanAddNewPanel & HasAppContext;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

export { getVisualizeEmbeddableFactoryLazy } from './get_visualize_embeddable_factory_lazy';
export { VIS_EVENT_TO_TRIGGER } from './events';
export const ADD_AGG_VIS_ACTION_ID = 'ADD_AGG_VIS';
export const ACTION_EDIT_IN_LENS = 'ACTION_EDIT_IN_LENS';
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@ import {
getUsageCollection,
} from '../services';
import { DASHBOARD_VISUALIZATION_PANEL_TRIGGER } from '../triggers';

export const ACTION_EDIT_IN_LENS = 'ACTION_EDIT_IN_LENS';
import { ACTION_EDIT_IN_LENS } from './constants';

const displayName = i18n.translate('visualizations.actions.editInLens.displayName', {
defaultMessage: 'Convert to Lens',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { DataPublicPluginStart } from '@kbn/data-plugin/public';
import { CONTEXT_MENU_TRIGGER } from '@kbn/embeddable-plugin/public';
import { ADD_PANEL_TRIGGER, type UiActionsStart } from '@kbn/ui-actions-plugin/public';
import { ACTION_EDIT_IN_LENS, ADD_AGG_VIS_ACTION_ID } from './constants';
import { TypesStart } from '../vis_types/types_service';

export function registerActions(
uiActions: UiActionsStart,
data: DataPublicPluginStart,
types: TypesStart
) {
uiActions.addTriggerActionAsync(CONTEXT_MENU_TRIGGER, ACTION_EDIT_IN_LENS, async () => {
const { EditInLensAction } = await import('./edit_in_lens_action');
return new EditInLensAction(data.query.timefilter.timefilter);
});

uiActions.addTriggerActionAsync(ADD_PANEL_TRIGGER, ADD_AGG_VIS_ACTION_ID, async () => {
const { AddAggVisualizationPanelAction } = await import('./add_agg_vis_action');
return new AddAggVisualizationPanelAction(types);
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from '@kbn/presentation-publishing';
import { TimeRange } from '@kbn/es-query';
import type { Vis } from '../vis';
import { urlFor } from '../utils/saved_visualize_utils';
import { urlFor } from '..';
import { getCapabilities, getEmbeddable } from '../services';

export function initializeEditApi({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { type HasType, apiIsOfType } from '@kbn/presentation-publishing';
import type { HasType } from '@kbn/presentation-publishing';
import { VisParams } from '../../types';
import Vis from '../../vis';

Expand All @@ -18,7 +18,7 @@ export type HasVisualizeConfig = HasType<'visualization'> & {
export const apiHasVisualizeConfig = (api: unknown): api is HasVisualizeConfig => {
return Boolean(
api &&
apiIsOfType(api, 'visualization') &&
(api as HasType)?.type === 'visualization' &&
typeof (api as HasVisualizeConfig).getVis === 'function'
);
};
9 changes: 5 additions & 4 deletions src/platform/plugins/shared/visualizations/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ export function plugin(initializerContext: PluginInitializerContext) {

/** @public static code */
export { TypesService } from './vis_types/types_service';
export { VIS_EVENT_TO_TRIGGER } from './embeddable';
export { VIS_EVENT_TO_TRIGGER } from './embeddable/events';
export { apiHasVisualizeConfig } from './embeddable/interfaces/has_visualize_config';
export { COMMON_VISUALIZATION_GROUPING } from './legacy/embeddable/constants';
export { VisualizationContainer } from './components';
export { getVisSchemas } from './vis_schemas';
export { prepareLogTable } from '../common/utils/prepare_log_table';
export { XYCurveTypes } from '../common/convert_to_lens/constants';
export { urlFor, getFullPath } from './utils/url_utils';

/** @public types */
export type { VisualizationsSetup, VisualizationsStart };
Expand All @@ -40,7 +43,7 @@ export type { VisualizeEditorInput } from './embeddable/types';
export type { Vis, SerializedVis, SerializedVisData, VisData } from './vis';
export type VisualizeEmbeddableContract = PublicContract<VisualizeEmbeddable>;
export type { SchemaConfig } from '../common/types';
export { updateOldState } from './legacy/vis_update_state';

export type { VisualizeInput, VisualizeEmbeddable } from './legacy/embeddable';
export type { HasVisualizeConfig } from './embeddable/interfaces/has_visualize_config';
export type { PersistedState } from './persisted_state';
Expand All @@ -65,15 +68,13 @@ export {
VISUALIZE_EMBEDDABLE_TYPE,
} from '../common/constants';
export type { SavedVisState, VisParams, Dimension } from '../common';
export { prepareLogTable, XYCurveTypes } from '../common';
export type { ExpressionValueVisDimension } from '../common/expression_functions/vis_dimension';
export type {
ExpressionValueXYDimension,
DateHistogramParams,
FakeParams,
HistogramParams,
} from '../common/expression_functions/xy_dimension';
export { urlFor, getFullPath } from './utils/saved_visualize_utils';

export type { IEditorController, EditorRenderProps } from './visualize_app/types';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import type {
VisualizeEmbeddableDeps,
} from './visualize_embeddable';
import { getHttp, getTimeFilter, getCapabilities } from '../../services';
import { urlFor } from '../../utils/saved_visualize_utils';
import { urlFor } from '../..';
import { createVisualizeEmbeddableAsync } from './visualize_embeddable_async';
import { AttributeService } from './attribute_service';
import { ErrorEmbeddable } from './error_embeddable';
Expand Down
19 changes: 5 additions & 14 deletions src/platform/plugins/shared/visualizations/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import type {
ApplicationStart,
SavedObjectsClientContract,
} from '@kbn/core/public';
import { UiActionsStart, UiActionsSetup, ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
import { UiActionsStart, UiActionsSetup } from '@kbn/ui-actions-plugin/public';
import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
import type {
Setup as InspectorSetup,
Expand All @@ -47,11 +47,7 @@ import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
import type { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
import type { ExpressionsSetup, ExpressionsStart } from '@kbn/expressions-plugin/public';
import {
CONTEXT_MENU_TRIGGER,
EmbeddableSetup,
EmbeddableStart,
} from '@kbn/embeddable-plugin/public';
import { EmbeddableSetup, EmbeddableStart } from '@kbn/embeddable-plugin/public';
import type { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
import type { NavigationPublicPluginStart as NavigationStart } from '@kbn/navigation-plugin/public';
import type { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public';
Expand Down Expand Up @@ -119,16 +115,14 @@ import {
setNotifications,
} from './services';
import { VisualizeConstants, VISUALIZE_EMBEDDABLE_TYPE } from '../common/constants';
import { EditInLensAction } from './actions/edit_in_lens_action';
import { ListingViewRegistry } from './types';
import {
LATEST_VERSION,
CONTENT_ID,
VisualizationSavedObjectAttributes,
} from '../common/content_management';
import { AddAggVisualizationPanelAction } from './actions/add_agg_vis_action';
import type { VisualizeSerializedState } from './embeddable/types';
import { getVisualizeEmbeddableFactoryLazy } from './embeddable';
import { registerActions } from './actions/register_actions';

/**
* Interface for this plugin's returned setup/start contracts.
Expand Down Expand Up @@ -403,14 +397,12 @@ export class VisualizationsPlugin
uiActions.registerTrigger(aggBasedVisualizationTrigger);
uiActions.registerTrigger(visualizeEditorTrigger);
uiActions.registerTrigger(dashboardVisualizationPanelTrigger);
const editInLensAction = new EditInLensAction(data.query.timefilter.timefilter);
uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, editInLensAction);
embeddable.registerReactEmbeddableFactory(VISUALIZE_EMBEDDABLE_TYPE, async () => {
const {
plugins: { embeddable: embeddableStart, embeddableEnhanced: embeddableEnhancedStart },
} = start();

const getVisualizeEmbeddableFactory = await getVisualizeEmbeddableFactoryLazy();
const { getVisualizeEmbeddableFactory } = await import('./embeddable/visualize_embeddable');
return getVisualizeEmbeddableFactory({ embeddableStart, embeddableEnhancedStart });
});
embeddable.registerAddFromLibraryType<VisualizationSavedObjectAttributes>({
Expand Down Expand Up @@ -498,8 +490,7 @@ export class VisualizationsPlugin
setSavedObjectTagging(savedObjectsTaggingOss);
}

const addAggVisAction = new AddAggVisualizationPanelAction(types);
uiActions.addTriggerAction(ADD_PANEL_TRIGGER, addAggVisAction);
registerActions(uiActions, data, types);

return {
...types,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { injectReferences, extractReferences } from './saved_visualization_refer
import { OVERWRITE_REJECTED, SAVE_DUPLICATE_REJECTED } from './saved_objects_utils/constants';
import { visualizationsClient } from '../content_management';
import { VisualizationSavedObjectAttributes } from '../../common';
import { urlFor } from './url_utils';

export const SAVED_VIS_TYPE = 'visualization';

Expand All @@ -48,14 +49,6 @@ const getDefaults = (opts: GetVisOptions) => ({
version: 1,
});

export function getFullPath(id: string) {
return `/app/visualize#/edit/${id}`;
}

export function urlFor(id: string) {
return `#/edit/${encodeURIComponent(id)}`;
}

export function mapHitSource(
visTypes: Pick<TypesStart, 'get'>,
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

export const getVisualizeEmbeddableFactoryLazy = async () => {
const { getVisualizeEmbeddableFactory } = await import('./visualize_embeddable');
return getVisualizeEmbeddableFactory;
};
export function getFullPath(id: string) {
return `/app/visualize#/edit/${id}`;
}

export function urlFor(id: string) {
return `#/edit/${encodeURIComponent(id)}`;
}
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { DataView } from '@kbn/data-views-plugin/public';
import type { FieldSpec } from '@kbn/data-plugin/common';
import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
import { TriggerContract } from '@kbn/ui-actions-plugin/public/triggers';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public/embeddable';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public/embeddable/events';
import {
applyChanges,
setState,
Expand Down

0 comments on commit d7f801a

Please sign in to comment.