ZEPPELIN-3072: Zeppelin UI becomes slow/unresponsive if there are too…

… many notebooks

Zeppelin UI becomes slow/unresponsive if there are too many notebooks

Have attached a notebook directory in [JIRA](https://issues.apache.org/jira/secure/attachment/12898650/notebook.zip) with 500+ notebooks, now with these notebooks, every time user goes to homepage Zeppelin UI becomes unresponsive for few seconds.

[Bug Fix | Improvement]

* [x] - Fix search box
* [x] - Order of notebook

* [ZEPPELIN-3072](https://issues.apache.org/jira/browse/ZEPPELIN-3072)

 Create 500+ notebook, or import it from [JIRA](https://issues.apache.org/jira/secure/attachment/12898650/notebook.zip), now observe UI it becomes slow/laggy while homepage is rendering.

Before:
![before](https://user-images.githubusercontent.com/674497/33070354-c36acdfa-cedd-11e7-81f9-ff0b526622f3.gif)

After:
![after](https://user-images.githubusercontent.com/674497/33070353-c3317988-cedd-11e7-9431-fcf596928c3b.gif)

* Does the licenses files need update? N/A
* Is there breaking changes for older versions? N/A
* Does this needs documentation? N/A

Author: prabhjyotsingh <[email protected]>

Closes apache#2683 from prabhjyotsingh/ZEPPELIN-3072 and squashes the following commits:

06b8ef8 [prabhjyotsingh] add license file
483a3ff [prabhjyotsingh] navbar dropdown bug
eb506ba [prabhjyotsingh] fix test
00ec295 [prabhjyotsingh] fix sort and serch
b4cbba8 [prabhjyotsingh] ZEPPELIN-3072: Zeppelin UI becomes slow/unresponsive if there are too many notebooks

Change-Id: Ibc157312b726b9704cab088192a39e942d8da43d

LICENSE

@@ -235,6 +235,7 @@ The text of each license is also included at licenses/LICENSE-[project]-[version
     (The MIT License) Simple line icons v1.0.0 (http://thesabbir.github.io/simple-line-icons/) - https://github.com/thesabbir/simple-line-icons/tree/1.0.0
     (The MIT License) jekyll-bootstrap 0.3.0 (https://github.com/plusjade/jekyll-bootstrap) - https://github.com/plusjade/jekyll-bootstrap
     (The MIT License) jekyll 1.3.0 (http://jekyllrb.com/) - https://github.com/jekyll/jekyll/blob/v1.3.0/LICENSE
+    (The MIT License) ngInfiniteScroll 1.3.4 (https://github.com/sroze/ngInfiniteScroll) - https://github.com/sroze/ngInfiniteScroll/blob/master/LICENSE
 
 ========================================================================
 MIT-style licenses

licenses/LICENSE-ngInfiniteScroll-1.3.4

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Michelle Tilley
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

zeppelin-web/bower.json

@@ -33,7 +33,8 @@
     "select2": "^4.0.3",
     "MathJax": "2.7.0",
     "ngclipboard": "^1.1.1",
-    "jsdiff": "3.3.0"
+    "jsdiff": "3.3.0",
+    "ngInfiniteScroll": "^1.3.4"
   },
   "devDependencies": {
     "angular-mocks": "1.5.7"

zeppelin-web/karma.conf.js

@@ -87,6 +87,7 @@ module.exports = function(config) {
       'bower_components/clipboard/dist/clipboard.js',
       'bower_components/ngclipboard/dist/ngclipboard.js',
       'bower_components/jsdiff/diff.js',
+      'bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
 

zeppelin-web/src/app/app.js

@@ -44,6 +44,7 @@ const requiredModules = [
   'ngResource',
   'ngclipboard',
   'angularViewportWatch',
+  'infinite-scroll',
   'ui.grid',
   'ui.grid.exporter',
   'ui.grid.edit', 'ui.grid.rowEdit',

zeppelin-web/src/app/home/home.controller.js

@@ -24,6 +24,7 @@ function HomeCtrl ($scope, noteListFactory, websocketMsgSrv, $rootScope, arrayOr
   vm.websocketMsgSrv = websocketMsgSrv
   vm.arrayOrderingSrv = arrayOrderingSrv
   vm.noteActionService = noteActionService
+  vm.numberOfNotesDisplayed = window.innerHeight / 20
 
   vm.notebookHome = false
   vm.noteCustomHome = true
@@ -85,6 +86,10 @@ function HomeCtrl ($scope, noteListFactory, websocketMsgSrv, $rootScope, arrayOr
     }
   })
 
+  $scope.loadMoreNotes = function () {
+    vm.numberOfNotesDisplayed += 10
+  }
+
   $scope.renameNote = function (nodeId, nodePath) {
     vm.noteActionService.renameNote(nodeId, nodePath)
   }

zeppelin-web/src/app/home/home.html

@@ -40,16 +40,16 @@ <h5 ng-controller="NoteCreateCtrl as noteCreateCtrl"><a href="" data-toggle="mod
               <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/note-name-filter/note-name-filter.html'"></li>
-              <li ng-repeat="note in home.notes.list | filter:query.q | orderBy:node:false:home.arrayOrderingSrv.noteComparator track by $index">
+              <li ng-repeat="note in home.notes.list | filter:query.q track by $index">
                 <i style="font-size: 10px;" class="icon-doc"></i>
                 <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{noteName(note)}}</a>
               </li>
-              <div ng-if="!query.q || query.q === ''">
-                <li ng-repeat="node in home.notes.root.children | orderBy:node:false:home.arrayOrderingSrv.noteComparator track by $index"
+              <div ng-if="!query.q || query.q === ''" infinite-scroll="loadMoreNotes()">
+                <li ng-repeat="node in home.notes.root.children | limitTo:home.numberOfNotesDisplayed track by $index"
                     ng-include src="'app/home/notebook-template.html'" ng-class="note_folder_renderer"></li>
               </div>
-              <div ng-if="query.q">
-                <li ng-repeat="node in home.notes.flatList| filter:query.q | orderBy:home.arrayOrderingSrv.noteFlatListOrdering track by $index"
+              <div ng-if="query.q" infinite-scroll="loadMoreNotes()">
+                <li ng-repeat="node in home.notes.flatList | filter:query.q | orderBy:home.arrayOrderingSrv.noteFlatListOrdering | limitTo:home.numberOfNotesDisplayed track by $index"
                     ng-include src="'app/home/notebook-template.html'" ng-class="note_folder_renderer"></li>
              </div>
             </ul>

zeppelin-web/src/app/home/notebook.html

@@ -27,12 +27,12 @@ <h5 ng-controller="NoteCreateCtrl as noteCreateCtrl"><a href="" data-toggle="mod
            <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/note-name-filter/note-name-filter.html'"></li>
-         <div ng-if="!query.q || query.q === ''">
-           <li ng-repeat="node in home.notes.root.children | orderBy:node:false:home.arrayOrderingSrv.noteComparator track by $index"
+         <div ng-if="!query.q || query.q === ''" infinite-scroll="loadMoreNotes()">
+           <li ng-repeat="node in home.notes.root.children | limitTo:home.numberOfNotesDisplayed track by $index"
                ng-include src="'app/home/notebook-template.html'" ng-class="note_folder_renderer"></li>
          </div>
-         <div ng-if="query.q">
-           <li ng-repeat="node in home.notes.flatList | filter:query.q | orderBy:home.arrayOrderingSrv.noteFlatListOrdering track by $index"
+         <div ng-if="query.q" infinite-scroll="loadMoreNotes()">
+           <li ng-repeat="node in home.notes.flatList | filter:query.q | orderBy:home.arrayOrderingSrv.noteFlatListOrdering | limitTo:home.numberOfNotesDisplayed track by $index"
                ng-include src="'app/home/notebook-template.html'" ng-class="note_folder_renderer"></li>
          </div>
        </ul>

zeppelin-web/src/components/array-ordering/array-ordering.service.js

@@ -35,8 +35,8 @@ function ArrayOrderingService(TRASH_FOLDER_ID) {
   }
 
   this.noteComparator = function (v1, v2) {
-    let note1 = v1.value
-    let note2 = v2.value
+    let note1 = v1.value || v1
+    let note2 = v2.value || v2
 
     if (note1.id === TRASH_FOLDER_ID) {
       return 1

zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js

@@ -21,11 +21,11 @@ function expandCollapseDirective() {
     restrict: 'EA',
     link: function (scope, element, attrs) {
       angular.element(element).click(function (event) {
-        if (angular.element(element).find('.expandable:visible').length > 1) {
-          angular.element(element).find('.expandable:visible').slideUp('slow')
+        if (angular.element(element).next('.expandable:visible').length > 1) {
+          angular.element(element).next('.expandable:visible').slideUp('slow')
           angular.element(element).find('i.fa-folder-open').toggleClass('fa-folder fa-folder-open')
         } else {
-          angular.element(element).find('.expandable').first().slideToggle('200', function () {
+          angular.element(element).next('.expandable').first().slideToggle('200', function () {
             // do not toggle trash folder
             if (angular.element(element).find('.fa-trash-o').length === 0) {
               angular.element(element).find('i').first().toggleClass('fa-folder fa-folder-open')

zeppelin-web/src/components/navbar/navbar-note-list-elem.html

@@ -38,13 +38,13 @@
           </div>
         </a>
       </div>
-      <div class="expandable" style="color: black;">
-        <ul>
-          <li ng-repeat="node in node.children | orderBy:node:false:navbar.arrayOrderingSrv.noteComparator track by $index"
-              ng-class="{'active' : navbar.isActive(node.id)}"
-              ng-include="'components/navbar/navbar-note-list-elem.html'">
-          </li>
-        </ul>
-      </div>
   </expand-collapse>
+  <div class="expandable" style="color: black;">
+    <ul>
+      <li ng-repeat="node in node.children | orderBy:node:false:navbar.arrayOrderingSrv.noteComparator track by $index"
+          ng-class="{'active' : navbar.isActive(node.id)}"
+          ng-include="'components/navbar/navbar-note-list-elem.html'">
+      </li>
+    </ul>
+  </div>
 </li>

zeppelin-web/src/components/navbar/navbar.controller.js

@@ -30,6 +30,7 @@ function NavCtrl ($scope, $rootScope, $http, $routeParams, $location,
   vm.showLoginWindow = showLoginWindow
   vm.TRASH_FOLDER_ID = TRASH_FOLDER_ID
   vm.isFilterNote = isFilterNote
+  vm.numberOfNotesDisplayed = 10
 
   $scope.query = {q: ''}
 
@@ -153,6 +154,10 @@ function NavCtrl ($scope, $rootScope, $http, $routeParams, $location,
     })
   }
 
+  $scope.loadMoreNotes = function () {
+    vm.numberOfNotesDisplayed += 10
+  }
+
   $scope.calculateTooltipPlacement = function (note) {
     if (note !== undefined && note.name !== undefined) {
       let length = note.name.length

zeppelin-web/src/components/navbar/navbar.html

@@ -46,13 +46,13 @@
             <li class="divider hidden-xs"></li>
             <div id="notebook-list" class="scrollbar-container" ng-if="isDrawNavbarNoteList">
               <li class="filter-names" ng-include="'components/note-name-filter/note-name-filter.html'"></li>
-              <div ng-if="!query.q || query.q === ''">
-              <li ng-repeat="node in navbar.notes.root.children | orderBy:node:false:navbar.arrayOrderingSrv.noteComparator track by node.id"
+              <div ng-if="!query.q || query.q === ''" infinite-scroll="loadMoreNotes()">
+              <li ng-repeat="node in navbar.notes.root.children | limitTo:navbar.numberOfNotesDisplayed track by node.id"
                   ng-class="{'active' : navbar.isActive(node.id)}" ng-include="'components/navbar/navbar-note-list-elem.html'">
               </li>
             </div>
-            <div ng-if="query.q">
-              <li ng-repeat="node in navbar.notes.flatList | filter : query.q | orderBy:navbar.arrayOrderingSrv.noteFlatListOrdering track by node.id"
+            <div ng-if="query.q" infinite-scroll="myPagingFunction()">
+              <li ng-repeat="node in navbar.notes.flatList | filter : query.q | orderBy:navbar.arrayOrderingSrv.noteFlatListOrdering | limitTo:navbar.numberOfNotesDisplayed track by node.id"
                   ng-class="{'active' : navbar.isActive(node.id)}" ng-include="'components/navbar/navbar-note-list-elem.html'">
               </li>
             </div>

zeppelin-web/src/components/note-list/note-list.factory.js

@@ -14,7 +14,7 @@
 
 angular.module('zeppelinWebApp').factory('noteListFactory', NoteListFactory)
 
-function NoteListFactory(TRASH_FOLDER_ID) {
+function NoteListFactory(arrayOrderingSrv, TRASH_FOLDER_ID) {
   'ngInject'
 
   const notes = {
@@ -42,6 +42,7 @@ function NoteListFactory(TRASH_FOLDER_ID) {
 
         return root
       }, notes.root)
+      notes.root.children.sort(arrayOrderingSrv.noteComparator)
     }
   }
 

zeppelin-web/src/components/note-list/note-list.factory.test.js

@@ -38,38 +38,38 @@ describe('Factory: NoteList', function () {
 
     let folderList = noteList.root.children
     expect(folderList.length).toBe(5)
-    expect(folderList[0].name).toBe('A')
-    expect(folderList[0].id).toBe('000001')
-    expect(folderList[1].name).toBe('B')
+    expect(folderList[3].name).toBe('A')
+    expect(folderList[3].id).toBe('000001')
+    expect(folderList[4].name).toBe('B')
     expect(folderList[2].name).toBe('000003')
-    expect(folderList[3].name).toBe('C')
-    expect(folderList[3].id).toBe('C')
-    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).toBe('C/CB')
-    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()
-    expect(folderList[4].name).toBe('D')
-    expect(folderList[4].id).toBe('D')
-    expect(folderList[4].children.length).toBe(1)
-    expect(folderList[4].children[0].name).toBe('D[A')
-    expect(folderList[4].children[0].id).toBe('D/D[A')
-    expect(folderList[4].children[0].children[0].name).toBe('DA]B')
-    expect(folderList[4].children[0].children[0].id).toBe('000009')
-    expect(folderList[4].children[0].children[0].children).toBeUndefined()
+    expect(folderList[0].name).toBe('C')
+    expect(folderList[0].id).toBe('C')
+    expect(folderList[0].children.length).toBe(3)
+    expect(folderList[0].children[0].name).toBe('CA')
+    expect(folderList[0].children[0].id).toBe('000004')
+    expect(folderList[0].children[0].children).toBeUndefined()
+    expect(folderList[0].children[1].name).toBe('CB')
+    expect(folderList[0].children[1].id).toBe('000005')
+    expect(folderList[0].children[1].children).toBeUndefined()
+    expect(folderList[0].children[2].name).toBe('CB')
+    expect(folderList[0].children[2].id).toBe('C/CB')
+    expect(folderList[0].children[2].children.length).toBe(3)
+    expect(folderList[0].children[2].children[0].name).toBe('CBA')
+    expect(folderList[0].children[2].children[0].id).toBe('000006')
+    expect(folderList[0].children[2].children[0].children).toBeUndefined()
+    expect(folderList[0].children[2].children[1].name).toBe('CBA')
+    expect(folderList[0].children[2].children[1].id).toBe('000007')
+    expect(folderList[0].children[2].children[1].children).toBeUndefined()
+    expect(folderList[0].children[2].children[2].name).toBe('CBB')
+    expect(folderList[0].children[2].children[2].id).toBe('000008')
+    expect(folderList[0].children[2].children[2].children).toBeUndefined()
+    expect(folderList[1].name).toBe('D')
+    expect(folderList[1].id).toBe('D')
+    expect(folderList[1].children.length).toBe(1)
+    expect(folderList[1].children[0].name).toBe('D[A')
+    expect(folderList[1].children[0].id).toBe('D/D[A')
+    expect(folderList[1].children[0].children[0].name).toBe('DA]B')
+    expect(folderList[1].children[0].children[0].id).toBe('000009')
+    expect(folderList[1].children[0].children[0].children).toBeUndefined()
   })
 })

zeppelin-web/src/index.html

@@ -166,6 +166,7 @@
     <script src="bower_components/clipboard/dist/clipboard.js"></script>
     <script src="bower_components/ngclipboard/dist/ngclipboard.js"></script>
     <script src="bower_components/jsdiff/diff.js"></script>
+    <script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
   </body>