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]  - [2]  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  - When different dynamic forms are created (e.g. 1 checkbox + 1 select form)  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: RyuAhyoung <ahyoungryu@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 <ahyoungryu@MacBook-Pro-5.local> Authored: Sun Mar 19 10:29:10 2017 +0900 Committer: ahyoungryu <ahyoung...@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)) {
