WIP: Improved performance

frontend/app/components/wp-table/wp-virtual-scroll.directive.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {wpDirectivesModule} from "../../angular-modules";
-import {scopedObservable} from "../../helpers/angular-rx-utils";
+import {scopedObservable, runInScopeDigest} from "../../helpers/angular-rx-utils";
 import IScope = angular.IScope;
 import IRootElementService = angular.IRootElementService;
 import IAnimateProvider = angular.IAnimateProvider;
@@ -113,7 +113,6 @@ class RowDisplay {
         this.viewport = vp;
         this.viewportChanged();
       });
-
   }
 
   private isRowInViewport() {
@@ -121,9 +120,9 @@ class RowDisplay {
   }
 
   private isRowInViewportOffset() {
-    return true;
-    // const offset = this.workPackageTableVirtualScrollService.viewportOffset;
-    // return this.index >= (this.viewport[0] - offset) && this.index <= (this.viewport[1] + offset);
+    // return true;
+    const offset = this.workPackageTableVirtualScrollService.viewportOffset;
+    return this.index >= (this.viewport[0] - offset) && this.index <= (this.viewport[1] + offset);
   }
 
   private viewportChanged() {
@@ -235,6 +234,9 @@ class WorkPackageTableVirtualScrollService {
 
   public viewportChanges: Rx.Subject<[number, number]> = new Rx.ReplaySubject<[number, number]>(1);
 
+  constructor(private $rootScope: angular.IRootScopeService) {
+  }
+  
   setTableElement(element: IRootElementService) {
     this.element = element;
   }
@@ -246,7 +248,9 @@ class WorkPackageTableVirtualScrollService {
     const rowsInViewport = Math.round(height / this.rowHeight) + 1;
 
     if (rowsAboveCount !== this.lastRowsAboveCount || rowsInViewport !== this.lastRowsInViewport) {
+      runInScopeDigest(this.$rootScope, () => {
         this.viewportChanges.onNext([rowsAboveCount, rowsAboveCount + rowsInViewport]);
+      });
     }
 
     this.lastRowsAboveCount = rowsAboveCount;

frontend/app/helpers/angular-rx-utils.ts

@@ -1,9 +1,8 @@
-
 import Observer = Rx.Observer;
 import Observable = Rx.Observable;
 import IScope = angular.IScope;
 
-function runInScopeDigest(scope: IScope, fn: () => void) {
+export function runInScopeDigest(scope: IScope, fn: () => void) {
   if (scope.$root.$$phase !== "$apply" && scope.$root.$$phase !== "$digest") {
     scope.$apply(fn);
   } else {