From 97462409c8580072a618d1f592e452f1d7329cb5 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 26 Apr 2021 17:01:34 +0300 Subject: [PATCH 1/3] [visualizations] Reduce page load bundle to under 100kB --- .../visualizations/public/components/index.ts | 4 +- .../components/visualization_container.tsx | 5 +- .../visualize_embeddable_factory.tsx | 24 ++++----- src/plugins/visualizations/public/index.ts | 7 ++- src/plugins/visualizations/public/plugin.ts | 53 ++++++++++--------- .../saved_visualizations/find_list_items.ts | 2 +- .../saved_visualizations.ts | 2 +- src/plugins/visualizations/public/services.ts | 4 +- src/plugins/visualizations/public/types.ts | 8 +-- src/plugins/visualizations/public/vis.ts | 3 ++ src/plugins/visualizations/public/vis_lazy.ts | 20 +++++++ .../public/vis_types/base_vis_type.ts | 5 +- .../visualizations/public/vis_types/index.ts | 2 +- .../visualizations/public/vis_types/types.ts | 17 +++--- .../public/vis_types/types_service.ts | 3 +- .../public/vis_types/vis_groups_enum.ts | 13 +++++ .../agg_based_selection.tsx | 2 +- .../group_selection/group_selection.tsx | 4 +- .../public/wizard/new_vis_modal.test.tsx | 3 +- 19 files changed, 110 insertions(+), 71 deletions(-) create mode 100644 src/plugins/visualizations/public/vis_lazy.ts create mode 100644 src/plugins/visualizations/public/vis_types/vis_groups_enum.ts diff --git a/src/plugins/visualizations/public/components/index.ts b/src/plugins/visualizations/public/components/index.ts index 283132094378d..fda56acf166af 100644 --- a/src/plugins/visualizations/public/components/index.ts +++ b/src/plugins/visualizations/public/components/index.ts @@ -6,4 +6,6 @@ * Side Public License, v 1. */ -export { VisualizationContainer } from './visualization_container'; +import { lazy } from 'react'; + +export const VisualizationContainer = lazy(() => import('./visualization_container')); diff --git a/src/plugins/visualizations/public/components/visualization_container.tsx b/src/plugins/visualizations/public/components/visualization_container.tsx index 063715b6438eb..845906f7fbbae 100644 --- a/src/plugins/visualizations/public/components/visualization_container.tsx +++ b/src/plugins/visualizations/public/components/visualization_container.tsx @@ -13,7 +13,7 @@ import { VisualizationNoResults } from './visualization_noresults'; import { VisualizationError } from './visualization_error'; import { IInterpreterRenderHandlers } from '../../../expressions/common'; -interface VisualizationContainerProps { +export interface VisualizationContainerProps { 'data-test-subj'?: string; className?: string; children: ReactNode; @@ -52,3 +52,6 @@ export const VisualizationContainer = ({ ); }; + +// eslint-disable-next-line import/no-default-export +export default VisualizationContainer; diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx index 48bff8d203ebd..8d59a76e39fc3 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx @@ -7,12 +7,12 @@ */ import { i18n } from '@kbn/i18n'; -import { SavedObjectMetaData, OnSaveProps } from 'src/plugins/saved_objects/public'; import { first } from 'rxjs/operators'; -import { EmbeddableStateWithType } from 'src/plugins/embeddable/common'; -import { SavedObjectAttributes } from '../../../../core/public'; +import type { SavedObjectMetaData, OnSaveProps } from 'src/plugins/saved_objects/public'; +import type { EmbeddableStateWithType } from 'src/plugins/embeddable/common'; + import { extractSearchSourceReferences } from '../../../data/public'; -import { SavedObjectReference } from '../../../../core/public'; +import type { SavedObjectAttributes, SavedObjectReference } from '../../../../core/public'; import { EmbeddableFactoryDefinition, @@ -21,7 +21,7 @@ import { IContainer, AttributeService, } from '../../../embeddable/public'; -import { DisabledLabEmbeddable } from './disabled_lab_embeddable'; +import type { DisabledLabEmbeddable } from './disabled_lab_embeddable'; import { VisualizeByReferenceInput, VisualizeByValueInput, @@ -31,7 +31,8 @@ import { VisualizeSavedObjectAttributes, } from './visualize_embeddable'; import { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; -import { SerializedVis, Vis } from '../vis'; +import type { SerializedVis, Vis } from '../vis'; +import { createVisAsync } from '../vis_lazy'; import { getCapabilities, getTypes, @@ -47,10 +48,10 @@ import { injectControlsReferences, } from '../saved_visualizations/saved_visualization_references'; import { createVisEmbeddableFromObject } from './create_vis_embeddable_from_object'; -import { StartServicesGetter } from '../../../kibana_utils/public'; -import { VisualizationsStartDeps } from '../plugin'; import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants'; import { checkForDuplicateTitle } from '../../../saved_objects/public'; +import type { StartServicesGetter } from '../../../kibana_utils/public'; +import type { VisualizationsStartDeps } from '../plugin'; interface VisualizationAttributes extends SavedObjectAttributes { visState: string; @@ -147,8 +148,8 @@ export class VisualizeEmbeddableFactory try { const savedObject = await savedVisualizations.get(savedObjectId); const visState = convertToSerializedVis(savedObject); - const vis = new Vis(savedObject.visState.type, visState); - await vis.setState(visState); + const vis = await createVisAsync(savedObject.visState.type, visState); + return createVisEmbeddableFromObject(this.deps)( vis, input, @@ -167,8 +168,7 @@ export class VisualizeEmbeddableFactory // to allow for in place creation of visualizations without having to navigate away to a new URL. if (input.savedVis) { const visState = input.savedVis; - const vis = new Vis(visState.type, visState); - await vis.setState(visState); + const vis = await createVisAsync(visState.type, visState); const savedVisualizations = getSavedVisualizationsLoader(); return createVisEmbeddableFromObject(this.deps)( vis, diff --git a/src/plugins/visualizations/public/index.ts b/src/plugins/visualizations/public/index.ts index dbcbb864d2316..2b4c4a57497ca 100644 --- a/src/plugins/visualizations/public/index.ts +++ b/src/plugins/visualizations/public/index.ts @@ -16,7 +16,6 @@ export function plugin(initializerContext: PluginInitializerContext) { } /** @public static code */ -export { Vis } from './vis'; export { TypesService } from './vis_types/types_service'; export { VISUALIZE_EMBEDDABLE_TYPE, VIS_EVENT_TO_TRIGGER } from './embeddable'; export { VisualizationContainer } from './components'; @@ -24,15 +23,15 @@ export { getVisSchemas } from './vis_schemas'; /** @public types */ export { VisualizationsSetup, VisualizationsStart }; -export { VisGroups } from './vis_types'; +export { VisGroups } from './vis_types/vis_groups_enum'; export type { BaseVisType, VisTypeAlias, VisTypeDefinition, Schema, ISchemas } from './vis_types'; -export { SerializedVis, SerializedVisData, VisData } from './vis'; +export type { Vis, SerializedVis, SerializedVisData, VisData } from './vis'; export type VisualizeEmbeddableFactoryContract = PublicContract; export type VisualizeEmbeddableContract = PublicContract; export { VisualizeInput } from './embeddable'; export { SchemaConfig } from './vis_schemas'; export { updateOldState } from './legacy/vis_update_state'; -export { PersistedState } from './persisted_state'; +export type { PersistedState } from './persisted_state'; export { ISavedVis, VisSavedObject, diff --git a/src/plugins/visualizations/public/plugin.ts b/src/plugins/visualizations/public/plugin.ts index 081f5d65103c2..e5ed49ac49bc3 100644 --- a/src/plugins/visualizations/public/plugin.ts +++ b/src/plugins/visualizations/public/plugin.ts @@ -8,15 +8,6 @@ import './index.scss'; -import { - PluginInitializerContext, - CoreSetup, - CoreStart, - Plugin, - ApplicationStart, - SavedObjectsClientContract, -} from '../../../core/public'; -import { TypesService, TypesSetup, TypesStart } from './vis_types'; import { setUISettings, setTypes, @@ -42,27 +33,42 @@ import { VisualizeEmbeddableFactory, createVisEmbeddableFromObject, } from './embeddable'; -import { ExpressionsSetup, ExpressionsStart } from '../../expressions/public'; -import { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public'; +import { TypesService } from './vis_types/types_service'; import { range as rangeExpressionFunction } from './expression_functions/range'; import { visDimension as visDimensionExpressionFunction } from './expression_functions/vis_dimension'; -import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public'; -import { - Setup as InspectorSetup, - Start as InspectorStart, -} from '../../../plugins/inspector/public'; -import { UsageCollectionSetup } from '../../usage_collection/public'; + import { createStartServicesGetter, StartServicesGetter } from '../../kibana_utils/public'; import { createSavedVisLoader, SavedVisualizationsLoader } from './saved_visualizations'; -import { SerializedVis, Vis } from './vis'; +import type { SerializedVis, Vis } from './vis'; import { showNewVisModal } from './wizard'; -import { UiActionsStart } from '../../ui_actions/public'; + import { convertFromSerializedVis, convertToSerializedVis, } from './saved_visualizations/_saved_vis'; + import { createSavedSearchesLoader } from '../../discover/public'; -import { SavedObjectsStart } from '../../saved_objects/public'; + +import type { + PluginInitializerContext, + CoreSetup, + CoreStart, + Plugin, + ApplicationStart, + SavedObjectsClientContract, +} from '../../../core/public'; +import type { UsageCollectionSetup } from '../../usage_collection/public'; +import type { UiActionsStart } from '../../ui_actions/public'; +import type { SavedObjectsStart } from '../../saved_objects/public'; +import type { TypesSetup, TypesStart } from './vis_types'; +import type { + Setup as InspectorSetup, + Start as InspectorStart, +} from '../../../plugins/inspector/public'; +import type { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public'; +import type { ExpressionsSetup, ExpressionsStart } from '../../expressions/public'; +import type { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public'; +import { createVisAsync } from './vis_lazy'; /** * Interface for this plugin's returned setup/start contracts. @@ -180,11 +186,8 @@ export class VisualizationsPlugin * @param {IIndexPattern} indexPattern - index pattern to use * @param {VisState} visState - visualization configuration */ - createVis: async (visType: string, visState: SerializedVis) => { - const vis = new Vis(visType); - await vis.setState(visState); - return vis; - }, + createVis: async (visType: string, visState: SerializedVis) => + await createVisAsync(visType, visState), convertToSerializedVis, convertFromSerializedVis, savedVisualizationsLoader, diff --git a/src/plugins/visualizations/public/saved_visualizations/find_list_items.ts b/src/plugins/visualizations/public/saved_visualizations/find_list_items.ts index b978cf3db75b9..f000b18413ce3 100644 --- a/src/plugins/visualizations/public/saved_visualizations/find_list_items.ts +++ b/src/plugins/visualizations/public/saved_visualizations/find_list_items.ts @@ -14,7 +14,7 @@ import { SavedObjectsFindOptions, } from '../../../../core/public'; import { SavedObjectLoader } from '../../../../plugins/saved_objects/public'; -import { VisTypeAlias } from '../vis_types'; +import type { VisTypeAlias } from '../vis_types'; import { VisualizationsAppExtension } from '../vis_types/vis_type_alias_registry'; /** diff --git a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts index 33b9a7f6a1d4f..89a69c9107876 100644 --- a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts +++ b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts @@ -10,7 +10,7 @@ import { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/p import { SavedObjectLoader } from '../../../../plugins/saved_objects/public'; import { findListItems } from './find_list_items'; import { createSavedVisClass, SavedVisServices } from './_saved_vis'; -import { TypesStart } from '../vis_types'; +import type { TypesStart } from '../vis_types'; export interface SavedVisServicesWithVisualizations extends SavedVisServices { visualizationTypes: TypesStart; diff --git a/src/plugins/visualizations/public/services.ts b/src/plugins/visualizations/public/services.ts index 6820ba1e8a92a..b135e0556ace4 100644 --- a/src/plugins/visualizations/public/services.ts +++ b/src/plugins/visualizations/public/services.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { +import type { ApplicationStart, Capabilities, ChromeStart, @@ -16,7 +16,7 @@ import { SavedObjectsStart, DocLinksStart, } from '../../../core/public'; -import { TypesStart } from './vis_types'; +import type { TypesStart } from './vis_types'; import { createGetterSetter } from '../../../plugins/kibana_utils/public'; import { DataPublicPluginStart, TimefilterContract } from '../../../plugins/data/public'; import { UsageCollectionSetup } from '../../../plugins/usage_collection/public'; diff --git a/src/plugins/visualizations/public/types.ts b/src/plugins/visualizations/public/types.ts index 6241f9ee4ae12..c6eceb86b3450 100644 --- a/src/plugins/visualizations/public/types.ts +++ b/src/plugins/visualizations/public/types.ts @@ -15,11 +15,11 @@ import { } from '../../../plugins/data/public'; import { ExpressionAstExpression } from '../../expressions/public'; -import { SerializedVis, Vis } from './vis'; -import { PersistedState } from './persisted_state'; -import { VisParams } from '../common'; +import type { SerializedVis, Vis } from './vis'; +import type { PersistedState } from './persisted_state'; +import type { VisParams } from '../common'; -export { Vis, SerializedVis, VisParams }; +export type { Vis, SerializedVis, VisParams }; export interface SavedVisState { title: string; type: string; diff --git a/src/plugins/visualizations/public/vis.ts b/src/plugins/visualizations/public/vis.ts index 4dd14a6a4a5a1..ff4e8a3794e0d 100644 --- a/src/plugins/visualizations/public/vis.ts +++ b/src/plugins/visualizations/public/vis.ts @@ -213,3 +213,6 @@ export class Vis { return newConfigs; } } + +// eslint-disable-next-line import/no-default-export +export default Vis; diff --git a/src/plugins/visualizations/public/vis_lazy.ts b/src/plugins/visualizations/public/vis_lazy.ts new file mode 100644 index 0000000000000..e2e3538d13f1c --- /dev/null +++ b/src/plugins/visualizations/public/vis_lazy.ts @@ -0,0 +1,20 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { SerializedVis } from './vis'; +import type { VisParams } from '../common'; + +export const createVisAsync = async ( + visType: string, + visState: SerializedVis = {} as any +) => { + const { Vis } = await import('./vis'); + const vis = new Vis(visType, visState); + await vis.setState(visState); + return vis; +}; diff --git a/src/plugins/visualizations/public/vis_types/base_vis_type.ts b/src/plugins/visualizations/public/vis_types/base_vis_type.ts index a523585b48c55..669bfb7f36524 100644 --- a/src/plugins/visualizations/public/vis_types/base_vis_type.ts +++ b/src/plugins/visualizations/public/vis_types/base_vis_type.ts @@ -8,8 +8,9 @@ import { defaultsDeep } from 'lodash'; -import { VisParams } from '../types'; -import { VisTypeDefinition, VisTypeOptions, VisGroups } from './types'; +import type { VisParams } from '../types'; +import type { VisTypeDefinition, VisTypeOptions } from './types'; +import { VisGroups } from './vis_groups_enum'; import { Schemas } from './schemas'; const defaultOptions: VisTypeOptions = { diff --git a/src/plugins/visualizations/public/vis_types/index.ts b/src/plugins/visualizations/public/vis_types/index.ts index 4d9abf2e42611..365f0d51bf4f3 100644 --- a/src/plugins/visualizations/public/vis_types/index.ts +++ b/src/plugins/visualizations/public/vis_types/index.ts @@ -8,6 +8,6 @@ export * from './types_service'; export { Schemas } from './schemas'; -export { VisGroups } from './types'; +export { VisGroups } from './vis_groups_enum'; export { BaseVisType } from './base_vis_type'; export type { VisTypeDefinition, ISchemas, Schema } from './types'; diff --git a/src/plugins/visualizations/public/vis_types/types.ts b/src/plugins/visualizations/public/vis_types/types.ts index f2431a98d2f84..7cfa31adfca4a 100644 --- a/src/plugins/visualizations/public/vis_types/types.ts +++ b/src/plugins/visualizations/public/vis_types/types.ts @@ -6,11 +6,12 @@ * Side Public License, v 1. */ -import { IconType } from '@elastic/eui'; -import { ReactNode } from 'react'; -import { Adapters } from 'src/plugins/inspector'; -import { IndexPattern, AggGroupNames, AggParam, AggGroupName } from '../../../data/public'; -import { Vis, VisEditorOptionsProps, VisParams, VisToExpressionAst } from '../types'; +import type { IconType } from '@elastic/eui'; +import type { ReactNode } from 'react'; +import type { Adapters } from 'src/plugins/inspector'; +import type { IndexPattern, AggGroupNames, AggParam, AggGroupName } from '../../../data/public'; +import type { Vis, VisEditorOptionsProps, VisParams, VisToExpressionAst } from '../types'; +import { VisGroups } from './vis_groups_enum'; export interface VisTypeOptions { showTimePicker: boolean; @@ -20,12 +21,6 @@ export interface VisTypeOptions { hierarchicalData: boolean; } -export enum VisGroups { - PROMOTED = 'promoted', - TOOLS = 'tools', - AGGBASED = 'aggbased', -} - export interface ISchemas { [AggGroupNames.Buckets]: Schema[]; [AggGroupNames.Metrics]: Schema[]; diff --git a/src/plugins/visualizations/public/vis_types/types_service.ts b/src/plugins/visualizations/public/vis_types/types_service.ts index 176873e94064f..567da272dfd0a 100644 --- a/src/plugins/visualizations/public/vis_types/types_service.ts +++ b/src/plugins/visualizations/public/vis_types/types_service.ts @@ -8,7 +8,8 @@ import { visTypeAliasRegistry, VisTypeAlias } from './vis_type_alias_registry'; import { BaseVisType } from './base_vis_type'; -import { VisTypeDefinition, VisGroups } from './types'; +import { VisTypeDefinition } from './types'; +import { VisGroups } from './vis_groups_enum'; /** * Vis Types Service diff --git a/src/plugins/visualizations/public/vis_types/vis_groups_enum.ts b/src/plugins/visualizations/public/vis_types/vis_groups_enum.ts new file mode 100644 index 0000000000000..c8bd320c2f61b --- /dev/null +++ b/src/plugins/visualizations/public/vis_types/vis_groups_enum.ts @@ -0,0 +1,13 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +export enum VisGroups { + PROMOTED = 'promoted', + TOOLS = 'tools', + AGGBASED = 'aggbased', +} diff --git a/src/plugins/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx b/src/plugins/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx index 56973cc05db2f..aea80f83aa0be 100644 --- a/src/plugins/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx +++ b/src/plugins/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx @@ -25,8 +25,8 @@ import { } from '@elastic/eui'; import { memoizeLast } from '../../legacy/memoize'; +import { VisGroups } from '../../vis_types/vis_groups_enum'; import type { BaseVisType, TypesStart } from '../../vis_types'; -import { VisGroups } from '../../vis_types'; import { DialogNavigation } from '../dialog_navigation'; interface VisTypeListEntry { diff --git a/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx b/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx index 734be23558e13..b28d980424ebf 100644 --- a/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx +++ b/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx @@ -29,9 +29,9 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { DocLinksStart } from '../../../../../core/public'; -import { VisTypeAlias } from '../../vis_types/vis_type_alias_registry'; import type { BaseVisType, TypesStart } from '../../vis_types'; -import { VisGroups } from '../../vis_types'; +import { VisGroups } from '../../vis_types/vis_groups_enum'; +import type { VisTypeAlias } from '../../vis_types/vis_type_alias_registry'; import './group_selection.scss'; interface GroupSelectionProps { diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx index 27268d8dc7b73..29d8c58e617e2 100644 --- a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx +++ b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx @@ -8,11 +8,10 @@ import React from 'react'; import { mountWithIntl } from '@kbn/test/jest'; -import { TypesStart, VisGroups } from '../vis_types'; +import { TypesStart, VisGroups, BaseVisType } from '../vis_types'; import NewVisModal from './new_vis_modal'; import { ApplicationStart, SavedObjectsStart, DocLinksStart } from '../../../../core/public'; import { embeddablePluginMock } from '../../../embeddable/public/mocks'; -import { BaseVisType } from '../vis_types'; describe('NewVisModal', () => { const defaultVisTypeParams = { From f222616799c68c62e066690741ca1b542ea6460c Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Tue, 27 Apr 2021 13:48:46 +0300 Subject: [PATCH 2/3] move scss to async chunks --- packages/kbn-optimizer/limits.yml | 2 +- .../public/components/_index.scss | 1 - .../visualizations/public/components/index.ts | 4 +--- .../components/visualization_container.tsx | 11 +++++----- .../public/components/visualization_error.tsx | 3 +++ .../components/visualization_noresults.tsx | 3 +++ .../public/embeddable/_index.scss | 1 - .../create_vis_embeddable_from_object.ts | 5 +++-- .../{_embeddables.scss => embeddables.scss} | 0 .../visualizations/public/embeddable/index.ts | 3 ++- .../embeddable/visualize_embeddable_async.ts | 21 +++++++++++++++++++ .../visualize_embeddable_factory.tsx | 4 ++-- src/plugins/visualizations/public/index.scss | 2 -- src/plugins/visualizations/public/index.ts | 2 +- src/plugins/visualizations/public/plugin.ts | 5 +---- .../public/saved_visualizations/_saved_vis.ts | 8 +++---- .../saved_visualizations.ts | 2 +- .../_visualization.scss => vis.scss} | 0 .../public/{vis_lazy.ts => vis_async.ts} | 5 +++++ 19 files changed, 53 insertions(+), 29 deletions(-) delete mode 100644 src/plugins/visualizations/public/components/_index.scss delete mode 100644 src/plugins/visualizations/public/embeddable/_index.scss rename src/plugins/visualizations/public/embeddable/{_embeddables.scss => embeddables.scss} (100%) create mode 100644 src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts delete mode 100644 src/plugins/visualizations/public/index.scss rename src/plugins/visualizations/public/{components/_visualization.scss => vis.scss} (100%) rename src/plugins/visualizations/public/{vis_lazy.ts => vis_async.ts} (81%) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 2a7a02b8e7f2f..a3db984735fea 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -96,7 +96,7 @@ pageLoadAssetSize: visTypeVega: 153573 visTypeVislib: 242838 visTypeXy: 113478 - visualizations: 295025 + visualizations: 90000 visualize: 57431 watcher: 43598 runtimeFields: 41752 diff --git a/src/plugins/visualizations/public/components/_index.scss b/src/plugins/visualizations/public/components/_index.scss deleted file mode 100644 index 532e8106b023f..0000000000000 --- a/src/plugins/visualizations/public/components/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'visualization'; diff --git a/src/plugins/visualizations/public/components/index.ts b/src/plugins/visualizations/public/components/index.ts index fda56acf166af..283132094378d 100644 --- a/src/plugins/visualizations/public/components/index.ts +++ b/src/plugins/visualizations/public/components/index.ts @@ -6,6 +6,4 @@ * Side Public License, v 1. */ -import { lazy } from 'react'; - -export const VisualizationContainer = lazy(() => import('./visualization_container')); +export { VisualizationContainer } from './visualization_container'; diff --git a/src/plugins/visualizations/public/components/visualization_container.tsx b/src/plugins/visualizations/public/components/visualization_container.tsx index 845906f7fbbae..a978718c9aa2b 100644 --- a/src/plugins/visualizations/public/components/visualization_container.tsx +++ b/src/plugins/visualizations/public/components/visualization_container.tsx @@ -6,11 +6,10 @@ * Side Public License, v 1. */ -import React, { ReactNode, Suspense } from 'react'; +import React, { ReactNode, Suspense, lazy } from 'react'; import { EuiLoadingChart } from '@elastic/eui'; import classNames from 'classnames'; -import { VisualizationNoResults } from './visualization_noresults'; -import { VisualizationError } from './visualization_error'; + import { IInterpreterRenderHandlers } from '../../../expressions/common'; export interface VisualizationContainerProps { @@ -22,6 +21,9 @@ export interface VisualizationContainerProps { error?: string; } +const VisualizationNoResults = lazy(() => import('./visualization_noresults')); +const VisualizationError = lazy(() => import('./visualization_error')); + export const VisualizationContainer = ({ 'data-test-subj': dataTestSubj = '', className, @@ -52,6 +54,3 @@ export const VisualizationContainer = ({ ); }; - -// eslint-disable-next-line import/no-default-export -export default VisualizationContainer; diff --git a/src/plugins/visualizations/public/components/visualization_error.tsx b/src/plugins/visualizations/public/components/visualization_error.tsx index c72933df43491..c715774b8b13a 100644 --- a/src/plugins/visualizations/public/components/visualization_error.tsx +++ b/src/plugins/visualizations/public/components/visualization_error.tsx @@ -44,3 +44,6 @@ export class VisualizationError extends React.Component async ( vis: Vis, @@ -72,7 +73,7 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe dashboardSave: Boolean(getCapabilities().dashboard?.showWriteControls), }; - return new VisualizeEmbeddable( + return createVisualizeEmbeddableAsync( getTimeFilter(), { vis, diff --git a/src/plugins/visualizations/public/embeddable/_embeddables.scss b/src/plugins/visualizations/public/embeddable/embeddables.scss similarity index 100% rename from src/plugins/visualizations/public/embeddable/_embeddables.scss rename to src/plugins/visualizations/public/embeddable/embeddables.scss diff --git a/src/plugins/visualizations/public/embeddable/index.ts b/src/plugins/visualizations/public/embeddable/index.ts index 8f3ce60fad671..dc9029f2927b8 100644 --- a/src/plugins/visualizations/public/embeddable/index.ts +++ b/src/plugins/visualizations/public/embeddable/index.ts @@ -7,8 +7,9 @@ */ export { DisabledLabEmbeddable } from './disabled_lab_embeddable'; -export { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable'; export { VisualizeEmbeddableFactory } from './visualize_embeddable_factory'; export { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; export { VIS_EVENT_TO_TRIGGER } from './events'; export { createVisEmbeddableFromObject } from './create_vis_embeddable_from_object'; + +export type { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable'; diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts new file mode 100644 index 0000000000000..c7480844adbea --- /dev/null +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts @@ -0,0 +1,21 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { VisualizeEmbeddable as VisualizeEmbeddableType } from './visualize_embeddable'; + +export const createVisualizeEmbeddableAsync = async ( + ...args: ConstructorParameters +) => { + // Build optimization. Move app styles from main bundle + // @ts-expect-error TS error, cannot find type declaration for scss + await import('./embeddables.scss'); + + const { VisualizeEmbeddable } = await import('./visualize_embeddable'); + + return new VisualizeEmbeddable(...args); +}; diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx index 8d59a76e39fc3..3ccdfb7e47d70 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx @@ -22,7 +22,7 @@ import { AttributeService, } from '../../../embeddable/public'; import type { DisabledLabEmbeddable } from './disabled_lab_embeddable'; -import { +import type { VisualizeByReferenceInput, VisualizeByValueInput, VisualizeEmbeddable, @@ -32,7 +32,7 @@ import { } from './visualize_embeddable'; import { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; import type { SerializedVis, Vis } from '../vis'; -import { createVisAsync } from '../vis_lazy'; +import { createVisAsync } from '../vis_async'; import { getCapabilities, getTypes, diff --git a/src/plugins/visualizations/public/index.scss b/src/plugins/visualizations/public/index.scss deleted file mode 100644 index 0202419cea232..0000000000000 --- a/src/plugins/visualizations/public/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'embeddable/index'; -@import 'components/index'; diff --git a/src/plugins/visualizations/public/index.ts b/src/plugins/visualizations/public/index.ts index 2b4c4a57497ca..081023d0039e7 100644 --- a/src/plugins/visualizations/public/index.ts +++ b/src/plugins/visualizations/public/index.ts @@ -9,7 +9,7 @@ import { PublicContract } from '@kbn/utility-types'; import { PluginInitializerContext } from 'src/core/public'; import { VisualizationsPlugin, VisualizationsSetup, VisualizationsStart } from './plugin'; -import { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable'; +import type { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable'; export function plugin(initializerContext: PluginInitializerContext) { return new VisualizationsPlugin(initializerContext); diff --git a/src/plugins/visualizations/public/plugin.ts b/src/plugins/visualizations/public/plugin.ts index e5ed49ac49bc3..c248ae180e8e6 100644 --- a/src/plugins/visualizations/public/plugin.ts +++ b/src/plugins/visualizations/public/plugin.ts @@ -5,9 +5,6 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ - -import './index.scss'; - import { setUISettings, setTypes, @@ -68,7 +65,7 @@ import type { import type { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public'; import type { ExpressionsSetup, ExpressionsStart } from '../../expressions/public'; import type { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public'; -import { createVisAsync } from './vis_lazy'; +import { createVisAsync } from './vis_async'; /** * Interface for this plugin's returned setup/start contracts. diff --git a/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts b/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts index 73f676588c385..626fee0db495c 100644 --- a/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts +++ b/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts @@ -13,14 +13,14 @@ * * NOTE: It's a type of SavedObject, but specific to visualizations. */ -import { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public'; +import type { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public'; // @ts-ignore import { updateOldState } from '../legacy/vis_update_state'; import { extractReferences, injectReferences } from './saved_visualization_references'; -import { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public'; -import { ISavedVis, SerializedVis } from '../types'; import { createSavedSearchesLoader } from '../../../discover/public'; -import { SavedObjectsClientContract } from '../../../../core/public'; +import type { SavedObjectsClientContract } from '../../../../core/public'; +import type { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public'; +import type { ISavedVis, SerializedVis } from '../types'; export interface SavedVisServices { savedObjectsClient: SavedObjectsClientContract; diff --git a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts index 89a69c9107876..d07d28b393dcc 100644 --- a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts +++ b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public'; +import type { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public'; import { SavedObjectLoader } from '../../../../plugins/saved_objects/public'; import { findListItems } from './find_list_items'; import { createSavedVisClass, SavedVisServices } from './_saved_vis'; diff --git a/src/plugins/visualizations/public/components/_visualization.scss b/src/plugins/visualizations/public/vis.scss similarity index 100% rename from src/plugins/visualizations/public/components/_visualization.scss rename to src/plugins/visualizations/public/vis.scss diff --git a/src/plugins/visualizations/public/vis_lazy.ts b/src/plugins/visualizations/public/vis_async.ts similarity index 81% rename from src/plugins/visualizations/public/vis_lazy.ts rename to src/plugins/visualizations/public/vis_async.ts index e2e3538d13f1c..0996e5da48c36 100644 --- a/src/plugins/visualizations/public/vis_lazy.ts +++ b/src/plugins/visualizations/public/vis_async.ts @@ -13,8 +13,13 @@ export const createVisAsync = async ( visType: string, visState: SerializedVis = {} as any ) => { + // Build optimization. Move app styles from main bundle + // @ts-expect-error TS error, cannot find type declaration for scss + await import('./vis.scss'); + const { Vis } = await import('./vis'); const vis = new Vis(visType, visState); + await vis.setState(visState); return vis; }; From 8653719fc3f123559a5062ee9ddf92d8b7be61aa Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Tue, 27 Apr 2021 17:06:51 +0300 Subject: [PATCH 3/3] fix CI --- .../kbn_tp_run_pipeline/public/app/components/main.scss | 9 +++++++++ .../kbn_tp_run_pipeline/public/app/components/main.tsx | 1 + 2 files changed, 10 insertions(+) create mode 100644 test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.scss diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.scss b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.scss new file mode 100644 index 0000000000000..8e30ec49e4418 --- /dev/null +++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.scss @@ -0,0 +1,9 @@ +.visualization { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: auto; + position: relative; + flex: 1 1 100%; +} diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx index 4a5c12b9f1132..cf720657291f8 100644 --- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx +++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx @@ -5,6 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ +import './main.scss'; import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiPageContentHeader } from '@elastic/eui';