From 60275d3dd3a802217fab2b7421a4cb28e3fc32a9 Mon Sep 17 00:00:00 2001
From: Daviti Gogshelidze <daviti1@mail.com>
Date: Mon, 12 Sep 2022 03:17:52 +0200
Subject: [PATCH] Upgrade new layer selector with chips
---
.../core/atlas/chip/atlas.chip.component.ts | 24 --
.../core/atlas/chip/atlas.chip.stories.ts | 0
.../core/atlas/chip/atlas.chip.template.html | 14 -
.../sapiViews/core/atlas/module.ts | 5 +-
.../smartChip/atlas.smartChip.components.ts | 3 +
.../smartChip/atlas.smartChip.template.html | 47 ++-
.../chip/parcellation.chip.component.ts | 6 +
.../chip/parcellation.chip.template.html | 4 +-
.../core/parcellation/getSpaceById.pipe.ts | 28 ++
.../sapiViews/core/parcellation/module.ts | 2 +
.../parcellation.smartChip.component.ts | 40 +--
.../parcellation.smartChip.template.html | 334 +++++++++---------
.../core/space/chip/space.chip.component.ts | 24 --
.../core/space/chip/space.chip.stories.ts | 0
.../core/space/chip/space.chip.template.html | 14 -
.../sapiViews/core/space/module.ts | 5 +-
.../smartChip/space.smartChip.components.ts | 7 +-
.../smartChip/space.smartChip.template.html | 67 ++--
...arcellationSupportedInCurrentSpace.pipe.ts | 5 +-
.../util/parcellationSupportedInSpace.pipe.ts | 13 +-
...paceSupportedInCurrentParcellation.pipe.ts | 2 +-
src/extra_styles.css | 24 ++
src/state/atlasSelection/effects.ts | 4 +-
.../viewerCmp/viewerCmp.component.ts | 13 +-
.../viewerCmp/viewerCmp.style.css | 5 +
.../viewerCmp/viewerCmp.template.html | 46 +--
26 files changed, 356 insertions(+), 380 deletions(-)
delete mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
delete mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts
delete mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
create mode 100644 src/atlasComponents/sapiViews/core/parcellation/getSpaceById.pipe.ts
delete mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
delete mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts
delete mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
deleted file mode 100644
index e1be7e4a8..000000000
--- a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
-import {SapiAtlasModel} from "src/atlasComponents/sapi/type";
-
-@Component({
- selector: 'sxplr-sapiviews-core-atlas-chip',
- templateUrl: './atlas.chip.template.html'
-})
-
-export class SapiViewCoreAtlasChip {
-
- @Input('sxplr-sapiviews-core-atlas-chip-atlas')
- atlas: SapiAtlasModel
-
- @Input('sxplr-sapiviews-core-atlas-chip-color')
- color: 'default' | 'primary' | 'accent' | 'warn' = "default"
-
- @Output('sxplr-sapiviews-core-atlas-chip-onclick')
- onClick = new EventEmitter<MouseEvent>()
-
- click(event: MouseEvent) {
- this.onClick.emit(event)
- }
-
-}
diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
deleted file mode 100644
index 90cb1fa3e..000000000
--- a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<mat-chip-list *ngIf="atlas">
- <mat-chip [selected]="color !== 'default'" (click)="click($event)" [color]="color">
-
- <ng-content select="[prefix]">
- </ng-content>
-
- <span class="mat-body sxplr-white-space-nowrap">
- {{ atlas.name }}
- </span>
-
- <ng-content select="[suffix]">
- </ng-content>
- </mat-chip>
-</mat-chip-list>
diff --git a/src/atlasComponents/sapiViews/core/atlas/module.ts b/src/atlasComponents/sapiViews/core/atlas/module.ts
index 046871de0..52055dc93 100644
--- a/src/atlasComponents/sapiViews/core/atlas/module.ts
+++ b/src/atlasComponents/sapiViews/core/atlas/module.ts
@@ -13,7 +13,7 @@ import {DialogModule} from "src/ui/dialogInfo/module";
import {
SapiViewCoreAtlasSmartChip
} from "src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components";
-import {SapiViewCoreAtlasChip} from "src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component";
+import {UtilModule} from "src/util";
@NgModule({
imports: [
@@ -25,20 +25,19 @@ import {SapiViewCoreAtlasChip} from "src/atlasComponents/sapiViews/core/atlas/ch
SpinnerModule,
SapiViewsUtilModule,
DialogModule,
+ UtilModule
],
declarations: [
SapiViewsCoreAtlasAtlasDropdownSelector,
SapiViewsCoreAtlasAtlasTmplParcSelector,
SapiViewsCoreAtlasSplashScreen,
SapiViewCoreAtlasSmartChip,
- SapiViewCoreAtlasChip,
],
exports: [
SapiViewsCoreAtlasAtlasDropdownSelector,
SapiViewsCoreAtlasAtlasTmplParcSelector,
SapiViewsCoreAtlasSplashScreen,
SapiViewCoreAtlasSmartChip,
- SapiViewCoreAtlasChip,
]
})
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
index 8bf031a3d..55bc9a10d 100644
--- a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
+++ b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
@@ -15,6 +15,9 @@ export class SapiViewCoreAtlasSmartChip {
@Input('sxplr-sapiviews-core-atlas-smartchip-all-atlases')
atlases: SapiAtlasModel[]
+ @Input('sxplr-sapiviews-core-atlas-smartchip-custom-color')
+ customColor: string
+
@Output('sxplr-sapiviews-core-atlas-smartchip-select-atlas')
onSelectAtlas = new EventEmitter<SapiAtlasModel>()
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
index 90da2b2a5..71f475622 100644
--- a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
+++ b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
@@ -1,28 +1,23 @@
-<sxplr-sapiviews-core-atlas-chip
- class="sxplr-d-inline-block"
- [sxplr-sapiviews-core-atlas-chip-atlas]="atlas"
- [sxplr-sapiviews-core-atlas-chip-color]="'default'"
- (sxplr-sapiviews-core-atlas-chip-onclick)="menuTrigger.toggleMenu()"
- [matMenuTriggerFor]="atlasesMenu"
- #menuTrigger="matMenuTrigger">
- <div class="sxplr-scale-70"
- suffix
- iav-stop="mousedown click"></div>
-</sxplr-sapiviews-core-atlas-chip>
+<div (iav-outsideClick)="atlasMenuTrigger.closeMenu()">
+ <div [style.background-color]="customColor && customColor"
+ [matMenuTriggerFor]="atlasMenu"
+ #atlasMenuTrigger="matMenuTrigger"
+ matRipple
+ class="custom-chip">
+ <span class="mat-body sxplr-white-space-nowrap">
+ {{ atlas.name }}
+ </span>
+ </div>
-<mat-menu #atlasesMenu="matMenu"
- [hasBackdrop]="false"
- class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
- <div (iav-outsideClick)="menuTrigger.closeMenu()">
+ <mat-menu #atlasMenu="matMenu"
+ [hasBackdrop]="false"
+ class="parc-smart-chip-menu-panel sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
- <div *ngFor="let atl of atlases"
- class="otherversion-wrapper">
- <sxplr-sapiviews-core-atlas-chip
- [sxplr-sapiviews-core-atlas-chip-atlas]="atl"
- [sxplr-sapiviews-core-atlas-chip-color]="(atl | equality : atlas : trackByFn) ? 'primary' : 'default'"
- (sxplr-sapiviews-core-atlas-chip-onclick)="selectAtlas(atl)">
- </sxplr-sapiviews-core-atlas-chip>
- </div>
- </div>
-
-</mat-menu>
+ <div *ngFor="let atl of atlases">
+ <button mat-menu-item
+ (click)="selectAtlas(atl)"
+ [style.background-color]="(atl | equality : atlas : trackByFn) ? 'grey' : ''">
+ {{atl.name}}</button>
+ </div>
+ </mat-menu>
+</div>
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.component.ts b/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.component.ts
index 13358ff46..4af3de195 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.component.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.component.ts
@@ -17,6 +17,12 @@ export class SapiViewsCoreParcellationParcellationChip {
@Input('sxplr-sapiviews-core-parcellation-chip-color')
color: 'default' | 'primary' | 'accent' | 'warn' = "default"
+ @Input('sxplr-sapiviews-core-parcellation-chip-custom-class')
+ customClass: string = ''
+
+ @Input('sxplr-sapiviews-core-parcellation-chip-custom-color')
+ customColor: string
+
@Output('sxplr-sapiviews-core-parcellation-chip-onclick')
onClick = new EventEmitter<MouseEvent>()
diff --git a/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.template.html b/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.template.html
index 417575bf6..b37ce3957 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.template.html
+++ b/src/atlasComponents/sapiViews/core/parcellation/chip/parcellation.chip.template.html
@@ -1,7 +1,9 @@
<mat-chip-list *ngIf="parcellation">
<mat-chip [selected]="color !== 'default'"
(click)="click($event)"
- [color]="color">
+ [color]="color"
+ [style.background-color]="customColor && customColor"
+ [ngClass]="customClass">
<ng-content select="[prefix]">
</ng-content>
diff --git a/src/atlasComponents/sapiViews/core/parcellation/getSpaceById.pipe.ts b/src/atlasComponents/sapiViews/core/parcellation/getSpaceById.pipe.ts
new file mode 100644
index 000000000..7112adcea
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/parcellation/getSpaceById.pipe.ts
@@ -0,0 +1,28 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {Store} from "@ngrx/store";
+import {atlasSelection} from "src/state";
+import {SAPI, SapiSpaceModel,} from "src/atlasComponents/sapi";
+import {Observable} from "rxjs";
+import {filter, map} from "rxjs/operators";
+
+@Pipe({
+ name: 'getSpaceById',
+ pure: false,
+})
+
+export class GetSpaceByIdPipe implements PipeTransform {
+
+ private allAvailableSpaces$ = this.store$.pipe(
+ atlasSelection.fromRootStore.allAvailSpaces(this.sapi)
+ )
+
+ constructor(private store$: Store, private sapi: SAPI){}
+
+ public transform(spaceId: string)
+ : Observable<SapiSpaceModel> {
+ return this.allAvailableSpaces$.pipe(
+ filter(s => s && s.length > 0),
+ map(res => res.filter(t => t.fullName).find(t => t['@id'] === spaceId))
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/core/parcellation/module.ts b/src/atlasComponents/sapiViews/core/parcellation/module.ts
index 1fe2e70c0..ebece80b7 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/module.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/module.ts
@@ -17,6 +17,7 @@ import { ParcellationVisibilityService } from "./parcellationVis.service";
import { PreviewParcellationUrlPipe } from "./previewParcellationUrl.pipe";
import { SapiViewsCoreParcellationParcellationSmartChip } from "./smartChip/parcellation.smartChip.component";
import { SapiViewsCoreParcellationParcellationTile } from "./tile/parcellation.tile.component";
+import {GetSpaceByIdPipe} from "src/atlasComponents/sapiViews/core/parcellation/getSpaceById.pipe";
@NgModule({
imports: [
@@ -37,6 +38,7 @@ import { SapiViewsCoreParcellationParcellationTile } from "./tile/parcellation.t
FilterUnsupportedParcPipe,
ParcellationIsBaseLayer,
ParcellationDoiPipe,
+ GetSpaceByIdPipe,
],
exports: [
SapiViewsCoreParcellationParcellationTile,
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
index 94e60af8c..406484d30 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
@@ -1,22 +1,10 @@
-import {
- Component,
- EventEmitter,
- Input,
- OnChanges,
- Output, QueryList,
- SimpleChange,
- SimpleChanges,
- ViewChild,
- ViewChildren
-} from "@angular/core";
+import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from "@angular/core";
import { BehaviorSubject, concat, Observable, of, timer } from "rxjs";
-import { SapiParcellationModel } from "src/atlasComponents/sapi/type";
+import {SapiParcellationModel, SapiSpaceModel} from "src/atlasComponents/sapi/type";
import { ParcellationVisibilityService } from "../parcellationVis.service";
import { ARIA_LABELS } from "common/constants"
import { getTraverseFunctions } from "../parcellationVersion.pipe";
import { mapTo, shareReplay, switchMap } from "rxjs/operators";
-import {GroupedParcellation} from "src/atlasComponents/sapiViews/core/parcellation/groupedParcellation";
-import {MatMenu, MatMenuTrigger} from "@angular/material/menu";
@Component({
selector: `sxplr-sapiviews-core-parcellation-smartchip`,
@@ -30,19 +18,26 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
public ARIA_LABELS = ARIA_LABELS
+ @Input('sxplr-sapiviews-core-parcellation-smartchip-selected-space')
+ selectedSpace: SapiSpaceModel
+
@Input('sxplr-sapiviews-core-parcellation-smartchip-parcellation')
parcellation: SapiParcellationModel
@Input('sxplr-sapiviews-core-parcellation-smartchip-all-parcellations')
parcellations: SapiParcellationModel[]
+ @Input('sxplr-sapiviews-core-parcellation-smartchip-custom-color')
+ customColor: string
+
@Output('sxplr-sapiviews-core-parcellation-smartchip-dismiss-nonbase-layer')
onDismiss = new EventEmitter<SapiParcellationModel>()
@Output('sxplr-sapiviews-core-parcellation-smartchip-select-parcellation')
onSelectParcellation = new EventEmitter<SapiParcellationModel>()
- @ViewChildren('subParcMenuTrigger') subParcMenuTrigger: QueryList<MatMenuTrigger>;
+ @Output('sxplr-sapiviews-core-parcellation-smartchip-select-space-parcellation')
+ onSelectSpaceParcellation = new EventEmitter<{space: SapiSpaceModel, parcellation: SapiParcellationModel}>()
constructor(
private svc: ParcellationVisibilityService
@@ -63,10 +58,10 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
}
this.otherVersions = [ this.parcellation ]
if (!this.parcellations || this.parcellations.length === 0) {
- return
+ return
}
if (!this.parcellation.version) {
- return
+ return
}
this.otherVersions = []
@@ -114,14 +109,11 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
return parc["@id"]
}
- openParcellationGroup(index) {
- const children = this.subParcMenuTrigger.toArray()
- children[index].openMenu()
- }
+ selectSpaceAndParcellation(space, parcellation) {
+ if (this.trackByFn(parcellation) === this.trackByFn(this.parcellation)
+ && space['@id'] === this.selectedSpace['@id']) return
- closeParcellationGroup(index) {
- const children = this.subParcMenuTrigger.toArray()
- children[index].closeMenu()
+ this.onSelectSpaceParcellation.emit({space, parcellation})
}
onDismissClicked$ = new BehaviorSubject<boolean>(false)
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
index cf6a1a79a..b58cbc0e6 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
@@ -1,178 +1,192 @@
-<mat-menu #otherParcMenu="matMenu"
- [hasBackdrop]="false"
- class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
- <div (iav-outsideClick)="menuTrigger.closeMenu()">
-
-
- <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs"
- class="otherversion-wrapper"
- [ngClass]="{'loading': (loadingParc$ | async) === parc}">
- <ng-container [ngTemplateOutlet]="parcellationChip"
- [ngTemplateOutletContext]="{ parc }"></ng-container>
- </div>
-
- <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs : true | filterUnsupportedParc; let i = index"
- class="otherversion-wrapper"
- [ngClass]="{'loading': (loadingParc$ | async) === parc}">
- <ng-container [ngTemplateOutlet]="parcellationChip"
- [ngTemplateOutletContext]="{ parc, grouped: true, i }"></ng-container>
- </div>
- </div>
-
-</mat-menu>
-
-<mat-menu #subParcMenu="matMenu" class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw" >
- <ng-template matMenuContent let-group="group">
- <div *ngFor="let parc of group.parcellations"
- class="otherversion-wrapper"
- [ngClass]="{'loading': (loadingParc$ | async) === parc}">
- <ng-container [ngTemplateOutlet]="parcellationChip"
- [ngTemplateOutletContext]="{ parc }"></ng-container>
- </div>
-
- </ng-template>
-</mat-menu>
-
-<ng-template #parcellationChip let-parc="parc" let-grouped="grouped" let-index="i">
- <sxplr-sapiviews-core-parcellation-chip
- [ngClass]="{
- 'sxplr-blink': (loadingParc$ | async) === parc,
- 'sxplr-muted': !grouped && !(parc | parcellationSupportedInCurrentSpace | async)
- }"
- [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc"
- [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'"
- (sxplr-sapiviews-core-parcellation-chip-onclick)="grouped? openParcellationGroup(index) : selectParcellation(parc)">
-
- <div *ngIf="!grouped && !(parc | parcellationSupportedInCurrentSpace | async)" prefix matTooltip="Changes space">
- <i class="fas fa-sync mr-2"></i>
- </div>
-
- <div class="sxplr-scale-70"
- suffix
- iav-stop="mousedown click">
-
- <div *ngIf="!grouped; else groupedParcTmp">
- <ng-template #otherParcDesc>
- <ng-template [ngTemplateOutlet]="parcDescTmpl"
- [ngTemplateOutletContext]="{ parcellation: parc }">
- </ng-template>
+<div (iav-outsideClick)="menuTrigger.closeMenu()">
+ <mat-menu #otherParcMenu="matMenu"
+ [hasBackdrop]="false"
+ class="parc-smart-chip-menu-panel sxplr-mxw-80vw ml-4">
+
+ <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs : true"
+ [ngClass]="{'loading': (loadingParc$ | async) === parc}">
+ <button mat-menu-item
+ [matMenuTriggerFor]="subParcMenu"
+ [matMenuTriggerData]="{group: parc}"
+ (click)="selectParcellation(parc)"
+ [style.background-color]="(parcellation | equality : parc : trackByFn) ? 'grey' : ''">
+ {{parc.name}}
+ </button>
+ </div>
+
+ <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs"
+ [ngClass]="{'loading': (loadingParc$ | async) === parc}"
+ class="d-flex align-items-center justify-content-space-between">
+ <ng-container *ngIf="(parc | parcellationSupportedInCurrentSpace | async) as sup;">
+ <button [disabled]="!sup.supported"
+ mat-menu-item (click)="selectParcellation(parc)"
+ [style.background-color]="(parcellation | equality : parc : trackByFn) ? 'grey' : ''">
+ {{parc.name}}
+ </button>
+ <button *ngIf="sup.spaces"
+ [matMenuTriggerFor]="otherSpacesMenu"
+ [matMenuTriggerData]="{parc: parc, spaces: sup.spaces}"
+ mat-menu-item class="w-0 d-flex align-items-center justify-content-center">
+ <i class="fas fa-sync"></i>
+ </button>
+ </ng-container>
+<!-- <ng-container [ngTemplateOutlet]="selectParcButton" [ngTemplateOutletContext]="{parc:parc}"></ng-container>-->
+ <ng-container [ngTemplateOutlet]="menuItemSuffix" [ngTemplateOutletContext]="{parc: parc}"></ng-container>
+ </div>
+
+ </mat-menu>
+
+ <mat-menu #subParcMenu="matMenu" class="parc-smart-chip-menu-panel sxplr-mxw-80vw">
+ <ng-template matMenuContent let-group="group">
+ <div *ngFor="let parc of group.parcellations"
+ [ngClass]="{'loading': (loadingParc$ | async) === parc}"
+ class="d-flex align-items-center justify-content-space-between">
+ <ng-container *ngIf="(parc | parcellationSupportedInCurrentSpace | async) as sup;">
+ <button [disabled]="!sup.supported"
+ mat-menu-item (click)="selectParcellation(parc)"
+ [style.background-color]="(parcellation | equality : parc : trackByFn) ? 'grey' : ''">
+ {{parc.name}}
+ </button>
+ <button *ngIf="sup.spaces && !(sup.spaces.length === 1 && sup.supported)"
+ [matMenuTriggerFor]="otherSpacesMenu"
+ [matMenuTriggerData]="{parc: parc, templates: sup.spaces}"
+ mat-menu-item class="w-0 d-flex align-items-center justify-content-center">
+ <i class="fas fa-sync"></i>
+ </button>
+ </ng-container>
+<!-- <ng-container [ngTemplateOutlet]="selectParcButton" [ngTemplateOutletContext]="{parc:parc}"></ng-container>-->
+ <ng-container [ngTemplateOutlet]="menuItemSuffix" [ngTemplateOutletContext]="{parc: parc}"></ng-container>
+ </div>
</ng-template>
+ </mat-menu>
+
+ <mat-menu #otherSpacesMenu="matMenu">
+ <ng-template matMenuContent let-parc="parc" >
+ <div *ngFor="let spaceId of (parc | parcellationSupportedInCurrentSpace | async).spaces">
+ <button *ngIf="spaceId | getSpaceById | async as space"
+ mat-menu-item
+ (click)="selectSpaceAndParcellation(space, parc)"
+ [disabled]="(selectedSpace | equality : space : trackByFn) && (parcellation | equality : parc : trackByFn)">
+ {{space.fullName}}
+ </button>
+ </div>
+ </ng-template>
+ </mat-menu>
+
+ <div [style.background-color]="customColor && customColor"
+ [matMenuTriggerFor]="otherParcMenu"
+ #menuTrigger="matMenuTrigger"
+ matRipple
+ class="custom-chip layer-chip-overflowed">
+ <span class="mat-body sxplr-white-space-nowrap">
+ {{ parcellation.name }}
+ </span>
+ <ng-container [ngTemplateOutlet]="chipSuffix"></ng-container>
+ </div>
- <button mat-mini-fab color="default"
- [sxplr-dialog]="otherParcDesc"
- [sxplr-dialog-size]="null">
- <i class="fas fa-info"></i>
- </button>
- </div>
-
- <ng-template #groupedParcTmp>
- <button mat-mini-fab color="default"
- #subParcMenuTrigger="matMenuTrigger"
- [matMenuTriggerFor]="subParcMenu"
- [matMenuTriggerData]="{group: parc}">
- <i class="fas fa-angle-right"></i>
- </button>
- </ng-template>
+</div>
+
+<!--<ng-template #selectParcButton let-parc="parc">-->
+<!-- <ng-container *ngIf="(parc | parcellationSupportedInCurrentSpace | async) as sup;">-->
+<!-- <button [disabled]="!sup.supported"-->
+<!-- mat-menu-item (click)="selectParcellation(parc)"-->
+<!-- [style.background-color]="(parcellation | equality : parc : trackByFn) ? 'grey' : ''">-->
+<!-- {{parc.name}}-->
+<!-- </button>-->
+<!-- <button *ngIf="sup.spaces"-->
+<!-- [matMenuTriggerFor]="otherSpacesMenu"-->
+<!-- [matMenuTriggerData]="{templates: sup.spaces}"-->
+<!-- mat-menu-item class="w-0 d-flex align-items-center justify-content-center">-->
+<!-- <i class="fas fa-sync"></i>-->
+<!-- </button>-->
+<!-- </ng-container>-->
+<!--</ng-template>-->
+<!-- parcellation description template -->
+<ng-template #parcDescTmpl let-parc="parcellation">
+ <h1 mat-dialog-title>
+ {{ parc.name }}
+ </h1>
+ <div mat-dialog-content>
+ <markdown-dom
+ *ngIf="parc.brainAtlasVersions.length > 0 && parc.brainAtlasVersions[0].versionInnovation"
+ [markdown]="parc.brainAtlasVersions[0].versionInnovation">
+ </markdown-dom>
</div>
+ <mat-dialog-actions align="start">
+ <a *ngFor="let url of parc | parcellationDoiPipe"
+ [href]="url"
+ sxplr-hide-when-local
+ target="_blank"
+ mat-raised-button
+ color="primary">
+ <div class="fas fa-external-link-alt"></div>
+ <span>
+ Dataset Detail
+ </span>
+ </a>
- </sxplr-sapiviews-core-parcellation-chip>
-
- <div class="spinner-container" *ngIf="(loadingParc$ | async) === parc">
- <spinner-cmp>
- </spinner-cmp>
- </div>
+ <button mat-button mat-dialog-close>Close</button>
+ </mat-dialog-actions>
</ng-template>
-
-<sxplr-sapiviews-core-parcellation-chip
- [ngClass]="{
- 'sxplr-muted': !(parcellationVisibility$ | async),
- 'sxplr-blink': onDismissClicked$ | async
- }"
- class="sxplr-d-inline-block"
- [sxplr-sapiviews-core-parcellation-chip-parcellation]="parcellation"
- [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | parcellationIsBaseLayer) ? 'default' : 'primary'"
- (sxplr-sapiviews-core-parcellation-chip-onclick)="menuTrigger.toggleMenu()"
- [matMenuTriggerFor]="otherParcMenu"
- #menuTrigger="matMenuTrigger"
- >
-
- <div class="icons-container"
- suffix
- iav-stop="mousedown click">
-
+<!-- Suffix for selected chip -->
+<ng-template #chipSuffix>
<ng-template #mainParcDesc>
- <ng-template [ngTemplateOutlet]="parcDescTmpl"
- [ngTemplateOutletContext]="{ parcellation: parcellation }">
- </ng-template>
+ <ng-template [ngTemplateOutlet]="parcDescTmpl"
+ [ngTemplateOutletContext]="{ parcellation: parcellation }">
+ </ng-template>
</ng-template>
- <button mat-icon-button
- color="default"
- [sxplr-dialog]="mainParcDesc"
- [sxplr-dialog-size]="null">
- <i class="fas fa-info"></i>
- </button>
-
- <button mat-icon-button
- color="default"
- [matTooltip]="ARIA_LABELS.TOGGLE_DELINEATION"
- iav-stop="mousedown click"
- [iav-key-listener]="[{'type': 'keydown', 'key': 'q', 'capture': true, 'target': 'document' }]"
- (iav-key-event)="toggleParcellationVisibility()"
- (click)="toggleParcellationVisibility()">
- <i class="fas"
- [ngClass]="(parcellationVisibility$ | async) ? 'fa-eye': 'fa-eye-slash'"
- aria-hidden="true">
- </i>
- <span class="sr-only">
+ <span class="small-icon-button mr-2 ml-3"
+ matRipple
+ [sxplr-dialog]="mainParcDesc"
+ [sxplr-dialog-size]="null"
+ (click)="$event.stopPropagation()">
+ <i class="fas fa-info"></i>
+ </span>
+
+ <span class="small-icon-button mr-2"
+ [matTooltip]="ARIA_LABELS.TOGGLE_DELINEATION"
+ iav-stop="mousedown click"
+ [iav-key-listener]="[{'type': 'keydown', 'key': 'q', 'capture': true, 'target': 'document' }]"
+ (iav-key-event)="toggleParcellationVisibility()"
+ (click)="toggleParcellationVisibility()">
+ <i class="fas"
+ [ngClass]="(parcellationVisibility$ | async) ? 'fa-eye': 'fa-eye-slash'"
+ aria-hidden="true">
+ </i>
+ <span class="sr-only">
{{ ARIA_LABELS.TOGGLE_DELINEATION }}
</span>
- </button>
-
- <button mat-mini-fab
- *ngIf="!(parcellation | parcellationIsBaseLayer)"
- color="default"
- (click)="dismiss()">
-
- <spinner-cmp class="sxplr-w-100 sxplr-h-100" *ngIf="onDismissClicked$ | async; else defaultDismissIcon"></spinner-cmp>
- <ng-template #defaultDismissIcon>
- <i class="fas fa-times"></i>
- </ng-template>
-
- </button>
- </div>
-</sxplr-sapiviews-core-parcellation-chip>
+ </span>
-<!-- parcellation description template -->
+ <span class="small-icon-button mr-2"
+ *ngIf="!(parcellation | parcellationIsBaseLayer)"
+ color="default"
+ (click)="dismiss()">
-<ng-template #parcDescTmpl let-parc="parcellation">
- <h1 mat-dialog-title>
- {{ parc.name }}
- </h1>
- <div mat-dialog-content>
- <markdown-dom
- *ngIf="parc.brainAtlasVersions.length > 0 && parc.brainAtlasVersions[0].versionInnovation"
- [markdown]="parc.brainAtlasVersions[0].versionInnovation">
- </markdown-dom>
- </div>
-
- <mat-dialog-actions align="start">
- <a *ngFor="let url of parc | parcellationDoiPipe"
- [href]="url"
- sxplr-hide-when-local
- target="_blank"
- mat-raised-button
- color="primary">
- <div class="fas fa-external-link-alt"></div>
- <span>
- Dataset Detail
- </span>
- </a>
+ <spinner-cmp class="sxplr-w-100 sxplr-h-100 d-inline-block"
+ *ngIf="onDismissClicked$ | async; else defaultDismissIcon"></spinner-cmp>
+ <ng-template #defaultDismissIcon>
+ <i class="fas fa-times"></i>
+ </ng-template>
- <button mat-button mat-dialog-close>Close</button>
- </mat-dialog-actions>
+ </span>
</ng-template>
+<!-- Suffix for menu items -->
+<ng-template #menuItemSuffix let-parc="parc" let-grouped="grouped">
+ <ng-template #otherParcDesc>
+ <ng-template [ngTemplateOutlet]="parcDescTmpl"
+ [ngTemplateOutletContext]="{ parcellation: parc }">
+ </ng-template>
+ </ng-template>
+
+ <button mat-menu-item class="w-0 d-flex align-items-center justify-content-center"
+ [sxplr-dialog]="otherParcDesc"
+ [sxplr-dialog-size]="null">
+ <i class="fas fa-info"></i>
+ </button>
+</ng-template>
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts b/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
deleted file mode 100644
index 9a7aa1a0e..000000000
--- a/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
-import { SapiSpaceModel } from "src/atlasComponents/sapi/type";
-
-@Component({
- selector: 'sxplr-sapiviews-core-space-chip',
- templateUrl: './space.chip.template.html'
-})
-
-export class SapiViewCoreSpaceChip {
-
- @Input('sxplr-sapiviews-core-space-chip-space')
- space: SapiSpaceModel
-
- @Input('sxplr-sapiviews-core-space-chip-color')
- color: 'default' | 'primary' | 'accent' | 'warn' = "default"
-
- @Output('sxplr-sapiviews-core-space-chip-onclick')
- onClick = new EventEmitter<MouseEvent>()
-
- click(event: MouseEvent) {
- this.onClick.emit(event)
- }
-
-}
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts b/src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html b/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
deleted file mode 100644
index c13681f29..000000000
--- a/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<mat-chip-list *ngIf="space">
- <mat-chip [selected]="color !== 'default'" (click)="click($event)" [color]="color">
-
- <ng-content select="[prefix]">
- </ng-content>
-
- <span class="mat-body sxplr-white-space-nowrap">
- {{ space.fullName }}
- </span>
-
- <ng-content select="[suffix]">
- </ng-content>
- </mat-chip>
-</mat-chip-list>
diff --git a/src/atlasComponents/sapiViews/core/space/module.ts b/src/atlasComponents/sapiViews/core/space/module.ts
index 93ec8449a..419db6cf8 100644
--- a/src/atlasComponents/sapiViews/core/space/module.ts
+++ b/src/atlasComponents/sapiViews/core/space/module.ts
@@ -7,10 +7,10 @@ import { SapiViewsCoreSpaceSpaceTile } from "./tile/space.tile.component";
import {
SapiViewCoreSpaceSmartChip
} from "src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components";
-import {SapiViewCoreSpaceChip} from "src/atlasComponents/sapiViews/core/space/chip/space.chip.component";
import { AngularMaterialModule } from "src/sharedModules";
import { DialogModule } from "src/ui/dialogInfo/module";
import { SapiViewsUtilModule } from "../../util";
+import {UtilModule} from "src/util";
@NgModule({
imports: [
@@ -19,19 +19,18 @@ import { SapiViewsUtilModule } from "../../util";
AngularMaterialModule,
DialogModule,
SapiViewsUtilModule,
+ UtilModule
],
declarations: [
SapiViewsCoreSpaceSpaceTile,
PreviewSpaceUrlPipe,
SapiViewsCoreSpaceBoundingBox,
SapiViewCoreSpaceSmartChip,
- SapiViewCoreSpaceChip
],
exports: [
SapiViewsCoreSpaceSpaceTile,
SapiViewsCoreSpaceBoundingBox,
SapiViewCoreSpaceSmartChip,
- SapiViewCoreSpaceChip
]
})
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
index 4c7fc420e..6548aaa26 100644
--- a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
+++ b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
@@ -1,5 +1,6 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {Component, EventEmitter, HostListener, Input, Output, Renderer2} from "@angular/core";
import { SapiSpaceModel } from "src/atlasComponents/sapi/type";
+import {Renderer} from "@angular/compiler-cli/ngcc/src/rendering/renderer";
@Component({
selector: 'sxplr-sapiviews-core-space-smartchip',
@@ -15,10 +16,12 @@ export class SapiViewCoreSpaceSmartChip {
@Input('sxplr-sapiviews-core-space-smartchip-all-spaces')
spaces: SapiSpaceModel[]
+ @Input('sxplr-sapiviews-core-space-smartchip-custom-color')
+ customColor: string
+
@Output('sxplr-sapiviews-core-space-smartchip-select-space')
onSelectSpace = new EventEmitter<SapiSpaceModel>()
- // constructor() {}
selectSpace(space: SapiSpaceModel){
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html
index 3090ab7e8..aa534108d 100644
--- a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html
+++ b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html
@@ -1,44 +1,23 @@
-<sxplr-sapiviews-core-space-chip
- class="sxplr-d-inline-block"
- [sxplr-sapiviews-core-space-chip-space]="space"
- [sxplr-sapiviews-core-space-chip-color]="'default'"
- (sxplr-sapiviews-core-space-chip-onclick)="menuTrigger.toggleMenu()"
- [matMenuTriggerFor]="spacesMenu"
- #menuTrigger="matMenuTrigger"
- >
-
- <div class="sxplr-scale-70"
- suffix
- iav-stop="mousedown click"></div>
-
-
-</sxplr-sapiviews-core-space-chip>
-
-<mat-menu #spacesMenu="matMenu"
- [hasBackdrop]="false"
- class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
- <div (iav-outsideClick)="menuTrigger.closeMenu()">
-
- <div *ngFor="let spc of spaces"
- class="otherversion-wrapper">
-
- <sxplr-sapiviews-core-space-chip
-
- [sxplr-sapiviews-core-space-chip-space]="spc"
- [sxplr-sapiviews-core-space-chip-color]="(spc | equality : space : trackByFn) ? 'primary' : 'default'"
- (sxplr-sapiviews-core-space-chip-onclick)="selectSpace(spc)">
-
- </sxplr-sapiviews-core-space-chip>
-
- </div>
- </div>
-
-</mat-menu>
-
-<!-- space description template -->
-<ng-template #spaceDescTmpl let-space="space">
- <h1 mat-dialog-title>
- {{ space.fullName }}
- </h1>
-
-</ng-template>
+<div (iav-outsideClick)="spaceMenuTrigger.closeMenu()">
+ <div [style.background-color]="customColor && customColor"
+ [matMenuTriggerFor]="spacesMenu"
+ #spaceMenuTrigger="matMenuTrigger"
+ matRipple
+ class="custom-chip layer-chip-overflowed">
+ <span class="mat-body sxplr-white-space-nowrap">
+ {{ space.shortName }}
+ </span>
+ </div>
+
+ <mat-menu #spacesMenu="matMenu"
+ [hasBackdrop]="false"
+ class="parc-smart-chip-menu-panel ml-4">
+
+ <div *ngFor="let spc of spaces">
+ <button mat-menu-item
+ (click)="selectSpace(spc)"
+ [style.background-color]="(spc | equality : space : trackByFn) ? 'grey' : ''">
+ {{spc.fullName}}</button>
+ </div>
+ </mat-menu>
+</div>
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/util/parcellationSupportedInCurrentSpace.pipe.ts b/src/atlasComponents/sapiViews/util/parcellationSupportedInCurrentSpace.pipe.ts
index 3fd1069f0..f69e2e660 100644
--- a/src/atlasComponents/sapiViews/util/parcellationSupportedInCurrentSpace.pipe.ts
+++ b/src/atlasComponents/sapiViews/util/parcellationSupportedInCurrentSpace.pipe.ts
@@ -1,7 +1,7 @@
import { Pipe, PipeTransform } from "@angular/core";
import { select, Store } from "@ngrx/store";
import { Observable } from "rxjs";
-import { switchMap } from "rxjs/operators";
+import {switchMap, tap} from "rxjs/operators";
import { SAPI } from "src/atlasComponents/sapi/sapi.service";
import { SapiParcellationModel } from "src/atlasComponents/sapi/type";
import { atlasSelection } from "src/state";
@@ -29,7 +29,8 @@ export class ParcellationSupportedInCurrentSpace implements PipeTransform{
private sapi: SAPI,
){}
- public transform(parcellation: SapiParcellationModel): Observable<boolean> {
+ public transform(parcellation: SapiParcellationModel)
+ : Observable<{supported: boolean, spaces?: Array<string>}> {
return this.selectedTemplate$.pipe(
switchMap(tmpl => this.transformPipe.transform(parcellation, tmpl))
)
diff --git a/src/atlasComponents/sapiViews/util/parcellationSupportedInSpace.pipe.ts b/src/atlasComponents/sapiViews/util/parcellationSupportedInSpace.pipe.ts
index 42eec193e..cb99c2801 100644
--- a/src/atlasComponents/sapiViews/util/parcellationSupportedInSpace.pipe.ts
+++ b/src/atlasComponents/sapiViews/util/parcellationSupportedInSpace.pipe.ts
@@ -28,7 +28,8 @@ export class ParcellationSupportedInSpacePipe implements PipeTransform{
constructor(private sapi: SAPI){}
- public transform(parc: SapiParcellationModel|string, tmpl: SapiSpaceModel|string): Observable<boolean> {
+ public transform(parc: SapiParcellationModel|string, tmpl: SapiSpaceModel|string)
+ : Observable<{supported: boolean, spaces?: (Array<string>)}> {
if (!parc) return NEVER
const parcId = typeof parc === "string"
? parc
@@ -38,11 +39,17 @@ export class ParcellationSupportedInSpacePipe implements PipeTransform{
: tmpl["@id"]
for (const key in knownExceptions.supported) {
if (key === parcId && knownExceptions.supported[key].indexOf(tmplId) >= 0) {
- return of(true)
+ return of({supported: true})
}
}
return this.sapi.registry.get<SAPIParcellation>(parcId).getVolumes().pipe(
- map(volumes => volumes.some(v => v.data.space["@id"] === tmplId))
+ map(volumes => {
+ const supported = volumes.some(v => v.data.space["@id"] === tmplId)
+ return {
+ supported,
+ spaces: [...new Set(volumes.map(v => v.data.space["@id"]))]
+ }
+ })
)
}
}
diff --git a/src/atlasComponents/sapiViews/util/spaceSupportedInCurrentParcellation.pipe.ts b/src/atlasComponents/sapiViews/util/spaceSupportedInCurrentParcellation.pipe.ts
index e462fcc6b..ba5a056e5 100644
--- a/src/atlasComponents/sapiViews/util/spaceSupportedInCurrentParcellation.pipe.ts
+++ b/src/atlasComponents/sapiViews/util/spaceSupportedInCurrentParcellation.pipe.ts
@@ -28,7 +28,7 @@ export class SpaceSupportedInCurrentParcellationPipe implements PipeTransform{
){
}
- public transform(space: SapiSpaceModel): Observable<boolean> {
+ public transform(space: SapiSpaceModel): Observable<{ supported: boolean, spaces?: string[] }> {
return this.selectedParcellation$.pipe(
switchMap(parc =>
this.supportedPipe.transform(parc, space)
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 643ab1e50..63063f6aa 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -876,3 +876,27 @@ how-to-cite img
{
max-width: 100vw;
}
+
+.custom-chip {
+ padding: 5px 10px;
+ border-radius: 15px;
+ cursor: pointer;
+}
+
+.custom-chip:hover {
+ filter: brightness(1.1);
+}
+
+.layer-chip-overflowed {
+ margin-left: -2.5rem !important;
+ padding-left: 3rem !important;
+}
+
+.small-icon-button {
+ font-size: 12px;
+ min-width: 20px;
+ text-align: center;
+ height: 20px;
+ padding: 0 5px;
+ border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/state/atlasSelection/effects.ts b/src/state/atlasSelection/effects.ts
index 2c95b7560..d5cd89ecc 100644
--- a/src/state/atlasSelection/effects.ts
+++ b/src/state/atlasSelection/effects.ts
@@ -140,7 +140,7 @@ export class Effect {
return concat(
...currAtlas.parcellations.map(
p => this.parcSupportedInSpacePipe.transform(p["@id"], template).pipe(
- filter(flag => flag),
+ filter(flag => flag.supported),
switchMap(() => this.sapiSvc.getParcDetail(currAtlas["@id"], p['@id'])),
)
)
@@ -159,7 +159,7 @@ export class Effect {
return concat(
...currAtlas.spaces.map(
sp => this.parcSupportedInSpacePipe.transform(parcellation["@id"], sp["@id"]).pipe(
- filter(flag => flag),
+ filter(flag => flag.supported),
switchMap(() => this.sapiSvc.getSpaceDetail(currAtlas["@id"], sp['@id'])),
)
)
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index 5801d51eb..894e0611a 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -106,9 +106,6 @@ export class ViewerCmp implements OnDestroy {
map(({ parcellation }) => parcellation)
)
- public allAvailableAtlas$ = this.store$.pipe(
- atlasSelection.fromRootStore.allAvailSpaces(this.sapi)
- )
public allAvailableSpaces$ = this.store$.pipe(
atlasSelection.fromRootStore.allAvailSpaces(this.sapi)
)
@@ -435,6 +432,16 @@ export class ViewerCmp implements OnDestroy {
})
)
}
+ onSelectSpaceAndParcellation(e): void{
+ const {space, parcellation} = e
+ this.store$.dispatch(
+ atlasSelection.actions.setAtlasSelectionState({
+ selectedTemplate: space,
+ selectedParcellation: parcellation
+ })
+ )
+ }
+
navigateTo(position: number[]): void {
this.store$.dispatch(
atlasSelection.actions.navigateTo({
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index 311bd4a4d..10966ff61 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -145,3 +145,8 @@ mat-list[dense].contextual-block
margin: 0 -30px;
padding: 0 30px;
}
+
+.hide-chip-corner {
+ margin-left: -2.5rem;
+ padding-left: 3rem;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 360a4f368..fac8463af 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -376,13 +376,6 @@
[viewerLoaded]="viewerLoaded">
</top-menu-cmp>
-<!-- <sxplr-sapiviews-core-atlas-dropdown-selector-->
-<!-- class="v-align-top sxplr-pt-2 pe-all mt-2 sxplr-custom-cmp bg card m-2 mat-elevation-z2 d-inline-block"-->
-<!-- quick-tour-->
-<!-- [quick-tour-description]="quickTourAtlasSelector.description"-->
-<!-- [quick-tour-order]="quickTourAtlasSelector.order">-->
-<!-- </sxplr-sapiviews-core-atlas-dropdown-selector>-->
-
</ng-template>
@@ -403,15 +396,6 @@
<!-- bottom left -->
<ng-template #bottomLeftTmpl let-showFullSideNav="showFullSideNav">
-<!-- <!– atlas selector –>-->
-<!-- <sxplr-sapiviews-core-atlas-tmplparcselector-->
-<!-- *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"-->
-<!-- [iav-key-listener]="[{'type': 'keydown', 'key': 'Escape'}]"-->
-<!-- (iav-key-event)="tmplParcSelector.closeSelector()"-->
-<!-- (iav-outsideClick)="tmplParcSelector.closeSelector()"-->
-<!-- #tmplParcSelector="sxplrSapiViewsCoreAtlasTmplparcselector">-->
-<!-- </sxplr-sapiviews-core-atlas-tmplparcselector>-->
-
<!-- scroll container -->
<div class="sxplr-d-inline-flex
sxplr-flex-wrap-nowrap
@@ -422,36 +406,38 @@
<!-- selected atlas chip -->
<sxplr-sapiviews-core-atlas-smartchip
- class="sxplr-z-2 sxplr-ml-2"
+ class="sxplr-z-4 sxplr-ml-2"
+ [sxplr-sapiviews-core-atlas-smartchip-custom-color]="'dimgrey'"
[sxplr-sapiviews-core-atlas-smartchip-atlas]="selectedAtlas$ | async"
[sxplr-sapiviews-core-atlas-smartchip-all-atlases]="fetchedAtlases$ | async"
(sxplr-sapiviews-core-atlas-smartchip-select-atlas)="onSelectAtlas($event)"
>
</sxplr-sapiviews-core-atlas-smartchip>
- <mat-chip class="pe-all sxplr-z-1 arrow-between-chips">></mat-chip>
-
<!-- selected space chip -->
- <sxplr-sapiviews-core-space-smartchip
- class="sxplr-z-2"
- [sxplr-sapiviews-core-space-smartchip-space]="templateSelected$ | async"
- [sxplr-sapiviews-core-space-smartchip-all-spaces]="allAvailableSpaces$ | async"
- (sxplr-sapiviews-core-space-smartchip-select-space)="onSelectSpace($event)"
- >
- </sxplr-sapiviews-core-space-smartchip>
-
- <mat-chip class="pe-all sxplr-z-1 arrow-between-chips">></mat-chip>
-
+ <ng-container *ngIf="(allAvailableSpaces$ | async) as spaces">
+ <sxplr-sapiviews-core-space-smartchip
+ *ngIf="spaces.length > 1"
+ class="sxplr-z-3"
+ [sxplr-sapiviews-core-space-smartchip-custom-color]="'grey'"
+ [sxplr-sapiviews-core-space-smartchip-space]="templateSelected$ | async"
+ [sxplr-sapiviews-core-space-smartchip-all-spaces]="allAvailableSpaces$ | async"
+ (sxplr-sapiviews-core-space-smartchip-select-space)="onSelectSpace($event)">
+ </sxplr-sapiviews-core-space-smartchip>
+ </ng-container>
<!-- selected parcellation chip -->
<sxplr-sapiviews-core-parcellation-smartchip
class="sxplr-z-2 sxplr-mr-1"
+ [sxplr-sapiviews-core-parcellation-smartchip-selected-space]="templateSelected$ | async"
[sxplr-sapiviews-core-parcellation-smartchip-parcellation]="parcellationSelected$ | async"
[sxplr-sapiviews-core-parcellation-smartchip-all-parcellations]="allAvailableParcellations$ | async"
(sxplr-sapiviews-core-parcellation-smartchip-dismiss-nonbase-layer)="onDismissNonbaseLayer()"
(sxplr-sapiviews-core-parcellation-smartchip-select-parcellation)="onSelectParcellation($event)"
- >
+ (sxplr-sapiviews-core-parcellation-smartchip-select-space-parcellation)="onSelectSpaceAndParcellation($event)"
+ [sxplr-sapiviews-core-parcellation-smartchip-custom-color]="'darkgrey'"
+ >
</sxplr-sapiviews-core-parcellation-smartchip>
<!-- selected region chip -->
--
GitLab