Merge pull request #1360 from FZJ-INM1-BDA/feat_opacitySlider

feat: show opacity slider

deploy/csp/index.js

@@ -115,7 +115,7 @@ module.exports = {
           'https://unpkg.com/d3@6.2.0/', // required for preview component
           'https://unpkg.com/mathjax@3.1.2/', // math jax
           'https://unpkg.com/three-surfer@0.0.13/dist/bundle.js', // for threeSurfer (freesurfer support in browser)
-          'https://unpkg.com/ng-layer-tune@0.0.13/dist/ng-layer-tune/', // needed for ng layer control
+          'https://unpkg.com/ng-layer-tune@0.0.14/dist/ng-layer-tune/', // needed for ng layer control
           'https://unpkg.com/hbp-connectivity-component@0.6.6/', // needed for connectivity component
           (req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
           ...SCRIPT_SRC,

docs/releases/v2.12.0.md

@@ -2,6 +2,7 @@
 
 ## Feature
 
+- added opacity slider for external volumes, even if the more detail is collapsed.
 - enable rat connectivity
 - added visual indicators for selected subject and dataset in connectivity browser
 

src/extra_styles.css

@@ -821,10 +821,10 @@ mat-list.sm mat-list-item
   display: grid;
 }
 
-.grid.grid-col-3
+.grid.grid-col-4
 {
   grid-auto-columns: 1fr;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto auto auto;
   gap: 0.2rem 0.2rem;
 }
 

src/index.html

@@ -14,7 +14,7 @@
   <script src="extra_js.js"></script>
   <script src="https://unpkg.com/kg-dataset-previewer@1.2.0/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer></script>
   <script src="https://unpkg.com/three-surfer@0.0.13/dist/bundle.js" defer></script>
-  <script type="module" src="https://unpkg.com/ng-layer-tune@0.0.13/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
+  <script type="module" src="https://unpkg.com/ng-layer-tune@0.0.14/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
   <script type="module" src="https://unpkg.com/hbp-connectivity-component@0.6.6/dist/connectivity-component/connectivity-component.js" ></script>
   <script defer src="https://unpkg.com/mathjax@3.1.2/es5/tex-svg.js"></script>
   <script defer src="https://unpkg.com/d3@6.2.0/dist/d3.min.js"></script>

src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts

@@ -498,8 +498,16 @@ export class NehubaViewerUnit implements OnDestroy {
             }
           )
         }
+        const { transform=null, ...rest } = layerObj[key]
+
+        const combined = {
+          type: 'image',
+          ...rest,
+          ...(transform ? { transform } : {})
+        }
+        console.log(combined)
         viewer.layerManager.addManagedLayer(
-          viewer.layerSpecification.getLayer(key, layerObj[key]))
+          viewer.layerSpecification.getLayer(key, combined))
 
         return layerObj[key]
       })

src/viewerModule/nehuba/userLayers/module.ts

@@ -8,6 +8,8 @@ import { UserLayerService } from "./service"
 import { MatButtonModule } from "@angular/material/button"
 import { MatTooltipModule } from "@angular/material/tooltip"
 import { UserLayerInfoCmp } from "./userlayerInfo/userlayerInfo.component"
