diff --git a/package.json b/package.json
index 05771f5d2fe1fddf8da20c1369e70e4be49e407f..8f224eb3af1d89b00c4da824f91d6c278daa121d 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,6 @@
"zone.js": "^0.9.1"
},
"dependencies": {
- "hbp-connectivity-component": "0.0.17"
+ "hbp-connectivity-component": "0.0.23"
}
}
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index 1e9f33a59b14938be3918b1b62db642ee5609d22..7e4e50425178878c14150536c1347ac1afcbc11e 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -8,9 +8,11 @@ import {
import {select, Store} from "@ngrx/store";
import {fromEvent, Observable, Subscription} from "rxjs";
import {distinctUntilChanged, filter, map} from "rxjs/operators";
-import {AtlasViewerConstantsServices} from "src/atlasViewer/atlasViewer.constantService.service";
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";
+
+const compareFn = (it, item) => it.name === item.name
@Component({
selector: 'connectivity-browser',
@@ -23,14 +25,18 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
private connectivityRegion$: Observable<any>
private selectedParcellation$: Observable<any>
+ public selectedRegions$: Observable<any[]>
+
private subscriptions: Subscription[] = []
public expandMenuIndex = -1
public allRegions = []
public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>>
public parcellationHasConnectivityData = true
private areaHemisphere: string
-
public math = Math
+ public compareFn = compareFn
+
+
@ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef
@@ -51,6 +57,12 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
map(state => state.connectivityRegion),
)
+ this.selectedRegions$ = this.store$.pipe(
+ select('viewerState'),
+ filter(state => isDefined(state) && isDefined(state.regionsSelected)),
+ map(state => state.regionsSelected),
+ distinctUntilChanged(),
+ )
}
public ngAfterViewInit(): void {
@@ -102,6 +114,24 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
})
}
+ navigateToRegion(region) {
+ this.store$.dispatch({
+ type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.NAVIGATETO_REGION,
+ payload: { region: this.getRegionWithName(region) },
+ })
+ }
+
+ toggleRegionSelection(region) {
+ this.store$.dispatch({
+ type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.TOGGLE_REGION_SELECT,
+ payload: { region: this.getRegionWithName(region) },
+ })
+ }
+
+ getRegionWithName(region) {
+ return this.allRegions.find(ar => ar.name === region)
+ }
+
public closeConnectivityView() {
this.setDefaultMap()
@@ -127,11 +157,9 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
const existingMap: Map<string, Map<number, {red: number, green: number, blue: number}>> = (getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
-
const colorMap = new Map(existingMap)
this.allRegions.forEach(r => {
-
if (r.ngId) {
colorMap.get(r.ngId).set(r.labelIndex, {red: 255, green: 255, blue: 255})
}
@@ -139,7 +167,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
this.connectedAreas.forEach(area => {
const areaAsRegion = this.allRegions
- .filter(r => r.name === area.name + this.areaHemisphere)
+ .filter(r => r.name === area.name)
.map(r => r)
if (areaAsRegion && areaAsRegion.length && areaAsRegion[0].ngId) {
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
index cbde664d53a0824ca2dcc029559d12c9f7f5854e..3d22f591e8afd70ccf8f49a2c3a11de222c11b59 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -6,10 +6,13 @@
loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
show-export="true"
show-source="true"
- show-title="true"
- show-toolbar="true">
- <div slot="header" class="w-100 d-flex justify-content-end mt-3"><span
- class="cursorPointer" (click)="closeConnectivityView()">X</span></div>
+ show-title="false"
+ show-toolbar="true"
+ show-description="true">
+ <div slot="header" class="w-100 d-flex justify-content-between mt-3">
+ <span>Connectivity Browser</span>
+ <i (click)="closeConnectivityView()" class="far fa-times-circle cursorPointer"></i>
+ </div>
<div slot="connectedRegionMenu">
@@ -24,35 +27,28 @@
</span>
<div class="d-flex align-items-center justify-content-around">
<small class="d-flex flex-column align-items-center w-100">
- <!--ToDo Implement function when Hemisphere information will be available -->
- <!-- *ngIf="(selectedRegions$ | async) as selectedRegions"-->
- <!-- (click)="toggleRegionWithId(region.ngId, region.labelIndex, regionIsSelected(selectedRegions, region.ngId, region.labelIndex))">-->
-
- <button mat-icon-button class="border">
- <!-- <i class="fas fa-hand-pointer mt-n1"></i>-->
+ <button mat-icon-button class="border" (click)="toggleRegionSelection(connectedAreas[expandMenuIndex].name)">
<span class="fa-stack fa-1x ">
<i class="fas fa-hand-pointer fa-stack-1x"></i>
- <!--ToDo Implement function when Hemisphere information will be available -->
- <!-- <i class="fas fa-slash fa-stack-1x fa-inverse"-->
- <!-- *ngIf="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)"></i>-->
+ <i class="fas fa-slash fa-stack-1x fa-inverse"
+ *ngIf="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn)"></i>
</span>
</button>
- <!-- <span [innerText]="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)? 'Deselect' : 'Select'"></span>-->
- <span>Select</span>
+ <span [innerText]="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn) ? 'Deselect' : 'Select'"></span>
</small>
<small class="d-flex flex-column align-items-center w-100">
- <button mat-icon-button class="border">
+ <button mat-icon-button class="border" (click)="navigateToRegion(connectedAreas[expandMenuIndex].name)">
<i class="fas fa-crosshairs mt-n1"></i>
</button>
- Navigate
+ Go To
</small>
<small class="d-flex flex-column align-items-center w-100">
<button mat-icon-button class="border" (click)="updateConnevtivityRegion(connectedAreas[expandMenuIndex].name)">
<i class="fab fa-connectdevelop mt-n1"></i>
</button>
- Connectivity
+ Set as Source
</small>
</div>
</div>
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
index 1d7e78a1ad5484f51b35145ac258fcc73f278e04..2acdab5011fbe718314e9b6ce5c076308f67e104 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
@@ -20,11 +20,25 @@
Navigate
</span>
</button>
- <button *ngIf="hasConnectivity" mat-button (click)="showConnectivity(region.name)">
+ <button *ngIf="hasConnectivity"
+ mat-button
+ [matMenuTriggerFor]="connectivitySourceDatasets"
+ #connectivityMenuButton="matMenuTrigger">
<i class="fab fa-connectdevelop"></i>
<span>
Connectivity
</span>
+ <i class="fas fa-angle-right"></i>
</button>
+
+ <!-- ToDo make dynamic with AVAILABLE CONNECTIVITY DATASETS data - get info from atlas viewer core -->
+ <mat-menu #connectivitySourceDatasets="matMenu" xPosition="before" (click)="$event.stopPropagation()" hasBackdrop="false">
+ <div>
+ <button mat-menu-item
+ (click)="showConnectivity(region.name)">
+ <span>1000 Brains Study</span>
+ </button>
+ </div>
+ </mat-menu>
</mat-card-actions>
</mat-card>
\ No newline at end of file