From dce082c8fa77a6fa50cce6d161bcb82d79191a56 Mon Sep 17 00:00:00 2001 From: William Horn Date: Mon, 18 Nov 2024 08:07:21 -0900 Subject: [PATCH 1/5] feat: disp layer selector can only have def or vel selected at once --- .../displacement-layers.component.html | 6 ++- .../displacement-layers.component.ts | 25 +++++++++- .../displacement-layers.module.ts | 2 + .../layer-selector.component.html | 47 ------------------- .../layer-selector.component.ts | 11 ----- src/app/services/map/map.service.ts | 18 +++++-- 6 files changed, 44 insertions(+), 65 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 index 7d3a6f80b..52c186d1a 100644 --- a/src/app/components/map/displacement-layers/displacement-layers.component.html +++ b/src/app/components/map/displacement-layers/displacement-layers.component.html @@ -1,12 +1,14 @@
- +
Cumulative Deformation
- +
Cumulative Velocity diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.ts b/src/app/components/map/displacement-layers/displacement-layers.component.ts index 71512a66e..826b18e85 100644 --- 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,5 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { SubSink } from 'subsink'; import { MapService } from '@services'; import * as models from '@models'; @@ -9,12 +10,28 @@ import * as models from '@models'; templateUrl: './displacement-layers.component.html', styleUrl: './displacement-layers.component.scss' }) -export class DisplacementLayersComponent { +export class DisplacementLayersComponent implements OnInit, OnDestroy { public flightDir = models.FlightDirection.ASCENDING; + public displacementOverview: models.DisplacementLayerTypes | null = null; + + public DispLayerTypes = models.DisplacementLayerTypes; + + private subs = new SubSink(); + constructor( private mapService: MapService, ) { } + ngOnInit() { + this.subs.add( + this.mapService.displacementOverview$.subscribe( + t => { + this.displacementOverview = t; + } + ) + ); + } + public onUpdatePriority(isChecked: boolean): void { if(isChecked) { this.mapService.enablePriority(); @@ -47,4 +64,8 @@ export class DisplacementLayersComponent { public clearDisplacementLayer() { this.mapService.clearDisplacementOverview(); } + + ngOnDestroy() { + this.subs.unsubscribe(); + } } diff --git a/src/app/components/map/displacement-layers/displacement-layers.module.ts b/src/app/components/map/displacement-layers/displacement-layers.module.ts index a9802bef1..263f3add7 100644 --- a/src/app/components/map/displacement-layers/displacement-layers.module.ts +++ b/src/app/components/map/displacement-layers/displacement-layers.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatMenuModule } from '@angular/material/menu'; +import { MatRadioModule } from '@angular/material/radio'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { DisplacementLayersComponent } from './displacement-layers.component'; @@ -16,6 +17,7 @@ import { SharedModule } from "@shared"; CommonModule, MatMenuModule, MatCheckboxModule, + MatRadioModule, MatSharedModule, SharedModule, DocsModalModule, diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.html b/src/app/components/map/map-controls/layer-selector/layer-selector.component.html index 5ef86bee5..114d1a6ba 100644 --- a/src/app/components/map/map-controls/layer-selector/layer-selector.component.html +++ b/src/app/components/map/map-controls/layer-selector/layer-selector.component.html @@ -62,54 +62,7 @@ - - - - - - - - + } + @else { + + } +
@@ -20,4 +28,4 @@
- \ No newline at end of file + diff --git a/src/app/components/header/timeseries-header/timeseries-header.component.ts b/src/app/components/header/timeseries-header/timeseries-header.component.ts index cb629a77f..8397808e0 100644 --- a/src/app/components/header/timeseries-header/timeseries-header.component.ts +++ b/src/app/components/header/timeseries-header/timeseries-header.component.ts @@ -1,21 +1,26 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { SubSink } from 'subsink'; import { Store } from '@ngrx/store'; import { AppState } from '@store'; import * as uiStore from '@store/ui'; import * as searchStore from '@store/search'; +import * as mapStore from '@store/map'; import { ScreenSizeService } from '@services'; -import { Breakpoints } from '@models'; +import { Breakpoints, MapDrawModeType, MapInteractionModeType } from '@models'; @Component({ selector: 'app-timeseries-header', templateUrl: './timeseries-header.component.html', styleUrls: ['./timeseries-header.component.scss', '../header.component.scss'] }) -export class TimeseriesHeaderComponent { +export class TimeseriesHeaderComponent implements OnInit, OnDestroy { public breakpoint$ = this.screenSize.breakpoint$; public breakpoints = Breakpoints; + public isAddingPoints = false; + + private subs = new SubSink(); constructor( private store$: Store, @@ -23,11 +28,32 @@ export class TimeseriesHeaderComponent { ) { } ngOnInit() { + this.subs.add( + this.store$.select(mapStore.getMapInteractionMode).subscribe( + mode => this.isAddingPoints = mode === MapInteractionModeType.DRAW + ) + ); + } + public onAddPointsMode(): void { + console.log('points'); + this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.DRAW)); + this.store$.dispatch(new mapStore.SetMapDrawMode(MapDrawModeType.POINT)); + } + + public onStopAddPoints(): void { + this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE)); + } + + public onToggleFiltersMenu(): void { this.store$.dispatch(new uiStore.OpenFiltersMenu()); } public isKioskMode$ = this.store$.select(searchStore.getKioskMode); + + ngOnDestroy() { + this.subs.unsubscribe(); + } } diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html index 77c5ebd36..67d7f51dc 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html @@ -5,14 +5,6 @@ -
- @if(!isAddingPoints) { - - } - @else { - - } -
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 index e4ab44c07..c01fb02dd 100644 --- 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 @@ -6,14 +6,13 @@ import { Store } from '@ngrx/store'; import { AppState } from '@store'; import * as uiStore from '@store/ui'; import * as searchStore from '@store/search'; -import * as mapStore from '@store/map'; import * as chartStore from '@store/charts'; import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService, WktService } from '@services'; -import { Breakpoints, SearchType, MapInteractionModeType, MapDrawModeType } from '@models'; +import { Breakpoints, SearchType } from '@models'; import { SubSink } from 'subsink'; @@ -107,12 +106,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy { ) ); - this.subs.add( - this.store$.select(mapStore.getMapInteractionMode).subscribe( - mode => this.isAddingPoints = mode === MapInteractionModeType.DRAW - ) - ); - this.subs.add( this.store$.select(searchStore.getSearchType).subscribe( searchType => this.searchType = searchType @@ -203,15 +196,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy { window.open(url); } - public onAddPointsMode(): void { - this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.DRAW)); - this.store$.dispatch(new mapStore.SetMapDrawMode(MapDrawModeType.POINT)); - } - - public onStopAddPoints(): void { - this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE)); - } - public updateChart(): void { let allPointsData = []; for (const series of this.chartStates) { From 0ba32512b197317654062d453e8381e3c1ea70e5 Mon Sep 17 00:00:00 2001 From: Kim Date: Mon, 18 Nov 2024 09:32:36 -0900 Subject: [PATCH 3/5] re-adds opacity to checkbox->chart behavior --- .../timeseries-chart/timeseries-chart.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts index 5c5b35d53..c6f58021c 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts @@ -257,7 +257,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { return 1 } }) - this.dataReadyForChart.push({ name: aoi, values: this.timeSeriesData, color: result.state.color, opacity: result.state.checked ? 1.0 : 0.4}); + this.dataReadyForChart.push({ name: aoi, values: this.timeSeriesData, color: result.state.color, opacity: result.state.checked ? 1.0 : 0.2}); // this.averageData = ({ // ...data.mean // }) @@ -386,7 +386,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { }) // @ts-ignore .attr('stroke', function (d: DataReady) { return d.color }) - // .style('opacity', (d: DataReady) => d.opacity) + .style('opacity', (d: DataReady) => d.opacity) .style('stroke-width', 1) .style('fill', 'none') .style('shape-rendering', 'geometricprecision') @@ -402,7 +402,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { .append('g') .attr('clip-path', 'url(#clip)') .style('fill', (d) : string=> { return d.color }) - // .style('opacity', (d) => d.opacity) + .style('opacity', (d) => d.opacity) .attr('class', (d): string => { return d.name.replace(/\W/g, '') + ' dotsChildren' }) .selectAll('circle') .data(d => d.values) @@ -521,7 +521,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { .attr("d", function (d) { // @ts-ignore return line(d.values) }) - // .style('opacity', (d: DataReady) => d.opacity) + .style('opacity', (d: DataReady) => d.opacity) } From f45274c5908270f5c1c251d0f26dba6708b55100 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Mon, 18 Nov 2024 13:46:00 -0800 Subject: [PATCH 4/5] Displacement chart tooltip in static location --- .../timeseries-chart/timeseries-chart.component.html | 6 +++++- .../timeseries-chart/timeseries-chart.component.scss | 11 +++++++++++ .../timeseries-chart/timeseries-chart.component.ts | 12 ++++++++---- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html index 42bd25add..a800fa16e 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.html +++ b/src/app/components/timeseries-chart/timeseries-chart.component.html @@ -1,4 +1,8 @@
+
+ Series: {{hoveredData?.seriesNumber}},  {{tooltipDateFormat(hoveredDate)}},  {{hoveredData?.short_wavelength_displacement.toFixed(2)}} meters
+ Best Fit: y = ax + b +
@@ -16,4 +20,4 @@ -
\ No newline at end of file +
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss index 012bd096e..2a87396f8 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss @@ -11,6 +11,17 @@ width: 100%; } +.chart-details { + position: absolute; + margin-top: 15px; + margin-left: 70px; + padding: 5px; + color: #65665c; + font-size: 14px; + font-style: italic; + background-color: #f5f5f5; +} + ::ng-deep .timeseries-base { @include themify($themes) { fill: themed('blue-link'); diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts index c6f58021c..b13470c6a 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts @@ -74,6 +74,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { private thing: d3.Selection private hoveredElement; public hoveredData; + public hoveredDate; private data: any; private lines; private points; @@ -418,15 +419,16 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { .on('mouseover', function (_event: any, p: TimeSeriesData) { self.hoveredElement = this; self.hoveredData = p; - const date = new Date(p.date); + self.hoveredDate = new Date(p.date); toolTip.interrupt(); toolTip .style('opacity', .9); - toolTip.html(`
${self.tooltipDateFormat(date)}, ${p.short_wavelength_displacement.toFixed(2)} meters
Series ${p.seriesNumber}
`); + // toolTip.html(`
${self.tooltipDateFormat(self.hoveredDate)}, ${p.short_wavelength_displacement.toFixed(2)} meters
Series ${p.seriesNumber}
`); self.updateTooltip(); }) .on('mouseleave', function (_) { self.hoveredData = null; + self.hoveredDate = null; toolTip.transition() .duration(500) .style('opacity', 0); @@ -556,7 +558,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { this.drawChart(); } - private tooltipDateFormat(date) { + public tooltipDateFormat(_date) { + if (!_date) { return; } function join(t, a, s) { function format(m) { const f = new Intl.DateTimeFormat('en', m); @@ -566,7 +569,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { } const dateFormat = [{ month: 'short' }, { day: 'numeric' }, { year: 'numeric' }]; - return join(date, dateFormat, ' '); + return join(_date, dateFormat, ' '); } public resetBasePoint() { @@ -578,4 +581,5 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } + protected readonly Date = Date; } From 2280670b30771d73d8bb6a718d26a39e471fdcc8 Mon Sep 17 00:00:00 2001 From: Kim Date: Mon, 18 Nov 2024 16:27:45 -0900 Subject: [PATCH 5/5] update api endpoint --- src/app/services/netcdf-service.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/netcdf-service.service.ts b/src/app/services/netcdf-service.service.ts index d6143b8a6..67d1e6735 100644 --- a/src/app/services/netcdf-service.service.ts +++ b/src/app/services/netcdf-service.service.ts @@ -15,7 +15,7 @@ import WKT from 'ol/format/WKT'; providedIn: 'root' }) export class NetcdfService { - private url: string = 'https://qapbt7mupnms222yprxdwmq63u0ojmkc.lambda-url.us-west-2.on.aws/' //'https://ztcnv66fekaaijerj5hhytfrdu0xcuho.lambda-url.us-east-1.on.aws/' + private url: string = 'https://yhiuvmgxrec5dbkwjwpdpkwysy0aopmh.lambda-url.us-west-2.on.aws/' private itemsEndpoint: string = 'items/' private timeSeriesEndpoint: string = 'timeseries' private files: string[] = [""] //, "20221107_20230130.unw.nc", "20221107_20230106.unw.nc", "20221107_20230729.unw.nc", "20221107_20230319.unw.nc", "20221107_20221213.unw.nc", "20221107_20230530.unw.nc", "20221107_20230717.unw.nc", "20221107_20230412.unw.nc", "20221107_20230506.unw.nc", "20221107_20230223.unw.nc", "20221107_20230211.unw.nc", "20221107_20230331.unw.nc", "20221107_20230705.unw.nc"]