From 400a7dc351bbe3456b718e1b7412cce47c20a6d8 Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Thu, 24 Sep 2015 17:36:36 +0900
Subject: [PATCH 01/12] Split Chart Selector and Paragraph Controls

---
 .../paragraph/paragraph-chart-selector.html   |  29 ++++
 .../notebook/paragraph/paragraph-control.html |  76 +++++++++++
 .../src/app/notebook/paragraph/paragraph.html | 128 +-----------------
 3 files changed, 110 insertions(+), 123 deletions(-)
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-control.html

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
new file mode 100644
index 00000000000..a81ca53598f
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -0,0 +1,29 @@
+<div id="{{paragraph.id}}_switch"
+     ng-if="paragraph.result.type == 'TABLE' && !asIframe && !viewOnly"
+     class="btn-group"
+     style='margin-bottom: 10px;'>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('table')}"
+          ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('multiBarChart')}"
+          ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('pieChart')}"
+          ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('stackedAreaChart')}"
+          ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}"
+          ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('scatterChart')}"
+          ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
+  </button>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
new file mode 100644
index 00000000000..d9cd3f2a7b8
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -0,0 +1,76 @@
+<div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
+
+  <span>
+    {{paragraph.status}}
+  </span>
+
+  <span ng-if="paragraph.status=='RUNNING'">
+    {{getProgress()}}%
+  </span>
+
+  <!-- Run / Cancel button -->
+  <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
+        ng-click="runParagraph(getEditorValue())"
+        ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING' && paragraph.config.enabled"></span>
+  <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top" tooltip="Cancel"
+        ng-click="cancelParagraph()"
+        ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>
+  <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide') + ' editor'}}"
+        ng-click="toggleEditor()"></span>
+  <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
+        ng-click="toggleOutput()"></span>
+  <span class="dropdown navbar-right">
+    <span class="icon-settings" style="cursor:pointer"
+          data-toggle="dropdown"
+          type="button">
+    </span>
+    <ul class="dropdown-menu" role="menu" style="width:200px;">
+      <li>
+        <a ng-click="$event.stopPropagation()" class="dropdown"><span class="fa fa-arrows-h"></span> Width
+          <form style="display:inline; margin-left:5px;">
+            <select ng-model="paragraph.config.colWidth"
+                    class="selectpicker"
+                    ng-change="changeColWidth()"
+                    ng-options="col for col in colWidthOption"></select>
+          </form>
+        </a>
+      </li>
+      <li>
+        <a ng-click="moveUp()"><span class="icon-arrow-up"></span> Move Up</a>
+      </li>
+      <li>
+        <a ng-click="moveDown()"><span class="icon-arrow-down"></span> Move Down</a>
+      </li>
+      <li>
+        <a ng-click="insertNew()"><span class="icon-plus"></span> Insert New</a>
+      </li>
+      <li>
+        <!-- paragraph handler -->
+        <a ng-click="hideTitle()"
+           ng-show="paragraph.config.title"><span class="fa fa-font"></span> Hide title</a>
+        <a ng-click="showTitle()"
+           ng-show="!paragraph.config.title"><span class="fa fa-font"></span> Show title</a>
+      </li>
+      <li>
+        <a ng-click="hideLineNumbers()"
+           ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Hide line numbers</a>
+        <a ng-click="showLineNumbers()"
+           ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Show line numbers</a>
+      </li>
+      <li>
+        <a ng-click="toggleEnableDisable()"><span class="icon-control-play"></span>
+          {{paragraph.config.enabled ? "Disable" : "Enable"}} run</a>
+      </li>
+      <li>
+        <a ng-click="goToSingleParagraph()"><span class="icon-share-alt"></span> Link this paragraph</a>
+      </li>
+      <li>
+        <a ng-click="clearParagraphOutput()"><span class="fa fa-eraser"></span> Clear output</a>
+      </li>
+      <li>
+        <!-- remove paragraph -->
+        <a ng-click="removeParagraph()"><span class="fa fa-times"></span> Remove</a>
+      </li>
+    </ul>
+  </span>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index cded6d8ea31..f7ace136995 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -90,15 +90,7 @@
                  ng-model="paragraph.settings.params[formulaire.name]"
                  ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
                  name="{{formulaire.name}}"
-                 ng-options="option.value as (option.displayName||option.value) for option in paragraph.settings.forms[formulaire.name].options"
-                 >
-<!--
-            <option
-                ng-repeat="option in paragraph.settings.forms[formulaire.name].options"
-                value="{{option.value}}"
-                >{{option.displayName || option.value}}
-            </option>
--->
+                 ng-options="option.value as (option.displayName||option.value) for option in paragraph.settings.forms[formulaire.name].options">
           </select>
         </div>
       </div>
@@ -106,44 +98,11 @@
 
     <!-- Rendering -->
     <div class='tableDisplay' ng-show="!paragraph.config.tableHide">
-      <div id="{{paragraph.id}}_switch"
-           ng-if="paragraph.result.type == 'TABLE' && !asIframe && !viewOnly"
-           class="btn-group"
-           style='margin-bottom: 10px;'>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('table')}"
-                ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i>
-        </button>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('multiBarChart')}"
-                ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i>
-        </button>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('pieChart')}"
-                ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i>
-        </button>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('stackedAreaChart')}"
-                ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i>
-        </button>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}"
-                ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i>
-        </button>
-        <button type="button" class="btn btn-default btn-sm"
-                ng-class="{'active': isGraphMode('scatterChart')}"
-                ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
-        </button>
-      </div>
+      <div style="display: inline-block;" ng-include src="'app/notebook/paragraph/paragraph-chart-selector.html'"></div>
       <span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && !asIframe && !viewOnly"
             style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
-        <a ng-if="paragraph.config.graph.optionOpen"
-           ng-click="toggleGraphOption()">
-          settings <span class="fa fa-caret-up"></span>
-        </a>
-        <a ng-if="!paragraph.config.graph.optionOpen"
-           ng-click="toggleGraphOption()" >
-          settings <span class="fa fa-caret-down"></span>
+        <a class="btnText" ng-click="toggleGraphOption()">
+          settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
         </a>
       </span>
 
@@ -315,7 +274,6 @@
             </span>
           </div>
         </div>
-
       </div>
 
 
@@ -402,86 +360,10 @@
     </div>
   </div>
 
