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) {
-      this.viewportChanges.onNext([rowsAboveCount, rowsAboveCount + rowsInViewport]);
+      runInScopeDigest(this.$rootScope, () => {
+        this.viewportChanges.onNext([rowsAboveCount, rowsAboveCount + rowsInViewport]);
+      });
     }
 
     this.lastRowsAboveCount = rowsAboveCount;

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

@@ -1,33 +1,32 @@
-
 import Observer = Rx.Observer;
 import Observable = Rx.Observable;
 import IScope = angular.IScope;
 
-function runInScopeDigest(scope: IScope, fn: () => void) {
-    if (scope.$root.$$phase !== "$apply" && scope.$root.$$phase !== "$digest") {
-        scope.$apply(fn);
-    } else {
-        fn();
-    }
+export function runInScopeDigest(scope: IScope, fn: () => void) {
+  if (scope.$root.$$phase !== "$apply" && scope.$root.$$phase !== "$digest") {
+    scope.$apply(fn);
+  } else {
+    fn();
+  }
 }
 
 export function scopedObservable<T>(scope: IScope, observable: Observable<T>): Observable<T> {
-    return Rx.Observable.create((observer: Observer<T>) => {
-        var disposable = observable.subscribe(
-            value => {
-                runInScopeDigest(scope, () => observer.onNext(value));
-            },
-            exception => {
-                runInScopeDigest(scope, () => observer.onError(exception));
-            },
-            () => {
-                runInScopeDigest(scope, () => observer.onCompleted());
-            }
-        );
+  return Rx.Observable.create((observer: Observer<T>) => {
+    var disposable = observable.subscribe(
+      value => {
+        runInScopeDigest(scope, () => observer.onNext(value));
+      },
+      exception => {
+        runInScopeDigest(scope, () => observer.onError(exception));
+      },
+      () => {
+        runInScopeDigest(scope, () => observer.onCompleted());
+      }
+    );
 
-        scope.$on("$destroy", () => {
-            return disposable.dispose();
-        });
+    scope.$on("$destroy", () => {
+      return disposable.dispose();
     });
+  });
 }