Checkboxes Work, Chart Loads When Data is Available

angular.json

@@ -87,9 +87,14 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
+            },
+            "local": {
+              "sourceMap": true,
+              "optimization": false,
+              "extractLicenses": false
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -99,6 +104,9 @@
           "configurations": {
             "production": {
               "buildTarget": "search-ui:build:production"
+            },
+            "local": {
+              "buildTarget": "search-ui:build:local"
             }
           }
         },

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

@@ -16,30 +16,30 @@
 
 		<div class="ts-left-column-results">
 
-    @if(pointHistory.length !== 0) {
+    @if(chartStates.length !== 0) {
 
       <section class="point-list-section">
         <span class="parent-checkbox-section">
           <mat-checkbox
             class="parent-checkbox"
-            [checked]="task().checked"
+            [checked]="(allSeriesChecked$ | async)"
             [indeterminate]="partiallyComplete()"
-            (change)="updateSeries($event.checked)"
+            (change)="toggleAllSeries($event.checked)"
           >
             <span class="parent-checkbox-label">
-              {{task().aoi}}
+              All AOIs
             </span>
           </mat-checkbox>
         </span>
         <span class="point-list-ul-section">
           <ul>
-            @for (point of pointHistory; track $index) {
+            @for (point of chartStates; track $index) {
               <li>
                 <mat-checkbox [checked]="point.checked"
                               (change)="updateSeries($event.checked, $index)">
                   <mat-icon class="ts-wkt-icon">place</mat-icon>
                   <span class="ts-wkt-label">
-                    {{point.flatCoordinates[1] | floatPrecision: 2}},&ensp;{{point.flatCoordinates[0] | floatPrecision: 2}}
+                    {{point.geoemetry.getFlatCoordinates()[1] | floatPrecision: 2}},&ensp;{{point.geoemetry.getFlatCoordinates()[0] | floatPrecision: 2}}
                   </span>
                   <button mat-icon-button (click)="deletePoint($index)"><mat-icon>delete</mat-icon></button>
                 </mat-checkbox>
@@ -147,9 +147,7 @@
 
 	<div class="ts-chart-row">
 		<div id="ts-chart-column">
-			<app-timeseries-chart
-			[chartData]="chartData"
-			[isLoading]="isLoading"></app-timeseries-chart>
+			<app-timeseries-chart></app-timeseries-chart>
       <app-timeseries-chart-temporal-slider></app-timeseries-chart-temporal-slider>
 		</div>
 	</div>

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

@@ -7,17 +7,19 @@ import { AppState } from '@store';
 import * as uiStore from '@store/ui';
 import * as searchStore from '@store/search';
 import * as mapStore from '@store/map';
-import * as models from '@models';
+import * as chartStore from '@store/charts';
 
-import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService, WktService } from '@services';
+import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService,
+  WktService
+} from '@services';
 import { Breakpoints,   SearchType, MapInteractionModeType, MapDrawModeType } from '@models';
 
 import { SubSink } from 'subsink';
 
 import { Point } from 'ol/geom';
-import { WKT } from 'ol/format';
+import { getTimeseriesChartStates } from '@store/charts';
 import * as filtersStore from '@store/filters';
-// import { getPathRange } from '@store/filters';
+import * as models from '@models';
 
 export interface Task {
   aoi: string;
@@ -65,9 +67,11 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public breakpoints = Breakpoints;
   private subs = new SubSink();
 
-  public pointHistory = [];
+  // public pointHistory = [];
 
-  public chartData = new Subject<any>;
+  // public chartData = new Subject<any>;
+  public chartStates: models.timeseriesChartItemState[] = []
+  public allSeriesChecked$ = this.store$.select(chartStore.getAreAllTimeseriesChecked)
   public temporalRange: models.Range<number> = {start: 0, end: 0};
   public temporalRangeValues$ = new Subject<number[]>();
   public maxRange: models.Range<number> = {start: 0, end: 0};
@@ -81,7 +85,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public dateRange = [];
   public totalPoints = 0;
 
-  public isLoading = false;
+  // public isLoading = false;
 
   constructor(
     private store$: Store<AppState>,
@@ -114,6 +118,11 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
       )
     );
 
+    this.subs.add(this.store$.select(getTimeseriesChartStates).subscribe(chartStates => {
+      this.chartStates = Object.values(chartStates);
+    }
+    ));
+
     this.subs.add(
       this.temporalRangeValues$.subscribe(
         range => {
@@ -124,28 +133,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     );
 
     this.subs.add(this.pointHistoryService.history$.subscribe(history => {
-      this.pointHistory = history;
       this.mapService.setDisplacementLayer(history);
-      console.log('results menu sub this.pointHistory', this.pointHistory);
-      const task = this.task();
-      let found = false
-      for (const point of this.pointHistory) {
-        found = false;
-        for (const pt of task.subtasks) {
-          if (pt.aoi.toString() === point.flatCoordinates.toString()) {
-            found = true;
-            break;
-          }
-        }
-        if (!found) {
-          let p = {aoi: point.flatCoordinates, checked: true};
-          task.subtasks.push(p);
-        }
-      }
-
-      console.log('results menu sub task.subtasks', task.subtasks);
-
-      return {...task};
 
     }));
 
@@ -159,9 +147,10 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
         })
         previous_points?.forEach(point => {
           this.pointHistoryService.addPoint(point.getGeometry());
-        })
+          this.netcdfService.getTimeSeries(point.getGeometry()).pipe(first()).subscribe()
+        });
       }
