diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
index 65f5dc9e3324fdc8ce2266c7ff0254f9c9b3c684..c3444ab26c494219f9c651dd989be037f82e3bbd 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
@@ -106,7 +106,7 @@
<!-- Overview -->
<mat-tab label="Overview">
- <mat-action-list class="overview-container">
+ <mat-action-list class="overview-container" dense>
<button
mat-list-item
@@ -138,7 +138,7 @@
<ng-template [ngIf]="(desc$ | async) || region.desc" let-desc>
- <readmore-component [collapsedHeight]="240">
+ <readmore-component [collapsedHeight]="240" class="sxplr-mb-8">
<markdown-dom class="sxplr-m-2 sxplr-muted" [markdown]="desc">
</markdown-dom>
</readmore-component>
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
index 04b217ef5cd952c9e21229e07dd6ec038fb9a984..a11e3301d53b422a9830a471ef59e9757568e82f 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
@@ -76,6 +76,8 @@ export class PureATPSelector implements OnChanges, AfterViewInit, OnDestroy{
smartChips: QueryList<SmartChip<object>>
#menuOpen$ = new BehaviorSubject<{ some: boolean, all: boolean, none: boolean }>({ some: false, all: false, none: false })
+
+ @Output('sxplr-pure-atp-selector-menu-open')
menuOpen$ = this.#menuOpen$.asObservable()
@HostBinding('attr.data-menu-open')
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
index 3bd40c2661a16e9eea6f01d9826ba55961e74e85..980c5b141ab539ffe8b5425fce24431380b03eeb 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
@@ -1,17 +1,3 @@
-:host-context([experimental="true"]) :host
-{
- opacity: 0.5;
- transition: opacity ease-in-out 160ms;
-
- &:hover,
- &[data-menu-open="some"],
- &[data-menu-open="all"]
- {
- opacity: 1;
- }
-}
-
-
:host
{
display: inline-flex;
@@ -33,8 +19,10 @@
margin-left: 0.2rem;
}
-sxplr-smart-chip
+:host sxplr-smart-chip
{
+ margin-left: 1rem;
+ margin-right: 1rem;
min-width: 10rem;
}
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
index 592790906c181e7699167171fc9968fb8cdd6cfd..a2905e1c8f89462a9c1ea92bd82f6cb1cc97f7f2 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy } from "@angular/core";
+import { Component, EventEmitter, Inject, OnDestroy, Output } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { select, Store } from "@ngrx/store";
import { Observable, of, Subject, Subscription } from "rxjs";
@@ -29,6 +29,10 @@ function isATPGuard(obj: any): obj is Partial<ATP&{ requested: Partial<ATP> }> {
})
export class WrapperATPSelector implements OnDestroy{
+
+ @Output('sxplr-wrapper-atp-selector-menu-open')
+ menuOpen = new EventEmitter<{some: boolean, all: boolean, none: boolean}>()
+
darkThemePalette = darkThemePalette
lightThemePalette = lightThemePalette
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
index bf9b3f0e786ce5fa70818458749e48dc48c85c48..72f3b51cc9e54f3f5e0dfaffcc40bb58b955b395 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
@@ -6,6 +6,7 @@
[sxplr-pure-atp-selector-parcellations]="parcs$ | async"
[sxplr-pure-atp-selector-is-busy]="isBusy$ | async"
(sxplr-pure-atp-selector-on-select)="selectLeaf($event)"
+ (sxplr-pure-atp-selector-menu-open)="menuOpen.emit($event)"
>
<button mat-icon-button
(click)="toggleParcellationVisibility()"
diff --git a/src/components/smartChip/component/smartChip.style.scss b/src/components/smartChip/component/smartChip.style.scss
index df88b7eed1ed5827254cc9e947b766c508e6db52..bed16c0901c9f0c34bba3011e24842fd641ea86f 100644
--- a/src/components/smartChip/component/smartChip.style.scss
+++ b/src/components/smartChip/component/smartChip.style.scss
@@ -11,6 +11,7 @@
{
:host
{
+ margin: 0;
min-height: 44px;
}
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 19b81c9407afc0482478b0a522ef473c0b381964..e09f456a91c20007fbd2ac358e20b4de3828cfb2 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -784,22 +784,6 @@ kg-dataset-previewer > img
top: unset!important;
}
-.fixed-top
-{
- bottom: unset!important;
-}
-
-mat-list.sm mat-list-item
-{
- height:2rem!important;
- font-size: 0.8rem!important;
-}
-
-.color-inherit
-{
- color: inherit!important;
-}
-
.sidenav-cover-header-container
{
padding: 16px;
diff --git a/src/features/entry/entry.flattened.component.html b/src/features/entry/entry.flattened.component.html
index a160569b3230f4566aa0258bfb09b3000c83b7f0..a84bcbd119d259f038f947728ca8d869c90e13fd 100644
--- a/src/features/entry/entry.flattened.component.html
+++ b/src/features/entry/entry.flattened.component.html
@@ -111,7 +111,9 @@
<mat-list-option [selected]="(filterFeatureCls.unchecked$ | async).length === 0"
(click)="listOption.selected ? filterList.selectAll() : filterList.deselectAll()"
#listOption>
- <span class="text-muted">(all)</span>
+ <span class="text-muted sxplr-mr-2">
+ <ng-template [ngTemplateOutlet]="filterTallyTmpl"></ng-template>
+ </span>
</mat-list-option>
</mat-selection-list>
@@ -138,14 +140,10 @@
<mat-divider></mat-divider>
- <div class="text-muted sxplr-mr-2 filter-tally">
- <ng-template [ngTemplateOutlet]="filterTallyTmpl"></ng-template>
- </div>
-
</div>
<div mat-dialog-actions align="end">
- <button mat-flat-button color="primary" (click)="filterList.selectAll()">
+ <button mat-stroked-button color="primary" (click)="filterList.selectAll()">
Reset
</button>
<button mat-button mat-dialog-close cdkFocusInitial>
diff --git a/src/features/entry/entry.flattened.component.scss b/src/features/entry/entry.flattened.component.scss
index 690e23771481f8f469a9bad9b1f4dec7e0746b01..22f832afcf5e1e65f52bfa281dbb30e3075feefb 100644
--- a/src/features/entry/entry.flattened.component.scss
+++ b/src/features/entry/entry.flattened.component.scss
@@ -34,9 +34,3 @@ cdk-virtual-scroll-viewport button
white-space: nowrap;
margin: 0.2rem 0.4rem;
}
-
-.filter-tally
-{
- display: flex;
- flex-direction: row-reverse;
-}
diff --git a/src/features/feature-view/feature-view.component.html b/src/features/feature-view/feature-view.component.html
index b8d73eb42b70e740bb47863b04f01e69c154504e..f5ce6c4232bc017b1ca3f314547de8a3c8a3adc4 100644
--- a/src/features/feature-view/feature-view.component.html
+++ b/src/features/feature-view/feature-view.component.html
@@ -137,7 +137,7 @@
</mat-action-list>
- <readmore-component [collapsedHeight]="240">
+ <readmore-component [collapsedHeight]="240" class="sxplr-mb-8">
<markdown-dom class="sxplr-m-2 sxplr-muted" [markdown]="feature.desc">
</markdown-dom>
</readmore-component>
diff --git a/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.component.ts b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fa7ea98e2e3cbf3d0488bf1c237c59509e9cc92
--- /dev/null
+++ b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.component.ts
@@ -0,0 +1,63 @@
+import { Component, EventEmitter, HostBinding, Output } from "@angular/core";
+import { Store, select } from "@ngrx/store";
+import { combineLatest } from "rxjs";
+import { map } from "rxjs/operators";
+import { MainState, atlasSelection } from "src/state";
+
+@Component({
+ selector: 'sxplr-bottom-menu',
+ templateUrl: `./bottomMenu.template.html`,
+ styleUrls: [
+ `./bottomMenu.style.scss`
+ ],
+})
+
+export class BottomMenuCmp{
+
+ @HostBinding('attr.data-menu-open')
+ menuOpen: 'some'|'all'|'none' = null
+
+ @Output()
+ onRegionClick = new EventEmitter<void>()
+
+ #selectedATP$ = this.store.pipe(
+ atlasSelection.fromRootStore.distinctATP()
+ )
+ #selectedRegions$ = this.store.pipe(
+ select(atlasSelection.selectors.selectedRegions)
+ )
+
+ view$ = combineLatest([
+ this.#selectedATP$,
+ this.#selectedRegions$
+ ]).pipe(
+ map(([ { atlas, parcellation, template }, selectedRegions ]) => {
+ return {
+ selectedAtlas: atlas,
+ selectedParcellation: parcellation,
+ selectedTemplate: template,
+ selectedRegions
+ }
+ })
+ )
+
+ constructor(private store: Store<MainState>){}
+
+ clearRoi(){
+ this.store.dispatch(
+ atlasSelection.actions.clearSelectedRegions()
+ )
+ }
+
+ onATPMenuOpen(opts: { all: boolean, some: boolean, none: boolean }){
+ if (opts.all) {
+ this.menuOpen = 'all'
+ }
+ if (opts.some) {
+ this.menuOpen = 'some'
+ }
+ if (opts.none) {
+ this.menuOpen = 'none'
+ }
+ }
+}
diff --git a/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.style.scss b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2c001b17d90de1bfb81d30f6d52363ed925eb0d1
--- /dev/null
+++ b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.style.scss
@@ -0,0 +1,33 @@
+:host
+{
+ opacity: 0.5;
+ transition: opacity ease-in-out 160ms;
+
+ &:hover,
+ &[data-menu-open="some"],
+ &[data-menu-open="all"]
+ {
+ opacity: 1;
+ }
+}
+
+:host
+{
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+:host sxplr-smart-chip
+{
+ margin-left: -2.5rem;
+}
+
+sxplr-smart-chip .regionname
+{
+ margin-left: 0.5rem;
+}
+
+sxplr-smart-chip [mat-icon-button]
+{
+ margin-right: -1.5rem;
+}
diff --git a/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.template.html b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..aba953d677385cb47de9d1c1b9e90b5a3d4b903e
--- /dev/null
+++ b/src/ui/bottomMenu/bottomMenuCmp/bottomMenu.template.html
@@ -0,0 +1,82 @@
+<sxplr-wrapper-atp-selector (sxplr-wrapper-atp-selector-menu-open)="onATPMenuOpen($event)"
+ class="sxplr-z-2">
+</sxplr-wrapper-atp-selector>
+
+<!-- selected region chip -->
+<ng-template [ngIf]="view$ | async" let-view>
+
+ <!-- single region -->
+ <ng-template [ngIf]="view.selectedRegions.length == 1">
+ <sxplr-smart-chip
+ mat-ripple
+ *ngFor="let region of view.selectedRegions"
+ [noMenu]="true"
+ [color]="sapiViewsCoreRegion.regionRgbString"
+ (click)="onRegionClick.emit()"
+ sxplr-sapiviews-core-region
+ [sxplr-sapiviews-core-region-atlas]="view.selectedAtlas"
+ [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
+ [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation"
+ [sxplr-sapiviews-core-region-region]="region"
+ [sxplr-sapiviews-core-region-detail-flag]="true"
+ #sapiViewsCoreRegion="sapiViewsCoreRegion">
+
+ <ng-template sxplrSmartChipHeader>
+ <span class="regionname">
+ Region
+ </span>
+ </ng-template>
+
+ <ng-template sxplrSmartChipAction>
+ <button class="sxplr-mr-n3"
+ mat-icon-button
+ (click)="clearRoi()">
+ <i class="fas fa-times"></i>
+ </button>
+ </ng-template>
+
+ <ng-template sxplrSmartChipContent>
+ <span class="regionname">
+ {{ region.name }}
+ </span>
+ </ng-template>
+ </sxplr-smart-chip>
+ </ng-template>
+
+
+ <!-- multiple-regions -->
+ <ng-template [ngIf]="view.selectedRegions.length > 1">
+ <sxplr-smart-chip
+ mat-ripple
+ [noMenu]="true"
+
+ (click)="onRegionClick.emit()"
+ sxplr-sapiviews-core-region
+ [sxplr-sapiviews-core-region-atlas]="view.selectedAtlas"
+ [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
+ [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation">
+
+ <ng-template sxplrSmartChipHeader>
+ <span class="regionname">
+ Region
+ </span>
+ </ng-template>
+
+ <ng-template sxplrSmartChipAction>
+ <button class="sxplr-mr-n3"
+ mat-icon-button
+ (click)="clearRoi()">
+ <i class="fas fa-times"></i>
+ </button>
+ </ng-template>
+
+ <ng-template sxplrSmartChipContent>
+ <span class="regionname">
+ {{ view.selectedRegions.length }} regions selected
+ </span>
+ </ng-template>
+ </sxplr-smart-chip>
+
+ </ng-template>
+
+</ng-template>
diff --git a/src/ui/bottomMenu/index.ts b/src/ui/bottomMenu/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..72bed933bd2a1e7e4e9cfa9cd05b9d07a4f6d763
--- /dev/null
+++ b/src/ui/bottomMenu/index.ts
@@ -0,0 +1 @@
+export { BottomMenuModule } from "./module"
diff --git a/src/ui/bottomMenu/module.ts b/src/ui/bottomMenu/module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab281f989f3a51a90ee9098ced3eede0d089aada
--- /dev/null
+++ b/src/ui/bottomMenu/module.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { BottomMenuCmp } from "./bottomMenuCmp/bottomMenu.component";
+import { ATPSelectorModule } from "src/atlasComponents/sapiViews/core/rich/ATPSelector";
+import { SmartChipModule } from "src/components/smartChip";
+import { SapiViewsCoreRegionModule } from "src/atlasComponents/sapiViews/core/region";
+import { MatButtonModule } from "@angular/material/button";
+import { MatRippleModule } from "@angular/material/core";
+
+@NgModule({
+ imports: [
+ CommonModule,
+ ATPSelectorModule,
+ SmartChipModule,
+ SapiViewsCoreRegionModule,
+ MatButtonModule,
+ MatRippleModule,
+ ],
+ declarations: [
+ BottomMenuCmp,
+ ],
+ exports: [
+ BottomMenuCmp,
+ ]
+})
+export class BottomMenuModule{}
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index 1f495d8a1f36b014f093e4e09275d9be491e0218..1490cb3305e94efccb442a3ac7cf4235849b0af6 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -33,7 +33,7 @@
</div>
<!-- experimental toggle -->
- <div iav-fab-speed-dail-child>
+ <div iav-fab-speed-dial-child>
<ng-container *ngTemplateOutlet="experimentalToggleBtnTmpl">
</ng-container>
</div>
diff --git a/src/viewerModule/module.ts b/src/viewerModule/module.ts
index 63e872a851a46c7bd18c0e22b303e469b7dc82f0..79816962edcae195ca1ea2362d3148c4f9ac749d 100644
--- a/src/viewerModule/module.ts
+++ b/src/viewerModule/module.ts
@@ -35,6 +35,7 @@ import { NgLayerCtlModule } from "./nehuba/ngLayerCtlModule/module";
import { SmartChipModule } from "src/components/smartChip";
import { ReactiveFormsModule } from "@angular/forms";
import { ExperimentalModule } from "src/experimental/experimental.module";
+import { BottomMenuModule } from "src/ui/bottomMenu";
@NgModule({
imports: [
@@ -61,6 +62,7 @@ import { ExperimentalModule } from "src/experimental/experimental.module";
NgLayerCtlModule,
SmartChipModule,
ReactiveFormsModule,
+ BottomMenuModule,
ExperimentalModule,
...(environment.ENABLE_LEAP_MOTION ? [LeapModule] : [])
],
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index b39b4115cd180ae805fa29ccd67177dbf53fac99..e7f25001cd06b42c83c70d0c121de780de7b2623 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -306,12 +306,27 @@
<div [ngClass]="(minTrayVisSwitch.switchState$ | async) ? 'd-none' : ''">
- <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
- fontIcon: 'fas fa-search',
- matColor: 'primary',
- click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch),
- badge: voiFeatureEntryCmp.totals$ | async
- }">
+ <ng-template [ngIf]="voiFeatureEntryCmp && (voiFeatureEntryCmp.totals$ | async)"
+ [ngIfElse]="noBadgeTmpl"
+ let-totals>
+
+ <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
+ fontIcon: 'fas fa-search',
+ matColor: 'primary',
+ click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch),
+ badge: totals
+ }">
+ </ng-template>
+ </ng-template>
+
+ <ng-template #noBadgeTmpl>
+
+ <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
+ fontIcon: 'fas fa-search',
+ matColor: 'primary',
+ click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch)
+ }">
+ </ng-template>
</ng-template>
</div>
@@ -445,82 +460,94 @@
<!-- scroll container -->
<div class="sxplr-d-inline-flex
sxplr-flex-wrap-nowrap
- sxplr-mxw-80vw
+ sxplr-mxw-100vw
sxplr-pe-all
sxplr-of-x-auto
sxplr-of-y-hidden
sxplr-align-items-stretch">
+
+ <ng-template sxplrExperimentalFlag
+ #expmt="sxplrExperimentalFlag"
+ [experimental]="true"
+ [ngIf]="expmt.show$ | async">
- <sxplr-wrapper-atp-selector class="sxplr-z-2">
- </sxplr-wrapper-atp-selector>
-
- <!-- selected region chip -->
- <ng-template [ngIf]="view.selectedRegions" let-regions>
-
- <!-- single region -->
- <ng-template [ngIf]="regions.length === 1">
- <sxplr-smart-chip
- *ngFor="let region of regions"
- [noMenu]="true"
- [color]="sapiViewsCoreRegion.regionRgbString"
- (click)="showFullSideNav()"
- sxplr-sapiviews-core-region
- [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
- [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
- [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation"
- [sxplr-sapiviews-core-region-region]="region"
- [sxplr-sapiviews-core-region-detail-flag]="true"
- #sapiViewsCoreRegion="sapiViewsCoreRegion">
-
- <ng-template sxplrSmartChipHeader
- [ngIf]="experimental.show$ | async"
- sxplrExperimentalFlag
- [experimental]="true"
- #experimental="sxplrExperimentalFlag">
- <span class="regionname">
- Region
- </span>
- </ng-template>
-
- <ng-template sxplrSmartChipContent>
- <span class="regionname">
- {{ region.name }}
- </span>
- <button class="sxplr-mr-n3"
- mat-icon-button
- (click)="clearRoi()">
- <i class="fas fa-times"></i>
- </button>
- </ng-template>
- </sxplr-smart-chip>
- </ng-template>
+ <sxplr-bottom-menu (onRegionClick)="showFullSideNav()"></sxplr-bottom-menu>
+ </ng-template>
-
- <!-- multiple-regions -->
- <ng-template [ngIf]="regions.length > 1">
- <sxplr-smart-chip
- [noMenu]="true"
-
- (click)="showFullSideNav()"
- sxplr-sapiviews-core-region
- [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
- [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
- [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation">
- <ng-template sxplrSmartChipContent>
- <span class="regionname">
- {{ regions.length }} regions selected
- </span>
- <button class="sxplr-mr-n3"
- mat-icon-button
- (click)="clearRoi()">
- <i class="fas fa-times"></i>
- </button>
- </ng-template>
- </sxplr-smart-chip>
+ <ng-template sxplrExperimentalFlag
+ #deprec="sxplrExperimentalFlag"
+ [deprecated]="true"
+ [ngIf]="deprec.show$ | async">
+ <sxplr-wrapper-atp-selector class="sxplr-z-2">
+ </sxplr-wrapper-atp-selector>
+
+ <!-- selected region chip -->
+ <ng-template [ngIf]="view.selectedRegions" let-regions>
+
+ <!-- single region -->
+ <ng-template [ngIf]="regions.length === 1">
+ <sxplr-smart-chip
+ *ngFor="let region of regions"
+ [noMenu]="true"
+ [color]="sapiViewsCoreRegion.regionRgbString"
+ (click)="showFullSideNav()"
+ sxplr-sapiviews-core-region
+ [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
+ [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
+ [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation"
+ [sxplr-sapiviews-core-region-region]="region"
+ [sxplr-sapiviews-core-region-detail-flag]="true"
+ #sapiViewsCoreRegion="sapiViewsCoreRegion">
+
+ <ng-template sxplrSmartChipHeader>
+ <span class="regionname">
+ Region
+ </span>
+ </ng-template>
+
+ <ng-template sxplrSmartChipContent>
+ <span class="regionname">
+ {{ region.name }}
+ </span>
+ <button class="sxplr-mr-n3"
+ mat-icon-button
+ (click)="clearRoi()">
+ <i class="fas fa-times"></i>
+ </button>
+ </ng-template>
+ </sxplr-smart-chip>
+ </ng-template>
+
+
+ <!-- multiple-regions -->
+ <ng-template [ngIf]="regions.length > 1">
+ <sxplr-smart-chip
+ [noMenu]="true"
+
+ (click)="showFullSideNav()"
+ sxplr-sapiviews-core-region
+ [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
+ [sxplr-sapiviews-core-region-template]="view.selectedTemplate"
+ [sxplr-sapiviews-core-region-parcellation]="view.selectedParcellation">
+ <ng-template sxplrSmartChipContent>
+ <span class="regionname">
+ {{ regions.length }} regions selected
+ </span>
+ <button class="sxplr-mr-n3"
+ mat-icon-button
+ (click)="clearRoi()">
+ <i class="fas fa-times"></i>
+ </button>
+ </ng-template>
+ </sxplr-smart-chip>
+
+ </ng-template>
+
</ng-template>
</ng-template>
+
</div>
</ng-template>