From 0218667f04ab8cef1af83932856315105344311e Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Thu, 16 Mar 2023 14:30:32 +0100
Subject: [PATCH] chore: fix wording on aux mesh desc chore: add is group pipe
guard feat: add veil to readmore component chore: reworked how voi is shown
bugfix: getParcNgId properly returns null if region is null'ish
---
common/constants.js | 2 +-
.../isGroupedParcellation.pipe.ts | 13 +++++++
.../sapiViews/core/parcellation/module.ts | 3 ++
.../parcellationGroupSelected.pipe.ts | 7 ++--
.../pureDumb/pureATPSelector.template.html | 24 +++++-------
.../readmore/readmoreCmp/readmore.style.css | 38 +++++++++++++++++++
.../readmoreCmp/readmore.template.html | 3 +-
.../smartChip/component/smartChip.style.scss | 1 -
src/features/module.ts | 3 --
src/features/showBbox-toggle.directive.ts | 37 ------------------
.../nehuba/config.service/util.ts | 4 +-
.../viewerCmp/viewerCmp.component.ts | 2 -
.../viewerCmp/viewerCmp.template.html | 27 +++++--------
13 files changed, 82 insertions(+), 82 deletions(-)
create mode 100644 src/atlasComponents/sapiViews/core/parcellation/isGroupedParcellation.pipe.ts
delete mode 100644 src/features/showBbox-toggle.directive.ts
diff --git a/common/constants.js b/common/constants.js
index 2deb29b25..be7e879b7 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -147,7 +147,7 @@ If you do not accept the Terms & Conditions you are not permitted to access or u
REMOVE_FRONTAL_OCTANT_HELPER_TEXT: `Hide the octant facing the user, and overlaying the slice views.`,
- AUXMESH_DESC: `Some templates contains auxiliary meshes. They compliment the appearance of the template in perspective view.`,
+ AUXMESH_DESC: `Some templates contain auxiliary meshes, which compliment the appearance of the template in the perspective view.`,
}
exports.QUICKTOUR_DESC ={
diff --git a/src/atlasComponents/sapiViews/core/parcellation/isGroupedParcellation.pipe.ts b/src/atlasComponents/sapiViews/core/parcellation/isGroupedParcellation.pipe.ts
new file mode 100644
index 000000000..bdcd4f518
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/parcellation/isGroupedParcellation.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core"
+import { GroupedParcellation } from "./groupedParcellation"
+
+@Pipe({
+ name: 'isGroupedParcellation',
+ pure: true
+})
+
+export class IsGroupedParcellation implements PipeTransform{
+ public transform(input: unknown): input is GroupedParcellation {
+ return input['parcellations'] instanceof Array
+ }
+}
diff --git a/src/atlasComponents/sapiViews/core/parcellation/module.ts b/src/atlasComponents/sapiViews/core/parcellation/module.ts
index d3074f6e8..1dba15a67 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/module.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/module.ts
@@ -13,6 +13,7 @@ import { FilterUnsupportedParcPipe } from "./filterUnsupportedParc.pipe";
import { ParcellationDoiPipe } from "./parcellationDoi.pipe";
import { ParcellationVisibilityService } from "./parcellationVis.service";
import { ParcellationGroupSelectedPipe } from "./parcellationGroupSelected.pipe";
+import { IsGroupedParcellation } from "./isGroupedParcellation.pipe";
@NgModule({
imports: [
@@ -29,12 +30,14 @@ import { ParcellationGroupSelectedPipe } from "./parcellationGroupSelected.pipe"
FilterUnsupportedParcPipe,
ParcellationDoiPipe,
ParcellationGroupSelectedPipe,
+ IsGroupedParcellation,
],
exports: [
FilterGroupedParcellationPipe,
FilterUnsupportedParcPipe,
ParcellationGroupSelectedPipe,
ParcellationDoiPipe,
+ IsGroupedParcellation,
],
providers: [
ParcellationVisibilityService,
diff --git a/src/atlasComponents/sapiViews/core/parcellation/parcellationGroupSelected.pipe.ts b/src/atlasComponents/sapiViews/core/parcellation/parcellationGroupSelected.pipe.ts
index 97867311c..ad36105af 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/parcellationGroupSelected.pipe.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/parcellationGroupSelected.pipe.ts
@@ -1,10 +1,9 @@
import { Pipe, PipeTransform } from "@angular/core";
import { SxplrParcellation } from "src/atlasComponents/sapi/sxplrTypes";
import { GroupedParcellation } from "./groupedParcellation";
+import { IsGroupedParcellation } from "./isGroupedParcellation.pipe"
-function isGroupedParc(parc: GroupedParcellation|unknown): parc is GroupedParcellation {
- return !!parc['parcellations']
-}
+const pipe = new IsGroupedParcellation()
@Pipe({
name: 'parcellationGroupSelected',
@@ -13,7 +12,7 @@ function isGroupedParc(parc: GroupedParcellation|unknown): parc is GroupedParcel
export class ParcellationGroupSelectedPipe implements PipeTransform {
public transform(parc: GroupedParcellation|unknown, selectedParcellation: SxplrParcellation): boolean {
- if (!isGroupedParc(parc)) return false
+ if (!pipe.transform(parc)) return false
return parc.parcellations.some(p => p.id === selectedParcellation.id)
}
}
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 498b11231..b482392ae 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
@@ -9,13 +9,9 @@
[elevation]="2"
[disabled]="isBusy">
- <ng-template sxplrSmartChipHeader>
- Parcellation
- </ng-template>
-
<ng-template sxplrSmartChipContent>
<span class="chip-text">
- {{ ATP.parcellation.name }}
+ Parcellation ({{ parcellations.length }})
</span>
<ng-content select="[parcellation-chip-suffix]">
@@ -38,6 +34,7 @@
<ng-container *ngTemplateOutlet="optionTmpl; context: {
$implicit: parc,
+ suffixText: (parc | isGroupedParcellation) && '(' + parc.parcellations.length + ')' ,
overridePrefixIconTmpl: (parc | parcellationGroupSelected : ATP.parcellation)
? halfSelectedTmpl
: null
@@ -53,13 +50,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 }}
+ Template ({{ availableTemplates.length }})
</span>
</ng-template>
<ng-template sxplrSmartChipMenu let-space>
@@ -75,13 +69,9 @@
[elevation]="6"
[disabled]="isBusy">
- <ng-template sxplrSmartChipHeader>
- Atlas
- </ng-template>
-
<ng-template sxplrSmartChipContent>
<span class="chip-text">
- {{ ATP.atlas.name }}
+ Atlas ({{ allAtlases.length}})
</span>
</ng-template>
<ng-template sxplrSmartChipMenu let-atlas>
@@ -101,7 +91,8 @@
#optionTmpl
let-item
let-overridePrefixIconTmpl="overridePrefixIconTmpl"
- let-overrideSuffixIcon="overrideSuffixIcon">
+ let-overrideSuffixIcon="overrideSuffixIcon"
+ let-suffixText="suffixText">
<!-- prefix -->
<ng-template [ngIf]="overridePrefixIconTmpl" [ngIfElse]="defaultPrefix">
@@ -122,6 +113,9 @@
[matTooltip]="item.version?.name || item.name || item.fullName"
[matTooltipPosition]="'above'">
{{ item.version?.name || item.name || item.fullName }}
+ <ng-template [ngIf]="suffixText">
+ {{ suffixText }}
+ </ng-template>
</span>
<!-- suffix -->
diff --git a/src/components/readmore/readmoreCmp/readmore.style.css b/src/components/readmore/readmoreCmp/readmore.style.css
index 166ec29d4..f49a4a951 100644
--- a/src/components/readmore/readmoreCmp/readmore.style.css
+++ b/src/components/readmore/readmoreCmp/readmore.style.css
@@ -13,3 +13,41 @@ div.readmore-content
{
overflow:hidden;
}
+
+.veil
+{
+ position: relative;
+}
+
+.veil::before
+{
+ position: absolute;
+ left: 0;
+ top: 0;
+ content: '';
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 999;
+}
+
+.veil::before
+{
+
+ background: linear-gradient(
+ to bottom,
+ rgba(200,200,200, 0),
+ 70%,
+ rgba(200,200,200, 1)
+ );
+}
+
+:host-context([darktheme=true]) .veil::before
+{
+ background: linear-gradient(
+ to bottom,
+ rgba(50,50,50, 0),
+ 70%,
+ rgba(50,50,50, 1)
+ );
+}
diff --git a/src/components/readmore/readmoreCmp/readmore.template.html b/src/components/readmore/readmoreCmp/readmore.template.html
index 0eea38ac4..2315e05ad 100644
--- a/src/components/readmore/readmoreCmp/readmore.template.html
+++ b/src/components/readmore/readmoreCmp/readmore.template.html
@@ -7,7 +7,8 @@
fullHeight: fullHeight,
animationLength: animationLength
}}"
- class="readmore-content">
+ class="readmore-content"
+ [ngClass]="show ? 'full' : 'veil'">
<div #contentContainer>
<ng-content>
</ng-content>
diff --git a/src/components/smartChip/component/smartChip.style.scss b/src/components/smartChip/component/smartChip.style.scss
index d9fda5b28..5feb29c58 100644
--- a/src/components/smartChip/component/smartChip.style.scss
+++ b/src/components/smartChip/component/smartChip.style.scss
@@ -1,7 +1,6 @@
:host
{
margin: 0.5rem 1rem;
- margin-top: 1.5rem;
min-height: 32px;
height: 1px;
position: relative;
diff --git a/src/features/module.ts b/src/features/module.ts
index ae034a2ea..7341ca0f9 100644
--- a/src/features/module.ts
+++ b/src/features/module.ts
@@ -22,7 +22,6 @@ import { FeatureViewComponent } from "./feature-view/feature-view.component";
import { TransformPdToDsPipe } from "./transform-pd-to-ds.pipe";
import { NgLayerCtlModule } from "src/viewerModule/nehuba/ngLayerCtlModule/module";
import { VoiBboxDirective } from "./voi-bbox.directive";
-import { ShowBBoxToggleDirective } from "./showBbox-toggle.directive";
@NgModule({
imports: [
@@ -50,7 +49,6 @@ import { ShowBBoxToggleDirective } from "./showBbox-toggle.directive";
CategoryAccDirective,
VoiBboxDirective,
- ShowBBoxToggleDirective,
FeatureNamePipe,
TransformPdToDsPipe,
@@ -59,7 +57,6 @@ import { ShowBBoxToggleDirective } from "./showBbox-toggle.directive";
EntryComponent,
FeatureViewComponent,
VoiBboxDirective,
- ShowBBoxToggleDirective,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
diff --git a/src/features/showBbox-toggle.directive.ts b/src/features/showBbox-toggle.directive.ts
deleted file mode 100644
index 511b6ed1a..000000000
--- a/src/features/showBbox-toggle.directive.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Directive, Injectable } from "@angular/core";
-import { ComponentStore } from "@ngrx/component-store";
-import { map } from "rxjs/operators";
-
-interface IVoiState {
- showVoiFlag: boolean
-}
-
-@Injectable()
-class VoiStore extends ComponentStore<IVoiState>{
- constructor(){
- super({ showVoiFlag: false })
- }
-}
-
-@Directive({
- selector: '[showBboxToggle]',
- exportAs: 'showBboxToggle',
- providers: [
- VoiStore
- ]
-})
-export class ShowBBoxToggleDirective {
- public readonly showVoiFlag$ = this.voiStore.state$.pipe(
- map(v => v.showVoiFlag)
- )
-
- constructor(private readonly voiStore: VoiStore){
-
- }
-
- public setState(flag: boolean) {
- this.voiStore.setState({
- showVoiFlag: flag
- })
- }
-}
diff --git a/src/viewerModule/nehuba/config.service/util.ts b/src/viewerModule/nehuba/config.service/util.ts
index 8e21802d3..078bad8ba 100644
--- a/src/viewerModule/nehuba/config.service/util.ts
+++ b/src/viewerModule/nehuba/config.service/util.ts
@@ -157,7 +157,9 @@ const BACKCOMAP_KEY_DICT = {
export function getParcNgId(atlas: SxplrAtlas, tmpl: SxplrTemplate, parc: SxplrParcellation, region: SxplrRegion): string {
-
+ if (!region) {
+ return null
+ }
let laterality: string = "whole brain"
if (region.name.indexOf("left") >= 0) laterality = "left hemisphere"
if (region.name.indexOf("right") >= 0) laterality = "right hemisphere"
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index fb796e465..b19b8224e 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -62,8 +62,6 @@ export class ViewerCmp implements OnDestroy {
public CONST = CONST
public ARIA_LABELS = ARIA_LABELS
-
- public showVoiFlag = true
public quickTourRegionSearch: IQuickTourData = {
order: 7,
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 1cc5c69a3..395ccba4f 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -400,7 +400,7 @@
#sapiViewsCoreRegion="sapiViewsCoreRegion">
<ng-template sxplrSmartChipContent>
<span class="regionname">
- {{ region.name }}
+ Region
</span>
<button class="sxplr-mr-n3"
mat-icon-button
@@ -408,9 +408,6 @@
<i class="fas fa-times"></i>
</button>
</ng-template>
- <ng-template sxplrSmartChipHeader>
- Region
- </ng-template>
</sxplr-smart-chip>
</ng-template>
@@ -958,7 +955,7 @@
<ng-template #spatialFeatureListTmpl>
<mat-card class="sxplr-pe-all"
[ngClass]="{
- 'sxplr-d-none': !showVoiFlag || (voiFeatureEntryCmp.totals$ | async) === 0
+ 'sxplr-d-none': !(voiSwitch.switchState$ | async) || (voiFeatureEntryCmp.totals$ | async) === 0
}">
<mat-card-header>
<mat-card-title>
@@ -978,17 +975,10 @@
</ng-template>
</mat-card-subtitle>
</mat-card-header>
-
- <mat-slide-toggle
- showBboxToggle
- #showBboxToggle="showBboxToggle"
- (change)="showBboxToggle.setState($event.checked)">
- Show image location
- </mat-slide-toggle>
</mat-card>
<sxplr-feature-entry
- [ngClass]="showVoiFlag ? 'sxplr-d-block' : 'sxplr-d-none'"
+ [ngClass]="(voiSwitch.switchState$ | async) ? 'sxplr-d-block' : 'sxplr-d-none'"
class="sxplr-pe-all mat-elevation-z8"
[template]="templateSelected$ | async"
[bbox]="bbox.bbox$ | async | getProperty : 'bbox'"
@@ -1000,16 +990,19 @@
'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) === 0
}"
class="sxplr-pe-all sxplr-w-100"
- (click)="showVoiFlag = !showVoiFlag">
+ iav-switch
+ [iav-switch-state]="false"
+ #voiSwitch="iavSwitch"
+ (click)="voiSwitch.toggle()">
- <ng-template [ngIf]="showVoiFlag">
+ <ng-template [ngIf]="voiSwitch.switchState$ | async" [ngIfElse]="chevronCollapseTmpl">
<i class="fas fa-chevron-up"></i>
<span>
Collapse
</span>
</ng-template>
- <ng-template [ngIf]="!showVoiFlag">
+ <ng-template #chevronCollapseTmpl>
<i class="fas fa-chevron-down"></i>
<span>
Explore {{ voiFeatureEntryCmp.totals$ | async }} spatial features
@@ -1017,7 +1010,7 @@
</ng-template>
</button>
<div
- *ngIf="showBboxToggle.showVoiFlag$ | async"
+ *ngIf="voiSwitch.switchState$| async"
voiBbox
[features]="voiFeatureEntryCmp.features$ | async">
--
GitLab