Merge pull request jupyter#190 from dalogsdon/157-report-layout

[Issue 157] Support report layout
jameslmartin · Apr 22, 2016 · fb21df7 · fb21df7
2 parents c341814 + fb3f625
commit fb21df7
Show file tree

Hide file tree

Showing 23 changed files with 278 additions and 78 deletions.
diff --git a/app/config.js b/app/config.js
@@ -53,7 +53,7 @@ debug('resolved NOTEBOOKS_DIR: ' + config.get('NOTEBOOKS_DIR'));
 // TODO Move vars to own module
 config.set('DB_FILE_EXT', '.ipynb');
 config.set('DB_INDEX', 'index.ipynb');
-config.set('DB_INDEX_DIR', 'index')
+config.set('DB_INDEX_DIR', 'index');
 
 var key_file_location = config.get('HTTPS_KEY_FILE');
 var cert_file_location = config.get('HTTPS_CERT_FILE');

diff --git a/app/handlebars-helpers.js b/app/handlebars-helpers.js
@@ -14,6 +14,19 @@ module.exports = {
         return config.get(name);
     },
 
+    defaultDashboardConfig: function(layout) {
+        if (layout === 'grid') {
+            return {
+                layout: 'grid',
+                cellMargin: config.get('DB_CELL_MARGIN'),
+                defaultCellHeight: config.get('DB_DEFAULT_CELL_HEIGHT'),
+                maxColumns: config.get('DB_MAX_COLUMNS')
+            };
+        } else {
+            return {};
+        }
+    },
+
     fsIcon: function(type) {
         var value = '';
         if (type === 'directory') {
@@ -26,6 +39,13 @@ module.exports = {
         return value;
     },
 
+    isVisible: function(metadata) {
+        return metadata &&
+               metadata.urth &&
+               metadata.urth.dashboard &&
+               !metadata.urth.dashboard.hidden;
+    },
+
     mapCellType: function(cellType) {
         return cellType === 'markdown' ? 'text-cell rendered_html' : 'code-cell';
     },

diff --git a/data/INTRO/index.ipynb b/data/INTRO/index.ipynb
@@ -171,6 +171,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "stacked",

diff --git a/etc/notebooks/demo/dashboards_in_a_nutshell.ipynb b/etc/notebooks/demo/dashboards_in_a_nutshell.ipynb
@@ -492,6 +492,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/etc/notebooks/demo/lorenz.ipynb b/etc/notebooks/demo/lorenz.ipynb
@@ -251,6 +251,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/etc/notebooks/demo/taxi_demo.zip b/etc/notebooks/demo/taxi_demo.zip
diff --git a/etc/notebooks/test/test_bundled.zip b/etc/notebooks/test/test_bundled.zip
diff --git a/etc/notebooks/test/test_busy_indicator.ipynb b/etc/notebooks/test/test_busy_indicator.ipynb
@@ -612,6 +612,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12

diff --git a/etc/notebooks/test/test_clear_output.ipynb b/etc/notebooks/test/test_clear_output.ipynb
@@ -115,6 +115,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12,

diff --git a/etc/notebooks/test/test_env_vars.ipynb b/etc/notebooks/test/test_env_vars.ipynb
@@ -57,6 +57,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/etc/notebooks/test/test_html_javascript.ipynb b/etc/notebooks/test/test_html_javascript.ipynb
@@ -111,6 +111,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12

diff --git a/etc/notebooks/test/test_layout.ipynb b/etc/notebooks/test/test_layout.ipynb
@@ -235,6 +235,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12

diff --git a/etc/notebooks/test/test_layout_basic.ipynb b/etc/notebooks/test/test_layout_basic.ipynb
@@ -174,6 +174,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12

diff --git a/etc/notebooks/test/test_layout_basic_report.ipynb b/etc/notebooks/test/test_layout_basic_report.ipynb
@@ -0,0 +1,152 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "urth": {
+     "dashboard": {}
+    }
+   },
+   "source": [
+    "# Basic Dashboard Layout Test"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true,
+    "urth": {
+     "dashboard": {
+      "hidden": true
+     }
+    }
+   },
+   "outputs": [],
+   "source": [
+    "from IPython.display import Image"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "urth": {
+     "dashboard": {}
+    }
+   },
+   "source": [
+    "Pull a static image inline into the notebook."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false,
+    "urth": {
+     "dashboard": {
+      "layout": {}
+     }
+    }
+   },
+   "outputs": [],
+   "source": [
+    "Image('http://pbs.twimg.com/profile_images/351495785/urth_caffe.png_400x400.jpg')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false,
+    "urth": {
+     "dashboard": {
+      "hidden": true
+     }
+    }
+   },
+   "outputs": [],
+   "source": [
+    "from IPython.display import display\n",
+    "from ipywidgets import FloatText, FloatSlider, FloatProgress\n",
+    "from traitlets import link"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false,
+    "urth": {
+     "dashboard": {
+      "layout": {}
+     }
+    }
+   },
+   "outputs": [],
+   "source": [
+    "a = FloatText()\n",
+    "b = FloatSlider()\n",
+    "c = FloatProgress()\n",
+    "display(a,b,c)\n",
+    "\n",
+    "link1 = link((a, 'value'), (b, 'value'))\n",
+    "link2 = link((a, 'value'), (c, 'value'))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "urth": {
+     "dashboard": {}
+    }
+   },
+   "source": [
+    "## &larr; Widgets Test\n",
+    "\n",
+    "The widgets to the left should update as you interact with any of them."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true,
+    "urth": {
+     "dashboard": {
+      "hidden": true
+     }
+    }
+   },
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "celltoolbar": "Section",
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.4"
+  },
+  "urth": {
+   "dashboard": {
+    "layout": "report"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/etc/notebooks/test/test_markdown.ipynb b/etc/notebooks/test/test_markdown.ipynb
@@ -110,6 +110,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "maxColumns": 12

diff --git a/etc/notebooks/test/test_plotting_libs.ipynb b/etc/notebooks/test/test_plotting_libs.ipynb
@@ -374,6 +374,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/etc/notebooks/test/test_style_match.ipynb b/etc/notebooks/test/test_style_match.ipynb
@@ -257,7 +257,7 @@
     }
    },
    "source": [
-    "<img src=\"http://www.bigcat.com/CZ2/cougar2.jpg\">"
+    "<img src=\"http://cincinnatizoo.org/wp-content/uploads/2011/02/cougar1.jpg\">"
    ]
   },
   {
@@ -328,6 +328,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/etc/notebooks/test/test_widget_overlap.ipynb b/etc/notebooks/test/test_widget_overlap.ipynb
@@ -158,6 +158,7 @@
   },
   "urth": {
    "dashboard": {
+    "layout": "grid",
     "cellMargin": 10,
     "defaultCellHeight": 20,
     "layoutStrategy": "packed",

diff --git a/less/dashboard.less b/less/dashboard.less
@@ -24,36 +24,41 @@ body {
         line-height: 1.5em;
 
         .dashboard-cell {
-            position: absolute;
-
-            &.hidden {
-                display: none;
-            }
+            position: relative;
 
             img {
                 max-width: 100%;
                 height: auto;
-                margin-left: auto;
-                margin-right: auto;
             }
 
             .widget-subarea:empty {
                 display: none;
             }
         }
 
-        &.no-layout {
-            .dashboard-cell{
-                position: relative;
+        &[data-dashboard-layout="grid"] {
+            .dashboard-cell {
+                position: absolute;
             }
-        }
 
-        @media (max-width: @dashboard-width-small) {
+            @media (max-width: @dashboard-width-small) {
+                .dashboard-cell {
+                    position: relative;
+                    left: auto;
+                    top: auto;
+                    width: 100%;
+                }
+            }
+        }
+        &:not([data-dashboard-layout="no-layout"]) {
+            .dashboard-cell.dashboard-hidden {
+                display: none;
+            }
+        }
+        &[data-dashboard-layout="no-layout"],
+        &[data-dashboard-layout="report"] {
             .dashboard-cell {
-                position: relative;
-                left: auto;
-                top: auto;
-                width: 100%;
+                margin-bottom: 1em;
             }
         }
     }

diff --git a/public/js/dashboard.js b/public/js/dashboard.js
@@ -268,7 +268,9 @@ requirejs([
     }
 
     function _renderDashboard() {
-        Layout.createStyle();
+        if (Config.layout === 'grid') {
+            Layout.createStyle();
+        }
         $container.removeClass('invisible');
     }