Skip to content

Commit

Permalink
fix: optimize observable subscribtions
Browse files Browse the repository at this point in the history
  • Loading branch information
@petrot
petrot committed Apr 13, 2018
1 parent 836106d commit 1b6bd0b
Show file tree
Hide file tree
Showing 9 changed files with 177 additions and 90 deletions.
38 changes: 24 additions & 14 deletions ...p/pages/hike-edit/components/hike-edit-pois-external/hike-edit-pois-external.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ export class HikeEditPoisExternalComponent implements OnInit, OnDestroy {
ngOnInit() {
this._store
.select(this._hikeEditMapSelectors.getMapId)
.takeUntil(this._destroy$)
.filter(id => id !== '')
.takeUntil(this._destroy$)
.subscribe((mapId: string) => {
this._map = this._adminMapService.getMapById(mapId);
});
Expand All @@ -55,12 +55,13 @@ export class HikeEditPoisExternalComponent implements OnInit, OnDestroy {
this.pois$ = this._getSubdomainSelector(this.poiType.subdomain);

// Route info from the store (for disabling GET buttons)
this.routeInfoData$ = this._store.select(this._hikeEditRoutePlannerSelectors.getRoutePlanner);
this.routeInfoData$ = this._store
.select(this._hikeEditRoutePlannerSelectors.getRoutePlanner)
.takeUntil(this._destroy$);

// Update poi properties after poi list loaded
this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'loaded'))
.takeUntil(this._destroy$)
.filter(loaded => !!loaded)
.switchMap(() => Observable.combineLatest(
this._getSubdomainSelector(this.poiType.subdomain).take(1),
Expand All @@ -72,6 +73,7 @@ export class HikeEditPoisExternalComponent implements OnInit, OnDestroy {
})
.switchMap((pois: IExternalPoi[]) => this._poiEditorService.assignOnOffRoutePois(pois))
.switchMap((pois: IExternalPoi[]) => this._poiEditorService.handleElevation(pois))
.takeUntil(this._destroy$)
.subscribe((pois) => {
// Refresh poi list on the store
this._updateSubdomainPois(pois);
Expand All @@ -88,12 +90,12 @@ export class HikeEditPoisExternalComponent implements OnInit, OnDestroy {
// Update inGtrackDb properties after common poi list has been refreshed
this._store
.select(this._poiSelectors.getAllPois)
.takeUntil(this._destroy$)
.filter((gTrackPois: IGTrackPoi[]) => gTrackPois.length > 0)
.takeUntil(this._destroy$)
.subscribe((gTrackPois: IGTrackPoi[]) => {
this._getSubdomainSelector(this.poiType.subdomain)
.take(1)
.filter((externalPois: IExternalPoi[]) => externalPois.length > 0)
.take(1)
.subscribe((externalPois: IExternalPoi[]) => {
// TODO Refresh commonPoiList after poi save
this._setSubdomainPoisInGtrackDb(this._poiEditorService.handleGTrackPois(externalPois, gTrackPois));
Expand All @@ -105,24 +107,32 @@ export class HikeEditPoisExternalComponent implements OnInit, OnDestroy {
//

this.loading$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'loading'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'loading'))
.takeUntil(this._destroy$);

this.showOnrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'showOnrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'showOnrouteMarkers'))
.takeUntil(this._destroy$);

this.showOffrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'showOffrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector(this.poiType.subdomain, 'showOffrouteMarkers'))
.takeUntil(this._destroy$);

//
// Refresh markers
//

this.showOnrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOffrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOnrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});

this.showOffrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
}

ngOnDestroy() {
Expand Down
53 changes: 35 additions & 18 deletions src/app/pages/hike-edit/components/hike-edit-pois-gtrack/hike-edit-pois-gtrack.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,21 @@ export class HikeEditPoisGTrackComponent implements OnInit, OnDestroy {
// Get pois by id from geoSearch result
Observable
.combineLatest(
this._store.select(this._geoSearchSelectors.getGeoSearch('gTrackPois')),
this._store.select(this._poiSelectors.getPoiIds)
this._store
.select(this._geoSearchSelectors.getGeoSearch('gTrackPois'))
.takeUntil(this._destroy$),
this._store
.select(this._poiSelectors.getPoiIds)
.takeUntil(this._destroy$)
)
.takeUntil(this._destroy$)
.subscribe(([searchData, inStorePoiIds]: [IGeoSearchResponseItem, string[]]) => {
if (searchData) {
const poiIds = _.difference((<any>searchData).results, _.intersection((<any>searchData).results, inStorePoiIds))
const missingPoiIds = _.difference((<any>searchData).results, _.intersection((<any>searchData).results, inStorePoiIds))

// Get only the not-loaded pois
if (poiIds && poiIds.length > 0) {
this._store.dispatch(new commonPoiActions.LoadPois(poiIds));
if (missingPoiIds && missingPoiIds.length > 0) {
this._store.dispatch(new commonPoiActions.LoadPois(missingPoiIds));
}
}
});
Expand All @@ -77,14 +81,18 @@ export class HikeEditPoisGTrackComponent implements OnInit, OnDestroy {
// dirty flag will change on add/remove gTrackPoi to/from the hike
this.pois$ = Observable
.combineLatest(
this._store.select(this._geoSearchSelectors.getGeoSearchResults<(IPoi)>('gTrackPois', this._poiSelectors.getAllPois)),
this._store.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'dirty'))
this._store
.select(this._geoSearchSelectors.getGeoSearchResults<(IPoi)>('gTrackPois', this._poiSelectors.getAllPois))
.takeUntil(this._destroy$),
this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'dirty'))
.takeUntil(this._destroy$)
)
.debounceTime(150)
.takeUntil(this._destroy$)
.filter(([pois, dirty]: [IGTrackPoi[], boolean]) => typeof pois !== 'undefined')
.switchMap(([pois, dirty]: [IGTrackPoi[], boolean]) => this._store
.select(this._hikeEditRoutePlannerSelectors.getPath)
.takeUntil(this._destroy$)
.switchMap((path: any) => {
return Observable.of([this._poiEditorService.organizePois(_.cloneDeep(pois), path), dirty])
})
Expand All @@ -98,7 +106,8 @@ export class HikeEditPoisGTrackComponent implements OnInit, OnDestroy {
}

return Observable.of(this._poiEditorService.handleHikeInclusion(pois));
});
})
.takeUntil(this._destroy$);

this.pois$
.debounceTime(150)
Expand All @@ -116,24 +125,32 @@ export class HikeEditPoisGTrackComponent implements OnInit, OnDestroy {
//

this.searchContext$ = this._store
.select(this._geoSearchSelectors.getGeoSearchContext('gTrackPois'));
.select(this._geoSearchSelectors.getGeoSearchContext('gTrackPois'))
.takeUntil(this._destroy$);

this.showOnrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'showOnrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'showOnrouteMarkers'))
.takeUntil(this._destroy$);

this.showOffrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'showOffrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('gTrack', 'showOffrouteMarkers'))
.takeUntil(this._destroy$);

//
// Refresh markers
//

this.showOnrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOffrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOnrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});

this.showOffrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
}

