Began working on exploring variable value groups/tags

public/app/controllers/search.js

@@ -123,32 +123,4 @@ function (angular, _, config) {
 
   });
 
-  module.directive('tagColorFromName', function() {
-
-    function djb2(str) {
-      var hash = 5381;
-      for (var i = 0; i < str.length; i++) {
-        hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
-      }
-      return hash;
-    }
-
-    return {
-      scope: { tag: "=" },
-      link: function (scope, element) {
-        var name = scope.tag;
-        var hash = djb2(name.toLowerCase());
-        var colors = [
-          "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
-          "#508642","#447EBC","#C15C17","#890F02","#757575",
-          "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
-          "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
-          "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
-          "#58140C","#052B51","#511749","#3F2B5B",
-        ];
-        var color = colors[Math.abs(hash % colors.length)];
-        element.css("background-color", color);
-      }
-    };
-  });
 });

public/app/directives/tip.js

@@ -78,4 +78,43 @@ function (angular, kbn) {
       };
     });
 
-});
+  angular
+    .module('grafana.directives')
+    .directive('tagColorFromName', function() {
+
+    function djb2(str) {
+      var hash = 5381;
+      for (var i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
+      }
+      return hash;
+    }
+
+    return {
+      scope: { tagColorFromName: "=" },
+      link: function (scope, element) {
+        var hash = djb2(scope.tagColorFromName.toLowerCase());
+        var colors = [
+          "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
+          "#508642","#447EBC","#C15C17","#890F02","#757575",
+          "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
+          "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
+          "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
+          "#58140C","#052B51","#511749","#3F2B5B",
+        ];
+        var borderColors = [
+          "#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
+          "#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
+          "#3069A2","#934588","#7E6A9D","#88C477","#557575",
+          "#E54126","#A694DD","#B054DE", "#8FC426","#262626",
+          "#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
+          "#7E3A32","#2B5177","#773D6F","#655181",
+        ];
+        var color = colors[Math.abs(hash % colors.length)];
+        var borderColor = borderColors[Math.abs(hash % borderColors.length)];
+
+        element.css("background-color", color);
+        element.css("border-color", borderColor);
+      }
+    };
+  });});

public/app/features/dashboard/partials/variableValueSelect.html

@@ -15,12 +15,21 @@
 			</span>
 		</div>
 
-		<div class="variable-options-container" ng-if="!query.tagcloud">
-			<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
-				ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
-				<span >{{option.text}}</label>
-				<span class="fa fa-fw variable-option-icon"></span>
-			</a>
+		<div class="variable-options-wrapper">
+			<div class="variable-options-column">
+				<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
+					ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
+					<span>{{option.text}}</span>
+					<span class="fa fa-fw variable-option-icon"></span>
+				</a>
+			</div>
+			<div class="variable-options-column" ng-if="variable.tags">
+				<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
+				<a class="variable-option-tag pointer" ng-repeat="(key, values) in variable.tags" ng-click="selectTag(option, $event)">
+					<span class="label-tag" tag-color-from-name="key">{{key}}</span>
+					<span class="fa fa-fw variable-option-icon"></span>
+				</a>
+			</div>
 		</div>
 	</div>
 </div>

public/app/features/templating/editorCtrl.js

@@ -82,6 +82,14 @@ function (angular, _) {
     };
 
     $scope.update = function() {
+      $scope.current.tags = {
+        "Europe": ["backend_03", "backend_04"],
+        "USA": ["backend_01", "backend_02"],
+        "Asia": ["backend_01"],
+        "South America": ["backend_02"],
+        "Africa": ["backend_03"],
+      };
+
       if ($scope.isValid()) {
         $scope.runQuery().then(function() {
           $scope.reset();

public/app/partials/search.html

@@ -46,7 +46,7 @@
 			ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
 
 			<span class="search-result-tags">
-				<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag"  class="label label-tag">
+				<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag"  class="label label-tag">
 					{{tag}}
 				</span>
 				<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>

public/css/less/overrides.less

@@ -542,10 +542,13 @@ div.flot-text {
 .label-tag {
   background-color: @purple;
   color: darken(@white, 5%);
+  white-space: nowrap;
   border-radius: 2px;
   text-shadow: none;
   font-size: 13px;
-  padding: 4px 6px;
+  padding: 2px 6px;
+  border-width: 1px;
+  border-style: solid;
   .icon-tag {
     position: relative;
     top: 1px;

public/css/less/sidemenu.less

@@ -91,7 +91,6 @@
   display: block;
   padding: 8px 0 4px 22px;
   background-color: @navbarBackground;
-  border-right: 3px solid @bodyBackground;
   img {
     border-radius: 50%;
     background: @iconContainerBackground;

public/css/less/submenu.less

@@ -55,31 +55,48 @@
   border-radius: 3px 3px 0 0;
 }
 
-.variable-options-container {
+.variable-options-wrapper {
+  display: table;
+  width: 100%;
+}
+
+.variable-options-column {
   max-height: 350px;
   overflow: auto;
-  display: block;
+  display: table-cell;
   line-height: 26px;
+  &:nth-child(2) {
+    border-left: 1px solid @grafanaTargetFuncBackground;
+  }
 }
 
-.variable-option {
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
   display: block;
-  padding: 0 8px;
+  padding: 0 27px 0 8px;
+  position: relative;
 
-  &:hover, &.highlighted {
-    background-color: @blueDark;
-  }
-
-  .fa {
-    line-height: 26px;
-    float: right;
-    padding-left: 4px;
-  }
+ .variable-option-icon { display: none }
 
   &.selected {
     .variable-option-icon:before {
       content: "\f00c";
     }
+    .variable-option-icon {
+      display: block;
+      padding-left: 4px;
+      line-height: 26px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
+
+.variable-option {
+  &:hover, &.highlighted {
+    background-color: @blueDark;
   }
 }