diff --git a/src/kibana/components/visualize/visualize.js b/src/kibana/components/visualize/visualize.js index 74162ee3e92f7..5f2e2993cbd0b 100644 --- a/src/kibana/components/visualize/visualize.js +++ b/src/kibana/components/visualize/visualize.js @@ -24,14 +24,24 @@ define(function (require) { template: require('text!components/visualize/visualize.html'), link: function ($scope, $el, attr) { var chart; // set in "vis" watcher - var $visEl = $el.find('.visualize-chart'); - var $spyEl = $el.find('visualize-spy'); var minVisChartHeight = 180; + function getter(selector) { + return function () { + var $sel = $el.find(selector); + if ($sel.size()) return $sel; + }; + } + + var getVisEl = getter('.visualize-chart'); + var getSpyEl = getter('visualize-spy'); + $scope.spy = {mode: false}; $scope.fullScreenSpy = false; var applyClassNames = function () { + var $spyEl = getSpyEl(); + var $visEl = getVisEl(); var fullSpy = ($scope.spy.mode && ($scope.spy.mode.fill || $scope.fullScreenSpy)); // external @@ -68,6 +78,9 @@ define(function (require) { $scope.$watch('fullScreenSpy', applyClassNames); $scope.$watchCollection('spy.mode', function (spyMode, oldSpyMode) { + var $visEl = getVisEl(); + if (!$visEl) return; + // if the spy has been opened, check chart height if (spyMode && !oldSpyMode) { $scope.fullScreenSpy = $visEl.height() < minVisChartHeight; @@ -76,6 +89,9 @@ define(function (require) { }); $scope.$watch('vis', prereq(function (vis, oldVis) { + var $visEl = getVisEl(); + if (!$visEl) return; + if (!attr.editableVis) { $scope.editableVis = vis; } diff --git a/src/kibana/components/visualize/visualize.less b/src/kibana/components/visualize/visualize.less index d58815c2c2cdd..a02bba329f8b1 100644 --- a/src/kibana/components/visualize/visualize.less +++ b/src/kibana/components/visualize/visualize.less @@ -93,7 +93,7 @@ visualize-spy { } .visualize-spy-container { - .flex(1, 0, auto); + .flex(1, 1, auto); .display(flex); .flex-direction(column); @@ -105,6 +105,11 @@ visualize-spy { padding: 0 0 15px; } + header + * { + .flex(1, 1, auto); + overflow: auto; + } + > .alert { .flex(0, 0, auto); }