From 4f3056bcfe6e6c4ce09bc11ca1e363ebf56d0b0f Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 22 May 2019 13:59:27 +0200
Subject: [PATCH] bugfix: nifti layer can now be removed
---
.../atlasViewer.urlService.service.ts | 3 +
src/ui/layerbrowser/layerbrowser.component.ts | 16 ++--
.../layerbrowser/layerbrowser.template.html | 78 ++++++++++---------
3 files changed, 55 insertions(+), 42 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.urlService.service.ts b/src/atlasViewer/atlasViewer.urlService.service.ts
index 225cf6af9..5cd06b1ba 100644
--- a/src/atlasViewer/atlasViewer.urlService.service.ts
+++ b/src/atlasViewer/atlasViewer.urlService.service.ts
@@ -51,6 +51,9 @@ export class AtlasViewerURLService{
scan((acc,val)=>Object.assign({},acc,val),{})
)
+ /**
+ * TODO change additionalNgLayer to id, querying node backend for actual urls
+ */
this.additionalNgLayers$ = combineLatest(
this.changeQueryObservable$.pipe(
map(state => state.templateSelected)
diff --git a/src/ui/layerbrowser/layerbrowser.component.ts b/src/ui/layerbrowser/layerbrowser.component.ts
index 862d956f9..8a8cdbd4a 100644
--- a/src/ui/layerbrowser/layerbrowser.component.ts
+++ b/src/ui/layerbrowser/layerbrowser.component.ts
@@ -9,7 +9,10 @@ import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.consta
@Component({
selector : 'layer-browser',
templateUrl : './layerbrowser.template.html',
- styleUrls : [ './layerbrowser.style.css' ]
+ styleUrls : [
+ './layerbrowser.style.css',
+ '../btnShadow.style.css'
+ ]
})
export class LayerBrowser implements OnDestroy{
@@ -66,11 +69,11 @@ export class LayerBrowser implements OnDestroy{
* TODO leakage? after change of template still hanging the reference?
*/
this.subscriptions.push(
- this.store.pipe(
+ this.store.pipe(
select('viewerState'),
- filter(state => isDefined(state) && isDefined(state.templateSelected)),
+ select('templateSelected'),
distinctUntilChanged((o,n) => o.templateSelected.name === n.templateSelected.name),
- map(state => Object.keys(state.templateSelected.nehubaConfig.dataset.initialNgState.layers)),
+ map(templateSelected => Object.keys(templateSelected.nehubaConfig.dataset.initialNgState.layers)),
buffer(this.store.pipe(
select('ngViewerState'),
select('nehubaReady'),
@@ -102,7 +105,6 @@ export class LayerBrowser implements OnDestroy{
}
ngLayersChangeHandler(){
-
this.ngLayers = (window['viewer'].layerManager.managedLayers as any[]).map(obj => ({
name : obj.name,
type : obj.initialSpecification.type,
@@ -119,8 +121,8 @@ export class LayerBrowser implements OnDestroy{
checkLocked(ngLayer:NgLayerInterface):boolean{
if(!this.lockedLayers){
- /* locked layer undefined. always return true for locked layer check */
- return true
+ /* locked layer undefined. always return false */
+ return false
}else
return this.lockedLayers.findIndex(l => l === ngLayer.name) >= 0
}
diff --git a/src/ui/layerbrowser/layerbrowser.template.html b/src/ui/layerbrowser/layerbrowser.template.html
index 03e5a4cdf..e307ecb73 100644
--- a/src/ui/layerbrowser/layerbrowser.template.html
+++ b/src/ui/layerbrowser/layerbrowser.template.html
@@ -1,51 +1,58 @@
<ng-container *ngIf="ngLayers$ | async | filterNgLayer : ngLayers as filteredNgLayers; else noLayerPlaceHolder">
<ng-container *ngIf="filteredNgLayers.length > 0; else noLayerPlaceHolder">
<div
- class="layerContainer"
- [ngStyle] = "isMobile && {'overflow': 'hidden'}"
+ class="layerContainer overflow-hidden"
*ngFor = "let ngLayer of filteredNgLayers">
- <div
- (click) = "checkLocked(ngLayer) ? null : toggleVisibility(ngLayer)"
- class="btn btn-sm btn-outline-secondary rounded-circle">
- <i
+ <!-- toggle visibility -->
+ <div class="btnWrapper">
+ <div
container = "body"
placement = "bottom"
[tooltip] = "checkLocked(ngLayer) ? 'base layer cannot be hidden' : 'toggle visibility'"
- [ngClass] = "checkLocked(ngLayer) ? 'fas fa-lock muted' :ngLayer.visible ? 'far fa-eye' : 'far fa-eye-slash'">
-
- </i>
+ (click) = "checkLocked(ngLayer) ? null : toggleVisibility(ngLayer)"
+ class="btn btn-sm btn-outline-secondary rounded-circle">
+ <i [ngClass] = "checkLocked(ngLayer) ? 'fas fa-lock muted' :ngLayer.visible ? 'far fa-eye' : 'far fa-eye-slash'">
+ </i>
+ </div>
</div>
- <div *ngIf="advancedMode"
- (click) = "forceSegment.hide();toggleForceShowSegment(ngLayer)"
- class="btn btn-sm btn-outline-secondary rounded-circle">
- <i
- container = "body"
- placement = "bottom"
- [tooltip] = "ngLayer.type === 'segmentation' ? segmentationTooltip() : 'only segmentation layer can hide/show segments'"
- class = "fas"
- #forceSegment = "bs-tooltip"
- [ngClass] = "ngLayer.type === 'segmentation' ? ('fa-th-large ' + segmentationAdditionalClass) : 'fa-lock muted' ">
-
- </i>
+
+ <!-- advanced mode only: toggle force show segmentation -->
+ <div class="btnWrapper">
+ <div
+ *ngIf="advancedMode"
+ container="body"
+ placement="bottom"
+ [tooltip]="ngLayer.type === 'segmentation' ? segmentationTooltip() : 'only segmentation layer can hide/show segments'"
+ #forceSegment="bs-tooltip"
+ (click)="forceSegment.hide();toggleForceShowSegment(ngLayer)"
+ class="btn btn-sm btn-outline-secondary rounded-circle">
+ <i
+ class="fas"
+ [ngClass]="ngLayer.type === 'segmentation' ? ('fa-th-large ' + segmentationAdditionalClass) : 'fa-lock muted' ">
+
+ </i>
+ </div>
</div>
- <div
- (click) = "removeLayer(ngLayer)"
- class="btn btn-sm btn-outline-secondary rounded-circle">
- <i
- container = "body"
- placement = "bottom"
- [tooltip] = "checkLocked(ngLayer) ? 'base layers cannot be removed' : 'remove layer'"
- [ngClass] = "checkLocked(ngLayer) ? 'fas fa-lock muted' : 'far fa-times-circle'">
-
- </i>
+
+ <!-- remove layer -->
+ <div class="btnWrapper">
+ <div
+ container="body"
+ placement="bottom"
+ [tooltip]="checkLocked(ngLayer) ? 'base layers cannot be removed' : 'remove layer'"
+ (click)="removeLayer(ngLayer)"
+ class="btn btn-sm btn-outline-secondary rounded-circle">
+ <i [ngClass]="checkLocked(ngLayer) ? 'fas fa-lock muted' : 'far fa-times-circle'">
+ </i>
+ </div>
</div>
- <panel-component
-
- [ngClass] = "{'muted-text muted' : !classVisible(ngLayer)}">
+
+ <!-- layer description -->
+ <panel-component [ngClass]="{'muted-text muted' : !classVisible(ngLayer)}">
<div heading>
- {{ ngLayer.name | getLayerNameFromDatasets : (fetchedDataEntries$ | async) }} : {{ ngLayer.type }}
+ {{ ngLayer.name | getLayerNameFromDatasets : (fetchedDataEntries$ | async) }}
</div>
<div bodyy>
@@ -56,6 +63,7 @@
</ng-container>
</ng-container>
+<!-- fall back when no layers are showing -->
<ng-template #noLayerPlaceHolder>
<h5 class="noLayerPlaceHolder text-muted">
No additional layers added.
--
GitLab