diff --git a/deploy/csp/index.js b/deploy/csp/index.js
index e48f7f155e90e027e0274590f854d7281ca83bad..92ee364fd5cd7691811cf45956712bf98fd184c6 100644
--- a/deploy/csp/index.js
+++ b/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,
diff --git a/docs/releases/v2.12.0.md b/docs/releases/v2.12.0.md
index 0d29b901d4b58428051f2027de1140661c99564e..ba23e2fa1c0a5e1dc3cdb00fdfef918654e02bf0 100644
--- a/docs/releases/v2.12.0.md
+++ b/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
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 82f71ff959dc619fe28f06c56fab628041b69b03..38120840830934317ea6c65d369467f99202f362 100644
--- a/src/extra_styles.css
+++ b/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;
}
diff --git a/src/index.html b/src/index.html
index 1ed2d8187899e51442bc39c8ab9305ac15c7ea0f..625cc65955195124a32d39c78486382edb8a9737 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts b/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts
index 1bdcedc1685bc6605bb95f56f9e881daebadf6f0..017187edb71c29fc59bc0dd589790a6dc3bb4e02 100644
--- a/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts
+++ b/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]
})
diff --git a/src/viewerModule/nehuba/userLayers/module.ts b/src/viewerModule/nehuba/userLayers/module.ts
index 6de5343d80b664d3c7949eccc231829b644f59f5..ae8068454f9ba777fd59132ae5be62afe2f8f255 100644
--- a/src/viewerModule/nehuba/userLayers/module.ts
+++ b/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],
diff --git a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.component.ts b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.component.ts
index fb6603223551791853fd9825aea84168a4bd48ce..204da49bf5170ca9998ed52f26fc31ad1df05471 100644
--- a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.component.ts
+++ b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.component.ts
@@ -1,6 +1,9 @@
-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)
+ }
}
diff --git a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.style.css b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e8ba5734cbfb8ef8fd69eba5bd1cdc98907f848a 100644
--- a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.style.css
+++ b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.style.css
@@ -0,0 +1,11 @@
+.spinner
+{
+ justify-self: center;
+ display: inline-block;
+ margin: 1rem;
+}
+
+:has(> .spinner)
+{
+ display: grid;
+}
diff --git a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.template.html b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.template.html
index 0f878b732221bfd13c24feb573e51d9013fea03a..c999b1c1befd8d650096bf38c6b23a8aadf63192 100644
--- a/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.template.html
+++ b/src/viewerModule/nehuba/userLayers/userlayerInfo/userlayerInfo.template.html
@@ -1,37 +1,62 @@
-<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>