fixes renderComplete in angular vis type (#16150)

src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js

@@ -5,9 +5,17 @@ import $ from 'jquery';
 describe('markdown vis controller', function () {
   let $scope;
 
+  const applyChanges = () => {
+    $scope.updateStatus.params = true;
+    $scope.renderComplete = () => {};
+    $scope.$digest();
+  };
+
   beforeEach(ngMock.module('kibana/markdown_vis'));
   beforeEach(ngMock.inject(function ($rootScope, $controller) {
     $scope = $rootScope.$new();
+    $scope.updateStatus = {};
+    $scope.vis = { params: {} };
     $scope.renderComplete = () => {};
     const $element = $('<div>');
     $controller('KbnMarkdownVisController', { $scope, $element });
@@ -16,12 +24,8 @@ describe('markdown vis controller', function () {
 
   it('should set html from markdown params', function () {
     expect($scope).to.not.have.property('html');
-    $scope.vis = {
+    $scope.vis.params.markdown = 'This is a test of the [markdown](http://daringfireball.net/projects/markdown) vis.';
-      params: {
+    applyChanges();
-        markdown: 'This is a test of the [markdown](http://daringfireball.net/projects/markdown) vis.'
-      }
-    };
-    $scope.$digest();
 
     expect($scope).to.have.property('html');
     expect($scope.html.toString().indexOf('<a href')).to.be.greaterThan(-1);

src/core_plugins/markdown_vis/public/markdown_vis_controller.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import MarkdownIt from 'markdown-it';
 import { uiModules } from 'ui/modules';
 import 'angular-sanitize';
@@ -9,9 +10,9 @@ const markdownIt = new MarkdownIt({
 
 const module = uiModules.get('kibana/markdown_vis', ['kibana', 'ngSanitize']);
 module.controller('KbnMarkdownVisController', function ($scope) {
-  $scope.$watch('vis.params.markdown', function (html) {
+  $scope.$watch('renderComplete', function () {
-    if (html) {
+    if ($scope.updateStatus.params && _.get($scope, 'vis.params.markdown', null)) {
-      $scope.html = markdownIt.render(html);
+      $scope.html = markdownIt.render($scope.vis.params.markdown);
     }
     $scope.renderComplete();
   });

src/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js

@@ -19,6 +19,7 @@ describe('metric vis', function () {
   beforeEach(ngMock.module('kibana/metric_vis'));
   beforeEach(ngMock.inject(function ($rootScope, $controller) {
     $scope = $rootScope.$new();
+    $scope.renderComplete = () => {};
     $scope.vis = {
       params: {
         metric: {

src/core_plugins/metric_vis/public/metric_vis.html

@@ -2,8 +2,8 @@
   <div class="metric-container" ng-repeat="metric in metrics" ng-style="{'background-color': metric.bgColor}">
       <div class="metric-value"
            ng-bind-html="metric.value"
-           ng-style="{'font-size': vis.params.metric.style.fontSize+'pt', 'color': metric.color}"
+           ng-style="{'font-size': visState.params.metric.style.fontSize+'pt', 'color': metric.color}"
       ></div>
-      <div ng-if="vis.params.metric.labels.show">{{metric.label}}</div>
+      <div ng-if="visState.params.metric.labels.show">{{metric.label}}</div>
   </div>
 </div>

src/core_plugins/metric_vis/public/metric_vis_controller.js

@@ -1,12 +1,11 @@
 import _ from 'lodash';
 import { uiModules } from 'ui/modules';
 import { getHeatmapColors } from 'ui/vislib/components/color/heatmap_color';
-import { dispatchRenderComplete } from 'ui/render_complete';
 // get the kibana/metric_vis module, and make sure that it requires the "kibana" module if it
 // didn't already
 const module = uiModules.get('kibana/metric_vis', ['kibana']);
 
-module.controller('KbnMetricVisController', function ($scope, $element) {
+module.controller('KbnMetricVisController', function ($scope) {
 
   const metrics = $scope.metrics = [];
   let labels = [];
@@ -113,15 +112,15 @@ module.controller('KbnMetricVisController', function ($scope, $element) {
     });
   };
 
-  $scope.$watch('esResponse', function (resp) {
+  $scope.$watch('renderComplete', function () {
-    if (resp) {
+    if ($scope.esResponse) {
       metrics.length = 0;
       labels.length = 0;
       colors.length = 0;
       colors = getColors();
       labels = getLabels();
-      $scope.processTableGroups(resp);
+      $scope.processTableGroups($scope.esResponse);
-      dispatchRenderComplete($element[0]);
     }
+    $scope.renderComplete();
   });
 });

src/core_plugins/table_vis/public/__tests__/_table_vis_controller.js

@@ -79,6 +79,7 @@ describe('Controller', function () {
   // remove the response from the controller
   function removeEsResponseFromScope() {
     delete $rootScope.esResponse;
+    $rootScope.renderComplete = () => {};
     $rootScope.$apply();
   }
 

src/core_plugins/table_vis/public/table_vis.html

@@ -7,11 +7,11 @@
   <div ng-if="tableGroups" class="table-vis-container">
     <kbn-agg-table-group
       group="tableGroups"
-      export-title="vis.title"
+      export-title="visState.title"
-      per-page="vis.params.perPage"
+      per-page="visState.params.perPage"
       sort="sort"
-      show-total="vis.params.showTotal"
+      show-total="visState.params.showTotal"
-      total-func="vis.params.totalFunc">
+      total-func="visState.params.totalFunc">
     </kbn-agg-table-group>
   </div>
 </div>

src/core_plugins/table_vis/public/table_vis_controller.js

@@ -21,26 +21,25 @@ module.controller('KbnTableVisController', function ($scope) {
    * - the underlying data changes (esResponse)
    * - one of the view options changes (vis.params)
    */
-  $scope.$watch('esResponse', function (resp) {
+  $scope.$watch('renderComplete', function () {
 
     let tableGroups = $scope.tableGroups = null;
     let hasSomeRows = $scope.hasSomeRows = null;
 
-    if (resp) {
+    if ($scope.esResponse) {
-      tableGroups = resp;
+      tableGroups = $scope.esResponse;
 
       hasSomeRows = tableGroups.tables.some(function haveRows(table) {
         if (table.tables) return table.tables.some(haveRows);
         return table.rows.length > 0;
       });
-
-      $scope.renderComplete();
     }
 
     $scope.hasSomeRows = hasSomeRows;
     if (hasSomeRows) {
       $scope.tableGroups = tableGroups;
     }
+    $scope.renderComplete();
   });
 });
 

src/core_plugins/tagcloud/public/tag_cloud_controller.js

@@ -24,6 +24,7 @@ module.controller('KbnTagCloudController', function ($scope, $element) {
     if (!$scope.vis.aggs[0] || !$scope.vis.aggs[1]) {
       incompleteMessage.style.display = 'none';
       truncatedMessage.style.display = 'none';
+      $scope.renderComplete();
       return;
     }
 
@@ -38,18 +39,25 @@ module.controller('KbnTagCloudController', function ($scope, $element) {
       incompleteMessage.style.display = 'block';
     }
 
-
     $scope.renderComplete();
   });
 
-  $scope.$watch('esResponse', async function (response) {
+  $scope.$watch('renderComplete', async function () {
 
-    if (!response || !response.tables.length) {
+    if ($scope.updateStatus.resize) {
+      tagCloud.resize();
+    }
+
+    if ($scope.updateStatus.params) {
+      tagCloud.setOptions($scope.vis.params);
+    }
+
+    if (!$scope.esResponse || !$scope.esResponse.tables.length) {
       tagCloud.setData([]);
       return;
     }
 
-    const data = response.tables[0];
+    const data = $scope.esResponse.tables[0];
     bucketAgg = data.columns[0].aggConfig;
 
     const tags = data.rows.map(row => {
@@ -72,11 +80,4 @@ module.controller('KbnTagCloudController', function ($scope, $element) {
     tagCloud.setData(tags);
   });
 
-
-  $scope.$watch('vis.params', (options) => tagCloud.setOptions(options));
-
-  $scope.$watch('resize', () => {
-    tagCloud.resize();
-  });
-
 });

src/core_plugins/timelion/public/vis/timelion_vis.html

@@ -1,3 +1,3 @@
 <div ng-controller="TimelionVisController" class="timelion-vis">
-    <div chart="esResponse.sheet[0]" interval="vis.params.interval"></div>
+    <div chart="esResponse.sheet[0]" interval="visState.params.interval"></div>
 </div>

src/ui/public/vis/vis_types/angular_vis_type.js

@@ -11,15 +11,17 @@ export function AngularVisTypeProvider(Private, $compile, $rootScope) {
       this.vis = vis;
     }
 
-    render(esResponse) {
+    render(esResponse, 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.renderComplete = resolve;
           this.$scope.renderFailed = reject;
           this.$scope.resize = Date.now();
+          this.$scope.updateStatus = status;
           this.$scope.$apply();
         };