Added toggle between single and grouped analysis to micropanel

src/app/components/kbn.js

@@ -61,23 +61,41 @@ function($, _) {
     return value;
   };
 
-  kbn.top_field_values = function(docs,field,count) {
+  kbn.top_field_values = function(docs,field,count,grouped) {
     var all_values = _.pluck(docs,field),
-      groups = {};
-
+      groups = {},
+      counts,
+      hasArrays;
     // manually grouping into pairs allows us to keep the original value,
     _.each(all_values, function (value) {
-      var key = _.isUndefined(value) ? '' : value.toString();
-      if (_.has(groups, key)) {
-        groups[key][1] ++;
+      var k;
+      if(_.isArray(value)) {
+        hasArrays =  true;
+      }
+      if(_.isArray(value) && !grouped) {
+        k = value;
       } else {
-        groups[key] = [value, 1];
+        k = _.isUndefined(value) ? '' : [value.toString()];
       }
+      _.each(k, function(key) {
+        if (_.has(groups, key)) {
+          groups[key][1] ++;
+        } else {
+          groups[key] = [(grouped ? value : key), 1];
+        }
+      });
     });
 
-    return _.values(groups).sort(function(a, b) {
+    counts = _.values(groups).sort(function(a, b) {
       return a[1] - b[1];
     }).reverse().slice(0,count);
+
+    console.log(hasArrays);
+
+    return {
+      counts: counts,
+      hasArrays : hasArrays
+    };
   };
 
    /**

src/app/panels/table/micropanel.html

@@ -3,22 +3,30 @@
   Micro Analysis of {{micropanel.field}}
   <i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();"></i>
   <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();"></i>
-  <br><small>{{micropanel.count}} events in the table set</small>
+  <br>
+  <small>
+    {{micropanel.count}} events in the table set
+    <span ng-show="micropanel.hasArrays">
+      as
+      <a class="link" ng-class="{'strong':micropanel.grouped}" ng-click="toggle_micropanel(micropanel.field,true)">Groups</a> /
+      <a class="link" ng-class="{'strong':!micropanel.grouped}" ng-click="toggle_micropanel(micropanel.field,false)">Singles</a>
+    </span>
+  </small>
 </h4>
-<table style="width:100%" class='table table-striped table-condensed'>
+<table style="width:100%;table-layout:fixed" class='table table-striped table-condensed'>
   <thead>
-    <th>{{micropanel.field}}</th>
-    <th>Action</th>
-    <th style="text-align:right">Count</th>
+    <th style="width:260px">{{micropanel.field}}</th>
+    <th style="width:40px">Action</th>
+    <th style="width:100px;text-align:right">Count</th>
   </thead>
   <tbody>
     <tr ng-repeat='field in micropanel.values'>
-      <td>{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</td>
-      <td style="width:40px">
+      <td style="word-wrap:break-word">{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</td>
+      <td>
         <i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i>
         <i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],true);dismiss();"></i>
       </td>
-      <td class="progress" style="width:100px;position:relative">
+      <td class="progress" style="position:relative">
         <style scoped>
           .progress {
             overflow: visible;
@@ -30,7 +38,7 @@
     </tr>
   </tbody>
 </table>
-<div class="progress">
+<div class="progress" ng-show="micropanel.grouped">
   <div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
 </div>
 <span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
\ No newline at end of file

src/app/panels/table/module.html

@@ -18,7 +18,7 @@
         <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;">
           <li ng-style="panel.style" ng-repeat="field in fields.list" >
             <i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i>
-            <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
+            <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
           </li>
         </ul>
 

src/app/panels/table/module.js

@@ -87,11 +87,14 @@ function (angular, app, _, kbn, moment) {
 
     $scope.percent = kbn.to_percent;
 
-    $scope.toggle_micropanel = function(field) {
+    $scope.toggle_micropanel = function(field,groups) {
       var docs = _.pluck($scope.data,'_source');
+      var topFieldValues = kbn.top_field_values(docs,field,10,groups);
       $scope.micropanel = {
         field: field,
-        values : kbn.top_field_values(docs,field,10),
+        grouped: groups,
+        values : topFieldValues.counts,
+        hasArrays : topFieldValues.hasArrays,
         related : kbn.get_related_fields(docs,field),
         count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true']
       };