Vis spy full screen toggle fixes

src/kibana/components/visualize/spy/_spy.html

@@ -14,7 +14,7 @@
     </a>
   </div>
   <div class="button-group">
-    <a ng-click="toggleFullPage()">
+    <a ng-if="!fullScreenSpy" ng-click="toggleFullPage()">
       <i ng-if="!spyMode.fill" class="fa fa-expand"></i>
       <i ng-if="spyMode.fill" class="fa fa-compress"></i>
     </a>

src/kibana/components/visualize/spy/_table.js

@@ -14,11 +14,9 @@ define(function (require) {
         var perPageDefault = 10;
         var perPageExtended = 20;
 
-        // TODO: finish this - the list should get longer in full screen mode
-        // $scope.$parent.$watch('spyMode.fill', function (fill) {
-        //   $scope.perPage = (fill) ? perPageExtended : perPageDefault;
-        // });
-        $scope.perPage = perPageDefault;
+        $scope.$parent.$watch('spyMode.fill', function (fill) {
+          $scope.perPage = (fill) ? perPageExtended : perPageDefault;
+        });
 
         $scope.sort = null;
         $scope.csv = {

src/kibana/components/visualize/spy/spy.js

@@ -22,14 +22,12 @@ define(function (require) {
           $scope.modes = modes;
 
           $scope.toggleDisplay = function () {
+            $scope.showPageToggle = !$scope.fullScreenSpy;
             $scope.setSpyMode($scope.spyMode ? null : defaultMode);
           };
 
           $scope.toggleFullPage = function () {
             fullPageSpy = $scope.spyMode.fill = !fullPageSpy;
-
-            // tell any listeners spyMode changed
-            $scope.$emit('change:spyMode', $scope.spyMode);
           };
 
           $scope.setSpyMode = function (newMode) {
@@ -71,8 +69,6 @@ define(function (require) {
 
             // wrapped in fn to enable early return
             set();
-
-            if (change) $scope.$emit('change:spyMode', current);
           };
         }
       };

src/kibana/components/visualize/visualize.js

@@ -24,28 +24,25 @@ define(function (require) {
       template: require('text!components/visualize/visualize.html'),
       link: function ($scope, $el, attr) {
         var chart; // set in "vis" watcher
-        var $visualize = $el.find('.visualize-chart');
+        var $visChart = $el.find('.visualize-chart');
         var $spy = $el.find('visualize-spy');
+        var minVisChartHeight = 180;
 
         $scope.spyMode = false;
-        $scope.onlyShowSpy = false;
+        $scope.fullScreenSpy = false;
 
         var applyClassNames = function () {
+          var fullSpy = ($scope.spyMode && ($scope.spyMode.fill || $scope.fullScreenSpy));
+
           // external
           $el.toggleClass('only-visualization', !$scope.spyMode);
-          $el.toggleClass('visualization-and-spy', $scope.spyMode && !$scope.onlyShowSpy);
-          $el.toggleClass('only-spy', Boolean($scope.onlyShowSpy));
-
-          $spy.toggleClass('only', Boolean($scope.onlyShowSpy));
+          $el.toggleClass('visualization-and-spy', $scope.spyMode && !fullSpy);
+          $el.toggleClass('only-spy', Boolean(fullSpy));
+          $spy.toggleClass('only', Boolean(fullSpy));
 
           // internal
-          $visualize.toggleClass('spy-visible', Boolean($scope.spyMode));
-          $visualize.toggleClass('spy-only', Boolean($scope.onlyShowSpy));
-        };
-
-        var calcResponsiveStuff = function () {
-          $scope.onlyShowSpy = $scope.spyMode && ($scope.spyMode.fill || $el.height() < 550);
-          applyClassNames();
+          $visChart.toggleClass('spy-visible', Boolean($scope.spyMode));
+          $visChart.toggleClass('spy-only', Boolean(fullSpy));
         };
 
         // we need to wait for come watchers to fire at least once
@@ -69,8 +66,13 @@ define(function (require) {
           };
         }());
 
-        $scope.$on('change:spyMode', function (event, spyMode) {
-          calcResponsiveStuff();
+        $scope.$watchCollection('spyMode', function (spyMode, oldSpyMode) {
+          $scope.spyMode = spyMode;
+          // if the spy has been opened, check chart height
+          if (spyMode && !oldSpyMode) {
+            $scope.fullScreenSpy = $visChart.height() < minVisChartHeight;
+          }
+          applyClassNames();
         });
 
         $scope.$watch('vis', prereq(function (vis, prevVis) {
@@ -91,7 +93,7 @@ define(function (require) {
             vis.vislibParams
           );
 
-          chart = new visLib.Vis($visualize[0], vislibParams);
+          chart = new visLib.Vis($visChart[0], vislibParams);
 
           _.each(vis.listeners, function (listener, event) {
             chart.on(event, listener);

src/kibana/directives/paginate.js

@@ -15,45 +15,18 @@ define(function (require) {
 
         $scope.paginate = {};
 
-        // pagination controls
+        // watchers on attributes
+        $scope.$watchCollection(attrs.list, function (list) {
+          $scope.list = list;
+          renderList();
+        });
         $scope.$watch(attrs.perPage, function (perPage) {
           $scope.paginate.perPage = perPage || perPageDefault;
         });
 
+        $scope.$watch('paginate.perPage', renderList);
         var getOtherWidth = $parse(attrs.otherWidth);
 
-        $scope.$watchCollection(attrs.list, function (list) {
-          $scope.pages = [];
-          if (!list) return;
-
-          var perPage = $scope.paginate.perPage;
-          var count = Math.ceil(list.length / perPage);
-
-          _.times(count, function (i) {
-            var start = perPage * i;
-            var page = list.slice(start, start + perPage);
-
-            page.number = i + 1;
-            page.i = i;
-
-            page.count = count;
-            page.first = page.number === 1;
-            page.last = page.number === count;
-
-            page.prev = $scope.pages[i - 1];
-            if (page.prev) page.prev.next = page;
-
-            $scope.pages.push(page);
-          });
-
-          // set the new page, or restore the previous page number
-          if ($scope.page && $scope.page.i < $scope.pages.length) {
-            $scope.page = $scope.pages[$scope.page.i];
-          } else {
-            $scope.page = $scope.pages[0];
-          }
-        });
-
         $scope.$watch('page', function (newPage, oldPage) {
           if (!newPage) {
             delete $scope.otherPages;
@@ -96,6 +69,38 @@ define(function (require) {
             $scope.page = $scope.pages[number - 1] || $scope.pages[0];
           }
         };
+
+        function renderList() {
+          $scope.pages = [];
+          if (!$scope.list) return;
+
+          var perPage = $scope.paginate.perPage;
+          var count = Math.ceil($scope.list.length / perPage);
+
+          _.times(count, function (i) {
+            var start = perPage * i;
+            var page = $scope.list.slice(start, start + perPage);
+
+            page.number = i + 1;
+            page.i = i;
+
+            page.count = count;
+            page.first = page.number === 1;
+            page.last = page.number === count;
+
+            page.prev = $scope.pages[i - 1];
+            if (page.prev) page.prev.next = page;
+
+            $scope.pages.push(page);
+          });
+
+          // set the new page, or restore the previous page number
+          if ($scope.page && $scope.page.i < $scope.pages.length) {
+            $scope.page = $scope.pages[$scope.page.i];
+          } else {
+            $scope.page = $scope.pages[0];
+          }
+        }
       }
     };
   });