Merge pull request #2033 from asfadmin/kim/displacement

Ascending/Descending Rollout Layer Toggle

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

@@ -15,7 +15,7 @@
       </div>
     </mat-checkbox>
 
-    <mat-checkbox (change)="onUpdatePriority($event.checked)">
+    <mat-checkbox #priorityRollout (change)="onUpdatePriority($event.checked)">
       <div class="selector-text">
         Rollout
       </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { SubSink } from 'subsink';
 
 import { MapService } from '@services';
@@ -7,6 +7,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@store';
 import { getFlightDirections } from '@store/filters';
 import { distinctUntilChanged, map } from 'rxjs';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 
 @Component({
@@ -15,6 +16,7 @@ import { distinctUntilChanged, map } from 'rxjs';
   styleUrl: './displacement-layers.component.scss'
 })
 export class DisplacementLayersComponent implements OnInit, OnDestroy {
+  @ViewChild("priorityRollout", { static: true }) priorityCheckbox: MatCheckbox;
   public flightDir = models.FlightDirection.ASCENDING;
   public displacementOverview: models.DisplacementLayerTypes | null = null;
 
@@ -44,14 +46,18 @@ export class DisplacementLayersComponent implements OnInit, OnDestroy {
         if (!!this.displacementOverview) {
           this.setDisplacementLayer(this.flightDir, this.displacementOverview)
         }
+        if (this.priorityCheckbox.checked) {
+          this.mapService.disablePriority()
+          this.onUpdatePriority(this.priorityCheckbox.checked)
+        }
       }
       )
     )
   }
 
   public onUpdatePriority(isChecked: boolean): void {
     if (isChecked) {
-      this.mapService.enablePriority();
+      this.mapService.enablePriority(this.flightDir);
     }
     else {
       this.mapService.disablePriority();

src/app/components/map/map-controls/layer-selector/layer-selector.component.ts

@@ -7,7 +7,10 @@ import { AppState } from '@store';
 import * as mapStore from '@store/map';
 
 import * as models from '@models';
+import * as filtersStore from '@store/filters';
+
 import { MapService, ScreenSizeService } from '@services';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-layer-selector',
@@ -35,6 +38,7 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   public breakpoint: models.Breakpoints;
   public breakpoints = models.Breakpoints;
   private coherenceLayerOpacity: number;
+  private flightDir: models.FlightDirection = models.FlightDirection.ASCENDING;
   public priorityEnabled = false;
 
 
@@ -83,6 +87,14 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
         }
       )
     )
+
+    this.subs.add(
+      this.store$.select(filtersStore.getFlightDirections).pipe(
+        map(flightDirs => flightDirs[0] ?? models.FlightDirection.ASCENDING)
+      ).subscribe(
+        flightDir => this.flightDir = flightDir
+      )
+    )
   }
 
   public onNewLayerType(layerType: models.MapLayerTypes): void {
@@ -125,7 +137,7 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   }
   public togglePriority(): void {
     if(!this.priorityEnabled) {
-      this.mapService.enablePriority();
+      this.mapService.enablePriority(this.flightDir);
       this.priorityEnabled = true;
     }
     else {

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

@@ -2,7 +2,7 @@
     <div class="button-display-container">
         <label class="button-label">{{"FLIGHT_DIRECTION" | translate}}<br><b>{{flightDirection}}</b></label>
         <mat-icon class="control-icon">
-            {{flightDirection === FlightDirections.ASCENDING ? 'north_east' : 'south_east'}}
+            {{flightDirection === FlightDirections.ASCENDING ? 'north_west' : 'south_west'}}
         </mat-icon>
     </div>
 </button>

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

@@ -861,9 +861,9 @@ export class MapService {
     this.hasCoherenceLayer$.next(null);
   }
 
-  public enablePriority(): void {
+  public enablePriority(flight_dir: models.FlightDirection): void {
     const source = new VectorSource({
-      url: '/assets/priority_rollout.json',
+      url: `/assets/priority_rollout_${flight_dir}.geojson`,
       format: new GeoJSON({})
     },
     )