+import { UtilModule } from "src/util"
+import { SpinnerModule } from "src/components/spinner"
 
 @NgModule({
   imports: [
@@ -17,6 +19,8 @@ import { UserLayerInfoCmp } from "./userlayerInfo/userlayerInfo.component"
     MatDialogModule,
     MatButtonModule,
     MatTooltipModule,
+    UtilModule,
+    SpinnerModule,
   ],
   declarations: [UserLayerDragDropDirective, UserLayerInfoCmp],
   exports: [UserLayerDragDropDirective],

src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.component.ts

-import { Component, Inject } from "@angular/core";
+import { Component, Inject, ViewChild } from "@angular/core";
 import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { ARIA_LABELS, CONST } from 'common/constants'
+import { BehaviorSubject, Subject, combineLatest, concat, of, timer } from "rxjs";
+import { map, switchMap, take } from "rxjs/operators";
+import { MediaQueryDirective } from "src/util/directives/mediaQuery.directive";
 
 export type UserLayerInfoData = {
   layerName: string
@@ -21,10 +24,51 @@ export type UserLayerInfoData = {
 export class UserLayerInfoCmp {
   ARIA_LABELS = ARIA_LABELS
   CONST = CONST
+  public HIDE_NG_TUNE_CTRL = {
+    ONLY_SHOW_OPACITY: 'lower_threshold,higher_threshold,brightness,contrast,colormap,hide-threshold-checkbox,hide-zero-value-checkbox'
+  }
+
+  #mediaQuery = new Subject<MediaQueryDirective>()
+
+  @ViewChild(MediaQueryDirective, { read: MediaQueryDirective })
+  set mediaQuery(val: MediaQueryDirective) {
+    this.#mediaQuery.next(val)
+  }
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: UserLayerInfoData
   ){
 
   }
-  public showMoreInfo = false
+
+  #showMore = new BehaviorSubject(false)
+
+  view$ = concat(
+    timer(1000).pipe(
+      take(1),
+      map(() => null as { showMore: boolean, compact: boolean })
+    ),
+    combineLatest([
+      this.#showMore,
+      concat(
+        of(null as MediaQueryDirective),
+        this.#mediaQuery,
+      ).pipe(
+        switchMap(mediaQueryD => mediaQueryD
+          ? mediaQueryD.mediaBreakPoint$.pipe(
+            map(val => val >= 2)
+          )
+          : of(false))
+      )
+    ]).pipe(
+      map(([ showMore, compact ]) => ({
+        showMore,
+        compact,
+      }))
+    )
+  )
+
+  toggleShowMore(){
+    this.#showMore.next(!this.#showMore.value)
+  }
 }

src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.style.css

+.spinner
+{
+    justify-self: center;
+    display: inline-block;
+    margin: 1rem;
+}
+
+:has(> .spinner)
+{
+    display: grid;
+}

src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.template.html

-<div class="grid grid-col-3">
+<!-- TODO replace with hostdirective after upgrading to angular 15 -->
+<div iav-media-query></div>
 
-  <span class="ml-2 text-truncate v-center-text-span">
-    <i class="fas fa-file"></i>
-    {{ data.filename }}
-  </span>
-  
-  <button
-    [matTooltip]="ARIA_LABELS.VOLUME_TUNING_EXPAND"
-    mat-icon-button
-    [color]="showMoreInfo ? 'primary' : 'basic'"
-    (click)="showMoreInfo = !showMoreInfo">
-    <i class="fas fa-sliders-h"></i>
-  </button>
+<ng-template [ngIf]="view$ | async" [ngIfElse]="spinnerTmpl" let-view>
 
-  <button
-    [matTooltip]="ARIA_LABELS.CLOSE"
-    color="warn"
-    mat-icon-button
-    mat-dialog-close>
-    <i class="fas fa-trash"></i>
-  </button>
+  <div class="grid grid-col-4">
 
-  <div *ngIf="showMoreInfo"
-    class="sxplr-custom-cmp darker-bg overflow-hidden grid-wide-3">
-    <ng-layer-tune
-      advanced-control="true"
-      [ngLayerName]="data.layerName"
-      [thresholdMin]="data.min"
-      [thresholdMax]="data.max">
-    </ng-layer-tune>
-    <ul>
+    <span class="ml-2 text-truncate v-center-text-span">
+      <i class="fas fa-file"></i>
+      {{ data.filename }} {{ data.filename }}
+    </span>
+  
+    <ng-template [ngIf]="!view.showMore && !view.compact">
+      <ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: true }">
+      </ng-template>
+    </ng-template>
+    
+    <button
+      [matTooltip]="ARIA_LABELS.VOLUME_TUNING_EXPAND"
+      mat-icon-button
+      [color]="view.showMore ? 'primary' : 'basic'"
+      (click)="toggleShowMore()">
+      <i class="fas fa-sliders-h"></i>
+    </button>
+  
+    <button
+      [matTooltip]="ARIA_LABELS.CLOSE"
+      color="warn"
+      mat-icon-button
+      mat-dialog-close>
+      <i class="fas fa-trash"></i>
+    </button>
+  
+    <div *ngIf="view.showMore || view.compact"
+      class="sxplr-custom-cmp darker-bg overflow-hidden grid-wide-3">
+      <ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: !view.showMore }">
+      </ng-template>
+    </div>
+    
+    <ul class="grid-wide-3 sxplr-custom-cmp darker-bg" *ngIf="view.showMore">
       <li *ngFor="let warn of data.warning">{{ warn }}</li>
     </ul>
+  
+  </div>
+</ng-template>
+
+<ng-template #spinnerTmpl>
+  <div>
+    <spinner-cmp class="spinner"></spinner-cmp>
   </div>
+</ng-template>
+
 
-</div>
\ No newline at end of file
+<ng-template #ngLayerController let-onlyOpacity="onlyOpacity">
+  <ng-layer-tune
+    [hideCtrl]="onlyOpacity ? HIDE_NG_TUNE_CTRL.ONLY_SHOW_OPACITY : ''"
+    advanced-control="true"
+    [ngLayerName]="data.layerName"
+    [thresholdMin]="data.min"
+    [thresholdMax]="data.max">
+  </ng-layer-tune>
+</ng-template>