diff --git a/src/services/state/viewerState.store.helper.ts b/src/services/state/viewerState.store.helper.ts index 241d9b8d3437a0190553652e4d33636bd9d59b50..9b0b5891feaa8f426c76cda141a8d15837b00db3 100644 --- a/src/services/state/viewerState.store.helper.ts +++ b/src/services/state/viewerState.store.helper.ts @@ -57,6 +57,11 @@ export const viewerStateRemoveAdditionalLayer = createAction( props<{ atlas: { ['@id']: string } }>() ) +export const viewerStateSelectedRegionsSelector = createSelector( + state => state['viewerState'], + viewerState => viewerState['regionsSelected'] +) + interface IViewerStateHelperStore{ fetchedAtlases: any[] selectedAtlasId: string diff --git a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts b/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts index e4875d8748124683b3c041a82c7275ce5ebae01e..4bb38381ec2265bff61531a331011b35dcf1a18d 100644 --- a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts +++ b/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts @@ -1,8 +1,8 @@ import { Component } from "@angular/core"; import { Store, select } from "@ngrx/store"; import { Observable, combineLatest } from "rxjs"; -import { viewerStateGetOverlayingAdditionalParcellations, viewerStateGetSelectedAtlas, viewerStateToggleAdditionalLayer, viewerStateRemoveAdditionalLayer } from 'src/services/state/viewerState.store.helper' -import { map, shareReplay, withLatestFrom, filter, tap } from "rxjs/operators"; +import { viewerStateGetOverlayingAdditionalParcellations, viewerStateToggleAdditionalLayer, viewerStateRemoveAdditionalLayer, viewerStateToggleRegionSelect, viewerStateNavigateToRegion, viewerStateSelectedRegionsSelector } from 'src/services/state/viewerState.store.helper' +import { map, shareReplay, withLatestFrom, filter} from "rxjs/operators"; import {safeFilter} from "src/services/stateStore.service"; @Component({ @@ -31,6 +31,8 @@ export class AtlasLayerContainer { public connectivityRegion$: Observable<any> + public regionsSelected$: Observable<any> + constructor( private store$: Store<any> ){ @@ -55,6 +57,11 @@ export class AtlasLayerContainer { select('viewerState'), select('parcellationSelected') ) + + this.regionsSelected$ = this.store$.pipe( + select(viewerStateSelectedRegionsSelector) + ) + /** * added layer if defined, or else use default parcellation */ @@ -82,6 +89,20 @@ export class AtlasLayerContainer { else this.visibleTab = null } + handleRegionClick({ mode, region }){ + if (mode === 'single') { + this.store$.dispatch( + viewerStateToggleRegionSelect({ payload: { region } }) + ) + } + + if (mode === 'double') { + this.store$.dispatch( + viewerStateNavigateToRegion({ payload: { region } }) + ) + } + } + toggleLayer(atlas) { this.store$.dispatch( viewerStateToggleAdditionalLayer({ atlas }) diff --git a/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html b/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html index 419c805ab3055bba0c29d09537a23882a7066d49..8492c463219a3aff5f24a4b207d852d64d17700e 100644 --- a/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html +++ b/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html @@ -16,6 +16,9 @@ <mat-card-content class="flex-grow-1"> <region-hierarchy + [selectedRegions]="regionsSelected$ | async" + (singleClickRegion)="handleRegionClick({ mode: 'single', region: $event })" + (doubleClickRegion)="handleRegionClick({ mode: 'double', region: $event })" *ngIf="visibleTab === 'hierarchy'" class="h-100" [parcellationSelected]="parcellationOfInterest$ | async"> diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts index b2590e7b98ef8b7df67ec716fe694dedce14e507..e6b4da2319fb83ec67166a0cae0f61fbdd29f167 100644 --- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts +++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts @@ -11,7 +11,7 @@ import {fromEvent, Observable, Subscription} from "rxjs"; import {distinctUntilChanged, filter, map} from "rxjs/operators"; import {CLEAR_CONNECTIVITY_REGION, SET_CONNECTIVITY_REGION} from "src/services/state/viewerState.store"; import {HIDE_SIDE_PANEL_CONNECTIVITY, isDefined, safeFilter} from "src/services/stateStore.service"; -import {VIEWERSTATE_CONTROLLER_ACTION_TYPES} from "src/ui/viewerStateController/viewerState.base"; +import { viewerStateNavigateToRegion } from "src/services/state/viewerState.store.helper"; @Component({ selector: 'connectivity-browser', @@ -134,10 +134,11 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A } navigateToRegion(region) { - this.store$.dispatch({ - type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.NAVIGATETO_REGION, - payload: { region: this.getRegionWithName(region) }, - }) + this.store$.dispatch( + viewerStateNavigateToRegion({ + payload: { region: this.getRegionWithName(region) } + }) + ) } getRegionWithName(region) { diff --git a/src/ui/parcellationRegion/region.base.ts b/src/ui/parcellationRegion/region.base.ts index eb514bd7dd6e4c0c1551cd9e61e23530166b7993..d6e219565619242780ea44784383fa8b54ea0655 100644 --- a/src/ui/parcellationRegion/region.base.ts +++ b/src/ui/parcellationRegion/region.base.ts @@ -1,7 +1,7 @@ -import {EventEmitter, Input, Output } from "@angular/core"; -import {select, Store, createSelector} from "@ngrx/store"; +import { EventEmitter, Input, Output } from "@angular/core"; +import { select, Store, createSelector } from "@ngrx/store"; import { uiStateOpenSidePanel, uiStateExpandSidePanel, uiActionShowSidePanelConnectivity } from 'src/services/state/uiState.store.helper' -import {distinctUntilChanged, switchMap, filter} from "rxjs/operators"; +import { distinctUntilChanged, switchMap, filter } from "rxjs/operators"; import { Observable, BehaviorSubject } from "rxjs"; import { ARIA_LABELS } from 'common/constants' import { flattenRegions, getIdFromFullId } from 'common/util' diff --git a/src/ui/viewerStateController/regionSearch/regionSearch.component.ts b/src/ui/viewerStateController/regionSearch/regionSearch.component.ts index eb73aa54adbbd2cd1a40dd6a66f74af18501950e..381dc69bbf5ade7d007fba2ca3c89ed2260b763c 100644 --- a/src/ui/viewerStateController/regionSearch/regionSearch.component.ts +++ b/src/ui/viewerStateController/regionSearch/regionSearch.component.ts @@ -6,11 +6,11 @@ import { debounceTime, distinctUntilChanged, filter, map, shareReplay, startWith import { VIEWER_STATE_ACTION_TYPES } from "src/services/effect/effect"; import { ADD_TO_REGIONS_SELECTION_WITH_IDS, CHANGE_NAVIGATION, SELECT_REGIONS } from "src/services/state/viewerState.store"; import { generateLabelIndexId, getMultiNgIdsRegionsLabelIndexMap, IavRootStoreInterface } from "src/services/stateStore.service"; -import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "../viewerState.base"; import { LoggingService } from "src/logging"; import { MatDialog } from "@angular/material/dialog"; import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete"; import { PureContantService } from "src/util"; +import { viewerStateToggleRegionSelect, viewerStateNavigateToRegion } from "src/services/state/viewerState.store.helper"; const filterRegionBasedOnText = searchTerm => region => region.name.toLowerCase().includes(searchTerm.toLowerCase()) || (region.relatedAreas && region.relatedAreas.some(relatedArea => relatedArea.name && relatedArea.name.toLowerCase().includes(searchTerm.toLowerCase()))) @@ -170,15 +170,20 @@ export class RegionTextSearchAutocomplete { // TODO handle mobile public handleRegionClick({ mode = null, region = null } = {}) { - const type = mode === 'single' - ? VIEWERSTATE_CONTROLLER_ACTION_TYPES.SINGLE_CLICK_ON_REGIONHIERARCHY - : mode === 'double' - ? VIEWERSTATE_CONTROLLER_ACTION_TYPES.DOUBLE_CLICK_ON_REGIONHIERARCHY - : '' - this.store$.dispatch({ - type, - payload: { region }, - }) + if (mode === 'single') { + this.store$.dispatch( + viewerStateToggleRegionSelect({ + payload: { region } + }) + ) + } + if (mode === 'double') { + this.store$.dispatch( + viewerStateNavigateToRegion({ + payload: { region } + }) + ) + } } public showHierarchy(_event: MouseEvent) { diff --git a/src/ui/viewerStateController/regionsListView/currentlySelectedRegions/currentlySelectedRegions.component.ts b/src/ui/viewerStateController/regionsListView/currentlySelectedRegions/currentlySelectedRegions.component.ts index 9d0e71b338e5f4782a14c92cc2dbc463b69b84f7..fb4e5f7b0de37703c608b3104527b06f03625ddf 100644 --- a/src/ui/viewerStateController/regionsListView/currentlySelectedRegions/currentlySelectedRegions.component.ts +++ b/src/ui/viewerStateController/regionsListView/currentlySelectedRegions/currentlySelectedRegions.component.ts @@ -4,7 +4,7 @@ import { Observable } from "rxjs"; import { distinctUntilChanged, startWith } from "rxjs/operators"; import { DESELECT_REGIONS } from "src/services/state/viewerState.store"; import { IavRootStoreInterface } from "src/services/stateStore.service"; -import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "src/ui/viewerStateController/viewerState.base"; +import { viewerStateNavigateToRegion } from "src/services/state/viewerState.store.helper"; @Component({ selector: 'currently-selected-regions', @@ -38,9 +38,10 @@ export class CurrentlySelectedRegions { } public gotoRegion(event: MouseEvent, region: any) { - this.store$.dispatch({ - type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.DOUBLE_CLICK_ON_REGIONHIERARCHY, - payload: { region }, - }) + this.store$.dispatch( + viewerStateNavigateToRegion({ + payload: { region } + }) + ) } } diff --git a/src/ui/viewerStateController/viewerState.base.ts b/src/ui/viewerStateController/viewerState.base.ts index fb196c12b991ebbc4b19eae7bcf1ddc4fdcf76d3..ee206f5bd32cad100dc63ade0f6edc1e888619f9 100644 --- a/src/ui/viewerStateController/viewerState.base.ts +++ b/src/ui/viewerStateController/viewerState.base.ts @@ -5,16 +5,13 @@ import { distinctUntilChanged, filter, shareReplay } from "rxjs/operators"; import { DialogService } from "src/services/dialogService.service"; import { RegionSelection } from "src/services/state/userConfigState.store"; import { IavRootStoreInterface, SELECT_REGIONS, USER_CONFIG_ACTION_TYPES } from "src/services/stateStore.service"; -import {MatSelectChange} from "@angular/material/select"; -import {MatBottomSheet, MatBottomSheetRef} from "@angular/material/bottom-sheet"; +import { MatSelectChange } from "@angular/material/select"; +import { MatBottomSheet, MatBottomSheetRef } from "@angular/material/bottom-sheet"; const ACTION_TYPES = { - SINGLE_CLICK_ON_REGIONHIERARCHY: 'SINGLE_CLICK_ON_REGIONHIERARCHY', - DOUBLE_CLICK_ON_REGIONHIERARCHY: 'DOUBLE_CLICK_ON_REGIONHIERARCHY', SELECT_TEMPLATE_WITH_NAME: 'SELECT_TEMPLATE_WITH_NAME', SELECT_PARCELLATION_WITH_NAME: 'SELECT_PARCELLATION_WITH_NAME', - NAVIGATETO_REGION: 'NAVIGATETO_REGION', } export class ViewerStateBase implements OnInit { diff --git a/src/ui/viewerStateController/viewerState.useEffect.ts b/src/ui/viewerStateController/viewerState.useEffect.ts index 6f4a57af9db2ba60f3d5d853f2e3527530a5d925..eae9876578ad7d2896b2e518b05627a942d9a312 100644 --- a/src/ui/viewerStateController/viewerState.useEffect.ts +++ b/src/ui/viewerStateController/viewerState.useEffect.ts @@ -10,7 +10,7 @@ import { regionFlattener } from "src/util/regionFlattener"; 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, viewerStateSelectParcellationWithId, viewerStateSelectTemplateWithId } from "src/services/state/viewerState.store.helper"; +import { viewerStateToggleRegionSelect, viewerStateSelectParcellationWithId, viewerStateSelectTemplateWithId, viewerStateNavigateToRegion } from "src/services/state/viewerState.store.helper"; @Injectable({ providedIn: 'root', @@ -38,18 +38,6 @@ export class ViewerStateControllerUseEffect implements OnInit, OnDestroy { @Effect() public selectTemplate$: Observable<any> - /** - * Determines how single click on region hierarchy will affect view - */ - @Effect() - public singleClickOnHierarchy$: Observable<any> - - /** - * Determines how double click on region hierarchy will effect view - */ - @Effect() - public doubleClickOnHierarchy$: Observable<any> - @Effect() public toggleRegionSelection$: Observable<any> @@ -239,18 +227,9 @@ export class ViewerStateControllerUseEffect implements OnInit, OnDestroy { }), ) - this.doubleClickOnHierarchy$ = this.actions$.pipe( - ofType(VIEWERSTATE_CONTROLLER_ACTION_TYPES.DOUBLE_CLICK_ON_REGIONHIERARCHY), - map(action => { - return { - ...action, - type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.NAVIGATETO_REGION, - } - }), - ) this.navigateToRegion$ = this.actions$.pipe( - ofType(VIEWERSTATE_CONTROLLER_ACTION_TYPES.NAVIGATETO_REGION), + ofType(viewerStateNavigateToRegion), map(action => { const { payload = {} } = action as ViewerStateAction const { region } = payload @@ -283,11 +262,6 @@ export class ViewerStateControllerUseEffect implements OnInit, OnDestroy { }), ) - this.singleClickOnHierarchy$ = this.actions$.pipe( - ofType(VIEWERSTATE_CONTROLLER_ACTION_TYPES.SINGLE_CLICK_ON_REGIONHIERARCHY), - map(action => viewerStateToggleRegionSelect(action as any)), - ) - this.toggleRegionSelection$ = this.actions$.pipe( ofType(viewerStateToggleRegionSelect.type), withLatestFrom(this.selectedRegions$), @@ -311,22 +285,6 @@ export class ViewerStateControllerUseEffect implements OnInit, OnDestroy { } public ngOnInit() { - this.subscriptions.push( - this.doubleClickOnHierarchy$.subscribe(({ region } = {}) => { - const { position } = region - if (position) { - this.store$.dispatch({ - type: CHANGE_NAVIGATION, - navigation: { - position, - animation: {}, - }, - }) - } else { - this.uiService.showMessage(`${region.name} does not have a position defined`) - } - }), - ) } public ngOnDestroy() {