From bfc535a11f88d2511a479df289b0272e9c098019 Mon Sep 17 00:00:00 2001
From: CloverHearts <cloverheartsdev@gmail.com>
Date: Wed, 26 Oct 2016 22:47:45 +0900
Subject: [PATCH 1/2] implement restful api editor

---
 zeppelin-web/bower.json                       |   3 +-
 zeppelin-web/src/app/app.js                   |   3 +-
 .../paragraph/paragraph.controller.js         |   9 ++
 .../src/app/notebook/paragraph/paragraph.html |   8 ++
 .../restfuleditor.directive.css               |   0
 .../restful-editor/restfuleditor.directive.js | 108 ++++++++++++++++++
 zeppelin-web/src/index.html                   |   3 +
 zeppelin-web/test/karma.conf.js               |   1 +
 8 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 zeppelin-web/src/components/restful-editor/restfuleditor.directive.css
 create mode 100644 zeppelin-web/src/components/restful-editor/restfuleditor.directive.js

diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index 6a101b8e1f2..e656a22c538 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -33,7 +33,8 @@
     "handsontable": "~0.24.2",
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
-    "github-markdown-css": "^2.4.0"
+    "github-markdown-css": "^2.4.0",
+    "jsoneditor": "^5.5.9"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 30d24c2d2eb..3f3b4e37824 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -33,7 +33,8 @@
           'xeditable',
           'ngToast',
           'focus-if',
