From e3e897c65ca30e2bfe6e2b3f6636916c0596886a Mon Sep 17 00:00:00 2001
From: Zhong Wang <wangzhong.neu@gmail.com>
Date: Sun, 6 Mar 2016 22:42:16 -0800
Subject: [PATCH 01/11] refine pr-190

---
 zeppelin-web/src/app/home/home.controller.js  |  5 ++
 zeppelin-web/src/app/home/home.css            | 59 +++++++++++++++++++
 zeppelin-web/src/app/home/home.html           | 29 +++++++--
 .../src/components/navbar/navbar.html         | 18 ++++--
 .../notebookList.datafactory.js               | 41 ++++++++++++-
 5 files changed, 141 insertions(+), 11 deletions(-)

diff --git a/zeppelin-web/src/app/home/home.controller.js b/zeppelin-web/src/app/home/home.controller.js
index 14f15870e37..7d84465a456 100644
--- a/zeppelin-web/src/app/home/home.controller.js
+++ b/zeppelin-web/src/app/home/home.controller.js
@@ -71,4 +71,9 @@ angular.module('zeppelinWebApp').controller('HomeCtrl', function($scope, noteboo
     websocketMsgSrv.reloadAllNotesFromRepo();
     $scope.isReloadingNotes = true;
   };
+
+  $scope.toggleFolderNode = function(node) {
+    node.hidden = node.hidden ? false : true;
+  };
+
 });
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 281ffb4168f..9c2c9edee20 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -151,6 +151,64 @@ a.navbar-brand:hover {
   font: normal normal normal 14px/1 FontAwesome;
 }
 
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.dropdown-submenu a:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top:0;
+  left:100%;
+  margin-top:-6px;
+  margin-left:-1px;
+  -webkit-border-radius:0 6px 6px 6px;
+  -moz-border-radius:0 6px 6px 6px;
+  border-radius:0 6px 6px 6px;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+    display:block;
+}
+.dropdown-submenu > a:after {
+  display:block;
+  content:" ";
+  float:right;
+  width:0;
+  height:0;
+  border-color:transparent;
+  border-style:solid;
+  border-width:5px 0 5px 5px;
+  border-left-color:#cccccc;
+  margin-top:5px;
+  margin-right:-10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color:#ffffff;
+}
+.dropdown-submenu.pull-left {
+  float:none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left:-100%;
+  margin-left:10px;
+  -webkit-border-radius:6px 0 6px 6px;
+  -moz-border-radius:6px 0 6px 6px;
+  border-radius:6px 0 6px 6px;
+}
+
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #D3D3D3;
@@ -199,6 +257,7 @@ a.navbar-brand:hover {
 #notebook-list {
   position: relative;
   overflow: hidden;
+  display: inline;
 }
 
 @media (min-width: 768px) {
diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
index 71a7a1ad7ad..92c14893e4d 100644
--- a/zeppelin-web/src/app/home/home.html
+++ b/zeppelin-web/src/app/home/home.html
@@ -12,6 +12,22 @@
 limitations under the License.
 -->
 
+<script type="text/ng-template" id="notebook_folder_renderer.html">
+  <div ng-if="node.children === undefined">
+    <i style="font-size: 10px;" class="icon-doc"></i>
+    <a style="text-decoration: none;" href="#/notebook/{{node.id}}">{{node.name || 'Note ' + node.id}}</a>
+  </div>
+  <div ng-if="node.children !== undefined">
+    <i style="font-size: 10px;" ng-class="node.hidden ? 'icon-folder' : 'icon-folder-alt'"></i>
+    <a style="text-decoration: none;" ng-click="toggleFolderNode(node)">{{node.name}}</a>
+    <div ng-if="!node.hidden">
+      <ul style="list-style-type: none; padding-left:15px;">
+        <li ng-repeat="node in node.children" ng-include="'notebook_folder_renderer.html'" />
+      </ul>
+    </div>
+  </div>
+</script>
+
 <div ng-controller="HomeCtrl as home">
   <div ng-show="home.staticHome" class="box width-full home">
     <div class="zeppelin">
@@ -41,10 +57,15 @@ <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-deco
               <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
             <ul id="notebook-names">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
-              <li ng-repeat="note in home.notes.list | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
-                <i style="font-size: 10px;" class="icon-doc"></i>
-                <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
-              </li>
+              <div ng-if="!query || query === ''">
+                <li ng-repeat="node in home.notes.list" ng-include="'notebook_folder_renderer.html'" />
+              </div>
+              <div ng-if="query && query !== ''">
+                <li ng-repeat="note in home.notes.flatList | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
+                  <i style="font-size: 10px;" class="icon-doc"></i>
+                  <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
+                </li>
+              </div>
             </ul>
           </div>
         </div>
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index bdc57901055..e3d971f27a3 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -10,7 +10,18 @@
 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.
--->
+  -->
+<script type="text/ng-template" id="notebook_list_renderer.html">
+  <a ng-if="note.id" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
+  <li ng-if="!note.id"
+      class="dropdown-submenu">
+    <a tabindex="-1" href="#">{{note.name}}</a>
+    <ul class="dropdown-menu">
+      <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
+    </ul>
+  </li>
+</script>
+
 <div class="navbar navbar-inverse navbar-fixed-top" style="display: none;" role="navigation" ng-class="{'displayNavBar': !asIframe}">
   <div class="container">
     <div class="navbar-header">
@@ -32,10 +43,7 @@
             <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
-              <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
-              <li ng-repeat="note in navbar.notes.list | filter:query | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
-                  ng-class="{'active' : navbar.isActive(note.id)}">
-                <a href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
+              <li ng-repeat="note in navbar.notes.list track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
               </li>
             </div>
           </ul>
diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index ae48999b86d..20fd5acd220 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -17,10 +17,47 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
   var notes = {};
 
   notes.list = [];
+  notes.flatList = [];
 
   notes.setNotes = function(notesList) {
-    notes.list = angular.copy(notesList);
+    notes.flatList = angular.copy(notesList); // a flat list to boost searching
+
+    // construct the folder-based list
+    notes.list = [];
+    for (var i in notesList) {
+      var note = notesList[i];
+      var noteName = note.name || note.id;
+      var dirs = noteName.match(/([^\\\][^\/]|\\\/)+/g);
+
+      var curDir = notes.list;
+      for (var t = 0; t < dirs.length; t++) {
+        var dir = dirs[t];
+        if (t == dirs.length - 1) { // last item
+          curDir.push({
+            name : dir,
+            id : note.id
+          });
+        } else {
+          var child = null;
+          for (var j in curDir) {
+            if (curDir[j].name === dir && 'children' in curDir[j]) {
+              child = curDir[j];
+              break;
+            }
+          }
+          if (child === null) {
+            child = {
+              name : dir,
+              hidden : true,
+              children : []
+            }
+            curDir.push(child);
+          }
+          curDir = child.children;
+        }
+      }
+    }
   };
 
   return notes;
-});
\ No newline at end of file
+});