-  }
+    }
 
     this.subs.add(this.drawService.polygon$.subscribe(polygon => {
       if(polygon) {
@@ -209,27 +198,20 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE));
   }
 
-  public onPointClick(index: number) {
-    this.pointHistoryService.selectedPoint = index;
-    this.pointHistoryService.passDraw = true;
-    let format = new WKT();
-    let wktRepresenation  = format.writeGeometry(this.pointHistory[index]);
-    this.mapService.loadPolygonFrom(wktRepresenation.toString())
-  }
-
   public updateChart(): void {
-    let allPointsData: PointSeries[] = [];
-    for (const geometry of this.pointHistory) {
-      this.netcdfService.getTimeSeries(geometry).pipe(first()).subscribe(data => {
-        console.log('updateChart data', data);
-        console.log('updateChart geometry', geometry);
+    let allPointsData = [];
+    for (const series of this.chartStates) {
+      this.netcdfService.getTimeSeries(series.geoemetry).pipe(first()).subscribe(data => {
         allPointsData.push(data);
-        this.chartData.next(allPointsData);
+        // this.chartData.next(allPointsData);
         this.temporalRange = this.getMaxRange(allPointsData);
         console.log('updateChart dataDateMin, dataDateMax', this.dataDateMin, this.dataDateMax);
         console.log('updateChart allPointsData', allPointsData);
       })
     }
+    this.maxRange = this.getMaxRange(allPointsData);
+    console.log('updateChart dataDateMin, dataDateMax', this.dataDateMin, this.dataDateMax);
+    console.log('updateChart allPointsData', allPointsData);
   }
 
   readonly task = signal<Task>({
@@ -246,6 +228,9 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     return task.subtasks.some(t => t.checked) && !task.subtasks.every(t => t.checked);
   });
 
+  public toggleAllSeries(checked: boolean) {
+    this.store$.dispatch(chartStore.setAllTimeseriesChecked({checked}))
+  }
   public getMaxRange(allSeries: PointSeries[]) {
     let minDate = null;
     let maxDate = null;
@@ -271,26 +256,9 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
 
 
   public updateSeries(checked: boolean, index?: number) {
-    console.log('updateSeries', checked, index);
-    this.task.update(task => {
-      if (index === undefined) {
-        task.checked = checked;
-        task.subtasks?.forEach(t => (t.checked = checked));
-      } else {
-        task.subtasks![index].checked = checked;
-        task.checked = task.subtasks?.every(t => t.checked) ?? true;
-        this.pointHistoryService.selectedPoint = index;
-        console.log('updateSeries() this.pointHistoryService.selectedPoint', this.pointHistoryService.selectedPoint);
-        this.pointHistoryService.passDraw = true;
-        let format = new WKT();
-        let wktRepresentation  = format.writeGeometry(this.pointHistory[index]);
-        this.mapService.loadPolygonFrom(wktRepresentation.toString())
-      }
-      console.log('updateSeries() task', task);
-      console.log('updateSeries() task.subtasks', task.subtasks);
-      console.log('updateSeries() this.pointHistory', this.pointHistory);
-      return {...task};
-    });
+    const wkt = this.chartStates[index]?.wkt
+
+    this.store$.dispatch(chartStore.setTimeseriesChecked({wkt, checked}))
   }
   public deletePoint(index: number) {
     console.log('delete', index);