time series results use numbered labels in results menu

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html

@@ -39,7 +39,7 @@
                               (change)="updateSeries($event.checked, $index)">
                   <mat-icon class="ts-wkt-icon">place</mat-icon>
                   <span class="ts-wkt-label">
-                    {{point.geoemetry.getFlatCoordinates()[1] | floatPrecision: 2}},&ensp;{{point.geoemetry.getFlatCoordinates()[0] | floatPrecision: 2}}
+                    {{'SERIES' | translate}} {{point.seriesNumber}}
                   </span>
                   <button mat-icon-button (click)="deletePoint($index)"><mat-icon>delete</mat-icon></button>
                 </mat-checkbox>

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, Input, OnDestroy, ViewChild, ElementRef, computed, signal} from '@angular/core';
-import { first, Observable, Subject } from 'rxjs';
+import { first, Observable, Subject, withLatestFrom } from 'rxjs';
 import { ResizeEvent } from 'angular-resizable-element';
 
 import { Store } from '@ngrx/store';
@@ -145,19 +145,22 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
         previous_points = previous_points?.map(value => {
           return this.wktService.wktToFeature(value, 'EPSG:4326');
         })
-        previous_points?.forEach(point => {
-          this.pointHistoryService.addPoint(point.getGeometry());
+        previous_points?.forEach((point, idx) => {
+          this.pointHistoryService.addPoint(point.getGeometry(), idx);
           this.netcdfService.getTimeSeries(point.getGeometry()).pipe(first()).subscribe()
         });
       }
     }
 
-    this.subs.add(this.drawService.polygon$.subscribe(polygon => {
+
+    this.subs.add(this.drawService.polygon$.pipe(
+      withLatestFrom(this.store$.select(chartStore.getMinSeriesNumber))
+    ).subscribe(([polygon, minSeriesNumber]) => {
       if(polygon) {
         let temp = polygon.getGeometry().clone() as Point;
         temp.transform('EPSG:3857', 'EPSG:4326')
         if (polygon.getGeometry().getType() === 'Point') {
-          this.pointHistoryService.addPoint(temp);
+          this.pointHistoryService.addPoint(temp, minSeriesNumber);
           // this.selectedPoint = temp;
         }
         this.updateChart();

src/app/models/timeseries.model.ts

@@ -5,7 +5,8 @@ export interface timeseriesChartItemState {
     color: string,
     name: string,
     wkt: string,
-    geoemetry: SimpleGeometry
+    geoemetry: SimpleGeometry,
+    seriesNumber: number,
 }
 
 export interface TimeSeriesChartPoint {

src/app/services/point-history.service.ts

@@ -17,9 +17,9 @@ export class PointHistoryService {
   public history$ = new Subject<Point[]>();
   public passDraw: boolean = false;
   public selectedPoint: number = 0;
-  
+
   constructor(
-    private store$: Store<AppState>
+    private store$: Store<AppState>,
   ) {
 
 
@@ -30,15 +30,15 @@ export class PointHistoryService {
   }
 
 
-  public addPoint(point: Point) {
+  public addPoint(point: Point, seriesNumber: number) {
     if(this.passDraw) {
       this.passDraw = false
       return
     }
     const format = new WKT()
     const wkt = format.writeGeometry(point)
     this.history.push(point);
-    this.store$.dispatch(addTimeseriesState({item: {geoemetry: point, checked: true, wkt: wkt, color: '#FFFFFF', name: `Series ${this.history.length}`}}))
+    this.store$.dispatch(addTimeseriesState({item: {geoemetry: point, checked: true, seriesNumber, wkt: wkt, color: '#FFFFFF', name: `Series ${this.history.length}`}}))
     this.history$.next(this.history);
     this.savePoints();
   }

src/app/store/charts/charts.reducer.ts

@@ -30,7 +30,7 @@ export const chartsReducer = createReducer(
   }),
   on(chartActions.setTimeseriesStates, (state, { items }) => ({
     ...state, seriesStates: items.reduce((prev: { [key: string]: models.timeseriesChartItemState }, curr) => {
-      prev[curr.wkt] = { checked: true, color: curr.color, name: curr.name, wkt: curr.wkt, geoemetry: curr.geoemetry }
+      prev[curr.wkt] = { checked: true, color: curr.color, seriesNumber: curr.seriesNumber, name: curr.name, wkt: curr.wkt, geoemetry: curr.geoemetry }
       return prev
     }, {})
   }

src/app/store/charts/charts.selectors.ts

@@ -31,7 +31,7 @@ export const getAreAllTimeseriesChecked = createSelector(
     getTimeseriesChartStates,
     getCheckedTimeseries,
     (checked, all) => {
-        return Object.keys(checked).length === Object.keys(all).length 
+        return Object.keys(checked).length === Object.keys(all).length
     }
 )
 
@@ -44,3 +44,16 @@ export const getChartWKTs = createSelector(
     getTimeseriesChartStates,
     (chartStates) => Object.keys(chartStates)
 )
+
+export const getMinSeriesNumber = createSelector(
+    getTimeseriesChartStates,
+    (seriesStates) => {
+        const taken = new Set(Object.values(seriesStates).map(state => state.seriesNumber))
+
+        let output = 1;
+        while (taken.has(output)) {
+            output++
+        }
+        return output;
+    }
+);

src/assets/i18n/en.json

@@ -722,6 +722,7 @@
   "SENTINEL_1_INTERFEROGRAM_BETA_DESC": "Level 2 standardized Sentinel-1 Interferogram products generated by JPL’s Advanced Rapid Imaging and Analysis (ARIA) project.",
   "SENTINEL_DESC": "Sentinel-1 includes twin satellites that each carry C-band synthetic aperture radar (SAR), together providing all-weather, day-and-night imagery of Earth’s surface.",
   "SEP_OCT_NOV": "Sep, Oct, Nov",
+  "SERIES": "Series",
   "SET": "Set",
   "SET_AS_BOTH": "Set as both",
   "SET_AS_END_DATE": "Set as End Date",