From 29ac421fc85321d4a47acb61aaa1c5d70d2ba837 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 15 Mar 2023 10:43:01 +0100
Subject: [PATCH] feat: add headers to chips
---
.../sapiViews/core/region/module.ts | 5 -
.../region/chip/region.chip.component.ts | 20 ---
.../region/region/chip/region.chip.stories.ts | 134 ------------------
.../region/region/chip/region.chip.style.css | 0
.../region/chip/region.chip.template.html | 35 -----
.../sapiViews/core/rich/ATPSelector/module.ts | 2 +
.../pureDumb/pureATPSelector.template.html | 20 ++-
.../component/smartChip.component.ts | 7 +
.../smartChip/component/smartChip.style.scss | 28 +++-
.../component/smartChip.template.html | 39 +++--
src/components/smartChip/module.ts | 3 +
.../smartChip/smartChip.header.directive.ts | 9 ++
.../feature-view/feature-view.component.html | 35 ++---
src/overwrite.scss | 2 +-
src/viewerModule/module.ts | 2 +
.../viewerCmp/viewerCmp.style.css | 25 ++--
.../viewerCmp/viewerCmp.template.html | 47 +++---
17 files changed, 161 insertions(+), 252 deletions(-)
delete mode 100644 src/atlasComponents/sapiViews/core/region/region/chip/region.chip.component.ts
delete mode 100644 src/atlasComponents/sapiViews/core/region/region/chip/region.chip.stories.ts
delete mode 100644 src/atlasComponents/sapiViews/core/region/region/chip/region.chip.style.css
delete mode 100644 src/atlasComponents/sapiViews/core/region/region/chip/region.chip.template.html
create mode 100644 src/components/smartChip/smartChip.header.directive.ts
diff --git a/src/atlasComponents/sapiViews/core/region/module.ts b/src/atlasComponents/sapiViews/core/region/module.ts
index 9794ca566..948252870 100644
--- a/src/atlasComponents/sapiViews/core/region/module.ts
+++ b/src/atlasComponents/sapiViews/core/region/module.ts
@@ -6,9 +6,7 @@ import { SpinnerModule } from "src/components/spinner";
import { FeatureModule } from "src/features";
import { AngularMaterialModule } from "src/sharedModules";
import { StrictLocalModule } from "src/strictLocal";
-// import { SapiViewsFeaturesModule } from "../../features";
import { SapiViewsUtilModule } from "../../util/module";
-import { SapiViewsCoreRegionRegionChip } from "./region/chip/region.chip.component";
import { SapiViewsCoreRegionRegionListItem } from "./region/listItem/region.listItem.component";
import { SapiViewsCoreRegionRegionBase } from "./region/region.base.directive";
import { SapiViewsCoreRegionRegionalFeatureDirective } from "./region/region.features.directive";
@@ -19,7 +17,6 @@ import { SapiViewsCoreRegionRegionRich } from "./region/rich/region.rich.compone
CommonModule,
AngularMaterialModule,
SapiViewsUtilModule,
- // SapiViewsFeaturesModule,
SpinnerModule,
MarkdownModule,
StrictLocalModule,
@@ -29,14 +26,12 @@ import { SapiViewsCoreRegionRegionRich } from "./region/rich/region.rich.compone
declarations: [
SapiViewsCoreRegionRegionListItem,
SapiViewsCoreRegionRegionRich,
- SapiViewsCoreRegionRegionChip,
SapiViewsCoreRegionRegionBase,
SapiViewsCoreRegionRegionalFeatureDirective,
],
exports: [
SapiViewsCoreRegionRegionListItem,
SapiViewsCoreRegionRegionRich,
- SapiViewsCoreRegionRegionChip,
SapiViewsCoreRegionRegionBase,
SapiViewsCoreRegionRegionalFeatureDirective,
]
diff --git a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.component.ts b/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.component.ts
deleted file mode 100644
index 1852f3e60..000000000
--- a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, EventEmitter, Output } from "@angular/core";
-import { SapiViewsCoreRegionRegionBase } from "../region.base.directive";
-
-@Component({
- selector: `sxplr-sapiviews-core-region-region-chip`,
- templateUrl: `./region.chip.template.html`,
- styleUrls: [
- `./region.chip.style.css`
- ]
-})
-
-export class SapiViewsCoreRegionRegionChip extends SapiViewsCoreRegionRegionBase {
- shouldFetchDetail = true
- @Output('sxplr-sapiviews-core-region-region-chip-clicked')
- clickEmitter = new EventEmitter<MouseEvent>()
-
- onClick(event: MouseEvent){
- this.clickEmitter.emit(event)
- }
-}
diff --git a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.stories.ts b/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.stories.ts
deleted file mode 100644
index ec74e25aa..000000000
--- a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.stories.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { HttpClientModule } from "@angular/common/http"
-import { Meta, moduleMetadata, Story } from "@storybook/angular"
-import { SAPI } from "src/atlasComponents/sapi"
-import { provideDarkTheme, getHumanAtlas, getJba29, getMni152, getHoc1Right, get44Left } from "src/atlasComponents/sapi/stories.base"
-import { AngularMaterialModule } from "src/sharedModules"
-import { SapiViewsCoreRegionModule } from "../../module"
-import { SapiViewsCoreRegionRegionChip } from "./region.chip.component"
-
-
-export default {
- component: SapiViewsCoreRegionRegionChip,
- decorators: [
- moduleMetadata({
- imports: [
- CommonModule,
- HttpClientModule,
- SapiViewsCoreRegionModule,
- AngularMaterialModule,
- ],
- providers: [
- SAPI,
- ...provideDarkTheme,
- ],
- declarations: []
- })
- ],
-} as Meta
-
-const Template: Story<SapiViewsCoreRegionRegionChip> = (args: SapiViewsCoreRegionRegionChip, { loaded, parameters }) => {
- const {
- atlas,
- parcellation,
- template,
- region,
- } = loaded
- const {
- contentProjection
- } = parameters
-
- return ({
- props: {
- atlas,
- parcellation,
- template,
- region,
- },
- template: `
- <sxplr-sapiviews-core-region-region-chip>
- ${contentProjection || ''}
- </sxplr-sapiviews-core-region-region-chip>
- `
- })
-}
-Template.loaders = []
-
-const getContentProjection = ({ prefix = null, suffix = null }) => {
- let returnVal = ``
- if (prefix) {
- returnVal += `<div prefix>${prefix}</div>`
- }
- if (suffix) {
- returnVal += `<div suffix>${suffix}</div>`
- }
- return returnVal
-}
-
-export const Default = Template.bind({})
-Default.loaders = [
- async () => {
-
- const atlas = await getHumanAtlas()
- const parcellation = await getJba29()
- const template = await getMni152()
- const region = await getHoc1Right()
-
- return {
- atlas,
- parcellation,
- template,
- region,
- }
- }
-]
-
-export const Dark = Template.bind({})
-Dark.loaders = [
- async () => {
-
- const atlas = await getHumanAtlas()
- const parcellation = await getJba29()
- const template = await getMni152()
- const region = await get44Left()
-
- return {
- atlas,
- parcellation,
- template,
- region,
- }
- }
-]
-
-export const Prefix = Template.bind({})
-Prefix.loaders = [
- ...Default.loaders
-]
-Prefix.parameters = {
- contentProjection: getContentProjection({
- prefix: `PREFIX`,
- })
-}
-
-export const Suffix = Template.bind({})
-Suffix.loaders = [
- ...Default.loaders
-]
-Suffix.parameters = {
- contentProjection: getContentProjection({
- suffix: `SUFFIX`,
- })
-}
-
-
-export const PrefixSuffix = Template.bind({})
-PrefixSuffix.loaders = [
- ...Default.loaders
-]
-PrefixSuffix.parameters = {
- contentProjection: getContentProjection({
- prefix: `PREFIX`,
- suffix: `SUFFIX`,
- })
-}
diff --git a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.style.css b/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.style.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.template.html b/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.template.html
deleted file mode 100644
index 9b8262ee0..000000000
--- a/src/atlasComponents/sapiViews/core/region/region/chip/region.chip.template.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<ng-template #prefixTmpl>
- <ng-content select="[prefix]"></ng-content>
-</ng-template>
-
-<ng-template #suffixTmpl>
- <ng-content select="[suffix]"></ng-content>
-</ng-template>
-
-<div *ngIf="!region">
- <div class="sxplr-d-inline-block">
- <ng-template [ngTemplateOutlet]="prefixTmpl"></ng-template>
- </div>
- <spinner-cmp class="sxplr-d-inline-block"></spinner-cmp>
- <div class="sxplr-d-inline-block">
- <ng-template [ngTemplateOutlet]="suffixTmpl"></ng-template>
- </div>
-</div>
-
-<mat-chip-list *ngIf="region"
- [ngClass]="{
- 'darktheme': regionDarkmode,
- 'lighttheme': !regionDarkmode
- }">
- <mat-chip
- (click)="onClick($event)"
- class="sxplr-custom-cmp text"
- [style.backgroundColor]="regionRgbString"
- >
- <ng-template [ngTemplateOutlet]="prefixTmpl"></ng-template>
- <span class="mat-body">
- {{ region.name }}
- </span>
- <ng-template [ngTemplateOutlet]="suffixTmpl"></ng-template>
- </mat-chip>
-</mat-chip-list>
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/module.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/module.ts
index 188a54871..0588d1e99 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/module.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/module.ts
@@ -11,6 +11,7 @@ import { SapiViewsCoreParcellationModule } from "src/atlasComponents/sapiViews/c
import { PureATPSelector } from "./pureDumb/pureATPSelector.components";
import { WrapperATPSelector } from "./wrapper/wrapper.component";
import { SAPIModule } from "src/atlasComponents/sapi/module";
+import { MatTooltipModule } from "@angular/material/tooltip";
@NgModule({
imports: [
@@ -20,6 +21,7 @@ import { SAPIModule } from "src/atlasComponents/sapi/module";
MarkdownModule,
MatRippleModule,
MatIconModule,
+ MatTooltipModule,
MatButtonModule,
DialogModule,
SAPIModule,
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
index 58378b95d..498b11231 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
@@ -8,10 +8,13 @@
(itemClicked)="selectLeaf({ parcellation: $event })"
[elevation]="2"
[disabled]="isBusy">
+
+ <ng-template sxplrSmartChipHeader>
+ Parcellation
+ </ng-template>
+
<ng-template sxplrSmartChipContent>
<span class="chip-text">
- <span>
- </span>
{{ ATP.parcellation.name }}
</span>
@@ -50,6 +53,10 @@
(itemClicked)="selectLeaf({ template: $event })"
[elevation]="4"
[disabled]="isBusy">
+ <ng-template sxplrSmartChipHeader>
+ Template
+ </ng-template>
+
<ng-template sxplrSmartChipContent>
<span class="chip-text">
{{ ATP.template.name }}
@@ -67,6 +74,11 @@
(itemClicked)="selectLeaf({ atlas: $event})"
[elevation]="6"
[disabled]="isBusy">
+
+ <ng-template sxplrSmartChipHeader>
+ Atlas
+ </ng-template>
+
<ng-template sxplrSmartChipContent>
<span class="chip-text">
{{ ATP.atlas.name }}
@@ -106,7 +118,9 @@
</ng-template>
<!-- button body -->
- <span *ngIf="item" class="full-sized-button">
+ <span *ngIf="item" class="full-sized-button"
+ [matTooltip]="item.version?.name || item.name || item.fullName"
+ [matTooltipPosition]="'above'">
{{ item.version?.name || item.name || item.fullName }}
</span>
diff --git a/src/components/smartChip/component/smartChip.component.ts b/src/components/smartChip/component/smartChip.component.ts
index 2e2ee0b7a..b68cfb427 100644
--- a/src/components/smartChip/component/smartChip.component.ts
+++ b/src/components/smartChip/component/smartChip.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBin
import { SmartChipContent } from "../smartChip.content.directive"
import { SmartChipMenu } from "../smartChip.menu.directive";
import { rgbToHsl, hexToRgb } from 'common/util'
+import { SmartChipHeader } from "../smartChip.header.directive";
const cssColorToHsl = (input: string) => {
if (/rgb/i.test(input)) {
@@ -45,6 +46,9 @@ export class SmartChip<T extends object> implements OnChanges{
@Input('color')
color = `rgba(200, 200, 200, 1)`
+ @Input('noMenu')
+ noMenuFlag = false
+
@Input('disabled')
disabled: boolean = false
@@ -68,6 +72,9 @@ export class SmartChip<T extends object> implements OnChanges{
@ContentChild(SmartChipMenu)
menuTmpl: SmartChipMenu
+ @ContentChild(SmartChipHeader)
+ headerTmpl: SmartChipHeader
+
@HostBinding('class')
darkTheme: string = 'lighttheme'
diff --git a/src/components/smartChip/component/smartChip.style.scss b/src/components/smartChip/component/smartChip.style.scss
index 3b0e26623..d9fda5b28 100644
--- a/src/components/smartChip/component/smartChip.style.scss
+++ b/src/components/smartChip/component/smartChip.style.scss
@@ -1,8 +1,10 @@
:host
{
margin: 0.5rem 1rem;
+ margin-top: 1.5rem;
min-height: 32px;
height: 1px;
+ position: relative;
}
.smart-chip
@@ -10,7 +12,7 @@
box-sizing: border-box;
height: 100%;
- padding: 0.5rem 1rem;
+ padding: 0.8rem 1.6rem;
border-radius: 1rem;
display: inline-flex;
@@ -39,3 +41,27 @@
{
cursor: not-allowed;
}
+
+.smart-chip.header
+{
+ position: absolute;
+ scale: 0.8;
+ top: 0;
+ left: 0;
+ margin-left: 0.5rem;
+ margin-top: -1.4rem;
+}
+
+
+.smart-chip.header::before
+{
+ content: "";
+ background-color: rgba(200, 200, 200, 0.8);
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: 1rem;
+ opacity: 0.2;
+}
diff --git a/src/components/smartChip/component/smartChip.template.html b/src/components/smartChip/component/smartChip.template.html
index c82394e1d..08ebcee8c 100644
--- a/src/components/smartChip/component/smartChip.template.html
+++ b/src/components/smartChip/component/smartChip.template.html
@@ -1,11 +1,34 @@
-<div [style.background-color]="color"
- [matMenuTriggerFor]="mainMenu"
- matRipple
- [ngClass]="smartChipClass"
- class="mat-body smart-chip sxplr-custom-cmp text">
- <ng-template [ngTemplateOutlet]="contentTmpl?.templateRef || fallbackContentTmpl">
- </ng-template>
-</div>
+<ng-template [ngIf]="noMenuFlag" [ngIfElse]="hasMenuTmpl">
+
+ <div [style.background-color]="color"
+ matRipple
+ [ngClass]="smartChipClass"
+ class="mat-body smart-chip sxplr-custom-cmp text">
+ <ng-template [ngTemplateOutlet]="contentTmpl?.templateRef || fallbackContentTmpl">
+ </ng-template>
+ </div>
+
+</ng-template>
+
+<ng-template #hasMenuTmpl>
+ <div [style.background-color]="color"
+ [matMenuTriggerFor]="mainMenu"
+ matRipple
+ [ngClass]="smartChipClass"
+ class="mat-body smart-chip sxplr-custom-cmp text">
+ <ng-template [ngTemplateOutlet]="contentTmpl?.templateRef || fallbackContentTmpl">
+ </ng-template>
+ </div>
+</ng-template>
+
+<!-- header component -->
+<ng-template [ngIf]="headerTmpl?.templateRef" let-tmpl>
+ <div class="mat-body smart-chip sxplr-custom-cmp text header mat-elevation-z2"
+ [style.background-color]="color">
+ <ng-template [ngTemplateOutlet]="tmpl">
+ </ng-template>
+ </div>
+</ng-template>
<!-- main menu is fired from chip -->
<mat-menu #mainMenu="matMenu">
diff --git a/src/components/smartChip/module.ts b/src/components/smartChip/module.ts
index 00fe423cc..78c85f3a4 100644
--- a/src/components/smartChip/module.ts
+++ b/src/components/smartChip/module.ts
@@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { SmartChip } from "./component/smartChip.component";
import { HasSubMenuPipe } from "./hasSubmenu.pipe";
import { SmartChipContent } from "./smartChip.content.directive";
+import { SmartChipHeader } from "./smartChip.header.directive";
import { SmartChipMenu } from "./smartChip.menu.directive";
@NgModule({
@@ -18,12 +19,14 @@ import { SmartChipMenu } from "./smartChip.menu.directive";
declarations: [
SmartChipMenu,
SmartChipContent,
+ SmartChipHeader,
SmartChip,
HasSubMenuPipe,
],
exports: [
SmartChipMenu,
SmartChipContent,
+ SmartChipHeader,
SmartChip,
]
})
diff --git a/src/components/smartChip/smartChip.header.directive.ts b/src/components/smartChip/smartChip.header.directive.ts
new file mode 100644
index 000000000..010ae077e
--- /dev/null
+++ b/src/components/smartChip/smartChip.header.directive.ts
@@ -0,0 +1,9 @@
+import { Directive, Inject, TemplateRef } from "@angular/core";
+
+@Directive({
+ selector: `ng-template[sxplrSmartChipHeader]`
+})
+
+export class SmartChipHeader {
+ constructor(@Inject(TemplateRef) public templateRef: TemplateRef<unknown>){}
+}
diff --git a/src/features/feature-view/feature-view.component.html b/src/features/feature-view/feature-view.component.html
index e52f026ed..f4fdfe35f 100644
--- a/src/features/feature-view/feature-view.component.html
+++ b/src/features/feature-view/feature-view.component.html
@@ -64,25 +64,28 @@
</ng-template>
<!-- tabular special view -->
-<ng-template [ngIf]="tabular$ | async" let-tabular>
- <table class="feature-detail" mat-table [dataSource]="tabular | transformPdToDs">
+<!-- suppress tabuular view if linear or polar is visible -->
+<ng-template [ngIf]="!(linear$ | async) && !(polar$ | async)">
- <ng-container *ngFor="let column of columns$ | async"
- [matColumnDef]="column">
- <th mat-header-cell *matHeaderCellDef>
- {{ column }}
- </th>
- <td mat-cell *matCellDef="let element">
- {{ element[column] }}
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="columns$ | async"></tr>
- <tr mat-row *matRowDef="let row; columns: columns$ | async;"></tr>
- </table>
+ <ng-template [ngIf]="tabular$ | async" let-tabular>
+ <table class="feature-detail" mat-table [dataSource]="tabular | transformPdToDs">
+
+ <ng-container *ngFor="let column of columns$ | async"
+ [matColumnDef]="column">
+ <th mat-header-cell *matHeaderCellDef>
+ {{ column }}
+ </th>
+ <td mat-cell *matCellDef="let element">
+ {{ element[column] }}
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="columns$ | async"></tr>
+ <tr mat-row *matRowDef="let row; columns: columns$ | async;"></tr>
+ </table>
+ </ng-template>
</ng-template>
-
<!-- voi special view -->
<ng-template [ngIf]="voi$ | async" let-voi>
<ng-layer-ctl
diff --git a/src/overwrite.scss b/src/overwrite.scss
index a60e27556..9fd0bb0b8 100644
--- a/src/overwrite.scss
+++ b/src/overwrite.scss
@@ -165,7 +165,7 @@ $display-vars: none, block, inline-block, flex, inline-flex, grid;
}
}
-$align-items-vars: center, stretch, start;
+$align-items-vars: center, stretch, start, flex-end;
@each $align-items-var in $align-items-vars {
.align-items-#{$align-items-var} {
align-items: $align-items-var;
diff --git a/src/viewerModule/module.ts b/src/viewerModule/module.ts
index 8d2e4006f..22a5950b8 100644
--- a/src/viewerModule/module.ts
+++ b/src/viewerModule/module.ts
@@ -32,6 +32,7 @@ import { environment } from "src/environments/environment"
import { ATPSelectorModule } from "src/atlasComponents/sapiViews/core/rich/ATPSelector";
import { FeatureModule } from "src/features";
import { NgLayerCtlModule } from "./nehuba/ngLayerCtlModule/module";
+import { SmartChipModule } from "src/components/smartChip";
@NgModule({
imports: [
@@ -56,6 +57,7 @@ import { NgLayerCtlModule } from "./nehuba/ngLayerCtlModule/module";
ATPSelectorModule,
FeatureModule,
NgLayerCtlModule,
+ SmartChipModule,
...(environment.ENABLE_LEAP_MOTION ? [LeapModule] : [])
],
declarations: [
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index d4831cf1a..8de1bd297 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -55,16 +55,6 @@ mat-drawer
padding-top: 5rem;
}
-sxplr-sapiviews-core-region-region-chip
-{
- margin-left:-5rem;
-}
-
-sxplr-sapiviews-core-region-region-chip [prefix]
-{
- padding-left:5rem;
-}
-
.auto-complete-container
{
display: flex;
@@ -148,3 +138,18 @@ mat-list[dense].contextual-block
align-items: center;
justify-content: center;
}
+
+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/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 59ebbb7f5..7756b5325 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -380,31 +380,40 @@
sxplr-pe-all
sxplr-of-x-auto
sxplr-of-y-hidden
- sxplr-align-items-center">
+ sxplr-align-items-stretch">
<sxplr-wrapper-atp-selector class="sxplr-z-2">
</sxplr-wrapper-atp-selector>
<!-- selected region chip -->
- <sxplr-sapiviews-core-region-region-chip
- *ngFor="let region of selectedRegions$ | async"
- class="sxplr-pe-all sxplr-z-1 sxplr-mr-1"
- (sxplr-sapiviews-core-region-region-chip-clicked)="showFullSideNav()"
- [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
- [sxplr-sapiviews-core-region-template]="templateSelected$ | async"
- [sxplr-sapiviews-core-region-parcellation]="parcellationSelected$ | async"
- [sxplr-sapiviews-core-region-region]="region">
-
- <div prefix>
- </div>
+ <ng-template ngFor [ngForOf]="selectedRegions$ | async" let-region>
+ <sxplr-smart-chip
+ [noMenu]="true"
+ [color]="sapiViewsCoreRegion.regionRgbString"
+ (click)="showFullSideNav()"
+ sxplr-sapiviews-core-region
+ [sxplr-sapiviews-core-region-atlas]="selectedAtlas$ | async"
+ [sxplr-sapiviews-core-region-template]="templateSelected$ | async"
+ [sxplr-sapiviews-core-region-parcellation]="parcellationSelected$ | async"
+ [sxplr-sapiviews-core-region-region]="region"
+ [sxplr-sapiviews-core-region-detail-flag]="true"
+ #sapiViewsCoreRegion="sapiViewsCoreRegion">
+ <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>
+ <ng-template sxplrSmartChipHeader>
+ Region
+ </ng-template>
+ </sxplr-smart-chip>
- <div suffix class="region-chip-suffix">
- <button mat-icon-button iav-stop="mousedown click"
- (click)="clearRoi()">
- <i class="fas fa-times"></i>
- </button>
- </div>
- </sxplr-sapiviews-core-region-region-chip>
+ </ng-template>
</div>
</ng-template>
--
GitLab