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 1c406eb051ea5d288477110ace75ce59c4c615d5..7151f67341e35826dbbe90feff7b3285d411eb71 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -1,9 +1,11 @@
import {
- AfterViewInit, ChangeDetectorRef,
- Component,
- ElementRef,
- OnDestroy,
- ViewChild,
+ AfterContentChecked,
+ AfterContentInit, AfterViewChecked,
+ AfterViewInit, ChangeDetectorRef,
+ Component,
+ ElementRef,
+ OnDestroy,
+ ViewChild,
} from "@angular/core";
import {select, Store} from "@ngrx/store";
import {fromEvent, Observable, Subscription} from "rxjs";
@@ -16,10 +18,13 @@ import {VIEWERSTATE_CONTROLLER_ACTION_TYPES} from "src/ui/viewerStateController/
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>
@@ -29,11 +34,8 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
public expandMenuIndex = -1
public allRegions = []
public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>>
- private areaHemisphere: string
public math = Math
-
-
@ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef
constructor(
@@ -61,6 +63,10 @@ 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 => {
@@ -78,7 +84,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
}),
this.connectivityRegion$.subscribe(cr => {
this.region = cr
- this.areaHemisphere = cr.includes('left hemisphere') ? ' - left hemisphere' : ' - right hemisphere'
this.changeDetectionRef.detectChanges()
}),
)
@@ -93,10 +98,20 @@ 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.subscriptions.forEach(s => s.unsubscribe())
}
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
index 349733a88416477ede17ca0ef9c5e4fa3ba25221..61ef3010b3a960b6d8677d1ffceaffa40bd85ea3 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -1,19 +1,80 @@
-<div class="w-100 h-100 overflow-auto d-block d-flex flex-column pb-2" #connectivityComponent>
- <!--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(); setDefaultMap()" class="far fa-times-circle cursorPointer"></i>
</div>
+ <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>
+
+ <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">
+
+ <!-- shown when off -->
+ <div sleight-of-hand-front>
+ <button
+ mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+ </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>
+
+ <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>
+
+ </div>
+ </div>
+
<div slot="connectedRegionMenu">
<div class="d-flex flex-column p-0 m-0" *ngIf="expandMenuIndex >= 0">
<mat-divider></mat-divider>
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