-  <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
-
-    <span>
-      {{paragraph.status}}
-    </span>
-
-    <span ng-if="paragraph.status=='RUNNING'">
-      {{getProgress()}}%
-    </span>
-
-    <!-- Run / Cancel button -->
-    <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
-          ng-click="runParagraph(getEditorValue())"
-          ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING' && paragraph.config.enabled"></span>
-    <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top" tooltip="Cancel"
-          ng-click="cancelParagraph()"
-          ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>
-    <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide') + ' editor'}}"
-          ng-click="toggleEditor()"></span>
-    <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
-          ng-click="toggleOutput()"></span>
-    <span class="dropdown navbar-right">
-      <span class="icon-settings" style="cursor:pointer"
-            data-toggle="dropdown"
-            type="button">
-      </span>
-      <ul class="dropdown-menu" role="menu" style="width:200px;">
-        <li>
-          <a ng-click="$event.stopPropagation()" class="dropdown"><span class="fa fa-arrows-h"></span> Width
-            <form style="display:inline; margin-left:5px;">
-              <select ng-model="paragraph.config.colWidth"
-                      class="selectpicker"
-                      ng-change="changeColWidth()"
-                      ng-options="col for col in colWidthOption"></select>
-            </form>
-          </a>
-        </li>
-        <li>
-          <a ng-click="moveUp()"><span class="icon-arrow-up"></span> Move Up</a>
-        </li>
-        <li>
-          <a ng-click="moveDown()"><span class="icon-arrow-down"></span> Move Down</a>
-        </li>
-        <li>
-          <a ng-click="insertNew()"><span class="icon-plus"></span> Insert New</a>
-        </li>
-        <li>
-          <!-- paragraph handler -->
-          <a ng-click="hideTitle()"
-             ng-show="paragraph.config.title"><span class="fa fa-font"></span> Hide title</a>
-          <a ng-click="showTitle()"
-             ng-show="!paragraph.config.title"><span class="fa fa-font"></span> Show title</a>
-        </li>
-        <li>
-          <a ng-click="hideLineNumbers()"
-             ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Hide line numbers</a>
-          <a ng-click="showLineNumbers()"
-             ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Show line numbers</a>
-        </li>
-        <li>
-          <a ng-click="toggleEnableDisable()"><span class="icon-control-play"></span>
-            {{paragraph.config.enabled ? "Disable" : "Enable"}} run</a>
-        </li>
-        <li>
-          <a ng-click="goToSingleParagraph()"><span class="icon-share-alt"></span> Link this paragraph</a>
-        </li>
-        <li>
-          <a ng-click="clearParagraphOutput()"><span class="fa fa-eraser"></span> Clear output</a>
-        </li>
-        <li>
-          <!-- remove paragraph -->
-          <a ng-click="removeParagraph()"><span class="fa fa-times"></span> Remove</a>
-        </li>
-      </ul>
-    </span>
-  </div>
+  <div ng-include src="'app/notebook/paragraph/paragraph-control.html'"></div>
 
   <div ng-if="!asIframe" class="paragraphFooter">
     <div ng-show="!paragraph.config.tableHide && !viewOnly" id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()">
     </div>
   </div>
-
 </div>

From 09578fd84248d7d8b9c55841d07c228ad47257a6 Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Fri, 25 Sep 2015 17:21:01 +0900
Subject: [PATCH 02/12] Separate progress Bar

---
 .../paragraph/paragraph-chart-selector.html   |  6 ++++
 .../paragraph/paragraph-progressBar.html      |  8 +++++
 .../src/app/notebook/paragraph/paragraph.css  |  2 +-
 .../src/app/notebook/paragraph/paragraph.html | 30 +++----------------
 4 files changed, 19 insertions(+), 27 deletions(-)
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index a81ca53598f..e293f81691b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -27,3 +27,9 @@
           ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
   </button>
 </div>
+<span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && !asIframe && !viewOnly"
+      style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
+  <a class="btnText" ng-click="toggleGraphOption()">
+    settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
+  </a>
+</span>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
new file mode 100644
index 00000000000..2329487c3fb
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
@@ -0,0 +1,8 @@
+<div id="{{paragraph.id}}_runControl" class="runControl" ng-show="paragraph.status=='RUNNING'">
+  <div id="{{paragraph.id}}_progress" class="progress">
+      <div ng-if="getProgress()>0 && getProgress()<100 && paragraph.status=='RUNNING'"
+        class="progress-bar" role="progressbar" style="width:{{getProgress()}}%;"></div>
+      <div ng-if="(getProgress()<=0 || getProgress()>=100) && (paragraph.status=='RUNNING' )"
+          class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%;"></div>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 6e370ddc1b9..4ac27962b85 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -142,7 +142,7 @@
   font-size: 1px;
   color: #AAAAAA;
   height:4px;
-  margin: 1px 0 0 0;
+  margin: 0px 0px 3px 0px;
 }
 
 .paragraph .runControl .progress {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index f7ace136995..a9534464537 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -35,7 +35,7 @@
   </div>
 
   <div>
-    <div ng-show="!paragraph.config.editorHide && !viewOnly">
+    <div ng-show="!paragraph.config.editorHide && !viewOnly" style="margin-bottom:3px;">
       <div id="{{paragraph.id}}_editor"
            style="opacity: 1;"
            class="editor"
@@ -50,22 +50,7 @@
       </div>
     </div>
 
-    <div id="{{paragraph.id}}_runControl" class="runControl">
-      <div ng-if="(getProgress()<=0 || getProgress()>=100) && (paragraph.status=='RUNNING' )">
-        <div id="{{paragraph.id}}_progress"
-             class="progress">
-            <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%;"></div>
-          <span class="sr-only"></span>
-        </div>
-      </div>
-      <div ng-if="getProgress()>0 && getProgress()<100 && paragraph.status=='RUNNING'">
-        <div id="{{paragraph.id}}_progress"
-             class="progress">
-          <div class="progress-bar" role="progressbar" style="width:{{getProgress()}}%;"></div>
-          <span class="sr-only">{{getProgress()}}%</span>
-        </div>
-      </div>
-    </div>
+    <div ng-include src="'app/notebook/paragraph/paragraph-progressBar.html'"></div>
 
     <form id="{{paragraph.id}}_form" role="form"
           ng-show="!paragraph.config.tableHide"
@@ -81,8 +66,7 @@
                  ng-enter="runParagraph(getEditorValue())"
                  ng-model="paragraph.settings.params[formulaire.name]"
                  ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
-                 name="{{formulaire.name}}">
-          </input>
+                 name="{{formulaire.name}}" />
 
           <select class="form-control input-sm"
                  ng-if="paragraph.settings.forms[formulaire.name].options"
@@ -98,13 +82,7 @@
 
     <!-- Rendering -->
     <div class='tableDisplay' ng-show="!paragraph.config.tableHide">
-      <div style="display: inline-block;" ng-include src="'app/notebook/paragraph/paragraph-chart-selector.html'"></div>
-      <span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && !asIframe && !viewOnly"
-            style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
-        <a class="btnText" ng-click="toggleGraphOption()">
-          settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
-        </a>
-      </span>
+      <div ng-include src="'app/notebook/paragraph/paragraph-chart-selector.html'"></div>
 
       <div class="option lightBold" style="overflow: visible;"
          ng-if="getResultType()=='TABLE' && getGraphMode()!='table'

From 74fdb49667329d55103fc1b59dcefe156fb27984 Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Thu, 1 Oct 2015 16:35:22 +0900
Subject: [PATCH 03/12] Fix z-index of paragraph settings and progressbar

---
 zeppelin-web/src/app/notebook/notebook.css            | 2 +-
 zeppelin-web/src/app/notebook/paragraph/paragraph.css | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index c7b7a78b843..68a0ae99603 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -83,7 +83,7 @@
   top: 50px;
   width: 100%;
   height: 54px;
-  z-index: 3;
+  z-index: 1030;
 }
 
 .noteAction h3 {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 4ac27962b85..392785b2ff6 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -153,10 +153,6 @@
   border-radius: 0;
 }
 
