Merge pull request #2007 from asfadmin/kim/displacement

color now unified across chart, map, and results menu
asfadmin · Nov 13, 2024 · 4c43ab3 · 4c43ab3
2 parents 956630d + 5f27cf0
commit 4c43ab3
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 44 deletions.
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
@@ -37,7 +37,7 @@
               <li>
                 <mat-checkbox [checked]="point.checked"
                               (change)="updateSeries($event.checked, $index)">
-                  <mat-icon class="ts-wkt-icon">place</mat-icon>
+                  <mat-icon class="ts-wkt-icon" [style.color]="point.color">place</mat-icon>
                   <span class="ts-wkt-label">
                     {{'SERIES' | translate}} {{point.seriesNumber}}
                   </span>

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -24,6 +24,7 @@ interface TimeSeriesData {
   id: string,
   base: number,
   seriesNumber: number,
+  color: string,
 }
 
 interface DataReady {
@@ -76,7 +77,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   private data: any;
   private lines;
   private points;
-  public gColorPalette: any;
   public startDate: Date = new Date();
   public endDate: Date = new Date();
   public lastStartDate: Date = new Date();
@@ -91,7 +91,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   private yAxisTitle = '';
 
   private subs = new SubSink();
-  private allGroup: string[];
+  // private allGroup: string[];
 
   private baseData: TimeSeriesData;
   constructor(
@@ -245,6 +245,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
                 'short_wavelength_displacement': result.point[key].short_wavelength_displacement - (this.baseData?.base ?? 0),
                 'date': result.point[key].secondary_datetime,
                 'seriesNumber': result.state.seriesNumber,
+                'color': result.state.color,
                 'base': result.point[key].short_wavelength_displacement,
                 'id': key + result.point[key].short_wavelength_displacement
               });
@@ -311,18 +312,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     this.toolTip = toolTip
     this.toolTip.attr('transform', `translate(0, 0)`).style('text-anchor', 'middle').style('z-index', 100).style('opacity', 0)
 
-    this.allGroup = [...new Set(this.dataReadyForChart.map(d => d.name))];
+    // this.allGroup = [...new Set(this.dataReadyForChart.map(d => d.name))];
 
     // this.pointGraph = this.clipContainer.append("pointGraph");
     this.lineGraph = this.clipContainer.append("path");
 
-    // A color scale: one color for each group
-    const colorPalette = d3.scaleOrdinal()
-      .domain(this.allGroup)
-      .range(d3.schemeSet2);
-
-    this.gColorPalette = colorPalette;
-
     const self = this;
 
     this.points = this.dataSource.map((d) => [this.x(new Date(d.date)), this.y(d.short_wavelength_displacement), d.aoi]);
@@ -390,7 +384,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
           return line(d.values)
         })
         // @ts-ignore
-        .attr("stroke", function (d: DataReady) { return colorPalette(d.name) })
+        .attr("stroke", function (d: DataReady) { return d.color })
         .style("opacity", (d: DataReady) => d.opacity)
         .style("stroke-width", 1)
         .style("fill", "none")
@@ -405,7 +399,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       .enter()
       .append('g')
       .attr('clip-path', 'url(#clip)')
-      .style('fill', (d): string => { return <string>colorPalette(d.name) })
+      .style('fill', (d) : string=>  { return d.color })
       .style('opacity', (d) => d.opacity)
       .attr('class', (d): string => { return d.name.replace(/\W/g, '') })
       .selectAll('circle')
@@ -426,7 +420,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
         toolTip.interrupt();
         toolTip
           .style('opacity', .9);
