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 c3444ab26c494219f9c651dd989be037f82e3bbd..fa9e90bdc672512a632030df3af522c903af4b40 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
@@ -124,7 +124,7 @@
<ng-template [ngIf]="regionPosition">
<button mat-list-item (click)="navigateTo(regionPosition)">
<mat-icon mat-list-icon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
- <div mat-line class="overview-content">{{ regionPosition | numbers | addUnitAndJoin : 'mm' }}</div>
+ <div mat-line class="overview-content">Centroid: {{ regionPosition | numbers | addUnitAndJoin : 'mm' }}</div>
</button>
</ng-template>
@@ -138,10 +138,8 @@
<ng-template [ngIf]="(desc$ | async) || region.desc" let-desc>
- <readmore-component [collapsedHeight]="240" class="sxplr-mb-8">
- <markdown-dom class="sxplr-m-2 sxplr-muted" [markdown]="desc">
- </markdown-dom>
- </readmore-component>
+ <markdown-dom class="sxplr-m-2 sxplr-muted" [markdown]="desc">
+ </markdown-dom>
</ng-template>
</mat-tab>
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 a2905e1c8f89462a9c1ea92bd82f6cb1cc97f7f2..064e4612431909b9fbfb014e109ca84f67b6314c 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
@@ -38,10 +38,11 @@ export class WrapperATPSelector implements OnDestroy{
#subscription: Subscription[] = []
- #askUser(title: string, descMd: string, actions: string[], config?: Partial<AskUserConfig>): Observable<string> {
+ #askUser(title: string, titleMd: string, descMd: string, actions: string[], config?: Partial<AskUserConfig>): Observable<string> {
return this.dialog.open(DialogFallbackCmp, {
data: {
title,
+ titleMd,
descMd,
actions: actions,
actionsAsList: config?.actionsAsList
@@ -95,6 +96,7 @@ export class WrapperATPSelector implements OnDestroy{
return this.#askUser(
null,
`Current parcellation **${selectedATP.parcellation.name}** is not mapped in the selected template **${template.name}**. Please select one of the following parcellations:`,
+ null,
parcs.map(p => p.name),
{
actionsAsList: true
@@ -120,6 +122,7 @@ export class WrapperATPSelector implements OnDestroy{
return this.#askUser(
null,
`Selected parcellation **${parcellation.name}** is not mapped in the current template **${selectedATP.template.name}**. Please select one of the following templates:`,
+ null,
tmpls.map(tmpl => tmpl.name),
{
actionsAsList: true
diff --git a/src/ui/dialogInfo/tmpl/tmpl.component.ts b/src/ui/dialogInfo/tmpl/tmpl.component.ts
index 472acbd9d59014e8036caa0a850eb7af63fcefc1..be6842b0e54568c52ecfd591b881f0bc978c16f8 100644
--- a/src/ui/dialogInfo/tmpl/tmpl.component.ts
+++ b/src/ui/dialogInfo/tmpl/tmpl.component.ts
@@ -3,6 +3,7 @@ import { MAT_DIALOG_DATA } from "@angular/material/dialog";
export type FallBackData = {
title: string
+ titleMd?: string
actions?: string[]
desc?: string
descMd?: string
diff --git a/src/ui/dialogInfo/tmpl/tmpl.style.css b/src/ui/dialogInfo/tmpl/tmpl.style.css
index 99437bd9504f174bedd0dc604986d842d68c600b..4784c3a9c8f7224c3342bdd8e76e2cfc8d4cd385 100644
--- a/src/ui/dialogInfo/tmpl/tmpl.style.css
+++ b/src/ui/dialogInfo/tmpl/tmpl.style.css
@@ -6,5 +6,11 @@ mat-dialog-actions a i
mat-dialog-content
{
display: block;
- max-height: 30dvh;
+ max-height: 24dvh;
+}
+
+.sxplr-dialog-body
+{
+ font-size: 16px;
+ padding: 0 16px;
}
diff --git a/src/ui/dialogInfo/tmpl/tmpl.template.html b/src/ui/dialogInfo/tmpl/tmpl.template.html
index fc99a7dd3c5fe272f770ca3cebe871025b403f58..e8f9cf07a5ca56b40788006118994f106f92691c 100644
--- a/src/ui/dialogInfo/tmpl/tmpl.template.html
+++ b/src/ui/dialogInfo/tmpl/tmpl.template.html
@@ -1,15 +1,25 @@
-<h1 *ngIf="data.title" mat-dialog-title>
+<h1 *ngIf="data.title" mat-dialog-title class="sxplr-dialog-body">
{{ data.title }}
</h1>
+<ng-template [ngIf]="data.titleMd" let-titleMd>
+ <h1 mat-dialog-title>
+ <markdown-dom class="sxplr-dialog-body" [markdown]="titleMd">
+ </markdown-dom>
+ </h1>
+</ng-template>
+
<mat-dialog-content>
<div *ngIf="data.descMd || data.desc" mat-dialog-content class="mat-body">
- <ng-template [ngIf]="data.desc">
- {{ data.desc }}
- </ng-template>
+
+ <div class="sxplr-dialog-body">
+ <ng-template [ngIf]="data.desc">
+ {{ data.desc }}
+ </ng-template>
+ </div>
- <markdown-dom *ngIf="data.descMd" [markdown]="data.descMd">
+ <markdown-dom class="sxplr-dialog-body" *ngIf="data.descMd" [markdown]="data.descMd">
</markdown-dom>
</div>
diff --git a/src/viewerModule/threeSurfer/module.ts b/src/viewerModule/threeSurfer/module.ts
index dd12519158ad53646ab038c74c8a82672bcec1b9..7647de0ce175b46f1d5801b7c955b5f8a16e1870 100644
--- a/src/viewerModule/threeSurfer/module.ts
+++ b/src/viewerModule/threeSurfer/module.ts
@@ -10,6 +10,8 @@ import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.compone
import { nameSpace, reducer, ThreeSurferEffects } from "./store"
import { EffectsModule } from "@ngrx/effects";
import { TmpThreeSurferLifeCycle } from "./lifecycle/lifecycle.component";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { ExperimentalModule } from "src/experimental/experimental.module";
@NgModule({
imports: [
@@ -18,6 +20,8 @@ import { TmpThreeSurferLifeCycle } from "./lifecycle/lifecycle.component";
UtilModule,
FormsModule,
ComponentsModule,
+ MatSlideToggleModule,
+ ExperimentalModule,
StoreModule.forFeature(
nameSpace,
reducer
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
index 522d54c51836e83527b2742b529f3f39a946fa26..33eae8f5833c50ce89e70b106d864610da5eac52 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
@@ -1,6 +1,6 @@
import { Component, Output, EventEmitter, ElementRef, OnDestroy, AfterViewInit, Inject, Optional, ChangeDetectionStrategy } from "@angular/core";
import { EnumViewerEvt, IViewer, TViewerEvent } from "src/viewerModule/viewer.interface";
-import { combineLatest, concat, forkJoin, from, merge, NEVER, Observable, of, Subject } from "rxjs";
+import { BehaviorSubject, combineLatest, concat, forkJoin, from, merge, NEVER, Observable, of, Subject } from "rxjs";
import { catchError, debounceTime, distinctUntilChanged, filter, map, scan, shareReplay, startWith, switchMap, tap, withLatestFrom } from "rxjs/operators";
import { ComponentStore, LockError } from "src/viewerModule/componentStore";
import { select, Store } from "@ngrx/store";
@@ -100,6 +100,9 @@ type TThreeSurfer = {
control: any
camera: any
customColormap: WeakMap<TThreeGeometry, any>
+ gridHelper: {
+ visible: boolean
+ }
}
type LateralityRecord<T> = Record<string, T>
@@ -928,6 +931,12 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
)
}
+ gridVisible$ = new BehaviorSubject<boolean>(true)
+ setGridVisibility(newFlag: boolean){
+ this.tsRef.gridHelper.visible = newFlag
+ this.gridVisible$.next(newFlag)
+ }
+
private onDestroyCb: (() => void) [] = []
ngOnDestroy(): void {
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
index 778626e2c267217735a3664b82e5644e6a14e1fc..7d319699166f995afbc215f2663188182aaff083 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
@@ -5,6 +5,28 @@
<div class="button-container">
+ <ng-template sxplrExperimentalFlag [ngIf]="exmptToggleGrid.show$ | async"
+ #exmptToggleGrid="sxplrExperimentalFlag"
+ [experimental]="true">
+ <!-- toggle grid line -->
+ <ng-template [ngTemplateOutlet]="toggleGridVisTmpl" [ngTemplateOutletContext]="{
+ $implicit: gridVisible$ | async
+ }">
+ </ng-template>
+ <ng-template let-visibleFlag #toggleGridVisTmpl>
+ <button mat-icon-button color="primary" class="pe-all"
+ (click)="setGridVisibility(!visibleFlag)"
+ matTooltip="Toggle grid visibility">
+
+ <i class="fas fa-border-all" *ngIf="visibleFlag else fallbackTmpl"></i>
+ <ng-template #fallbackTmpl>
+ <i class="fas fa-border-none"></i>
+ </ng-template>
+ </button>
+ </ng-template>
+
+ </ng-template>
+
<!-- selector & configurator -->
<button mat-icon-button
color="primary"