Added collapsable rows, error handling in table panel, ground work for new kinds of binding, refactored view a bit

panels/histogram/module.html

@@ -1,4 +1,4 @@
-<div ng-controller='histogram'>
+<div ng-controller='histogram' style="height:{{row.height}}">
   <h4>{{panel.title}}</h4>
   <div histogram params="{{panel}}" style="height:{{row.height}}"></div>
 </div>         

panels/histogram/module.js

@@ -87,12 +87,15 @@ angular.module('kibana.histogram', [])
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
 
-      scope.$watch('data', function() {
+      // If the data or row state changes, re-render
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
         if(!(_.isUndefined(scope.data)))
           render_panel(scope,elem,attrs);
       });
 
-      // Re-render if the window is
+      // Re-render if the window is resized
       angular.element(window).bind('resize', function(){
           render_panel(scope,elem,attrs);
       });

panels/map/module.js

@@ -63,9 +63,12 @@ angular.module('kibana.map', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // Re-rending panel if data changes
-      scope.$watch('data', function() {
-        render_panel(scope,elem,attrs);
+      // If the data or row state changes, re-render
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
+        if(!(_.isUndefined(scope.data)))
+          render_panel(scope,elem,attrs);
       });
 
       // Or if the window is resized

panels/pie/module.js

@@ -112,13 +112,15 @@ angular.module('kibana.pie', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // Re-rending the panel if it is resized,
-      scope.$watch('data', function() {
+      // Watch if data or row state changes
+      scope.$watch(function () {
+        return angular.toJson([scope.data, scope.row]) 
+      }, function() {
         if(!(_.isUndefined(scope.data)))
           render_panel(scope,elem,attrs);
       });
 
-      // Or if the model changes
+      // Or if the window is resized
       angular.element(window).bind('resize', function(){
           render_panel(scope,elem,attrs);
       });
@@ -152,7 +154,9 @@ angular.module('kibana.pie', [])
         };
 
         // Populate element
-        $.plot(elem, scope.data, pie);
+        if(elem.is(":visible")){
+          $.plot(elem, scope.data, pie);
+        }
         //elem.show();
       }
     }

panels/sort/module.html

@@ -1,5 +1,5 @@
-<div ng-controller='sort'>
-  <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
-  <select ng-model="panel.sort[0]" ng-options="f for f in fields"></select>
+<div ng-controller='sort' style="white-space: nowrap;">
+  <h4 ng-class="{'ng-cloak': !panel.title}">{{panel.title}}</h4>
   <i ng-click="toggle_sort()" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
+  <select ng-model="panel.sort[0]" ng-options="f for f in fields"></select>
 </div>

panels/stringquery/module.html

@@ -1,6 +1,6 @@
 <div ng-controller='stringquery'>
-  <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
-  <form class="form-search">
+  <h4 ng-class="{'ng-cloak': !panel.title}">{{panel.title}}</h4>
+  <form class="form-search" style="margin-bottom:0px">
     <input type="text" class="input-medium search-query" ng-model="query" style="width:85%">
     <button type="submit" class="btn" ng-click="send_query(query)">Search</button>
   </form>