From 94a918761235b0f861acab07b214ba0712b30814 Mon Sep 17 00:00:00 2001
From: Zhong Wang <wangzhong.neu@gmail.com>
Date: Mon, 7 Mar 2016 21:51:08 -0800
Subject: [PATCH 02/11] fix search box issue; fix the dropdown first elem css
 issue

---
 zeppelin-web/src/app/home/home.css             | 8 +++++++-
 zeppelin-web/src/app/home/home.html            | 6 +++---
 zeppelin-web/src/components/navbar/navbar.html | 1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 9c2c9edee20..c37febc5266 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -180,7 +180,13 @@ a.navbar-brand:hover {
   border-radius:0 6px 6px 6px;
 }
 .dropdown-submenu:hover > .dropdown-menu {
-    display:block;
+  display:block;
+}
+/* overwrite the style of the first element of dropdown-menu */
+.dropdown-submenu:hover > .dropdown-menu > li:first-child > a:hover {
+  color: #262626;
+  text-decoration: none;
+  background: #f5f5f5;
 }
 .dropdown-submenu > a:after {
   display:block;
diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
index 92c14893e4d..6623ee34796 100644
--- a/zeppelin-web/src/app/home/home.html
+++ b/zeppelin-web/src/app/home/home.html
@@ -19,7 +19,7 @@
   </div>
   <div ng-if="node.children !== undefined">
     <i style="font-size: 10px;" ng-class="node.hidden ? 'icon-folder' : 'icon-folder-alt'"></i>
-    <a style="text-decoration: none;" ng-click="toggleFolderNode(node)">{{node.name}}</a>
+    <a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">{{node.name}}</a>
     <div ng-if="!node.hidden">
       <ul style="list-style-type: none; padding-left:15px;">
         <li ng-repeat="node in node.children" ng-include="'notebook_folder_renderer.html'" />
@@ -57,10 +57,10 @@ <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-deco
               <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
             <ul id="notebook-names">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
-              <div ng-if="!query || query === ''">
+              <div ng-if="!query || query.name === ''">
                 <li ng-repeat="node in home.notes.list" ng-include="'notebook_folder_renderer.html'" />
               </div>
-              <div ng-if="query && query !== ''">
+              <div ng-if="query && query.name !== ''">
                 <li ng-repeat="note in home.notes.flatList | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
                   <i style="font-size: 10px;" class="icon-doc"></i>
                   <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index e3d971f27a3..7025551826d 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -18,6 +18,7 @@
     <a tabindex="-1" href="#">{{note.name}}</a>
     <ul class="dropdown-menu">
       <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
+      </li>
     </ul>
   </li>
 </script>

From 2f5c9c561ddbefbedf1ea9122d3424a6a1643566 Mon Sep 17 00:00:00 2001
From: Zhong Wang <wangzhong.neu@gmail.com>
Date: Mon, 7 Mar 2016 22:24:43 -0800
Subject: [PATCH 03/11] test cases for notelist factory

---
 .../test/spec/factory/notebookList.js         | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 zeppelin-web/test/spec/factory/notebookList.js

diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
new file mode 100644
index 00000000000..3d685ecbffc
--- /dev/null
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -0,0 +1,69 @@
+'use strict';
+
+describe('Factory: NotebookList', function() {
+
+  var notebookList;
+
+  beforeEach(function () {
+    module('zeppelinWebApp');
+
+    inject(function ($injector) {
+      notebookList = $injector.get('notebookListDataFactory');
+    });
+  });
+
+  it('should generate both flat list and folder-based list properly', function() {
+    var notesList = [
+      {name: 'A', id: '000001'},
+      {name: 'B', id: '000002'},
+      {id: '000003'}, // notebook without name
+      {name: '/C/CA', id: '000004'},
+      {name: '/C/CB', id: '000005'},
+      {name: '/C/CB/CBA', id: '000006'},  // same name with a dir
+      {name: '/C/CB/CBA', id: '000007'}, // same name with another note
+      {name: 'C///CB//CBB', id: '000008'}
+    ];
+    notebookList.setNotes(notesList);
+
+    var flatList = notebookList.flatList;
+    expect(flatList.length).toBe(8);
+    expect(flatList[0].name).toBe('A');
+    expect(flatList[0].id).toBe('000001');
+    expect(flatList[1].name).toBe('B');
+    expect(flatList[2].name).toBeUndefined;
+    expect(flatList[3].name).toBe('/C/CA');
+    expect(flatList[4].name).toBe('/C/CB');
+    expect(flatList[5].name).toBe('/C/CB/CBA');
+    expect(flatList[6].name).toBe('/C/CB/CBA');
+    expect(flatList[7].name).toBe('C///CB//CBB');
+
+    var folderList = notebookList.list;
+    expect(folderList.length).toBe(4);
+    expect(folderList[0].name).toBe('A');
+    expect(folderList[0].id).toBe('000001')
+    expect(folderList[1].name).toBe('B');
+    expect(folderList[2].name).toBe('000003');
+    expect(folderList[3].name).toBe('C');
+    expect(folderList[3].id).toBeUndefined;
+    expect(folderList[3].children.length).toBe(3);
+    expect(folderList[3].children[0].name).toBe('CA');
+    expect(folderList[3].children[0].id).toBe('000004');
+    expect(folderList[3].children[0].children).toBeUndefined;
+    expect(folderList[3].children[1].name).toBe('CB');
+    expect(folderList[3].children[1].id).toBe('000005');
+    expect(folderList[3].children[1].children).toBeUndefined;
+    expect(folderList[3].children[2].name).toBe('CB');
+    expect(folderList[3].children[2].id).toBeUndefined;
+    expect(folderList[3].children[2].children.length).toBe(3);
+    expect(folderList[3].children[2].children[0].name).toBe('CBA');
+    expect(folderList[3].children[2].children[0].id).toBe('000006');
+    expect(folderList[3].children[2].children[0].children).toBeUndefined;
+    expect(folderList[3].children[2].children[1].name).toBe('CBA');
+    expect(folderList[3].children[2].children[1].id).toBe('000007');
+    expect(folderList[3].children[2].children[1].children).toBeUndefined;
+    expect(folderList[3].children[2].children[2].name).toBe('CBB');
+    expect(folderList[3].children[2].children[2].id).toBe('000008');
+    expect(folderList[3].children[2].children[2].children).toBeUndefined;
+  });
+
+});

From 8cdbbd261da07f0e2cd595186075415f7cc73855 Mon Sep 17 00:00:00 2001
From: Zhong Wang <wangzhong.neu@gmail.com>
Date: Tue, 22 Mar 2016 21:05:22 -0700
Subject: [PATCH 04/11] a couple of fixes based on the comments

---
 zeppelin-web/src/app/home/home.controller.js     |  2 +-
 zeppelin-web/src/app/home/home.html              | 14 ++++++++------
 zeppelin-web/src/components/navbar/navbar.html   |  2 +-
 .../notebookList.datafactory.js                  |  2 +-
 zeppelin-web/test/spec/factory/notebookList.js   | 16 ++++++++--------
 5 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/zeppelin-web/src/app/home/home.controller.js b/zeppelin-web/src/app/home/home.controller.js
index 7d84465a456..63410ce7234 100644
--- a/zeppelin-web/src/app/home/home.controller.js
+++ b/zeppelin-web/src/app/home/home.controller.js
@@ -73,7 +73,7 @@ angular.module('zeppelinWebApp').controller('HomeCtrl', function($scope, noteboo
   };
 
   $scope.toggleFolderNode = function(node) {
-    node.hidden = node.hidden ? false : true;
+    node.hidden = !node.hidden;
   };
 
 });
diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
index 6623ee34796..d6b320876c6 100644
--- a/zeppelin-web/src/app/home/home.html
+++ b/zeppelin-web/src/app/home/home.html
@@ -13,13 +13,15 @@
 -->
 
 <script type="text/ng-template" id="notebook_folder_renderer.html">
-  <div ng-if="node.children === undefined">
-    <i style="font-size: 10px;" class="icon-doc"></i>
-    <a style="text-decoration: none;" href="#/notebook/{{node.id}}">{{node.name || 'Note ' + node.id}}</a>
+  <div ng-if="node.children == null">
+    <a style="text-decoration: none;" href="#/notebook/{{node.id}}">
+      <i style="font-size: 10px;" class="icon-doc"/> {{node.name || 'Note ' + node.id}}
+    </a>
   </div>
-  <div ng-if="node.children !== undefined">
-    <i style="font-size: 10px;" ng-class="node.hidden ? 'icon-folder' : 'icon-folder-alt'"></i>
-    <a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">{{node.name}}</a>
+  <div ng-if="node.children != null">
+    <a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">
+      <i style="font-size: 10px;" ng-class="node.hidden ? 'icon-folder' : 'icon-folder-alt'" /> {{node.name}}
+    </a>
     <div ng-if="!node.hidden">
       <ul style="list-style-type: none; padding-left:15px;">
         <li ng-repeat="node in node.children" ng-include="'notebook_folder_renderer.html'" />
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index 7025551826d..ad4a98fd98a 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -15,7 +15,7 @@
   <a ng-if="note.id" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
   <li ng-if="!note.id"
       class="dropdown-submenu">
