Merge pull request #2009 from asfadmin/andy/DS-5552-Multiline-ASF-2

Slider now is recreated on refresh for prior series
asfadmin · Nov 13, 2024 · 7a221c3 · 7a221c3
2 parents 6716b87 + d5bcc58
commit 7a221c3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.html b/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.html
@@ -83,7 +83,7 @@
             </div>
           </div>
 
-          <div class="fx-empty list-button-group">
+          <div *ngIf="searchType !== SearchTypes.DISPLACEMENT" class="fx-empty list-button-group">
             <div class="fx-row-center button-group-label">
               <label>{{ 'ZOOM' | translate }}</label>
             </div>
@@ -102,7 +102,8 @@
             </div>
           </div>
 
-          <div class="fx-empty list-button-group" *ngIf="searchType !== SearchTypes.SARVIEWS_EVENTS">
+          <div class="fx-empty list-button-group"
+               *ngIf="searchType !== SearchTypes.SARVIEWS_EVENTS && searchType !== SearchTypes.DISPLACEMENT ">
             <div class="fx-row-center button-group-label">
               <label>{{ 'QUEUE' |  translate }}</label>
             </div>
@@ -387,7 +388,7 @@
             {{'SELECTED_EVENT_PRODUCTS' | translate }} ({{pinnedEventIDs.length}} {{ 'FILES' | translate}})
           </button>
         </div>
-</mat-menu>
+      </mat-menu>
 
       <ng-container *ngIf="searchType === SearchTypes.BASELINE">
         <div class="header-row-right" *ngIf="breakpoint > breakpoints.MOBILE">

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
@@ -124,7 +124,7 @@
 		<div class="ts-button-group-filler ts-button-group"></div>
 
 		<div class="ts-button-group-filler ts-button-group"></div>
-		<div class='ts-button-group'>
+		<div class='ts-button-group' style="visibility: hidden;">
 			<div class="button-group-label">
 				<label>{{ 'FILTERS' | translate }}</label>
 			</div>
@@ -134,8 +134,6 @@
           <span class="material-symbols-outlined">
           filter_alt
           </span>
-<!--					<mat-icon>filter_alt</mat-icon>-->
-<!--					{{ 'DISPLACEMENT_FILTERS' | translate }}<mat-icon class="more-horiz">more_horiz</mat-icon>-->
 				</mat-button-toggle>
 			</div>
 		</div>

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
@@ -152,8 +152,13 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
           return this.wktService.wktToFeature(value, 'EPSG:4326');
         })
         previous_points?.forEach((point, idx) => {
+          let allPointsData = [];
           this.pointHistoryService.addPoint(point.getGeometry(), idx + 1);
-          this.netcdfService.getTimeSeries(point.getGeometry()).pipe(first()).subscribe()
+          this.netcdfService.getTimeSeries(point.getGeometry()).pipe(first()).subscribe( data => {
+            allPointsData.push(data);
+            // this.chartData.next(allPointsData);
+            this.maxRange = this.temporalRange = this.getMaxRange(allPointsData);
+          })
         });
       }
     }
@@ -236,6 +241,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public toggleAllSeries(checked: boolean) {
     this.store$.dispatch(chartStore.setAllTimeseriesChecked({checked}))
   }
+
   public getMaxRange(allSeries: PointSeries[]) {
     let minDate = null;
     let maxDate = null;
@@ -255,15 +261,15 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     return dateRange;
   }
 
-
   public updateSeries(checked: boolean, index?: number) {
     const wkt = this.chartStates[index]?.wkt
-
     this.store$.dispatch(chartStore.setTimeseriesChecked({wkt, checked}))
   }
+
   public deletePoint(index: number) {
     this.pointHistoryService.removePoint(index);
   }
+
   ngOnDestroy() {
     this.pointHistoryService.clearPoints();
     this.subs.unsubscribe();

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,6 +1,7 @@
 /* Contenedor principal del slider */
 .displacement-slider {
-  margin: 20px auto; /* Centra el slider horizontalmente */
+  display: block;
+  margin: 10px 20px 20px 45px; /* Centra el slider horizontalmente */
   width: 100%; /* Ocupa todo el ancho disponible */
   max-width: 95%; /* Opcional: Limita el ancho máximo para que no se extienda demasiado */
   box-sizing: border-box;

diff --git a/src/styles.scss b/src/styles.scss
@@ -512,6 +512,10 @@ ul {
     font-size: 13px;
     top: 17px;
   }
+
+  .noUi-tooltip {
+    font-size: 14px;
+  }
 }
 
 .tick > line {