Merge branch 'displacement' into tyler/best-fit-line

asfadmin · Nov 19, 2024 · 6e4a7d1 · 6e4a7d1
2 parents 72b5214 + 6b082e6
commit 6e4a7d1
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 104 deletions.
diff --git a/src/app/components/header/timeseries-header/timeseries-header.component.html b/src/app/components/header/timeseries-header/timeseries-header.component.html
@@ -7,7 +7,15 @@
 			<div class="breadcrumb scene-selector" [class.scene-selector]="breakpoint === breakpoints.FULL"
 				[class.medium-scene-selector]="breakpoint === breakpoints.MEDIUM"
 				[class.small-scene-selector]="breakpoint === breakpoints.SMALL">
-				<app-aoi-filter></app-aoi-filter>
+
+        <div class="ts-add-points">
+          @if(!isAddingPoints) {
+            <button (click)="onAddPointsMode()" mat-fab extended><mat-icon>add_location_alt</mat-icon>{{ 'ADD_POINTS' | translate }}</button>
+          }
+          @else {
+            <button (click)="onStopAddPoints()" mat-fab extended><mat-icon>location_off</mat-icon>{{ 'STOP_ADDING_POINTS' | translate }}</button>
+          }
+        </div>
 			</div>
 
 			<div class="breadcrumb search-button-layout">
@@ -20,4 +28,4 @@
 			</div>
 		</div>
 	</div>
-</ng-container>
+</ng-container>
diff --git a/src/app/components/header/timeseries-header/timeseries-header.component.ts b/src/app/components/header/timeseries-header/timeseries-header.component.ts
@@ -1,33 +1,59 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { SubSink } from 'subsink';
 
 import { Store } from '@ngrx/store';
 import { AppState } from '@store';
 import * as uiStore from '@store/ui';
 import * as searchStore from '@store/search';
+import * as mapStore from '@store/map';
 
 import { ScreenSizeService } from '@services';
-import { Breakpoints } from '@models';
+import { Breakpoints, MapDrawModeType, MapInteractionModeType } from '@models';
 
 @Component({
   selector: 'app-timeseries-header',
   templateUrl: './timeseries-header.component.html',
   styleUrls: ['./timeseries-header.component.scss',  '../header.component.scss']
 })
-export class TimeseriesHeaderComponent {
+export class TimeseriesHeaderComponent implements OnInit, OnDestroy {
   public breakpoint$ = this.screenSize.breakpoint$;
   public breakpoints = Breakpoints;
+  public isAddingPoints = false;
+
+  private subs = new SubSink();
 
   constructor(
     private store$: Store<AppState>,
     private screenSize: ScreenSizeService
   ) { }
 
   ngOnInit() {
+    this.subs.add(
+      this.store$.select(mapStore.getMapInteractionMode).subscribe(
+        mode => this.isAddingPoints = mode === MapInteractionModeType.DRAW
+      )
+    );
+
   }
 
+  public onAddPointsMode(): void {
+    console.log('points');
+    this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.DRAW));
+    this.store$.dispatch(new mapStore.SetMapDrawMode(MapDrawModeType.POINT));
+  }
+
+  public onStopAddPoints(): void {
+    this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE));
+  }
+
+
   public onToggleFiltersMenu(): void {
     this.store$.dispatch(new uiStore.OpenFiltersMenu());
   }
 
   public isKioskMode$ = this.store$.select(searchStore.getKioskMode);
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
 }
diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.html b/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
 

diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.ts b/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();
+  }
 }
diff --git a/src/app/components/map/displacement-layers/displacement-layers.module.ts b/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,

diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.html b/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()">

diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.ts b/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);

diff --git a/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
@@ -5,14 +5,6 @@
 		<mat-card-subtitle class="header ts-scene-list-header">
 			<app-scenes-list-header></app-scenes-list-header>
 		</mat-card-subtitle>
-      <div class="ts-add-points">
-        @if(!isAddingPoints) {
-          <button (click)="onAddPointsMode()" mat-fab extended><mat-icon>add_location_alt</mat-icon>{{ 'ADD_POINTS' | translate }}</button>
-        }
-        @else {
-          <button (click)="onStopAddPoints()" mat-fab extended><mat-icon>location_off</mat-icon>{{ 'STOP_ADDING_POINTS' | translate }}</button>
-        }
-      </div>
 
 		<div class="ts-left-column-results">
 

diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts
@@ -6,14 +6,13 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@store';
 import * as uiStore from '@store/ui';
 import * as searchStore from '@store/search';
-import * as mapStore from '@store/map';
 import * as chartStore from '@store/charts';
 
 import {
   DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService,
   WktService
 } from '@services';
-import { Breakpoints, SearchType, MapInteractionModeType, MapDrawModeType } from '@models';
+import { Breakpoints, SearchType } from '@models';
 
 import { SubSink } from 'subsink';
 
@@ -107,12 +106,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
       )
     );
 
-    this.subs.add(
-      this.store$.select(mapStore.getMapInteractionMode).subscribe(
-        mode => this.isAddingPoints = mode === MapInteractionModeType.DRAW
-      )
-    );
-
     this.subs.add(
       this.store$.select(searchStore.getSearchType).subscribe(
         searchType => this.searchType = searchType
@@ -203,15 +196,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     window.open(url);
   }
 
-  public onAddPointsMode(): void {
-    this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.DRAW));
-    this.store$.dispatch(new mapStore.SetMapDrawMode(MapDrawModeType.POINT));
-  }
-
-  public onStopAddPoints(): void {
-    this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE));
-  }
-
   public updateChart(): void {
     let allPointsData = [];
     for (const series of this.chartStates) {

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,4 +1,8 @@
 <div #tsChartWrapper class="chart-wrapper" (resized)="onResized()">
+  <div *ngIf="hoveredData" class="chart-details">
+    Series: {{hoveredData?.seriesNumber}},&nbsp;&nbsp;{{tooltipDateFormat(hoveredDate)}},&nbsp;&nbsp;{{hoveredData?.short_wavelength_displacement.toFixed(2)}} meters<br>
+    Best Fit: y = ax + b
+  </div>
 	<div #timeseriesChart id="timeseriesChart" [contextMenuTriggerFor]="menu" [contextMenuTriggerData]="{'tooltipData': hoveredData}">
 	</div>
 	<app-chart-modal class="ts-chart-config-button" (resetReferenceEvent)="resetBasePoint()"></app-chart-modal>
@@ -16,4 +20,4 @@
 
 		</ng-template>
 	</mat-menu>
-</div>
+</div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -11,6 +11,17 @@
   width: 100%;
 }
 
+.chart-details {
+  position: absolute;
+  margin-top: 15px;
+  margin-left: 70px;
+  padding: 5px;
+  color: #65665c;
+  font-size: 14px;
+  font-style: italic;
+  background-color: #f5f5f5;
+}
+
 ::ng-deep .timeseries-base {
   @include themify($themes) {
     fill: themed('blue-link');