Merge pull request #1095 from azavea/feature/cpc/better-indicator-fix

Use API city service data for chart city parameter

src/angular/planit/src/app/assessment/risk-popover/risk-popover.component.html

@@ -37,6 +37,6 @@ <h3 class="popover-title">Climate data related to <strong>{{ risk.weather_event.
   <app-indicator-chart
     *ngIf="selectedIndicator"
     [indicator]="selectedIndicator"
-    [city]="city">
+    [apiCity]="apiCity">
   </app-indicator-chart>
 </app-modal-template>

src/angular/planit/src/app/assessment/risk-popover/risk-popover.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { PopoverDirective } from 'ngx-bootstrap/popover';
 
 import {
+  City as ApiCity,
   Indicator,
   IndicatorService
 } from 'climate-change-components';
@@ -12,6 +13,7 @@ import { ModalTemplateComponent } from '../../shared/modal-template/modal-templa
 import { Location } from '../../shared/models/location.model';
 import { Risk } from '../../shared/models/risk.model';
 
+import { CityService } from '../../core/services/city.service';
 import { UserService } from '../../core/services/user.service';
 
 @Component({
@@ -23,7 +25,7 @@ export class RiskPopoverComponent implements OnInit {
 
   public indicators: Indicator[];
   public selectedIndicator: Indicator;
-  public city: Location;
+  public apiCity: ApiCity;
 
   @ViewChild('indicatorModal')
   private indicatorModal: ModalTemplateComponent;
@@ -32,13 +34,19 @@ export class RiskPopoverComponent implements OnInit {
   private popoverElement: PopoverDirective;
 
   constructor (private indicatorService: IndicatorService,
+               private cityService: CityService,
                private userService: UserService) {}
 
   ngOnInit() {
     this.updateRiskIndicators();
-    this.userService.current().subscribe(user => {
-      this.city = user.primary_organization.location;
-    });
+    this.userService.current()
+      .switchMap((user) => {
+        const id = user.primary_organization.location.properties.api_city_id;
+        return this.cityService.get(id);
+      })
+      .subscribe((apiCity) => {
+        this.apiCity = apiCity;
+      });
   }
 
   public openIndicatorModal(indicator: Indicator) {

src/angular/planit/src/app/core/constants/cache.ts

@@ -1,5 +1,5 @@
 // Naming convention: MODULE_SERVICE_METHOD for clarity and uniqueness
 export const CORE_USERSERVICE_CURRENT = 'core.userservice.current';
-export const CORE_CITYSERVICE_CURRENT = 'core.cityservice.current';
+export const CORE_CITYSERVICE_GET = 'core.cityservice.get';
 export const CORE_ACTIONTYPESERVICE_LIST = 'core.actiontypeservice.list';
 export const CORE_WEATHEREVENTSERVICE_LIST = 'core.weathereventservice.list';

src/angular/planit/src/app/core/services/auth.service.ts

@@ -6,7 +6,7 @@ import { Observable, Subject } from 'rxjs/Rx';
 
 import { APICacheService } from 'climate-change-components';
 import { environment } from '../../../environments/environment';
-import { CORE_CITYSERVICE_CURRENT, CORE_USERSERVICE_CURRENT } from '../constants/cache';
+import { CORE_USERSERVICE_CURRENT } from '../constants/cache';
 
 import { User } from '../../shared/';
 

src/angular/planit/src/app/core/services/city.service.ts

@@ -7,7 +7,7 @@ import { environment } from '../../../environments/environment';
 import { City as ApiCity } from 'climate-change-components';
 
 import { APICacheService } from 'climate-change-components';
-import { CORE_CITYSERVICE_CURRENT } from '../constants/cache';
+import { CORE_CITYSERVICE_GET } from '../constants/cache';
 import { PlanItApiHttp } from './api-http.service';
 import { UserService } from './user.service';
 
@@ -17,6 +17,17 @@ export class CityService {
   constructor(private apiHttp: PlanItApiHttp, private cache: APICacheService,
               private userService: UserService) {}
 
+  get(id: string): Observable<ApiCity> {
+    const url = `${environment.apiUrl}/api/climate-api/api/city/${id}/`;
+    const request = this.apiHttp.get(url);
+    const response = this.cache.get(CORE_CITYSERVICE_GET, request);
+
+    return response.map((resp) => {
+      const data = resp.json() as ApiCity;
+      return data;
+    });
+  }
+
   search(query: string): Observable<ApiCity[]> {
     const url = `${environment.apiUrl}/api/climate-api/api/city/?search=${query}`;
     return this.apiHttp.get(url).map(resp => {

src/angular/planit/src/app/dashboard/grouped-risk/grouped-risk.component.html

@@ -70,7 +70,7 @@ <h5 class="grouped-risk-progress-title">Action steps</h5>
 
   <app-force-collapse-chart-container
       [indicators]="indicators"
-      [city]="city">
+      [apiCity]="apiCity">
   </app-force-collapse-chart-container>
   <footer class="modal-footer">
     <button class="button" (click)="goToIndicators()">See all climate data</button>

src/angular/planit/src/app/dashboard/grouped-risk/grouped-risk.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Indicator } from 'climate-change-components';
+import { City as ApiCity, Indicator } from 'climate-change-components';
 
+import { CityService } from '../../core/services/city.service';
 import { RiskService } from '../../core/services/risk.service';
 import { UserService } from '../../core/services/user.service';
 import {
@@ -35,18 +36,24 @@ export class GroupedRiskComponent implements OnChanges, OnInit {
 
   public aggregateNeed: AggregateNeed;
   public canShowIndicators = false;
-  public city: Location;
+  public apiCity: ApiCity;
   public indicators: Indicator[] = [];
   public modalRisk: Risk;
 
-  constructor(private userService: UserService,
+  constructor(private cityService: CityService,
+              private userService: UserService,
               private riskService: RiskService,
               private router: Router) { }
 
   ngOnInit() {
-    this.userService.current().subscribe(user => {
-      this.city = user.primary_organization.location;
-    });
+    this.userService.current()
+      .switchMap((user) => {
+        const id = user.primary_organization.location.properties.api_city_id;
+        return this.cityService.get(id);
+      })
+      .subscribe((apiCity) => {
+        this.apiCity = apiCity;
+      });
   }
 
   ngOnChanges() {

src/angular/planit/src/app/indicators/indicators.component.html

@@ -33,7 +33,7 @@ <h2>Climate data</h2>
             *ngFor="let indicator of filteredIndicators"
             [isOpen]="accordionState[indicator.name]"
             [indicator]="indicator"
-            [city]="city"
+            [apiCity]="apiCity"
             (toggled)="indicatorToggled(indicator.name, $event)">
         </app-collapsible-chart>
       </div>

src/angular/planit/src/app/indicators/indicators.component.ts

@@ -2,10 +2,12 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 import {
+  City as ApiCity,
   Indicator,
   IndicatorService
 } from 'climate-change-components';
 
+import { CityService } from '../core/services/city.service';
 import { UserService } from '../core/services/user.service';
 import { WeatherEventService } from '../core/services/weather-event.service';
 
@@ -28,18 +30,25 @@ export class IndicatorsComponent implements OnInit {
   public allIndicators: Indicator[];
   public filteredIndicators: Indicator[];
   public city: Location;
+  public apiCity: ApiCity;
   public filters = new Map();
   public topConcerns: WeatherEvent[];
 
   constructor(private indicatorService: IndicatorService,
               private weatherEventService: WeatherEventService,
+              private cityService: CityService,
               private fb: FormBuilder,
               private userService: UserService) {}
 
   ngOnInit() {
-    this.userService.current().subscribe(user => {
-      this.city = user.primary_organization.location;
-    });
+    this.userService.current()
+      .switchMap((user) => {
+        this.city = user.primary_organization.location;
+        return this.cityService.get(this.city.properties.api_city_id);
+      })
+      .subscribe((apiCity) => {
+        this.apiCity = apiCity;
+      });
 
     this.indicatorService.list().subscribe(indicators => this.setupIndicators(indicators));
     this.weatherEventService.rankedEvents().subscribe(events => {

src/angular/planit/src/app/risk-wizard/steps/hazard-step/hazard-step.component.html

@@ -86,7 +86,7 @@ <h3 class="step-title">Hazard</h3>
 
   <app-force-collapse-chart-container
       [indicators]="indicators"
-      [city]="city">
+      [apiCity]="apiCity">
   </app-force-collapse-chart-container>
 
   <footer class="modal-footer">

src/angular/planit/src/app/risk-wizard/steps/hazard-step/hazard-step.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 
 import {
+  City as ApiCity,
   Indicator,
   IndicatorService
 } from 'climate-change-components';
@@ -29,6 +30,7 @@ import { ModalTemplateComponent } from '../../../shared/modal-template/modal-tem
 import { RiskStepKey } from '../../risk-step-key';
 import { RiskWizardStepComponent } from '../../risk-wizard-step.component';
 
+import { CityService } from '../../../core/services/city.service';
 import { UserService } from '../../../core/services/user.service';
 
 interface HazardStepFormModel {
@@ -56,7 +58,7 @@ export class HazardStepComponent extends RiskWizardStepComponent<HazardStepFormM
   // Can't *ngFor a map type or iterable, so instead we realize the iterable and use that in *ngFors
   public directionalFrequencyOptionsKeys = Array.from(OrgRiskDirectionalFrequencyOptions.keys());
   public directionalIntensityOptionsKeys = Array.from(OrgRiskDirectionalIntensityOptions.keys());
-  public city: Location;
+  public apiCity: ApiCity;
   public indicators: Indicator[] = [];
 
   @ViewChild('indicatorChartModal')
@@ -73,6 +75,7 @@ export class HazardStepComponent extends RiskWizardStepComponent<HazardStepFormM
               protected toastr: ToastrService,
               protected router: Router,
               protected previousRouteGuard: PreviousRouteGuard,
+              private cityService: CityService,
               private userService: UserService,
               private fb: FormBuilder,
               private indicatorService: IndicatorService) {
@@ -85,9 +88,14 @@ export class HazardStepComponent extends RiskWizardStepComponent<HazardStepFormM
     this.setupForm(this.fromModel(this.risk));
     // Load initial risk indicators and subscribe to watch for weather event changes after
     this.updateRiskIndicators();
-    this.userService.current().subscribe(user => {
-      this.city = user.primary_organization.location;
-    });
+    this.userService.current()
+      .switchMap((user) => {
+        const id = user.primary_organization.location.properties.api_city_id;
+        return this.cityService.get(id);
+      })
+      .subscribe((apiCity) => {
+        this.apiCity = apiCity;
+      });
     this.setDisabled(this.risk);
 
     this.sessionSubscription = this.session.data.subscribe(risk => {

src/angular/planit/src/app/shared/chart/chart.component.ts

@@ -17,7 +17,7 @@ import {
   Chart,
   ChartData,
   ChartService,
-  City,
+  City as ApiCity,
   ClimateModel,
   Dataset,
   Indicator,
@@ -47,7 +47,7 @@ export class ChartComponent implements OnChanges, OnDestroy, OnInit {
   @Input() dataset: Dataset;
   @Input() scenario: Scenario;
   @Input() models: ClimateModel[];
-  @Input() city: City;
+  @Input() apiCity: ApiCity;
   @Input() unit: string;
   @Input() extraParams: IndicatorQueryParams;
 
@@ -126,7 +126,7 @@ export class ChartComponent implements OnChanges, OnDestroy, OnInit {
     const queryOpts: IndicatorRequestOpts = {
       indicator: this.indicator,
       scenario: this.scenario,
-      city: this.city,
+      city: this.apiCity,
       params: params
     };
 

src/angular/planit/src/app/shared/collapsible-chart/collapsible-chart.component.html

@@ -14,7 +14,7 @@ <h2 class="card-title">
   <div *ngIf="isOpen" [collapse]="!isOpen">
     <app-indicator-chart
       [indicator]="indicator"
-      [city]="city">
+      [apiCity]="apiCity">
     </app-indicator-chart>
   </div>
 </div>

src/angular/planit/src/app/shared/collapsible-chart/collapsible-chart.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
-  City,
+  City as ApiCity,
   Indicator
 } from 'climate-change-components';
 
@@ -14,7 +14,7 @@ export class CollapsibleChartComponent {
 
   @Input() isOpen: boolean;
   @Input() indicator: Indicator;
-  @Input() city: City;
+  @Input() apiCity: ApiCity;
   @Output() toggled: EventEmitter<boolean> = new EventEmitter();
 
   constructor() {}

src/angular/planit/src/app/shared/force-collapse-chart-container/force-collapse-chart-container.component.html

@@ -1,6 +1,6 @@
 <app-collapsible-chart
     *ngFor="let indicator of indicators"
     [indicator]="indicator"
-    [city]="city"
+    [apiCity]="apiCity"
     (toggled)="chartToggled(indicator.name, $event)">
 </app-collapsible-chart>

src/angular/planit/src/app/shared/force-collapse-chart-container/force-collapse-chart-container.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChildren } from '@angular/core';
 
-import { City, Indicator } from 'climate-change-components';
+import { City as ApiCity, Indicator } from 'climate-change-components';
 
 import { CollapsibleChartComponent } from '../collapsible-chart/collapsible-chart.component';
 
@@ -10,7 +10,7 @@ import { CollapsibleChartComponent } from '../collapsible-chart/collapsible-char
 })
 export class ForceCollapseChartContainerComponent {
 
-  @Input() city: City;
+  @Input() apiCity: ApiCity;
   @Input() indicators: Indicator[] = [];
 
   @ViewChildren(CollapsibleChartComponent)

src/angular/planit/src/app/shared/indicator-chart/indicator-chart.component.html

@@ -22,7 +22,7 @@
     <div class="chart-toggle">
       <span>Dataset</span>
       <ccc-dataset-toggle [dataset]="dataset"
-                          [city]="city"
+                          [city]="apiCity"
                           [models]="models"
                           (onDatasetSelected)="datasetSelected($event)">
       </ccc-dataset-toggle>
@@ -65,7 +65,7 @@
     </ccc-historic-parameters>
   </div>
   <app-chart [indicator]="indicator"
-         [city]="city"
+         [apiCity]="apiCity"
          [models]="models"
          [dataset]="dataset"
          [scenario]="scenario"

src/angular/planit/src/app/shared/indicator-chart/indicator-chart.component.ts

@@ -12,7 +12,7 @@ import {
 import {
   Chart,
   ChartData,
-  City,
+  City as ApiCity,
   ClimateModel,
   Dataset,
   Indicator,
@@ -44,7 +44,7 @@ import {
 })
 export class IndicatorChartComponent implements OnInit, DoCheck {
   @Input() indicator: Indicator;
-  @Input() city: City;
+  @Input() apiCity: ApiCity;
 
   public isThresholdIndicator = isThresholdIndicator;
   public isBasetempIndicator = isBasetempIndicator;

src/angular/planit/src/app/shared/models/location.model.ts

@@ -10,8 +10,6 @@ export class Location {
   type: string;
   geometry: Point;
   properties: LocationProperties;
-  id: string;
-  dataset: Array<string>;
 
   constructor(object: Object) {
     Object.assign(this, object);

src/angular/planit/src/app/shared/models/organization.model.ts

@@ -31,8 +31,6 @@ export class Organization {
       this.subscription_end_date = new Date(this.subscription_end_date);
     }
     if (this.location) {
-      this.location.id = this.location.properties.api_city_id;
-      this.location.properties['datasets'] = ['LOCA'],
       this.location = new Location(this.location);
     }
   }