diff --git a/package.json b/package.json index 4d72c6409a96a9ac18033a711986b58753ccb5ab..680b422c36a7a7bc28f73d7407fa933a04231e96 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@ngrx/store": "^9.1.1", "@types/node": "12.12.39", "export-nehuba": "0.0.2", - "hbp-connectivity-component": "^0.3.5", + "hbp-connectivity-component": "^0.3.7", "zone.js": "^0.10.2" } } diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html index d9c88931dbea0eef97395903d267aa1eda941d1b..d69e527a6e4ba6ade595b8cff53f101898017779 100644 --- a/src/atlasViewer/atlasViewer.template.html +++ b/src/atlasViewer/atlasViewer.template.html @@ -235,7 +235,7 @@ Connectivity </span> <mat-icon - (click)="uiNehubaContainer.connectivityComponent.closeConnectivityView()" + (click)="uiNehubaContainer.accordionOpened = ''" fontSet="fas" iav-stop="click" fontIcon="fa-times"> diff --git a/src/services/state/ngViewerState.store.ts b/src/services/state/ngViewerState.store.ts index f7a1418a36bb5f089dda09dac0ae89a6ba8ec7c3..2f708a826b8479ec41699b9c2f3528fb78763a5f 100644 --- a/src/services/state/ngViewerState.store.ts +++ b/src/services/state/ngViewerState.store.ts @@ -65,14 +65,13 @@ export const ngViewerStateReducer = createReducer( defaultState, on(ngViewerActionClearView, (state, { payload }) => { const { clearViewQueue } = state + const clearViewQueueUpdated = {...clearViewQueue} for (const key in payload) { - clearViewQueue[key] = payload[key] + clearViewQueueUpdated[key] = payload[key] } return { ...state, - clearViewQueue: { - ...clearViewQueue - } + clearViewQueue: clearViewQueueUpdated } }), on(ngViewerActionSetPerspOctantRemoval, (state, { octantRemovalFlag }) => { diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts index cd5160d98a73d8b56fee36086a16c1b16f8da482..2f2919305554d22325b6379025316acda39fa6cb 100644 --- a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts +++ b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts @@ -5,6 +5,7 @@ import { distinctUntilChanged, map, withLatestFrom, shareReplay, groupBy, mergeM import { Observable, Subscription, from, zip, of, combineLatest } from "rxjs"; import { viewerStateGetSelectedAtlas, viewerStateSelectTemplateWithId, viewerStateAllParcellationsSelector, viewerStateToggleLayer } from "src/services/state/viewerState.store.helper"; import { MatMenuTrigger } from "@angular/material/menu"; +import {CLEAR_CONNECTIVITY_REGION, SET_CONNECTIVITY_VISIBLE} from "src/services/state/viewerState.store"; @Component({ selector: 'atlas-layer-selector', @@ -160,6 +161,8 @@ export class AtlasLayerSelector implements OnInit { } selectTemplateWithName(template) { + 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 43d5cd18dd3140ed94e89ee8caf08458b62b75ab..c966045c87c6f81c94cdafafcc0df78b39edab6e 100644 --- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts +++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts @@ -37,13 +37,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>> public math = Math - public connectivityComponentStyle: any = { - // ToDo - new popup panels from layer container hardcoded height and when I'm trying to grow connectivity popup, it overflows below. - // For that I will just set hardcoded height, If we will able to grow new popups dynamically, below commented maxHeight should be apply. - // maxHeight: +(+getWindow().innerHeight - 200) + 'px', - maxHeight: '500px' - } - @ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef<HTMLHbpConnectivityMatrixRowElement> @ViewChild('fullConnectivityGrid') public fullConnectivityGridElement: ElementRef<HTMLFullConnectivityGridElement> @@ -89,35 +82,29 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A 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) - if (this.defaultColorMap) { - this.addNewColorMap() - } } - } else { - this.closeConnectivityView() } }), this.connectivityRegion$.subscribe(cr => { if (cr && cr.length) { if (this.region !== cr && this.defaultColorMap) { - this.setDefaultMap() - this.store$.dispatch({ - type: SET_CONNECTIVITY_VISIBLE, - payload: null, - }) + this.closeConnectivityView() } this.region = cr this.changeDetectionRef.detectChanges() + } else { + this.store$.dispatch({ + type: SET_CONNECTIVITY_VISIBLE, + payload: false, + }) } }), ) - this.subscriptions.push(this.templateSelected$.subscribe(t => { - this.closeConnectivityView() - })) this.subscriptions.push(this.overwrittenColorMap$.subscribe(ocm => { this.showConnectivityToggle = ocm === 'connectivity'? true : false })) @@ -151,6 +138,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A } }), ) + this.showConnectivityToggle = true } toggleConnectivityOnViewer(event) { @@ -174,11 +162,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A public ngOnDestroy(): void { this.subscriptions.forEach(s => s.unsubscribe()) - this.defaultColorMap && this.setDefaultMap() - // this.store$.dispatch({ - // type: SET_CONNECTIVITY_VISIBLE, - // payload: false, - // }) } navigateToRegion(region) { @@ -200,12 +183,9 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A return this.allRegions.find(ar => ar.name === region) } - public closeConnectivityView() { - if (this.defaultColorMap) this.setDefaultMap() + public closeConnectivityView(setDefault = true) { + if (this.defaultColorMap && setDefault) this.setDefaultMap() this.closeConnectivity.emit() - this.store$.dispatch({ - type: CLEAR_CONNECTIVITY_REGION, - }) this.store$.dispatch({ type: SET_CONNECTIVITY_VISIBLE, payload: null, @@ -258,7 +238,10 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A } } } - + exportConnectivityProfile() { + const a = document.querySelector('hbp-connectivity-matrix-row') + a.downloadCSV() + } public exportFullConnectivity() { this.fullConnectivityGridElement.nativeElement['downloadCSV']() } diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html index 5cce4d81ad5eddc5973a63570d0b72d40d4a7b96..65d3fbf62b44f6ee3e218b58e4328cdc0255c693 100644 --- a/src/ui/connectivityBrowser/connectivityBrowser.template.html +++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html @@ -14,7 +14,7 @@ show-dataset-name="false" custom-dataset-selector="true" tools_showlog="true" - [tools_custom]='[{"name": "Apply colors to viewer", "type": "checkbox", "checked": showConnectivityToggle}, {"name": "export csv", "type": "button"}]' + [tools_custom]='[{"name": "exportslot", "type": "slot"}]' hide-export-view="true"> <div slot="dataset"> @@ -49,8 +49,10 @@ <i class="fas fa-download"></i> </button> </ng-container> - </div> + <div> + Connectivity Profile + </div> </div> <div slot="connectedRegionMenu"> @@ -73,6 +75,13 @@ <mat-divider></mat-divider> </div> </div> + <div slot="exportslot"> + <button mat-icon-button + (click)="exportConnectivityProfile()" + matTooltip="Export connectivity profile"> + <i class="fas fa-download mb-2"></i> + </button> + </div> </hbp-connectivity-matrix-row> <full-connectivity-grid #fullConnectivityGrid 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 69df9fb8629c5af432f0b31d8de8d0705cc55c20..ff3b26f6a4a0ab5a91e42018590b80c48b8f2dbe 100644 --- a/src/ui/nehubaContainer/nehubaContainer.component.ts +++ b/src/ui/nehubaContainer/nehubaContainer.component.ts @@ -26,6 +26,7 @@ import { getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThre 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 @@ -133,14 +134,6 @@ const { export class NehubaContainer implements OnInit, OnChanges, OnDestroy { - public test(flag: boolean) { - this.store.dispatch( - ngViewerActionClearView({ payload: { - ['id-me']: flag - } }) - ) - } - public ARIA_LABEL_ZOOM_IN = ZOOM_IN public ARIA_LABEL_ZOOM_OUT = ZOOM_OUT public ARIA_LABEL_TOGGLE_SIDE_PANEL = TOGGLE_SIDE_PANEL @@ -259,6 +252,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy { public hoveredPanelIndices$: Observable<number> @ViewChild('connectivityComponent') public connectivityComponent: ConnectivityBrowserComponent + public accordionOpened: string = '' constructor( private pureConstantService: PureContantService, @@ -745,7 +739,12 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy { ) this.subscriptions.push(this.selectedRegions$.subscribe(sr => { - if (sr?.length === 1) this.setConnectivityRegion(sr[0].name) + if (sr?.length >= 1) this.setConnectivityRegion(sr[0].name) + else { + this.store.dispatch({type: CLEAR_CONNECTIVITY_REGION}) + this.store.dispatch({type: SET_CONNECTIVITY_VISIBLE, payload: null}) + if (this.accordionOpened === 'Connectivity') this.connectivityComponent.toggleConnectivityOnViewer(false) + } this.selectedRegions = sr })) @@ -817,6 +816,31 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy { this.store.dispatch(viewerStateSetConnectivityRegion({ connectivityRegion: regionName })) } + 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()) } diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html index 0b6c3e5b6da24a4f319e086cd04bd338312663bf..a8575e9acc833c3b2149c875fa64b0ac08200ee1 100644 --- a/src/ui/nehubaContainer/nehubaContainer.template.html +++ b/src/ui/nehubaContainer/nehubaContainer.template.html @@ -295,9 +295,10 @@ 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 - (afterExpand)="test(true)" - (afterCollapse)="test(false)" *ngIf="iavNgIf"> <mat-expansion-panel-header>