feat: disp layer selector can only have def or vel selected at once

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

@@ -1,12 +1,14 @@
 <div class="disp-layers--layout position">
   <div class="layers-selector fx-col">
-    <mat-checkbox (change)="onUpdateDeformation($event.checked)">
+    <mat-checkbox (change)="onUpdateDeformation($event.checked)"
+      [checked]="displacementOverview === DispLayerTypes.DISPLACEMENT">
       <div class="selector-text">
         Cumulative Deformation
       </div>
     </mat-checkbox>
 
-    <mat-checkbox (change)="onUpdateVelocity($event.checked)">
+    <mat-checkbox (change)="onUpdateVelocity($event.checked)"
+      [checked]="displacementOverview === DispLayerTypes.VELOCITY">
       <div class="selector-text">
         Cumulative Velocity
 

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

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { SubSink } from 'subsink';
 
 import { MapService } from '@services';
 import * as models from '@models';
@@ -9,12 +10,28 @@ import * as models from '@models';
   templateUrl: './displacement-layers.component.html',
   styleUrl: './displacement-layers.component.scss'
 })
-export class DisplacementLayersComponent {
+export class DisplacementLayersComponent implements OnInit, OnDestroy {
   public flightDir = models.FlightDirection.ASCENDING;
+  public displacementOverview: models.DisplacementLayerTypes | null = null;
+
+  public DispLayerTypes = models.DisplacementLayerTypes;
+
+  private subs = new SubSink();
+
   constructor(
     private mapService: MapService,
   ) { }
 
+  ngOnInit() {
+    this.subs.add(
+      this.mapService.displacementOverview$.subscribe(
+        t => {
+          this.displacementOverview = t;
+        }
+      )
+    );
+  }
+
   public onUpdatePriority(isChecked: boolean): void {
     if(isChecked) {
       this.mapService.enablePriority();
@@ -47,4 +64,8 @@ export class DisplacementLayersComponent {
   public clearDisplacementLayer() {
     this.mapService.clearDisplacementOverview();
   }
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
 }

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
 import { DisplacementLayersComponent } from './displacement-layers.component';
@@ -16,6 +17,7 @@ import { SharedModule } from "@shared";
     CommonModule,
     MatMenuModule,
     MatCheckboxModule,
+    MatRadioModule,
     MatSharedModule,
     SharedModule,
     DocsModalModule,

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

@@ -62,54 +62,7 @@
       </button>
     </mat-menu>
   </button>
-  <button mat-menu-item class="control-mat-checkbox-toggle" [matMenuTriggerFor]="timeseriesCoherence"
-  (click)="clearDisplacementLayer()"
-  >
-    <mat-checkbox class="checkbox" [disabled]="true" [checked]="displacementOverview">
-    </mat-checkbox>
-    Displacement Overview
-    <mat-menu #timeseriesCoherence="matMenu">
-      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('ASC', 'VEL')">
-        <mat-radio-button
-        [disabled]="true"
-        [checked]="displacementOverview && displacementOverview[0] === 'ASC' && displacementOverview[1] === 'VEL'"
-        ></mat-radio-button>
-        ASC Velocity
-      </button>
-      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('DESC', 'VEL')">
-        <mat-radio-button
-        [disabled]="true"
-        [checked]="displacementOverview && displacementOverview[0] === 'DESC' && displacementOverview[1] === 'VEL'"
-        ></mat-radio-button>
-        DESC Velocity
-      </button>
-      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('ASC', 'DISP')">
-        <mat-radio-button
-        [disabled]="true"
-        [checked]="displacementOverview && displacementOverview[0] === 'ASC' && displacementOverview[1] === 'DISP'"
-        ></mat-radio-button>
-        ASC Displacement
-      </button>
-      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('DESC', 'DISP')">
-        <mat-radio-button
-        [disabled]="true"
-        [checked]="displacementOverview && displacementOverview[0] === 'DESC' && displacementOverview[1] === 'DISP'"
-        ></mat-radio-button>
-        DESC Displacement
-      </button>
 
-    </mat-menu>
-  </button>
-
-  <button mat-menu-item
-    class="control-mat-checkbox-toggle"
-    (click)="togglePriority()">
-    <mat-checkbox class="checkbox"
-      [disabled]="true"
-      [checked]="priorityEnabled">
-    </mat-checkbox>
-    Displacement Priority
-  </button>
   <button mat-menu-item
     class="control-mat-checkbox-toggle"
     (click)="onToggleGridlines()">

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

@@ -35,7 +35,6 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   public breakpoint: models.Breakpoints;
   public breakpoints = models.Breakpoints;
   private coherenceLayerOpacity: number;
-  public displacementOverview = null;
   public priorityEnabled = false;
 
 
@@ -108,16 +107,6 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
     }
   }
 
-  public onSetDisplacementLayer(direction: string, type: string) {
-    this.displacementOverview = [direction, type];
-    console.log(this.displacementOverview);
-  }
-
-  public clearDisplacementLayer() {
-    this.displacementOverview = null;
-    this.mapService.clearDisplacementOverview();
-  }
-
   public onSetCoherenceLayer(months: string): void {
     this.mapService.setCoherenceLayer(months);
     this.mapService.updateCoherenceOpacity(this.coherenceLayerOpacity);

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

@@ -74,6 +74,7 @@ export class MapService {
   private localBrowseImageURL: string;
 
   private displacementOverview: TileLayer;
+  public displacementOverview$ = new BehaviorSubject<models.DisplacementLayerTypes | null>(null);
   private priorityOverview: VectorLayer<VectorSource>;
 
   private selectClick = new Select({
@@ -738,11 +739,21 @@ export class MapService {
   }
 
   public setDisplacementOverview(direction: models.FlightDirection, type: models.DisplacementLayerTypes) {
-    const dir = direction === models.FlightDirection.ASCENDING ? 'ASC' : 'DESC';
-    const layerType = type === models.DisplacementLayerTypes.DISPLACEMENT ? 'DISP' : 'VEL';
+    const apiDirValues = {
+      [models.FlightDirection.ASCENDING]: 'ASC',
+      [models.FlightDirection.DESCENDING]: 'DESC'
+    }
+    const apiDispValues = {
+      [models.DisplacementLayerTypes.DISPLACEMENT]: 'DISP',
+      [models.DisplacementLayerTypes.VELOCITY]: 'VEL'
+    }
+
+    const dir = apiDirValues[direction];
+    const layerType = apiDispValues[type];
 
     let base_url = `https://d12uktych8nckw.cloudfront.net/main/${dir.toLowerCase()}/${layerType.toLowerCase()}`;
-    console.log(base_url);
+    this.displacementOverview$.next(type);
+    console.log(type, base_url);
 
     this.http.get(`${base_url}/extent.json`).pipe(
       first()
@@ -770,6 +781,7 @@ export class MapService {
   public clearDisplacementOverview() {
     this.map.removeLayer(this.displacementOverview);
     this.displacementOverview = null;
+    this.displacementOverview$.next(null);
   }
 
   public setDisplacementLayer(points: { point: Point, seriesNumber: number, color: string }[]) {