From 160a5264fe6bf7af412090e75ec294483b961260 Mon Sep 17 00:00:00 2001
From: Drew Logsdon <dalogsdon@gmail.com>
Date: Tue, 19 Apr 2016 16:22:49 -0500
Subject: [PATCH] Report fix: proper empty cell computation

Problem: Transition between states like notebook -> report -> grid -> report and notice the empty cells aren't hidden
This is because we set min-height in CSS
This ensures empty cells are zero height

(c) Copyright IBM Corp. 2016
---
 .../dashboard-view/layout/grid/layout.js      |  4 +-
 .../dashboard-view/layout/report/layout.js    | 45 ++++++++++---------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/grid/layout.js b/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/grid/layout.js
index 9e616c6..2389641 100644
--- a/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/grid/layout.js
+++ b/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/grid/layout.js
@@ -67,8 +67,8 @@ define([
             ];
         }
 
-        // Must wait for CSS to be evaluated before we generate the grid. Otherwise, positioning
-        // is calculated incorrectly.
+        // Must wait for CSS to be evaluated before we generate the grid.
+        // Otherwise, positioning is calculated incorrectly.
         $.when.apply(null, cssLoaded).then(function() {
             var nolayout = this._addMetadataToDom(); // returns cells that don't have metadata
 
diff --git a/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/report/layout.js b/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/report/layout.js
index fc17695..5b7e2a1 100644
--- a/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/report/layout.js
+++ b/jupyter_dashboards/nbextension/notebook/dashboard-view/layout/report/layout.js
@@ -26,33 +26,36 @@ define([
         this.$container = opts.$container;
 
         if (!cssLoaded) {
-            cssLoaded = [
-                linkCSS('./dashboard-view/layout/report/layout.css')
-            ];
+            cssLoaded = linkCSS('./dashboard-view/layout/report/layout.css');
         }
 
         Metadata.initialize({
             dashboardLayout: Metadata.DASHBOARD_LAYOUT.REPORT
         });
 
-        // setup cells for report layout
-        var self = this;
-        this.$container.find('.cell').each(function() {
-            var $cell = $(this);
-
-            // hide cell if empty
-            if ($cell.height() === 0 && !Metadata.getCellLayout($cell)) {
-                Metadata.hideCell($cell);
-            }
-
-            // set hidden state
-            $cell.toggleClass('dashboard-hidden dashboard-collapsed', !Metadata.isCellVisible($cell));
-
-            // add controle for hide, add, edit
-            self._addCellControls($cell);
-
-            self._updateCollapseBtns();
-        });
+        $.when(cssLoaded).then(function() {
+            // setup cells for report layout
+            var self = this;
+            this.$container.find('.cell')
+                .css('min-height', '0px') // we detect empty cells by height
+                .each(function() {
+                    var $cell = $(this);
+
+                    // hide cell if empty
+                    if ($cell.height() === 0 && !Metadata.getCellLayout($cell)) {
+                        Metadata.hideCell($cell);
+                    }
+
+                    // set hidden state
+                    $cell.toggleClass('dashboard-hidden dashboard-collapsed', !Metadata.isCellVisible($cell));
+
+                    // add controle for hide, add, edit
+                    self._addCellControls($cell);
+
+                    self._updateCollapseBtns();
+                })
+                .css('min-height','');
+        }.bind(this));
     }
 
     ReportLayout.prototype._addCellControls = function($cell) {