diff --git a/src/atlasViewer/atlasViewer.urlService.service.ts b/src/atlasViewer/atlasViewer.urlService.service.ts index 225cf6af97a909b8bb693c34abd3f9e0322c180f..5cd06b1ba499e34537cce32dc2caa872250c53a3 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 862d956f984985d2d05817f56d8778fa73666855..8a8cdbd4a952a73e8e05a0b8cba3d2ac08e19cb5 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 03e5a4cdf1c639c0ef521f235cb6d80622c58d41..e307ecb73020de8802c64c4ad33ca591d33501e6 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.