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

Change-Id: I50f3776f698da1997f08711bb134fa709815818d

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

@@ -44,12 +44,12 @@ limitations under the License.
                 <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 | orderBy:node:false:home.arrayOrderingSrv.noteComparator 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 @@ limitations under the License.
            <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 | orderBy:node:false:home.arrayOrderingSrv.noteComparator 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/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 @@ limitations under the License.
             <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 | orderBy:node:false:navbar.arrayOrderingSrv.noteComparator 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/index.html

@@ -166,6 +166,7 @@ limitations under the License.
     <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>