Improvement to series toggling, CTRL+MouseClick on series name will now hide all others (Closes grafana#350)

Author: torkelo

CHANGELOG.md

@@ -8,7 +8,7 @@
 - Unsaved changes warning feature (Issue #324)
 - Fixes to filters and "All" option. It now never uses "*" as value, but all options in a {node1, node2, node3} expression (Issue #228, #359)
 - Fix for InfluxDB query generation with columns containing dots or dashes (Issue #369, #348) - Thanks to @jbripley
-
+- Improvement to series toggling, CTRL+MouseClick on series name will now hide all others (Issue #350)
 
 # 1.5.3 (2014-04-17)
 - Add support for async scripted dashboards (Issue #274)

src/app/directives/grafanaGraph.js

@@ -23,11 +23,13 @@ function (angular, $, kbn, moment, _) {
           scope.get_data();
         });
 
-        scope.$on('toggleLegend', function(e, alias) {
-          if (hiddenData[alias]) {
-            data.push(hiddenData[alias]);
-            delete hiddenData[alias];
-          }
+        scope.$on('toggleLegend', function(e, series) {
+          _.each(series, function(serie) {
+            if (hiddenData[serie.alias]) {
+              data.push(hiddenData[serie.alias]);
+              delete hiddenData[serie.alias];
+            }
+          });
 
           render_panel();
         });

src/app/panels/graphite/legend.html

@@ -8,7 +8,7 @@
         >
     </i>
     <span class='small histogram-legend-item'>
-      <a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
+      <a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
         {{series.alias}}
       </a>
       <span ng-if="panel.legend.values">

src/app/panels/graphite/module.js

@@ -346,15 +346,53 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.render();
     };
 
-    $scope.toggleSeries = function(info) {
-      if ($scope.hiddenSeries[info.alias]) {
-        delete $scope.hiddenSeries[info.alias];
+    $scope.toggleSeries = function(serie, event) {
+      if ($scope.hiddenSeries[serie.alias]) {
+        delete $scope.hiddenSeries[serie.alias];
       }
       else {
-        $scope.hiddenSeries[info.alias] = true;
+        $scope.hiddenSeries[serie.alias] = true;
       }
 
-      $scope.$emit('toggleLegend', info.alias);
+      if (event.ctrlKey) {
+        $scope.toggleSeriesExclusiveMode(serie);
+      }
+
+      $scope.$emit('toggleLegend', $scope.legend);
+    };
+
+    $scope.toggleSeriesExclusiveMode = function(serie) {
+      var hidden = $scope.hiddenSeries;
+
+      if (hidden[serie.alias]) {
+        delete hidden[serie.alias];
+      }
+
+      // check if every other series is hidden
+      var alreadyExclusive = _.every($scope.legend, function(value) {
+        if (value.alias === serie.alias) {
+          return true;
+        }
+
+        return hidden[value.alias];
+      });
+
+      if (alreadyExclusive) {
+        // remove all hidden series
+        _.each($scope.legend, function(value) {
+          delete $scope.hiddenSeries[value.alias];
+        });
+      }
+      else {
+        // hide all but this serie
+        _.each($scope.legend, function(value) {
+          if (value.alias === serie.alias) {
+            return;
+          }
+
+          $scope.hiddenSeries[value.alias] = true;
+        });
+      }
     };
 
     $scope.toggleYAxis = function(info) {

src/app/services/dashboard.js

@@ -176,7 +176,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
 
       $timeout(function() {
         self.original = angular.copy(self.current);
-      }, 500);
+      }, 1000);
 
       return true;
     };

src/test/specs/graph-panel-controller-specs.js

@@ -0,0 +1,30 @@
+/*define([
+  //'services/all'
+], function() {
+  'use strict';
+
+  describe('Graph panel controller', function() {
+    var _graphPanelCtrl;
+
+    beforeEach(module('kibana.panels.graphite'));
+    beforeEach(module(function($provide){
+      $provide.value('filterSrv',{});
+    }));
+
+    beforeEach(inject(function($controller, $rootScope) {
+      _graphPanelCtrl = $controller('graphite', {
+        $scope: $rootScope.$new()
+      });
+    }));
+
+    describe('init', function() {
+      beforeEach(function() {
+      });
+
+      it('asd', function() {
+
+      });
+    });
+  });
+});
+*/

src/test/test-main.js

@@ -12,7 +12,8 @@ require.config({
     'underscore-src':      '../vendor/underscore',
 
     moment:                '../vendor/moment',
-    chromath:                 '../vendor/chromath',
+    chromath:              '../vendor/chromath',
+    filesaver:             '../vendor/filesaver',
 
     angular:               '../vendor/angular/angular',
     angularMocks:          '../vendor/angular/angular-mocks',
@@ -103,18 +104,27 @@ require.config({
 require([
   'angular',
   'angularMocks',
+  'jquery',
+  'underscore',
+  'elasticjs',
+  'bootstrap',
+  'angular-sanitize',
+  'angular-strap',
+  'angular-dragdrop',
+  'extend-jquery',
+  'bindonce'
 ], function(angular) {
   'use strict';
 
   angular.module('kibana', []);
-  angular.module('kibana.services', []);
+  angular.module('kibana.services', ['$strap.directives']);
 
   require([
     'specs/lexer-specs',
     'specs/parser-specs',
     'specs/gfunc-specs',
     'specs/filterSrv-specs',
-    'specs/kbn-format-specs',
+    'specs/kbn-format-specs'
   ], function () {
     window.__karma__.start();
   });

tasks/options/karma.js

@@ -7,7 +7,7 @@ module.exports = function(config) {
     },
     debug: {
       configFile: 'src/test/karma.conf.js',
-      singleRun: true,
+      singleRun: false,
       browsers: ['Chrome']
     },
     test: {