-.paragraph .runControl .progress .progress-bar {
-  z-index: 100;
-}
-
 .paragraph .control span {
     margin-left: 4px;
 }

From f7df3ba0113616d56e8fa05103b9681c1391fc5d Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Thu, 1 Oct 2015 17:43:59 +0900
Subject: [PATCH 04/12] Fix z-index of for nvtooltip

---
 zeppelin-web/src/app/notebook/notebook.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 68a0ae99603..b74db556262 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -74,6 +74,10 @@
   pointer-events: none;
 }
 
+.navbar-fixed-top .dropdown-menu {
+  z-index: 1002;
+}
+
 .noteAction {
   margin-left: -10px;
   margin-right: -10px;
@@ -83,7 +87,7 @@
   top: 50px;
   width: 100%;
   height: 54px;
-  z-index: 1030;
+  z-index: 1001;
 }
 
 .noteAction h3 {

From 125c02da5ccd70c20f5a89e5e6ea8f6923908300 Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Fri, 2 Oct 2015 11:03:36 +0900
Subject: [PATCH 05/12] Fix z-index levels

---
 zeppelin-web/src/app/notebook/notebook.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index b74db556262..8c37e3b0278 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -74,8 +74,9 @@
   pointer-events: none;
 }
 
+.navbar-fixed-top,
 .navbar-fixed-top .dropdown-menu {
-  z-index: 1002;
+  z-index: 10002;
 }
 
 .noteAction {
@@ -87,7 +88,7 @@
   top: 50px;
   width: 100%;
   height: 54px;
-  z-index: 1001;
+  z-index: 10001;
 }
 
 .noteAction h3 {

From be550ede6f749cd9ccbc20066ec65c7583648f16 Mon Sep 17 00:00:00 2001
From: Damien Corneau <corneadoug@gmail.com>
Date: Fri, 2 Oct 2015 11:04:36 +0900
Subject: [PATCH 06/12] Add license in new files

---
 .../paragraph/paragraph-chart-selector.html        | 14 ++++++++++++++
 .../app/notebook/paragraph/paragraph-control.html  | 14 ++++++++++++++
 .../notebook/paragraph/paragraph-progressBar.html  | 14 ++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index e293f81691b..b7ebbedc2d0 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -1,3 +1,17 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
 <div id="{{paragraph.id}}_switch"
      ng-if="paragraph.result.type == 'TABLE' && !asIframe && !viewOnly"
      class="btn-group"
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index d9cd3f2a7b8..f6bf9b42fae 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -1,3 +1,17 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
 <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
 
   <span>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
index 2329487c3fb..010cea76031 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
@@ -1,3 +1,17 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
 <div id="{{paragraph.id}}_runControl" class="runControl" ng-show="paragraph.status=='RUNNING'">
   <div id="{{paragraph.id}}_progress" class="progress">
       <div ng-if="getProgress()>0 && getProgress()<100 && paragraph.status=='RUNNING'"

From 186ae1e94dc6775ab667fec0ebf697181fab4891 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 3 Dec 2015 17:32:36 +0900
Subject: [PATCH 07/12] Finish spliting paragraph + split notebook actionbar

---
 .../src/app/notebook/notebook-actionBar.html  | 135 ++++++++
 zeppelin-web/src/app/notebook/notebook.html   | 124 +-------
 .../notebook/paragraph/paragraph-graph.html   |  42 +++
 .../paragraph/paragraph-graphOptions.html     |  18 ++
 .../paragraph-parameterizedQueryForm.html     |  27 ++
 .../notebook/paragraph/paragraph-pivot.html   | 155 ++++++++++
 .../notebook/paragraph/paragraph-results.html |  39 +++
 .../src/app/notebook/paragraph/paragraph.html | 287 +-----------------
 8 files changed, 423 insertions(+), 404 deletions(-)
 create mode 100644 zeppelin-web/src/app/notebook/notebook-actionBar.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/paragraph-results.html

diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
new file mode 100644
index 00000000000..f9239f1797b
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -0,0 +1,135 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="noteAction" ng-show="note.id && !paragraphUrl">
+  <h3>
+    <input type="text" pu-elastic-input class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="min-width: 200px; max-width: 600px;"
+           ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName()" ng-enter="sendNewName()" ng-escape="note.name = oldName; showEditor = false" focus-if="showEditor" />
+    <p class="form-control-static2" ng-click="showEditor = true; oldName = note.name" ng-show="!showEditor">{{note.name || 'Note ' + note.id}}</p>
+    <span class="labelBtn btn-group">
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="runNote()"
+              ng-class="{'disabled':isNoteRunning()}"
+              tooltip-placement="bottom" tooltip="Run all the notes">
+        <i class="icon-control-play"></i>
+      </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="toggleAllEditor()"
+              ng-hide="viewOnly"
+              tooltip-placement="bottom" tooltip="Show/hide the code">
+        <i ng-class="editorToggled ?  'fa icon-size-fullscreen' :'fa icon-size-actual'"></i></button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="toggleAllTable()"
+              ng-hide="viewOnly"
+              tooltip-placement="bottom" tooltip="Show/hide the output">
+        <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i>
+      </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="clearAllParagraphOutput()"
+              ng-hide="viewOnly"
+              ng-class="{'disabled':isNoteRunning()}"
+              tooltip-placement="bottom" tooltip="Clear output">
+        <i class="fa fa-eraser"></i>
+      </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="removeNote(note.id)"
+              ng-hide="viewOnly"
+              tooltip-placement="bottom" tooltip="Remove the notebook">
+        <i class="icon-trash"></i>
+      </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-hide="viewOnly"
+              tooltip-placement="bottom" tooltip="Clone the notebook"
+              data-toggle="modal" data-target="#noteNameModal" data-clone="true"
+              >
+        <i class="fa fa-copy"></i>
+      </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-hide="viewOnly"
+              ng-click="exportNotebook()"
+              tooltip-placement="bottom" tooltip="Export the notebook">
+        <i class="fa fa-download"></i>
+      </button>
+    </span>
+
+    <span ng-hide="viewOnly">
+      <div class="labelBtn btn-group">
+        <div class="btn btn-default btn-xs dropdown-toggle"
+             type="button"
+             data-toggle="dropdown"
+             ng-class="{ 'btn-info' : note.config.cron, 'btn-danger' : note.info.cron, 'btn-default' : !note.config.cron}"
+             tooltip-placement="bottom" tooltip="Run scheduler">
+          <span class="fa fa-clock-o"></span> {{getCronOptionNameFromValue(note.config.cron)}}
+        </div>
+        <ul class="dropdown-menu" role="menu" style="width:300px">
+          <li>
+            <div class="cron-preset-container">
+              Run note with cron scheduler.
+              Either choose from<br/>preset or write your own <a href="http://www.quartz-scheduler.org/documentation/quartz-1.x/tutorials/crontrigger" target=_blank>cron expression</a>.
+              <div>
+                <span>- Preset</span>
+                <a class="cron-preset" ng-repeat="cr in cronOption"
+                   type="button"
+                   ng-click="setCronScheduler(cr.value)"
+                   dropdown-input ng-class="{ 'selected' : cr.value == note.config.cron}">{{cr.name}}</a>
+              </div>
+              <div>
+                <span>- Cron expression</span>
+                <input type="text"
+                       ng-model="note.config.cron"
+                       ng-change="setCronScheduler(note.config.cron)"
+                       dropdown-input ng-model-options="{ debounce: 1000 }" />
+                <p ng-show="note.info.cron" class="text-danger cron-info">
+                  {{note.info.cron}}
+                </p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </span>
+
+    <div class="pull-right" style="margin-top:15px; margin-right:15px; font-size:15px;">
+      <span style="position:relative; top:3px; margin-right:4px; cursor:pointer"
+            data-toggle="modal"
+            data-target="#shortcutModal"
+            tooltip-placement="bottom" tooltip="List of shortcut">
+        <i class="icon-question"></i>
+      </span>
+      <span style="position:relative; top:2px; margin-right:4px; cursor:pointer;"
+            ng-click="toggleSetting()"
+            tooltip-placement="bottom" tooltip="Interpreter binding">
+        <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i>
+      </span>
+
+      <span class="btn-group">
+        <button type="button" class="btn btn-default btn-xs dropdown-toggle"
+                data-toggle="dropdown">
+          {{note.config.looknfeel}} <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu pull-right" role="menu">
+          <li ng-repeat="looknfeel in looknfeelOption">
+            <a style="cursor:pointer" ng-click="setLookAndFeel(looknfeel)">{{looknfeel}}</a>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </h3>
+</div>
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 9679ac5a4fb..227f8cdaafc 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -12,129 +12,7 @@
 limitations under the License.
 -->
 <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) -->
