diff --git a/docs/releases/v2.14.0.md b/docs/releases/v2.14.0.md
index d0997980b9a98b72034cf4f1f2c6485a1bd0d220..fd75241e279355715372abcb3858f84288d6d804 100644
--- a/docs/releases/v2.14.0.md
+++ b/docs/releases/v2.14.0.md
@@ -4,11 +4,17 @@
- added `[p]` and `[n]` as keyboard shortcut to navigate previous/next slice
- show template and parcellation info even if the chip are hidden
+- added button to directly copy navigation coordinate
- experimental support for other versions of regions
- experimental support for drag/drop pointcloud `.json` files
- experimental support for `deepzoom://` source format
+## Bugfix
+
+- fixed keyframe mode not activating on second attempt
+
## Behind the scenes
-- Minor refactoring
-- Update to Angular 15
+- minor refactoring
+- update to Angular 15
+- migrated to Angular material 15
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
index d2ba51f51e67d9d123835f04816a5b2ec8c560a9..0b5f6a52f16259c468a8afb953b7df4f7d8ab003 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
@@ -6,7 +6,7 @@ import { ARIA_LABELS, CONST } from 'common/constants'
import { Feature, SxplrParcellation, SxplrRegion } from "src/atlasComponents/sapi/sxplrTypes";
import { SAPI } from "src/atlasComponents/sapi/sapi.service";
import { environment } from "src/environments/environment";
-import { catchError, map, shareReplay, switchMap } from "rxjs/operators";
+import { catchError, map, scan, shareReplay, switchMap } from "rxjs/operators";
import { PathReturn } from "src/atlasComponents/sapi/typeV3";
import { DecisionCollapse } from "src/atlasComponents/sapi/decisionCollapse.service";
@@ -45,6 +45,15 @@ export class SapiViewsCoreRegionRegionRich extends SapiViewsCoreRegionRegionBase
}
activePanelTitles$: Observable<string[]> = new Subject()
+
+ #fetching$ = new Subject<Record<string, boolean>>()
+ busy$ = this.#fetching$.pipe(
+ scan((acc, curr) => ({ ...acc, ...curr })),
+ map(fetchingItems => {
+ const busyFlags = Object.values(fetchingItems)
+ return busyFlags.some(flag => flag)
+ })
+ )
private regionalMaps$ = this.ATPR$.pipe(
switchMap(({ parcellation, template, region }) =>
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
index 8405a0f949e72f3f0c69d806fc93d7df52756519..8e3dd7d35e225d23691c95e6e39eb3bb3e840387 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
@@ -1,8 +1,3 @@
-mat-card-header
-{
- padding: 16px;
-}
-
.feature-list-container
{
max-height: 16rem;
@@ -41,3 +36,9 @@ readmore-component
width: 16rem;
margin: 1rem 0.5rem;
}
+
+table[mat-table] *
+{
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
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 774d96389fcc72e1d6d18501994bfff2becb29f6..ea3c2390666cbf7c373a97896d72ddc0a1b118c9 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
@@ -4,13 +4,13 @@
<ng-template [ngIf]="region">
- <mat-card class="mat-elevation-z4">
- <mat-card-header
- [style.backgroundColor]="regionRgbString"
- [ngClass]="{
- 'darktheme': regionDarkmode === true,
- 'lighttheme': regionDarkmode === false
- }">
+ <mat-card class="mat-elevation-z4"
+ [style.backgroundColor]="regionRgbString"
+ [ngClass]="{
+ 'darktheme': regionDarkmode === true,
+ 'lighttheme': regionDarkmode === false
+ }">
+ <mat-card-header>
<mat-card-subtitle>
<ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
@@ -27,6 +27,7 @@
</mat-card-title>
</mat-card-header>
+ <mat-card-content></mat-card-content>
</mat-card>
@@ -48,14 +49,14 @@
actions: parcellation | parcTmplDoiPipe
}">
<mat-icon matListItemIcon fontSet="fas" fontIcon="fa-brain"></mat-icon>
- <div mat-line class="overview-content">{{ parcellation.name }}</div>
+ <div matListItemTitle>{{ parcellation.name }}</div>
</button>
<!-- region position (if eixsts) -->
<ng-template [ngIf]="regionPosition">
<button mat-list-item (click)="navigateTo(regionPosition)">
<mat-icon matListItemIcon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
- <div mat-line class="overview-content">Centroid: {{ regionPosition | numbers | addUnitAndJoin : 'mm' }}</div>
+ <div matListItemTitle>Centroid: {{ regionPosition | numbers | addUnitAndJoin : 'mm' }}</div>
</button>
</ng-template>
@@ -63,13 +64,11 @@
<ng-template ngFor [ngForOf]="dois$ | async" let-doi>
<a mat-list-item [href]="doi" target="_blank" class="no-hover">
<mat-icon matListItemIcon fontSet="ai" fontIcon="ai-doi"></mat-icon>
- <div mat-line>{{ doi }}</div>
+ <div matListItemTitle>{{ doi }}</div>
</a>
</ng-template>
- <ng-template sxplrExperimentalFlag [experimental]="true"
- #relatedRegionsExport="sxplrExperimentalFlag"
- [ngIf]="relatedRegionsExport.show$ | async">
+ <ng-template sxplrExperimentalFlag [experimental]="true">
<!-- related regions -->
<ng-template [ngIf]="relatedRegions$ | async | dedupRelatedRegionPipe" let-relatedRegions>
@@ -79,7 +78,7 @@
[sxplr-dialog]="relatedRegionsTmpl"
sxplr-dialog-size="auto">
<mat-icon matListItemIcon fontSet="fas" fontIcon="fa-link"></mat-icon>
- <div mat-line class="overview-content">Related Regions ({{ relatedRegions.length }})</div>
+ <div matListItemTitle>Related Regions ({{ relatedRegions.length }})</div>
</button>
<!-- dialog when user clicks related regions -->
@@ -144,6 +143,13 @@
</ng-template>
+ <!-- if busy, show spinner -->
+ <ng-template [ngIf]="busy$ | async">
+ <mat-list-item>
+ <mat-spinner [diameter]="24"></mat-spinner>
+ </mat-list-item>
+ </ng-template>
+
</ng-template>
</mat-action-list>
@@ -178,9 +184,7 @@
</sxplr-feature-entry>
- <ng-template sxplrExperimentalFlag [experimental]="true"
- #exmptRelatedFeat="sxplrExperimentalFlag"
- [ngIf]="exmptRelatedFeat.show$ | async">
+ <ng-template sxplrExperimentalFlag [experimental]="true">
<!-- related region features -->
<ng-template [ngIf]="relatedRegions$ | async | dedupRelatedRegionPipe" let-relatedRegions>
@@ -194,15 +198,19 @@
<div class="h-carousel-item-container">
<mat-card *ngFor="let relatedRegion of relatedRegions"
class="h-carousel-item mat-elevation-z4">
- <mat-card-subtitle>
- {{ relatedRegion.qualification | translateQualificationPipe }}
- </mat-card-subtitle>
- <mat-card-title>
- {{ relatedRegion.region.name }}
- </mat-card-title>
- <mat-card-subtitle>
- {{ relatedRegion.parcellation.name}}
- </mat-card-subtitle>
+
+ <mat-card-header>
+ <mat-card-subtitle>
+ {{ relatedRegion.qualification | translateQualificationPipe }}
+ </mat-card-subtitle>
+ <mat-card-title>
+ {{ relatedRegion.region.name }}
+ </mat-card-title>
+ <mat-card-subtitle>
+ {{ relatedRegion.parcellation.name}}
+ </mat-card-subtitle>
+ </mat-card-header>
+
<mat-card-actions>
<button mat-button
[sxplr-dialog]="relatedRegFeatTmpl"
diff --git a/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html b/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
index 9e5f46b03519f1c4a49f753078de079cc4fef821..fd9edae6072eb4e5ae89cfeb590cf19e3865a111 100644
--- a/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
@@ -2,6 +2,9 @@
class="sxplr-w-100"
subscriptSizing="dynamic"
floatLabel="auto">
+ <div matPrefix>
+ <ng-content select="[search-input-prefix]"></ng-content>
+ </div>
<input
placeholder="Search for regions"
[value]="currentSearch"
diff --git a/src/atlasComponents/userAnnotations/annotationList/annotationList.template.html b/src/atlasComponents/userAnnotations/annotationList/annotationList.template.html
index d90110fa3f66f2a6483787462e5432bc4704986f..0a2e8a5bd83ebf8631aee73f3e3c52990a4da190 100644
--- a/src/atlasComponents/userAnnotations/annotationList/annotationList.template.html
+++ b/src/atlasComponents/userAnnotations/annotationList/annotationList.template.html
@@ -2,56 +2,59 @@
<div class="sidenav-cover-header-container bg-50-grey-20">
<!-- title -->
- <mat-card-title>
- My Annotations
- </mat-card-title>
-
- <!-- actions -->
- <mat-card-subtitle>
- <!-- import -->
- <ng-template #importMessageTmpl>
- Please select a annotation file to import.
- </ng-template>
-
- <button mat-icon-button
- (file-input-directive)="handleImportEvent($event)"
- [file-input-directive-title]="ARIA_LABELS.USER_ANNOTATION_IMPORT"
- [file-input-directive-text]="true"
- [file-input-directive-file]="true"
- [file-input-directive-message]="importMessageTmpl"
- [attr.aria-label]="ARIA_LABELS.USER_ANNOTATION_IMPORT"
- [matTooltip]="ARIA_LABELS.USER_ANNOTATION_IMPORT">
- <i class="fas fa-folder-open"></i>
- </button>
-
- <!-- export -->
- <button mat-icon-button
- [zip-files-output]="filesExport$"
- zip-files-output-zip-filename="exported_annotations.zip"
- [attr.aria-label]="ARIA_LABELS.USER_ANNOTATION_EXPORT"
- [matTooltip]="ARIA_LABELS.USER_ANNOTATION_EXPORT"
- [disabled]="!(manAnnExists$ | async)">
- <i class="fas fa-download"></i>
- </button>
-
- <!-- share -->
- <button mat-icon-button
- [matTooltip]="ARIA_LABELS.SHARE_CUSTOM_URL"
- (click)="openDialog(saneUrlTmpl)"
- iav-state-aggregator
- #stateAggregator="iavStateAggregator">
- <i class="fas fa-share-square"></i>
- </button>
-
- <!-- delete all annotations -->
- <button mat-icon-button
- color="warn"
- (click)="deleteAllAnnotation()"
- [matTooltip]="ARIA_LABELS.BULK_DELETE_ANNOTATIONS"
- [disabled]="!(manAnnExists$ | async)">
- <i class="fas fa-trash"></i>
- </button>
- </mat-card-subtitle>
+ <mat-card-header>
+
+ <mat-card-title>
+ My Annotations
+ </mat-card-title>
+
+ <!-- actions -->
+ <mat-card-subtitle>
+ <!-- import -->
+ <ng-template #importMessageTmpl>
+ Please select a annotation file to import.
+ </ng-template>
+
+ <button mat-icon-button
+ (file-input-directive)="handleImportEvent($event)"
+ [file-input-directive-title]="ARIA_LABELS.USER_ANNOTATION_IMPORT"
+ [file-input-directive-text]="true"
+ [file-input-directive-file]="true"
+ [file-input-directive-message]="importMessageTmpl"
+ [attr.aria-label]="ARIA_LABELS.USER_ANNOTATION_IMPORT"
+ [matTooltip]="ARIA_LABELS.USER_ANNOTATION_IMPORT">
+ <i class="fas fa-folder-open"></i>
+ </button>
+
+ <!-- export -->
+ <button mat-icon-button
+ [zip-files-output]="filesExport$"
+ zip-files-output-zip-filename="exported_annotations.zip"
+ [attr.aria-label]="ARIA_LABELS.USER_ANNOTATION_EXPORT"
+ [matTooltip]="ARIA_LABELS.USER_ANNOTATION_EXPORT"
+ [disabled]="!(manAnnExists$ | async)">
+ <i class="fas fa-download"></i>
+ </button>
+
+ <!-- share -->
+ <button mat-icon-button
+ [matTooltip]="ARIA_LABELS.SHARE_CUSTOM_URL"
+ (click)="openDialog(saneUrlTmpl)"
+ iav-state-aggregator
+ #stateAggregator="iavStateAggregator">
+ <i class="fas fa-share-square"></i>
+ </button>
+
+ <!-- delete all annotations -->
+ <button mat-icon-button
+ color="warn"
+ (click)="deleteAllAnnotation()"
+ [matTooltip]="ARIA_LABELS.BULK_DELETE_ANNOTATIONS"
+ [disabled]="!(manAnnExists$ | async)">
+ <i class="fas fa-trash"></i>
+ </button>
+ </mat-card-subtitle>
+ </mat-card-header>
</div>
<!-- content -->
diff --git a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.component.ts b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.component.ts
index af64520817da2fa0476e6556be23b31a6ce8be74..322d59bd25739beaf102a3870ffe014366758222 100644
--- a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.component.ts
+++ b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.component.ts
@@ -28,6 +28,12 @@ export class AnnotationMode implements OnDestroy{
@Optional() @Inject(CLICK_INTERCEPTOR_INJECTOR) clickInterceptor: ClickInterceptor,
@Optional() @Inject(CONTEXT_MENU_ITEM_INJECTOR) ctxMenuInterceptor: TContextMenu<TContextMenuReg<TContextArg<'nehuba' | 'threeSurfer'>>>
) {
+
+ /**
+ * reverse the order, since we are column reverse to achieve the tab effect
+ */
+ this.moduleAnnotationTypes.reverse()
+
const stopClickProp = () => false
if (clickInterceptor) {
const { register, deregister } = clickInterceptor
diff --git a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.style.css b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.style.css
index c525622e4f3c7081ec4f3a6a65de4fed4c367c45..fb6d946459d19f4ed511d1821fe8eac0249b3b50 100644
--- a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.style.css
+++ b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.style.css
@@ -1,13 +1,23 @@
-.tab-toggle-container
+.tool-btn-container
{
- margin-left: -3rem;
- padding-top: 0;
- padding-bottom: 0;
+ display: flex;
+ flex-direction: column-reverse;
}
-.tab-toggle
+button
{
- margin: 0.25rem -1rem 0.25rem 0rem;
- padding-right: 0;
- padding-left: 1.5rem;
-}
\ No newline at end of file
+ pointer-events: all;
+
+ margin-left: -1rem;
+ margin-right: 1rem;
+ margin-top: -0.2rem;
+
+ padding-right: 0.75rem;
+ text-align: right;
+}
+
+.leave-me-alone
+{
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.template.html b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.template.html
index 7542cdba29fd4102f5e03c801468cbc69fb77b05..12e058c821e644fef4830322ae7d6048944eb6f0 100644
--- a/src/atlasComponents/userAnnotations/annotationMode/annotationMode.template.html
+++ b/src/atlasComponents/userAnnotations/annotationMode/annotationMode.template.html
@@ -1,26 +1,25 @@
-<mat-card class="d-inline-flex flex-column pe-all tab-toggle-container"
+<div class="tool-btn-container"
[iav-key-listener]="[{ type: 'keydown', key: 'Escape', target: 'document', capture: true }]"
(iav-key-event)="deselectTools()">
<button
- *ngFor="let moduleAnnotType of moduleAnnotationTypes"
- mat-button
- class="tab-toggle"
- (click)="moduleAnnotType.onClick()"
- [color]="(moduleAnnotType.instance.toolSelected$ | async) ? 'primary' : 'basic'"
- type="button">
- <i [class]="moduleAnnotType.instance.iconClass"></i>
- </button>
-
- <mat-divider class="d-block"></mat-divider>
-
- <button
- mat-button
+ mat-raised-button
+ class="leave-me-alone annotation-tool-btn"
annotation-switch
annotation-switch-mode="off"
- class="tab-toggle"
[matTooltip]="ARIA_LABELS.EXIT_ANNOTATION_MODE"
color="warn">
<i class="fas fa-times"></i>
</button>
-</mat-card>
\ No newline at end of file
+
+ <button
+ *ngFor="let moduleAnnotType of moduleAnnotationTypes"
+ mat-raised-button
+ class="annotation-tool-btn"
+ (click)="moduleAnnotType.onClick()"
+ [color]="(moduleAnnotType.instance.toolSelected$ | async) ? 'primary' : null"
+ type="button">
+ <i [class]="moduleAnnotType.instance.iconClass"></i>
+ </button>
+
+</div>
diff --git a/src/atlasComponents/userAnnotations/tools/textareaCopyExport/textareaCopyExport.template.html b/src/atlasComponents/userAnnotations/tools/textareaCopyExport/textareaCopyExport.template.html
index a82f199522da1981e81a01e28358937febec850e..65fe0d11264cf82005dcf795ab3fc19239fa83fb 100644
--- a/src/atlasComponents/userAnnotations/tools/textareaCopyExport/textareaCopyExport.template.html
+++ b/src/atlasComponents/userAnnotations/tools/textareaCopyExport/textareaCopyExport.template.html
@@ -14,8 +14,7 @@
iav-stop="click"
aria-label="Copy to clipboard"
matTooltip="Copy to clipboard."
- (click)="copyToClipboard(exportTarget.value)"
- color="basic">
+ (click)="copyToClipboard(exportTarget.value)">
<i class="fas fa-copy"></i>
</button>
<button mat-icon-button
diff --git a/src/contextMenuModule/service.ts b/src/contextMenuModule/service.ts
index 7cba30e61e0b576feef3c63a7493c78652c23ad1..d28cdd5245c376bd2713b1a0829a7f3d0c0bf2df 100644
--- a/src/contextMenuModule/service.ts
+++ b/src/contextMenuModule/service.ts
@@ -117,7 +117,7 @@ export class ContextMenuService<T> extends RegDeregController<CtxMenuInterArg<T>
this.context$.next(state)
}
deepMerge(pState: Partial<T>) {
- const newState: T = structuredClone(this.context || {})
+ const newState: T = structuredClone(this.context || {} as T)
this.context$.next(
mutateDeepMerge(newState, pState)
)
diff --git a/src/experimental/experimental-flag.directive.ts b/src/experimental/experimental-flag.directive.ts
index 9574005d8bc0b1a58a845871bdd980b74ec64b44..789d8359a67c7dc9674b35b8eb089d9c05dc8849 100644
--- a/src/experimental/experimental-flag.directive.ts
+++ b/src/experimental/experimental-flag.directive.ts
@@ -1,15 +1,21 @@
-import { Directive, Input } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { ChangeDetectorRef, Directive, Input, inject } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { BehaviorSubject, combineLatest } from 'rxjs';
-import { debounceTime, filter, map } from 'rxjs/operators';
+import { debounceTime, filter, map, takeUntil } from 'rxjs/operators';
import { MainState, userPreference } from 'src/state';
+import { DestroyDirective } from 'src/util/directives/destroy.directive';
@Directive({
selector: '[sxplrExperimentalFlag]',
- exportAs: 'sxplrExperimentalFlag'
+ exportAs: 'sxplrExperimentalFlag',
+ hostDirectives: [NgIf, DestroyDirective]
})
export class ExperimentalFlagDirective {
+ private readonly ngIf = inject(NgIf)
+ private readonly destroyed$ = inject(DestroyDirective).destroyed$
+
@Input()
set deprecated(deprecated: boolean){
this.#inputs.next({
@@ -57,7 +63,15 @@ export class ExperimentalFlagDirective {
)
constructor(
- private store: Store<MainState>
- ) { }
+ private store: Store<MainState>,
+ private cdr: ChangeDetectorRef,
+ ) {
+ this.show$.pipe(
+ takeUntil(this.destroyed$)
+ ).subscribe(flag => {
+ this.ngIf.ngIf = flag
+ this.cdr.detectChanges()
+ })
+ }
}
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 427f8e8e96c096ddd2ab33c7c76826dcf177676b..795f053415d65c0e6ff85df9bf6030c14adcad3f 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -882,7 +882,7 @@ how-to-cite img
margin-top: 1rem;
}
-.overview-content
+.annotation-tool-btn .mdc-button__label
{
- white-space: normal!important;
+ transform: translateX(0.7rem);
}
diff --git a/src/features/feature-view/feature-view.component.html b/src/features/feature-view/feature-view.component.html
index 26a02e48c3a15673db3878ebba79fc0748d795c0..908265a5fb8c501257ae61bfb4bceac37e2fdabb 100644
--- a/src/features/feature-view/feature-view.component.html
+++ b/src/features/feature-view/feature-view.component.html
@@ -15,27 +15,31 @@
<mat-card *ngIf="feature"
class="mat-elevation-z4 sxplr-z-4 header-card">
- <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
-
- <mat-card-subtitle>
- <ng-template [ngIf]="feature.category">
- <span class="sxplr-m-a sxplr-pr-1">
- <ng-template [ngIf]="feature.category !== 'Unknown category'" [ngIfElse]="fallbackTmpl">
- {{ feature.category }} feature
- </ng-template>
- <ng-template #fallbackTmpl>
- Other feature
- </ng-template>
- </span>
- </ng-template>
- </mat-card-subtitle>
-
- <mat-card-title>
- <div class="feature-title">
- {{ feature.name }}
- </div>
- </mat-card-title>
-
+ <mat-card-header>
+ <mat-card-subtitle>
+ <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
+ </mat-card-subtitle>
+
+ <mat-card-subtitle>
+ <ng-template [ngIf]="feature.category">
+ <span class="sxplr-m-a sxplr-pr-1">
+ <ng-template [ngIf]="feature.category !== 'Unknown category'" [ngIfElse]="fallbackTmpl">
+ {{ feature.category }} feature
+ </ng-template>
+ <ng-template #fallbackTmpl>
+ Other feature
+ </ng-template>
+ </span>
+ </ng-template>
+ </mat-card-subtitle>
+
+ <mat-card-title>
+ <div class="feature-title">
+ {{ feature.name }}
+ </div>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content></mat-card-content>
</mat-card>
<mat-tab-group>
@@ -46,8 +50,8 @@
<ng-template [ngIf]="warnings$ | async" let-warnings>
<ng-template ngFor [ngForOf]="warnings" let-warning>
<button mat-list-item>
- <mat-icon mat-list-icon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
- <div mat-line class="overview-content">{{ warning }}</div>
+ <mat-icon matListItemIcon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
+ <div matListItemTitle>{{ warning }}</div>
</button>
</ng-template>
</ng-template>
@@ -55,23 +59,23 @@
<!-- doi -->
<ng-template ngFor [ngForOf]="feature.link" let-url>
<a [href]="url.href" mat-list-item target="_blank" class="no-hover">
- <mat-icon mat-list-icon fontSet="ai" fontIcon="ai-doi"></mat-icon>
- <div mat-line>{{ url.text || url.href }}</div>
+ <mat-icon matListItemIcon fontSet="ai" fontIcon="ai-doi"></mat-icon>
+ <div matListItemTitle>{{ url.text || url.href }}</div>
</a>
</ng-template>
<!-- additional links -->
<ng-template ngFor [ngForOf]="additionalLinks$ | async" let-url>
<a [href]="url" mat-list-item target="_blank" class="no-hover">
- <mat-icon mat-list-icon fontSet="ai" fontIcon="ai-doi"></mat-icon>
- <div mat-line>{{ url }}</div>
+ <mat-icon matListItemIcon fontSet="ai" fontIcon="ai-doi"></mat-icon>
+ <div matListItemTitle>{{ url }}</div>
</a>
</ng-template>
<ng-template [ngIf]="downloadLink$ | async" let-downloadLink>
<a [href]="downloadLink" mat-list-item target="_blank" class="no-hover">
- <mat-icon mat-list-icon fontSet="fas" fontIcon="fa-download"></mat-icon>
- <div mat-line>Download</div>
+ <mat-icon matListItemIcon fontSet="fas" fontIcon="fa-download"></mat-icon>
+ <div matListItemTitle>Download</div>
</a>
</ng-template>
diff --git a/src/features/feature-view/feature-view.component.scss b/src/features/feature-view/feature-view.component.scss
index 02064737f27bc462d44c78afed57c88a044a8e34..8fb4cc58653121eaccf3d8a8a7aeda84f8633ec2 100644
--- a/src/features/feature-view/feature-view.component.scss
+++ b/src/features/feature-view/feature-view.component.scss
@@ -1,6 +1,6 @@
.feature-title
{
- max-height: 8rem;
+ max-height: 12rem;
overflow-x: hidden;
overflow-y: auto;
}
diff --git a/src/keyframesModule/keyframe.directive.ts b/src/keyframesModule/keyframe.directive.ts
index 50708e85062ba075edf28ca9a41506d492694419..cde65ec7dbd91302906a28c875e4cb5ee6a99cb3 100644
--- a/src/keyframesModule/keyframe.directive.ts
+++ b/src/keyframesModule/keyframe.directive.ts
@@ -1,42 +1,61 @@
-import { Directive, HostListener, Input } from "@angular/core";
-import { KeyFrameService } from "./service";
+import { Directive, HostListener, Input, inject } from "@angular/core";
+import { Store, select } from "@ngrx/store";
+import { DestroyDirective } from "src/util/directives/destroy.directive";
+import { atlasSelection } from "src/state";
+import { takeUntil } from "rxjs/operators";
+import { ViewerMode } from "src/state/atlasSelection/const";
@Directive({
- selector: '[key-frame-play-now]'
+ selector: '[key-frame-play-now]',
+ hostDirectives: [DestroyDirective]
})
export class KeyFrameDirective{
+
+ #viewerMode: ViewerMode
+ #onDestroy$ = inject(DestroyDirective).destroyed$
+
@HostListener('click')
onClick(){
- if (this._mode === 'on') {
- this.svc.startKeyFrameSession()
+ if (this.mode === 'on') {
+ if (this.#viewerMode !== "key frame") {
+ this.store.dispatch(
+ atlasSelection.actions.setViewerMode({
+ viewerMode: "key frame"
+ })
+ )
+ }
return
}
- if (this._mode === 'off') {
- this.svc.endKeyFrameSession()
+ if (this.mode === 'off') {
+ if (this.#viewerMode === "key frame") {
+ this.store.dispatch(
+ atlasSelection.actions.setViewerMode({
+ viewerMode: null
+ })
+ )
+ }
return
}
- if (this.svc.inSession) {
- this.svc.endKeyFrameSession()
- } else {
- this.svc.startKeyFrameSession()
- }
+
+ this.store.dispatch(
+ atlasSelection.actions.setViewerMode({
+ viewerMode: this.#viewerMode === "key frame"
+ ? null
+ : "key frame"
+ })
+ )
}
- private _mode: 'toggle' | 'off' | 'on' = 'on'
@Input('key-frame-play-now')
- set mode(val: string){
- if (val === 'off') {
- this._mode = val
- return
- }
- if (val === 'toggle') {
- this._mode = val
- return
- }
- this._mode = 'on'
- }
+ mode: 'toggle' | 'off' | 'on' | '' = 'on'
- constructor(private svc: KeyFrameService){
+ constructor(private store: Store){
+ this.store.pipe(
+ select(atlasSelection.selectors.viewerMode),
+ takeUntil(this.#onDestroy$),
+ ).subscribe(viewerMode => {
+ this.#viewerMode = viewerMode
+ })
}
}
diff --git a/src/keyframesModule/keyframeCtrl/keyframeCtrl.component.ts b/src/keyframesModule/keyframeCtrl/keyframeCtrl.component.ts
index 986db4e1989b57c6322293df46dfe9b63e58c457..24536f82c6e8546d5944b71aa84bf522023ea956 100644
--- a/src/keyframesModule/keyframeCtrl/keyframeCtrl.component.ts
+++ b/src/keyframesModule/keyframeCtrl/keyframeCtrl.component.ts
@@ -1,10 +1,12 @@
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
-import { Component, OnDestroy, Optional } from "@angular/core";
-import { Subscription } from "rxjs";
+import { Component, Optional, inject } from "@angular/core";
import { getUuid } from "src/util/fn";
import { timedValues } from "src/util/generator";
import { AUTO_ROTATE, TAutoRotatePayload, ViewerInternalStateSvc } from "src/viewerModule/viewerInternalState.service";
import { MatSnackBar } from 'src/sharedModules/angularMaterial.exports'
+import { FormControl, FormGroup } from "@angular/forms";
+import { DestroyDirective } from "src/util/directives/destroy.directive";
+import { debounceTime, filter, takeUntil } from "rxjs/operators";
type TStoredState = {
name: string
@@ -18,22 +20,37 @@ type TStoredState = {
templateUrl: './keyframeCtrl.template.html',
styleUrls: [
'./keyframeCtrl.style.css'
- ]
+ ],
+ hostDirectives: [DestroyDirective]
})
-export class KeyFrameCtrlCmp implements OnDestroy {
+export class KeyFrameCtrlCmp {
+
+ #onDestroy$ = inject(DestroyDirective).destroyed$
public loopFlag = false
public linearFlag = false
public currState: any
- private currViewerType: string
+ public currViewerType: string
public internalStates: TStoredState[] = []
- private subs: Subscription[] = []
+ autoRotateFormGrp = new FormGroup({
+ autorotate: new FormControl<boolean>(false),
+ autoRotateSpeed: new FormControl<number>({
+ value: 2,
+ disabled: true,
+ }),
+ autorotateReverse: new FormControl<boolean>({
+ value: false,
+ disabled: true,
+ })
+ })
- ngOnDestroy(){
- while(this.subs.length) this.subs.pop().unsubscribe()
- }
+ frameFormGrp = new FormGroup({
+ loop: new FormControl<boolean>(false),
+ linearCamera: new FormGroup<boolean>(false),
+ steps: new FormGroup({})
+ })
constructor(
private snackbar: MatSnackBar,
@@ -44,13 +61,39 @@ export class KeyFrameCtrlCmp implements OnDestroy {
return
}
- this.subs.push(
- viewerInternalSvc.viewerInternalState$.pipe(
- ).subscribe(state => {
- this.currState = state.payload
- this.currViewerType = state.viewerType
- })
- )
+ viewerInternalSvc.viewerInternalState$.pipe(
+ takeUntil(this.#onDestroy$),
+ filter(v => !!v),
+ ).subscribe(state => {
+ this.currState = state.payload
+ this.currViewerType = state.viewerType
+ })
+
+ this.autoRotateFormGrp.controls.autorotate.valueChanges.pipe(
+ takeUntil(this.#onDestroy$)
+ ).subscribe(value => {
+ const { autoRotateSpeed, autorotateReverse } = this.autoRotateFormGrp.controls
+ if (value) {
+ autoRotateSpeed.enable()
+ autorotateReverse.enable()
+ } else {
+ autoRotateSpeed.disable()
+ autorotateReverse.disable()
+ }
+ })
+
+ this.autoRotateFormGrp.valueChanges.pipe(
+ debounceTime(160),
+ takeUntil(this.#onDestroy$),
+ ).subscribe({
+ next: values => {
+ const { autoRotateSpeed, autorotate, autorotateReverse } = values
+ this.#setAutoRotate(autorotate, autoRotateSpeed, autorotateReverse)
+ },
+ complete: () => {
+ this.#setAutoRotate(false, 0, false)
+ }
+ })
}
addKeyFrame(){
@@ -65,41 +108,15 @@ export class KeyFrameCtrlCmp implements OnDestroy {
]
}
- private _autoRotateSpeed = 2
- get autoRotateSpeed(){
- return this._autoRotateSpeed
- }
- set autoRotateSpeed(val: number){
- this._autoRotateSpeed = val
- this.updateAutoRotate()
- }
-
- private _autoRotateReverse = false
- get autoRotateReverse(){
- return this._autoRotateReverse
- }
- set autoRotateReverse(val: boolean){
- this._autoRotateReverse = val
- this.updateAutoRotate()
- }
-
- private _autoRotateFlag = false
- get autoRotateFlag(){
- return this._autoRotateFlag
- }
- set autoRotateFlag(val: boolean){
- this._autoRotateFlag = val
- this.updateAutoRotate()
- }
-
- private updateAutoRotate(){
+ #setAutoRotate(play: boolean, speed: number, reverse: boolean) {
+
this.viewerInternalSvc.applyInternalState<TAutoRotatePayload>({
"@id": getUuid(),
"@type": 'TViewerInternalStateEmitterEvent',
payload: {
- play: this._autoRotateFlag,
- speed: this._autoRotateSpeed,
- reverse: this._autoRotateReverse
+ play,
+ speed,
+ reverse,
},
viewerType: AUTO_ROTATE
})
diff --git a/src/keyframesModule/keyframeCtrl/keyframeCtrl.template.html b/src/keyframesModule/keyframeCtrl/keyframeCtrl.template.html
index d1b9382a39ac5656727b8779233b88a9a3c3faca..9017f0511325bdcbbb8cdea223d5e0b55cfd921b 100644
--- a/src/keyframesModule/keyframeCtrl/keyframeCtrl.template.html
+++ b/src/keyframesModule/keyframeCtrl/keyframeCtrl.template.html
@@ -5,81 +5,85 @@
<div *ngIf="currState; else noCurrStateTmpl"
class="controller-container m-4">
- <mat-slide-toggle [(ngModel)]="autoRotateFlag">Auto Rotate</mat-slide-toggle>
+ <form [formGroup]="autoRotateFormGrp">
+ <mat-slide-toggle formControlName="autorotate">Auto Rotate</mat-slide-toggle>
- <div>
- <mat-slider
- min="1"
- max="10"
- step="0.2"
- [disabled]="!autoRotateFlag"
- [(ngModel)]="autoRotateSpeed">
- </mat-slider>
- <span>Speed</span>
- </div>
-
- <mat-slide-toggle
- [(ngModel)]="autoRotateReverse"
- [disabled]="!autoRotateFlag">
- Reverse
- </mat-slide-toggle>
-
- <mat-divider class="m-2"></mat-divider>
+ <div>
+ <mat-slider
+ min="1"
+ max="10"
+ step="0.2">
+ <input matSliderThumb formControlName="autoRotateSpeed">
+ </mat-slider>
+ <span>Speed</span>
+ </div>
+
+ <mat-slide-toggle formControlName="autorotateReverse">
+ Reverse
+ </mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="loopFlag">Loop</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="linearFlag">Linear Camera</mat-slide-toggle>
+ </form>
- <button mat-button
- (click)="togglePlay()">
- <ng-template [ngIf]="isPlaying" [ngIfElse]="isNotPlayingTmpl">
- <i class="fas fa-stop"></i>
- Stop
- </ng-template>
- <ng-template #isNotPlayingTmpl>
- <i class="fas fa-play"></i>
- Play
- </ng-template>
- </button>
+ <form *ngIf="currViewerType === 'ThreeSurfer'" [formGroup]="frameFormGrp">
- <mat-divider class="m-2"></mat-divider>
+ <mat-divider class="m-2"></mat-divider>
- <button
- (click)="addKeyFrame()"
- matTooltip="Add key frame. Shortcut: [a]"
- mat-button
- color="primary">
- <i class="fas fa-plus"></i>
- Add Key Frame
- </button>
-</div>
-
-<mat-list cdkDropList (cdkDropListDropped)="drop($event)">
- <mat-list-item *ngFor="let state of internalStates" cdkDrag>
- <button mat-icon-button
- cdkDragHandle>
- <i class="fas fa-grip-vertical"></i>
+ <mat-slide-toggle formControlName="loop">Loop</mat-slide-toggle>
+ <mat-slide-toggle formControlName="linearCamera">Linear Camera</mat-slide-toggle>
+
+ <button mat-button
+ (click)="togglePlay()">
+ <ng-template [ngIf]="isPlaying" [ngIfElse]="isNotPlayingTmpl">
+ <i class="fas fa-stop"></i>
+ Stop
+ </ng-template>
+ <ng-template #isNotPlayingTmpl>
+ <i class="fas fa-play"></i>
+ Play
+ </ng-template>
</button>
-
- <mat-form-field>
- <mat-label>name</mat-label>
- <input type="text" matInput [(ngModel)]="state.name">
- </mat-form-field>
-
- <mat-form-field class="duration-container">
- <mat-label>ms</mat-label>
- <input type="number" matInput [(ngModel)]="state.duration">
- </mat-form-field>
-
- <button mat-icon-button
- (click)="gotoFrame(state)">
- <i class="fas fa-map-marker-alt"></i>
- </button>
-
- <button mat-icon-button
- color="warn"
- (click)="removeFrame(state)">
- <i class="fas fa-trash"></i>
+
+ <mat-divider class="m-2"></mat-divider>
+
+ <button
+ (click)="addKeyFrame()"
+ matTooltip="Add key frame. Shortcut: [a]"
+ mat-button
+ color="primary">
+ <i class="fas fa-plus"></i>
+ Add Key Frame
</button>
- </mat-list-item>
-</mat-list>
\ No newline at end of file
+ <mat-list cdkDropList (cdkDropListDropped)="drop($event)">
+ <mat-list-item *ngFor="let state of internalStates" cdkDrag>
+ <button mat-icon-button
+ cdkDragHandle>
+ <i class="fas fa-grip-vertical"></i>
+ </button>
+
+ <!-- <mat-form-field>
+ <mat-label>name</mat-label>
+ <input type="text" matInput [(ngModel)]="state.name">
+ </mat-form-field>
+
+ <mat-form-field class="duration-container">
+ <mat-label>ms</mat-label>
+ <input type="number" matInput [(ngModel)]="state.duration">
+ </mat-form-field>
+ -->
+ <button mat-icon-button
+ (click)="gotoFrame(state)">
+ <i class="fas fa-map-marker-alt"></i>
+ </button>
+
+ <button mat-icon-button
+ color="warn"
+ (click)="removeFrame(state)">
+ <i class="fas fa-trash"></i>
+ </button>
+
+ </mat-list-item>
+ </mat-list>
+ </form>
+
+</div>
diff --git a/src/keyframesModule/module.ts b/src/keyframesModule/module.ts
index 0042fdbf4a8dd60efc0f048897950236fba2e3b8..0caf4dc9f4057c4d93e49387b684c9bb91863061 100644
--- a/src/keyframesModule/module.ts
+++ b/src/keyframesModule/module.ts
@@ -1,18 +1,17 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
+import { ReactiveFormsModule } from "@angular/forms";
import { ComponentsModule } from "src/components";
import { AngularMaterialModule } from "src/sharedModules";
import { KeyFrameDirective } from "./keyframe.directive";
import { KeyFrameCtrlCmp } from "./keyframeCtrl/keyframeCtrl.component";
-import { KeyFrameService } from "./service";
@NgModule({
imports: [
CommonModule,
AngularMaterialModule,
ComponentsModule,
- FormsModule,
+ ReactiveFormsModule,
],
declarations: [
KeyFrameCtrlCmp,
@@ -21,9 +20,6 @@ import { KeyFrameService } from "./service";
exports: [
KeyFrameCtrlCmp,
KeyFrameDirective,
- ],
- providers: [
- KeyFrameService,
]
})
diff --git a/src/keyframesModule/service.ts b/src/keyframesModule/service.ts
deleted file mode 100644
index 98575c6b3fc1f6de5439791eaf01d0609c580d92..0000000000000000000000000000000000000000
--- a/src/keyframesModule/service.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Injectable, OnDestroy } from "@angular/core";
-import { Store } from "@ngrx/store";
-import { BehaviorSubject, Subscription } from "rxjs";
-import { distinctUntilChanged } from "rxjs/operators";
-import { actions } from "src/state/atlasSelection";
-
-@Injectable()
-export class KeyFrameService implements OnDestroy {
-
- inSession$ = new BehaviorSubject(false)
- private subs: Subscription[] = []
- private _inSession = false
- get inSession(){
- return this._inSession
- }
- set inSession(val){
- this._inSession = val
- this.inSession$.next(val)
- }
-
- ngOnDestroy(){
- while(this.subs.length) this.subs.pop().unsubscribe()
- }
-
- startKeyFrameSession(){
- this.inSession = true
- }
- endKeyFrameSession(){
- this.inSession = false
- }
-
- constructor(
- // private dialog: MatDialog,
- private store: Store<any>
- ){
- this.inSession$.pipe(
- distinctUntilChanged()
- ).subscribe(flag => {
-
- // TODO enable side bar when ready
- this.store.dispatch(
- actions.setViewerMode({
- viewerMode: flag
- ? "key frame"
- : null
- })
- )
- })
- }
-}
\ No newline at end of file
diff --git a/src/mouseoverModule/mouseOverCvt.pipe.ts b/src/mouseoverModule/mouseOverCvt.pipe.ts
index 410f16478ac2acd31ab24498a4a22bb6be177ad1..fabd1d4899843579d939eb3ca94162b4ab85cc2e 100644
--- a/src/mouseoverModule/mouseOverCvt.pipe.ts
+++ b/src/mouseoverModule/mouseOverCvt.pipe.ts
@@ -9,7 +9,8 @@ function render<T extends keyof TOnHoverObj>(key: T, value: TOnHoverObj[T]){
return {
icon: {
fontSet: 'fas',
- fontIcon: 'fa-brain'
+ fontIcon: 'fa-brain',
+ cls: 'fas fa-brain',
},
text: seg?.name || "Unknown"
}
@@ -20,7 +21,8 @@ function render<T extends keyof TOnHoverObj>(key: T, value: TOnHoverObj[T]){
return [{
icon: {
fontSet: 'fas',
- fontIcon: 'fa-database'
+ fontIcon: 'fa-database',
+ cls: 'fas fa-database'
},
text: name
}]
@@ -35,7 +37,8 @@ function render<T extends keyof TOnHoverObj>(key: T, value: TOnHoverObj[T]){
return [{
icon: {
fontSet: 'fas',
- fontIcon
+ fontIcon,
+ cls: `fas ${fontIcon}`,
},
text: name || `Unnamed ${annotationType}`
}]
@@ -45,6 +48,7 @@ function render<T extends keyof TOnHoverObj>(key: T, value: TOnHoverObj[T]){
icon: {
fontSet: 'fas',
fontIcon: 'fa-file',
+ cls: 'fas fa-file'
},
text: `Unknown hovered object`
}]
@@ -56,6 +60,7 @@ type TCvtOutput = {
icon: {
fontSet: string
fontIcon: string
+ cls: string
}
text: string
}
diff --git a/src/overwrite.scss b/src/overwrite.scss
index b4a9c686cf9575ce033aef5d83081f561cd711d5..4afc47b813371506ea02d6ed4327de72818e90b6 100644
--- a/src/overwrite.scss
+++ b/src/overwrite.scss
@@ -296,9 +296,10 @@ button.#{$llb}
{
width: 100%;
- > .mat-button-wrapper
+ > .mdc-button__label
{
display: flex;
+ width: 100%;
> .#{$llb}-icon
{
diff --git a/src/theme.scss b/src/theme.scss
index 5a9d897e85e7e0043bab788a54592e6f5b3c72ec..6ca83466812bcde49e6bf12df7cf9d2357fa4169 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -188,3 +188,8 @@ a[mat-list-item]
flex: 0 0 16.67%;
}
}
+
+[matListItemTitle]
+{
+ text-wrap: nowrap;
+}
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index 1490cb3305e94efccb442a3ac7cf4235849b0af6..1a36b61c62ce1aab472b466f16964c316e6d8210 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -145,7 +145,7 @@
matTooltip="Toggle experimental flag">
<iav-dynamic-mat-button
[iav-dynamic-mat-button-style]="matBtnStyle"
- [iav-dynamic-mat-button-color]="matBtnColor"
+ iav-dynamic-mat-button-color="warn"
iav-dynamic-mat-button-aria-label="Toggle experimental features">
<ng-template [ngIf]="currentState">
@@ -153,10 +153,7 @@
</ng-template>
<ng-template [ngIf]="!currentState">
- <span class="fa-stack">
- <i class="fas fa-flask fa-stack-1x"></i>
- <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
- </span>
+ <i class="fas fa-wifi"></i>
</ng-template>
</iav-dynamic-mat-button>
</div>
diff --git a/src/util/directives/destroy.directive.ts b/src/util/directives/destroy.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2bcb2d0cbb17e9c298f1c92771ca4c5dd64aef45
--- /dev/null
+++ b/src/util/directives/destroy.directive.ts
@@ -0,0 +1,13 @@
+import { Directive, OnDestroy } from "@angular/core";
+import { Subject } from "rxjs";
+
+@Directive({
+ standalone: true
+})
+export class DestroyDirective implements OnDestroy{
+ public destroyed$ = new Subject<null>()
+ ngOnDestroy(): void {
+ this.destroyed$.next()
+ this.destroyed$.complete()
+ }
+}
diff --git a/src/util/side-panel/side-panel.component.html b/src/util/side-panel/side-panel.component.html
index 667876ee42702f5714ec80f84e3bb2e9dfd20a12..9462d087ad75fbabc73d27a5872028f918e07154 100644
--- a/src/util/side-panel/side-panel.component.html
+++ b/src/util/side-panel/side-panel.component.html
@@ -2,16 +2,17 @@
<ng-content select="[header]"></ng-content>
</ng-template>
-<mat-card class="mat-elevation-z4">
- <div
+<mat-card class="mat-elevation-z4 foo">
+ <mat-card-header
[style.backgroundColor]="cardColor"
- class="vanishing-border"
[ngClass]="{
'darktheme': darktheme === true,
'lighttheme': darktheme === false
}">
- <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
+ <mat-card-subtitle>
+ <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
+ </mat-card-subtitle>
<mat-card-title class="sxplr-custom-cmp text">
<ng-content select="[title]"></ng-content>
@@ -20,7 +21,7 @@
<mat-card-subtitle>
<ng-content select="[subtitle]"></ng-content>
</mat-card-subtitle>
- </div>
+ </mat-card-header>
</mat-card>
<ng-content></ng-content>
diff --git a/src/util/side-panel/side-panel.component.scss b/src/util/side-panel/side-panel.component.scss
index 44bed767cbc98d3cf2ecdc694422842c758e9177..29761d226924c9b315134c663f715e686b97bbc0 100644
--- a/src/util/side-panel/side-panel.component.scss
+++ b/src/util/side-panel/side-panel.component.scss
@@ -1,5 +1,4 @@
-.vanishing-border
+mat-card-header
{
padding: 16px;
- margin: -16px!important;
-}
+}
\ No newline at end of file
diff --git a/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html b/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
index 18968039f924b3625f13254ff2b2d6e0bf346f61..d9036f6746dc6a90c782647de4eec524c3199f8b 100644
--- a/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
+++ b/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
@@ -131,10 +131,7 @@
<!-- viewer ctrl -->
<mat-menu #viewerCtrlMenu>
- <viewer-ctrl-component
- class="d-block m-2 ml-3 mr-3 sxplr-custom-cmp"
- (click)="$event.stopPropagation()">
- </viewer-ctrl-component>
+ <viewer-ctrl-component (click)="$event.stopPropagation()"></viewer-ctrl-component>
</mat-menu>
<ng-template #sliceViewArrow>
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.component.ts b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
index 12e15afb36ba801c9945e7a16bf041389ecc20c2..423d69a9eac52ba9b93f1f2025cd461dabd66075 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.component.ts
+++ b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
@@ -12,7 +12,7 @@ import { LoggingService } from "src/logging";
import { NehubaViewerUnit } from "../nehubaViewer/nehubaViewer.component";
import { Observable, Subscription, of, combineLatest } from "rxjs";
import { map, filter, startWith, throttleTime } from "rxjs/operators";
-import { MatBottomSheet, MatDialog } from "src/sharedModules/angularMaterial.exports"
+import { Clipboard, MatBottomSheet, MatDialog, MatSnackBar } from "src/sharedModules/angularMaterial.exports"
import { ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
import { UntypedFormControl } from "@angular/forms";
@@ -60,11 +60,14 @@ export class StatusCardComponent implements OnInit, OnChanges{
public SHARE_BTN_ARIA_LABEL = ARIA_LABELS.SHARE_BTN
public SHOW_FULL_STATUS_PANEL_ARIA_LABEL = ARIA_LABELS.SHOW_FULL_STATUS_PANEL
public HIDE_FULL_STATUS_PANEL_ARIA_LABEL = ARIA_LABELS.HIDE_FULL_STATUS_PANEL
+ public COPY_NAVIGATION_STRING = "Copy navigation coordinates to clipboard"
constructor(
private store$: Store<any>,
private log: LoggingService,
private bottomSheet: MatBottomSheet,
private dialog: MatDialog,
+ private clipboard: Clipboard,
+ private snackbar: MatSnackBar,
@Optional() @Inject(NEHUBA_INSTANCE_INJTKN) nehubaViewer$: Observable<NehubaViewerUnit>
) {
@@ -201,4 +204,11 @@ export class StatusCardComponent implements OnInit, OnChanges{
ariaLabel
})
}
+
+ copyString(value: string){
+ this.clipboard.copy(value)
+ this.snackbar.open(`Copied to clipboard!`, null, {
+ duration: 1000
+ })
+ }
}
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.style.css b/src/viewerModule/nehuba/statusCard/statusCard.style.css
index 4da5942081877f8c7722e3d549d3cdbd77965a88..a731c42cd30010291fafbd631db8deb9de5257ee 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.style.css
+++ b/src/viewerModule/nehuba/statusCard/statusCard.style.css
@@ -14,12 +14,7 @@ small[onHoverSegment]
margin-left:2em;
}
-.share-btn
-{
- right: 0;
-}
-
.expandedContainer
{
- width: 20rem;
+ width: 26rem;
}
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.template.html b/src/viewerModule/nehuba/statusCard/statusCard.template.html
index d4daef878ea439f321f40fe5ebb06f6124e70867..4d6ca08573c522ac291a9d0cb219449a8d65cf95 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.template.html
+++ b/src/viewerModule/nehuba/statusCard/statusCard.template.html
@@ -3,7 +3,7 @@
[quick-tour-order]="quickTourData.order"
#statusCardQT="quickTour">
<mat-card *ngIf="showFull; else showMin"
- class="expandedContainer sxplr-p-2 sxplr-pt-1">
+ class="expandedContainer">
<mat-card-content>
@@ -75,17 +75,23 @@
[value]="navVal$ | async"
#navInput="matInput">
- </mat-form-field>
+ <button mat-icon-button
+ iav-stop="click"
+ matSuffix
+ [attr.aria-label]="COPY_NAVIGATION_STRING"
+ (click)="copyString(navInput.value)">
+ <i class="fas fa-copy"></i>
+ </button>
- <div class="w-0 position-relative">
- <button
+ <button mat-icon-button
+ iav-stop="click"
+ matSuffix
sxplr-share-view
- [attr.aria-label]="SHARE_BTN_ARIA_LABEL"
- mat-icon-button
- class="position-absolute share-btn">
+ [attr.aria-label]="SHARE_BTN_ARIA_LABEL">
<i class="fas fa-share-square"></i>
</button>
- </div>
+ </mat-form-field>
+
</div>
<!-- cursor pos -->
@@ -115,7 +121,15 @@
{{ navVal$ | async }}
</span>
- <mat-divider [vertical]="true"></mat-divider>
+ <ng-template [ngIf]="navVal$ | async" let-navVal>
+
+ <button mat-icon-button
+ [attr.aria-label]="COPY_NAVIGATION_STRING"
+ (click)="copyString(navVal)">
+ <i class="fas fa-copy"></i>
+ </button>
+
+ </ng-template>
<button mat-icon-button
[attr.aria-label]="SHOW_FULL_STATUS_PANEL_ARIA_LABEL"
diff --git a/src/viewerModule/nehuba/viewerCtrl/snapPerspectiveOrientation/snapPerspectiveOrientation.template.html b/src/viewerModule/nehuba/viewerCtrl/snapPerspectiveOrientation/snapPerspectiveOrientation.template.html
index 3f2d7015b58a1e285dc958131b67877346d18d78..45c02cdfbfe6ab483fb587c0674e491c5a14cfd7 100644
--- a/src/viewerModule/nehuba/viewerCtrl/snapPerspectiveOrientation/snapPerspectiveOrientation.template.html
+++ b/src/viewerModule/nehuba/viewerCtrl/snapPerspectiveOrientation/snapPerspectiveOrientation.template.html
@@ -1,7 +1,3 @@
-<h3 class="text mat-h3">
- Snap perspective orientation
-</h3>
-
<ng-container *ngTemplateOutlet="btnTmpl; context: { $implicit: EnumClassicalView.CORONAL }">
</ng-container>
<ng-container *ngTemplateOutlet="btnTmpl; context: { $implicit: EnumClassicalView.SAGITTAL }">
diff --git a/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.style.css b/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d55498969c3cb84f8cc07e976af87876f7c2b880 100644
--- a/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.style.css
+++ b/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.style.css
@@ -0,0 +1,4 @@
+mat-divider
+{
+ margin-top: 1rem;
+}
diff --git a/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.template.html b/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.template.html
index 3145dbb6413f40d4db827001dd59f887c346d09d..3c76aae196955a032e50140a355054fb60498160 100644
--- a/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.template.html
+++ b/src/viewerModule/nehuba/viewerCtrl/viewerCtrlCmp/viewerCtrlCmp.template.html
@@ -1,42 +1,60 @@
-<h3 class="text mat-h3">
- Perspective View
-</h3>
+<mat-card>
+ <mat-card-header>
+ <mat-card-title>
-<mat-slide-toggle [(ngModel)]="removeOctantFlag"
- [aria-label]="ARIA_LABELS.TOGGLE_FRONTAL_OCTANT"
- name="remove-frontal-octant">
- <span class="text">
- Remove frontal octant
- </span>
- <i [matTooltip]="CONST.REMOVE_FRONTAL_OCTANT_HELPER_TEXT" class="fas fa-question"></i>
-</mat-slide-toggle>
+ Perspective View
+ </mat-card-title>
+ </mat-card-header>
-<!-- aux mesh controller -->
-<ng-container *ngIf="auxMeshes$ | async as auxMeshes">
- <ng-template [ngIf]="auxMeshes.length > 0">
- <mat-divider class="mt-1 mb-1"></mat-divider>
-
- <h3 class="text mat-h3">
- <span>
- Toggle auxiliary meshes
+ <mat-card-content>
+ <mat-slide-toggle [(ngModel)]="removeOctantFlag"
+ [aria-label]="ARIA_LABELS.TOGGLE_FRONTAL_OCTANT"
+ name="remove-frontal-octant">
+ <span class="text">
+ Remove frontal octant
</span>
- <i [matTooltip]="CONST.AUXMESH_DESC" class="fas fa-question"></i>
- </h3>
+ <i [matTooltip]="CONST.REMOVE_FRONTAL_OCTANT_HELPER_TEXT" class="fas fa-question"></i>
+ </mat-slide-toggle>
+ </mat-card-content>
+
+ <!-- aux mesh controller -->
+ <ng-container *ngIf="auxMeshes$ | async as auxMeshes">
- <form [formGroup]="auxMeshFormGroup">
- <mat-slide-toggle *ngFor="let auxMesh of auxMeshes; trackBy: trackByAtId"
- [formControlName]="auxMesh['@id']"
- class="d-block"
- [name]="'toggle-aux-mesh-' + auxMesh['@id']">
- <span class="text">
- {{ auxMesh.displayName || auxMesh.name }}
+ <mat-divider></mat-divider>
+
+ <mat-card-header>
+ <mat-card-title>
+ <span>
+ Toggle auxiliary meshes
</span>
- </mat-slide-toggle>
- </form>
- </ng-template>
-</ng-container>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <form [formGroup]="auxMeshFormGroup">
+ <mat-slide-toggle *ngFor="let auxMesh of auxMeshes; trackBy: trackByAtId"
+ [formControlName]="auxMesh['@id']"
+ class="d-block"
+ [name]="'toggle-aux-mesh-' + auxMesh['@id']">
+ <span class="text">
+ {{ auxMesh.displayName || auxMesh.name }}
+ </span>
+ <i [matTooltip]="CONST.AUXMESH_DESC" class="fas fa-question"></i>
+ </mat-slide-toggle>
+ </form>
+ </mat-card-content>
+ </ng-container>
-<mat-divider class="mt-1 mb-1"></mat-divider>
-<snap-perspective-orientation-cmp></snap-perspective-orientation-cmp>
+ <mat-divider></mat-divider>
+ <mat-card-header>
+ <mat-card-title>
+ <span>
+ Snap perspective orientation
+ </span>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <snap-perspective-orientation-cmp></snap-perspective-orientation-cmp>
+ </mat-card-content>
+</mat-card>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index cc90a9f067f0655747632b66d4895cec23d2b3a4..f1ba346a219f1b1b460a0c44c23004d0dae57bf9 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -22,7 +22,7 @@
.tab-toggle
{
- margin-left: -2rem;
+ margin-left: -1rem;
padding-right: 0.75rem;
margin-right: 1rem;
text-align: right;
@@ -75,8 +75,6 @@ mat-drawer
.min-tray-explr-btn
{
width: 100%;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
margin-top: -1rem;
}
@@ -98,13 +96,13 @@ logo-container
opacity: 0.2;
}
-mat-list[dense].contextual-block
+mat-list.contextual-block
{
display: inline-block;
background-color:rgba(200,200,200,0.8);
}
-:host-context([darktheme="true"]) mat-list[dense].contextual-block
+:host-context([darktheme="true"]) mat-list.contextual-block
{
background-color : rgba(30,30,30,0.8);
}
@@ -154,20 +152,26 @@ sxplr-smart-chip [mat-icon-button]
margin-right: -1.5rem;
}
-.loadingText
+sxplr-sapiviews-core-region-region-list-item
{
- height: 1rem;
+ display: flex;
+ align-items: center;
}
-sxplr-overlay-ui
+.context-menu-container
{
- position: absolute;
- width: 100%;
- height: 100%;
+ margin: 0 -16px;
}
-sxplr-sapiviews-core-region-region-list-item
+.centered
{
display: flex;
+ justify-content: center;
align-items: center;
}
+
+.leave-me-alone
+{
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 62d496a668f9b65da7aad03ac5d140ff2559ada4..e31ad27551e54d3d5d4d7ff1bfdc599d9edc869a 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -9,36 +9,24 @@
<logo-container></logo-container>
</div>
- <div *ngIf="(media.mediaBreakPoint$ | async) < 2" floatingMouseContextualContainerDirective>
+ <div *ngIf="(media.mediaBreakPoint$ | async) < 2"
+ floatingMouseContextualContainerDirective
+ iav-mouse-hover
+ #iavMouseHoverContextualBlock="iavMouseHover">
- <div class="h-0"
- iav-mouse-hover
- #iavMouseHoverContextualBlock="iavMouseHover">
- </div>
- <mat-list dense class="contextual-block">
+ <mat-list class="contextual-block">
<mat-list-item *ngFor="let cvtOutput of iavMouseHoverContextualBlock.currentOnHoverObs$ | async | mouseoverCvt"
class="h-auto">
-
- <mat-icon
- [fontSet]="cvtOutput.icon.fontSet"
- [fontIcon]="cvtOutput.icon.fontIcon"
- mat-list-icon>
- </mat-icon>
-
- <div matLine>{{ cvtOutput.text }}</div>
-
+ <span class="centered" matListItemIcon [class]="cvtOutput.icon.cls"></span>
+ <span matListItemTitle>{{ cvtOutput.text }}</span>
</mat-list-item>
-
</mat-list>
- <!-- TODO Potentially implementing plugin contextual info -->
</div>
</div>
</div>
-<!-- <sxplr-overlay-ui></sxplr-overlay-ui> -->
-
<!-- master draw container -->
<ng-template [ngIf]="view$ | async" let-view>
@@ -243,7 +231,7 @@
<ng-template [ngIf]="view$ | async" let-view>
<!-- if no selected regions, show spatial search -->
- <div *ngIf="(view.selectedRegions || []).length === 0" class="sxplr-p-1 w-100">
+ <div *ngIf="(view.selectedRegions || []).length === 0" class="sxplr-mt-1 w-100">
<ng-template
[ngTemplateOutlet]="spatialFeatureListTmpl"
[ngTemplateOutletContext]="{
@@ -279,7 +267,7 @@
}"
[style.backgroundColor]="sapiRegion.regionRgbString">
<span class="text sxplr-custom-cmp">
- Explore
+ Explore Foo
</span>
</button>
</div>
@@ -289,44 +277,40 @@
<!-- tab to minimize mini tray -->
- <div class="tab-toggle-container">
-
- <div [ngClass]="(minTrayVisSwitch.switchState$ | async) ? '' : 'd-none'">
+ <div class="tab-toggle-container" [ngClass]="(minTrayVisSwitch.switchState$ | async) ? '' : 'd-none'">
- <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
- fontIcon: 'fas fa-chevron-left',
- matColor: null,
- click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch)
- }">
- </ng-template>
- </div>
-
- <div [ngClass]="(minTrayVisSwitch.switchState$ | async) ? 'd-none' : ''">
+ <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
+ fontIcon: 'fas fa-chevron-left',
+ matColor: null,
+ click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch)
+ }">
+ </ng-template>
+ </div>
+
+ <div class="tab-toggle-container" [ngClass]="(minTrayVisSwitch.switchState$ | async) ? 'd-none' : ''">
- <ng-template [ngIf]="voiFeatureEntryCmp && (voiFeatureEntryCmp.totals$ | async)"
- [ngIfElse]="noBadgeTmpl"
- let-totals>
+ <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 [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 #noBadgeTmpl>
- <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
- fontIcon: 'fas fa-search',
- matColor: 'primary',
- click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch)
- }">
- </ng-template>
+ <ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl" [ngTemplateOutletContext]="{
+ fontIcon: 'fas fa-search',
+ matColor: 'primary',
+ click: minTrayVisSwitch.toggle.bind(minTrayVisSwitch)
+ }">
</ng-template>
- </div>
-
+ </ng-template>
</div>
</ng-template>
@@ -370,13 +354,13 @@
<!-- status panel for (for nehuba viewer) -->
<iav-cmp-viewer-nehuba-status *ngIf="(useViewer$ | async) === 'nehuba'"
- class="pe-all mt-2 muted-7 d-inline-block v-align-top">
+ class="pe-all sxplr-mt-1 muted-7 d-inline-block v-align-top">
</iav-cmp-viewer-nehuba-status>
<button
mat-icon-button
sxplr-share-view
*ngIf="(useViewer$ | async) === 'threeSurfer'"
- class="pe-all mt-2 muted-7 d-inline-block v-align-top">
+ class="pe-all mt-1 muted-7 d-inline-block v-align-top">
<i class="fas fa-share-square"></i>
</button>
</ng-template>
@@ -401,7 +385,7 @@
}">
</ng-container>
- <annotating-tools-panel class="z-index-10 d-block"
+ <annotating-tools-panel class="z-index-10 leave-me-alone"
#toolPanel="annoToolsPanel">
</annotating-tools-panel>
</ng-template>
@@ -437,14 +421,22 @@
<!-- special mode top right -->
<ng-template #specialTopRightTmpl let-mode="mode">
<mat-card class="mat-card-sm pe-all m-4">
- <span>
- {{ mode }}
- </span>
- <button mat-icon-button
- color="warn"
- (click)="exitSpecialViewMode()">
- <i class="fas fa-times"></i>
- </button>
+ <mat-card-header>
+ <mat-card-subtitle>
+ <span>
+ {{ mode }}
+ </span>
+
+ <button mat-icon-button
+ color="warn"
+ (click)="exitSpecialViewMode()">
+ <i class="fas fa-times"></i>
+ </button>
+ </mat-card-subtitle>
+ </mat-card-header>
+ <mat-card-content>
+
+ </mat-card-content>
</mat-card>
</ng-template>
@@ -542,50 +534,48 @@
<!-- auto complete search box -->
<ng-template #autocompleteTmpl let-showTour="showTour">
- <ng-template [ngIf]="view$ | async" let-view>
-
- <div class="ml-2 mr-2 pe-all auto-complete-container">
-
- <sxplr-sapiviews-core-rich-regionlistsearch
- class="mat-elevation-z4"
- [sxplr-sapiviews-core-rich-regionlistsearch-regions]="allAvailableRegions$ | async"
- [sxplr-sapiviews-core-rich-regionlistsearch-mapped-region-names]="view.labelMappedRegionNames"
- [sxplr-sapiviews-core-rich-regionlistsearch-current-search]="view.selectedRegions.length === 1 ? view.selectedRegions[0].name : null"
- (sxplr-sapiviews-core-rich-regionlistsearch-region-select)="selectRoi($event)"
- (sxplr-sapiviews-core-rich-regionlistsearch-region-toggle)="toggleRoi($event)">
- <ng-template regionTemplate let-region>
- <div class="sxplr-d-flex">
- <button
- mat-icon-button
- class="sxplr-mt-a sxplr-mb-a">
- <i [ngClass]="(view.selectedRegions | includes : region) ? 'fa-circle' : 'fa-none'" class="fas"></i>
- </button>
-
- <sxplr-sapiviews-core-region-region-list-item
- [sxplr-sapiviews-core-region-region]="region">
- </sxplr-sapiviews-core-region-region-list-item>
- </div>
- </ng-template>
- <button mat-icon-button
- search-input-suffix
- *ngIf="view.selectedRegions.length > 0"
- (click)="clearRoi()">
- <i class="fas fa-times"></i>
- </button>
- </sxplr-sapiviews-core-rich-regionlistsearch>
-
+ <div *ngIf="view$ | async; let view"
+ class="pe-all auto-complete-container">
+ <sxplr-sapiviews-core-rich-regionlistsearch
+ class="mat-elevation-z4"
+ [sxplr-sapiviews-core-rich-regionlistsearch-regions]="allAvailableRegions$ | async"
+ [sxplr-sapiviews-core-rich-regionlistsearch-mapped-region-names]="view.labelMappedRegionNames"
+ [sxplr-sapiviews-core-rich-regionlistsearch-current-search]="view.selectedRegions.length === 1 ? view.selectedRegions[0].name : null"
+ (sxplr-sapiviews-core-rich-regionlistsearch-region-select)="selectRoi($event)"
+ (sxplr-sapiviews-core-rich-regionlistsearch-region-toggle)="toggleRoi($event)">
+ <ng-template regionTemplate let-region>
+ <div class="sxplr-d-flex">
+ <button
+ mat-icon-button
+ class="sxplr-mt-a sxplr-mb-a">
+ <i [ngClass]="(view.selectedRegions | includes : region) ? 'fa-circle' : 'fa-none'" class="fas"></i>
+ </button>
+
+ <sxplr-sapiviews-core-region-region-list-item
+ [sxplr-sapiviews-core-region-region]="region">
+ </sxplr-sapiviews-core-region-region-list-item>
+ </div>
+ </ng-template>
+ <button mat-icon-button
+ search-input-suffix
+ *ngIf="view.selectedRegions.length > 0"
+ (click)="clearRoi()">
+ <i class="fas fa-times"></i>
+ </button>
<button mat-icon-button
color="primary"
+ search-input-prefix
+ iav-stop="click"
[sxplr-dialog]="regionHierarchyTmpl"
sxplr-dialog-size="xl">
<i class="fas fa-sitemap"></i>
</button>
-
- <div class="w-100 h-100 position-absolute sxplr-pe-none" *ngIf="showTour">
- </div>
-
+
+ </sxplr-sapiviews-core-rich-regionlistsearch>
+
+ <div class="w-100 h-100 position-absolute sxplr-pe-none" *ngIf="showTour">
</div>
- </ng-template>
+ </div>
</ng-template>
<!-- template for rendering tab -->
@@ -600,7 +590,6 @@
<ng-template [ngIf]="isOpen" [ngIfElse]="tabTmpl_closedTmpl">
<ng-template [ngTemplateOutlet]="tabTmpl_defaultTmpl"
[ngTemplateOutletContext]="{
- matColor: 'basic',
fontIcon: 'fa-chevron-left',
click: click,
badge: badge
@@ -843,8 +832,7 @@
<button mat-raised-button class="mat-elevation-z8"
[attr.aria-label]="ARIA_LABELS.COLLAPSE"
- (click)="collapse()"
- color="basic">
+ (click)="collapse()">
<i class="fas fa-chevron-up"></i>
<span>
collapse
@@ -864,84 +852,70 @@
<!-- context menu template -->
<ng-template #viewerCtxMenuTmpl let-tmplRefs="tmplRefs">
- <mat-card class="sxplr-p-0 d-flex flex-column"
+ <mat-card
[iav-key-listener]="[{type: 'keydown', target: 'document', capture: true, key: 'Esc'}]"
(iav-key-event)="disposeCtxMenu()"
(iav-outsideClick)="disposeCtxMenu()">
- <mat-card-content *ngFor="let tmplRef of tmplRefs"
- class="m-0"
- [ngStyle]="{order: tmplRef.order || 0}">
- <mat-divider></mat-divider>
-
- <!-- template provided -->
- <ng-template [ngIf]="tmplRef.tmpl"
- [ngIfElse]="fallbackTmpl"
- [ngTemplateOutlet]="tmplRef.tmpl"
- [ngTemplateOutletContext]="{$implicit: tmplRef.data}">
- </ng-template>
-
- <!-- template not provided -->
- <ng-template #fallbackTmpl>
- {{ tmplRef.data.message || 'test' }}
- </ng-template>
+
+ <mat-card-content class="d-flex flex-column">
+ <div *ngFor="let tmplRef of tmplRefs"
+ [ngStyle]="{ order: tmplRef.order || 0 }"
+ class="context-menu-container">
+
+ <ng-template [ngIf]="tmplRef.tmpl"
+ [ngIfElse]="fallbackTmpl"
+ [ngTemplateOutlet]="tmplRef.tmpl"
+ [ngTemplateOutletContext]="{ $implicit: tmplRef.data }">
+ </ng-template>
+
+ <ng-template #fallbackTmpl>
+ {{ tmplRef.data.message || 'test' }}
+ </ng-template>
+ </div>
- <mat-divider></mat-divider>
</mat-card-content>
+
</mat-card>
</ng-template>
<ng-template #lastViewedPointTmpl let-data>
- <div class="text-muted sxplr-m-2">
- Last selected spatial object
- </div>
- <button mat-button class="sxplr-list-like-button"
- (click)="selectPoint(data, data.template)">
-
+ <mat-action-list class="sxplr-p-0">
+ <mat-divider></mat-divider>
+ <div mat-subheader>Last selected spatial object</div>
+ <ng-template [ngIf]="data?.point">
+
+ <button mat-list-item (click)="selectPoint(data, data.template)">
+ <span matListItemIcon>
+ <i class="fas fa-history"></i>
+ </span>
- <div class="sxplr-list-like-button-icon">
- <i class="fas fa-history"></i>
- </div>
+ <!-- <span matListItemLine class="text-muted">Last selected spatial object</span> -->
+ <span matListItemLine>{{ data.point | nmToMm | numbers | addUnitAndJoin : '' }} (mm)</span>
+ <span matListItemLine class="text-muted">Point</span>
+ <span matListItemLine class="text-muted">{{ data.template.name }}</span>
+
+ </button>
+ </ng-template>
- <div class="sxplr-list-like-button-body">
+ <ng-template [ngIf]="data?.face && data?.vertices">
- <ng-template [ngIf]="data?.point">
- <span class="sxplr-list-like-button-body-line">
- {{ data.point | nmToMm | numbers | addUnitAndJoin : '' }} (mm)
- </span>
- <span class="sxplr-list-like-button-body-line text-muted">
- Point
+ <button mat-list-item (click)="selectPoint(data, data.template)">
+ <span matListItemIcon>
+ <i class="fas fa-history"></i>
</span>
- </ng-template>
-
- <ng-template [ngIf]="data.face && data.vertices">
-
- <span class="sxplr-list-like-button-body-line">
+
+ <span matListItemLine>
Face Index: {{ data.face }}, Vertices Index: {{ data.vertices | addUnitAndJoin : '' }}
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
+ <span matListItemLine class="text-muted">
Mesh Face
</span>
- </ng-template>
-
- <span class="sxplr-list-like-button-body-line text-muted">
- <span>
- {{ data.template.name }}
- </span>
-
- <ng-template [ngIf]="templateSelected$ | async" let-templateSelected>
- <ng-template [ngIf]="templateSelected.id !== data.template.id">
- <mat-icon fontSet="fas" fontIcon="fa-exclamation-triangle"
- color="warn"
- matTooltip="Different template spaces detected.">
- </mat-icon>
- </ng-template>
- </ng-template>
+ <span matListItemLine class="text-muted">{{ data.template.name }}</span>
- </span>
- </div>
+ </button>
+ </ng-template>
+ </mat-action-list>
- <!-- {{ data.point | json }} -->
- </button>
</ng-template>
<!-- viewer status ctx menu -->
@@ -953,58 +927,52 @@
<!-- volumetric i.e. nehuba -->
<ng-container *ngSwitchCase="'nehuba'">
- <button mat-button class="sxplr-list-like-button"
- (click)="selectPoint({ point: context.payload.mouse.real }, data.metadata.template)">
-
- <div class="sxplr-list-like-button-icon">
- <i class="fas fa-map"></i>
- </div>
-
- <div class="sxplr-list-like-button-body">
-
- <span class="sxplr-list-like-button-body-line">
+ <mat-action-list class="sxplr-p-0">
+ <button mat-list-item
+ (click)="selectPoint({ point: context.payload.mouse.real }, data.metadata.template)">
+
+ <span matListItemIcon>
+ <i class="fas fa-map"></i>
+ </span>
+
+ <span matListItemLine>
{{ context.payload.mouse.real | nmToMm | numbers | addUnitAndJoin : '' }} (mm)
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
+ <span matListItemLine class="text-muted">
Point
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
+ <span matListItemLine class="text-muted">
{{ data.metadata.template.name }}
</span>
- </div>
+ </button>
+ </mat-action-list>
- </button>
</ng-container>
<ng-container *ngSwitchCase="'threeSurfer'">
<ng-template [ngIf]="context.payload?.faceIndex" let-faceIndex>
<ng-template [ngIf]="context.payload?.vertexIndices" let-vertexIndices>
- <button mat-button class="sxplr-list-like-button"
- (click)="selectPoint({ face: faceIndex, vertices: vertexIndices }, data.metadata.template)"
- disabled>
-
- <div class="sxplr-list-like-button-icon">
- <i class="fas fa-map"></i>
- </div>
-
- <div class="sxplr-list-like-button-body">
-
- <span class="sxplr-list-like-button-body-line">
+ <mat-action-list class="sxplr-p-0">
+ <button mat-list-item
+ (click)="selectPoint({ face: faceIndex, vertices: vertexIndices }, data.metadata.template)"
+ disabled>
+
+ <span matListItemIcon>
+ <i class="fas fa-map"></i>
+ </span>
+
+ <span matListItemLine>
Face Index: {{ faceIndex }}, Vertices Index: {{ vertexIndices | addUnitAndJoin : '' }}
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
- Mesh Face
+ <span matListItemLine class="text-muted">
+ Mesh Face (Not selectable for now)
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
+ <span matListItemLine class="text-muted">
{{ data.metadata.template.name }}
</span>
- <i class="sxplr-list-like-button-body-line text-muted">
- (Not selectable at the moment)
- </i>
- </div>
-
- </button>
+ </button>
+ </mat-action-list>
</ng-template>
</ng-template>
@@ -1022,30 +990,22 @@
<!-- viewer state hover ctx menu -->
<ng-template #viewerStatusRegionCtxMenu let-data>
<!-- hovered ROIs -->
- <ng-template ngFor [ngForOf]="data.metadata.hoveredRegions"
- let-region
- let-first="first">
-
- <mat-divider class="top-0" *ngIf="!first"></mat-divider>
+ <ng-template ngFor [ngForOf]="data.metadata.hoveredRegions" let-region>
- <button mat-button
- (click)="$event.ctrlKey ? toggleRoi(region) : selectRoi(region)"
- class="sxplr-list-like-button">
-
- <div class="sxplr-list-like-button-icon">
- <i class="fas fa-brain"></i>
- </div>
-
- <div class="sxplr-list-like-button-body">
-
- <span class="sxplr-list-like-button-body-line">
+ <mat-action-list class="sxplr-p-0">
+ <button mat-list-item (click)="$event.ctrlKey ? toggleRoi(region) : selectRoi(region)">
+ <span matListItemIcon>
+ <i class="fas fa-brain"></i>
+ </span>
+
+ <span matListItemLine>
{{ region.name }}
</span>
- <span class="sxplr-list-like-button-body-line text-muted">
+ <span matListItemLine class="text-muted">
Brain region
</span>
- </div>
- </button>
+ </button>
+ </mat-action-list>
</ng-template>
</ng-template>
@@ -1108,7 +1068,7 @@
<!-- spatial search tmpls -->
<ng-template #spatialFeatureListTmpl let-view="view">
- <mat-card class="sxplr-pe-all"
+ <mat-card class="sxplr-pe-all overflow-hidden"
[ngClass]="{
'sxplr-d-none': !(voiSwitch.switchState$ | async) || (voiFeatureEntryCmp.totals$ | async) === 0
}">
@@ -1131,15 +1091,6 @@
</mat-card-subtitle>
</mat-card-header>
- <div class="loadingText">
-
- <ng-template [ngIf]="voiFeatureEntryCmp.busy$ | async">
- <spinner-cmp class="sxplr-d-inline-block"></spinner-cmp>
- <span>
- Loading Wireframes ...
- </span>
- </ng-template>
- </div>
</mat-card>
<sxplr-feature-entry
@@ -1154,7 +1105,9 @@
<mat-card [ngClass]="{
'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) > 0
}">
- No spatial features found.
+ <mat-card-content>
+ No spatial features found.
+ </mat-card-content>
</mat-card>
<button mat-raised-button
@@ -1183,6 +1136,13 @@
</ng-template>
</button>
+ <div>
+ <mat-progress-bar
+ mode="indeterminate"
+ *ngIf="(voiFeatureEntryCmp.busy$ | async)">
+ </mat-progress-bar>
+ </div>
+
<!-- TODO voiBbox directive is used to draw outlines for VOI
this has been temporarily disabled, since datasource is paginated
and how bounding boxes are drawn needs to be reconsidered -->