From 5624041841239019763e66b2e0fd224e7da65820 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Tue, 21 Mar 2023 17:32:13 +0100
Subject: [PATCH] fix: threesurfer update colormap
---
.../lifecycle/lifecycle.component.ts | 47 +++++++++++++++++++
src/viewerModule/threeSurfer/module.ts | 4 +-
src/viewerModule/threeSurfer/store/effects.ts | 5 +-
.../viewerCmp/viewerCmp.template.html | 4 +-
4 files changed, 56 insertions(+), 4 deletions(-)
create mode 100644 src/viewerModule/threeSurfer/lifecycle/lifecycle.component.ts
diff --git a/src/viewerModule/threeSurfer/lifecycle/lifecycle.component.ts b/src/viewerModule/threeSurfer/lifecycle/lifecycle.component.ts
new file mode 100644
index 000000000..0130b932c
--- /dev/null
+++ b/src/viewerModule/threeSurfer/lifecycle/lifecycle.component.ts
@@ -0,0 +1,47 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { merge } from "rxjs";
+import { debounceTime, mapTo } from "rxjs/operators";
+import { atlasSelection } from "src/state";
+import { TViewerEvent } from "src/viewerModule/viewer.interface";
+
+/**
+ * TODO this compnent destroys and recreates thresurfer on parc change
+ * ideally, this should be handlable in three surfer component
+ * need to refactor threesurfer glu cmp to be more declarative
+ */
+
+@Component({
+ selector: 'tmp-threesurfer-lifecycle',
+ template: `
+ <three-surfer-glue-cmp
+ *ngIf="showThreeSurfer$ | async"
+ (viewerEvent)="handleViewerEvent($event)">
+ </three-surfer-glue-cmp>
+ `
+})
+
+export class TmpThreeSurferLifeCycle{
+ @Output()
+ viewerEvent = new EventEmitter<TViewerEvent<"threeSurfer">>()
+ handleViewerEvent(ev: TViewerEvent<"threeSurfer">){
+ this.viewerEvent.emit(ev)
+ }
+
+ constructor(private store: Store){
+
+ }
+
+ #onATP = this.store.pipe(
+ atlasSelection.fromRootStore.distinctATP()
+ )
+ showThreeSurfer$ = merge(
+ this.#onATP.pipe(
+ mapTo(false)
+ ),
+ this.#onATP.pipe(
+ debounceTime(160),
+ mapTo(true)
+ )
+ )
+}
diff --git a/src/viewerModule/threeSurfer/module.ts b/src/viewerModule/threeSurfer/module.ts
index 7a1f1c3e3..dd1251915 100644
--- a/src/viewerModule/threeSurfer/module.ts
+++ b/src/viewerModule/threeSurfer/module.ts
@@ -9,6 +9,7 @@ import { ThreeSurferGlueCmp } from "./threeSurferGlue/threeSurfer.component";
import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.component";
import { nameSpace, reducer, ThreeSurferEffects } from "./store"
import { EffectsModule } from "@ngrx/effects";
+import { TmpThreeSurferLifeCycle } from "./lifecycle/lifecycle.component";
@NgModule({
imports: [
@@ -28,9 +29,10 @@ import { EffectsModule } from "@ngrx/effects";
declarations: [
ThreeSurferGlueCmp,
ThreeSurferViewerConfig,
+ TmpThreeSurferLifeCycle,
],
exports: [
- ThreeSurferGlueCmp,
+ TmpThreeSurferLifeCycle,
]
})
diff --git a/src/viewerModule/threeSurfer/store/effects.ts b/src/viewerModule/threeSurfer/store/effects.ts
index 55a49c19c..501107552 100644
--- a/src/viewerModule/threeSurfer/store/effects.ts
+++ b/src/viewerModule/threeSurfer/store/effects.ts
@@ -41,7 +41,10 @@ export class ThreeSurferEffects {
private threeSurferBaseCustomLayers$: Observable<ThreeSurferCustomLayer[]> = this.store.pipe(
select(atlasAppearance.selectors.customLayers),
map(
- cl => cl.filter(layer => layer.clType === "baselayer/threesurfer") as ThreeSurferCustomLayer[]
+ cl => cl.filter(layer =>
+ layer.clType === "baselayer/threesurfer" ||
+ layer.clType === "baselayer/threesurfer-label"
+ ) as ThreeSurferCustomLayer[]
)
)
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 48572be29..fb1ca0018 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -430,10 +430,10 @@
</iav-cmp-viewer-nehuba-glue>
<!-- three surfer (free surfer viewer) -->
- <three-surfer-glue-cmp class="d-block w-100 h-100 position-absolute left-0 tosxplr-p-0"
+ <tmp-threesurfer-lifecycle class="d-block w-100 h-100 position-absolute left-0 tosxplr-p-0"
*ngSwitchCase="'threeSurfer'"
(viewerEvent)="handleViewerEvent($event)">
- </three-surfer-glue-cmp>
+ </tmp-threesurfer-lifecycle>
<!-- if not supported, show not supported message -->
<div *ngSwitchCase="'notsupported'">Template not supported by any of the viewers</div>
--
GitLab