bugfix: nifti layer can now be removed

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)

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
   }

src/ui/layerbrowser/layerbrowser.template.html

 <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.