diff --git a/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts b/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts index e53890de3196e..b5370b3781d11 100644 --- a/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts +++ b/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts @@ -20,7 +20,7 @@ type AggId = IAggConfig['id']; type AggParams = IAggConfig['params']; type AddNewAgg = ActionType; -type DiscardChanges = ActionType; +type DiscardChanges = ActionType; type ChangeAggType = ActionType< EditorStateActionTypes.CHANGE_AGG_TYPE, { aggId: AggId; value: IAggConfig['type'] } @@ -90,7 +90,7 @@ const addNewAgg: EditorActions['addNewAgg'] = (schema) => ({ const discardChanges: EditorActions['discardChanges'] = (vis) => ({ type: EditorStateActionTypes.DISCARD_CHANGES, - payload: vis, + payload: { vis }, }); const changeAggType: EditorActions['changeAggType'] = (aggId, value) => ({ diff --git a/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts b/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts index 8afac862ffb44..4eb26cfc6176f 100644 --- a/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts +++ b/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts @@ -48,7 +48,7 @@ const createEditorStateReducer = } case EditorStateActionTypes.DISCARD_CHANGES: { - return initEditorState(action.payload); + return initEditorState(action.payload.vis); } case EditorStateActionTypes.CHANGE_AGG_TYPE: { diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index cc7ff066f1274..fdfcf5bd7d7cc 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -62,7 +62,6 @@ function DefaultEditor({ if (!visRef.current) { return; } - embeddableHandler.render(visRef.current).then(() => { setTimeout(async () => { eventEmitter.emit('embeddableRendered'); diff --git a/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx b/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx index 1516e35a9c169..214a71616f427 100644 --- a/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx +++ b/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx @@ -77,6 +77,7 @@ export const getGaugeVisTypeDefinition = ( }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: getGaugeOptions(props), schemas: [ { diff --git a/src/plugins/vis_types/gauge/public/vis_type/goal.tsx b/src/plugins/vis_types/gauge/public/vis_type/goal.tsx index d0b4095a05130..0d356a5f2c721 100644 --- a/src/plugins/vis_types/gauge/public/vis_type/goal.tsx +++ b/src/plugins/vis_types/gauge/public/vis_type/goal.tsx @@ -69,6 +69,7 @@ export const getGoalVisTypeDefinition = ( }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: getGaugeOptions(props), schemas: [ { diff --git a/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx b/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx index c10f75129c47c..6e97a3c1fe79e 100644 --- a/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx +++ b/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx @@ -36,6 +36,7 @@ describe('PalettePicker', function () { vis: { type: { editorConfig: { + enableDataViewChange: true, collections: { legendPositions: [ { diff --git a/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts index a7e9f53e703ec..04eac5c64de29 100644 --- a/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts +++ b/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts @@ -60,6 +60,7 @@ export const sampleAreaVis = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs: [ { name: 'advanced', diff --git a/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx b/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx index a9c2d242a2335..4c62af96c9b40 100644 --- a/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx +++ b/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx @@ -63,6 +63,7 @@ export const getHeatmapVisTypeDefinition = ({ }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: getHeatmapOptions({ showElasticChartsOptions, palettes, diff --git a/src/plugins/vis_types/metric/public/metric_vis_type.ts b/src/plugins/vis_types/metric/public/metric_vis_type.ts index b4abdd180a6e8..7c141131fa8e5 100644 --- a/src/plugins/vis_types/metric/public/metric_vis_type.ts +++ b/src/plugins/vis_types/metric/public/metric_vis_type.ts @@ -48,6 +48,7 @@ export const createMetricVisTypeDefinition = (): VisTypeDefinition => }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: MetricVisOptions, schemas: [ { diff --git a/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx b/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx index c69bfe3409dcc..b57b59bb6caa8 100644 --- a/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx +++ b/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx @@ -25,6 +25,7 @@ describe('PalettePicker', function () { vis: { type: { editorConfig: { + enableDataViewChange: true, collections: { legendPositions: [ { diff --git a/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts index 4c638689ca310..e71bb7250dd1a 100644 --- a/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts +++ b/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts @@ -46,6 +46,7 @@ export const samplePieVis = { }, }, editorConfig: { + enableDataViewChange: true, collections: { legendPositions: [ { diff --git a/src/plugins/vis_types/pie/public/vis_type/pie.ts b/src/plugins/vis_types/pie/public/vis_type/pie.ts index d3b0cde93a741..b23f1b3ac4688 100644 --- a/src/plugins/vis_types/pie/public/vis_type/pie.ts +++ b/src/plugins/vis_types/pie/public/vis_type/pie.ts @@ -63,6 +63,7 @@ export const getPieVisTypeDefinition = ({ }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: getPieOptions({ showElasticChartsOptions, palettes, diff --git a/src/plugins/vis_types/table/public/table_vis_type.ts b/src/plugins/vis_types/table/public/table_vis_type.ts index 8662f45c02e7e..80c9d7bb9f00d 100644 --- a/src/plugins/vis_types/table/public/table_vis_type.ts +++ b/src/plugins/vis_types/table/public/table_vis_type.ts @@ -39,6 +39,7 @@ export const tableVisTypeDefinition: VisTypeDefinition = { }, }, editorConfig: { + enableDataViewChange: true, optionsTemplate: TableOptions, schemas: [ { diff --git a/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts b/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts index b29ffac33121c..c278c47dd9022 100644 --- a/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts +++ b/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts @@ -40,6 +40,7 @@ export const getTagCloudVisTypeDefinition = ({ palettes }: TagCloudVisDependenci }, toExpressionAst, editorConfig: { + enableDataViewChange: true, optionsTemplate: getTagCloudOptions({ palettes, }), diff --git a/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts b/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts index 0d82ebf01e46d..0f6f403d16ac8 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts +++ b/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts @@ -440,6 +440,7 @@ export const getVis = (bucketType: string) => { }, }, editorConfig: { + enableDataViewChange: true, collections: { legendPositions: [ { diff --git a/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts index 3c1d87d2efc3c..d1e4af6b4b6c8 100644 --- a/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts +++ b/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts @@ -108,6 +108,7 @@ export const sampleAreaVis = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs: [ { name: 'advanced', diff --git a/src/plugins/vis_types/xy/public/vis_types/area.ts b/src/plugins/vis_types/xy/public/vis_types/area.ts index 8c83c8ac4dcd5..01668680ac24c 100644 --- a/src/plugins/vis_types/xy/public/vis_types/area.ts +++ b/src/plugins/vis_types/xy/public/vis_types/area.ts @@ -127,6 +127,7 @@ export const areaVisTypeDefinition = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs, schemas: [ { diff --git a/src/plugins/vis_types/xy/public/vis_types/histogram.ts b/src/plugins/vis_types/xy/public/vis_types/histogram.ts index d0a4307af198c..5405ac31eba42 100644 --- a/src/plugins/vis_types/xy/public/vis_types/histogram.ts +++ b/src/plugins/vis_types/xy/public/vis_types/histogram.ts @@ -130,6 +130,7 @@ export const histogramVisTypeDefinition = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs, schemas: [ { diff --git a/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts index 2e6708667ded2..aaf4ef2e2d51b 100644 --- a/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts +++ b/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts @@ -129,6 +129,7 @@ export const horizontalBarVisTypeDefinition = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs, schemas: [ { diff --git a/src/plugins/vis_types/xy/public/vis_types/line.ts b/src/plugins/vis_types/xy/public/vis_types/line.ts index 536a71eb6e540..bd528b6565ab2 100644 --- a/src/plugins/vis_types/xy/public/vis_types/line.ts +++ b/src/plugins/vis_types/xy/public/vis_types/line.ts @@ -127,6 +127,7 @@ export const lineVisTypeDefinition = { }, }, editorConfig: { + enableDataViewChange: true, optionTabs, schemas: [ { diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx index 8cff4ccdeb4e9..1ef9eb1153d9e 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx @@ -34,6 +34,7 @@ import { ExpressionAstExpression, } from '@kbn/expressions-plugin/public'; import type { RenderMode } from '@kbn/expressions-plugin'; +import VisualizationError from '../components/visualization_error'; import { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; import { Vis, SerializedVis } from '../vis'; import { getExecutionContext, getExpressions, getTheme, getUiActions } from '../services'; @@ -381,6 +382,12 @@ export class VisualizeEmbeddable this.subscriptions.push(this.handler.loading$.subscribe(this.onContainerLoading)); this.subscriptions.push(this.handler.render$.subscribe(this.onContainerRender)); + this.subscriptions.push( + this.getOutput$().subscribe( + ({ error }) => error && render(, this.domNode) + ) + ); + await this.updateHandler(); } diff --git a/src/plugins/visualizations/public/vis_types/types.ts b/src/plugins/visualizations/public/vis_types/types.ts index 383a238621e1e..60853afe37e63 100644 --- a/src/plugins/visualizations/public/vis_types/types.ts +++ b/src/plugins/visualizations/public/vis_types/types.ts @@ -56,6 +56,7 @@ interface DefaultEditorConfig { [key: string]: Array<{ text: string; value: string }> | Array<{ id: string; label: string }>; }; enableAutoApply?: boolean; + enableDataViewChange?: boolean; defaultSize?: string; optionsTemplate?: DefaultEditorOptionsComponent; optionTabs?: Array<{ diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx index a85e8d0cd6561..b9ff8d98f2ced 100644 --- a/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx +++ b/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx @@ -18,6 +18,7 @@ import { useVisualizeAppState, useEditorUpdates, useLinkedSearchUpdates, + useDataViewUpdates, } from '../utils'; import { VisualizeServices } from '../types'; import { VisualizeEditorCommon } from './visualize_editor_common'; @@ -84,6 +85,7 @@ export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => { visEditorController ); useLinkedSearchUpdates(services, eventEmitter, appState, byValueVisInstance); + useDataViewUpdates(services, eventEmitter, appState, byValueVisInstance); useEffect(() => { // clean up all registered listeners if any is left diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx index fc505d1d74e00..480f0c3d36ee1 100644 --- a/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx +++ b/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx @@ -18,6 +18,7 @@ import { useVisualizeAppState, useEditorUpdates, useLinkedSearchUpdates, + useDataViewUpdates, } from '../utils'; import { VisualizeServices } from '../types'; import { VisualizeEditorCommon } from './visualize_editor_common'; @@ -63,6 +64,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => { visEditorController ); useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance); + useDataViewUpdates(services, eventEmitter, appState, savedVisInstance); useEffect(() => { const { stateTransferService, data } = services; diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx index bc2d20611d3fc..a8d231bd61416 100644 --- a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx +++ b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx @@ -7,6 +7,7 @@ */ import React from 'react'; + import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers'; import { VisualizeEditorCommon } from './visualize_editor_common'; import { VisualizeEditorVisInstance } from '../types'; diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx index e42ee1d0cd6c0..b634f84365627 100644 --- a/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx +++ b/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx @@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import type { DataView } from '@kbn/data-views-plugin/public'; -import { +import type { VisualizeServices, VisualizeAppState, VisualizeAppStateContainer, @@ -151,9 +151,7 @@ const TopNav = ({ hideLensBadge, hideTryInLensBadge, ]); - const [indexPatterns, setIndexPatterns] = useState( - vis.data.indexPattern ? [vis.data.indexPattern] : [] - ); + const [indexPatterns, setIndexPatterns] = useState([]); const showDatePicker = () => { // tsvb loads without an indexPattern initially (TODO investigate). // hide timefilter only if timeFieldName is explicitly undefined. @@ -213,7 +211,9 @@ const TopNav = ({ const asyncSetIndexPattern = async () => { let indexes: DataView[] | undefined; - if (vis.type.getUsedIndexPattern) { + if (vis.data.indexPattern) { + indexes = [vis.data.indexPattern]; + } else if (vis.type.getUsedIndexPattern) { indexes = await vis.type.getUsedIndexPattern(vis.params); } if (!indexes || !indexes.length) { @@ -227,10 +227,28 @@ const TopNav = ({ } }; - if (!vis.data.indexPattern) { - asyncSetIndexPattern(); - } - }, [vis.params, vis.type, vis.data.indexPattern, services.dataViews]); + asyncSetIndexPattern(); + }, [services.dataViews, vis.data.indexPattern, vis.params, vis.type]); + + /** Synchronizing dataView with state **/ + useEffect(() => { + const stateContainerSubscription = stateContainer.state$.subscribe(async ({ dataView }) => { + if ( + dataView && + visInstance.vis.data.indexPattern && + dataView !== visInstance.vis.data.indexPattern.id + ) { + const dataViewFromState = await services.dataViews.get(dataView); + + if (dataViewFromState) { + setIndexPatterns([dataViewFromState]); + } + } + }); + return () => { + stateContainerSubscription.unsubscribe(); + }; + }, [services.dataViews, stateContainer.state$, visInstance.vis.data.indexPattern]); useEffect(() => { const autoRefreshFetchSub = services.data.query.timefilter.timefilter @@ -247,6 +265,22 @@ const TopNav = ({ }; }, [services.data.query.timefilter.timefilter, doReload]); + const shouldShowDataViewPicker = Boolean( + vis.type.editorConfig?.enableDataViewChange && + !vis.data.savedSearchId && + vis.data.indexPattern && + indexPatterns.length + ); + + const onChangeDataView = useCallback( + async (selectedDataViewId: string) => { + if (selectedDataViewId) { + stateContainer.transitions.updateDataView(selectedDataViewId); + } + }, + [stateContainer.transitions] + ); + return isChromeVisible ? ( /** * Most visualizations have all search bar components enabled. @@ -255,6 +289,7 @@ const TopNav = ({ * All visualizations also have the timepicker\autorefresh component, * it is enabled by default in the TopNavMenu component. */ + diff --git a/src/plugins/visualizations/public/visualize_app/types.ts b/src/plugins/visualizations/public/visualize_app/types.ts index 8eb57495d95ab..caa39d8bf9308 100644 --- a/src/plugins/visualizations/public/visualize_app/types.ts +++ b/src/plugins/visualizations/public/visualize_app/types.ts @@ -51,6 +51,7 @@ import type { createVisEmbeddableFromObject } from '../embeddable'; import type { VisEditorsRegistry } from '../vis_editors_registry'; export interface VisualizeAppState { + dataView?: string; filters: Filter[]; uiState: SerializableRecord; vis: SavedVisState; @@ -72,6 +73,7 @@ export interface VisualizeAppStateTransitions { ) => ({ query, parentFilters }: { query?: Query; parentFilters?: Filter[] }) => VisualizeAppState; updateVisState: (state: VisualizeAppState) => (vis: SavedVisState) => VisualizeAppState; updateSavedQuery: (state: VisualizeAppState) => (savedQueryId?: string) => VisualizeAppState; + updateDataView: (state: VisualizeAppState) => (dataViewId?: string) => VisualizeAppState; } export type VisualizeAppStateContainer = ReduxLikeStateContainer< diff --git a/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts b/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts index ab3e631663f40..e9ecfc6fd7af0 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts @@ -48,6 +48,7 @@ const pureTransitions = { filters: union(state.filters, parentFilters), linked: false, }), + updateDataView: (state) => (dataViewId) => ({ ...state, dataView: dataViewId }), updateVisState: (state) => (newVisState) => ({ ...state, vis: toObject(newVisState) }), updateSavedQuery: (state) => (savedQueryId) => { const updatedState = { diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/index.ts b/src/plugins/visualizations/public/visualize_app/utils/use/index.ts index ca2bb3717ff15..6663f2a98958b 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/index.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/index.ts @@ -12,3 +12,4 @@ export { useSavedVisInstance } from './use_saved_vis_instance'; export { useVisualizeAppState } from './use_visualize_app_state'; export { useLinkedSearchUpdates } from './use_linked_search_updates'; export { useVisByValue } from './use_vis_byvalue'; +export { useDataViewUpdates } from './use_data_view_updates'; diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_data_view_updates.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_data_view_updates.ts new file mode 100644 index 0000000000000..b7471457a8d7f --- /dev/null +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_data_view_updates.ts @@ -0,0 +1,57 @@ +/* + * 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 { useEffect } from 'react'; +import type { Subscription } from 'rxjs'; +import type { EventEmitter } from 'events'; +import type { DataView } from '@kbn/data-views-plugin/common'; +import type { + VisualizeServices, + VisualizeAppStateContainer, + VisualizeEditorVisInstance, +} from '../../types'; +import { VisualizeAppState } from '../../types'; + +export const updateDataView = (visInstance: VisualizeEditorVisInstance, dataView: DataView) => { + visInstance.vis.data.indexPattern = dataView; + visInstance.vis.data.searchSource?.setField('index', dataView); +}; + +export const useDataViewUpdates = ( + services: VisualizeServices, + eventEmitter: EventEmitter, + appState: VisualizeAppStateContainer | null, + visInstance: VisualizeEditorVisInstance | undefined +) => { + useEffect(() => { + let stateUpdatesSubscription: Subscription; + + if (appState && visInstance) { + const syncDataView = async ({ dataView }: VisualizeAppState) => { + if ( + dataView && + visInstance.vis.data.indexPattern && + dataView !== visInstance.vis.data.indexPattern.id + ) { + const selectedDataView = await services.dataViews.get(dataView); + if (selectedDataView) { + updateDataView(visInstance, selectedDataView); + visInstance.embeddableHandler.reload(); + eventEmitter.emit('updateEditor'); + } + } + }; + + syncDataView(appState.getState()); + stateUpdatesSubscription = appState.state$.subscribe(syncDataView); + } + return () => { + stateUpdatesSubscription?.unsubscribe(); + }; + }, [appState, eventEmitter, services.dataViews, visInstance]); +}; diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx b/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx index 70f3413da0419..f56afa234d65e 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx @@ -100,6 +100,7 @@ export const useVisualizeAppState = ( const { aggs, ...visState } = currentAppState.vis; const query = currentAppState.query; const filter = currentAppState.filters; + const visSearchSource = instance.vis.data.searchSource?.getSerializedFields() || {}; instance.vis .setState({