-          'ngResource'
+          'ngResource',
+          'restful-editor'
       ])
         .filter('breakFilter', function() {
           return function(text) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index deab258ed65..8bab1c38799 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -115,6 +115,15 @@
 
       initializeDefault();
 
+      // clover test
+      $scope.paragraph.restfulObject = { hello: 'world'};
+      $scope.restfulOptions={
+        'mode': 'form',
+        'history': false,
+        'theme': 'ace/theme/chrome',
+        'search': false
+      };
+
       if ($scope.getResultType() === 'TABLE') {
         $scope.loadTableData($scope.paragraph.result);
         $scope.setGraphMode($scope.getGraphMode(), false, false);
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index de102e81a7d..052649487b8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -37,6 +37,14 @@
 
   <div>
     <div ng-show="!paragraph.config.editorHide && !viewOnly" style="margin-bottom:3px;">
+      <div>
+        <div
+          restful-editor
+          style="height: 400px; margin-top: 30px;"
+          type="text"
+          model="paragraph.restfulObject"
+          options="restfulOptions" />
+      </div>
       <div id="{{paragraph.id}}_editor"
            class="editor"
            ui-ace="{
diff --git a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js
new file mode 100644
index 00000000000..0a6f7d65b26
--- /dev/null
+++ b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js
@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+'use strict';
+(function() {
+  var jsonEditor = angular.module("restful-editor", []);
+  jsonEditor.directive("restfulEditor", function () {
+    return {
+      restrict: 'A',
+      scope: {
+        model: '=',
+        options: '='
+      },
+      link: function (scope, element, attrs) {
+        var id = "jsoneditor" + Math.floor(Math.random() * 100000000);
+        //console.log("ID: "+id);
+        element.attr("id", id);
+        attrs.$set('disabled', 'disabled');
+
+        scope.options = scope.options || {};
+        scope.options.change = function () {
+          setTimeout(function () {
+            scope.$apply(function () {
+              if (scope.editor != undefined) {
+                scope.model = scope.editor.get();
+              }
+            });
+          });
+        };
+        scope.editor;
+        scope.setup = {};
+        scope.setup = angular.extend(scope.setup, scope.options);
+        scope.model = scope.model || {};
+        scope.container = document.getElementById(id);
+        scope.editor = new JSONEditor(scope.container, scope.setup, scope.model);
+
+        scope.globalTimeout = null;
+        scope.delay_timeout = function (second_time, func) {
+          if (scope.globalTimeout != null) clearTimeout(scope.globalTimeout);
+          scope.globalTimeout = setTimeout(function () {
+            func();
+          }, second_time);
+        }
+        // Update editor when change model
+        scope.$watch(function () {
+          return scope.model;
+        }, function () {
+          scope.delay_timeout(1000, function () {
+            //console.log("Change on "+id);
+            var json1 = angular.toJson(scope.model);
+            var json2 = angular.toJson(scope.editor.get());
+            if (!angular.equals(json1, json2)) {
+              scope.editor.set(scope.model);
+            }
+          });
+        }, true);
+        scope.$watchCollection(function () {
+          return scope.model;
+        }, function () {
+          scope.delay_timeout(1000, function () {
+            ////console.log("Change on "+id);
+            var json1 = angular.toJson(scope.model);
+            var json2 = angular.toJson(scope.editor.get());
+            if (!angular.equals(json1, json2)) {
+              scope.editor.set(scope.model);
+            }
+          });
+        });
+
+        // Update editor when change options
+        scope.$watch(function () {
+          return scope.options;
+        }, function (newValue, oldValue) {
+          scope.setup = angular.extend(scope.setup, scope.options);
+          for (var k in newValue) {
+            if (newValue.hasOwnProperty(k)) {
+              var v = newValue[k];
+              if (newValue[k] !== oldValue[k]) {
+                if (k === 'mode') {
+                  scope.editor.setMode(v);
+                } else if (k === 'name') {
+                  scope.editor.setName(v);
+                } else if (k === 'theme') {
+                  scope.editor.setTheme(v);
+                } else if (k === 'search') {
+                  scope.editor.setOption('search', v);
+                } else { //other settings cannot be changed without re-creating the JsonEditor
+                  //scope.editor = new JSONEditor(scope.container, scope.setup,scope.model);
+                  //return;
+                }
+              }
+            }
+          }
+        }, true);
+      }
+    }
+  });
+})();
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 05a349f2cfa..d1412d75751 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -62,6 +62,7 @@
     <link rel="stylesheet" href="app/credential/credential.css" />
     <link rel="stylesheet" href="app/configuration/configuration.css" />
     <link rel="stylesheet" href="components/expandCollapse/expandCollapse.css" />
+    <link rel="stylesheet" href="components/restful-editor/restfuleditor.directive.css" />
     <link rel="stylesheet" href="fonts/font-awesome.min.css" />
     <link rel="stylesheet" href="fonts/simple-line-icons.css" />
     <link rel="stylesheet" href="fonts/custom-font.css" />
@@ -147,6 +148,7 @@
     <script src="bower_components/handsontable/dist/handsontable.js"></script>
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
+    <script src="bower_components/jsoneditor/dist/jsoneditor.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->
@@ -184,6 +186,7 @@
     <script src="components/searchService/search.service.js"></script>
     <script src="components/login/login.controller.js"></script>
     <script src="components/elasticInputCtrl/elasticInput.controller.js"></script>
+    <script src="components/restful-editor/restfuleditor.directive.js"></script>
     <!-- endbuild -->
   </body>
 </html>
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index f9f03a413fa..d7960fd8369 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -65,6 +65,7 @@ module.exports = function(config) {
       'bower_components/handsontable/dist/handsontable.js',
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
+      'bower_components/jsoneditor/dist/jsoneditor.min.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',

From 5184d1deced7d2bac85ac1a501b43c03f9c0ca90 Mon Sep 17 00:00:00 2001
From: CloverHearts <cloverheartsdev@gmail.com>
Date: Thu, 27 Oct 2016 07:11:42 +0900
Subject: [PATCH 2/2] create restful api editor

---
 zeppelin-web/bower.json                       |   3 +-
 zeppelin-web/src/app/app.js                   |   3 +-
 .../notebook/paragraph/paragraph-control.html |   3 +
 .../paragraph/paragraph.controller.js         | 238 ++++-
 .../src/app/notebook/paragraph/paragraph.css  |  78 +-
 .../src/app/notebook/paragraph/paragraph.html |  26 +-
 .../restfuleditor.directive.css               | 933 ++++++++++++++++++
 .../restful-editor/restfuleditor.directive.js |  67 +-
 zeppelin-web/src/fonts/jsoneditor-icons.svg   | 893 +++++++++++++++++
 zeppelin-web/src/index.html                   |   1 +
 10 files changed, 2196 insertions(+), 49 deletions(-)
 create mode 100644 zeppelin-web/src/fonts/jsoneditor-icons.svg

diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index e656a22c538..9469d04b0bf 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -34,7 +34,8 @@
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
     "github-markdown-css": "^2.4.0",
-    "jsoneditor": "^5.5.9"
+    "jsoneditor": "^5.5.9",
+    "angucomplete-alt": "^2.5.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 3f3b4e37824..6e892b353da 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -34,7 +34,8 @@
           'ngToast',
           'focus-if',
           'ngResource',
-          'restful-editor'
+          'restful-editor',
+          'angucomplete-alt'
       ])
         .filter('breakFilter', function() {
           return function(text) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index 80a0dc579a0..3c4a8a8a25e 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -33,6 +33,9 @@
         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="{{paragraph.config.isCodeEditorMode ? 'fa fa-code' : 'fa fa-list'}}" style="cursor:pointer;"
+        tooltip-placement="top" tooltip="{{paragraph.config.isCodeEditorMode ? 'RESTful Editor Mode' : 'Code Editor Mode'}}"
+        ng-click="toggleQeuryEditorMode()"></span>
   <span class="dropdown navbar-right">
     <span class="icon-settings" style="cursor:pointer"
           data-toggle="dropdown"
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 8bab1c38799..819285a6c9b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1,12 +1,12 @@
 /*
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * 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,
+ * 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.
@@ -115,15 +115,220 @@
 
       initializeDefault();
 
-      // clover test
-      $scope.paragraph.restfulObject = { hello: 'world'};
-      $scope.restfulOptions={
-        'mode': 'form',
+      // clover test start
+
+      $scope.restfulInformation = {
+        interpreters: [
+          {
+            group: 'kylin',
+            restful: [
+              {
+                method: 'POST',
+                uri: '/kylin/api/user/authentication',
+                apiDescription: 'Authentication',
+                context: {
+                  Authorization: {}
+                }
+              },
+              {
+                method: 'POST',
+                uri: '/kylin/api/query',
+                apiDescription: 'Query',
+                context: {
+                  'sql': 'select * from TEST_KYLIN_FACT',
+                  'offset': 0,
+                  'limit': 50000,
+                  'acceptPartial': false,
+                  'project': 'DEFAULT PROJECT'
+                }
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/tables_and_columns',
+                apiDescription: 'List queryable tables',
+                context: {
+                  project: 'DEFAULT PROJECT'
+                }
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/cubes',
+                apiDescription: 'List cubes',
+                context: {
+                  offset: 0,
+                  limit: 0,
+                  cubeName: 'DEFAULT CUBE NAME',
+                  projectName: 'DEFAULT PROJECT'
+                }
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/cubes/{cubeName}',
+                apiDescription: 'Get cube',
+                context: {
+                  cubeName: 'DEFAULT CUBE NAME'
+                }
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/cube_desc/{cubeName}',
+                apiDescription: 'Get cube descriptor',
+                context: {
+                  cubeName: 'DEFAULT CUBE NAME',
+                }
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/model/{modelName}',
+                apiDescription: 'Get data model',
+                context: {
+                  modelName: 'DEFAULT MODEL NAME'
+                }
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/cubes/{cubeName}/rebuild',
+                apiDescription: 'Build cube',
+                context: {
+                  startTime: 0,
+                  endTime: 0,
+                  buildType: 'BUILD'
+                }
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/cubes/{cubeName}/enable',
+                apiDescription: 'Enable Cube',
+                context: {}
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/cubes/{cubeName}/disable',
+                apiDescription: 'Disable Cube',
+                context: {}
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/cubes/{cubeName}/purge',
+                apiDescription: 'Purge Cube',
+                context: {}
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/jobs/{jobId}/resume',
+                apiDescription: 'Resume Job',
+                context: {}
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/jobs/{jobId}/cancel',
+                apiDescription: 'Discard Job',
+                context: {}
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/jobs/{jobId}',
+                apiDescription: 'Get Job Status',
+                context: {}
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/{jobId}/steps/{stepId}/output',
+                apiDescription: 'Get job step output',
+                context: {}
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/tables/{tableName}',
+                apiDescription: 'Get Hive Table',
+                context: {}
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/tables/{tableName}/exd-map',
+                apiDescription: 'Get Hive Table (Extend Info)',
+                context: {}
+              },
+              {
+                method: 'GET',
+                uri: '/kylin/api/tables',
+                apiDescription: 'Get Hive Tables',
+                context: {
+                  project: 'DEFAULT PROJECT',
+                  ext: false
+                }
+              },
+              {
+                method: 'POST',
+                uri: '/kylin/api/tables/{tables}/{project}',
+                apiDescription: 'Load Hive Tables',
+                context: {
+                  tables: 'DEFAULT TABLE NAME',
+                  project: 'DEFAULT PROJECT'
+                }
+              },
+              {
+                method: 'PUT',
+                uri: '/kylin/api/cache/{type}/{name}/{action}',
+                apiDescription: 'Wipe cache',
+                context: {}
+              }
+            ]
+          }
+        ]
+      };
+
+      $scope.selectedRestfulApiKey;
+
+      $scope.restfulOptions = {
+        'mode': 'tree',
         'history': false,
         'theme': 'ace/theme/chrome',
-        'search': false
+        'search': false,
+        'expand': false
+      };
+
+      $scope.paragraph.config.isCodeEditorMode = true;
+      $scope.toggleQeuryEditorMode = function() {
+        $scope.paragraph.config.isCodeEditorMode = !$scope.paragraph.config.isCodeEditorMode;
       };
 
+      $scope.restfulApiSearch = function(str) {
+        var matches = [];
+        var restfulApiInformations = $scope.restfulInformation.interpreters[0].restful;
+
+        restfulApiInformations.forEach(function(restfulApiInfo) {
+          var fullApiUri = restfulApiInfo.method + ' ' + restfulApiInfo.uri;
+
+          var regexStrFullApiUri = fullApiUri.replace(/\{+.\}/g, '+.') + '$';
+          var regexFullApiUri = new RegExp(regexStrFullApiUri.toLowerCase());
+          if (regexStrFullApiUri.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0 ||
+            regexFullApiUri.test(str.toLowerCase())) {
+            matches.push(restfulApiInfo);
+          }
+        });
+        return matches;
+      };
+
+      $scope.setRestfulObject = function(userInputApiString) {
+        console.log('clover keyssss', arguments);
+        var keys = userInputApiString.split(' ');
+        var informationArray = $scope.restfulInformation.interpreters[0].restful;
+        console.log('clover got keys ', keys, informationArray);
+        var index = _.findIndex(informationArray, {'method': keys[0], 'uri': keys[2]});
+        if (index >= 0) {
+          $scope.paragraph.restfulObject = angular.copy(informationArray[index].context);
+        }
+      };
+
+      $scope.selectedRestfulApiObject = function(selectObject) {
+        if (selectObject !== undefined) {
+          $scope.setRestfulObject(selectObject.title);
+        }
+      };
+
+      // clover test end.
+
       if ($scope.getResultType() === 'TABLE') {
         $scope.loadTableData($scope.paragraph.result);
         $scope.setGraphMode($scope.getGraphMode(), false, false);
@@ -305,6 +510,11 @@
     };
 
     $scope.runParagraph = function(data) {
+
+      if ($scope.paragraph.config.isCodeEditorMode === false) {
+        console.log('clover - generate restful http hb');
+      }
+
       websocketMsgSrv.runParagraph($scope.paragraph.id, $scope.paragraph.title,
                                    data, $scope.paragraph.config, $scope.paragraph.settings.params);
       $scope.originalText = angular.copy(data);
@@ -643,11 +853,11 @@
 
         // autocomplete on '.'
         /*
-        $scope.editor.commands.on("afterExec", function(e, t) {
-          if (e.command.name == "insertstring" && e.args == "." ) {
+        $scope.editor.commands.on('afterExec', function(e, t) {
+          if (e.command.name == 'insertstring' && e.args == '.' ) {
         var all = e.editor.completers;
         //e.editor.completers = [remoteCompleter];
-        e.editor.execCommand("startAutocomplete");
+        e.editor.execCommand('startAutocomplete');
         //e.editor.completers = all;
       }
         });
@@ -1458,7 +1668,7 @@
         }
       }
 
-      //console.log("schema=%o, rows=%o", schema, rows);
+      //console.log('schema=%o, rows=%o', schema, rows);
 
       return {
         schema: schema,
@@ -1490,7 +1700,7 @@
       };
 
       var traverse = function(sKey, s, rKey, r, func, rowName, rowValue, colName) {
-        //console.log("TRAVERSE sKey=%o, s=%o, rKey=%o, r=%o, rowName=%o, rowValue=%o, colName=%o", sKey, s, rKey, r, rowName, rowValue, colName);
+        //console.log('TRAVERSE sKey=%o, s=%o, rKey=%o, r=%o, rowName=%o, rowValue=%o, colName=%o', sKey, s, rKey, r, rowName, rowValue, colName);
 
         if (s.type === 'key') {
           rowName = concat(rowName, sKey);
@@ -1535,7 +1745,7 @@
 
       for (var k in rows) {
         traverse(sKey, schema[sKey], k, rows[k], function(rowName, rowValue, colName, value) {
-          //console.log("RowName=%o, row=%o, col=%o, value=%o", rowName, rowValue, colName, value);
+          //console.log('RowName=%o, row=%o, col=%o, value=%o', rowName, rowValue, colName, value);
           if (rowNameIndex[rowValue] === undefined) {
             rowIndexValue[rowIdx] = rowValue;
             rowNameIndex[rowValue] = rowIdx++;
@@ -2265,7 +2475,7 @@
           data.paragraph.status === 'ERROR' || (data.paragraph.status === 'FINISHED' && statusChanged) ||
           (!newActiveApp && oldActiveApp !== newActiveApp);
 
-        //console.log("updateParagraph oldData %o, newData %o. type %o -> %o, mode %o -> %o", $scope.paragraph, data, oldType, newType, oldGraphMode, newGraphMode);
+        //console.log('updateParagraph oldData %o, newData %o. type %o -> %o, mode %o -> %o', $scope.paragraph, data, oldType, newType, oldGraphMode, newGraphMode);
 
         if ($scope.paragraph.text !== data.paragraph.text) {
           if ($scope.dirtyText) {         // check if editor has local update
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 60b93d0f9a1..307befc862e 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -488,7 +488,7 @@ table.table-striped {
 }
 
 .appSuggestion {
-  width: 200px;
+  width: 800px;
   padding: 5px 10px 5px 10px;
 }
 
@@ -498,3 +498,79 @@ table.table-striped {
   padding-left: 4px !important;
   width: 20px;
 }
+
+/* auto completion CSS*/
+
+.searchMatch {
+  color: red;
+}
+
+.angucomplete-holder {
+  position: relative;
+}
+
+.angucomplete-dropdown {
+  border-color: #ececec;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  width: 100%;
+  padding: 6px;
+  cursor: pointer;
+  z-index: 9999;
+  position: absolute;
+  /*top: 32px;
+  left: 0px;
+  */
+  margin-top: -6px;
+  background-color: #ffffff;
+}
+
+.angucomplete-searching {
+  color: #acacac;
+  font-size: 14px;
+}
+
+.angucomplete-description {
+  font-size: 14px;
+  color: gray
+}
+
+.angucomplete-row {
+  padding: 5px;
+  color: #000000;
+  margin-bottom: 4px;
+  clear: both;
+}
+
+.angucomplete-selected-row {
+  background-color: lightblue;
+  color: #ffffff;
+}
+
+.angucomplete-image-holder {
+  padding-top: 2px;
+  float: left;
+  margin-right: 10px;
+  margin-left: 5px;
+}
+
+.angucomplete-image {
+  height: 34px;
+  width: 34px;
+  border-radius: 50%;
+  border-color: #ececec;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.angucomplete-image-default {
+  /* Add your own default image here
+   background-image: url('/assets/default.png');
+  */
+  background-position: center;
+  background-size: contain;
+  height: 34px;
+  width: 34px;
+}
+
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index 052649487b8..82caa8c73a4 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -37,15 +37,33 @@
 
   <div>
     <div ng-show="!paragraph.config.editorHide && !viewOnly" style="margin-bottom:3px;">
-      <div>
+      <div ng-if="paragraph.config.isCodeEditorMode === false">
+        <div style="margin-top: 24px;"></div>
+        <angucomplete-alt
+          id="{{paragraph.id}}_restful_input"
+          input-changed="setRestfulObject"
+          placeholder="Input Method and uri for RESTful API (e.g GET /)"
+          pause="300"
+          selected-object="selectedRestfulApiObject"
+          local-data="restfulInformation.interpreters[0].restful"
+          local-search="restfulApiSearch"
+          title-field="method,' ',uri"
+          description-field="apiDescription"
+          minlength="1"
+          input-class="form-control form-control-small"
+          match-class="searchMatch">
+        </angucomplete-alt>
+        <div style="margin-bottom: 10px;"></div>
         <div
           restful-editor
-          style="height: 400px; margin-top: 30px;"
           type="text"
           model="paragraph.restfulObject"
-          options="restfulOptions" />
+          options="restfulOptions" >
+        </div>
       </div>
-      <div id="{{paragraph.id}}_editor"
+      <div
+           ng-if="paragraph.config.isCodeEditorMode === true || paragraph.config.isCodeEditorMode === undefined"
+           id="{{paragraph.id}}_editor"
            class="editor"
            ui-ace="{
                      onLoad : aceLoaded,
diff --git a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css
index e69de29bb2d..15bc4f86942 100644
--- a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css
+++ b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.css
@@ -0,0 +1,933 @@
+/* reset styling (prevent conflicts with bootstrap, materialize.css, etc.) */
+
+div.jsoneditor {
+  border: 0px;
+}
+
+div.jsoneditor input {
+  height: auto;
+  border: inherit;
+}
+
+div.jsoneditor input:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+div.jsoneditor table {
+  border-collapse: collapse;
+  width: auto;
+}
+
+div.jsoneditor td,
+div.jsoneditor th {
+  padding: 0;
+  display: table-cell;
+  text-align: left;
+  vertical-align: inherit;
+  border-radius: inherit;
+}
+
+
+div.jsoneditor-field,
+div.jsoneditor-value,
+div.jsoneditor-readonly {
+  border: 1px solid transparent;
+  min-height: 16px;
+  min-width: 32px;
+  padding: 2px;
+  margin: 1px;
+  word-wrap: break-word;
+  float: left;
+}
+
+/* adjust margin of p elements inside editable divs, needed for Opera, IE */
+
+div.jsoneditor-field p,
+div.jsoneditor-value p {
+  margin: 0;
+}
+
+div.jsoneditor-value {
+  word-break: break-word;
+}
+
+div.jsoneditor-readonly {
+  min-width: 16px;
+  color: gray;
+}
+
+div.jsoneditor-empty {
+  border-color: lightgray;
+  border-style: dashed;
+  border-radius: 2px;
+}
+
+div.jsoneditor-field.jsoneditor-empty::after,
+div.jsoneditor-value.jsoneditor-empty::after {
+  pointer-events: none;
+  color: lightgray;
+  font-size: 8pt;
+}
+
+div.jsoneditor-field.jsoneditor-empty::after {
+  content: "field";
+}
+
+div.jsoneditor-value.jsoneditor-empty::after {
+  content: "value";
+}
+
+div.jsoneditor-value.jsoneditor-url,
+a.jsoneditor-value.jsoneditor-url {
+  color: green;
+  text-decoration: underline;
+}
+
+a.jsoneditor-value.jsoneditor-url {
+  display: inline-block;
+  padding: 2px;
+  margin: 2px;
+}
+
+a.jsoneditor-value.jsoneditor-url:hover,
+a.jsoneditor-value.jsoneditor-url:focus {
+  color: #ee422e;
+}
+
+div.jsoneditor td.jsoneditor-separator {
+  padding: 3px 0;
+  vertical-align: top;
+  color: gray;
+}
+
+div.jsoneditor-field[contenteditable=true]:focus,
+div.jsoneditor-field[contenteditable=true]:hover,
+div.jsoneditor-value[contenteditable=true]:focus,
+div.jsoneditor-value[contenteditable=true]:hover,
+div.jsoneditor-field.jsoneditor-highlight,
+div.jsoneditor-value.jsoneditor-highlight {
+  background-color: #FFFFAB;
+  border: 1px solid yellow;
+  border-radius: 2px;
+}
+
+div.jsoneditor-field.jsoneditor-highlight-active,
+div.jsoneditor-field.jsoneditor-highlight-active:focus,
+div.jsoneditor-field.jsoneditor-highlight-active:hover,
+div.jsoneditor-value.jsoneditor-highlight-active,
+div.jsoneditor-value.jsoneditor-highlight-active:focus,
+div.jsoneditor-value.jsoneditor-highlight-active:hover {
+  background-color: #ffee00;
+  border: 1px solid #ffc700;
+  border-radius: 2px;
+}
+
+div.jsoneditor-value.jsoneditor-string {
+  color: #008000;
+}
+
+div.jsoneditor-value.jsoneditor-object,
+div.jsoneditor-value.jsoneditor-array {
+  min-width: 16px;
+  color: #808080;
+}
+
+div.jsoneditor-value.jsoneditor-number {
+  color: #ee422e;
+}
+
+div.jsoneditor-value.jsoneditor-boolean {
+  color: #ff8c00;
+}
+
+div.jsoneditor-value.jsoneditor-null {
+  color: #004ED0;
+}
+
+div.jsoneditor-value.jsoneditor-invalid {
+  color: #000000;
+}
+
+div.jsoneditor-tree button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  background: transparent url("../../fonts/jsoneditor-icons.svg");
+}
+
+div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree,
+div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree {
+  cursor: pointer;
+}
+
+div.jsoneditor-tree button.jsoneditor-collapsed {
+  background-position: 0 -48px;
+}
+
+div.jsoneditor-tree button.jsoneditor-expanded {
+  background-position: 0 -72px;
+}
+
+div.jsoneditor-tree button.jsoneditor-contextmenu {
+  background-position: -48px -72px;
+}
+
+div.jsoneditor-tree button.jsoneditor-contextmenu:hover,
+div.jsoneditor-tree button.jsoneditor-contextmenu:focus,
+div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,
+tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
+  background-position: -48px -48px;
+}
+
+div.jsoneditor-tree *:focus {
+  outline: none;
+}
+
+div.jsoneditor-tree button:focus {
+  /* TODO: nice outline for buttons with focus
+  outline: #97B0F8 solid 2px;
+  box-shadow: 0 0 8px #97B0F8;
+  */
+  background-color: #f5f5f5;
+  outline: #e5e5e5 solid 1px;
+}
+
+div.jsoneditor-tree button.jsoneditor-invisible {
+  visibility: hidden;
+  background: none;
+}
+
+div.jsoneditor {
+  color: #1A1A1A;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  padding: 0;
+  line-height: 100%;
+}
+
+div.jsoneditor-tree table.jsoneditor-tree {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: 0;
+}
+
+div.jsoneditor-outer {
+  width: 100%;
+  height: 100%;
+  margin: -35px 0 0 0;
+  padding: 35px 0 0 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+textarea.jsoneditor-text,
+.ace-jsoneditor {
+  min-height: 150px;
+}
+
+div.jsoneditor-tree {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+textarea.jsoneditor-text {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline-width: 0;
+  border: none;
+  background-color: white;
+  resize: none;
+}
+
+tr.jsoneditor-highlight,
+tr.jsoneditor-selected {
+  background-color: #e6e6e6;
+}
+
+tr.jsoneditor-selected button.jsoneditor-dragarea,
+tr.jsoneditor-selected button.jsoneditor-contextmenu {
+  visibility: hidden;
+}
+
+tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea,
+tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
+  visibility: visible;
+}
+
+div.jsoneditor-tree button.jsoneditor-dragarea {
+  background: url("../../fonts/jsoneditor-icons.svg") -72px -72px;
+  cursor: move;
+}
+
+div.jsoneditor-tree button.jsoneditor-dragarea:hover,
+div.jsoneditor-tree button.jsoneditor-dragarea:focus,
+tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea {
+  background-position: -72px -48px;
+}
+
+div.jsoneditor tr,
+div.jsoneditor th,
+div.jsoneditor td {
+  padding: 0;
+  margin: 0;
+}
+
+div.jsoneditor td {
+  vertical-align: top;
+}
+
+div.jsoneditor td.jsoneditor-tree {
+  vertical-align: top;
+}
+
+div.jsoneditor-field,
+div.jsoneditor-value,
+div.jsoneditor td,
+div.jsoneditor th,
+div.jsoneditor textarea,
+.jsoneditor-schema-error {
+  font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
+  font-size: 10pt;
+  color: #1A1A1A;
+}
+
+/* popover */
+
+.jsoneditor-schema-error {
+  cursor: default;
+  display: inline-block;
+  /*font-family: arial, sans-serif;*/
+  height: 24px;
+  line-height: 24px;
+  position: relative;
+  text-align: center;
+  width: 24px;
+}
+
+div.jsoneditor-tree .jsoneditor-schema-error {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 4px 0 0;
+  background: url("../../fonts/jsoneditor-icons.svg")  -168px -48px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover {
+  background-color: #4c4c4c;
+  border-radius: 3px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.4);
+  color: #fff;
+  display: none;
+  padding: 7px 10px;
+  position: absolute;
+  width: 200px;
+  z-index: 4;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above {
+  bottom: 32px;
+  left: -98px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below {
+  top: 32px;
+  left: -98px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left {
+  top: -7px;
+  right: 32px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right {
+  top: -7px;
+  left: 32px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover:before {
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  content: '';
+  display: block;
+  left: 50%;
+  margin-left: -7px;
+  position: absolute;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above:before {
+  border-top: 7px solid #4c4c4c;
+  bottom: -7px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below:before {
+  border-bottom: 7px solid #4c4c4c;
+  top: -7px;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left:before {
+  border-left: 7px solid #4c4c4c;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  content: '';
+  top: 19px;
+  right: -14px;
+  left: inherit;
+  margin-left: inherit;
+  margin-top: -7px;
+  position: absolute;
+}
+
+.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right:before {
+  border-right: 7px solid #4c4c4c;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  content: '';
+  top: 19px;
+  left: -14px;
+  margin-left: inherit;
+  margin-top: -7px;
+  position: absolute;
+}
+
+.jsoneditor-schema-error:hover .jsoneditor-popover,
+.jsoneditor-schema-error:focus .jsoneditor-popover {
+  display: block;
+  -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
+  -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
+  -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
+}
+
+@-webkit-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-ms-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/*@-webkit-keyframes move-up {*/
+
+/*from   { bottom: 24px; }*/
+
+/*to { bottom: 32px; }*/
+
+/*}*/
+
+/*@-moz-keyframes move-up {*/
+
+/*from   { bottom: 24px; }*/
+
+/*to { bottom: 32px; }*/
+
+/*}*/
+
+/*@-ms-keyframes move-up {*/
+
+/*from   { bottom: 24px; }*/
+
+/*to { bottom: 32px; }*/
+
+/*}*/
+
+/* JSON schema errors displayed at the bottom of the editor in mode text and code */
+
+.jsoneditor .jsoneditor-text-errors {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #ffef8b;
+  border-top: 1px solid #ffd700;
+}
+
+.jsoneditor .jsoneditor-text-errors td {
+  padding: 3px 6px;
+  vertical-align: middle;
+}
+
+.jsoneditor-text-errors .jsoneditor-schema-error {
+  border: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 4px 0 0;
+  background: url("../../fonts/jsoneditor-icons.svg")  -168px -48px;
+}
+/* ContextMenu - main menu */
+
+div.jsoneditor-contextmenu-root {
+  position: relative;
+  width: 0;
+  height: 0;
+}
+
+div.jsoneditor-contextmenu {
+  position: absolute;
+  box-sizing: content-box;
+  z-index: 99999;
+}
+
+div.jsoneditor-contextmenu ul,
+div.jsoneditor-contextmenu li {
+  box-sizing: content-box;
+}
+
+div.jsoneditor-contextmenu ul {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 124px;
+  background: white;
+  border: 1px solid #d3d3d3;
+  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.jsoneditor-contextmenu ul li button {
+  padding: 0;
+  margin: 0;
+  width: 124px;
+  height: 24px;
+  border: none;
+  cursor: pointer;
+  color: #4d4d4d;
+  background: transparent;
+  font-size: 10pt;
+  font-family: inherit;
+  box-sizing: border-box;
+  line-height: 26px;
+  text-align: left;
+}
+
+/* Fix button padding in firefox */
+
+div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+div.jsoneditor-contextmenu ul li button:hover,
+div.jsoneditor-contextmenu ul li button:focus {
+  color: #1a1a1a;
+  background-color: #f5f5f5;
+  outline: none;
+}
+
+div.jsoneditor-contextmenu ul li button.jsoneditor-default {
+  width: 92px;
+}
+
+div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
+  float: right;
+  width: 32px;
+  height: 24px;
+  border-left: 1px solid #e5e5e5;
+}
+
+div.jsoneditor-contextmenu div.jsoneditor-icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-image: url("../../fonts/jsoneditor-icons.svg");
+}
+
+div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
+  float: right;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 4px 0 0;
+  background: url("../../fonts/jsoneditor-icons.svg") 0 -72px;
+  opacity: 0.4;
+}
+
+div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
+div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
+div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
+div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
+div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
+  opacity: 1;
+}
+
+div.jsoneditor-contextmenu div.jsoneditor-separator {
+  height: 0;
+  border-top: 1px solid #e5e5e5;
+  padding-top: 5px;
+  margin-top: 5px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon {
+  background-position: -24px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon {
+  background-position: -24px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon {
+  background-position: 0 -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon {
+  background-position: 0 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon {
+  background-position: 0 -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon {
+  background-position: 0 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon {
+  background-position: -48px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon {
+  background-position: -48px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon {
+  background-position: -168px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon {
+  background-position: -168px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon {
+  background-position: -192px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon {
+  background-position: -192px 0;
+}
+
+/* ContextMenu - sub menu */
+
+div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
+div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
+div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
+  color: white;
+  background-color: #ee422e;
+}
+
+div.jsoneditor-contextmenu ul li {
+  overflow: hidden;
+}
+
+div.jsoneditor-contextmenu ul li ul {
+  display: none;
+  position: relative;
+  left: -10px;
+  top: 0;
+  border: none;
+  box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
+  padding: 0 10px;
+  /* TODO: transition is not supported on IE8-9 */
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+
+
+div.jsoneditor-contextmenu ul li ul li button {
+  padding-left: 24px;
+  animation: all ease-in-out 1s;
+}
+
+div.jsoneditor-contextmenu ul li ul li button:hover,
+div.jsoneditor-contextmenu ul li ul li button:focus {
+  background-color: #f5f5f5;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon {
+  background-position: -144px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected > div.jsoneditor-icon {
+  background-position: -144px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon {
+  background-position: -120px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected > div.jsoneditor-icon {
+  background-position: -120px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon {
+  background-position: -72px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected > div.jsoneditor-icon {
+  background-position: -72px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon {
+  background-position: -96px -24px;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected > div.jsoneditor-icon {
+  background-position: -96px 0;
+}
+
+div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
+  background-image: none;
+  width: 6px;
+}
+div.jsoneditor-menu {
+  display: none;
+  width: 100%;
+  height: 35px;
+  padding: 2px;
+  margin: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: white;
+}
+
+div.jsoneditor-menu > button,
+div.jsoneditor-menu > div.jsoneditor-modes > button {
+  width: 26px;
+  height: 26px;
+  margin: 2px;
+  padding: 0;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  background: transparent url("../../fonts/jsoneditor-icons.svg");
+  color: white;
+  opacity: 0.8;
+  font-family: inherit;
+  font-size: 10pt;
+  float: left;
+}
+
+div.jsoneditor-menu > button:hover,
+div.jsoneditor-menu > div.jsoneditor-modes > button:hover {
+  background-color: rgba(255,255,255,0.2);
+  border: 1px solid rgba(255,255,255,0.4);
+}
+
+div.jsoneditor-menu > button:focus,
+div.jsoneditor-menu > button:active,
+div.jsoneditor-menu > div.jsoneditor-modes > button:focus,
+div.jsoneditor-menu > div.jsoneditor-modes > button:active {
+  background-color: rgba(255,255,255,0.3);
+}
+
+div.jsoneditor-menu > button:disabled,
+div.jsoneditor-menu > div.jsoneditor-modes > button:disabled {
+  opacity: 0.5;
+}
+
+div.jsoneditor-menu > button.jsoneditor-collapse-all {
+  background-position: 0 -96px;
+  display: none;
+}
+
+div.jsoneditor-menu > button.jsoneditor-expand-all {
+  background-position: 0 -120px;
+  display: none;
+}
+
+div.jsoneditor-menu > button.jsoneditor-undo {
+  background-position: -24px -96px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-undo:disabled {
+  background-position: -24px -120px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-redo {
+  background-position: -48px -96px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-redo:disabled {
+  background-position: -48px -120px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-compact {
+  background-position: -72px -96px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-format {
+  background-position: -72px -120px;
+}
+
+div.jsoneditor-menu > div.jsoneditor-modes {
+  display: inline-block;
+  float: left;
+}
+
+div.jsoneditor-menu > div.jsoneditor-modes > button {
+  background-image: none;
+  width: auto;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+div.jsoneditor-menu > button.jsoneditor-separator,
+div.jsoneditor-menu > div.jsoneditor-modes > button.jsoneditor-separator {
+  margin-left: 10px;
+}
+
+div.jsoneditor-menu a {
+  font-family: arial, sans-serif;
+  font-size: 10pt;
+  color: white;
+  opacity: 0.8;
+  vertical-align: middle;
+}
+
+div.jsoneditor-menu a:hover {
+  opacity: 1;
+}
+
+div.jsoneditor-menu a.jsoneditor-poweredBy {
+  font-size: 8pt;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px;
+}
+table.jsoneditor-search input,
+table.jsoneditor-search div.jsoneditor-results {
+  font-family: arial, sans-serif;
+  font-size: 10pt;
+  color: #1A1A1A;
+  background: transparent;
+  /* For Firefox */
+}
+
+table.jsoneditor-search div.jsoneditor-results {
+  color: white;
+  padding-right: 5px;
+  line-height: 24px;
+}
+
+table.jsoneditor-search {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table.jsoneditor-search div.jsoneditor-frame {
+  border: 1px solid transparent;
+  background-color: white;
+  padding: 0 2px;
+  margin: 0;
+}
+
+table.jsoneditor-search div.jsoneditor-frame table {
+  border-collapse: collapse;
+}
+
+table.jsoneditor-search input {
+  width: 120px;
+  border: none;
+  outline: none;
+  margin: 1px;
+  line-height: 20px;
+}
+
+table.jsoneditor-search button {
+  width: 16px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: url("../../fonts/jsoneditor-icons.svg");
+  vertical-align: top;
+}
+
+table.jsoneditor-search button:hover {
+  background-color: transparent;
+}
+
+table.jsoneditor-search button.jsoneditor-refresh {
+  width: 18px;
+  background-position: -99px -73px;
+}
+
+table.jsoneditor-search button.jsoneditor-next {
+  cursor: pointer;
+  background-position: -124px -73px;
+}
+
+table.jsoneditor-search button.jsoneditor-next:hover {
+  background-position: -124px -49px;
+}
+
+table.jsoneditor-search button.jsoneditor-previous {
+  cursor: pointer;
+  background-position: -148px -73px;
+  margin-right: 2px;
+}
+
+table.jsoneditor-search button.jsoneditor-previous:hover {
+  background-position: -148px -49px;
+}
diff --git a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js
index 0a6f7d65b26..ea8b30584d1 100644
--- a/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js
+++ b/zeppelin-web/src/components/restful-editor/restfuleditor.directive.js
@@ -1,37 +1,41 @@
 /*
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * 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,
+ * 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.
  */
 'use strict';
+
+// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
+/*eslint-disable camelcase*/
+/*eslint-disable no-undef*/
 (function() {
-  var jsonEditor = angular.module("restful-editor", []);
-  jsonEditor.directive("restfulEditor", function () {
+  var jsonEditor = angular.module('restful-editor', []);
+  jsonEditor.directive('restfulEditor', function() {
     return {
       restrict: 'A',
       scope: {
         model: '=',
         options: '='
       },
-      link: function (scope, element, attrs) {
-        var id = "jsoneditor" + Math.floor(Math.random() * 100000000);
-        //console.log("ID: "+id);
-        element.attr("id", id);
+      link: function(scope, element, attrs) {
+        var id = 'jsoneditor' + Math.floor(Math.random() * 100000000);
+        //console.log('ID: '+id);
+        element.attr('id', id);
         attrs.$set('disabled', 'disabled');
 
         scope.options = scope.options || {};
-        scope.options.change = function () {
-          setTimeout(function () {
-            scope.$apply(function () {
-              if (scope.editor != undefined) {
+        scope.options.change = function() {
+          setTimeout(function() {
+            scope.$apply(function() {
+              if (scope.editor !== undefined) {
                 scope.model = scope.editor.get();
               }
             });
@@ -43,20 +47,21 @@
         scope.model = scope.model || {};
         scope.container = document.getElementById(id);
         scope.editor = new JSONEditor(scope.container, scope.setup, scope.model);
-
         scope.globalTimeout = null;
-        scope.delay_timeout = function (second_time, func) {
-          if (scope.globalTimeout != null) clearTimeout(scope.globalTimeout);
-          scope.globalTimeout = setTimeout(function () {
+        scope.delay_timeout = function(second_time, func) {
+          if (scope.globalTimeout !== null) {
+            clearTimeout(scope.globalTimeout);
+          }
+          scope.globalTimeout = setTimeout(function() {
             func();
           }, second_time);
-        }
+        };
         // Update editor when change model
-        scope.$watch(function () {
+        scope.$watch(function() {
           return scope.model;
-        }, function () {
-          scope.delay_timeout(1000, function () {
-            //console.log("Change on "+id);
+        }, function() {
+          scope.delay_timeout(1000, function() {
+            //console.log('Change on '+id);
             var json1 = angular.toJson(scope.model);
             var json2 = angular.toJson(scope.editor.get());
             if (!angular.equals(json1, json2)) {
@@ -64,11 +69,11 @@
             }
           });
         }, true);
-        scope.$watchCollection(function () {
+        scope.$watchCollection(function() {
           return scope.model;
-        }, function () {
-          scope.delay_timeout(1000, function () {
-            ////console.log("Change on "+id);
+        }, function() {
+          scope.delay_timeout(1000, function() {
+            ////console.log('Change on '+id);
             var json1 = angular.toJson(scope.model);
             var json2 = angular.toJson(scope.editor.get());
             if (!angular.equals(json1, json2)) {
@@ -78,9 +83,9 @@
         });
 
         // Update editor when change options
-        scope.$watch(function () {
+        scope.$watch(function() {
           return scope.options;
-        }, function (newValue, oldValue) {
+        }, function(newValue, oldValue) {
           scope.setup = angular.extend(scope.setup, scope.options);
           for (var k in newValue) {
             if (newValue.hasOwnProperty(k)) {
@@ -94,6 +99,12 @@
                   scope.editor.setTheme(v);
                 } else if (k === 'search') {
                   scope.editor.setOption('search', v);
+                } else if (k === 'expand') {
+                  if (v === true) {
+                    scope.editor.collapseAll();
+                  } else {
+                    scope.editor.expandAll();
+                  }
                 } else { //other settings cannot be changed without re-creating the JsonEditor
                   //scope.editor = new JSONEditor(scope.container, scope.setup,scope.model);
                   //return;
@@ -103,6 +114,6 @@
           }
         }, true);
       }
-    }
+    };
   });
 })();
diff --git a/zeppelin-web/src/fonts/jsoneditor-icons.svg b/zeppelin-web/src/fonts/jsoneditor-icons.svg
new file mode 100644
index 00000000000..357eeae5ebd
--- /dev/null
+++ b/zeppelin-web/src/fonts/jsoneditor-icons.svg
@@ -0,0 +1,893 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  width="216"
+  height="144"
+  id="svg4136"
+  version="1.1"
+  inkscape:version="0.91 r"
+  sodipodi:docname="jsoneditor-icons.svg">
+  <title
+    id="title6512">JSON Editor Icons</title>
+  <metadata
+    id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+        rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+          rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>JSON Editor Icons</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+    id="defs4146" />
+  <sodipodi:namedview
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1"
+    objecttolerance="10"
+    gridtolerance="10"
+    guidetolerance="10"
+    inkscape:pageopacity="0"
+    inkscape:pageshadow="2"
+    inkscape:window-width="1920"
+    inkscape:window-height="1028"
+    id="namedview4144"
+    showgrid="true"
+    inkscape:zoom="4"
+    inkscape:cx="97.217248"
+    inkscape:cy="59.950227"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:current-layer="svg4136"
+    showguides="false"
+    borderlayer="false"
+    inkscape:showpageshadow="true"
+    showborder="true">
+    <inkscape:grid
+      type="xygrid"
+      id="grid4640"
+      empspacing="24" />
+  </sodipodi:namedview>
+  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+  <g
+    id="g4394">
+    <rect
+      x="4"
+      y="4"
+      width="16"
+      height="16"
+      id="svg_1"
+      style="fill:#1aae1c;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+      style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0"
+      x="28.000006"
+      y="3.999995"
+      width="16"
+      height="16"
+      id="svg_1-7" />
+    <rect
+      id="rect4165"
+      height="16"
+      width="16"
+      y="3.999995"
+      x="52.000004"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+      x="172.00002"
+      y="3.9999852"
+      width="16"
+      height="16"
+      id="rect4175" />
+    <rect
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+      x="196"
+      y="3.999995"
+      width="16"
+      height="16"
+      id="rect4175-3" />
+    <g
+      style="stroke:none"
+      id="g4299">
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+        id="svg_1-1"
+        height="1.9999986"
+        width="9.9999924"
+        y="10.999998"
+        x="7.0000048" />
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+        id="svg_1-1-1"
+        height="9.9999838"
+        width="1.9999955"
+        y="7.0000114"
+        x="11.000005" />
+    </g>
+    <g
+      style="stroke:none"
+      transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
+      id="g4299-3">
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+        id="svg_1-1-0"
+        height="1.9999986"
+        width="9.9999924"
+        y="10.999998"
+        x="7.0000048" />
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+        id="svg_1-1-1-9"
+        height="9.9999838"
+        width="1.9999955"
+        y="7.0000114"
+        x="11.000005" />
+    </g>
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+      x="55.000004"
+      y="7.0000048"
+      width="6.9999909"
+      height="6.9999905"
+      id="svg_1-7-5" />
+    <rect
+      id="rect4354"
+      height="6.9999905"
+      width="6.9999909"
+      y="10.00001"
+      x="58"
+      style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
+      x="58.000004"
+      y="10.000005"
+      width="6.9999909"
+      height="6.9999905"
+      id="svg_1-7-5-7" />
+    <g
+      id="g4378">
+      <rect
+        id="svg_1-7-5-3"
+        height="1.9999965"
+        width="7.9999909"
+        y="10.999999"
+        x="198"
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+        x="198"
+        y="7.0000005"
+        width="11.999995"
+        height="1.9999946"
+        id="rect4374" />
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+        x="198"
+        y="14.999996"
+        width="3.9999928"
+        height="1.9999995"
+        id="rect4376" />
+    </g>
+    <g
+      id="g4383"
+      transform="matrix(1,0,0,-1,-23.999995,23.999995)">
+      <rect
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+        x="198"
+        y="10.999999"
+        width="7.9999909"
+        height="1.9999965"
+        id="rect4385" />
+      <rect
+        id="rect4387"
+        height="1.9999946"
+        width="11.999995"
+        y="7.0000005"
+        x="198"
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+      <rect
+        id="rect4389"
+        height="1.9999995"
+        width="3.9999928"
+        y="14.999996"
+        x="198"
+        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    </g>
+    <rect
+      y="3.9999199"
+      x="76"
+      height="16"
+      width="16"
+      id="rect3754-4"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none" />
+    <path
+      sodipodi:nodetypes="cccccccc"
+      inkscape:connector-curvature="0"
+      id="path4351"
+      d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+      sodipodi:nodetypes="cccccccc"
+      inkscape:connector-curvature="0"
+      id="path4351-9"
+      d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+      y="3.9999199"
+      x="100"
+      height="16"
+      width="16"
+      id="rect3754-25"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none" />
+    <path
+      inkscape:connector-curvature="0"
+      id="path2987"
+      d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+      inkscape:connector-curvature="0"
+      id="path2987-1"
+      d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <rect
+      y="3.9999199"
+      x="124"
+      height="16"
+      width="16"
+      id="rect3754-73"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none" />
+    <path
+      sodipodi:nodetypes="ccccccccc"
+      inkscape:connector-curvature="0"
+      id="path3780"
+      d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+      inkscape:connector-curvature="0"
+      id="path3782"
+      d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none" />
+    <rect
+      y="3.9999199"
+      x="148"
+      height="16"
+      width="16"
+      id="rect3754-35"
+      style="fill:#4c4c4c;fill-opacity:1;stroke:none" />
+    <path
+      sodipodi:nodetypes="ccccccc"
+      inkscape:connector-curvature="0"
+      id="path5008-2"
+      d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+      sodipodi:nodetypes="ccccccc"
+      inkscape:connector-curvature="0"
+      id="path5008-2-8"
+      d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
+      style="fill:#ffffff;fill-opacity:1;stroke:none" />
+  </g>
+  <rect
+    x="4"
+    y="27.999994"
+    width="16"
+    height="16"
+    id="rect4432"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0"
+    x="28.000006"
+    y="27.99999"
+    width="16"
+    height="16"
+    id="rect4434" />
+  <rect
+    id="rect4436"
+    height="16"
+    width="16"
+    y="27.99999"
+    x="52.000004"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  <rect
+    style="fill:#d3d3d3;stroke:#000000;stroke-width:0"
+    x="172.00002"
+    y="27.999981"
+    width="16"
+    height="16"
+    id="rect4446" />
+  <rect
+    style="fill:#d3d3d3;stroke:#000000;stroke-width:0"
+    x="196"
+    y="27.99999"
+    width="16"
+    height="16"
+    id="rect4448" />
+  <g
+    id="g4466"
+    style="stroke:none"
+    transform="translate(0,23.999995)">
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+      id="rect4468"
+      height="1.9999986"
+      width="9.9999924"
+      y="10.999998"
+      x="7.0000048" />
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+      id="rect4470"
+      height="9.9999838"
+      width="1.9999955"
+      y="7.0000114"
+      x="11.000005" />
+  </g>
+  <g
+    transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,35.999996)"
+    id="g4472"
+    style="stroke:none">
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+      id="rect4474"
+      height="1.9999986"
+      width="9.9999924"
+      y="10.999998"
+      x="7.0000048" />
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0"
+      id="rect4476"
+      height="9.9999838"
+      width="1.9999955"
+      y="7.0000114"
+      x="11.000005" />
+  </g>
+  <rect
+    style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+    x="55.000004"
+    y="31"
+    width="6.9999909"
+    height="6.9999905"
+    id="rect4478" />
+  <rect
+    id="rect4480"
+    height="6.9999905"
+    width="6.9999909"
+    y="34.000008"
+    x="58"
+    style="fill:#ffffff;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
+  <rect
+    style="fill:#ffffff;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+    x="58.000004"
+    y="34.000004"
+    width="6.9999909"
+    height="6.9999905"
+    id="rect4482" />
+  <g
+    id="g4484"
+    transform="translate(0,23.999995)">
+    <rect
+      id="rect4486"
+      height="1.9999965"
+      width="7.9999909"
+      y="10.999999"
+      x="198"
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+      x="198"
+      y="7.0000005"
+      width="11.999995"
+      height="1.9999946"
+      id="rect4488" />
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+      x="198"
+      y="14.999996"
+      width="3.9999928"
+      height="1.9999995"
+      id="rect4490" />
+  </g>
+  <g
+    id="g4492"
+    transform="matrix(1,0,0,-1,-23.999995,47.99999)">
+    <rect
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+      x="198"
+      y="10.999999"
+      width="7.9999909"
+      height="1.9999965"
+      id="rect4494" />
+    <rect
+      id="rect4496"
+      height="1.9999946"
+      width="11.999995"
+      y="7.0000005"
+      x="198"
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+      id="rect4498"
+      height="1.9999995"
+      width="3.9999928"
+      y="14.999996"
+      x="198"
+      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  </g>
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none"
+    id="rect3754-8"
+    width="16"
+    height="16"
+    x="76"
+    y="27.99992" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="m 85.10448,30.015537 -0.0156,1.4063 c 3.02668,-0.2402 0.33007,3.6508 2.48438,4.5781 -2.18695,1.0938 0.49191,4.90688 -2.45313,4.57808 l -0.0156,1.4219 c 5.70827,0.559 1.03263,-5.10048 4.70313,-5.26558 l 0,-1.4063 c -3.61304,-0.027 1.11893,-5.707 -4.70313,-5.3125 z"
+    id="path4351-1"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccccccc" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="m 82.78126,29.998237 0.0156,1.4063 c -3.02668,-0.2402 -0.33008,3.6507 -2.48438,4.5781 2.18694,1.0938 -0.49191,4.90688 2.45313,4.57808 l 0.0156,1.4219 c -5.70828,0.559 -1.03264,-5.10038 -4.70313,-5.26558 l 0,-1.4063 c 3.61303,-0.027 -1.11893,-5.7071 4.70313,-5.3125 z"
+    id="path4351-9-5"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccccccc" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none"
+    id="rect3754-65"
+    width="16"
+    height="16"
+    x="100"
+    y="27.99992" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:none"
+    d="m 103.719,29.671937 0,12.71878 3.03125,0 0,-1.5313 -1.34375,0 0,-9.62498 1.375,0 0,-1.5625 z"
+    id="path2987-8"
+    inkscape:connector-curvature="0" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:none"
+    d="m 112.2185,29.671937 0,12.71878 -3.03125,0 0,-1.5313 1.34375,0 0,-9.62498 -1.375,0 0,-1.5625 z"
+    id="path2987-1-9"
+    inkscape:connector-curvature="0" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none"
+    id="rect3754-92"
+    width="16"
+    height="16"
+    x="124"
+    y="27.99992" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:none"
+    d="m 126.2824,41.602917 1.78957,0 1.14143,-2.86408 5.65364,0 1.14856,2.86408 1.76565,0 -4.78687,-11.16108 -1.91902,0 z"
+    id="path3780-9"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="ccccccccc" />
+  <path
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none"
+    d="m 129.72704,37.478837 4.60852,0.01 -2.30426,-5.5498 z"
+    id="path3782-2"
+    inkscape:connector-curvature="0" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none"
+    id="rect3754-47"
+    width="16"
+    height="16"
+    x="148"
+    y="27.99992" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:none"
+    d="m 156.47656,29.891737 0,2.1797 0.46093,2.3984 1.82813,0 0.39844,-2.3984 0,-2.1797 z"
+    id="path5008-2-1"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="ccccccc" />
+  <path
+    style="fill:#ffffff;fill-opacity:1;stroke:none"
+    d="m 152.51562,29.890637 0,2.1797 0.46094,2.3984 1.82812,0 0.39844,-2.3984 0,-2.1797 z"
+    id="path5008-2-8-8"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="ccccccc" />
+  <rect
+    id="svg_1-7-2"
+    height="1.9999961"
+    width="11.999996"
+    y="64"
+    x="54"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+    id="svg_1-7-2-2"
+    height="2.9999905"
+    width="2.9999907"
+    y="52"
+    x="80.000008"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="85.000008"
+    y="52"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4561" />
+  <rect
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="80.000008"
+    y="58"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4563" />
+  <rect
+    id="rect4565"
+    height="2.9999905"
+    width="2.9999907"
+    y="58"
+    x="85.000008"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4567"
+    height="2.9999905"
+    width="2.9999907"
+    y="64"
+    x="80.000008"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="85.000008"
+    y="64"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4569" />
+  <circle
+    style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+    id="path4571"
+    cx="110.06081"
+    cy="57.939209"
+    r="4.7438836" />
+  <rect
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="116.64566"
+    y="-31.79752"
+    width="4.229713"
+    height="6.4053884"
+    id="rect4563-2"
+    transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+  <path
+    style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="M 125,56 138.77027,56.095 132,64 Z"
+    id="path4613"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccc" />
+  <path
+    sodipodi:nodetypes="cccc"
+    inkscape:connector-curvature="0"
+    id="path4615"
+    d="M 149,64 162.77027,63.905 156,56 Z"
+    style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="54"
+    y="53"
+    width="11.999996"
+    height="1.9999961"
+    id="rect4638" />
+  <rect
+    id="svg_1-7-2-24"
+    height="1.9999957"
+    width="12.99999"
+    y="-56"
+    x="53"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+    transform="matrix(0,1,-1,0,0,0)"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+    x="53"
+    y="-66"
+    width="12.99999"
+    height="1.9999957"
+    id="rect4657" />
+  <rect
+    id="rect4659"
+    height="0.99999291"
+    width="11.999999"
+    y="57"
+    x="54"
+    style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="54"
+    y="88.000122"
+    width="11.999996"
+    height="1.9999961"
+    id="rect4661" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="80.000008"
+    y="76.000122"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4663" />
+  <rect
+    id="rect4665"
+    height="2.9999905"
+    width="2.9999907"
+    y="76.000122"
+    x="85.000008"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+    id="rect4667"
+    height="2.9999905"
+    width="2.9999907"
+    y="82.000122"
+    x="80.000008"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="85.000008"
+    y="82.000122"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4669" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="80.000008"
+    y="88.000122"
+    width="2.9999907"
+    height="2.9999905"
+    id="rect4671" />
+  <rect
+    id="rect4673"
+    height="2.9999905"
+    width="2.9999907"
+    y="88.000122"
+    x="85.000008"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <circle
+    r="4.7438836"
+    cy="81.939331"
+    cx="110.06081"
+    id="circle4675"
+    style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+    transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+    id="rect4677"
+    height="6.4053884"
+    width="4.229713"
+    y="-14.826816"
+    x="133.6163"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
+  <path
+    sodipodi:nodetypes="cccc"
+    inkscape:connector-curvature="0"
+    id="path4679"
+    d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
+    style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+    style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
+    id="path4681"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccc" />
+  <rect
+    id="rect4683"
+    height="1.9999961"
+    width="11.999996"
+    y="77.000122"
+    x="54"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+    transform="matrix(0,1,-1,0,0,0)"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="77.000122"
+    y="-56"
+    width="12.99999"
+    height="1.9999957"
+    id="rect4685" />
+  <rect
+    id="rect4687"
+    height="1.9999957"
+    width="12.99999"
+    y="-66"
+    x="77.000122"
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+    style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+    x="54"
+    y="81.000122"
+    width="11.999999"
+    height="0.99999291"
+    id="rect4689" />
+  <rect
+    id="rect4761-1"
+    height="1.9999945"
+    width="15.99999"
+    y="101"
+    x="76.000008"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-0"
+    height="1.9999945"
+    width="15.99999"
+    y="105"
+    x="76.000008"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-7"
+    height="1.9999945"
+    width="9"
+    y="109"
+    x="76.000008"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-1-1"
+    height="1.9999945"
+    width="12"
+    y="125"
+    x="76.000008"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-1-1-4"
+    height="1.9999945"
+    width="10"
+    y="137"
+    x="76.000008"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-1-1-4-4"
+    height="1.9999945"
+    width="10"
+    y="129"
+    x="82"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <rect
+    id="rect4761-1-1-4-4-3"
+    height="1.9999945"
+    width="9"
+    y="133"
+    x="82"
+    style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
+  <path
+    inkscape:connector-curvature="0"
+    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+    d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
+    id="path4138" />
+  <path
+    inkscape:connector-curvature="0"
+    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+    d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+    id="path4138-1" />
+  <path
+    inkscape:connector-curvature="0"
+    style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
+    d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
+    id="path3055-0-77" />
+  <path
+    style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.966;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="m 4.9850574,108.015 14.0298856,-0.03"
+    id="path5244-5-0-5"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cc" />
+  <path
+    style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.966;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    d="m 4.9849874,132.015 14.0298866,-0.03"
+    id="path5244-5-0-5-8"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cc" />
+  <path
+    inkscape:connector-curvature="0"
+    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+    d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
+    id="path4138-12" />
+  <path
+    inkscape:connector-curvature="0"
+    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+    d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+    id="path4138-1-3" />
+  <path
+    id="path6191"
+    d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
+    style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
+    inkscape:connector-curvature="0" />
+  <path
+    inkscape:connector-curvature="0"
+    style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
+    d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
+    id="path6193" />
+  <path
+    id="path6195"
+    d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
+    style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
+    inkscape:connector-curvature="0" />
+  <path
+    sodipodi:type="star"
+    style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+    id="path4500"
+    sodipodi:sides="3"
+    sodipodi:cx="11.55581"
+    sodipodi:cy="60.073242"
+    sodipodi:r1="5.1116104"
+    sodipodi:r2="2.5558052"
+    sodipodi:arg1="0"
+    sodipodi:arg2="1.0471976"
+    inkscape:flatsided="false"
+    inkscape:rounded="0"
+    inkscape:randomized="0"
+    d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
+    inkscape:transform-center-x="-1.2779026" />
+  <path
+    inkscape:transform-center-x="1.277902"
+    d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
+    inkscape:randomized="0"
+    inkscape:rounded="0"
+    inkscape:flatsided="false"
+    sodipodi:arg2="1.0471976"
+    sodipodi:arg1="0"
+    sodipodi:r2="2.5558052"
+    sodipodi:r1="5.1116104"
+    sodipodi:cy="60.073242"
+    sodipodi:cx="-36.611614"
+    sodipodi:sides="3"
+    id="path4502"
+    style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+    sodipodi:type="star"
+    transform="scale(-1,1)" />
+  <path
+    d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
+    inkscape:randomized="0"
+    inkscape:rounded="0"
+    inkscape:flatsided="false"
+    sodipodi:arg2="1.0471976"
+    sodipodi:arg1="0"
+    sodipodi:r2="2.5558052"
+    sodipodi:r1="5.1116104"
+    sodipodi:cy="60.073212"
+    sodipodi:cx="11.55581"
+    sodipodi:sides="3"
+    id="path4504"
+    style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+    sodipodi:type="star"
+    transform="matrix(0,1,-1,0,72.0074,71.7877)"
+    inkscape:transform-center-y="1.2779029" />
+  <path
+    inkscape:transform-center-y="-1.2779026"
+    transform="matrix(0,-1,-1,0,96,96)"
+    sodipodi:type="star"
+    style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+    id="path4506"
+    sodipodi:sides="3"
+    sodipodi:cx="11.55581"
+    sodipodi:cy="60.073212"
+    sodipodi:r1="5.1116104"
+    sodipodi:r2="2.5558052"
+    sodipodi:arg1="0"
+    sodipodi:arg2="1.0471976"
+    inkscape:flatsided="false"
+    inkscape:rounded="0"
+    inkscape:randomized="0"
+    d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
+  <path
+    sodipodi:nodetypes="cccc"
+    inkscape:connector-curvature="0"
+    id="path4615-5"
+    d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
+    style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+    style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+    d="m 179,55 0,6 2,0 0,-6"
+    id="path4300"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccc" />
+  <path
+    style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+    d="m 179,62 0,2 2,0 0,-2"
+    id="path4300-6"
+    inkscape:connector-curvature="0"
+    sodipodi:nodetypes="cccc" />
+</svg>
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index d1412d75751..98c50199517 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -149,6 +149,7 @@
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
     <script src="bower_components/jsoneditor/dist/jsoneditor.min.js"></script>
+    <script src="bower_components/angucomplete-alt/dist/angucomplete-alt.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->