diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 30d2353b5ca0b71dbccca9ab7f1ebc0135ab4aad..1b2a8c6005c7d5747a1ad6b288f59892501dd5e8 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -42,6 +42,8 @@ import { SlServiceService } from "src/spotlight/sl-service.service";
import { PureContantService } from "src/util";
import { viewerStateSetSelectedRegions, viewerStateRemoveAdditionalLayer, viewerStateSelectParcellation } from "src/services/state/viewerState.store.helper";
import { viewerStateGetOverlayingAdditionalParcellations, viewerStateParcVersionSelector } from "src/services/state/viewerState/selectors";
+import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState/selectors";
+import { ngViewerActionClearView } from "src/services/state/ngViewerState/actions";
/**
* TODO
@@ -114,6 +116,16 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
select(viewerStateParcVersionSelector),
)
+ private selectedParcellation$: Observable<any>
+ public selectedParcellation: any
+
+ private cookieDialogRef: MatDialogRef<any>
+ private kgTosDialogRef: MatDialogRef<any>
+
+ public clearViewKeys$ = this.store.pipe(
+ select(ngViewerSelectorClearViewEntries)
+ )
+
constructor(
private store: Store<IavRootStoreInterface>,
private widgetServices: WidgetServices,
@@ -224,12 +236,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
}
}
- private selectedParcellation$: Observable<any>
- public selectedParcellation: any
-
- private cookieDialogRef: MatDialogRef<any>
- private kgTosDialogRef: MatDialogRef<any>
-
public ngOnInit() {
this.meetsRequirement = this.meetsRequirements()
@@ -366,6 +372,21 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
})
}
+ /**
+ * For completeness sake. Root element should never be destroyed.
+ */
+ public ngOnDestroy() {
+ this.subscriptions.forEach(s => s.unsubscribe())
+ }
+
+ public unsetClearViewByKey(key: string){
+ this.store.dispatch(
+ ngViewerActionClearView({ payload: {
+ [key]: false
+ }})
+ )
+ }
+
public selectParcellation(parc: any) {
this.store.dispatch(
viewerStateSelectParcellation({
@@ -413,13 +434,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
}
- /**
- * For completeness sake. Root element should never be destroyed.
- */
- public ngOnDestroy() {
- this.subscriptions.forEach(s => s.unsubscribe())
- }
-
/**
* perhaps move this to constructor?
*/
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index d9e76c0a2f551b455974e73ef675dfee90d1f5cb..5a000c2f493a8de1f60684d85d23b70f4c6e21e8 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -84,8 +84,7 @@
<atlas-layer-selector
#alSelector="atlasLayerSelector"
class="pe-all"
- (iav-outsideClick)="alSelector.selectorExpanded = false"
- (closeAccordion)="uiNehubaContainer.accordionOpened = ''">
+ (iav-outsideClick)="alSelector.selectorExpanded = false">
</atlas-layer-selector>
<mat-chip-list class="mb-2">
<!-- additional layer -->
@@ -259,17 +258,17 @@
</mat-icon>
</mat-chip>
- <mat-chip *ngIf="(overwrittenColorMap$ | async) === 'connectivity' && !previewDirective.active"
- (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
- class="pe-all position-relative ml-8-n">
+ <mat-chip *ngFor="let key of clearViewKeys$ | async"
+ (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
+ class="pe-all position-relative ml-8-n">
<span class="pl-4">
- Connectivity
+ {{ key }}
</span>
- <mat-icon
- (click)="uiNehubaContainer.accordionOpened = ''"
- fontSet="fas"
- iav-stop="click"
- fontIcon="fa-times">
+ <mat-icon (click)="unsetClearViewByKey(key)"
+ fontSet="fas"
+ iav-stop="click"
+ fontIcon="fa-times">
+
</mat-icon>
</mat-chip>
</ng-container>
diff --git a/src/glue.spec.ts b/src/glue.spec.ts
index 884bd388c157828242473ec9fbc49772aa398345..60fc226caabed63a8d90fdf7202cc7866ac8036a 100644
--- a/src/glue.spec.ts
+++ b/src/glue.spec.ts
@@ -1,4 +1,4 @@
-import { TestBed, tick, fakeAsync } from "@angular/core/testing"
+import { TestBed, tick, fakeAsync, discardPeriodicTasks, flush } from "@angular/core/testing"
import { DatasetPreviewGlue, glueSelectorGetUiStatePreviewingFiles, glueActionRemoveDatasetPreview, datasetPreviewMetaReducer, glueActionAddDatasetPreview, GlueEffects } from "./glue"
import { ACTION_TO_WIDGET_TOKEN, EnumActionToWidget } from "./widget"
import { provideMockStore, MockStore } from "@ngrx/store/testing"
@@ -262,6 +262,8 @@ describe('> glue.ts', () => {
// debounce at 100ms
tick(200)
ctrl.expectNone({})
+
+ discardPeriodicTasks()
}))
it('> on set state, calls end point to fetch full data', fakeAsync(() => {
@@ -281,6 +283,7 @@ describe('> glue.ts', () => {
const req = ctrl.expectOne(`${DS_PREVIEW_URL}/${encodeURIComponent('minds/core/dataset/v1.0.0')}/${datasetId}/${encodeURIComponent(filename)}`)
req.flush(nifti)
+ discardPeriodicTasks()
}))
it('> on previewing nifti, thresholds, colormap and remove bg flag set properly', fakeAsync(() => {
@@ -309,12 +312,14 @@ describe('> glue.ts', () => {
const req = ctrl.expectOne(`${DS_PREVIEW_URL}/${encodeURIComponent('minds/core/dataset/v1.0.0')}/${datasetId}/${encodeURIComponent(filename)}`)
req.flush(nifti)
+ tick(200)
const { name, volumeMetadata } = nifti
const { min, max } = volumeMetadata
expect(highThresholdMapSpy).toHaveBeenCalledWith(name, max)
expect(lowThresholdMapSpy).toHaveBeenCalledWith(name, min)
expect(colorMapMapSpy).toHaveBeenCalledWith(name, EnumColorMapName.VIRIDIS)
expect(bgFlagSpy).toHaveBeenCalledWith(name, true)
+ discardPeriodicTasks()
}))
it('> if returns 404, should be handled gracefully', fakeAsync(() => {
@@ -333,6 +338,7 @@ describe('> glue.ts', () => {
req.flush(null, { status: 404, statusText: 'Not found' })
expect(expectedVal).toBeNull()
+ discardPeriodicTasks()
}))
})
@@ -351,6 +357,7 @@ describe('> glue.ts', () => {
})
tick(200)
expect(actionOnWidgetSpy).not.toHaveBeenCalled()
+ discardPeriodicTasks()
}))
it('> correctly calls actionOnWidgetSpy on create', fakeAsync(() => {
@@ -377,7 +384,7 @@ describe('> glue.ts', () => {
const [ type, cmp, option, ...rest ] = args[0]
expect(type).toEqual(EnumActionToWidget.OPEN)
-
+ discardPeriodicTasks()
}))
it('> correctly calls actionOnWidgetSpy twice when needed', fakeAsync(() => {
@@ -423,6 +430,7 @@ describe('> glue.ts', () => {
expect(cmp0).toBeTruthy()
expect(cmp0).toBe(cmp1)
+ discardPeriodicTasks()
}))
it('> correctly calls actionOnWidgetSpy on change of state', fakeAsync(() => {
@@ -472,6 +480,7 @@ describe('> glue.ts', () => {
expect(type1).toEqual(EnumActionToWidget.CLOSE)
expect(cmp1).toBe(null)
expect(option1.id).toEqual(mockActionOnSpyReturnVal1.id)
+ discardPeriodicTasks()
}))
@@ -493,6 +502,7 @@ describe('> glue.ts', () => {
req.flush(nifti)
expect(actionOnWidgetSpy).not.toHaveBeenCalled()
+ discardPeriodicTasks()
}))
})
@@ -520,6 +530,8 @@ describe('> glue.ts', () => {
a: region1.originDatasets
})
)
+
+ discardPeriodicTasks()
}))
it('> when regions are selected without originDatasets, emits empty array', () => {
@@ -575,6 +587,8 @@ describe('> glue.ts', () => {
a: expectedOriginDatasets
})
)
+
+ discardPeriodicTasks()
}))
it('> if regions with multiple originDatasets are selected, emit array containing all origindatasets', fakeAsync(() => {
@@ -627,6 +641,7 @@ describe('> glue.ts', () => {
a: expectedOriginDatasets
})
)
+ discardPeriodicTasks()
}))
})
@@ -672,6 +687,8 @@ describe('> glue.ts', () => {
} ]
})
)
+
+ discardPeriodicTasks()
}))
})
@@ -721,6 +738,7 @@ describe('> glue.ts', () => {
)
tick(200)
+ discardPeriodicTasks()
}))
})
@@ -757,6 +775,7 @@ describe('> glue.ts', () => {
)
tick(200)
+ discardPeriodicTasks()
}))
})
@@ -765,7 +784,10 @@ describe('> glue.ts', () => {
const store = TestBed.inject(MockStore)
const overridenSelector = store.overrideSelector(ngViewerSelectorClearView, true)
- const overridenSelector$ = hot('ab', {
+ /**
+ * skips first false
+ */
+ const overridenSelector$ = hot('bab', {
a: true,
b: false
})
@@ -792,7 +814,7 @@ describe('> glue.ts', () => {
})
expect(glue.onClearviewAddPreview$).toBeObservable(
- hot('-a', {
+ hot('--a', {
a: [{
...nifti,
filename: region1.originDatasets[0].filename,
@@ -803,6 +825,7 @@ describe('> glue.ts', () => {
)
tick(200)
+ discardPeriodicTasks()
}))
})
})
diff --git a/src/glue.ts b/src/glue.ts
index baeec8147471140a1d996df961d774387cdc1ad0..4cac5d819d134b19a9fcf0a74bcb22983772a8ca 100644
--- a/src/glue.ts
+++ b/src/glue.ts
@@ -3,7 +3,7 @@ import { OnDestroy, Injectable, Optional, Inject, InjectionToken } from "@angula
import { PreviewComponentWrapper, DatasetPreview, determinePreviewFileType, EnumPreviewFileTypes, IKgDataEntry, getKgSchemaIdFromFullId } from "./ui/databrowserModule/pure"
import { Subscription, Observable, forkJoin, of, merge } from "rxjs"
import { select, Store, ActionReducer, createAction, props, createSelector, Action } from "@ngrx/store"
-import { startWith, map, shareReplay, pairwise, debounceTime, distinctUntilChanged, tap, switchMap, withLatestFrom, mapTo, switchMapTo, filter, skip, catchError } from "rxjs/operators"
+import { startWith, map, shareReplay, pairwise, debounceTime, distinctUntilChanged, tap, switchMap, withLatestFrom, mapTo, switchMapTo, filter, skip, catchError, bufferTime } from "rxjs/operators"
import { TypeActionToWidget, EnumActionToWidget, ACTION_TO_WIDGET_TOKEN } from "./widget"
import { getIdObj } from 'common/util'
import { MatDialogRef } from "@angular/material/dialog"
@@ -16,6 +16,7 @@ import { EnumColorMapName } from "./util/colorMaps"
import { Effect } from "@ngrx/effects"
import { viewerStateSelectedRegionsSelector, viewerStateSelectedTemplateSelector, viewerStateSelectedParcellationSelector } from "./services/state/viewerState/selectors"
import { ngViewerSelectorClearView } from "./services/state/ngViewerState/selectors"
+import { ngViewerActionClearView } from './services/state/ngViewerState/actions'
const PREVIEW_FILE_TYPES_NO_UI = [
EnumPreviewFileTypes.NIFTI,
@@ -99,6 +100,20 @@ export class GlueEffects {
}))
)
+ @Effect()
+ resetConnectivityMode: Observable<any> = this.store$.pipe(
+ select(viewerStateSelectedRegionsSelector),
+ pairwise(),
+ filter(([o, n]) => o.length > 0 && n.length === 0),
+ mapTo(
+ ngViewerActionClearView({
+ payload: {
+ 'Connectivity': false
+ }
+ })
+ )
+ )
+
constructor(
private store$: Store<any>
){
@@ -248,6 +263,7 @@ export class DatasetPreviewGlue implements IDatasetPreviewGlue, OnDestroy{
select(ngViewerSelectorClearView),
distinctUntilChanged(),
filter(val => !val),
+ skip(1),
mapTo(arr)
))
)
@@ -350,6 +366,38 @@ export class DatasetPreviewGlue implements IDatasetPreviewGlue, OnDestroy{
)
).pipe(
map(prvFilterNull),
+ bufferTime(15),
+ map(arr => {
+ const prvToDismiss = []
+ const prvToShow = []
+
+ const showPrvIds = new Set()
+ const dismissPrvIds = new Set()
+
+ for (const { prvToDismiss: dismisses, prvToShow: shows } of arr) {
+ for (const dismiss of dismisses) {
+
+ const id = DatasetPreviewGlue.GetDatasetPreviewId(dismiss)
+ if (!dismissPrvIds.has(id)) {
+ dismissPrvIds.add(id)
+ prvToDismiss.push(dismiss)
+ }
+ }
+
+ for (const show of shows) {
+ const id = DatasetPreviewGlue.GetDatasetPreviewId(show)
+ if (!dismissPrvIds.has(id) && !showPrvIds.has(id)) {
+ showPrvIds.add(id)
+ prvToShow.push(show)
+ }
+ }
+ }
+
+ return {
+ prvToDismiss,
+ prvToShow
+ }
+ }),
withLatestFrom(this.store$.pipe(
select(state => state?.viewerState?.templateSelected || null),
distinctUntilChanged(),
diff --git a/src/services/state/ngViewerState/selectors.spec.ts b/src/services/state/ngViewerState/selectors.spec.ts
index 0ad0df3afbb2a740f7eb82250c9c2b6426243bb0..c44f676f86802ee790f4b7e291e7e79c50ccb849 100644
--- a/src/services/state/ngViewerState/selectors.spec.ts
+++ b/src/services/state/ngViewerState/selectors.spec.ts
@@ -1,36 +1,27 @@
-import { ngViewerSelectorClearView } from './selectors'
+import { ngViewerSelectorClearViewEntries } from './selectors'
let clearViewQueue = {}
describe('> ngViewerState/selectors.ts', () => {
- describe('> ngViewerSelectorClearView', () => {
+ describe('> ngViewerSelectorClearViewEntries', () => {
beforeEach(() => {
clearViewQueue = {}
})
describe('> when prop is not provided', () => {
it('> if clearViewQueue is empty (on startup)', () => {
- const result = ngViewerSelectorClearView.projector(clearViewQueue)
- expect(result).toEqual(false)
+ const result = ngViewerSelectorClearViewEntries.projector(clearViewQueue)
+ expect(result).toEqual([])
})
it('> if clearViewQueue is non empty, but falsy, should return false', () => {
clearViewQueue['hello - world'] = null
clearViewQueue['oo bar'] = false
- const result = ngViewerSelectorClearView.projector(clearViewQueue)
- expect(result).toEqual(false)
+ const result = ngViewerSelectorClearViewEntries.projector(clearViewQueue)
+ expect(result).toEqual([])
})
it('> if clearViewQueue is non empty and truthy, should return true', () => {
clearViewQueue['hello - world'] = 1
- const result = ngViewerSelectorClearView.projector(clearViewQueue)
- expect(result).toEqual(true)
- })
- })
- describe('> when prop is provided', () => {
- it('> only provides clear view status of the required', () => {
- clearViewQueue['hello - world'] = 1
- const result0 = ngViewerSelectorClearView.projector(clearViewQueue, { id: 'hello - world' })
- const result1 = ngViewerSelectorClearView.projector(clearViewQueue, { id: 'foo bar' })
- expect(result0).toEqual(true)
- expect(result1).toEqual(false)
+ const result = ngViewerSelectorClearViewEntries.projector(clearViewQueue)
+ expect(result).toEqual(['hello - world'])
})
})
})
diff --git a/src/services/state/ngViewerState/selectors.ts b/src/services/state/ngViewerState/selectors.ts
index 34b0305f1a88ac7055be0e9220d3a2fd860d4406..85b992c44c585e5d75b997ba69f8ea908a935275 100644
--- a/src/services/state/ngViewerState/selectors.ts
+++ b/src/services/state/ngViewerState/selectors.ts
@@ -1,16 +1,17 @@
import { createSelector } from "@ngrx/store";
-export const ngViewerSelectorClearView = createSelector(
+export const ngViewerSelectorClearViewEntries = createSelector(
(state: any) => state?.ngViewerState?.clearViewQueue,
- (clearViewQueue, props) => {
-
- if (!!props && !!props.id) {
- for (const key in clearViewQueue) {
- if (key === props.id) return !!clearViewQueue[key]
- }
- return false
- } else {
- return Object.keys(clearViewQueue).some(key => !!clearViewQueue[key])
+ (clearViewQueue = {}) => {
+ const returnKeys = []
+ for (const key in clearViewQueue) {
+ if (!!clearViewQueue[key]) returnKeys.push(key)
}
+ return returnKeys
}
)
+
+export const ngViewerSelectorClearView = createSelector(
+ ngViewerSelectorClearViewEntries,
+ keys => keys.length > 0
+)
diff --git a/src/services/state/viewerState/selectors.ts b/src/services/state/viewerState/selectors.ts
index 8c6bd83804c95354905e3e07d0d3516edde66404..60ad71c1ad1a288fe351c76d02935760a63f5ca3 100644
--- a/src/services/state/viewerState/selectors.ts
+++ b/src/services/state/viewerState/selectors.ts
@@ -27,6 +27,22 @@ export const viewerStateSelectedParcellationSelector = createSelector(
viewerState => viewerState['parcellationSelected']
)
+export const viewerStateAllRegionsFlattenedRegionSelector = createSelector(
+ viewerStateSelectedParcellationSelector,
+ parc => {
+ const returnArr = []
+ const processRegion = region => {
+ const { children, ...rest } = region
+ returnArr.push({ ...rest })
+ region.children && Array.isArray(region.children) && region.children.forEach(processRegion)
+ }
+ if (parc && parc.regions && Array.isArray(parc.regions)) {
+ parc.regions.forEach(processRegion)
+ }
+ return returnArr
+ }
+)
+
export const viewerStateGetOverlayingAdditionalParcellations = createSelector(
state => state[viewerStateHelperStoreName],
state => state['viewerState'],
diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts
index d103ef97f9e2e9e64e374cdcb7f24d854a325abe..af2558291cf788adc461fee55246ee886dcb36a0 100644
--- a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts
+++ b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts
@@ -37,8 +37,6 @@ export class AtlasLayerSelector implements OnInit {
public containerMaxWidth: number
- @Output() public closeAccordion: EventEmitter<boolean> = new EventEmitter()
-
constructor(private store$: Store<any>) {
this.selectedAtlas$ = this.store$.pipe(
select(viewerStateGetSelectedAtlas),
@@ -160,9 +158,6 @@ export class AtlasLayerSelector implements OnInit {
}
selectTemplateWithName(template) {
- this.closeAccordion.emit()
- this.store$.dispatch({type: CLEAR_CONNECTIVITY_REGION})
- this.store$.dispatch({type: SET_CONNECTIVITY_VISIBLE, payload: null})
this.store$.dispatch(
viewerStateSelectTemplateWithId({ payload: template })
)
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index c966045c87c6f81c94cdafafcc0df78b39edab6e..682aed5c210552eab1a18a75dd38c9bd6552978e 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -1,71 +1,102 @@
import {
- AfterContentChecked,
AfterViewInit, ChangeDetectorRef,
Component,
- ElementRef, EventEmitter, Input,
- OnDestroy, Output,
+ ElementRef,
+ EventEmitter,
+ OnDestroy,
+ Output,
ViewChild,
+ Input,
} from "@angular/core";
import {select, Store} from "@ngrx/store";
-import {fromEvent, Observable, Subscription} from "rxjs";
-import {distinctUntilChanged, filter, map, shareReplay} from "rxjs/operators";
+import {fromEvent, Observable, Subscription, Subject, combineLatest} from "rxjs";
+import {distinctUntilChanged, map } from "rxjs/operators";
import {CLEAR_CONNECTIVITY_REGION, SELECT_REGIONS, SET_CONNECTIVITY_VISIBLE} from "src/services/state/viewerState.store";
-import {isDefined, safeFilter} from "src/services/stateStore.service";
+import { safeFilter} from "src/services/stateStore.service";
import { viewerStateNavigateToRegion } from "src/services/state/viewerState.store.helper";
+import { ngViewerActionClearView } from "src/services/state/ngViewerState/actions";
+import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState/selectors";
+import { viewerStateAllRegionsFlattenedRegionSelector } from "src/services/state/viewerState/selectors";
+
+const CONNECTIVITY_NAME_PLATE = 'Connectivity'
@Component({
selector: 'connectivity-browser',
templateUrl: './connectivityBrowser.template.html',
})
-export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, AfterContentChecked {
+export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy{
+
+ private setColorMap$: Subject<boolean> = new Subject()
+
+ /**
+ * accordion expansion should only toggle the clearviewqueue state
+ * which should be the single source of truth
+ * setcolormaps$ is set by the presence/absence of clearviewqueue[CONNECTIVITY_NAME_PLATE]
+ */
+ private _isFirstUpdate = true
+
+ @Input()
+ set accordionExpanded(flag: boolean){
+ /**
+ * ignore first update
+ */
+ if (this._isFirstUpdate) {
+ this._isFirstUpdate = false
+ return
+ }
+ this.store$.dispatch(
+ ngViewerActionClearView({ payload: {
+ [CONNECTIVITY_NAME_PLATE]: flag
+ }})
+ )
+ }
+
+ @Output()
+ setOpenState: EventEmitter<boolean> = new EventEmitter()
+
+ @Input()
+ set region(val){
+ const newRegionName = val && val.name
- public region: string
+ if (!val) {
+ this.store$.dispatch({
+ type: SET_CONNECTIVITY_VISIBLE,
+ payload: false,
+ })
+ return
+ }
+
+ if (newRegionName !== this.regionName && this.defaultColorMap) {
+ this.restoreDefaultColormap()
+ }
+ this.regionName = newRegionName
+
+ // TODO may not be necessary
+ this.changeDetectionRef.detectChanges()
+ }
+
+ public regionName: string
public datasetList: any[] = []
public selectedDataset: any
public connectedAreas = []
- public componentHeight: any
- public showConnectivityToggle: boolean = false
-
- private connectivityRegion$: Observable<any>
- private templateSelected$: Observable<any>
- private selectedParcellation$: Observable<any>
+
+ private selectedParcellationFlatRegions$ = this.store$.pipe(
+ select(viewerStateAllRegionsFlattenedRegionSelector)
+ )
public overwrittenColorMap$: Observable<any>
private subscriptions: Subscription[] = []
public expandMenuIndex = -1
public allRegions = []
public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>>
- public math = Math
@ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef<HTMLHbpConnectivityMatrixRowElement>
@ViewChild('fullConnectivityGrid') public fullConnectivityGridElement: ElementRef<HTMLFullConnectivityGridElement>
- @Output() public closeConnectivity: EventEmitter<boolean> = new EventEmitter()
- @Output() public connectedAreaCount: EventEmitter<number> = new EventEmitter()
-
constructor(
private store$: Store<any>,
private changeDetectionRef: ChangeDetectorRef,
) {
- this.selectedParcellation$ = this.store$.pipe(
- select('viewerState'),
- filter(state => isDefined(state) && isDefined(state.parcellationSelected)),
- map(state => state.parcellationSelected),
- distinctUntilChanged(),
- )
-
- this.connectivityRegion$ = this.store$.pipe(
- select('viewerState'),
- safeFilter('connectivityRegion'),
- map(state => state.connectivityRegion),
- distinctUntilChanged()
- )
-
- this.templateSelected$ = this.store$.pipe(
- select('viewerState'),
- select('templateSelected'),
- shareReplay(1)
- )
this.overwrittenColorMap$ = this.store$.pipe(
select('viewerState'),
@@ -75,49 +106,66 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
)
}
- public ngAfterContentChecked(): void {
- this.componentHeight = this.connectivityComponentElement?.nativeElement.clientHeight
- }
-
public ngAfterViewInit(): void {
+
this.subscriptions.push(
- this.selectedParcellation$.subscribe(parcellation => {
- this.closeConnectivityView(false)
- if (parcellation && parcellation.hasAdditionalViewMode && parcellation.hasAdditionalViewMode.includes('connectivity')) {
- if (parcellation.regions && parcellation.regions.length) {
- this.allRegions = []
- this.getAllRegionsFromParcellation(parcellation.regions)
- }
- }
+ this.store$.pipe(
+ select(ngViewerSelectorClearViewEntries),
+ ).subscribe(keys => {
+ this.setColorMap$.next(keys.includes(CONNECTIVITY_NAME_PLATE))
+ })
+ )
+
+ this.subscriptions.push(
+ this.store$.pipe(
+ select(ngViewerSelectorClearViewEntries),
+ ).subscribe(keys => {
+ this.setOpenState.emit(keys.includes(CONNECTIVITY_NAME_PLATE))
+ })
+ )
+
+ this.subscriptions.push(
+ this.selectedParcellationFlatRegions$.subscribe(flattenedRegions => {
+ this.defaultColorMap = null
+ this.allRegions = flattenedRegions
}),
- this.connectivityRegion$.subscribe(cr => {
- if (cr && cr.length) {
- if (this.region !== cr && this.defaultColorMap) {
- this.closeConnectivityView()
- }
- this.region = cr
- this.changeDetectionRef.detectChanges()
- } else {
+ )
+
+ /**
+ * setting/restoring colormap
+ */
+ this.subscriptions.push(
+ combineLatest(
+ this.setColorMap$.pipe(
+ distinctUntilChanged()
+ ),
+ fromEvent(this.connectivityComponentElement.nativeElement, 'connectivityDataReceived').pipe(
+ map((e: CustomEvent) => e.detail)
+ )
+ ).subscribe(([flag, connectedAreas]) => {
+
+ this.connectedAreas = connectedAreas
+
+ if (flag) {
+ this.addNewColorMap()
this.store$.dispatch({
type: SET_CONNECTIVITY_VISIBLE,
- payload: false,
+ payload: 'connectivity',
})
+ } else {
+ this.restoreDefaultColormap()
+
+ /**
+ * TODO
+ * may no longer be necessary
+ */
+ this.store$.dispatch({type: CLEAR_CONNECTIVITY_REGION})
+ this.store$.dispatch({type: SET_CONNECTIVITY_VISIBLE, payload: null})
}
- }),
+ })
)
- this.subscriptions.push(this.overwrittenColorMap$.subscribe(ocm => {
- this.showConnectivityToggle = ocm === 'connectivity'? true : false
- }))
+
this.subscriptions.push(
- fromEvent(this.connectivityComponentElement?.nativeElement, 'connectivityDataReceived', { capture: true })
- .subscribe((e: CustomEvent) => {
- this.connectedAreas = e.detail
- this.connectedAreaCount.emit(this.connectedAreas.length)
- if (this.connectedAreas.length > 0 && this.showConnectivityToggle) {
- this.addNewColorMap()
- } else {
- this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
- } }),
fromEvent(this.connectivityComponentElement?.nativeElement, 'collapsedMenuChanged', { capture: true })
.subscribe((e: CustomEvent) => {
this.expandMenuIndex = e.detail
@@ -133,26 +181,14 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
// ToDo Fix in future to use component
const a = document.querySelector('hbp-connectivity-matrix-row')
a.downloadCSV()
- } else if (e.detail.name === 'Apply colors to viewer') {
- this.defaultColorMap && this.toggleConnectivityOnViewer( {checked: this.showConnectivityToggle? false : true})
}
}),
)
- this.showConnectivityToggle = true
}
- toggleConnectivityOnViewer(event) {
- if (event.checked) {
- this.showConnectivityToggle = true
- this.addNewColorMap()
- } else {
- this.showConnectivityToggle = false
- if (this.defaultColorMap) this.setDefaultMap()
- this.store$.dispatch({
- type: SET_CONNECTIVITY_VISIBLE,
- payload: null,
- })
- }
+ public ngOnDestroy(): void {
+ this.restoreDefaultColormap()
+ this.subscriptions.forEach(s => s.unsubscribe())
}
// ToDo Affect on component
@@ -160,10 +196,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
this.selectedDataset = event.value
}
- public ngOnDestroy(): void {
- this.subscriptions.forEach(s => s.unsubscribe())
- }
-
navigateToRegion(region) {
this.store$.dispatch(
viewerStateNavigateToRegion({
@@ -183,29 +215,12 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
return this.allRegions.find(ar => ar.name === region)
}
- public closeConnectivityView(setDefault = true) {
- if (this.defaultColorMap && setDefault) this.setDefaultMap()
- this.closeConnectivity.emit()
- this.store$.dispatch({
- type: SET_CONNECTIVITY_VISIBLE,
- payload: null,
- })
- }
-
- public setDefaultMap() {
- this.allRegions.forEach(r => {
- if (r && r.ngId && r.rgb && this.defaultColorMap) {
- this.defaultColorMap.get(r.ngId).set(r.labelIndex, {red: r.rgb[0], green: r.rgb[1], blue: r.rgb[2]})
- }
- })
+ public restoreDefaultColormap() {
+ if (!this.defaultColorMap) return
getWindow().interactiveViewer.viewerHandle.applyLayersColourMap(this.defaultColorMap)
}
public addNewColorMap() {
- this.store$.dispatch({
- type: SET_CONNECTIVITY_VISIBLE,
- payload: 'connectivity',
- })
this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
const existingMap: Map<string, Map<number, {red: number, green: number, blue: number}>> = (getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
@@ -229,15 +244,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
getWindow().interactiveViewer.viewerHandle.applyLayersColourMap(colorMap)
}
- public getAllRegionsFromParcellation = (regions) => {
- for (const region of regions) {
- if (region.children && region.children.length) {
- this.getAllRegionsFromParcellation(region.children)
- } else {
- this.allRegions.push(region)
- }
- }
- }
exportConnectivityProfile() {
const a = document.querySelector('hbp-connectivity-matrix-row')
a.downloadCSV()
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
index 65d3fbf62b44f6ee3e218b58e4328cdc0255c693..776848eba9f58ff48085acc0402ba7f77b197d0f 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -1,8 +1,8 @@
<div class="w-100 h-100 d-block d-flex flex-column pb-2">
<hbp-connectivity-matrix-row
#connectivityComponent
- *ngIf="region"
- [region]="region"
+ *ngIf="regionName"
+ [region]="regionName"
theme="dark"
loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
dataset-url="https://connectivityquery-connectivity.apps-dev.hbp.eu/studies"
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 7a56478cd392f44b3ec629538d6645af3a3f5923..ac456e0dbd3440614d9fb8c00c2cdbba343fbb6b 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -14,19 +14,17 @@ import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
import { compareLandmarksChanged } from "src/util/constants";
import { PureContantService } from "src/util";
import { ARIA_LABELS, IDS } from 'common/constants'
-import { ngViewerActionSetPerspOctantRemoval, PANELS, ngViewerActionToggleMax, ngViewerActionAddNgLayer, ngViewerActionRemoveNgLayer, ngViewerActionClearView } from "src/services/state/ngViewerState.store.helper";
+import { ngViewerActionSetPerspOctantRemoval, PANELS, ngViewerActionToggleMax, ngViewerActionAddNgLayer, ngViewerActionRemoveNgLayer } from "src/services/state/ngViewerState.store.helper";
import { viewerStateSelectRegionWithIdDeprecated, viewerStateAddUserLandmarks, viewreStateRemoveUserLandmarks } from 'src/services/state/viewerState.store.helper'
import { SwitchDirective } from "src/util/directives/switch.directive";
import {
- viewerStateSetConnectivityRegion,
viewerStateDblClickOnViewer,
} from "src/services/state/viewerState.store.helper";
-import { getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThree, calculateSliceZoomFactor, scanSliceViewRenderFn as scanFn, isFirstRow, isFirstCell } from "./util";
+import { getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThree, calculateSliceZoomFactor, scanSliceViewRenderFn as scanFn } from "./util";
import { NehubaViewerContainerDirective } from "./nehubaViewerInterface/nehubaViewerInterface.directive";
import { ITunableProp } from "./mobileOverlay/mobileOverlay.component";
import {ConnectivityBrowserComponent} from "src/ui/connectivityBrowser/connectivityBrowser.component";
-import {CLEAR_CONNECTIVITY_REGION, SET_CONNECTIVITY_VISIBLE} from "src/services/state/viewerState.store";
const { MESH_LOADING_STATUS } = IDS
@@ -252,7 +250,6 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
public hoveredPanelIndices$: Observable<number>
@ViewChild('connectivityComponent') public connectivityComponent: ConnectivityBrowserComponent
- public accordionOpened: string = ''
constructor(
private pureConstantService: PureContantService,
@@ -739,10 +736,6 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
)
this.subscriptions.push(this.selectedRegions$.subscribe(sr => {
- if (sr?.length >= 1) this.setConnectivityRegion(sr[0].name)
- else {
- this.disableConnectivity()
- }
this.selectedRegions = sr
}))
@@ -809,41 +802,6 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
this.currOnHoverObsSub = this.currentOnHoverObs$.subscribe(({ segments }) => this.onHoverSegments$.next(segments))
}
}
-
- setConnectivityRegion(regionName) {
- this.store.dispatch(viewerStateSetConnectivityRegion({ connectivityRegion: regionName }))
- }
-
- public disableConnectivity() {
- this.store.dispatch({type: CLEAR_CONNECTIVITY_REGION})
- this.store.dispatch({type: SET_CONNECTIVITY_VISIBLE, payload: null})
- if (this.accordionOpened === 'Connectivity') this.connectivityComponent.toggleConnectivityOnViewer(false)
- }
-
- sidebarAccordionOpened(title) {
- switch (title) {
- case 'Connectivity': {
- this.connectivityComponent?.toggleConnectivityOnViewer( {checked: true})
- break
- }}
- this.store.dispatch(
- ngViewerActionClearView({ payload: {
- ['connectivity-shown']: true
- } })
- )
- }
- sidebarAccordionClosed(title) {
- switch (title) {
- case 'Connectivity': {
- this.connectivityComponent?.toggleConnectivityOnViewer( {checked: false})
- break
- }}
- this.store.dispatch(
- ngViewerActionClearView({ payload: {
- ['connectivity-shown']: false
- } })
- )
- }
public ngOnDestroy() {
this.subscriptions.forEach(s => s.unsubscribe())
@@ -1027,7 +985,18 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
}))
},
segmentColourMap : new Map(),
- getLayersSegmentColourMap: () => this.nehubaViewer.multiNgIdColorMap,
+ getLayersSegmentColourMap: () => {
+ const newMainMap = new Map()
+ for (const [key, colormap] of this.nehubaViewer.multiNgIdColorMap.entries()) {
+ const newColormap = new Map()
+ newMainMap.set(key, newColormap)
+
+ for (const [lableIndex, entry] of colormap.entries()) {
+ newColormap.set(lableIndex, JSON.parse(JSON.stringify(entry)))
+ }
+ }
+ return newMainMap
+ },
applyColourMap : (_map) => {
throw new Error(`apply color map has been deprecated. use applyLayersColourMap instead`)
},
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index a101fd063b4a31ef79e4d91c9b36bf46cdd2c061..25bd2d65b53985793e488a4dc2de224e05a1e2ea 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -308,11 +308,9 @@
let-iavNgIf="iavNgIf"
let-content="content">
<mat-expansion-panel class="mt-1 mb-1"
- [expanded]="accordionOpened === title"
- (opened)="sidebarAccordionOpened(title); accordionOpened = title"
- (closed)="sidebarAccordionClosed(title); accordionOpened === title? accordionOpened = '' : null"
hideToggle
- *ngIf="iavNgIf">
+ *ngIf="iavNgIf"
+ #expansionPanel="matExpansionPanel">
<mat-expansion-panel-header>
@@ -333,10 +331,8 @@
</mat-expansion-panel-header>
<!-- content -->
- <ng-template matExpansionPanelContent>
- <ng-container *ngTemplateOutlet="content">
- </ng-container>
- </ng-template>
+ <ng-container *ngTemplateOutlet="content; context: { expansionPanel: expansionPanel }">
+ </ng-container>
</mat-expansion-panel>
</ng-template>
@@ -394,10 +390,16 @@
</ng-container>
<!-- Connectivity -->
- <ng-template #connectivityContentTmpl>
+ <ng-template #connectivityContentTmpl let-expansionPanel="expansionPanel">
<mat-card-content class="flex-grow-1 flex-shrink-1 w-100">
- <connectivity-browser class="pe-all flex-shrink-1" #connectivityComponent>
- </connectivity-browser>
+ <ng-container *ngFor="let region of selectedRegions$ | async">
+ <connectivity-browser class="pe-all flex-shrink-1"
+ [region]="region"
+ (setOpenState)="expansionPanel.expanded = $event"
+ [accordionExpanded]="expansionPanel.expanded"
+ #connectivityComponent>
+ </connectivity-browser>
+ </ng-container>
</mat-card-content>
</ng-template>
diff --git a/src/ui/viewerStateController/viewerState.useEffect.ts b/src/ui/viewerStateController/viewerState.useEffect.ts
index 260b562b6a9988c1b4f4ddddeaccee93ac30d06f..d64b634afac2105eb2f34199e43b5b1259dae2ec 100644
--- a/src/ui/viewerStateController/viewerState.useEffect.ts
+++ b/src/ui/viewerStateController/viewerState.useEffect.ts
@@ -4,11 +4,13 @@ import { Action, select, Store } from "@ngrx/store";
import { Observable, Subscription, of, merge } from "rxjs";
import {distinctUntilChanged, filter, map, shareReplay, withLatestFrom, switchMap, mapTo } from "rxjs/operators";
import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
-import { CHANGE_NAVIGATION, FETCHED_TEMPLATE, GENERAL_ACTION_TYPES, IavRootStoreInterface, NEWVIEWER, SELECT_PARCELLATION, SELECT_REGIONS } from "src/services/stateStore.service";
+import { CHANGE_NAVIGATION, FETCHED_TEMPLATE, GENERAL_ACTION_TYPES, IavRootStoreInterface, NEWVIEWER, SELECT_PARCELLATION, SELECT_REGIONS, viewerState } from "src/services/stateStore.service";
import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "./viewerState.base";
import {TemplateCoordinatesTransformation} from "src/services/templateCoordinatesTransformation.service";
import { CLEAR_STANDALONE_VOLUMES } from "src/services/state/viewerState.store";
-import { viewerStateToggleRegionSelect, viewerStateHelperSelectParcellationWithId, viewerStateSelectTemplateWithId, viewerStateNavigateToRegion, viewerStateHelperStoreName } from "src/services/state/viewerState.store.helper";
+import { viewerStateToggleRegionSelect, viewerStateHelperSelectParcellationWithId, viewerStateSelectTemplateWithId, viewerStateNavigateToRegion, viewerStateHelperStoreName, viewerStateSelectedTemplateSelector } from "src/services/state/viewerState.store.helper";
+import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState/selectors";
+import { ngViewerActionClearView } from "src/services/state/ngViewerState/actions";
@Injectable({
providedIn: 'root',
@@ -42,10 +44,26 @@ export class ViewerStateControllerUseEffect implements OnDestroy {
@Effect()
public navigateToRegion$: Observable<any>
-
@Effect()
public onTemplateSelectClearStandAloneVolumes$: Observable<any>
+ @Effect()
+ public onTemplateSelectUnsetAllClearQueues$: Observable<any> = this.store$.pipe(
+ select(viewerStateSelectedTemplateSelector),
+ withLatestFrom(this.store$.pipe(
+ select(ngViewerSelectorClearViewEntries)
+ )),
+ map(([_, clearViewQueue]) => {
+ const newVal = {}
+ for (const key of clearViewQueue) {
+ newVal[key] = false
+ }
+ return ngViewerActionClearView({
+ payload: newVal
+ })
+ })
+ )
+
constructor(
private actions$: Actions,
private store$: Store<IavRootStoreInterface>,
@@ -62,8 +80,8 @@ export class ViewerStateControllerUseEffect implements OnDestroy {
distinctUntilChanged(),
)
- this.onTemplateSelectClearStandAloneVolumes$ = viewerState$.pipe(
- select('templateSelected'),
+ this.onTemplateSelectClearStandAloneVolumes$ = this.store$.pipe(
+ select(viewerStateSelectedTemplateSelector),
distinctUntilChanged(),
mapTo({ type: CLEAR_STANDALONE_VOLUMES })
)