Merge branch 'displacement' into kim/displacement

src/app/app.component.ts

@@ -18,6 +18,7 @@ import { HelpComponent } from '@components/help/help.component';
 
 import { AppState } from '@store';
 import * as scenesStore from '@store/scenes';
+import * as chartsStore from '@store/charts';
 import * as filterStore from '@store/filters';
 import * as searchStore from '@store/search';
 import * as uiStore from '@store/ui';
@@ -98,6 +99,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
     public language: services.AsfLanguageService,
     public _adapter: DateAdapter<any>,
     private titleService: Title,
+    private pointHistoryService: services.PointHistoryService,
     @Inject(MAT_DATE_LOCALE) public _locale: string,
   ) { }
 
@@ -458,7 +460,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
           this.store$.select(uiStore.getIsResultsMenuOpen),
           this.store$.select(scenesStore.getAreResultsLoaded)
         ]).pipe(
-          filter(([_, searchType, _resultsOpen, resultsLoaded]) => searchType == SearchType.DISPLACEMENT && !resultsLoaded)
+          filter(([_, searchType, _resultsOpen, resultsLoaded]) => {
+            // TODO: this seems to sometimes not work, sometimes clearing isn't actually setting resultsLoaded to false
+            return searchType == SearchType.DISPLACEMENT && !resultsLoaded})
         ).subscribe(([polygon, _, __]) => {
           if (polygon) {
             if (polygon.getGeometry().getType() === 'Point') {
@@ -467,6 +471,21 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
         }
           }
         }))
+
+
+        this.subs.add(this.store$.select(chartsStore.getTimeseriesChartStates).pipe(
+          withLatestFrom(this.pointHistoryService.history$)
+        ).subscribe(([chartStates, history]) => {
+          if(Object.keys(chartStates).length === history.length) {
+            let data = []
+
+            for (const p of history) {
+              data.push({ point: p.point, seriesNumber: chartStates[p.wkt].seriesNumber, color: chartStates[p.wkt].color })
+            }
+            this.mapService.setDisplacementLayer(data);
+          }
+
+        }));
   }
 
   public ngAfterViewInit(): void {
@@ -480,6 +499,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   public onClearSearch(): void {
+    this.pointHistoryService.clear();
     this.store$.dispatch(new scenesStore.ClearScenes());
     this.store$.dispatch(new scenesStore.SetSelectedSarviewsEvent(''));
     this.mapService.clearDrawLayer();

src/app/components/map/displacement-layers/displacement-layers.component.html

@@ -20,7 +20,8 @@
         </div>
       </mat-radio-button>
     </mat-radio-group>
-    <mat-checkbox #priorityRollout (change)="onUpdatePriority($event.checked)">
+    <mat-checkbox #priorityRollout (change)="onUpdatePriority($event.checked)"
+    [checked]="priorityEnabled">
       <div class="selector-text">
         Rollout
       </div>

src/app/components/map/displacement-layers/displacement-layers.component.ts

@@ -21,7 +21,7 @@ export class DisplacementLayersComponent implements OnInit, OnDestroy {
   public displacementOverview: models.DisplacementLayerTypes | null = null;
   public cumulativeDisplacementSelectionDisabled: boolean = true;
   public DispLayerTypes = models.DisplacementLayerTypes;
-
+  public priorityEnabled = false;
   private subs = new SubSink();
 
   constructor(
@@ -55,6 +55,11 @@ export class DisplacementLayersComponent implements OnInit, OnDestroy {
       }
       )
     )
+    this.subs.add(
+      this.mapService.priorityEnabled$.subscribe(t => {
+        this.priorityEnabled = t !== null;
+      })
+    )
   }
 
   public onUpdatePriority(isChecked: boolean): void {

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts

@@ -9,7 +9,7 @@ import * as searchStore from '@store/search';
 import * as chartStore from '@store/charts';
 
 import {
-  DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService,
+  DrawService, NetcdfService, PointHistoryService, ScreenSizeService,
   WktService
 } from '@services';
 import { Breakpoints, SearchType } from '@models';
@@ -93,7 +93,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     private screenSize: ScreenSizeService,
     public pointHistoryService: PointHistoryService,
     private drawService: DrawService,
-    private mapService: MapService,
     private netcdfService: NetcdfService,
     private wktService: WktService
   ) { }
@@ -138,16 +137,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
       )
     );
 
