[MINOR] Optimize watchers of paragraph results

### What is this PR for? It's to optimize watchers of paragraph results In the 'Zeppelin Tutorial / R (SparkR)' note, the number of watchers decreases by 1000. ### What type of PR is it? [Refactoring] ### Todos ### What is the Jira issue? N/A ### How should this be tested? Check the basic actions of the note. ### Screenshots (if appropriate) ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: Myoungdo Park <[email protected]> Closes apache#1789 from cuspymd/opt-watcher and squashes the following commits: a41c1cf [Myoungdo Park] Change button group layout of chart selectors f485bd9 [Myoungdo Park] Optimize watchers of paragraph results
aib628 · Jan 10, 2017 · c59632d · c59632d
1 parent 835b82f
commit c59632d
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 48 deletions.
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-progressBar.html
@@ -13,7 +13,7 @@
 -->
 
 <div id="{{paragraph.id}}_runControl" class="runControl">
-  <div id="{{paragraph.id}}_progress" class="progress" ng-show="paragraph.status=='RUNNING'">
+  <div id="{{paragraph.id}}_progress" class="progress" ng-if="paragraph.status=='RUNNING'">
       <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' )"

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/result/result-chart-selector.html
@@ -14,30 +14,32 @@
 
 <div id="{{id}}_switch"
      ng-if="(type == 'TABLE' || apps.length > 0 || suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
-     class="btn-group"
-     style="margin-bottom: 10px;">
+     class="chart-selector">
 
-  <button type="button" class="btn btn-default btn-sm"
-          ng-if="type == 'TABLE'"
-          ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-          ng-class="{'active' : viz.id == graphMode && !config.helium.activeApp}"
-          ng-click="switchViz(viz.id)"><i ng-class="viz.icon"></i>
-  </button>
+  <div ng-if="type == 'TABLE'" class="btn-group">
+    <button type="button" class="btn btn-default btn-sm"
+            ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+            ng-class="{'active' : viz.id == graphMode && !config.helium.activeApp}"
+            ng-click="switchViz(viz.id)"><i ng-class="viz.icon"></i>
+    </button>
+  </div>
 
-  <button type="button"
-          ng-if="type != 'TABLE'"
-          ng-click="switchApp()"
-          ng-class="{'active' : !config.helium.activeApp}"
-          class="btn btn-default btn-sm"><i class="fa fa-terminal"></i>
-  </button>
+  <div class="btn-group">
+    <button type="button"
+            ng-if="type != 'TABLE'"
+            ng-click="switchApp()"
+            ng-class="{'active' : !config.helium.activeApp}"
+            class="btn btn-default btn-sm"><i class="fa fa-terminal"></i>
+    </button>
 
-  <button type="button"
-          class="btn btn-default btn-sm"
-          ng-repeat="app in apps"
-          ng-click="switchApp(app.id)"
-          ng-class="{'active' : app.id == config.helium.activeApp}"
-          ng-bind-html="app.pkg.icon">
-  </button>
+    <button type="button"
+            class="btn btn-default btn-sm"
+            ng-repeat="app in apps"
+            ng-click="switchApp(app.id)"
+            ng-class="{'active' : app.id == config.helium.activeApp}"
+            ng-bind-html="app.pkg.icon">
+    </button>
+  </div>
 </div>
 
 <div id="{{paragraph.id}}_helium"
@@ -46,7 +48,6 @@
      style="margin-bottom: 10px;">
   <button type="button"
           class="btn btn-default btn-sm dropdown-toggle"
-          ng-if="suggestion.available && suggestion.available.length > 0"
           data-toggle="dropdown"
           style="font-weight:bold; background-color:#ffdf96; border: 1px solid #FED233">
     He

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.css b/zeppelin-web/src/app/notebook/paragraph/result/result.css
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+.chart-selector {
+    margin-bottom: 10px; 
+    position: relative; 
+    display: inline-block; 
+    vertical-align: middle;
+}
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.html b/zeppelin-web/src/app/notebook/paragraph/result/result.html
@@ -21,34 +21,35 @@
     resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
        resizable on-resize="resize(width, height);">
 
-    <!-- graph setting -->
-    <div class="option lightBold" style="overflow: visible;"
-         ng-show="type=='TABLE' && graphMode!='table'
-                  && config.graph.optionOpen && !asIframe && !viewOnly">
-      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-           id="trsetting{{id}}_{{viz.id}}"
-           ng-show="graphMode == viz.id"></div>
-      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-           id="vizsetting{{id}}_{{viz.id}}"
-           ng-show="graphMode == viz.id"></div>
-    </div>
+    <div ng-if="type=='TABLE'">
+      <!-- graph setting -->
+      <div class="option lightBold" style="overflow: visible;"
+           ng-if="graphMode!='table'
+                    && config.graph.optionOpen && !asIframe && !viewOnly">
+        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+             id="trsetting{{id}}_{{viz.id}}"
+             ng-show="graphMode == viz.id"></div>
+        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+             id="vizsetting{{id}}_{{viz.id}}"
+             ng-show="graphMode == viz.id"></div>
+      </div>
 
-    <!-- graph -->
-    <div id="p{{id}}_graph"
-         class="graphContainer"
-         ng-class="{'noOverflow': graphMode=='table'}"
-         ng-show="type =='TABLE'"
-         >
-      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-           id="p{{id}}_{{viz.id}}"
-           ng-show="graphMode == viz.id">
+      <!-- graph -->
+      <div id="p{{id}}_graph"
+           class="graphContainer"
+           ng-class="{'noOverflow': graphMode=='table'}"
+           >
+        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+             id="p{{id}}_{{viz.id}}"
+             ng-show="graphMode == viz.id">
+        </div>
       </div>
-    </div>
 
-    <div id="{{id}}_comment"
-         class="text"
-         ng-if="type == 'TABLE' && tableDataComment"
-         ng-bind-html="tableDataComment">
+      <div id="{{id}}_comment"
+           class="text"
+           ng-if="tableDataComment"
+           ng-bind-html="tableDataComment">
+      </div>
     </div>
 
     <div ng-if="type == 'TEXT'"

diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
@@ -57,6 +57,7 @@
     <link rel="stylesheet" href="app/search/search.css" />
     <link rel="stylesheet" href="app/notebook/notebook.css" />
     <link rel="stylesheet" href="app/notebook/paragraph/paragraph.css" />
+    <link rel="stylesheet" href="app/notebook/paragraph/result/result.css" />
     <link rel="stylesheet" href="app/jobmanager/jobmanager.css" />
     <link rel="stylesheet" href="app/jobmanager/jobs/job.css" />
     <link rel="stylesheet" href="app/interpreter/interpreter.css" />