From 79a37fea5b2eddca9050c10ab917220d30870523 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Tue, 25 Aug 2020 10:57:15 +0200
Subject: [PATCH] Show connectivity on expand accordion (#638)
* Show connectivity on expand accordion
* [skip ci] remove comments
Co-authored-by: xgui3783 <xgui3783@gmail.com>
---
package.json | 2 +-
src/atlasViewer/atlasViewer.template.html | 2 +-
src/services/state/ngViewerState.store.ts | 7 ++-
.../atlasLayerSelector.component.ts | 3 ++
.../connectivityBrowser.component.ts | 45 ++++++-------------
.../connectivityBrowser.template.html | 13 +++++-
.../nehubaContainer.component.ts | 42 +++++++++++++----
.../nehubaContainer.template.html | 5 ++-
8 files changed, 69 insertions(+), 50 deletions(-)
diff --git a/package.json b/package.json
index 4d72c6409..680b422c3 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 d9c88931d..d69e527a6 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 f7a1418a3..2f708a826 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 cd5160d98..2f2919305 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 43d5cd18d..c966045c8 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 5cce4d81a..65d3fbf62 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 69df9fb86..ff3b26f6a 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 0b6c3e5b6..a8575e9ac 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>
--
GitLab