-    this.subs.add(this.store$.select(getTimeseriesChartStates).pipe(
-      withLatestFrom(this.pointHistoryService.history$)
-    ).subscribe(([chartStates, history]) => {
-      let data = []
-      for (const p of history) {
-        data.push({ point: p.point, seriesNumber: chartStates[p.wkt].seriesNumber, color: chartStates[p.wkt].color })
-      }
-      this.mapService.setDisplacementLayer(data);
 
-    }));
 
     let thing: string = localStorage.getItem('timeseries-points')
     if (thing && thing.length > 0) {

src/app/components/timeseries-chart/timeseries-chart-flight-direction-toggle/timeseries-chart-flight-direction-toggle.component.ts

@@ -4,7 +4,6 @@ import { AppState } from '@store';
 import { SubSink } from 'subsink';
 import * as filtersStore from '@store/filters';
 import * as models from '@models';
-import { SetFlightDirections } from '@store/filters';
 import { map } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,19 +22,25 @@ export class TimeseriesChartFlightDirectionToggleComponent implements OnInit {
   public FlightDirections = models.FlightDirection;
   constructor(private store$: Store<AppState>) {}
 
-ngOnInit(): void {
-  this.subs.add(
-    this.store$.select(filtersStore.getFlightDirections).pipe(
-      map(dir => dir[0] ?? this.flightDirection)
-    ).subscribe(
-      dir => this.flightDirection = dir
+  ngOnInit(): void {
+    this.subs.add(
+      this.store$.select(filtersStore.getFlightDirections).pipe(
+        map(dir => dir[0] ?? this.flightDirection)
+      ).subscribe(
+        dir => this.flightDirection = dir
+      )
     )
-  )
-
-}
 
-public onToggle(): void {
-  const outputDirection = this.flightDirection === this.FlightDirections.ASCENDING ? this.FlightDirections.DESCENDING : this.FlightDirections.ASCENDING
-  this.store$.dispatch(new SetFlightDirections([outputDirection]))
-}
+  }
+
+  public onToggle(): void {
+    const outputDirection = this.flightDirection === this.FlightDirections.ASCENDING ? this.FlightDirections.DESCENDING : this.FlightDirections.ASCENDING
+
+    const dir = outputDirection
+      .toUpperCase();
+
+
+    const action = new filtersStore.SetFlightDirections([<models.FlightDirection>dir]);
+    this.store$.dispatch(action);
+  }
 }

src/app/components/timeseries-chart/timeseries-chart.component.ts

@@ -2,7 +2,7 @@ import {Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChild, V
 import * as d3 from 'd3';
 // import * as models from '@models';
 import {
-  debounceTime, Observable, withLatestFrom,
+  debounceTime, map, Observable, withLatestFrom,
   // Subject
 } from 'rxjs';
 
@@ -104,6 +104,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   public lastEndDate: Date = new Date();
   public items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
   public formulaOverflow = false;
+  private flightDirection = models.FlightDirection.ASCENDING;
   // Tyler this is where you would put the series and their best fit formulas
   public bestFitItems: TimeSeriesFit[] = [
 
@@ -214,10 +215,19 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       )
     );
 
+    this.subs.add(
+      this.store$.select(filtersStore.getFlightDirections).pipe(
+        map(dir => dir[0] ?? this.flightDirection)
+      ).subscribe(
+        dir => this.flightDirection = dir
+      )
+    )
+
   }
 
   private refreshChart(chartStates: { [key: string]: models.timeseriesChartItemState }): void {
-    const cache = this.netcdfService.getCache()
+    const cache = this.netcdfService.getCache(this.flightDirection)
+
     const allPointsData: { point: {}, state: models.timeseriesChartItemState }[] = Object.keys(chartStates).map(
       wkt => ({ point: cache[wkt], state: chartStates[wkt] })
     );
@@ -302,7 +312,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
                 aoi = result.point[key];
               }
             }
