improved space efficiently of micropanel

src/app/panels/table/micropanel.html

@@ -1,23 +1,22 @@
 <a class="close" ng-click="dismiss()" href="">×</a>
-<h4>
-  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
-    <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%;table-layout:fixed" class='table table-striped table-condensed'>
+<style>
+
+</style>
+<span>
+  <i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();" bs-tooltip="'Find events with this field'"></i>
+  <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();" bs-tooltip="'Find events without this field'"></i>
+  <strong>Micro Analysis of {{micropanel.field}}</strong>
+  <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>
+</span>
+<table style="width:100%;table-layout:fixed" class='table table-striped table-unpadded'>
   <thead>
     <th style="width:260px">{{micropanel.field}}</th>
     <th style="width:40px">Action</th>
-    <th style="width:100px;text-align:right">Count</th>
+    <th style="width:100px;text-align:right">Count / {{micropanel.count}} events</th>
   </thead>
   <tbody>
     <tr ng-repeat='field in micropanel.values'>
@@ -38,16 +37,15 @@
     </tr>
   </tbody>
 </table>
-<div class="progress" ng-show="micropanel.grouped">
+<div class="progress nomargin" 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>
 <div>
-  <span ng-repeat="field in micropanel.related|orderBy:'count':true|limitTo:micropanel.limit track by $index"><a ng-click="toggle_field(field)">{{field.name}}</a> ({{Math.round((field.count / micropanel.count) * 100)}}%), </span>
+  <span ng-repeat="field in micropanel.related|orderBy:'count':true|limitTo:micropanel.limit track by $index"><a ng-click="toggle_field(field.name)" bs-tooltip="'Toggle {{field.name}} column'">{{field.name}}</a> ({{Math.round((field.count / micropanel.count) * 100)}}%), </span>
   <a class="link" ng-show="micropanel.related.length > micropanel.limit" ng-click="micropanel.limit = micropanel.limit + 10">More <i class="icon-caret-right"></i></a>
 </div>
 <div class="row-fluid">
   <div class="span12">
-    <h5>Facets</h5>
     <div class="btn-group">
       <a class="btn dropdown-toggle pointer" data-toggle="dropdown">
         <i class="icon-list-ol"></i> Terms

src/vendor/bootstrap/less/overrides.less

@@ -37,6 +37,13 @@ form input.ng-invalid {
   border: 1px solid @tableBorder;
 }
 
+.table-unpadded {
+  th,
+  td {
+    padding: 0px 2px;
+  }
+}
+
 .spy {
   position:absolute;
   right:0px;