diff --git a/package.json b/package.json
index 8f224eb3af1d89b00c4da824f91d6c278daa121d..73cd4587730fe06f3015dfd850966bdde81d93d4 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,6 @@
"zone.js": "^0.9.1"
},
"dependencies": {
- "hbp-connectivity-component": "0.0.23"
+ "hbp-connectivity-component": "^0.1.0"
}
}
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index 7e4e50425178878c14150536c1347ac1afcbc11e..8d3ad0fd8df80eae0373600c9176766cd6f0a384 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -1,4 +1,6 @@
import {
+ AfterContentChecked,
+ AfterContentInit, AfterViewChecked,
AfterViewInit, ChangeDetectorRef,
Component,
ElementRef,
@@ -12,16 +14,17 @@ import {CLEAR_CONNECTIVITY_REGION, SET_CONNECTIVITY_REGION} from "src/services/s
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',
templateUrl: './connectivityBrowser.template.html',
})
-export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
+export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, AfterContentChecked {
public region: string
+ public datasetList: any[] = []
+ public selectedDataset: any
private connectedAreas = []
+ public componentHeight: any
private connectivityRegion$: Observable<any>
private selectedParcellation$: Observable<any>
@@ -31,12 +34,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
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
@@ -65,11 +63,14 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
)
}
+ public ngAfterContentChecked(): void {
+ this.componentHeight = this.connectivityComponentElement.nativeElement.clientHeight
+ }
+
public ngAfterViewInit(): void {
this.subscriptions.push(
this.selectedParcellation$.subscribe(parcellation => {
if (parcellation && parcellation.hasAdditionalViewMode && parcellation.hasAdditionalViewMode.includes('connectivity')) {
- this.parcellationHasConnectivityData = true
if (parcellation.regions && parcellation.regions.length) {
this.allRegions = []
this.getAllRegionsFromParcellation(parcellation.regions)
@@ -78,12 +79,11 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
}
}
} else {
- this.parcellationHasConnectivityData = false
+ this.closeConnectivityView()
}
}),
this.connectivityRegion$.subscribe(cr => {
this.region = cr
- this.areaHemisphere = cr.includes('left hemisphere') ? ' - left hemisphere' : ' - right hemisphere'
this.changeDetectionRef.detectChanges()
}),
)
@@ -98,12 +98,21 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
.subscribe((e: CustomEvent) => {
this.expandMenuIndex = e.detail
}),
+ fromEvent(this.connectivityComponentElement.nativeElement, 'datasetDataReceived', { capture: true })
+ .subscribe((e: CustomEvent) => {
+ this.datasetList = e.detail
+ this.selectedDataset = this.datasetList[0]
+ }),
)
}
+ // ToDo Affect on component
+ changeDataset(event) {
+ this.selectedDataset = event.value
+ }
+
public ngOnDestroy(): void {
- this.setDefaultMap()
this.subscriptions.forEach(s => s.unsubscribe())
}
@@ -121,20 +130,11 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
})
}
- 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()
-
this.store$.dispatch({
type: HIDE_SIDE_PANEL_CONNECTIVITY,
})
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
index 3d22f591e8afd70ccf8f49a2c3a11de222c11b59..61ef3010b3a960b6d8677d1ffceaffa40bd85ea3 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -1,73 +1,101 @@
-<div class="w-100 h-100 overflow-auto d-block d-flex flex-column pb-2" #connectivityComponent *ngIf="parcellationHasConnectivityData; else noConnectivity">
- <!--ToDo set show-description="true" when data will available-->
+<div class="w-100 h-100 d-block d-flex flex-column pb-2" #connectivityComponent>
<hbp-connectivity-matrix-row
[region]="region"
theme="dark"
loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
+ dataset-url="https://connectivityquery-connectivity.apps-dev.hbp.eu/studies"
show-export="true"
show-source="true"
show-title="false"
- show-toolbar="true"
- show-description="true">
+ show-toolbar="false"
+ show-description="false"
+ show-dataset-name="false"
+ custom-dataset-selector="true"
+ [customHeight]="componentHeight + 'px'">
<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>
+ <i (click)="closeConnectivityView(); setDefaultMap()" class="far fa-times-circle cursorPointer"></i>
</div>
- <div slot="connectedRegionMenu">
+ <div slot="dataset">
+ <div *ngIf="datasetList.length && selectedDataset" class=" flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
+ <mat-form-field class="flex-grow-1 flex-shrink-1 w-0">
+ <mat-label>
+ Dataset
+ </mat-label>
- <div class="d-flex flex-column" *ngIf="expandMenuIndex >= 0">
- <mat-divider></mat-divider>
- <span class="mt-2 mr-2 ml-2">
- <small>Region: {{connectedAreas[expandMenuIndex].name}}</small>
- <br>
- <small>Number of Connection: {{connectedAreas[expandMenuIndex].numberOfConnections}}</small>
- <br>
- <small>Log(123) = {{math.log10(connectedAreas[expandMenuIndex].numberOfConnections)}}</small>
- </span>
- <div class="d-flex align-items-center justify-content-around">
- <small class="d-flex flex-column align-items-center w-100">
- <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>
- <i class="fas fa-slash fa-stack-1x fa-inverse"
- *ngIf="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn)"></i>
- </span>
- </button>
- <span [innerText]="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn) ? 'Deselect' : 'Select'"></span>
- </small>
+ <mat-select
+ panelClass="no-max-width"
+ [value]="selectedDataset"
+ (selectionChange)="changeDataset($event)">
+ <mat-option
+ *ngFor="let dataset of datasetList"
+ [value]="dataset"
+ >
+ {{ dataset.title }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ <ng-container *ngIf="selectedDataset && selectedDataset.description" >
+ <!-- show on hover component -->
+ <sleight-of-hand class="d-inline-block flex-grow-0 flex-shrink-0 pe-all">
- <small class="d-flex flex-column align-items-center w-100">
- <button mat-icon-button class="border" (click)="navigateToRegion(connectedAreas[expandMenuIndex].name)">
- <i class="fas fa-crosshairs mt-n1"></i>
- </button>
- Go To
- </small>
+ <!-- shown when off -->
+ <div sleight-of-hand-front>
+ <button
+ mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+ </div>
- <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>
- Set as Source
- </small>
- </div>
- </div>
+ <!-- shown on hover -->
+ <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
+ <button class="flex-grow-0 flex-shrink-0" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+ <div class="position-relative">
+ <button class="position-relative invisible pe-none" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
- </div>
- </hbp-connectivity-matrix-row>
-</div>
+ <mat-card class="position-absolute left-0 top-0 w-40em">
+ <single-dataset-view
+ [name]="selectedDataset.title"
+ [description]="selectedDataset.description">
+ </single-dataset-view>
+ </mat-card>
+ </div>
+
+ </div>
+ </sleight-of-hand>
+
+ </ng-container>
-<ng-template #noConnectivity>
- <mat-card class="p-2 w-100 h-100 overflow-auto d-block">
- <div class="w-100 d-flex justify-content-end mt-3"><span
- class="cursorPointer" (click)="closeConnectivityView()">X</span></div>
- <h5>
- Connectivity Matrix Browser
- </h5>
- <div>
- No Connectivity for selected Parcellation!
+ </div>
</div>
- </mat-card>
-</ng-template>
\ No newline at end of file
+ <div slot="connectedRegionMenu">
+ <div class="d-flex flex-column p-0 m-0" *ngIf="expandMenuIndex >= 0">
+ <mat-divider></mat-divider>
+ <mat-card-subtitle class="pt-2 pr-2 pl-2 pb-0">
+ {{connectedAreas[expandMenuIndex].name}}
+ </mat-card-subtitle>
+ <div class="d-flex align-items-center justify-content-around">
+ <button mat-button (click)="navigateToRegion(navigateToRegion(connectedAreas[expandMenuIndex].name))">
+ <i class="fas fa-map-marked-alt"></i>
+ <span>
+ Navigate
+ </span>
+ </button>
+ <button mat-button (click)="updateConnevtivityRegion(connectedAreas[expandMenuIndex].name)">
+ <i class="fab fa-connectdevelop"></i>
+ <span>
+ Connectivity
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </hbp-connectivity-matrix-row>
+</div>
\ No newline at end of file
diff --git a/src/ui/searchSideNav/searchSideNav.style.css b/src/ui/searchSideNav/searchSideNav.style.css
index 4abec449498d3a8586f333d9003d001a100ec6f4..5bb036cfb94a7098f23e386101b641f6fbae208a 100644
--- a/src/ui/searchSideNav/searchSideNav.style.css
+++ b/src/ui/searchSideNav/searchSideNav.style.css
@@ -19,5 +19,5 @@
}
connectivity-browser {
- max-height: calc(100% - 220px);
+ max-height: calc(100% - 200px);
}
\ No newline at end of file