diff --git a/src/legacy/core_plugins/input_control_vis/public/vis_controller.js b/src/legacy/core_plugins/input_control_vis/public/vis_controller.js index 18e638862029e..4e1b8bee95b46 100644 --- a/src/legacy/core_plugins/input_control_vis/public/vis_controller.js +++ b/src/legacy/core_plugins/input_control_vis/public/vis_controller.js @@ -34,8 +34,9 @@ class VisController { this.vis.API.queryFilter.on('update', this.queryBarUpdateHandler); } - async render(visData, status) { - if (status.params || (this.vis.params.useTimeFilter && status.time)) { + async render(visData, visParams, status) { + if (status.params || (visParams.useTimeFilter && status.time)) { + this.visParams = visParams; this.controls = []; this.controls = await this.initControls(); this.drawVis(); @@ -53,7 +54,7 @@ class VisController { render( { + const controlParamsList = this.visParams.controls.filter((controlParams) => { // ignore controls that do not have indexPattern or field return controlParams.indexPattern && controlParams.fieldName; }); const controlFactoryPromises = controlParamsList.map((controlParams) => { const factory = controlFactory(controlParams); - return factory(controlParams, this.vis.API, this.vis.params.useTimeFilter); + return factory(controlParams, this.vis.API, this.visParams.useTimeFilter); }); const controls = await Promise.all(controlFactoryPromises); @@ -104,7 +105,7 @@ class VisController { stageFilter = async (controlIndex, newValue) => { this.controls[controlIndex].set(newValue); - if (this.vis.params.updateFiltersOnChange) { + if (this.visParams.updateFiltersOnChange) { // submit filters on each control change this.submitFilters(); } else { @@ -143,7 +144,7 @@ class VisController { }); }); - this.vis.API.queryFilter.addFilters(newFilters, this.vis.params.pinFilters); + this.vis.API.queryFilter.addFilters(newFilters, this.visParams.pinFilters); } clearControls = async () => { diff --git a/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.js b/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.js index 2d22294fa5d25..9c9bfc46defd2 100644 --- a/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.js +++ b/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.js @@ -82,9 +82,9 @@ class MarkdownVisComponent extends Component { export function MarkdownVisWrapper(props) { return ( ); diff --git a/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.test.js b/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.test.js index 9857567071de8..e85c00d5b65f8 100644 --- a/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.test.js +++ b/src/legacy/core_plugins/markdown_vis/public/markdown_vis_controller.test.js @@ -29,7 +29,7 @@ describe('markdown vis controller', () => { } }; - const wrapper = render(); + const wrapper = render(); expect(wrapper.find('a').text()).toBe('markdown'); }); @@ -40,7 +40,7 @@ describe('markdown vis controller', () => { } }; - const wrapper = render(); + const wrapper = render(); expect(wrapper.text()).toBe('Testing html\n'); }); @@ -51,7 +51,7 @@ describe('markdown vis controller', () => { } }; - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.text().trim()).toBe('Initial'); vis.params.markdown = 'Updated'; wrapper.setProps({ vis }); @@ -66,7 +66,7 @@ describe('markdown vis controller', () => { } }; const renderComplete = jest.fn(); - mount(); + mount(); expect(renderComplete.mock.calls.length).toBe(1); }); @@ -77,11 +77,11 @@ describe('markdown vis controller', () => { } }; const renderComplete = jest.fn(); - mount(); + mount(); expect(renderComplete.mock.calls.length).toBe(1); renderComplete.mockClear(); vis.params.markdown = 'changed'; - mount(); + mount(); expect(renderComplete.mock.calls.length).toBe(1); }); @@ -92,10 +92,10 @@ describe('markdown vis controller', () => { } }; const renderComplete = jest.fn(); - mount(); + mount(); expect(renderComplete.mock.calls.length).toBe(1); renderComplete.mockClear(); - mount(); + mount(); expect(renderComplete.mock.calls.length).toBe(1); }); }); diff --git a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js index 3f47f1e7b0f80..43def2fe543a1 100644 --- a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js +++ b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js @@ -46,16 +46,22 @@ describe('metric vis', () => { aggs: [{ id: '1', type: 'top_hits', schema: 'metric', params: { field: 'ip' } }], }); - vis.params.metric.metrics = [{ accessor: 0, format: { id: 'url', params: { - urlTemplate: 'http://ip.info?address={{value}}', - labelTemplate: 'ip[{{value}}]' - } } }]; + vis.params.dimensions = { + metrics: [{ + accessor: 0, format: { + id: 'url', params: { + urlTemplate: 'http://ip.info?address={{value}}', + labelTemplate: 'ip[{{value}}]' + } + } + }] + }; const el = document.createElement('div'); const Controller = metricVisType.visualization; const controller = new Controller(el, vis); const render = (esResponse) => { - controller.render(esResponse); + controller.render(esResponse, vis.params); }; return { el, render }; diff --git a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js index e6a2e74bb0866..470669f3f5688 100644 --- a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js +++ b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js @@ -30,8 +30,9 @@ describe('metric vis controller', function () { { from: 0, to: 1000 } ], style: {}, + }, dimensions: { + metrics: [{ accessor: 0 }], bucket: null, - metrics: [{ accessor: 0 }] } } }; @@ -39,7 +40,7 @@ describe('metric vis controller', function () { let metricController; beforeEach(() => { - metricController = new MetricVisComponent({ vis: vis }); + metricController = new MetricVisComponent({ vis: vis, visParams: vis.params }); }); it('should set the metric label and value', function () { @@ -54,7 +55,7 @@ describe('metric vis controller', function () { }); it('should support multi-value metrics', function () { - vis.params.metric.metrics.push({ accessor: 1 }); + vis.params.dimensions.metrics.push({ accessor: 1 }); const metrics = metricController._processTableGroups({ columns: [ { id: 'col-0', name: '1st percentile of bytes' }, diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js b/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js index 6682fdb8cd86b..6ed4b1b490e17 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js +++ b/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js @@ -28,7 +28,7 @@ import { MetricVisValue } from './components/metric_vis_value'; export class MetricVisComponent extends Component { _getLabels() { - const config = this.props.vis.params.metric; + const config = this.props.visParams.metric; const isPercentageMode = config.percentageMode; const colorsRange = config.colorsRange; const max = _.last(colorsRange).to; @@ -43,7 +43,7 @@ export class MetricVisComponent extends Component { } _getColors() { - const config = this.props.vis.params.metric; + const config = this.props.visParams.metric; const invertColors = config.invertColors; const colorSchema = config.colorSchema; const colorsRange = config.colorsRange; @@ -58,7 +58,7 @@ export class MetricVisComponent extends Component { } _getBucket(val) { - const config = this.props.vis.params.metric; + const config = this.props.visParams.metric; let bucket = _.findIndex(config.colorsRange, range => { return range.from <= val && range.to > val; }); @@ -91,7 +91,8 @@ export class MetricVisComponent extends Component { }; _processTableGroups(table) { - const config = this.props.vis.params.metric; + const config = this.props.visParams.metric; + const dimensions = this.props.visParams.dimensions; const isPercentageMode = config.percentageMode; const min = config.colorsRange[0].from; const max = _.last(config.colorsRange).to; @@ -102,12 +103,12 @@ export class MetricVisComponent extends Component { let bucketColumnId; let bucketFormatter; - if (config.bucket) { - bucketColumnId = table.columns[config.bucket.accessor].id; - bucketFormatter = getFormat(config.bucket.format); + if (dimensions.bucket) { + bucketColumnId = table.columns[dimensions.bucket.accessor].id; + bucketFormatter = getFormat(dimensions.bucket.format); } - config.metrics.forEach(metric => { + dimensions.metrics.forEach(metric => { const columnIndex = metric.accessor; const column = table.columns[columnIndex]; const formatter = getFormat(metric.format); @@ -146,12 +147,12 @@ export class MetricVisComponent extends Component { } _filterBucket = (metric) => { - const config = this.props.vis.params.metric; - if (!config.bucket) { + const dimensions = this.props.visParams.dimensions; + if (!dimensions.bucket) { return; } const table = this.props.visData; - this.props.vis.API.events.filter({ table, column: config.bucket.accessor, row: metric.rowIndex }); + this.props.vis.API.events.filter({ table, column: dimensions.bucket.accessor, row: metric.rowIndex }); }; _renderMetric = (metric, index) => { @@ -159,9 +160,9 @@ export class MetricVisComponent extends Component { ); }; diff --git a/src/legacy/core_plugins/metrics/public/components/vis_editor.js b/src/legacy/core_plugins/metrics/public/components/vis_editor.js index ece210a82b8b9..48db593c78f3c 100644 --- a/src/legacy/core_plugins/metrics/public/components/vis_editor.js +++ b/src/legacy/core_plugins/metrics/public/components/vis_editor.js @@ -36,7 +36,7 @@ class VisEditor extends Component { const { vis } = props; this.appState = vis.API.getAppState(); this.state = { - model: props.vis.params, + model: props.visParams, dirty: false, autoApply: true, visFields: {}, @@ -108,7 +108,7 @@ class VisEditor extends Component { render() { if (!this.props.isEditorMode) { - if (!this.props.vis.params || !this.props.visData) { + if (!this.props.visParams || !this.props.visData) { return null; } return ( @@ -118,7 +118,7 @@ class VisEditor extends Component { onUiState={this.handleUiState} uiState={this.props.vis.getUiState()} fields={this.state.visFields} - model={this.props.vis.params} + model={this.props.visParams} visData={this.props.visData} getConfig={this.getConfig} /> diff --git a/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js index cccc898dd6612..eb08399e40908 100644 --- a/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js +++ b/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js @@ -36,6 +36,7 @@ function ReactEditorControllerProvider(Private, config) { {}} @@ -46,11 +47,7 @@ function ReactEditorControllerProvider(Private, config) { this.el); } - resize() { - if (this.visData) { - this.render(this.visData); - } - } + resize() {} destroy() { unmountComponentAtNode(this.el); diff --git a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js index fbd2eef6b8267..54a2e018983ab 100644 --- a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js +++ b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js @@ -160,7 +160,7 @@ describe('RegionMapsVisualizationTests', function () { it('should instantiate at zoom level 2', async function () { const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -174,7 +174,7 @@ describe('RegionMapsVisualizationTests', function () { it('should update after resetting join field', async function () { const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -185,7 +185,7 @@ describe('RegionMapsVisualizationTests', function () { //this will actually create an empty image vis.params.selectedJoinField = { 'name': 'iso3', 'description': 'Three letter abbreviation' }; vis.params.isDisplayWarning = false;//so we don't get notifications - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: false, @@ -202,7 +202,7 @@ describe('RegionMapsVisualizationTests', function () { it('should resize', async function () { const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -212,7 +212,7 @@ describe('RegionMapsVisualizationTests', function () { domNode.style.width = '256px'; domNode.style.height = '128px'; - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: true, params: false, aggs: false, @@ -223,7 +223,7 @@ describe('RegionMapsVisualizationTests', function () { domNode.style.width = '512px'; domNode.style.height = '512px'; - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: true, params: false, aggs: false, @@ -240,7 +240,7 @@ describe('RegionMapsVisualizationTests', function () { it('should redo data', async function () { const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -251,7 +251,7 @@ describe('RegionMapsVisualizationTests', function () { const newTableGroup = _.cloneDeep(dummyTableGroup); newTableGroup.rows.pop();//remove one shape - await regionMapsVisualization.render(newTableGroup, { + await regionMapsVisualization.render(newTableGroup, vis.params, { resize: false, params: false, aggs: false, @@ -265,7 +265,7 @@ describe('RegionMapsVisualizationTests', function () { anotherTableGroup.rows.pop();//remove one shape domNode.style.width = '412px'; domNode.style.height = '112px'; - await regionMapsVisualization.render(anotherTableGroup, { + await regionMapsVisualization.render(anotherTableGroup, vis.params, { resize: true, params: false, aggs: false, @@ -283,7 +283,7 @@ describe('RegionMapsVisualizationTests', function () { it('should redo data and color ramp', async function () { const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -294,7 +294,7 @@ describe('RegionMapsVisualizationTests', function () { const newTableGroup = _.cloneDeep(dummyTableGroup); newTableGroup.rows.pop();//remove one shape vis.params.colorSchema = 'Blues'; - await regionMapsVisualization.render(newTableGroup, { + await regionMapsVisualization.render(newTableGroup, vis.params, { resize: false, params: true, aggs: false, @@ -314,7 +314,7 @@ describe('RegionMapsVisualizationTests', function () { vis.params.mapZoom = 4; vis.params.mapCenter = [36, -85]; const regionMapsVisualization = new RegionMapsVisualization(domNode, vis); - await regionMapsVisualization.render(dummyTableGroup, { + await regionMapsVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, diff --git a/src/legacy/core_plugins/region_map/public/region_map_vis_params.js b/src/legacy/core_plugins/region_map/public/region_map_vis_params.js index 10a3b55412adf..19223fc11dfc0 100644 --- a/src/legacy/core_plugins/region_map/public/region_map_vis_params.js +++ b/src/legacy/core_plugins/region_map/public/region_map_vis_params.js @@ -66,21 +66,6 @@ uiModules.get('kibana/region_map') setTimeout(function () { $scope.dirty = false; }, 0); - $scope.collections.vectorLayers = newVectorLayers; - - if ($scope.collections.vectorLayers[0] && !$scope.editorState.params.selectedLayer) { - $scope.editorState.params.selectedLayer = $scope.collections.vectorLayers[0]; - onLayerChange(); - } - - - //the dirty flag is set to true because the change in vector layers config causes an update of the scope.params - //temp work-around. addressing this issue with the visualize refactor for 6.0 - setTimeout(function () { - $scope.dirty = false; - }, 0); - - }) .catch(function (error) { toastNotifications.addWarning(error.message); diff --git a/src/legacy/core_plugins/region_map/public/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/region_map_visualization.js index e7ff7c4b0e3e8..8f3bb3b93d125 100644 --- a/src/legacy/core_plugins/region_map/public/region_map_visualization.js +++ b/src/legacy/core_plugins/region_map/public/region_map_visualization.js @@ -39,8 +39,8 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { this._choroplethLayer = null; } - async render(esResponse, status) { - await super.render(esResponse, status); + async render(esResponse, visParams, status) { + await super.render(esResponse, visParams, status); if (this._choroplethLayer) { await this._choroplethLayer.whenDataLoaded(); } @@ -48,8 +48,8 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { async _updateData(table) { this._chartData = table; - const termColumn = this._vis.params.bucket ? table.columns[this._vis.params.bucket.accessor] : null; - const valueColumn = table.columns[this._vis.params.metric.accessor]; + const termColumn = this._params.bucket ? table.columns[this._params.bucket.accessor] : null; + const valueColumn = table.columns[this._params.metric.accessor]; let results; if (!this._hasColumns() || !table.rows.length) { results = []; @@ -61,22 +61,22 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { }); } - if (!this._vis.params.selectedJoinField && this._vis.params.selectedLayer) { - this._vis.params.selectedJoinField = this._vis.params.selectedLayer.fields[0]; + if (!this._params.selectedJoinField && this._params.selectedLayer) { + this._params.selectedJoinField = this._params.selectedLayer.fields[0]; } - if (!this._vis.params.selectedLayer) { + if (!this._params.selectedLayer) { return; } this._updateChoroplethLayerForNewMetrics( - this._vis.params.selectedLayer.name, - this._vis.params.selectedLayer.attribution, - this._vis.params.showAllShapes, + this._params.selectedLayer.name, + this._params.selectedLayer.attribution, + this._params.showAllShapes, results ); - const metricFieldFormatter = getFormat(this._vis.params.metric.format); + const metricFieldFormatter = getFormat(this._params.metric.format); this._choroplethLayer.setMetrics(results, metricFieldFormatter, valueColumn.name); if (termColumn && valueColumn) { @@ -89,8 +89,8 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { async _updateParams() { await super._updateParams(); + const visParams = this._params; - const visParams = this.vis.params; if (!visParams.selectedJoinField && visParams.selectedLayer) { visParams.selectedJoinField = visParams.selectedLayer.fields[0]; } @@ -102,10 +102,10 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { this._updateChoroplethLayerForNewProperties( visParams.selectedLayer.name, visParams.selectedLayer.attribution, - this._vis.params.showAllShapes + this._params.showAllShapes ); - const metricFieldFormatter = getFormat(this._vis.params.metric.format); + const metricFieldFormatter = getFormat(this._params.metric.format); this._choroplethLayer.setJoinField(visParams.selectedJoinField.name); this._choroplethLayer.setColorRamp(truncatedColorMaps[visParams.colorSchema].value); @@ -137,19 +137,19 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { this._choroplethLayer = this._choroplethLayer.cloneChoroplethLayerForNewData( name, attribution, - this.vis.params.selectedLayer.format, + this._params.selectedLayer.format, showAllData, - this.vis.params.selectedLayer.meta, - this.vis.params.selectedLayer + this._params.selectedLayer.meta, + this._params.selectedLayer ); } else { this._choroplethLayer = new ChoroplethLayer( name, attribution, - this.vis.params.selectedLayer.format, + this._params.selectedLayer.format, showAllData, - this.vis.params.selectedLayer.meta, - this.vis.params.selectedLayer + this._params.selectedLayer.meta, + this._params.selectedLayer ); } @@ -159,7 +159,7 @@ export function RegionMapsVisualizationProvider(Private, config, i18n) { }); this._choroplethLayer.on('styleChanged', (event) => { - const shouldShowWarning = this._vis.params.isDisplayWarning && config.get('visualization:regionmap:showWarnings'); + const shouldShowWarning = this._params.isDisplayWarning && config.get('visualization:regionmap:showWarnings'); if (event.mismatches.length > 0 && shouldShowWarning) { toastNotifications.addWarning({ title: i18n('regionMap.visualization.unableToShowMismatchesWarningTitle', { diff --git a/src/legacy/core_plugins/table_vis/public/__tests__/_table_vis_controller.js b/src/legacy/core_plugins/table_vis/public/__tests__/_table_vis_controller.js index f531a1923414d..41028de007833 100644 --- a/src/legacy/core_plugins/table_vis/public/__tests__/_table_vis_controller.js +++ b/src/legacy/core_plugins/table_vis/public/__tests__/_table_vis_controller.js @@ -88,6 +88,7 @@ describe('Table Vis Controller', function () { tabifiedResponse = tabifyAggResponse(vis.aggs, fixtures.oneRangeBucket); $rootScope.vis = vis; + $rootScope.visParams = vis.params; $rootScope.uiState = new AppState({ uiState: {} }).makeStateful('uiState'); $rootScope.renderComplete = () => {}; $rootScope.newScope = function (scope) { $scope = scope; }; diff --git a/src/legacy/core_plugins/table_vis/public/table_vis_controller.js b/src/legacy/core_plugins/table_vis/public/table_vis_controller.js index e7e0f961d6640..55826b69eeb4d 100644 --- a/src/legacy/core_plugins/table_vis/public/table_vis_controller.js +++ b/src/legacy/core_plugins/table_vis/public/table_vis_controller.js @@ -28,9 +28,9 @@ const module = uiModules.get('kibana/table_vis', ['kibana']); // tabular format that we can pass to the table directive module.controller('KbnTableVisController', function ($scope) { const uiStateSort = ($scope.uiState) ? $scope.uiState.get('vis.params.sort') : {}; - assign($scope.vis.params.sort, uiStateSort); + assign($scope.visParams.sort, uiStateSort); - $scope.sort = $scope.vis.params.sort; + $scope.sort = $scope.visParams.sort; $scope.$watchCollection('sort', function (newSort) { $scope.uiState.set('vis.params.sort', newSort); }); @@ -56,7 +56,7 @@ module.controller('KbnTableVisController', function ($scope) { $scope.hasSomeRows = hasSomeRows; if (hasSomeRows) { - $scope.dimensions = $scope.vis.params.dimensions; + $scope.dimensions = $scope.visParams.dimensions; $scope.tableGroups = tableGroups; } $scope.renderComplete(); diff --git a/src/legacy/core_plugins/tagcloud/public/__tests__/tag_cloud_visualization.js b/src/legacy/core_plugins/tagcloud/public/__tests__/tag_cloud_visualization.js index 4f7126ebf50f3..9a0e904ccc715 100644 --- a/src/legacy/core_plugins/tagcloud/public/__tests__/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/tagcloud/public/__tests__/tag_cloud_visualization.js @@ -85,7 +85,7 @@ describe('TagCloudVisualizationTest', function () { it('simple draw', async function () { const tagcloudVisualization = new TagCloudVisualization(domNode, vis); - await tagcloudVisualization.render(dummyTableGroup, { + await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -101,7 +101,7 @@ describe('TagCloudVisualizationTest', function () { it('with resize', async function () { const tagcloudVisualization = new TagCloudVisualization(domNode, vis); - await tagcloudVisualization.render(dummyTableGroup, { + await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -111,7 +111,7 @@ describe('TagCloudVisualizationTest', function () { domNode.style.width = '256px'; domNode.style.height = '368px'; - await tagcloudVisualization.render(dummyTableGroup, { + await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: true, params: false, aggs: false, @@ -127,7 +127,7 @@ describe('TagCloudVisualizationTest', function () { it('with param change', async function () { const tagcloudVisualization = new TagCloudVisualization(domNode, vis); - await tagcloudVisualization.render(dummyTableGroup, { + await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: false, params: true, aggs: true, @@ -139,7 +139,7 @@ describe('TagCloudVisualizationTest', function () { domNode.style.height = '368px'; vis.params.orientation = 'right angled'; vis.params.minFontSize = 70; - await tagcloudVisualization.render(dummyTableGroup, { + await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: true, params: true, aggs: false, diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js index 59df7b2da677f..e13efaf8b14a9 100644 --- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js @@ -49,7 +49,7 @@ export class TagCloudVisualization { this._truncated = false; this._tagCloud = new TagCloud(cloudContainer); this._tagCloud.on('select', (event) => { - if (!this._vis.params.bucket) { + if (!this._visParams.bucket) { return; } this._vis.API.events.filter({ @@ -71,14 +71,11 @@ export class TagCloudVisualization { } - async render(data, status) { + async render(data, visParams, status) { if (!(status.resize || status.data || status.params)) return; - if (status.params || status.aggs) { - this._updateParams(); - } - - if (status.data || status.params) { + if (status.params || status.data) { + this._updateParams(visParams); this._updateData(data); } @@ -99,7 +96,7 @@ export class TagCloudVisualization { this._label.current.setState({ label: `${data.columns[0].name} - ${data.columns[1].name}`, - shouldShowLabel: this._vis.params.showLabel + shouldShowLabel: visParams.showLabel }); this._feedbackMessage.current.setState({ shouldShowTruncate: this._truncated, @@ -120,8 +117,8 @@ export class TagCloudVisualization { return; } - const bucket = this._vis.params.bucket; - const metric = this._vis.params.metric; + const bucket = this._visParams.bucket; + const metric = this._visParams.metric; const bucketFormatter = bucket ? getFormat(bucket.format) : null; const tagColumn = bucket ? data.columns[bucket.accessor].id : -1; const metricColumn = data.columns[metric.accessor].id; @@ -151,8 +148,9 @@ export class TagCloudVisualization { } - _updateParams() { - this._tagCloud.setOptions(this._vis.params); + _updateParams(visParams) { + this._visParams = visParams; + this._tagCloud.setOptions(visParams); } _resize() { diff --git a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js index 0e8b6cb84694a..3d83fdfe12aa8 100644 --- a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js +++ b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js @@ -142,7 +142,7 @@ describe('CoordinateMapsVisualizationTest', function () { it('should initialize OK', async function () { const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: true, @@ -160,7 +160,7 @@ describe('CoordinateMapsVisualizationTest', function () { it('should toggle to Heatmap OK', async function () { const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: true, @@ -170,7 +170,7 @@ describe('CoordinateMapsVisualizationTest', function () { vis.params.mapType = 'Heatmap'; - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: false, @@ -187,7 +187,7 @@ describe('CoordinateMapsVisualizationTest', function () { it('should toggle back&forth OK between mapTypes', async function () { const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: true, @@ -196,7 +196,7 @@ describe('CoordinateMapsVisualizationTest', function () { }); vis.params.mapType = 'Heatmap'; - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: false, @@ -205,7 +205,7 @@ describe('CoordinateMapsVisualizationTest', function () { }); vis.params.mapType = 'Scaled Circle Markers'; - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: false, @@ -222,7 +222,7 @@ describe('CoordinateMapsVisualizationTest', function () { it('should toggle to different color schema ok', async function () { const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: true, @@ -232,7 +232,7 @@ describe('CoordinateMapsVisualizationTest', function () { vis.params.colorSchema = 'Blues'; - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: false, @@ -249,7 +249,7 @@ describe('CoordinateMapsVisualizationTest', function () { it('should toggle to different color schema and maptypes ok', async function () { const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: true, @@ -260,7 +260,7 @@ describe('CoordinateMapsVisualizationTest', function () { vis.params.colorSchema = 'Greens'; vis.params.mapType = 'Shaded Geohash Grid'; - await coordinateMapVisualization.render(dummyESResponse, { + await coordinateMapVisualization.render(dummyESResponse, vis.params, { resize: false, params: true, aggs: false, diff --git a/src/legacy/core_plugins/tile_map/public/base_maps_visualization.js b/src/legacy/core_plugins/tile_map/public/base_maps_visualization.js index 9ff5662b32b3c..21c5539c4f2f9 100644 --- a/src/legacy/core_plugins/tile_map/public/base_maps_visualization.js +++ b/src/legacy/core_plugins/tile_map/public/base_maps_visualization.js @@ -71,7 +71,7 @@ export function BaseMapsVisualizationProvider(serviceSettings, i18n) { * @param status * @return {Promise} */ - async render(esResponse, status) { + async render(esResponse, visParams, status) { if (!this._kibanaMap) { //the visualization has been destroyed; return; @@ -83,6 +83,7 @@ export function BaseMapsVisualizationProvider(serviceSettings, i18n) { this._kibanaMap.resize(); } if (status.params || status.aggs) { + this._params = visParams; await this._updateParams(); } @@ -233,7 +234,7 @@ export function BaseMapsVisualizationProvider(serviceSettings, i18n) { {}, this.vis.type.visConfig.defaults, { type: this.vis.type.name }, - this.vis.params + this._params ); } diff --git a/src/legacy/core_plugins/tile_map/public/coordinate_maps_visualization.js b/src/legacy/core_plugins/tile_map/public/coordinate_maps_visualization.js index 67c894f4211bd..329c2b7571c53 100644 --- a/src/legacy/core_plugins/tile_map/public/coordinate_maps_visualization.js +++ b/src/legacy/core_plugins/tile_map/public/coordinate_maps_visualization.js @@ -143,7 +143,7 @@ export function CoordinateMapsVisualizationProvider(Private) { await super._updateParams(); - this._kibanaMap.setDesaturateBaseLayer(this.vis.params.isDesaturated); + this._kibanaMap.setDesaturateBaseLayer(this._params.isDesaturated); //avoid recreating the leaflet layer when there are option-changes that do not effect the representation //e.g. tooltip-visibility, legend position, basemap-desaturation, ... diff --git a/src/legacy/core_plugins/vega/public/__tests__/vega_visualization.js b/src/legacy/core_plugins/vega/public/__tests__/vega_visualization.js index ae63725e120d8..141bf4d061fd5 100644 --- a/src/legacy/core_plugins/vega/public/__tests__/vega_visualization.js +++ b/src/legacy/core_plugins/vega/public/__tests__/vega_visualization.js @@ -84,14 +84,14 @@ describe('VegaVisualizations', () => { const vegaParser = new VegaParser(vegaliteGraph, new SearchCache()); await vegaParser.parseAsync(); - await vegaVis.render(vegaParser, { data: true }); + await vegaVis.render(vegaParser, vis.params, { data: true }); const mismatchedPixels1 = await compareImage(vegaliteImage512); expect(mismatchedPixels1).to.be.lessThan(PIXEL_DIFF); domNode.style.width = '256px'; domNode.style.height = '256px'; - await vegaVis.render(vegaParser, { resize: true }); + await vegaVis.render(vegaParser, vis.params, { resize: true }); const mismatchedPixels2 = await compareImage(vegaliteImage256); expect(mismatchedPixels2).to.be.lessThan(PIXEL_DIFF); @@ -110,7 +110,7 @@ describe('VegaVisualizations', () => { const vegaParser = new VegaParser(vegaGraph, new SearchCache()); await vegaParser.parseAsync(); - await vegaVis.render(vegaParser, { data: true }); + await vegaVis.render(vegaParser, vis.params, { data: true }); const mismatchedPixels = await compareImage(vegaImage512); expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); @@ -128,7 +128,7 @@ describe('VegaVisualizations', () => { vegaVis = new VegaVisualization(domNode, vis); const vegaParser = new VegaParser(vegaTooltipGraph, new SearchCache()); await vegaParser.parseAsync(); - await vegaVis.render(vegaParser, { data: true }); + await vegaVis.render(vegaParser, vis.params, { data: true }); const $el = $(domNode); @@ -178,7 +178,7 @@ describe('VegaVisualizations', () => { domNode.style.width = '256px'; domNode.style.height = '256px'; - await vegaVis.render(vegaParser, { data: true }); + await vegaVis.render(vegaParser, vis.params, { data: true }); const mismatchedPixels = await compareImage(vegaMapImage256); expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); @@ -218,7 +218,7 @@ describe('VegaVisualizations', () => { domNode.style.width = '256px'; domNode.style.height = '256px'; - await vegaVis.render(vegaParser, { data: true }); + await vegaVis.render(vegaParser, vis.params, { data: true }); const vegaView = vegaVis._vegaView._view; expect(vegaView.height()).to.be(250.00000001); diff --git a/src/legacy/core_plugins/vega/public/vega_visualization.js b/src/legacy/core_plugins/vega/public/vega_visualization.js index 7108e60fdc999..a35da1655368e 100644 --- a/src/legacy/core_plugins/vega/public/vega_visualization.js +++ b/src/legacy/core_plugins/vega/public/vega_visualization.js @@ -67,7 +67,7 @@ export function VegaVisualizationProvider(Private, vegaConfig, serviceSettings, * @param {*} status * @returns {Promise} */ - async render(visData, status) { + async render(visData, visParams, status) { if (!visData && !this._vegaView) { toastNotifications.addWarning(i18n.translate('vega.visualization.unableToRenderWithoutDataWarningMessage', { defaultMessage: 'Unable to render without data', diff --git a/src/legacy/ui/public/vis/vis_types/angular_vis_type.js b/src/legacy/ui/public/vis/vis_types/angular_vis_type.js index 52ee51fb23121..4613a0bcedce6 100644 --- a/src/legacy/ui/public/vis/vis_types/angular_vis_type.js +++ b/src/legacy/ui/public/vis/vis_types/angular_vis_type.js @@ -30,13 +30,14 @@ export function AngularVisTypeProvider(Private, $compile, $rootScope) { this.vis = vis; } - render(esResponse, status) { + render(esResponse, visParams, status) { return new Promise((resolve, reject) => { const updateScope = () => { this.$scope.vis = this.vis; this.$scope.visState = this.vis.getState(); this.$scope.esResponse = esResponse; + this.$scope.visParams = visParams; this.$scope.renderComplete = resolve; this.$scope.renderFailed = reject; this.$scope.resize = Date.now(); diff --git a/src/legacy/ui/public/vis/vis_types/react_vis_type.js b/src/legacy/ui/public/vis/vis_types/react_vis_type.js index f9784f6a8b1b2..76e17666f91a6 100644 --- a/src/legacy/ui/public/vis/vis_types/react_vis_type.js +++ b/src/legacy/ui/public/vis/vis_types/react_vis_type.js @@ -32,7 +32,7 @@ export function ReactVisTypeProvider(Private) { this.vis = vis; } - render(visData, updateStatus) { + render(visData, visParams, updateStatus) { this.visData = visData; return new Promise((resolve) => { @@ -44,6 +44,7 @@ export function ReactVisTypeProvider(Private) { config={config} vis={this.vis} visData={visData} + visParams={visParams} renderComplete={resolve} updateStatus={updateStatus} /> diff --git a/src/legacy/ui/public/vis/vis_types/vis_type.d.ts b/src/legacy/ui/public/vis/vis_types/vis_type.d.ts index 7373770560b4f..92641c31040d6 100644 --- a/src/legacy/ui/public/vis/vis_types/vis_type.d.ts +++ b/src/legacy/ui/public/vis/vis_types/vis_type.d.ts @@ -23,7 +23,7 @@ import { Status } from '../update_status'; export class VisualizationController { constructor(element: HTMLElement, vis: Vis); - public render(visData: any, update: { [key in Status]: boolean }): Promise; + public render(visData: any, visParams: any, update: { [key in Status]: boolean }): Promise; public destroy(): void; public isLoaded?(): Promise | void; } diff --git a/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js b/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js index 48dafa653f05b..9bdacfa36a3e7 100644 --- a/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js +++ b/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js @@ -58,7 +58,7 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) { } - render(esResponse) { + render(esResponse, visParams) { if (this.vis.vislibVis) { this.destroy(); } @@ -68,22 +68,23 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) { return resolve(); } - this.vis.vislibVis = new vislib.Vis(this.chartEl, this.vis.params); + this.vis.vislibVis = new vislib.Vis(this.chartEl, visParams); this.vis.vislibVis.on('brush', this.vis.API.events.brush); this.vis.vislibVis.on('click', this.vis.API.events.filter); this.vis.vislibVis.on('renderComplete', resolve); this.vis.vislibVis.initVisConfig(esResponse, this.vis.getUiState()); - if (this.vis.params.addLegend) { + if (visParams.addLegend) { $(this.container).attr('class', (i, cls) => { return cls.replace(/visLib--legend-\S+/g, ''); - }).addClass(legendClassName[this.vis.params.legendPosition]); + }).addClass(legendClassName[visParams.legendPosition]); this.$scope = $rootScope.$new(); this.$scope.refreshLegend = 0; this.$scope.vis = this.vis; this.$scope.visData = esResponse; + this.$scope.visParams = visParams; this.$scope.uiState = this.$scope.vis.getUiState(); const legendHtml = $compile('')(this.$scope); this.container.appendChild(legendHtml[0]); @@ -95,7 +96,7 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) { // refreshing the legend after the chart is rendered. // this is necessary because some visualizations // provide data necessary for the legend only after a render cycle. - if (this.vis.params.addLegend && CUSTOM_LEGEND_VIS_TYPES.includes(this.vis.vislibVis.visConfigArgs.type)) { + if (visParams.addLegend && CUSTOM_LEGEND_VIS_TYPES.includes(this.vis.vislibVis.visConfigArgs.type)) { this.$scope.refreshLegend++; this.$scope.$digest(); diff --git a/src/legacy/ui/public/visualize/components/visualization.tsx b/src/legacy/ui/public/visualize/components/visualization.tsx index 730105df6b913..26c894f914910 100644 --- a/src/legacy/ui/public/visualize/components/visualization.tsx +++ b/src/legacy/ui/public/visualize/components/visualization.tsx @@ -48,6 +48,7 @@ interface VisualizationProps { uiState: PersistedState; vis: Vis; visData: any; + visParams: any; } export class Visualization extends React.Component { @@ -60,7 +61,7 @@ export class Visualization extends React.Component { } public render() { - const { vis, visData, onInit, uiState, listenOnChange } = this.props; + const { vis, visData, visParams, onInit, uiState, listenOnChange } = this.props; const noResults = this.showNoResultsMessage(vis, visData); const requestError = shouldShowRequestErrorMessage(vis, visData); @@ -75,6 +76,7 @@ export class Visualization extends React.Component { { private containerDiv = React.createRef(); private renderSubject: Rx.Subject<{ vis: Vis; + visParams: any; visData: any; container: HTMLElement; }>; @@ -63,7 +65,7 @@ class VisualizationChart extends React.Component { ({ vis, visData, container }) => vis && container && (!vis.type.requiresSearch || visData) ), debounceTime(100), - switchMap(async ({ vis, visData, container }) => { + switchMap(async ({ vis, visData, visParams, container }) => { if (!this.visualization) { // This should never happen, since we only should trigger another rendering // after this component has mounted and thus the visualization implementation @@ -73,7 +75,7 @@ class VisualizationChart extends React.Component { vis.size = [container.clientWidth, container.clientHeight]; const status = getUpdateStatus(vis.type.requiresUpdateStatus, this, this.props); - return this.visualization.render(visData, status); + return this.visualization.render(visData, visParams, status); }) ); @@ -156,6 +158,7 @@ class VisualizationChart extends React.Component { this.renderSubject.next({ vis: this.props.vis, visData: this.props.visData, + visParams: this.props.visParams, container: this.containerDiv.current, }); } diff --git a/src/legacy/ui/public/visualize/loader/__tests__/visualization_loader.js b/src/legacy/ui/public/visualize/loader/__tests__/visualization_loader.js index 3dc23fffea3c9..50eb3ef3d779c 100644 --- a/src/legacy/ui/public/visualize/loader/__tests__/visualization_loader.js +++ b/src/legacy/ui/public/visualize/loader/__tests__/visualization_loader.js @@ -48,7 +48,7 @@ describe('visualization loader', () => { it('should render visualization', async () => { const element = document.createElement('div'); expect(visualizationLoader.render).to.be.a('function'); - visualizationLoader.render(element, vis); + visualizationLoader.render(element, vis, null, vis.params); expect($(element).find('.visualization').length).to.be(1); }); diff --git a/src/legacy/ui/public/visualize/loader/__tests__/visualize_loader.js b/src/legacy/ui/public/visualize/loader/__tests__/visualize_loader.js index 306f7e2839e82..515c490eca97f 100644 --- a/src/legacy/ui/public/visualize/loader/__tests__/visualize_loader.js +++ b/src/legacy/ui/public/visualize/loader/__tests__/visualize_loader.js @@ -21,6 +21,7 @@ import angular from 'angular'; import expect from 'expect.js'; import ngMock from 'ng_mock'; import sinon from 'sinon'; +import { cloneDeep } from 'lodash'; import { setupAndTeardownInjectorStub } from 'test_utils/stub_get_active_injector'; @@ -161,6 +162,15 @@ describe('visualize loader', () => { expect(container.find('[data-test-subj="visualizationLoader"]').length).to.be(1); }); + it('should not mutate vis.params', () => { + const container = newContainer(); + const savedObject = createSavedObject(); + const paramsBefore = cloneDeep(vis.params); + loader.embedVisualizationWithSavedObject(container[0], savedObject, { }); + const paramsAfter = cloneDeep(vis.params); + expect(paramsBefore).to.eql(paramsAfter); + }); + it('should replace content of container by default', () => { const container = angular.element('
'); loader.embedVisualizationWithSavedObject(container[0], createSavedObject(), {}); diff --git a/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts b/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts index 51408f3c083dd..be1c531ef272c 100644 --- a/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts +++ b/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts @@ -461,7 +461,9 @@ export class EmbeddedVisualizeHandler { */ private handleDataLoaderError = (error: any): void => { // TODO: come up with a general way to cancel execution of pipeline expressions. - this.dataLoaderParams.searchSource.cancelQueued(); + if (this.dataLoaderParams.searchSource && this.dataLoaderParams.searchSource.cancelQueued) { + this.dataLoaderParams.searchSource.cancelQueued(); + } this.vis.requestError = error; this.vis.showRequestError = @@ -488,6 +490,7 @@ export class EmbeddedVisualizeHandler { this.element, this.vis, get(response, 'value.visData', null), + get(response, 'value.visConfig', this.vis.params), this.uiState, { listenOnChange: false, diff --git a/src/legacy/ui/public/visualize/loader/pipeline_helpers/__snapshots__/build_pipeline.test.js.snap b/src/legacy/ui/public/visualize/loader/pipeline_helpers/__snapshots__/build_pipeline.test.js.snap index c86d5eb85ad3b..3b919e4eb483a 100644 --- a/src/legacy/ui/public/visualize/loader/pipeline_helpers/__snapshots__/build_pipeline.test.js.snap +++ b/src/legacy/ui/public/visualize/loader/pipeline_helpers/__snapshots__/build_pipeline.test.js.snap @@ -4,9 +4,9 @@ exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunct exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles markdown function 1`] = `"kibana_markdown expression='## hello _markdown_' visConfig='{\\"markdown\\":\\"## hello _markdown_\\",\\"foo\\":\\"bar\\"}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles metric function with buckets 1`] = `"kibana_metric visConfig='{\\"metric\\":{\\"metrics\\":[0,1],\\"bucket\\":2}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles metric function with buckets 1`] = `"kibana_metric visConfig='{\\"dimensions\\":{\\"metrics\\":[0,1],\\"bucket\\":2}}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles metric function without buckets 1`] = `"kibana_metric visConfig='{\\"metric\\":{\\"metrics\\":[0,1]}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles metric function without buckets 1`] = `"kibana_metric visConfig='{\\"dimensions\\":{\\"metrics\\":[0,1]}}' "`; exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles metrics/tsvb function 1`] = `"tsvb params='{\\"foo\\":\\"bar\\"}' uiState='{}' "`; @@ -16,17 +16,17 @@ exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunct exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles region_map function without buckets 1`] = `"regionmap visConfig='{\\"metric\\":0}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function with splits 1`] = `"kibana_table visConfig='{\\"foo\\":\\"bar\\",\\"dimensions\\":{\\"metrics\\":[0],\\"buckets\\":[],\\"splitRow\\":[1,2]}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function with splits 1`] = `"kibana_table visConfig='{\\"dimensions\\":{\\"metrics\\":[0],\\"buckets\\":[],\\"splitRow\\":[1,2]}}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function with splits and buckets 1`] = `"kibana_table visConfig='{\\"foo\\":\\"bar\\",\\"dimensions\\":{\\"metrics\\":[0,1],\\"buckets\\":[3],\\"splitRow\\":[2,4]}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function with splits and buckets 1`] = `"kibana_table visConfig='{\\"dimensions\\":{\\"metrics\\":[0,1],\\"buckets\\":[3],\\"splitRow\\":[2,4]}}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function without splits or buckets 1`] = `"kibana_table visConfig='{\\"foo\\":\\"bar\\",\\"dimensions\\":{\\"metrics\\":[0,1],\\"buckets\\":[]}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles table function without splits or buckets 1`] = `"kibana_table visConfig='{\\"dimensions\\":{\\"metrics\\":[0,1],\\"buckets\\":[]}}' "`; exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles tagcloud function with buckets 1`] = `"tagcloud visConfig='{\\"metric\\":0,\\"bucket\\":1}' "`; exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles tagcloud function without buckets 1`] = `"tagcloud visConfig='{\\"metric\\":0}' "`; -exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles tile_map function 1`] = `"tilemap visConfig='{\\"metric\\":{},\\"dimensions\\":{\\"metric\\":0,\\"geohash\\":1,\\"geocentroid\\":3}}' "`; +exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles tile_map function 1`] = `"tilemap visConfig='{\\"dimensions\\":{\\"metric\\":0,\\"geohash\\":1,\\"geocentroid\\":3}}' "`; exports[`visualize loader pipeline helpers: build pipeline buildPipelineVisFunction handles timelion function 1`] = `"timelion_vis expression='foo' interval='bar' "`; diff --git a/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts b/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts index 6398029879041..05ab628a3c689 100644 --- a/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts +++ b/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts @@ -17,6 +17,7 @@ * under the License. */ +import { cloneDeep } from 'lodash'; // @ts-ignore import { setBounds } from 'ui/agg_types/buckets/date_histogram'; import { SearchSource } from 'ui/courier'; @@ -50,7 +51,7 @@ interface Schemas { } type buildVisFunction = (visState: VisState, schemas: Schemas, uiState: any) => string; -type buildVisConfigFunction = (visState: Vis, schemas: Schemas) => VisState; +type buildVisConfigFunction = (schemas: Schemas) => VisState; interface BuildPipelineVisFunction { [key: string]: buildVisFunction; @@ -223,34 +224,34 @@ export const buildPipelineVisFunction: BuildPipelineVisFunction = { return `kibana_markdown ${expression}${visConfig}`; }, table: (visState, schemas) => { - const visConfig = buildVisConfig.table(visState, schemas); + const visConfig = buildVisConfig.table(schemas); return `kibana_table ${prepareJson('visConfig', visConfig)}`; }, metric: (visState, schemas) => { - const visConfig = buildVisConfig.metric(visState, schemas); + const visConfig = buildVisConfig.metric(schemas); return `kibana_metric ${prepareJson('visConfig', visConfig)}`; }, tagcloud: (visState, schemas) => { - const visConfig = buildVisConfig.tagcloud(visState, schemas); + const visConfig = buildVisConfig.tagcloud(schemas); return `tagcloud ${prepareJson('visConfig', visConfig)}`; }, region_map: (visState, schemas) => { - const visConfig = buildVisConfig.region_map(visState, schemas); + const visConfig = buildVisConfig.region_map(schemas); return `regionmap ${prepareJson('visConfig', visConfig)}`; }, tile_map: (visState, schemas) => { - const visConfig = buildVisConfig.tile_map(visState, schemas); + const visConfig = buildVisConfig.tile_map(schemas); return `tilemap ${prepareJson('visConfig', visConfig)}`; }, pie: (visState, schemas) => { - const visConfig = buildVisConfig.pie(visState, schemas); + const visConfig = buildVisConfig.pie(schemas); return `kibana_pie ${prepareJson('visConfig', visConfig)}`; }, }; const buildVisConfig: BuildVisConfigFunction = { - table: (visState, schemas) => { - const visConfig = visState.params; + table: schemas => { + const visConfig = {} as any; visConfig.dimensions = { metrics: schemas.metric, buckets: schemas.bucket || [], @@ -259,32 +260,32 @@ const buildVisConfig: BuildVisConfigFunction = { }; return visConfig; }, - metric: (visState, schemas) => { - const visConfig = visState.params; - visConfig.metric.metrics = schemas.metric; + metric: schemas => { + const visConfig = { dimensions: {} } as any; + visConfig.dimensions.metrics = schemas.metric; if (schemas.group) { - visConfig.metric.bucket = schemas.group[0]; + visConfig.dimensions.bucket = schemas.group[0]; } return visConfig; }, - tagcloud: (visState, schemas) => { - const visConfig = visState.params; + tagcloud: schemas => { + const visConfig = {} as any; visConfig.metric = schemas.metric[0]; if (schemas.segment) { visConfig.bucket = schemas.segment[0]; } return visConfig; }, - region_map: (visState, schemas) => { - const visConfig = visState.params; + region_map: schemas => { + const visConfig = {} as any; visConfig.metric = schemas.metric[0]; if (schemas.segment) { visConfig.bucket = schemas.segment[0]; } return visConfig; }, - tile_map: (visState, schemas) => { - const visConfig = visState.params; + tile_map: schemas => { + const visConfig = {} as any; visConfig.dimensions = { metric: schemas.metric[0], geohash: schemas.segment ? schemas.segment[0] : null, @@ -292,8 +293,8 @@ const buildVisConfig: BuildVisConfigFunction = { }; return visConfig; }, - pie: (visState, schemas) => { - const visConfig = visState.params; + pie: schemas => { + const visConfig = {} as any; visConfig.dimensions = { metric: schemas.metric[0], buckets: schemas.segment, @@ -330,15 +331,18 @@ export const buildVislibDimensions = (vis: any, timeRange?: any) => { // If not using the expression pipeline (i.e. visualize_data_loader), we need a mechanism to // take a Vis object and decorate it with the necessary params (dimensions, bucket, metric, etc) -export const decorateVisObject = (vis: Vis, params: { timeRange?: any }) => { +export const getVisParams = (vis: Vis, params: { timeRange?: any }) => { const schemas = getSchemas(vis, params.timeRange); - let visConfig = vis.params; + let visConfig = cloneDeep(vis.params); if (buildVisConfig[vis.type.name]) { - visConfig = buildVisConfig[vis.type.name](vis, schemas); - vis.params = visConfig; + visConfig = { + ...visConfig, + ...buildVisConfig[vis.type.name](schemas), + }; } else if (vislibCharts.includes(vis.type.name)) { visConfig.dimensions = buildVislibDimensions(vis, params.timeRange); } + return visConfig; }; export const buildPipeline = ( diff --git a/src/legacy/ui/public/visualize/loader/visualization_loader.tsx b/src/legacy/ui/public/visualize/loader/visualization_loader.tsx index 715aea6cf79de..307ef0354f451 100644 --- a/src/legacy/ui/public/visualize/loader/visualization_loader.tsx +++ b/src/legacy/ui/public/visualize/loader/visualization_loader.tsx @@ -33,6 +33,7 @@ function renderVisualization( element: HTMLElement, vis: Vis, visData: any, + visParams: any, uiState: PersistedState, params: VisualizationLoaderParams ) { @@ -42,6 +43,7 @@ function renderVisualization( ( from: Array<{ name: string; handler: T }>, @@ -68,13 +68,13 @@ export class VisualizeDataLoader { public async fetch(params: RequestHandlerParams): Promise { // add necessary params to vis object (dimensions, bucket, metric, etc) - decorateVisObject(this.vis, { timeRange: params.timeRange }); + const visParams = getVisParams(this.vis, { timeRange: params.timeRange }); // searchSource is only there for courier request handler const requestHandlerResponse = await this.requestHandler({ partialRows: this.vis.params.partialRows || this.vis.type.requiresPartialRows, isHierarchical: this.vis.isHierarchical(), - visParams: this.vis.params, + visParams, ...params, filters: params.filters ? params.filters.filter(filter => !filter.meta.disabled) : undefined, }); @@ -92,7 +92,7 @@ export class VisualizeDataLoader { if (!canSkipResponseHandler) { this.visData = await Promise.resolve( - this.responseHandler(requestHandlerResponse, this.vis.params.dimensions) + this.responseHandler(requestHandlerResponse, visParams.dimensions) ); } @@ -101,7 +101,7 @@ export class VisualizeDataLoader { value: { visType: this.vis.type.name, visData: this.visData, - visConfig: this.vis.params, + visConfig: visParams, params: {}, }, };