From 4c28d97305192b0794cdb892852a5e8b5ecbd8cf Mon Sep 17 00:00:00 2001 From: tylercchase Date: Thu, 3 Aug 2023 13:39:10 -0400 Subject: [PATCH 1/4] feat: coherence layer opacity slider --- .../map-controls/map-controls.component.html | 10 ++++++++++ .../map/map-controls/map-controls.component.ts | 6 +++++- src/app/services/map/map.service.ts | 4 +++- src/app/store/map/map.action.ts | 8 ++++++++ src/app/store/map/map.effect.ts | 7 ++++++- src/app/store/map/map.reducer.ts | 18 +++++++++++++++++- 6 files changed, 49 insertions(+), 4 deletions(-) diff --git a/src/app/components/map/map-controls/map-controls.component.html b/src/app/components/map/map-controls/map-controls.component.html index 7212cd892..15939ffd3 100644 --- a/src/app/components/map/map-controls/map-controls.component.html +++ b/src/app/components/map/map-controls/map-controls.component.html @@ -105,6 +105,16 @@ color="primary" [disabled]="!(isBrowseOverlayEnabled$ | async)"> +
+ Opacity of Coherence Layers +
+ + diff --git a/src/app/components/map/map-controls/map-controls.component.ts b/src/app/components/map/map-controls/map-controls.component.ts index d15b1fb8e..fc512a3c5 100644 --- a/src/app/components/map/map-controls/map-controls.component.ts +++ b/src/app/components/map/map-controls/map-controls.component.ts @@ -55,6 +55,7 @@ export class MapControlsComponent implements OnInit, OnDestroy { startWith(null)); public isBrowseOverlayEnabled$: Observable = this.browseOverlayService.isBrowseOverlayEnabled$; + public isCoherenceOverlayEnabled$: Observable = this.mapService.hasCoherenceLayer$; public browseIndexingEnabled$ = combineLatest([ this.isBrowseOverlayEnabled$, @@ -67,7 +68,7 @@ export class MapControlsComponent implements OnInit, OnDestroy { private store$: Store, private mapService: services.MapService, private browseOverlayService: services.BrowseOverlayService, - private eventMonitoringService: services.SarviewsEventsService + private eventMonitoringService: services.SarviewsEventsService, ) { } ngOnInit() { @@ -154,6 +155,9 @@ export class MapControlsComponent implements OnInit, OnDestroy { this.store$.dispatch(new mapStore.SetBrowseOverlayOpacity(event.value)); } + public onSetCoherenceOpacity(event: MatSliderChange) { + this.store$.dispatch(new mapStore.SetCoherenceOverlayOpacity(event.value)); + } public onPinProduct(product_id: string) { this.store$.dispatch(new ToggleBrowseOverlay(product_id)); diff --git a/src/app/services/map/map.service.ts b/src/app/services/map/map.service.ts index d3fc5f27f..3732566c8 100644 --- a/src/app/services/map/map.service.ts +++ b/src/app/services/map/map.service.ts @@ -631,7 +631,9 @@ export class MapService { this.browseImageLayer?.setOpacity(opacity); this.pinnedProducts?.setOpacity(opacity); } - + public updateCoherenceOpacity(opacity: number) { + this.layerService.coherenceLayer?.setOpacity(opacity); + } public getAoiIntersectionMethod(geometryType: GeometryType) { if (geometryType === 'Point') { return this.getPointIntersection; diff --git a/src/app/store/map/map.action.ts b/src/app/store/map/map.action.ts index dcceea70d..e3ef15a2b 100644 --- a/src/app/store/map/map.action.ts +++ b/src/app/store/map/map.action.ts @@ -15,6 +15,7 @@ export enum MapActionType { SET_BROWSE_OVERLAYS = '[Map] Set Browse Overlays On Map', TOGGLE_BROWSE_OVERLAY = '[Map] Toggle Selected Browse Overlay', SET_BROWSE_OVERLAY_OPACITY = '[Map] Set Browse Overlay Opacity', + SET_COHERENCE_OVERLAY_OPACITY = '[Map] Set Coherence layer opacity', CLEAR_BROWSE_OVERLAYS = '[Map] Clear All Browse Overlays On Map', DRAW_NEW_POLYGON = '[Map] Set has user drawn new polygon', TOGGLE_OVERVIEW_MAP = '[Map] Toggle Overview Map' @@ -62,6 +63,12 @@ export class SetBrowseOverlayOpacity implements Action { constructor(public payload: number) {} } +export class SetCoherenceOverlayOpacity implements Action { + public readonly type = MapActionType.SET_COHERENCE_OVERLAY_OPACITY; + + constructor(public payload: number) {} +} + export class ToggleBrowseOverlay implements Action { public readonly type = MapActionType.TOGGLE_BROWSE_OVERLAY; @@ -100,6 +107,7 @@ export type MapActions = | ToggleBrowseOverlay | SetBrowseOverlays | SetBrowseOverlayOpacity + | SetCoherenceOverlayOpacity | ClearBrowseOverlays | DrawNewPolygon | ToggleOverviewMap; diff --git a/src/app/store/map/map.effect.ts b/src/app/store/map/map.effect.ts index 899981f0e..a2f561113 100644 --- a/src/app/store/map/map.effect.ts +++ b/src/app/store/map/map.effect.ts @@ -16,7 +16,7 @@ import { MapActionType, SetBrowseOverlayOpacity, SetBrowseOverlays, ToggleBrowse import { PinnedProduct } from '@services/browse-map.service'; import { getSelectedDataset } from '@store/filters'; import { getIsFiltersMenuOpen, getIsResultsMenuOpen } from '@store/ui'; -import { ClearBrowseOverlays } from './map.action'; +import { ClearBrowseOverlays, SetCoherenceOverlayOpacity } from './map.action'; @Injectable() export class MapEffects { @@ -46,6 +46,11 @@ export class MapEffects { tap(action => this.mapService.updateBrowseOpacity(action.payload)) ), {dispatch: false}); + public onSetCoherenceOpacity = createEffect( () => this.actions$.pipe( + ofType(MapActionType.SET_COHERENCE_OVERLAY_OPACITY), + tap(action => this.mapService.updateCoherenceOpacity(action.payload)) + ), {dispatch: false}) + public onSetSelectedScene = createEffect(() => this.actions$.pipe( ofType(ScenesActionType.SET_SELECTED_SCENE), map(action => action.payload), diff --git a/src/app/store/map/map.reducer.ts b/src/app/store/map/map.reducer.ts index ee948b975..6bbd5b4de 100644 --- a/src/app/store/map/map.reducer.ts +++ b/src/app/store/map/map.reducer.ts @@ -13,6 +13,7 @@ export interface MapState { gridLinesActive: boolean; isMapInitialized: boolean; browseOverlayOpacity: number; + coherenceOverlayOpacity: number; overviewMapOpen: boolean; } @@ -24,6 +25,8 @@ export const initState: MapState = { gridLinesActive: false, isMapInitialized: false, browseOverlayOpacity: 1.0, + coherenceOverlayOpacity: 1.0, + overviewMapOpen: false }; @@ -88,7 +91,16 @@ export function mapReducer(state = initState, action: MapActions): MapState { browseOverlayOpacity }; } - + + case MapActionType.SET_COHERENCE_OVERLAY_OPACITY: { + const coherenceOverlayOpacity = action.payload < 0 + ? 0 : action.payload > 1.0 + ? 1.0 : action.payload; + return { + ...state, + coherenceOverlayOpacity + }; + } case MapActionType.TOGGLE_OVERVIEW_MAP: { return { ...state, @@ -144,3 +156,7 @@ export const getBrowseOverlayOpacity = createSelector( getMapState, (state: MapState) => state.browseOverlayOpacity ); +export const getCoherenceOverlayOpacity = createSelector( + getMapState, + (state: MapState) => state.coherenceOverlayOpacity +); \ No newline at end of file From 18925bcd84e07e795d445c54d1925be5bf7aa607 Mon Sep 17 00:00:00 2001 From: tylercchase Date: Thu, 3 Aug 2023 13:46:43 -0400 Subject: [PATCH 2/4] fix: slider disabled when not using --- src/app/components/map/map-controls/map-controls.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/map/map-controls/map-controls.component.html b/src/app/components/map/map-controls/map-controls.component.html index 15939ffd3..a8b6da9b2 100644 --- a/src/app/components/map/map-controls/map-controls.component.html +++ b/src/app/components/map/map-controls/map-controls.component.html @@ -113,7 +113,7 @@ name="layerType" (input)="onSetCoherenceOpacity($event)" color="primary" - [disabled]="!(isBrowseOverlayEnabled$ | async)"> + [disabled]="!(isCoherenceOverlayEnabled$| async)"> From 7488426e6fafd13c27a5f6454bcb2eb1cae15883 Mon Sep 17 00:00:00 2001 From: tylercchase Date: Thu, 3 Aug 2023 14:06:29 -0400 Subject: [PATCH 3/4] style: radio instead of checkbox for coherence --- .../map-controls/layer-selector/layer-selector.component.html | 4 ++-- .../map/map-controls/layer-selector/layer-selector.module.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) 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 5f1de7a5f..e781f7006 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 @@ -53,10 +53,10 @@ (click)="onToggleCoherenceLayer(layer)" class="control-mat-checkbox-toggle" mat-menu-item> - - + {{ layer | translate }} diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.module.ts b/src/app/components/map/map-controls/layer-selector/layer-selector.module.ts index 0f49af92c..5b4f391b2 100644 --- a/src/app/components/map/map-controls/layer-selector/layer-selector.module.ts +++ b/src/app/components/map/map-controls/layer-selector/layer-selector.module.ts @@ -9,6 +9,7 @@ import { LayerSelectorComponent } from './layer-selector.component'; import { GridlinesSelectorModule } from '@components/map/map-controls/gridlines-selector'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { SharedModule } from "@shared"; +import {MatRadioModule} from '@angular/material/radio'; @NgModule({ declarations: [ @@ -20,6 +21,7 @@ import { SharedModule } from "@shared"; MatMenuModule, MatSharedModule, MatCheckboxModule, + MatRadioModule, GridlinesSelectorModule, SharedModule ], From 4956441e842d38d69b2b8afdc06017ab80fcba28 Mon Sep 17 00:00:00 2001 From: tylercchase Date: Thu, 3 Aug 2023 14:18:52 -0400 Subject: [PATCH 4/4] chore: add coherence layer key --- src/app/components/map/map-controls/map-controls.component.html | 2 +- src/assets/i18n/en.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/map/map-controls/map-controls.component.html b/src/app/components/map/map-controls/map-controls.component.html index a8b6da9b2..d6555120c 100644 --- a/src/app/components/map/map-controls/map-controls.component.html +++ b/src/app/components/map/map-controls/map-controls.component.html @@ -106,7 +106,7 @@ [disabled]="!(isBrowseOverlayEnabled$ | async)">
- Opacity of Coherence Layers + {{ 'OPACITY_OF_COHERENCE_LAYER' | translate }}