You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by ah...@apache.org on 2017/03/19 11:42:31 UTC

zeppelin git commit: [HOT FIX][MASTER] Fix multi dynamic select forms behaviour

Repository: zeppelin
Updated Branches:
  refs/heads/master 00e6aed0c -> f43d27f0b


[HOT FIX][MASTER] Fix multi dynamic select forms behaviour

### What is this PR for?
After #2100 merged, we can control the behaviour of running select form using `Run on selection change` under each paragraph control menu. But currently if user creates multiple dynamic forms in one paragraph, the select form box itself[1] and `Run on selection` menu[2] don't appear  as reported in https://github.com/apache/zeppelin/pull/2141#issuecomment-287537706.

 - [1]
![image](https://cloud.githubusercontent.com/assets/10060731/24073544/4b477ec2-0c3c-11e7-95ae-d651c0180903.png)

 - [2]
![image](https://cloud.githubusercontent.com/assets/10060731/24073550/5b91998e-0c3c-11e7-9418-797a5d26aa67.png)

Regardless the number of select forms and the types of dynamic form, `Run on selection change` menu should be shown up if the paragraph has at least 1 select form.

### What type of PR is it?
Bug Fix & Hot Fix

### What is the Jira issue?
N/A

### How should this be tested?
1. Create multiple select forms
```
%md
My first selection is ${my selection1=1,1|2|3}
My second selection is ${my selection2=4,4|5|6}
```

2. Create different types of dynamic form (e.g. 1 select form + 1 checkbox)
```
%md

My selection is ${my selection=1,1|2|3}
My check list is ${checkbox:checkboxTest=list1|list2, list1|list2|list3|list4}

```

There should be `Run on selection change` menu under the paragraph control menu in the above cases. And the select form should appear!

### Screenshots (if appropriate)
 - When multiple select forms are created
![double-selectforms](https://cloud.githubusercontent.com/assets/10060731/24073573/af12ae2c-0c3c-11e7-80fa-18abe98f2dfd.gif)

 - When different dynamic forms are created (e.g. 1 checkbox + 1 select form)
![checkbox_selectform](https://cloud.githubusercontent.com/assets/10060731/24073578/bce7af52-0c3c-11e7-85df-c858342f7e2e.gif)

### Questions:
* Does the licenses files need update? no
* Is there breaking changes for older versions? no
* Does this needs documentation? no

Author: RyuAhyoung <ah...@MacBook-Pro-5.local>

Closes #2154 from AhyoungRyu/fix/multiDynamicFormBehaviour and squashes the following commits:

5730796 [RyuAhyoung] Apply same mechanism to checkbox form
266f0c8 [RyuAhyoung] Fix multi dynamicforms behaviour


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/f43d27f0
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/f43d27f0
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/f43d27f0

Branch: refs/heads/master
Commit: f43d27f0bd9f841d71450ae303dc6f9f671bae0a
Parents: 00e6aed
Author: RyuAhyoung <ah...@MacBook-Pro-5.local>
Authored: Sun Mar 19 10:29:10 2017 +0900
Committer: ahyoungryu <ah...@apache.org>
Committed: Sun Mar 19 20:42:23 2017 +0900

----------------------------------------------------------------------
 docs/manual/dynamicform.md                            | 14 ++++++++++++--
 .../src/app/notebook/paragraph/paragraph-control.html |  3 +--
 .../paragraph/paragraph-parameterizedQueryForm.html   | 14 +++++++++++++-
 .../app/notebook/paragraph/paragraph.controller.js    | 13 +++++++------
 4 files changed, 33 insertions(+), 11 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/f43d27f0/docs/manual/dynamicform.md
----------------------------------------------------------------------
diff --git a/docs/manual/dynamicform.md b/docs/manual/dynamicform.md
index b3ef4ed..ab85024 100644
--- a/docs/manual/dynamicform.md
+++ b/docs/manual/dynamicform.md
@@ -57,8 +57,10 @@ Also you can separate option's display name and value, using `${formName=default
 <img src="../assets/themes/zeppelin/img/screenshots/form_select_displayname.png" />
 
 The paragraph will be automatically run after you change your selection by default.
-But in case you have multiple select forms in one paragraph, you might want to run the paragraph after changing all the selections.
-You can control this by unchecking the below **Run on selection change** option in the setting menu. Even if you uncheck this option, still you can run it by pressing `Enter`.
+But in case you have multiple types dynamic form in one paragraph, you might want to run the paragraph after changing all the selections.
+You can control this by unchecking the below **Run on selection change** option in the setting menu.
+
+Even if you uncheck this option, still you can run it by pressing `Enter`.
 
 <img src="../assets/themes/zeppelin/img/screenshots/selectForm-checkbox.png" />
 
@@ -72,6 +74,14 @@ Besides, you can specify the delimiter using `${checkbox(delimiter):formName=...
 
 <img src="../assets/themes/zeppelin/img/screenshots/form_checkbox_delimiter.png">
 
+Like [select form](#select-form), the paragraph will be automatically run after you change your selection by default.
+But in case you have multiple types dynamic form in one paragraph, you might want to run the paragraph after changing all the selections.
+You can control this by unchecking the below **Run on selection change** option in the setting menu.
+
+Even if you uncheck this option, still you can run it by pressing `Enter`.
+
+<img src="../assets/themes/zeppelin/img/screenshots/selectForm-checkbox.png" />
+
 ## Creates Programmatically
 
 Some language backend uses programmatic way to create form. For example [ZeppelinContext](../interpreter/spark.html#zeppelincontext) provides form creation API

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/f43d27f0/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index f81ccee..3f75a16 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -90,8 +90,7 @@ limitations under the License.
         </li>
         <li role="separator" class="divider"></li>
         <li style="padding-top:8px"
-            ng-if="paragraph.settings.forms[$root.keys(paragraph.settings.forms)].options &&
-                   paragraph.settings.forms[$root.keys(paragraph.settings.forms)].type != 'checkbox'">
+            ng-if="paragraph.config.runOnSelectionChange == true || paragraph.config.runOnSelectionChange == false">
           <span ng-if="paragraph.config.runOnSelectionChange == true" class="fa fa-toggle-on shortcut-icon" style="padding:3px 8px 8px 20px"></span>
           <span ng-if="paragraph.config.runOnSelectionChange == false" class="fa fa-toggle-off shortcut-icon" style="padding:3px 8px 8px 20px"></span>Run on selection change
           <form style="display:inline; float:right">

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/f43d27f0/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
index 7305440..5d5f477 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-parameterizedQueryForm.html
@@ -46,12 +46,24 @@ limitations under the License.
               ng-options="option.value as (option.displayName||option.value) for option in paragraph.settings.forms[formulaire.name].options">
       </select>
     </div>
-    <div ng-if="paragraph.settings.forms[formulaire.name].type == 'checkbox'">
+    <div ng-if="paragraph.config.runOnSelectionChange == true &&
+                paragraph.settings.forms[formulaire.name].type == 'checkbox'">
       <label ng-repeat="option in paragraph.settings.forms[formulaire.name].options"
              class="checkbox-item input-sm">
         <input type="checkbox"
                ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
                ng-checked="paragraph.settings.params[formulaire.name].indexOf(option.value) > -1"
+               ng-click="toggleCheckbox(formulaire, option, false); runParagraphFromButton(getEditorValue())"/> {{option.displayName||option.value}}
+      </label>
+    </div>
+    <div ng-if="paragraph.config.runOnSelectionChange == false &&
+                paragraph.settings.forms[formulaire.name].type == 'checkbox'">
+      <label ng-repeat="option in paragraph.settings.forms[formulaire.name].options"
+             class="checkbox-item input-sm">
+        <input type="checkbox"
+               ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' }"
+               ng-checked="paragraph.settings.params[formulaire.name].indexOf(option.value) > -1"
+               ng-enter="runParagraphFromButton(getEditorValue())"
                ng-click="toggleCheckbox(formulaire, option, false)"/> {{option.displayName||option.value}}
       </label>
     </div>

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/f43d27f0/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 75d565b..f0c301b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -137,11 +137,13 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
     if (config.enabled === undefined) {
       config.enabled = true;
     }
-
-    if (forms[Object.keys(forms)]) {
-      if (forms[Object.keys(forms)].options && forms[Object.keys(forms)].type !== 'checkbox') {
-        if (config.runOnSelectionChange === undefined) {
-          config.runOnSelectionChange = true;
+  
+    for (var idx in forms) {
+      if (forms[idx]) {
+        if (forms[idx].options) {
+          if (config.runOnSelectionChange === undefined) {
+            config.runOnSelectionChange = true;
+          }
         }
       }
     }
@@ -362,7 +364,6 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
     if (!paragraphText || $scope.isRunning($scope.paragraph)) {
       return;
     }
-
     const magic = SpellResult.extractMagic(paragraphText);
 
     if (heliumService.getSpellByMagic(magic)) {