fixing color selection

src/core_plugins/kibana/public/visualize/editor/sidebar.html

@@ -88,7 +88,7 @@
 
     <div class="vis-editor-config" ng-show="sidebar.section == 'options'">
       <!-- vis options -->
-      <vis-editor-vis-options vis="vis" saved-vis="savedVis"></vis-editor-vis-options>
+      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState"></vis-editor-vis-options>
     </div>
 
 

src/core_plugins/kibana/public/visualize/editor/sidebar.js

@@ -15,6 +15,8 @@ uiModules
     controllerAs: 'sidebar',
     controller: function ($scope) {
       $scope.$bind('vis', 'editableVis');
+      $scope.$bind('uiState', 'uiState');
+
       $scope.$watch('vis.type', (visType) => {
         if (visType) {
           this.showData = visType.schemas.buckets || visType.schemas.metrics;

src/core_plugins/kibana/public/visualize/editor/vis_options.html

@@ -1,6 +1,3 @@
 <div class="sidebar-item" ng-show="vis.type.params.editor">
-  <div class="sidebar-item-title">
-    view options
-  </div>
   <div class="visualization-options"></div>
 </div>

src/core_plugins/kibana/public/visualize/editor/vis_options.js

@@ -12,6 +12,7 @@ uiModules
     scope: {
       vis: '=',
       savedVis: '=',
+      uiState: '=',
     },
     link: function ($scope, $el) {
       const $optionContainer = $el.find('.visualization-options');

src/ui/public/vislib/lib/data.js

@@ -406,7 +406,10 @@ export default function DataFactory(Private) {
      * @returns {Function} Performs lookup on string and returns hex color
      */
     getColorFunc() {
-      return color(this.getLabels(), this.uiState.get('vis.colors'));
+      const defaultColors = this.uiState.get('vis.defaultColors');
+      const overwriteColors = this.uiState.get('vis.colors');
+      const colors = defaultColors ? _.defaults({}, overwriteColors, defaultColors) : overwriteColors;
+      return color(this.getLabels(), colors);
     }
 
     /**

src/ui/public/visualize/visualize_legend.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import html from 'ui/visualize/visualize_legend.html';
 import VislibLibDataProvider from 'ui/vislib/lib/data';
-import VislibComponentsColorColorProvider from 'ui/vis/components/color/color';
 import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
 import uiModules from 'ui/modules';
 
@@ -9,7 +8,6 @@ import uiModules from 'ui/modules';
 uiModules.get('kibana')
 .directive('visualizeLegend', function (Private, getAppState) {
   const Data = Private(VislibLibDataProvider);
-  const colorPalette = Private(VislibComponentsColorColorProvider);
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
 
   return {
@@ -26,6 +24,12 @@ uiModules.get('kibana')
         refresh();
       });
 
+      $scope.uiState.on('change', refresh);
+
+      $scope.$watch('renderbot.vislibParams', () => {
+        refresh();
+      });
+
       $scope.highlight = function (event) {
         const el = event.currentTarget;
         const handler = $scope.renderbot.vislibVis.handler;
@@ -49,9 +53,11 @@ uiModules.get('kibana')
 
       $scope.setColor = function (label, color) {
         const colors = $scope.uiState.get('vis.colors') || {};
-        colors[label] = color;
+        if (colors[label] === color) delete colors[label];
+        else colors[label] = color;
+        $scope.uiState.setSilent('vis.colors', null);
         $scope.uiState.set('vis.colors', colors);
-        refresh();
+        $scope.uiState.emit('colorChanged');
       };
 
       $scope.toggleLegend = function () {
@@ -98,14 +104,28 @@ uiModules.get('kibana')
       ];
 
       function refresh() {
+        if (!$scope.renderbot) return;
         const vislibVis = $scope.renderbot.vislibVis;
 
         if ($scope.uiState.get('vis.legendOpen') == null && $scope.vis.params.addLegend != null) {
           $scope.open = $scope.vis.params.addLegend;
         }
 
-        $scope.labels = getLabels($scope.data, vislibVis.visConfigArgs.type);
-        $scope.getColor = colorPalette(_.pluck($scope.labels, 'label'), $scope.uiState.get('vis.colors'));
+        if (vislibVis.visConfigArgs.type === 'heatmap') {
+          const labels = vislibVis.getLegendLabels();
+          if (labels) {
+            $scope.labels = _.map(labels, label => { return { label: label }; });
+          } else {
+            $scope.labels = [{ label: 'loading ...' }];
+            $timeout(refresh, 100);
+          }
+        } else {
+          $scope.labels = getLabels($scope.data, vislibVis.visConfigArgs.type);
+        }
+
+        if (vislibVis.visConfig) {
+          $scope.getColor = vislibVis.visConfig.data.getColorFunc();
+        }
       }
 
       // Most of these functions were moved directly from the old Legend class. Not a fan of this.
@@ -125,8 +145,6 @@ uiModules.get('kibana')
         }, []);
         return _.compact(_.uniq(values, 'label'));
       }
-
-
     }
   };
 });