Merge branch 'displacement' into tyler/map-recolor2

asfadmin · Nov 22, 2024 · 1ce86c8 · 1ce86c8
2 parents 99236d5 + 681ebea
commit 1ce86c8
Show file tree

Hide file tree

Showing 16 changed files with 7,717 additions and 48 deletions.
diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.html b/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>

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,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();

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
@@ -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 {

diff --git a/...omponents/timeseries-chart/timeseries-chart-export/timeseries-chart-export.component.html b/...omponents/timeseries-chart/timeseries-chart-export/timeseries-chart-export.component.html
@@ -6,7 +6,7 @@
     </button>
     <mat-menu #menu="matMenu">
       <div class="chart-config-menu-panel">
-        <button mat-button (click)="onExportCSV()">{{'EXPORT' | translate}} {{ 'CSV' | translate }}</button>
+        <button mat-button (click)="onExportCSV()">{{'EXPORT' | translate}} CSV</button>
       </div>
     </mat-menu>
 </div>
diff --git a/...ies-chart-flight-direction-toggle/timeseries-chart-flight-direction-toggle.component.html b/...ies-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>
diff --git a/...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss b/...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss
@@ -1,7 +1,7 @@
 /* Contenedor principal del slider */
 .displacement-slider {
   display: block;
-  margin: 10px 60px 20px 75px; /* Centra el slider horizontalmente */
+  margin: -10px 60px 20px 75px; /* Centra el slider horizontalmente */
   box-sizing: border-box;
 }
 

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,8 +1,39 @@
+<div class="ts-chart-details">
+  <div class="ts-best-fit-nav"
+       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
+    <button mat-flat-button (click)="onButtonClickPlus()" class="ts-best-fit-nav">
+      <span class="material-symbols-outlined">
+        arrow_forward_ios
+      </span>
+    </button>
+  </div>
+  <div class="ts-best-fit-formulas">
+    <cdk-virtual-scroll-viewport #tsBestFitFormulas
+      orientation="horizontal"
+      itemSize="140"
+      minBufferPx="200"
+      maxBufferPx="400"
+      class="ts-best-fit-viewport">
+       <div *cdkVirtualFor="let item of bestFitItems" class="ts-best-fit-item">
+        <div [style.background-color]="item.color" class="ts-color-swatch"></div>
+        <div style="display: flex; flex-direction: column;">
+          <div>Series {{item.seriesNumber}}</div>
+          <div>{{item.formula}}</div>
+        </div>
+      </div>
+    </cdk-virtual-scroll-viewport>
+  </div>
+  <div class="ts-best-fit-nav"
+       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
+    <button mat-flat-button (click)="onButtonClickMinus()">
+      <span class="material-symbols-outlined">
+        arrow_back_ios
+      </span>
+    </button>
+  </div>
+</div>
+
 <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-timeseries-chart-export class="ts-chart-export-button" [timeSeriesData]="exportableData"></app-timeseries-chart-export>
@@ -17,7 +48,6 @@
 	<mat-menu #menu="matMenu">
 		<ng-template matMenuContent let-tooltipData="tooltipData">
 			<button mat-button (click)="setReference(tooltipData)">Set as Reference</button>
-
 		</ng-template>
 	</mat-menu>
 </div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -11,17 +11,64 @@
   width: 100%;
 }
 
-.chart-details {
-  position: absolute;
-  margin-top: 15px;
-  margin-left: 70px;
+.ts-chart-details {
+//  position: absolute;
+  display: flex;
+  flex-direction: row;
+  background-color: #f5f5f5;
+  margin: 0 25px 0 45px;
   padding: 5px;
   color: #65665c;
   font-size: 14px;
   font-style: italic;
   background-color: #f5f5f5;
 }
 
+.ts-best-fit-nav {
+  flex: 0 1 auto;
+  width: 40px;
+  min-width: 0;
+  margin-top: -2px;
+}
+
+.ts-best-fit-formulas {
+  flex: 1 1 auto
+}
+
+
+.ts-best-fit-formulas .ts-best-fit-viewport {
+  height: 35px;
+  width: 100%;
+  border: none;
+}
+
+.ts-best-fit-formulas .ts-best-fit-viewport .cdk-virtual-scroll-content-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.ts-best-fit-item {
+  width: 120px;
+  height: 100%;
+  //writing-mode: vertical-lr;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.ts-color-swatch {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+
+::ng-deep .cdk-virtual-scrollable {
+  overflow-x: auto;
+  overflow-y: clip;
+  will-change: scroll-position;
+  contain: strict;
+  -webkit-overflow-scrolling: touch;
+}
 ::ng-deep .timeseries-base {
   @include themify($themes) {
     fill: themed('blue-link');
@@ -45,13 +92,13 @@
 
 .ts-chart-config-button {
   position: absolute;
-  top: 18px;
+  top: 54px;
   right: 65px;
 }
 
 .ts-chart-export-button {
   position: absolute;
-  top: 18px;
+  top: 54px;
   right: 210px;
 }
 
@@ -68,7 +115,7 @@
 }
 .ts-chart-zoom {
   position: absolute;
-  top: 17px;
+  top: 54px;
   right: 95px;
 }
 :host ::ng-deep .ts-reference-point {