-    <a tabindex="-1" href="#">{{note.name}}</a>
+    <a tabindex="-1" href="javascript: void(0)">{{note.name}}</a>
     <ul class="dropdown-menu">
       <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
       </li>
diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index 20fd5acd220..4b44b039b5a 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -50,7 +50,7 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
               name : dir,
               hidden : true,
               children : []
-            }
+            };
             curDir.push(child);
           }
           curDir = child.children;
diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
index 3d685ecbffc..7a6f622f876 100644
--- a/zeppelin-web/test/spec/factory/notebookList.js
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -30,7 +30,7 @@ describe('Factory: NotebookList', function() {
     expect(flatList[0].name).toBe('A');
     expect(flatList[0].id).toBe('000001');
     expect(flatList[1].name).toBe('B');
-    expect(flatList[2].name).toBeUndefined;
+    expect(flatList[2].name).toBeUndefined();
     expect(flatList[3].name).toBe('/C/CA');
     expect(flatList[4].name).toBe('/C/CB');
     expect(flatList[5].name).toBe('/C/CB/CBA');
@@ -44,26 +44,26 @@ describe('Factory: NotebookList', function() {
     expect(folderList[1].name).toBe('B');
     expect(folderList[2].name).toBe('000003');
     expect(folderList[3].name).toBe('C');
-    expect(folderList[3].id).toBeUndefined;
+    expect(folderList[3].id).toBeUndefined();
     expect(folderList[3].children.length).toBe(3);
     expect(folderList[3].children[0].name).toBe('CA');
     expect(folderList[3].children[0].id).toBe('000004');
-    expect(folderList[3].children[0].children).toBeUndefined;
+    expect(folderList[3].children[0].children).toBeUndefined();
     expect(folderList[3].children[1].name).toBe('CB');
     expect(folderList[3].children[1].id).toBe('000005');
-    expect(folderList[3].children[1].children).toBeUndefined;
+    expect(folderList[3].children[1].children).toBeUndefined();
     expect(folderList[3].children[2].name).toBe('CB');
-    expect(folderList[3].children[2].id).toBeUndefined;
+    expect(folderList[3].children[2].id).toBeUndefined();
     expect(folderList[3].children[2].children.length).toBe(3);
     expect(folderList[3].children[2].children[0].name).toBe('CBA');
     expect(folderList[3].children[2].children[0].id).toBe('000006');
-    expect(folderList[3].children[2].children[0].children).toBeUndefined;
+    expect(folderList[3].children[2].children[0].children).toBeUndefined();
     expect(folderList[3].children[2].children[1].name).toBe('CBA');
     expect(folderList[3].children[2].children[1].id).toBe('000007');
-    expect(folderList[3].children[2].children[1].children).toBeUndefined;
+    expect(folderList[3].children[2].children[1].children).toBeUndefined();
     expect(folderList[3].children[2].children[2].name).toBe('CBB');
     expect(folderList[3].children[2].children[2].id).toBe('000008');
-    expect(folderList[3].children[2].children[2].children).toBeUndefined;
+    expect(folderList[3].children[2].children[2].children).toBeUndefined();
   });
 
 });

