fixes visualization editor selection being reset (#30073) (#32396)

elastic · Mar 4, 2019 · 40e6af4 · 40e6af4
1 parent 7df869e
commit 40e6af4
Show file tree

Hide file tree

Showing 33 changed files with 202 additions and 184 deletions.
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
@@ -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(
       <I18nContext>
         <InputControlVis
-          updateFiltersOnChange={this.vis.params.updateFiltersOnChange}
+          updateFiltersOnChange={this.visParams.updateFiltersOnChange}
           controls={this.controls}
           stageFilter={this.stageFilter}
           submitFilters={this.submitFilters}
@@ -68,14 +69,14 @@ class VisController {
   }
 
   async initControls() {
-    const controlParamsList = this.vis.params.controls.filter((controlParams) => {
+    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
@@ -82,9 +82,9 @@ class MarkdownVisComponent extends Component {
 export function MarkdownVisWrapper(props) {
   return (
     <MarkdownVisComponent
-      fontSize={props.vis.params.fontSize}
-      markdown={props.vis.params.markdown}
-      openLinksInNewTab={props.vis.params.openLinksInNewTab}
+      fontSize={props.visParams.fontSize}
+      markdown={props.visParams.markdown}
+      openLinksInNewTab={props.visParams.openLinksInNewTab}
       renderComplete={props.renderComplete}
     />
   );

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
@@ -29,7 +29,7 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
+    const wrapper = render(<MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()}/>);
     expect(wrapper.find('a').text()).toBe('markdown');
   });
 
@@ -40,7 +40,7 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
+    const wrapper = render(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={jest.fn()}/>);
     expect(wrapper.text()).toBe('Testing <a>html</a>\n');
   });
 
@@ -51,7 +51,7 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = mount(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
+    const wrapper = mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={jest.fn()}/>);
     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(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={renderComplete}/>);
       expect(renderComplete.mock.calls.length).toBe(1);
     });
 
@@ -77,11 +77,11 @@ describe('markdown vis controller', () => {
         }
       };
       const renderComplete = jest.fn();
-      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={renderComplete}/>);
       expect(renderComplete.mock.calls.length).toBe(1);
       renderComplete.mockClear();
       vis.params.markdown = 'changed';
-      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={renderComplete}/>);
       expect(renderComplete.mock.calls.length).toBe(1);
     });
 
@@ -92,10 +92,10 @@ describe('markdown vis controller', () => {
         }
       };
       const renderComplete = jest.fn();
-      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={renderComplete}/>);
       expect(renderComplete.mock.calls.length).toBe(1);
       renderComplete.mockClear();
-      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      mount(<MarkdownVisWrapper vis={vis} visParams={vis.params}  renderComplete={renderComplete}/>);
       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
@@ -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
@@ -30,16 +30,17 @@ describe('metric vis controller', function () {
           { from: 0, to: 1000 }
         ],
         style: {},
+      }, dimensions: {
+        metrics: [{ accessor: 0 }],
         bucket: null,
-        metrics: [{ accessor: 0 }]
       }
     }
   };
 
   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
@@ -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,22 +147,22 @@ 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) => {
     return (
       <MetricVisValue
         key={index}
         metric={metric}
-        fontSize={this.props.vis.params.metric.style.fontSize}
+        fontSize={this.props.visParams.metric.style.fontSize}
         onFilter={metric.filterKey && metric.bucketAgg ? this._filterBucket : null}
-        showLabel={this.props.vis.params.metric.labels.show}
+        showLabel={this.props.visParams.metric.labels.show}
       />
     );
   };

diff --git 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
@@ -36,6 +36,7 @@ function ReactEditorControllerProvider(Private, config) {
           <Component
             config={config}
             vis={this.vis}
+            visParams={this.vis.params}
             savedObj={this.savedObj}
             timeRange={params.timeRange}
             renderComplete={() => {}}
@@ -46,11 +47,7 @@ function ReactEditorControllerProvider(Private, config) {
         this.el);
     }
 
-    resize() {
-      if (this.visData) {
-        this.render(this.visData);
-      }
-    }
+    resize() {}
 
     destroy() {
       unmountComponentAtNode(this.el);