Merge pull request #1779 from asfadmin/tcc-coherence-opacity

Coherence Layer Opacity

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>
-        <mat-checkbox class="checkbox"
+        <mat-radio-button
           [disabled]="true"
           [checked]="coherenceLayerMonths === layer">
-        </mat-checkbox>
+        </mat-radio-button>
 
         {{ layer |  translate }}
       </button>

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
   ],

src/app/components/map/map-controls/map-controls.component.html

@@ -105,6 +105,16 @@
                               color="primary"
                               [disabled]="!(isBrowseOverlayEnabled$ | async)">
                   </mat-slider>
+                  <div class="opacity-slider-title">
+                    {{ 'OPACITY_OF_COHERENCE_LAYER' | translate }}
+                  </div>
+                  <mat-slider thumbLabel tickInterval="0.1" step="0.05" value="1" min="0.0" max="1.0"
+                              class="opacity-slider"
+                              name="layerType"
+                              (input)="onSetCoherenceOpacity($event)"
+                              color="primary"
+                              [disabled]="!(isCoherenceOverlayEnabled$| async)">
+                  </mat-slider>
                 </mat-menu>
               </div>
             </div>

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<boolean> = this.browseOverlayService.isBrowseOverlayEnabled$;
+  public isCoherenceOverlayEnabled$: Observable<any> = this.mapService.hasCoherenceLayer$;
 
   public browseIndexingEnabled$ = combineLatest([
     this.isBrowseOverlayEnabled$,
@@ -67,7 +68,7 @@ export class MapControlsComponent implements OnInit, OnDestroy {
     private store$: Store<AppState>,
     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));

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;

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;

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<SetCoherenceOverlayOpacity>(MapActionType.SET_COHERENCE_OVERLAY_OPACITY),
+    tap(action => this.mapService.updateCoherenceOpacity(action.payload))
+  ), {dispatch: false})
+
   public onSetSelectedScene = createEffect(() => this.actions$.pipe(
     ofType<SetSelectedScene>(ScenesActionType.SET_SELECTED_SCENE),
     map(action => action.payload),

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
+);

src/assets/i18n/en.json

@@ -500,6 +500,7 @@
   "ONLY_DISPLAY_SCENES_WITH_A_BROWSE_IMAGE": "Only display scenes with a browse image",
   "OPACITY": "Opacity",
   "OPACITY_OF_BROWSE_IMAGES": "Opacity of Browse Images",
+  "OPACITY_OF_COHERENCE_LAYER": "Opacity of Coherence Layer",
   "OPEN_IN_IMAGE_VIEWER": "Open in Image Viewer",
   "OPEN_LINK_TO_DOCUMENTATION": "Open link to documentation.",
   "OPEN_MANUAL": "Open Manual",