feat: allow for layer opacity to be changd

src/ui/layerbrowser/layerbrowser.component.ts

@@ -8,6 +8,7 @@ import { NG_VIEWER_ACTION_TYPES } from "src/services/state/ngViewerState.store";
 import { getViewer } from "src/util/fn";
 import { INgLayerInterface } from "../../atlasViewer/atlasViewer.component";
 import { FORCE_SHOW_SEGMENT, getNgIds, isDefined, REMOVE_NG_LAYER, safeFilter, ViewerStateInterface } from "../../services/stateStore.service";
+import { MatSliderChange } from "@angular/material";
 
 @Component({
   selector : 'layer-browser',
@@ -96,7 +97,7 @@ export class LayerBrowser implements OnInit, OnDestroy {
         const baseNameSet = new Set(baseNgLayerNames)
         return loadedNgLayers.filter(l => !baseNameSet.has(l.name))
       }),
-      distinctUntilChanged(),
+      distinctUntilChanged()
     )
 
     /**
@@ -132,6 +133,8 @@ export class LayerBrowser implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.forceShowSegment$.subscribe(state => this.forceShowSegmentCurrentState = state),
     )
+
+    this.viewer = getViewer()
   }
 
   public ngOnDestroy() {
@@ -153,16 +156,17 @@ export class LayerBrowser implements OnInit, OnDestroy {
     }
   }
 
+  public viewer: any
+
   public toggleVisibility(layer: any) {
-    const viewer = getViewer()
     const layerName = layer.name
     if (!layerName) {
       this.log.error('layer name not defined', layer)
       return
     }
-    const ngLayer = viewer.layerManager.getLayerByName(layerName)
+    const ngLayer = this.viewer.layerManager.getLayerByName(layerName)
     if (!ngLayer) {
-      this.log.error('ngLayer could not be found', layerName, viewer.layerManager.managedLayers)
+      this.log.error('ngLayer could not be found', layerName, this.viewer.layerManager.managedLayers)
     }
     ngLayer.setVisible(!ngLayer.visible)
   }
@@ -205,6 +209,24 @@ export class LayerBrowser implements OnInit, OnDestroy {
     })
   }
 
+  public changeOpacity(layerName:string, event:MatSliderChange){
+    const { value } = event
+    const l = this.viewer.layerManager.getLayerByName(layerName)
+    if (!l) return
+
+    if (typeof l.layer.opacity === 'object') {
+      l.layer.opacity.value = value
+    } else if (typeof l.layer.displayState === 'object') {
+      l.layer.displayState.selectedAlpha = value
+    } else {
+      this.log.warn({
+        msg: `layer does not belong anywhere`,
+        layerName,
+        layer: l
+      })
+    }
+  }
+
   /**
    * TODO use observable and pipe to make this more perf
    */
@@ -235,3 +257,18 @@ export class LockedLayerBtnClsPipe implements PipeTransform {
     return (lockedLayers && new Set(lockedLayers).has(ngLayer.name)) || false
   }
 }
+
+@Pipe({
+  name: 'getInitialLayerOpacityPipe'
+})
+
+export class GetInitialLayerOpacityPipe implements PipeTransform{
+  public transform(viewer: any, layerName: string):number{
+    if (!viewer) return 0
+    const l = viewer.layerManager.getLayerByName(layerName)
+    if (!l || !l.layer) return 0
+    if (typeof l.layer.opacity === 'object') return l.layer.opacity.value
+    else if (typeof l.layer.displayState === 'object') return l.layer.displayState.selectedAlpha.value
+    else return 0
+  }
+}

src/ui/layerbrowser/layerbrowser.template.html

@@ -7,6 +7,20 @@
   <mat-list *ngIf="nonBaseNgLayers.length > 0; else noLayerPlaceHolder">
     <mat-list-item *ngFor="let ngLayer of nonBaseNgLayers" class="matListItem">
 
+      <!-- toggle opacity -->
+      <div matTooltip="opacity">
+
+        <mat-slider
+          [disabled]="!ngLayer.visible"
+          min="0"
+          max="1"
+          (input)="changeOpacity(ngLayer.name, $event)"
+          [value]="viewer | getInitialLayerOpacityPipe: ngLayer.name"
+          step="0.01">
+
+        </mat-slider>
+      </div>
+
       <!-- toggle visibility -->
 
       <button

src/ui/ui.module.ts

@@ -18,7 +18,7 @@ import { SortDataEntriesToRegion } from "../util/pipes/sortDataEntriesIntoRegion
 import { CitationsContainer } from "./citation/citations.component";
 import { KgEntryViewer } from "./kgEntryViewer/kgentry.component";
 import { SubjectViewer } from "./kgEntryViewer/subjectViewer/subjectViewer.component";
-import { LayerBrowser, LockedLayerBtnClsPipe } from "./layerbrowser/layerbrowser.component";
+import { LayerBrowser, LockedLayerBtnClsPipe, GetInitialLayerOpacityPipe } from "./layerbrowser/layerbrowser.component";
 import { LandmarkUnit } from "./nehubaContainer/landmarkUnit/landmarkUnit.component";
 import { PluginBannerUI } from "./pluginBanner/pluginBanner.component";
 
@@ -155,6 +155,7 @@ import { SimpleRegionComponent } from "./parcellationRegion/regionSimple/regionS
     TemplateParcellationHasMoreInfo,
     HumanReadableFileSizePipe,
     ReorderPanelIndexPipe,
+    GetInitialLayerOpacityPipe,
 
     /* directive */
     DownloadDirective,