From 961a46c89d424105926b10f6453138ac67f9d75c Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Mon, 28 Mar 2016 21:03:10 -0700
Subject: [PATCH 05/11] fix code style issues

---
 .../notebookListDataFactory/notebookList.datafactory.js         | 2 +-
 zeppelin-web/test/spec/factory/notebookList.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index 4b44b039b5a..c00b05c4023 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -32,7 +32,7 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
       var curDir = notes.list;
       for (var t = 0; t < dirs.length; t++) {
         var dir = dirs[t];
-        if (t == dirs.length - 1) { // last item
+        if (t === dirs.length - 1) { // last item
           curDir.push({
             name : dir,
             id : note.id
diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
index 7a6f622f876..a03e911094a 100644
--- a/zeppelin-web/test/spec/factory/notebookList.js
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -40,7 +40,7 @@ describe('Factory: NotebookList', function() {
     var folderList = notebookList.list;
     expect(folderList.length).toBe(4);
     expect(folderList[0].name).toBe('A');
-    expect(folderList[0].id).toBe('000001')
+    expect(folderList[0].id).toBe('000001');
     expect(folderList[1].name).toBe('B');
     expect(folderList[2].name).toBe('000003');
     expect(folderList[3].name).toBe('C');

From 0e13d9f5c13934644ce23d004741f2ee480d8c2f Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Mon, 28 Mar 2016 21:56:28 -0700
Subject: [PATCH 06/11] add instruction in create folder dialog

---
 .../src/components/noteName-create/note-name-dialog.html         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/zeppelin-web/src/components/noteName-create/note-name-dialog.html b/zeppelin-web/src/components/noteName-create/note-name-dialog.html
index 8c0cf9199fb..f0f12a23ded 100644
--- a/zeppelin-web/src/components/noteName-create/note-name-dialog.html
+++ b/zeppelin-web/src/components/noteName-create/note-name-dialog.html
@@ -28,6 +28,7 @@ <h4 class="modal-title" ng-show="notenamectrl.clone">Clone note</h4>
               placeholder="Note name" type="text" class="form-control"
               id="noteName" ng-model="note.notename" ng-enter="notenamectrl.handleNameEnter()">
           </div>
+          Use '/' to create folders. Example: /NoteDirA/Notebook1
         </div>
         <div class="modal-footer">
           <button type="button" id="createNoteButton"

From 1e66dc6d2883cd355205a2ffb3d8ebb33696f9d4 Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Wed, 6 Apr 2016 23:08:35 -0700
Subject: [PATCH 07/11] refactor folder construction code to make it cleaner

---
 zeppelin-web/src/app/home/home.html           |  2 +-
 .../src/components/navbar/navbar.html         |  2 +-
 .../notebookList.datafactory.js               | 57 +++++++++----------
 .../test/spec/factory/notebookList.js         |  2 +-
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
index d6b320876c6..7255f68914e 100644
--- a/zeppelin-web/src/app/home/home.html
+++ b/zeppelin-web/src/app/home/home.html
@@ -60,7 +60,7 @@ <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-deco
             <ul id="notebook-names">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
               <div ng-if="!query || query.name === ''">
-                <li ng-repeat="node in home.notes.list" ng-include="'notebook_folder_renderer.html'" />
+                <li ng-repeat="node in home.notes.root.children" ng-include="'notebook_folder_renderer.html'" />
               </div>
               <div ng-if="query && query.name !== ''">
                 <li ng-repeat="note in home.notes.flatList | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index ad4a98fd98a..272167ae6cb 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -44,7 +44,7 @@
             <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
-              <li ng-repeat="note in navbar.notes.list track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
+              <li ng-repeat="note in navbar.notes.root.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
               </li>
             </div>
           </ul>
diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index c00b05c4023..a76d9680545 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -15,48 +15,47 @@
 
 angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
   var notes = {};
-
-  notes.list = [];
+  notes.root = {
+    children : []
+  };
   notes.flatList = [];
 
   notes.setNotes = function(notesList) {
-    notes.flatList = angular.copy(notesList); // a flat list to boost searching
+    // a flat list to boost searching
+    notes.flatList = angular.copy(notesList);
 
-    // construct the folder-based list
-    notes.list = [];
-    for (var i in notesList) {
-      var note = notesList[i];
+    // construct the folder-based tree
+    _.reduce(notesList, function(root, note) {
       var noteName = note.name || note.id;
-      var dirs = noteName.match(/([^\\\][^\/]|\\\/)+/g);
+      var nodes = noteName.match(/([^\\\][^\/]|\\\/)+/g);
 
-      var curDir = notes.list;
-      for (var t = 0; t < dirs.length; t++) {
-        var dir = dirs[t];
-        if (t === dirs.length - 1) { // last item
-          curDir.push({
-            name : dir,
+      // recursively add nodes
+      var addNode = function(curDir, nodes) {
+        if (nodes.length === 1) {  // the leaf
+          curDir.children.push({
+            name : nodes[0],
             id : note.id
           });
-        } else {
-          var child = null;
-          for (var j in curDir) {
-            if (curDir[j].name === dir && 'children' in curDir[j]) {
-              child = curDir[j];
-              break;
-            }
-          }
-          if (child === null) {
-            child = {
-              name : dir,
+        } else {  // a folder node
+          var node = nodes.shift();
+          var dir = _.find(curDir.children,
+            function(c) {return c.name === node && c.children !== undefined;});
+          if (dir !== undefined) { // found an existing dir
+            addNode(dir, nodes);
+          } else {
+            var newDir = {
+              name : node,
               hidden : true,
               children : []
             };
-            curDir.push(child);
+            curDir.children.push(newDir);
+            addNode(newDir, nodes);
           }
-          curDir = child.children;
         }
-      }
-    }
+      };
+      addNode(root, nodes);
+      return root;
+    }, notes.root);
   };
 
   return notes;
diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
index a03e911094a..ec6786676f5 100644
--- a/zeppelin-web/test/spec/factory/notebookList.js
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -37,7 +37,7 @@ describe('Factory: NotebookList', function() {
     expect(flatList[6].name).toBe('/C/CB/CBA');
     expect(flatList[7].name).toBe('C///CB//CBB');
 
-    var folderList = notebookList.list;
+    var folderList = notebookList.root.children;
     expect(folderList.length).toBe(4);
     expect(folderList[0].name).toBe('A');
     expect(folderList[0].id).toBe('000001');

From fa63d3b641d5b9408421b802855487a68b208840 Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Sun, 10 Apr 2016 17:01:39 -0700
Subject: [PATCH 08/11] trigger travis

---
 zeppelin-web/test/spec/factory/notebookList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
index ec6786676f5..14c96bf010c 100644
--- a/zeppelin-web/test/spec/factory/notebookList.js
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -23,6 +23,7 @@ describe('Factory: NotebookList', function() {
       {name: '/C/CB/CBA', id: '000007'}, // same name with another note
       {name: 'C///CB//CBB', id: '000008'}
     ];
+
     notebookList.setNotes(notesList);
 
     var flatList = notebookList.flatList;

From 49bf86b55799aa5fbb6c46d3d585f6398d1454f3 Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Sun, 10 Apr 2016 19:52:53 -0700
Subject: [PATCH 09/11] code style fixes

---
 .../notebookList.datafactory.js               | 58 ++++++++++---------
 .../test/spec/factory/notebookList.js         |  1 -
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index a76d9680545..72ea37f9566 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -14,11 +14,11 @@
 'use strict';
 
 angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
-  var notes = {};
-  notes.root = {
-    children : []
+  var notes = {
+    root: {children: []},
+    flatList: [],
+    setNotes: function() {}
   };
-  notes.flatList = [];
 
   notes.setNotes = function(notesList) {
     // a flat list to boost searching
@@ -30,33 +30,35 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
       var nodes = noteName.match(/([^\\\][^\/]|\\\/)+/g);
 
       // recursively add nodes
-      var addNode = function(curDir, nodes) {
-        if (nodes.length === 1) {  // the leaf
-          curDir.children.push({
-            name : nodes[0],
-            id : note.id
-          });
-        } else {  // a folder node
-          var node = nodes.shift();
-          var dir = _.find(curDir.children,
-            function(c) {return c.name === node && c.children !== undefined;});
-          if (dir !== undefined) { // found an existing dir
-            addNode(dir, nodes);
-          } else {
-            var newDir = {
-              name : node,
-              hidden : true,
-              children : []
-            };
-            curDir.children.push(newDir);
-            addNode(newDir, nodes);
-          }
-        }
-      };
-      addNode(root, nodes);
+      addNode(root, nodes, note.id);
+
       return root;
     }, notes.root);
   };
 
+  var addNode = function(curDir, nodes, noteId) {
+    if (nodes.length === 1) {  // the leaf
+      curDir.children.push({
+        name : nodes[0],
+        id : noteId
+      });
+    } else {  // a folder node
+      var node = nodes.shift();
+      var dir = _.find(curDir.children,
+        function(c) {return c.name === node && c.children !== undefined;});
+      if (dir !== undefined) { // found an existing dir
+        addNode(dir, nodes, noteId);
+      } else {
+        var newDir = {
+          name : node,
+          hidden : true,
+          children : []
+        };
+        curDir.children.push(newDir);
+        addNode(newDir, nodes, noteId);
+      }
+    }
+  };
+
   return notes;
 });
diff --git a/zeppelin-web/test/spec/factory/notebookList.js b/zeppelin-web/test/spec/factory/notebookList.js
index 14c96bf010c..ec6786676f5 100644
--- a/zeppelin-web/test/spec/factory/notebookList.js
+++ b/zeppelin-web/test/spec/factory/notebookList.js
@@ -23,7 +23,6 @@ describe('Factory: NotebookList', function() {
       {name: '/C/CB/CBA', id: '000007'}, // same name with another note
       {name: 'C///CB//CBB', id: '000008'}
     ];
-
     notebookList.setNotes(notesList);
 
     var flatList = notebookList.flatList;

From 876237b2db61afede841ee1f7d2fbfb6de372d06 Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Tue, 19 Apr 2016 00:56:58 -0700
Subject: [PATCH 10/11] put implementation fo setNotes inside of notes

---
 .../notebookList.datafactory.js               | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index 72ea37f9566..e1e0ac183fe 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -14,26 +14,26 @@
 'use strict';
 
 angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
+
   var notes = {
     root: {children: []},
     flatList: [],
-    setNotes: function() {}
-  };
+    
+    setNotes: function(notesList) {
+      // a flat list to boost searching
+      notes.flatList = angular.copy(notesList);
 
-  notes.setNotes = function(notesList) {
-    // a flat list to boost searching
-    notes.flatList = angular.copy(notesList);
+      // construct the folder-based tree
+      _.reduce(notesList, function(root, note) {
+        var noteName = note.name || note.id;
+        var nodes = noteName.match(/([^\\\][^\/]|\\\/)+/g);
 
-    // construct the folder-based tree
-    _.reduce(notesList, function(root, note) {
-      var noteName = note.name || note.id;
-      var nodes = noteName.match(/([^\\\][^\/]|\\\/)+/g);
+        // recursively add nodes
+        addNode(root, nodes, note.id);
 
-      // recursively add nodes
-      addNode(root, nodes, note.id);
-
-      return root;
-    }, notes.root);
+        return root;
+      }, notes.root);
+    }
   };
 
   var addNode = function(curDir, nodes, noteId) {

From 60166526488d8e725144811466fef9a05d40109c Mon Sep 17 00:00:00 2001
From: johnnyws <jzw.seraph@gmail.com>
Date: Wed, 27 Apr 2016 14:44:24 -0700
Subject: [PATCH 11/11] fix duplicate notes when create new note

---
 .../notebookListDataFactory/notebookList.datafactory.js        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index e1e0ac183fe..43fd061b6ee 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -18,12 +18,13 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
   var notes = {
     root: {children: []},
     flatList: [],
-    
+
     setNotes: function(notesList) {
       // a flat list to boost searching
       notes.flatList = angular.copy(notesList);
 
       // construct the folder-based tree
+      notes.root = {children: []};
       _.reduce(notesList, function(root, note) {
         var noteName = note.name || note.id;
         var nodes = noteName.match(/([^\\\][^\/]|\\\/)+/g);