-
             this.timeSeriesData = [];
             for (let key of Object.keys(result.point).filter(x => x !== 'mean' && x !== 'aoi')) {
               let daDate = new Date(result.point[key].secondary_datetime).valueOf();
@@ -361,7 +370,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       this.averageData = {};
     }
 
-
     this.drawChart();
   }
 

src/app/services/map/map.service.ts

@@ -77,6 +77,7 @@ export class MapService {
   private displacementOverview: TileLayer;
   public displacementOverview$ = new BehaviorSubject<models.DisplacementLayerTypes | null>(null);
   private priorityOverview: VectorLayer<VectorSource>;
+  public priorityEnabled$ = new BehaviorSubject<models.FlightDirection | null>(null);
 
   private selectClick = new Select({
     condition: click,
@@ -748,13 +749,11 @@ export class MapService {
       [models.DisplacementLayerTypes.DISPLACEMENT]: 'DISP',
       [models.DisplacementLayerTypes.VELOCITY]: 'VEL'
     }
-
     const dir = apiDirValues[direction];
     const layerType = apiDispValues[type];
 
     let base_url = `https://d3g9emy65n853h.cloudfront.net/main/${dir.toLowerCase()}/${layerType.toLowerCase()}`;
     this.displacementOverview$.next(type);
-    console.log(type, base_url);
 
     this.http.get(`${base_url}/extent.json`).pipe(
       first()
@@ -818,6 +817,10 @@ export class MapService {
     this.displacementOverview = null;
     this.displacementOverview$.next(null);
   }
+  public setDisplacementType(type) {
+    this.displacementOverview$.next(type)
+  }
+
 
   public setDisplacementLayer(points: { point: Point, seriesNumber: number, color: string }[]) {
     if (!!this.displacmentLayer) {
@@ -895,6 +898,8 @@ export class MapService {
       format: new GeoJSON({})
     },
     )
+    this.priorityEnabled$.next(flight_dir);
+
     const colorTable = [
       'rgba(174, 174, 174, 0.6)',
       'rgba(127, 206, 255, 0.8)',
@@ -932,6 +937,8 @@ export class MapService {
   public disablePriority(): void {
     this.map.removeLayer(this.priorityOverview);
     this.priorityOverview = null;
+    this.priorityEnabled$.next(null);
+
   }
 
   public isPriorityEnabled(): boolean {

src/app/services/point-history.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
+import { timeseriesChartItemState } from '@models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@store';
-import { addTimeseriesState, removeTimeseriesState } from '@store/charts';
+import { addTimeseriesState, removeTimeseriesState, resetTimeseriesStates } from '@store/charts';
 import WKT from 'ol/format/WKT';
 
 import { Point } from 'ol/geom';
@@ -42,6 +43,26 @@ export class PointHistoryService {
     this.history$.next(this.history);
     this.savePoints();
   }
+
+  public addPoints(states: timeseriesChartItemState[]) {
+    if(states.length <= 0) {
+      return
+    }
+    for(let state of states) {
+      const point = state.geoemetry as Point;
+      this.history.push({point, wkt: state.wkt});
+      this.store$.dispatch(addTimeseriesState({item: state}))
+    }
+    this.history$.next(this.history);
+    this.savePoints();
+  }
+
+  public clear() {
+    this.history = [];
+    this.history$.next(this.history);
+    this.store$.dispatch(resetTimeseriesStates())
+    this.savePoints();
+  }
   public removePoint(index) {
     // const format = new WKT()
     const wkt = this.history[index].wkt