commit a160eefa3142b4e645ed1fe62c2d349dbc8c1464
author Matteo Scandolo <matteo.scandolo@gmail.com> Mon Mar 06 17:21:26 2017 -0800
committer Matteo Scandolo <matteo.scandolo@gmail.com> Mon Mar 06 17:21:26 2017 -0800
tree 18524e5d690e2d5aa3fd0123f5f5fa1069e6ccaa
parent 0c61c9b0e9024a8785010420c50b65f448a64814

Unsubscribing from observable on CoarseGraph Component destroy

Change-Id: I99c59e9c8355edccaca108534d14a1e0901bcc45

src/app/service-graph/services/graph.store.ts

diff --git a/src/app/service-graph/services/graph.store.ts b/src/app/service-graph/services/graph.store.ts
index 9636bb2..821da41 100644
--- a/src/app/service-graph/services/graph.store.ts
+++ b/src/app/service-graph/services/graph.store.ts
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {Observable, BehaviorSubject} from 'rxjs';
+import {Observable, BehaviorSubject, Subscription} from 'rxjs';
 import {IXosModelStoreService} from '../../datasources/stores/model.store';
 import {
   IXosServiceGraph, IXosServiceModel, IXosTenantModel, IXosCoarseGraphData,
@@ -9,6 +9,7 @@
 export interface IXosServiceGraphStore {
   get(): Observable<IXosServiceGraph>;
   getCoarse(): Observable<IXosServiceGraph>;
+  dispose(): void;
 }
 
 export class XosServiceGraphStore implements IXosServiceGraphStore {
@@ -36,8 +37,8 @@
   private handleData;
 
   // datastore
-  private ServiceObservable: Observable<any>;
-  private TenantObservable: Observable<any>;
+  private ServiceSubscription: Subscription;
+  private TenantSubscription: Subscription;
 
   constructor (
     private $log: ng.ILogService,
@@ -50,27 +51,25 @@
     // we want to have a quiet period of 500ms from the last event before doing anything
     this.handleData = this.XosDebouncer.debounce(this._handleData, 500, this, false);
 
-    this.ServiceObservable = this.XosModelStore.query('Service', '/core/services');
-    this.TenantObservable = this.XosModelStore.query('Tenant', '/core/tenants');
 
     // observe models and populate graphData
-    this.ServiceObservable
+    this.ServiceSubscription = this.XosModelStore.query('Service', '/core/services')
       .subscribe(
         (res) => {
           this.combineData(res, 'services');
         },
         (err) => {
-          this.$log.error(err);
+          this.$log.error(`[XosServiceGraphStore] graphData Observable: `, err);
         }
       );
 
-    this.TenantObservable
+    this.TenantSubscription = this.XosModelStore.query('Tenant', '/core/tenants')
       .subscribe(
         (res) => {
           this.combineData(res, 'tenants');
         },
         (err) => {
-          this.$log.error(err);
+          this.$log.error(`[XosServiceGraphStore] graphData Observable: `, err);
         }
       );
 
@@ -91,6 +90,12 @@
       );
   }
 
+  public dispose() {
+    // cancel subscriptions from observables
+    this.ServiceSubscription.unsubscribe();
+    this.TenantSubscription.unsubscribe();
+  }
+
   public get() {
     return this.d3FineGrainedGraph.asObservable();
   }
@@ -118,20 +123,19 @@
     });
   }
 
-  private getNodeIndexById(id: number, nodes: IXosServiceModel[]) {
+  private getCoarseNodeIndexById(id: number, nodes: IXosServiceModel[]) {
     return _.findIndex(nodes, {id: id});
   }
 
   private graphDataToCoarseGraph(data: IXosCoarseGraphData) {
-
     // TODO find how to bind source/target by node ID and not by position in array (ask Simon?)
     const links: IXosServiceGraphLink[] = _.chain(data.tenants)
       .filter((t: IXosTenantModel) => t.kind === 'coarse')
       .map((t: IXosTenantModel) => {
         return {
           id: t.id,
-          source: this.getNodeIndexById(t.provider_service_id, data.services),
-          target: this.getNodeIndexById(t.subscriber_service_id, data.services),
+          source: this.getCoarseNodeIndexById(t.provider_service_id, data.services),
+          target: this.getCoarseNodeIndexById(t.subscriber_service_id, data.services),
           model: t
         };
       })