ngOnDestroy() {
Expand Down
43 changes: 25 additions & 18 deletions src/app/pages/hike-edit/components/hike-edit-pois-hike/hike-edit-pois-hike.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export class HikeEditPoisHikeComponent implements OnInit, OnDestroy {
private _store: Store<State>,
private _adminMapService: AdminMapService,
private _poiEditorService: PoiEditorService,

private _hikeEditMapSelectors: HikeEditMapSelectors,
private _hikeEditPoiSelectors: HikeEditPoiSelectors,
private _hikeEditGeneralInfoSelectors: HikeEditGeneralInfoSelectors,
Expand All @@ -48,46 +47,47 @@ export class HikeEditPoisHikeComponent implements OnInit, OnDestroy {
ngOnInit() {
this._store
.select(this._hikeEditMapSelectors.getMapId)
.takeUntil(this._destroy$)
.filter(id => id !== '')
.takeUntil(this._destroy$)
.subscribe((mapId: string) => {
this._map = this._adminMapService.getMapById(mapId);
});

// Get pois by id
Observable
.combineLatest(
this._store.select(this._hikeEditGeneralInfoSelectors.getPois),
this._store.select(this._poiSelectors.getPoiIds)
this._store.select(this._hikeEditGeneralInfoSelectors.getPois).takeUntil(this._destroy$),
this._store.select(this._poiSelectors.getPoiIds).takeUntil(this._destroy$)
)
.debounceTime(150)
.takeUntil(this._destroy$)
.subscribe(([inHikePoiIds, inStorePoiIds]: [string[], string[]]) => {
const poiIds = _.difference(inHikePoiIds, _.intersection(inHikePoiIds, inStorePoiIds))
const missingPoiIds = _.difference(inHikePoiIds, _.intersection(inHikePoiIds, inStorePoiIds))

// Get only the not-loaded pois
if (poiIds && poiIds.length > 0) {
this._store.dispatch(new commonPoiActions.LoadPois(poiIds));
if (missingPoiIds && missingPoiIds.length > 0) {
this._store.dispatch(new commonPoiActions.LoadPois(missingPoiIds));
}
});

// Poi list
this.pois$ = this._store
.select(this._hikeEditGeneralInfoSelectors.getHikePois<(IPoi)>(this._poiSelectors.getAllPois))
.takeUntil(this._destroy$)
.filter((pois: IPoi[]) => typeof pois !== 'undefined')
.takeUntil(this._destroy$)
.switchMap((pois: IPoi[]) => {
return this._store
.select(this._hikeEditRoutePlannerSelectors.getPath)
.take(1)
.filter((path: any) => path && path.geometry.coordinates.length > 0)
.takeUntil(this._destroy$)
.map((path: any) => {
return this._poiEditorService.organizePois(_.cloneDeep(pois), path);
});
});

this.pois$
.takeUntil(this._destroy$)
.debounceTime(150)
.takeUntil(this._destroy$)
.subscribe((pois: Poi[]) => {
// Refresh markers
this._poiEditorService.refreshPoiMarkers(this._map);
Expand All @@ -98,21 +98,28 @@ export class HikeEditPoisHikeComponent implements OnInit, OnDestroy {
//

this.showOnrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('hike', 'showOnrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('hike', 'showOnrouteMarkers'))
.takeUntil(this._destroy$);

this.showOffrouteMarkers$ = this._store
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('hike', 'showOffrouteMarkers'));
.select(this._hikeEditPoiSelectors.getHikeEditPoiContextPropertySelector('hike', 'showOffrouteMarkers'))
.takeUntil(this._destroy$);

//
// Refresh markers
//

this.showOnrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOffrouteMarkers$.takeUntil(this._destroy$).subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
this.showOnrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});

this.showOffrouteMarkers$
.takeUntil(this._destroy$)
.subscribe(() => {
this._poiEditorService.refreshPoiMarkers(this._map);
});
}

ngOnDestroy() {
Expand Down
40 changes: 26 additions & 14 deletions ...p/pages/hike-edit/components/hike-edit-route-planner/hike-edit-route-planner.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,38 @@ export class HikeEditRoutePlannerComponent implements OnInit, OnDestroy {
this.routeInfoData$ = this._store.select(this._hikeEditRoutePlannerSelectors.getRoutePlanner);

this._store.select(this._hikeEditMapSelectors.getMapId)
.takeUntil(this._destroy$)
.filter(id => id !== '')
.takeUntil(this._destroy$)
.subscribe((mapId: string) => {
this._map = this._adminMapService.getMapById(mapId);
});

// Show toaster when the route has been saved
this._store.select(this._hikeEditGeneralInfoSelectors.getRouteId)
.takeUntil(this._destroy$)
.switchMap((routeId: string) => this._store.select(this._routeSelectors.getRouteContext(routeId)))
.switchMap((routeId: string) => {
return this._store
.select(this._routeSelectors.getRouteContext(routeId))
.takeUntil(this._destroy$);
})
.filter(routeContext => !!(routeContext && routeContext.saved))
.takeUntil(this._destroy$)
.subscribe((routeContext) => {
this._toasterService.pop('success', 'Success!', 'Route saved!');
});

// Handling route load
this._store.select(this._hikeEditGeneralInfoSelectors.getRouteId)
.takeUntil(this._destroy$)
.switchMap((routeId: string) => this._store.select(this._routeSelectors.getRouteContext(routeId)))
.switchMap((routeId: string) => {
return this._store
.select(this._routeSelectors.getRouteContext(routeId))
.takeUntil(this._destroy$);
})
.filter(routeContext => !!(routeContext && routeContext.loaded))
.switchMap((routeContext) => this._store.select(this._routeSelectors.getRoute((<IRouteContextState>routeContext).id)))
.switchMap((routeContext) => {
return this._store
.select(this._routeSelectors.getRoute((<IRouteContextState>routeContext).id))
.takeUntil(this._destroy$);
})
.take(1)
.subscribe((route) => {
setTimeout(() => {
Expand Down Expand Up @@ -98,16 +109,17 @@ export class HikeEditRoutePlannerComponent implements OnInit, OnDestroy {

private _loadRoute(routeData: Route) {
if (this._map && this._waypointMarkerService) {
this._waypointMarkerService.reset();

const coords: L.LatLng[] = [];
for (let feature of routeData.route.features) {
let latlng = L.latLng(
feature.geometry.coordinates[1],
feature.geometry.coordinates[0]
);

this._waypointMarkerService.addWaypoint(latlng);
if (feature.geometry.type === 'Point') {
coords.push(L.latLng(
feature.geometry.coordinates[1],
feature.geometry.coordinates[0]
));
}
}

this._waypointMarkerService.addWaypointList(coords);
}
}
}
1 change: 0 additions & 1 deletion ...e-edit/components/modals/hike-edit-gtrack-poi-info/hike-edit-gtrack-poi-info.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export class HikeEditGTrackPoiInfoComponent implements OnInit, OnDestroy {
.take(1)
.subscribe((poi: Poi) => {
this._gTrackPoi = _.cloneDeep(poi);
console.log('this._gTrackPoi', this._gTrackPoi);
this._initFormSubscriptions();
});

Expand Down
Loading

0 comments on commit 1b6bd0b

Please sign in to comment.