-<div class="noteAction" ng-show="note.id && !paragraphUrl">
-  <h3>
-    <input type="text" pu-elastic-input class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="min-width: 200px; max-width: 600px;"
-           ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName()" ng-enter="sendNewName()" ng-escape="note.name = oldName; showEditor = false" focus-if="showEditor" />
-    <p class="form-control-static2" ng-click="showEditor = true; oldName = note.name" ng-show="!showEditor">{{note.name || 'Note ' + note.id}}</p>
-    <span class="labelBtn btn-group">
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-click="runNote()"
-              ng-class="{'disabled':isNoteRunning()}"
-              tooltip-placement="bottom" tooltip="Run all the notes">
-        <i class="icon-control-play"></i>
-      </button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-click="toggleAllEditor()"
-              ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Show/hide the code">
-        <i ng-class="editorToggled ?  'fa icon-size-fullscreen' :'fa icon-size-actual'"></i></button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-click="toggleAllTable()"
-              ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Show/hide the output">
-        <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i>
-      </button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-click="clearAllParagraphOutput()"
-              ng-hide="viewOnly"
-              ng-class="{'disabled':isNoteRunning()}"
-              tooltip-placement="bottom" tooltip="Clear output">
-        <i class="fa fa-eraser"></i>
-      </button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-click="removeNote(note.id)"
-              ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Remove the notebook">
-        <i class="icon-trash"></i>
-      </button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Clone the notebook"
-              data-toggle="modal" data-target="#noteNameModal" data-clone="true"
-              >
-        <i class="fa fa-copy"></i>
-      </button>
-      <button type="button"
-              class="btn btn-default btn-xs"
-              ng-hide="viewOnly"
-              ng-click="exportNotebook()"
-              tooltip-placement="bottom" tooltip="Export the notebook">
-        <i class="fa fa-download"></i>
-      </button>
-    </span>
-
-    <span ng-hide="viewOnly">
-      <div class="labelBtn btn-group">
-        <div class="btn btn-default btn-xs dropdown-toggle"
-             type="button"
-             data-toggle="dropdown"
-             ng-class="{ 'btn-info' : note.config.cron, 'btn-danger' : note.info.cron, 'btn-default' : !note.config.cron}"
-             tooltip-placement="bottom" tooltip="Run scheduler">
-          <span class="fa fa-clock-o"></span> {{getCronOptionNameFromValue(note.config.cron)}}
-        </div>
-        <ul class="dropdown-menu" role="menu" style="width:300px">
-          <li>
-            <div class="cron-preset-container">
-              Run note with cron scheduler.
-              Either choose from<br/>preset or write your own <a href="http://www.quartz-scheduler.org/documentation/quartz-1.x/tutorials/crontrigger" target=_blank>cron expression</a>.
-              <div>
-                <span>- Preset</span>
-                <a class="cron-preset" ng-repeat="cr in cronOption"
-                   type="button"
-                   ng-click="setCronScheduler(cr.value)"
-                   dropdown-input ng-class="{ 'selected' : cr.value == note.config.cron}">{{cr.name}}</a>
-              </div>
-              <div>
-                <span>- Cron expression</span>
-                <input type="text"
-                       ng-model="note.config.cron"
-                       ng-change="setCronScheduler(note.config.cron)"
-                       dropdown-input ng-model-options="{ debounce: 1000 }" />
-                <p ng-show="note.info.cron" class="text-danger cron-info">
-                  {{note.info.cron}}
-                </p>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </span>
-
-    <div class="pull-right" style="margin-top:15px; margin-right:15px; font-size:15px;">
-      <span style="position:relative; top:3px; margin-right:4px; cursor:pointer"
-            data-toggle="modal"
-            data-target="#shortcutModal"
-            tooltip-placement="bottom" tooltip="List of shortcut">
-        <i class="icon-question"></i>
-      </span>
-      <span style="position:relative; top:2px; margin-right:4px; cursor:pointer;"
-            ng-click="toggleSetting()"
-            tooltip-placement="bottom" tooltip="Interpreter binding">
-        <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i>
-      </span>
-
-      <span class="btn-group">
-        <button type="button" class="btn btn-default btn-xs dropdown-toggle"
-                data-toggle="dropdown">
-          {{note.config.looknfeel}} <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu pull-right" role="menu">
-          <li ng-repeat="looknfeel in looknfeelOption">
-            <a style="cursor:pointer" ng-click="setLookAndFeel(looknfeel)">{{looknfeel}}</a>
-          </li>
-        </ul>
-      </span>
-    </div>
-  </h3>
-</div>
-
+<div ng-include src="'app/notebook/notebook-actionBar.html'"></div>
 <div style="padding-top: 36px;">
   <!-- settings -->
   <div ng-if="showSetting" class="setting">
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
new file mode 100644
index 00000000000..56d35c46cae
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -0,0 +1,42 @@
+<div id="p{{paragraph.id}}_graph"
+     class="graphContainer"
+     ng-class="{'noOverflow': getGraphMode()=='table'}"
+     ng-if="getResultType()=='TABLE'"
+     allowresize="{{!asIframe && !viewOnly}}"
+     resizable on-resize="setGraphHeight();">
+
+  <div ng-if="getGraphMode()=='table'"
+       id="p{{paragraph.id}}_table"
+       class="table">
+  </div>
+
+  <div ng-if="getGraphMode()=='multiBarChart'"
+       id="p{{paragraph.id}}_multiBarChart">
+    <svg></svg>
+  </div>
+
+  <div ng-if="getGraphMode()=='pieChart'"
+       id="p{{paragraph.id}}_pieChart">
+    <svg></svg>
+  </div>
+
+  <div ng-if="getGraphMode()=='stackedAreaChart'"
+       id="p{{paragraph.id}}_stackedAreaChart">
+    <svg></svg>
+  </div>
+
+  <div ng-if="getGraphMode()=='lineChart'"
+       id="p{{paragraph.id}}_lineChart">
+    <svg></svg>
+  </div>
+
+  <div ng-if="getGraphMode()=='lineWithFocusChart'"
+       id="p{{paragraph.id}}_lineWithFocusChart">
+    <svg></svg>
+  </div>
+
+  <div ng-if="getGraphMode()=='scatterChart'"
+       id="p{{paragraph.id}}_scatterChart">
+    <svg></svg>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
new file mode 100644
index 00000000000..ec6edcffcc7
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
@@ -0,0 +1,18 @@
+<div>
+  <div ng-if="isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')">
+    <label>
+      <input type="checkbox"
+             ng-model="paragraph.config.graph.forceY"
+             ng-click="onGraphOptionChange()">
+      force Y to 0
+    </label>
+    <br/>
+
+    <label>
+      <input type="checkbox"
+             ng-model="paragraph.config.graph.lineWithFocus"
+             ng-click="toggleLineWithFocus()">
+      show line chart with focus
+    </label>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
new file mode 100644
index 00000000000..c35219c3a1b
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
@@ -0,0 +1,27 @@
+<form id="{{paragraph.id}}_form" role="form"
+      ng-show="!paragraph.config.tableHide"
+      class=" paragraphForm form-horizontal row">
+  <div class="form-group col-sm-6 col-md-6 col-lg-4"
+       ng-repeat="formulaire in paragraph.settings.forms"
+       ng-Init="loadForm(formulaire, paragraph.settings.params)">
+    <label class="control-label input-sm" ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }">{{formulaire.name}}</label>
+    <div>
+
+      <input class="form-control input-sm"
+             ng-if="!paragraph.settings.forms[formulaire.name].options"
+             ng-enter="runParagraph(getEditorValue())"
+             ng-model="paragraph.settings.params[formulaire.name]"
+             ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
+             name="{{formulaire.name}}" />
+
+      <select class="form-control input-sm"
+             ng-if="paragraph.settings.forms[formulaire.name].options"
+             ng-change="runParagraph(getEditorValue())"
+             ng-model="paragraph.settings.params[formulaire.name]"
+             ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
+             name="{{formulaire.name}}"
+             ng-options="option.value as (option.displayName||option.value) for option in paragraph.settings.forms[formulaire.name].options">
+      </select>
+    </div>
+  </div>
+</form>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
new file mode 100644
index 00000000000..cc229c29a0b
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -0,0 +1,155 @@
+<div class="option lightBold" style="overflow: visible;"
+   ng-if="getResultType()=='TABLE' && getGraphMode()!='table'
+   && paragraph.config.graph.optionOpen && !asIframe && !viewOnly">
+
+  <div ng-include src="'app/notebook/paragraph/paragraph-graphOptions.html'"></div>
+
+  All fields:
+  <div class="allFields row">
+    <ul class="noDot">
+      <li class="liVertical" ng-repeat="col in paragraph.result.columnNames">
+        <div class="btn btn-default btn-xs"
+             data-drag="true"
+             data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
+             ng-model="paragraph.result.columnNames"
+             jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
+           {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="row" ng-if="getGraphMode()!='scatterChart'">
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Keys
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.keys"
+            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled">
+          <li ng-repeat="item in paragraph.config.graph.keys">
+            <div class="btn btn-primary btn-xs">
+              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionKeys($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Groups
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.groups"
+            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled">
+          <li ng-repeat="item in paragraph.config.graph.groups">
+            <div class="btn btn-success btn-xs">
+              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionGroups($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Values
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.values"
+            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled">
+          <li ng-repeat="item in paragraph.config.graph.values">
+            <div class="btn-group">
+              <div class="btn btn-info btn-xs dropdown-toggle"
+                   type="button"
+                   data-toggle="dropdown">
+                {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}}
+                <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font>
+                <span class="fa fa-close" ng-click="removeGraphOptionValues($index)"></span>
+              </div>
+              <ul class="dropdown-menu" role="menu">
+                <li ng-click="setGraphOptionValueAggr($index, 'sum')"><a>sum</a></li>
+                <li ng-click="setGraphOptionValueAggr($index, 'count')"><a>count</a></li>
+                <li ng-click="setGraphOptionValueAggr($index, 'avg')"><a>avg</a></li>
+                <li ng-click="setGraphOptionValueAggr($index, 'min')"><a>min</a></li>
+                <li ng-click="setGraphOptionValueAggr($index, 'max')"><a>max</a></li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+
+  <div class="row" ng-if="getGraphMode()=='scatterChart'">
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        xAxis
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.scatter.xAxis"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.scatter.xAxis">
+            <div class="btn btn-primary btn-xs">
+              {{paragraph.config.graph.scatter.xAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionXaxis($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        yAxis
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.scatter.yAxis"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.scatter.yAxis">
+            <div class="btn btn-success btn-xs">
+              {{paragraph.config.graph.scatter.yAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionYaxis($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        group
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.scatter.group"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.scatter.group">
+            <div class="btn btn-info btn-xs">
+              {{paragraph.config.graph.scatter.group.name}} <span class="fa fa-close" ng-click="removeScatterOptionGroup($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        size
+        <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
+           popover-trigger="focus"
+           popover-html-unsafe="<li>Size option is valid only when you drop numeric field here.</li>
+                                <li>When data in each axis are discrete, 'number of values in corresponding coordinate' will be used as size.</li>
+                                <li>Zeppelin consider values as discrete when the values contain string value or the number of distinct values are bigger than 5% of total number of values.</li>
+                                <li>Size field button turns to grey when the option you chose is not valid.</li>"></a>
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.scatter.size"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.scatter.size">
+            <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(paragraph.config.graph.scatter, paragraph.result.rows)}">
+              {{paragraph.config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
new file mode 100644
index 00000000000..323fd9ca057
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
@@ -0,0 +1,39 @@
+<div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div>
+
+<div id="{{paragraph.id}}_comment"
+     class="text"
+     ng-if="getResultType()=='TABLE' && paragraph.result.comment"
+     ng-Init="loadResultType(paragraph.result)"
+     ng-bind-html="paragraph.result.comment">
+</div>
+
+<div id="{{paragraph.id}}_text"
+     class="text"
+     ng-if="paragraph.result.type == 'TEXT'"
+     ng-Init="loadResultType(paragraph.result)"
+     ng-bind="paragraph.result.msg">
+</div>
+
+<div id="p{{paragraph.id}}_html"
+     class="resultContained"
+     ng-if="paragraph.result.type == 'HTML'"
+     ng-Init="loadResultType(paragraph.result)">
+</div>
+
+<div id="p{{paragraph.id}}_angular"
+     class="resultContained"
+     ng-if="paragraph.result.type == 'ANGULAR'"
+     ng-Init="loadResultType(paragraph.result)">
+</div>
+
+<img id="{{paragraph.id}}_img"
+     ng-if="paragraph.result.type == 'IMG'"
+     ng-Init="loadResultType(paragraph.result)"
+     ng-src="{{getBase64ImageSrc(paragraph.result.msg)}}">
+</img>
+
+<div id="{{paragraph.id}}_error"
+     class="error"
+     ng-if="paragraph.status == 'ERROR'"
+     ng-bind="paragraph.errorMessage">
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index a9534464537..043b6e81739 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -51,297 +51,22 @@
     </div>
 
     <div ng-include src="'app/notebook/paragraph/paragraph-progressBar.html'"></div>
-
-    <form id="{{paragraph.id}}_form" role="form"
-          ng-show="!paragraph.config.tableHide"
-          class=" paragraphForm form-horizontal row">
-      <div class="form-group col-sm-6 col-md-6 col-lg-4"
-           ng-repeat="formulaire in paragraph.settings.forms"
-           ng-Init="loadForm(formulaire, paragraph.settings.params)">
-        <label class="control-label input-sm" ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }">{{formulaire.name}}</label>
-        <div>
-
-          <input class="form-control input-sm"
-                 ng-if="!paragraph.settings.forms[formulaire.name].options"
-                 ng-enter="runParagraph(getEditorValue())"
-                 ng-model="paragraph.settings.params[formulaire.name]"
-                 ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
-                 name="{{formulaire.name}}" />
-
-          <select class="form-control input-sm"
-                 ng-if="paragraph.settings.forms[formulaire.name].options"
-                 ng-change="runParagraph(getEditorValue())"
-                 ng-model="paragraph.settings.params[formulaire.name]"
-                 ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
-                 name="{{formulaire.name}}"
-                 ng-options="option.value as (option.displayName||option.value) for option in paragraph.settings.forms[formulaire.name].options">
-          </select>
-        </div>
-      </div>
-    </form>
+    <div ng-include src="'app/notebook/paragraph/paragraph-parameterizedQueryForm.html'"></div>
 
     <!-- Rendering -->
     <div class='tableDisplay' ng-show="!paragraph.config.tableHide">
       <div ng-include src="'app/notebook/paragraph/paragraph-chart-selector.html'"></div>
-
-      <div class="option lightBold" style="overflow: visible;"
-         ng-if="getResultType()=='TABLE' && getGraphMode()!='table'
-         && paragraph.config.graph.optionOpen && !asIframe && !viewOnly">
-        <div ng-if="isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')">
-          <label>
-            <input type="checkbox"
-                   ng-model="paragraph.config.graph.forceY"
-                   ng-click="onGraphOptionChange()">
-            force Y to 0
-          </label>
-          <br/>
-
-          <label>
-            <input type="checkbox"
-                   ng-model="paragraph.config.graph.lineWithFocus"
-                   ng-click="toggleLineWithFocus()">
-            show line chart with focus
-          </label>
-        </div>
-
-        All fields:
-        <div class="allFields row">
-          <ul class="noDot">
-            <li class="liVertical" ng-repeat="col in paragraph.result.columnNames">
-              <div class="btn btn-default btn-xs"
-                   data-drag="true"
-                   data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
-                   ng-model="paragraph.result.columnNames"
-                   jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
-                 {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <div class="row" ng-if="getGraphMode()!='scatterChart'">
-          <div class="col-md-4">
-            <span class="columns lightBold">
-              Keys
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.keys"
-                  jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled">
-                <li ng-repeat="item in paragraph.config.graph.keys">
-                  <div class="btn btn-primary btn-xs">
-                    {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionKeys($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-          <div class="col-md-4">
-            <span class="columns lightBold">
-              Groups
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.groups"
-                  jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled">
-                <li ng-repeat="item in paragraph.config.graph.groups">
-                  <div class="btn btn-success btn-xs">
-                    {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionGroups($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-          <div class="col-md-4">
-            <span class="columns lightBold">
-              Values
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.values"
-                  jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled">
-                <li ng-repeat="item in paragraph.config.graph.values">
-                  <div class="btn-group">
-                    <div class="btn btn-info btn-xs dropdown-toggle"
-                         type="button"
-                         data-toggle="dropdown">
-                      {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}}
-                      <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font>
-                      <span class="fa fa-close" ng-click="removeGraphOptionValues($index)"></span>
-                    </div>
-                    <ul class="dropdown-menu" role="menu">
-                      <li ng-click="setGraphOptionValueAggr($index, 'sum')"><a>sum</a></li>
-                      <li ng-click="setGraphOptionValueAggr($index, 'count')"><a>count</a></li>
-                      <li ng-click="setGraphOptionValueAggr($index, 'avg')"><a>avg</a></li>
-                      <li ng-click="setGraphOptionValueAggr($index, 'min')"><a>min</a></li>
-                      <li ng-click="setGraphOptionValueAggr($index, 'max')"><a>max</a></li>
-                    </ul>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-        </div>
-
-        <div class="row" ng-if="getGraphMode()=='scatterChart'">
-          <div class="col-md-3">
-            <span class="columns lightBold">
-              xAxis
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.scatter.xAxis"
-                  jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled"
-                  style="height:36px">
-                <li ng-if="paragraph.config.graph.scatter.xAxis">
-                  <div class="btn btn-primary btn-xs">
-                    {{paragraph.config.graph.scatter.xAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionXaxis($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-          <div class="col-md-3">
-            <span class="columns lightBold">
-              yAxis
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.scatter.yAxis"
-                  jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled"
-                  style="height:36px">
-                <li ng-if="paragraph.config.graph.scatter.yAxis">
-                  <div class="btn btn-success btn-xs">
-                    {{paragraph.config.graph.scatter.yAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionYaxis($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-          <div class="col-md-3">
-            <span class="columns lightBold">
-              group
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.scatter.group"
-                  jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled"
-                  style="height:36px">
-                <li ng-if="paragraph.config.graph.scatter.group">
-                  <div class="btn btn-info btn-xs">
-                    {{paragraph.config.graph.scatter.group.name}} <span class="fa fa-close" ng-click="removeScatterOptionGroup($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-          <div class="col-md-3">
-            <span class="columns lightBold">
-              size
-              <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
-                 popover-trigger="focus"
-                 popover-html-unsafe="<li>Size option is valid only when you drop numeric field here.</li>
-                                      <li>When data in each axis are discrete, 'number of values in corresponding coordinate' will be used as size.</li>
-                                      <li>Zeppelin consider values as discrete when the values contain string value or the number of distinct values are bigger than 5% of total number of values.</li>
-                                      <li>Size field button turns to grey when the option you chose is not valid.</li>"></a>
-              <ul data-drop="true"
-                  ng-model="paragraph.config.graph.scatter.size"
-                  jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-                  class="list-unstyled"
-                  style="height:36px">
-                <li ng-if="paragraph.config.graph.scatter.size">
-                  <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(paragraph.config.graph.scatter, paragraph.result.rows)}">
-                    {{paragraph.config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>
-                  </div>
-                </li>
-              </ul>
-            </span>
-          </div>
-        </div>
-      </div>
-
-
-      <div id="p{{paragraph.id}}_graph"
-           class="graphContainer"
-           ng-class="{'noOverflow': getGraphMode()=='table'}"
-           ng-if="getResultType()=='TABLE'"
-           allowresize="{{!asIframe && !viewOnly}}"
-           resizable on-resize="setGraphHeight();">
-
-        <div ng-if="getGraphMode()=='table'"
-             id="p{{paragraph.id}}_table"
-             class="table">
-        </div>
-
-        <div ng-if="getGraphMode()=='multiBarChart'"
-             id="p{{paragraph.id}}_multiBarChart">
-          <svg></svg>
-        </div>
-
-        <div ng-if="getGraphMode()=='pieChart'"
-             id="p{{paragraph.id}}_pieChart">
-          <svg></svg>
-        </div>
-
-        <div ng-if="getGraphMode()=='stackedAreaChart'"
-             id="p{{paragraph.id}}_stackedAreaChart">
-          <svg></svg>
-        </div>
-
-        <div ng-if="getGraphMode()=='lineChart'"
-             id="p{{paragraph.id}}_lineChart">
-          <svg></svg>
-        </div>
-
-        <div ng-if="getGraphMode()=='lineWithFocusChart'"
-             id="p{{paragraph.id}}_lineWithFocusChart">
-          <svg></svg>
-        </div>
-
-        <div ng-if="getGraphMode()=='scatterChart'"
-             id="p{{paragraph.id}}_scatterChart">
-          <svg></svg>
-        </div>
-      </div>
-
-      <div id="{{paragraph.id}}_comment"
-           class="text"
-           ng-if="getResultType()=='TABLE' && paragraph.result.comment"
-           ng-Init="loadResultType(paragraph.result)"
-           ng-bind-html="paragraph.result.comment">
-      </div>
-
-      <div id="{{paragraph.id}}_text"
-           class="text"
-           ng-if="paragraph.result.type == 'TEXT'"
-           ng-Init="loadResultType(paragraph.result)"
-           ng-bind="paragraph.result.msg">
-      </div>
-
-      <div id="p{{paragraph.id}}_html"
-           class="resultContained"
-           ng-if="paragraph.result.type == 'HTML'"
-           ng-Init="loadResultType(paragraph.result)">
-      </div>
-
-      <div id="p{{paragraph.id}}_angular"
-           class="resultContained"
-           ng-if="paragraph.result.type == 'ANGULAR'"
-           ng-Init="loadResultType(paragraph.result)">
-      </div>
-
-      <img id="{{paragraph.id}}_img"
-           ng-if="paragraph.result.type == 'IMG'"
-           ng-Init="loadResultType(paragraph.result)"
-           ng-src="{{getBase64ImageSrc(paragraph.result.msg)}}">
-      </img>
-
-      <div id="{{paragraph.id}}_error"
-           class="error"
-           ng-if="paragraph.status == 'ERROR'"
-           ng-bind="paragraph.errorMessage">
-      </div>
+      <div ng-include src="'app/notebook/paragraph/paragraph-pivot.html'"></div>
+      <div ng-include src="'app/notebook/paragraph/paragraph-results.html'"></div>
     </div>
   </div>
 
   <div ng-include src="'app/notebook/paragraph/paragraph-control.html'"></div>
 
   <div ng-if="!asIframe" class="paragraphFooter">
-    <div ng-show="!paragraph.config.tableHide && !viewOnly" id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()">
+    <div ng-show="!paragraph.config.tableHide && !viewOnly"
+         id="{{paragraph.id}}_executionTime"
+         class="executionTime" ng-bind-html="getExecutionTime()">
     </div>
   </div>
 </div>

From ebdf0bd3362530a14b6c4bde927fd7bf6d0b4743 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 3 Dec 2015 17:56:40 +0900
Subject: [PATCH 08/12] Fix ActionBar Z-index after rebase broke it

---
 zeppelin-web/src/assets/styles/looknfeel/default.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/zeppelin-web/src/assets/styles/looknfeel/default.css b/zeppelin-web/src/assets/styles/looknfeel/default.css
index 10403a430e7..93d302aa21c 100644
--- a/zeppelin-web/src/assets/styles/looknfeel/default.css
+++ b/zeppelin-web/src/assets/styles/looknfeel/default.css
@@ -20,7 +20,6 @@ body {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   color: #2c3e50;
   border-bottom: 1px solid #E5E5E5;
-  z-index: 300;
 }
 
 .editor,

From 6d628521833b134d1abb10be2cae90b6ff39f1a7 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 3 Dec 2015 18:40:13 +0900
Subject: [PATCH 09/12] Fix Empty HTML result when slow page loading

---
 .../src/app/notebook/paragraph/paragraph-results.html    | 9 ++-------
 .../src/app/notebook/paragraph/paragraph.controller.js   | 5 ++---
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
index 323fd9ca057..e3929143c35 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
@@ -3,32 +3,27 @@
 <div id="{{paragraph.id}}_comment"
      class="text"
      ng-if="getResultType()=='TABLE' && paragraph.result.comment"
-     ng-Init="loadResultType(paragraph.result)"
      ng-bind-html="paragraph.result.comment">
 </div>
 
 <div id="{{paragraph.id}}_text"
      class="text"
      ng-if="paragraph.result.type == 'TEXT'"
-     ng-Init="loadResultType(paragraph.result)"
      ng-bind="paragraph.result.msg">
 </div>
 
 <div id="p{{paragraph.id}}_html"
      class="resultContained"
-     ng-if="paragraph.result.type == 'HTML'"
-     ng-Init="loadResultType(paragraph.result)">
+     ng-if="paragraph.result.type == 'HTML'">
 </div>
 
 <div id="p{{paragraph.id}}_angular"
      class="resultContained"
-     ng-if="paragraph.result.type == 'ANGULAR'"
-     ng-Init="loadResultType(paragraph.result)">
+     ng-if="paragraph.result.type == 'ANGULAR'">
 </div>
 
 <img id="{{paragraph.id}}_img"
      ng-if="paragraph.result.type == 'IMG'"
-     ng-Init="loadResultType(paragraph.result)"
      ng-src="{{getBase64ImageSrc(paragraph.result.msg)}}">
 </img>
 
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 5aff815da09..1a91c2760a2 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -67,10 +67,10 @@ angular.module('zeppelinWebApp')
           console.log('HTML rendering error %o', err);
         }
       } else {
+        $timeout(retryRenderer, 10);
       }
     };
     $timeout(retryRenderer);
-
   };
 
   $scope.renderAngular = function() {
@@ -84,11 +84,10 @@ angular.module('zeppelinWebApp')
           console.log('ANGULAR rendering error %o', err);
         }
       } else {
-        $timeout(retryRenderer,10);
+        $timeout(retryRenderer, 10);
       }
     };
     $timeout(retryRenderer);
-
   };
 
 

From 69ac2c6bb444c9315ed8ae684a82b8de79851c0d Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 3 Dec 2015 18:45:44 +0900
Subject: [PATCH 10/12] Add Header on new files

---
 .../src/app/notebook/paragraph/paragraph-graph.html | 13 +++++++++++++
 .../notebook/paragraph/paragraph-graphOptions.html  | 13 +++++++++++++
 .../paragraph/paragraph-parameterizedQueryForm.html | 13 +++++++++++++
 .../src/app/notebook/paragraph/paragraph-pivot.html | 13 +++++++++++++
 .../app/notebook/paragraph/paragraph-results.html   | 13 +++++++++++++
 5 files changed, 65 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index 56d35c46cae..e72ad0e049a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -1,3 +1,16 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
 <div id="p{{paragraph.id}}_graph"
      class="graphContainer"
      ng-class="{'noOverflow': getGraphMode()=='table'}"
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
index ec6edcffcc7..d4df1a4d899 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
@@ -1,3 +1,16 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
 <div>
   <div ng-if="isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')">
     <label>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
index c35219c3a1b..bbcf7646447 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
@@ -1,3 +1,16 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
 <form id="{{paragraph.id}}_form" role="form"
       ng-show="!paragraph.config.tableHide"
       class=" paragraphForm form-horizontal row">
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index cc229c29a0b..66f570b183f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -1,3 +1,16 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
 <div class="option lightBold" style="overflow: visible;"
    ng-if="getResultType()=='TABLE' && getGraphMode()!='table'
    && paragraph.config.graph.optionOpen && !asIframe && !viewOnly">
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
index e3929143c35..7980d720d7b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html
@@ -1,3 +1,16 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
 <div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div>
 
 <div id="{{paragraph.id}}_comment"

From 668d297213ef42e27ef61cebc249dc0fa1642a27 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 10 Dec 2015 16:36:53 +0900
Subject: [PATCH 11/12] Try bumping selenium wait time for waitParagraph

---
 .../test/java/org/apache/zeppelin/ZeppelinIT.java    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
index 2b2f233b780..f3c768451f6 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
@@ -134,7 +134,7 @@ String getParagraphXPath(int paragraphNo) {
   }
 
   void waitForParagraph(final int paragraphNo, final String state) {
-    (new WebDriverWait(driver, 60)).until(new ExpectedCondition<Boolean>() {
+    (new WebDriverWait(driver, 80)).until(new ExpectedCondition<Boolean>() {
       public Boolean apply(WebDriver d) {
         return driver.findElement(By.xpath(getParagraphXPath(paragraphNo)
             + "//div[@class='control']//span[1][contains(.,'" + state + "')]"))
@@ -211,7 +211,7 @@ public void testAngularDisplay() throws InterruptedException{
      */
     WebElement paragraph3Editor = driver.findElement(By.xpath(getParagraphXPath(3) + "//textarea"));
     paragraph3Editor.sendKeys(
-        "print" + Keys.chord(Keys.SHIFT, "9") + "\"myVar=\"" + Keys.chord(Keys.ADD) 
+        "print" + Keys.chord(Keys.SHIFT, "9") + "\"myVar=\"" + Keys.chord(Keys.ADD)
         + "z.angular" + Keys.chord(Keys.SHIFT, "9") + "\"myVar\"))");
     paragraph3Editor.sendKeys(Keys.chord(Keys.SHIFT, Keys.ENTER));
     waitForParagraph(3, "FINISHED");
@@ -239,7 +239,7 @@ public void testAngularDisplay() throws InterruptedException{
     WebElement paragraph4Editor = driver.findElement(By.xpath(getParagraphXPath(4) + "//textarea"));
     paragraph4Editor.sendKeys(
         "z.angularWatch" + Keys.chord(Keys.SHIFT, "9") + "\"myVar\", "
-        + Keys.chord(Keys.SHIFT, "9") 
+        + Keys.chord(Keys.SHIFT, "9")
         + "before:Object, after:Object, context:org.apache.zeppelin.interpreter.InterpreterContext)"
         + Keys.EQUALS + ">{ z.run" +Keys.chord(Keys.SHIFT, "9") + "2, context)}");
     paragraph4Editor.sendKeys(Keys.chord(Keys.SHIFT, Keys.ENTER));
@@ -291,12 +291,12 @@ public void testAngularDisplay() throws InterruptedException{
 
   private void createNewNote() {
     List<WebElement> notebookLinks = driver.findElements(By
-        .xpath("//div[contains(@class, \"col-md-4\")]/div/ul/li"));    
+        .xpath("//div[contains(@class, \"col-md-4\")]/div/ul/li"));
     List<String> notebookTitles = new LinkedList<String>();
     for (WebElement el : notebookLinks) {
       notebookTitles.add(el.getText());
     }
-    
+
     WebElement createNoteLink = driver.findElement(By.xpath("//div[contains(@class, \"col-md-4\")]/div/h5/a[contains(.,'Create new note')]"));
     createNoteLink.click();
 
@@ -308,6 +308,6 @@ private void createNewNote() {
     try {
       Thread.sleep(500); // wait for notebook list updated
     } catch (InterruptedException e) {
-    } 
+    }
   }
 }

From 01a2234f576dde04763c6066e23a416296b9208b Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 10 Dec 2015 18:59:10 +0900
Subject: [PATCH 12/12] Fix waitForParagraph xpath in selenium test

---
 .../src/test/java/org/apache/zeppelin/ZeppelinIT.java         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
index f3c768451f6..bbba084b119 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/ZeppelinIT.java
@@ -134,10 +134,10 @@ String getParagraphXPath(int paragraphNo) {
   }
 
   void waitForParagraph(final int paragraphNo, final String state) {
-    (new WebDriverWait(driver, 80)).until(new ExpectedCondition<Boolean>() {
+    (new WebDriverWait(driver, 60)).until(new ExpectedCondition<Boolean>() {
       public Boolean apply(WebDriver d) {
         return driver.findElement(By.xpath(getParagraphXPath(paragraphNo)
-            + "//div[@class='control']//span[1][contains(.,'" + state + "')]"))
+            + "//div[contains(@class, 'control')]//span[1][contains(.,'" + state + "')]"))
             .isDisplayed();
       }