-        toolTip.html(`<div style="text-align: left"><b>Series ${p.seriesNumber}</b><br>${self.tooltipDateFormat(date)}, ${p.short_wavelength_displacement.toFixed(5)} meters</div>`);
+        toolTip.html(`<div style="text-align: left">${self.tooltipDateFormat(date)}, ${p.short_wavelength_displacement.toFixed(5)} meters<br><b>Series ${p.seriesNumber}</b></div>`);
         self.updateTooltip();
       })
       .on('mouseleave', function (_) {
@@ -458,7 +452,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     lines.style("stroke", (d: DataReady) => {
       if (d.name === k) {
         dClassName = '.' + d.name.replace(/\W/g, '');
-        colorName = this.gColorPalette(d.name);
+        colorName = d.color;
         return colorName;
       }
       return unSelectedColor;
@@ -484,13 +478,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   }
 
   private pointerLeft(lines, _dots) {
-    let colorName: string;
     let dClassName: string;
     lines.style("stroke", (d: DataReady) => {
       dClassName = '.' + d.name.replace(/\W/g, '');
-      colorName = this.gColorPalette(d.name);
-      this.svg.selectAll(dClassName + ' ' + 'circle').style("fill", colorName);
-      return colorName;
+      this.svg.selectAll(dClassName + ' ' + 'circle').style("fill", d.color);
+      return d.color;
     });
   }
 

diff --git a/src/app/models/timeseries.model.ts b/src/app/models/timeseries.model.ts
@@ -2,7 +2,7 @@ import { SimpleGeometry } from "ol/geom"
 
 export interface timeseriesChartItemState {
     checked: boolean,
-    color: string,
+    color?: string,
     name: string,
     wkt: string,
     geoemetry: SimpleGeometry,

diff --git a/src/app/services/map/map.service.ts b/src/app/services/map/map.service.ts
@@ -796,32 +796,21 @@ export class MapService {
         return f.get('seriesColor') ?? "#000000";
       }
       let layerStyle = new Style({
-        // image: symbol,
         image: new CircleStyle({
           stroke: new Stroke({
-            // color: '#000000',
             color: '#ffcc33',
-            width: 5,
-            lineDash: [3],
-            lineDashOffset: 5
+            width: 2,
           }),
-          radius: 7,
+          radius: 10,
           fill: new Fill({
-            color: '#236192',
-            // color: '#ffcc33',
+            color: textColorFunction(feature),
           }),
         }),
         text: new olText({
           overflow: true,
-          offsetY: 15,
-          offsetX: -15,
-          font: '25px sans-serif',
-          stroke: new Stroke({
-            color: '#000000',
-            width: 3
-          }),
+          font: '13px sans-serif',
           fill: new Fill({
-            color: textColorFunction(feature),
+            color: '#000000',
           }),
           text: textFunction(feature)
         })

diff --git a/src/app/services/point-history.service.ts b/src/app/services/point-history.service.ts
@@ -38,7 +38,7 @@ export class PointHistoryService {
     const format = new WKT()
     const wkt = format.writeGeometry(point)
     this.history.push({point, wkt});
-    this.store$.dispatch(addTimeseriesState({item: {geoemetry: point, checked: true, seriesNumber, wkt: wkt, color: '#FFFFFF', name: `Series ${this.history.length}`}}))
+    this.store$.dispatch(addTimeseriesState({item: {geoemetry: point, checked: true, seriesNumber, wkt: wkt, name: `Series ${seriesNumber}`}}))
     this.history$.next(this.history);
     this.savePoints();
   }

diff --git a/src/app/store/charts/charts.action.ts b/src/app/store/charts/charts.action.ts
@@ -9,5 +9,6 @@ export const addTimeseriesState = createAction('[Chart] add checked timeseries',
 export const removeTimeseriesState = createAction('[Chart] removes timeseries by wkt', props<{'wkt': string}>())
 export const setTimeseriesChecked = createAction('[Chart] set single timeseries as checked/unchecked', props<{'wkt': string, 'checked': boolean}>())
 export const setAllTimeseriesChecked = createAction('[Chart] set all timeseries as checked/unchecked', props<{'checked': boolean}>())
+export const setTimeseriesColor = createAction('[Chart] set the color of a single timeseries', props<{'wkt': string, 'color': string}>())
 export const setChartOutOfDate = createAction('[Chart] mark chart as out of date')
 export const setChartUpToDate = createAction('[Chart], mark chart as up to date')
diff --git a/src/app/store/charts/charts.effect.ts b/src/app/store/charts/charts.effect.ts
@@ -2,14 +2,28 @@ import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as chartActions from './charts.action';
 import { NetcdfService } from '@services';
-import { tap } from 'rxjs';
+import { 
+    filter,
+    // filter, 
+    map, tap } from 'rxjs';
+import * as d3 from 'd3';
 @Injectable()
 export class ChartsEffects {
+    private colorPalette = d3.scaleOrdinal()
+    .range(d3.schemeSet2);
+
     updateTimeseriesCache = createEffect(() => this.actions$.pipe(
         ofType(chartActions.removeTimeseriesState),
         tap(({wkt}) => this.netcdfService.removeFromCache(wkt)),
     ), {dispatch: false});
 
+    assignColor = createEffect(() => this.actions$.pipe(
+        ofType(chartActions.addTimeseriesState),
+        filter(action => action.item.color !== null),
+        map((new_series) => {
+            return chartActions.setTimeseriesColor({'wkt': new_series.item.wkt, 'color': this.colorPalette(new_series.item.seriesNumber.toString()) as string})
+        })
+    ))
     constructor(
         private actions$: Actions,
         private netcdfService: NetcdfService

diff --git a/src/app/store/charts/charts.reducer.ts b/src/app/store/charts/charts.reducer.ts
@@ -45,14 +45,20 @@ export const chartsReducer = createReducer(
       prev[curr.wkt] = { ...curr, checked }
       return prev
     }, {});
-    return {...state, seriesStates}
+    return { ...state, seriesStates }
   }),
-  on(chartActions.setChartOutOfDate, (state) => ({...state, outOfDate: true})),
-  on(chartActions.setChartUpToDate, (state) => ({...state, outOfDate: false})),
-  on(chartActions.removeTimeseriesState, (state, {wkt}) => {
-    const seriesStates = {...state.seriesStates}
+  on(chartActions.setChartOutOfDate, (state) => ({ ...state, outOfDate: true })),
+  on(chartActions.setChartUpToDate, (state) => ({ ...state, outOfDate: false })),
+  on(chartActions.removeTimeseriesState, (state, { wkt }) => {
+    const seriesStates = { ...state.seriesStates }
     delete seriesStates[wkt]
-    return {...state, seriesStates}
+    return { ...state, seriesStates }
+  }),
+  on(chartActions.setTimeseriesColor, (state, { wkt, color }) => {
+    const seriesStates = { ...state.seriesStates };
+    seriesStates[wkt] = { ...seriesStates[wkt], color };
+
+    return { ...state, seriesStates };
   }),
   on(chartActions.reset, (_) => initialState)
 );