diff --git a/common/constants.js b/common/constants.js
index 2ba7fc2bb8c3a9ca8dcdf85ba95d770e2dbb9d2b..00fd20a33a36df6b725bbc3735c4fc0d9d52dd32 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -69,7 +69,10 @@
USER_ANNOTATION_HIDE: 'user annotations hide',
USER_ANNOTATION_DELETE: 'Delete annotation',
GOTO_ANNOTATION_ROI: 'Navigate to annotation location of interest',
- EXIT_ANNOTATION_MODE: 'Exit annotation mode'
+ EXIT_ANNOTATION_MODE: 'Exit annotation mode',
+
+ // volume tuning specific
+ VOLUME_TUNING_EXPAND: 'Expand volume tuning widget'
}
exports.IDS = {
diff --git a/deploy/csp/index.js b/deploy/csp/index.js
index 616a0ab03fe626d20af4c007eca18a0347e749a7..b31a3f9f1a68f85ef3643b1aeb1da53aa9c3889a 100644
--- a/deploy/csp/index.js
+++ b/deploy/csp/index.js
@@ -104,6 +104,7 @@ module.exports = {
'unpkg.com/kg-dataset-previewer@1.2.0/', // preview component
'cdnjs.cloudflare.com/ajax/libs/mathjax/', // math jax
'https://unpkg.com/three-surfer@0.0.10/dist/bundle.js', // for threeSurfer (freesurfer support in browser)
+ 'https://unpkg.com/ng-layer-tune@0.0.1/dist/ng-layer-tune/ng-layer-tune.esm.js', // needed for ng layer control
(req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
...SCRIPT_SRC,
...WHITE_LIST_SRC,
diff --git a/package.json b/package.json
index 8a5b687170e55873e64cf73dd4dca411d0506afa..e8d2538141f347d298edf7083b66cd29ce80860e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "interactive-viewer",
- "version": "2.4.0",
+ "version": "2.5.0",
"description": "HBP interactive atlas viewer. Integrating KG query, dataset previews & more. Based on humanbrainproject/nehuba & google/neuroglancer. Built with angular",
"scripts": {
"build-aot": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'` ng build && node ./third_party/matomo/processMatomo.js",
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 9ff20c44eb1333fd05c64ce56c8db598aee09b25..ae2f870b0e9158e1b3032959d203fca162c9c4bd 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -340,11 +340,6 @@ markdown-dom p
max-width: 20em!important;
}
-.w-90
-{
- width: 90%!important;
-}
-
.w-20em
{
width: 20em!important;
@@ -858,9 +853,7 @@ mat-list.sm mat-list-item
.no-padding-dialog > mat-dialog-container
{
- padding-top:0 !important;
- padding-right:0 !important;
- padding-left:0 !important;
+ padding:0 !important;
}
.h-50px
{
@@ -870,3 +863,26 @@ mat-list.sm mat-list-item
{
transform: scale(0.8);
}
+
+.grid
+{
+ display: grid;
+}
+
+.grid.grid-col-3
+{
+ grid-auto-columns: 1fr;
+ grid-template-columns: 1fr auto auto;
+ gap: 0.2rem 0.2rem;
+}
+
+.grid > .grid-wide-3
+{
+ grid-column: 1 / 4;
+}
+
+.v-center-text-span
+{
+ margin-top: auto;
+ margin-bottom: auto;
+}
diff --git a/src/index.html b/src/index.html
index bf21bf3337a37f2b6e0e3a25f5e9d85bc57b0911..c313b64c0f931b7c6bca5d3ca051ed2f220dfb72 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,8 @@
<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.10/dist/bundle.js" defer></script>
-
+ <script type="module" src="https://unpkg.com/ng-layer-tune@0.0.1/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
+
<title>Interactive Atlas Viewer</title>
</head>
<body>
diff --git a/src/viewerModule/nehuba/module.ts b/src/viewerModule/nehuba/module.ts
index 63afffbfb47711024c899a8d845092e4531d1fbf..4e45d608c551ffce7fc8b0e8a2532da8159fc8d3 100644
--- a/src/viewerModule/nehuba/module.ts
+++ b/src/viewerModule/nehuba/module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { NehubaViewerContainerDirective } from './nehubaViewerInterface/nehubaViewerInterface.directive'
import { IMPORT_NEHUBA_INJECT_TOKEN, NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
import { CommonModule } from "@angular/common";
@@ -81,6 +81,9 @@ import { DragDropFileModule } from "src/dragDropFile/module";
provide: NEHUBA_INSTANCE_INJTKN,
useValue: new BehaviorSubject(null)
}
+ ],
+ schemas: [
+ CUSTOM_ELEMENTS_SCHEMA
]
})
diff --git a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
index 21b11a8d5f56ac41c444856ca99f88d0a4133cd7..30e0f9c0df3886f6c13c63acf11a5f80e84c7a29 100644
--- a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
+++ b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, Optional, Output, SimpleChanges, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, Optional, Output, SimpleChanges, TemplateRef, ViewChild } from "@angular/core";
import { select, Store } from "@ngrx/store";
import { asyncScheduler, combineLatest, fromEvent, merge, NEVER, Observable, of, Subject } from "rxjs";
import { ngViewerActionToggleMax } from "src/services/state/ngViewerState/actions";
@@ -29,6 +29,7 @@ import { NG_LAYER_CONTROL, SET_SEGMENT_VISIBILITY } from "../layerCtrl.service/l
import { MatSnackBar } from "@angular/material/snack-bar";
import { getShader } from "src/util/constants";
import { EnumColorMapName } from "src/util/colorMaps";
+import { MatDialog } from "@angular/material/dialog";
export const INVALID_FILE_INPUT = `Exactly one (1) nifti file is required!`
@@ -72,6 +73,8 @@ export const INVALID_FILE_INPUT = `Exactly one (1) nifti file is required!`
export class NehubaGlueCmp implements IViewer<'nehuba'>, OnChanges, OnDestroy, AfterViewInit {
+ @ViewChild('layerCtrlTmpl', { read: TemplateRef }) layerCtrlTmpl: TemplateRef<any>
+
public ARIA_LABELS = ARIA_LABELS
public IDS = IDS
@@ -307,6 +310,7 @@ export class NehubaGlueCmp implements IViewer<'nehuba'>, OnChanges, OnDestroy, A
private el: ElementRef,
private log: LoggingService,
private snackbar: MatSnackBar,
+ private dialog: MatDialog,
@Optional() @Inject(CLICK_INTERCEPTOR_INJECTOR) clickInterceptor: ClickInterceptor,
@Optional() @Inject(API_SERVICE_SET_VIEWER_HANDLE_TOKEN) setViewerHandle: TSetViewerHandle,
@Optional() private layerCtrlService: NehubaLayerControlService,
@@ -744,13 +748,28 @@ export class NehubaGlueCmp implements IViewer<'nehuba'>, OnChanges, OnDestroy, A
})
}])
- this.snackbar.open(
- `Viewing ${file.name}`,
- 'Clear',
- { duration: 0 }
- ).afterDismissed().subscribe(() => {
- this.dismissAllAddedLayers()
- })
+ this.dialog.open(
+ this.layerCtrlTmpl,
+ {
+ data: {
+ layerName: randomUuid,
+ filename: file.name,
+ moreInfoFlag: false
+ },
+ hasBackdrop: false,
+ disableClose: true,
+ position: {
+ top: '0em'
+ },
+ autoFocus: false,
+ panelClass: [
+ 'no-padding-dialog',
+ 'w-100'
+ ]
+ }
+ ).afterClosed().subscribe(
+ () => this.dismissAllAddedLayers()
+ )
}
diff --git a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
index e8e372f6aa358b169a094e16baddb0384b3eeabc..3cda701b7cebafcae2dc9569a3a38c0ed0ad58d7 100644
--- a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
+++ b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
@@ -190,3 +190,36 @@
</g>
</svg>
</ng-template>
+
+<ng-template #layerCtrlTmpl let-data>
+ <div class="grid grid-col-3">
+
+ <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]="data.moreInfoFlag ? 'primary' : 'basic'"
+ (click)="data.moreInfoFlag = !data.moreInfoFlag">
+ <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="data.moreInfoFlag"
+ class="iv-custom-comp darker-bg overflow-hidden grid-wide-3">
+ <ng-layer-tune [ngLayerName]="data.layerName">
+ </ng-layer-tune>
+ </div>
+
+ </div>
+</ng-template>