diff --git a/package.json b/package.json
index 4a0407ded877b8aa0235470225e0c2d7ca3e9908..8faee773bfed71ce30d91632abd1f7be4f2eceb1 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.1.0",
+ "hbp-connectivity-component": "^0.3.3",
"zone.js": "^0.10.2"
}
}
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 2274445cc2a7888affbc3f84f472b1c70eca8790..77eb5642a313267cfb3ed3584a255b8956d559b7 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -649,11 +649,6 @@ body::after
flex-grow: 3!important;
}
-.flex-grow-5
-{
- flex-grow: 5!important;
-}
-
.layerBrowserContainer
{
margin:-1em!important;
@@ -751,3 +746,8 @@ kg-dataset-previewer > img
width: 100%;
}
+mat-list.sm mat-list-item
+{
+ height:2rem!important;
+ font-size: 0.8rem!important;
+}
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index b8794b5cac7177f29398a92871e4283424618fc4..1b8d45857f19bdfeed417f2390d160357a56ca3f 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -29,7 +29,6 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
private connectivityRegion$: Observable<any>
private templateSelected$: Observable<any>
private selectedParcellation$: Observable<any>
- public selectedRegions$: Observable<any[]>
private subscriptions: Subscription[] = []
public expandMenuIndex = -1
@@ -44,7 +43,8 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
maxHeight: '500px'
}
- @ViewChild('connectivityComponent', {read: ElementRef, static: true}) public connectivityComponentElement: ElementRef
+ @ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef<HTMLHbpConnectivityMatrixRowElement>
+
@Output() public closeConnectivity: EventEmitter<boolean> = new EventEmitter()
@Output() public connectedAreaCount: EventEmitter<number> = new EventEmitter()
@@ -63,15 +63,10 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
this.connectivityRegion$ = this.store$.pipe(
select('viewerState'),
safeFilter('connectivityRegion'),
- map(state => state.connectivityRegion)
+ map(state => state.connectivityRegion),
+ distinctUntilChanged()
)
- this.selectedRegions$ = this.store$.pipe(
- select('viewerState'),
- filter(state => isDefined(state) && isDefined(state.regionsSelected)),
- map(state => state.regionsSelected),
- distinctUntilChanged(),
- )
this.templateSelected$ = this.store$.pipe(
select('viewerState'),
select('templateSelected'),
@@ -80,7 +75,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
}
public ngAfterContentChecked(): void {
- this.componentHeight = this.connectivityComponentElement.nativeElement.clientHeight
+ this.componentHeight = this.connectivityComponentElement?.nativeElement.clientHeight
}
public ngAfterViewInit(): void {
@@ -100,6 +95,13 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
}),
this.connectivityRegion$.subscribe(cr => {
if (cr && cr.length) {
+ if (this.region !== cr && this.defaultColorMap) {
+ this.setDefaultMap()
+ this.store$.dispatch({
+ type: SET_CONNECTIVITY_VISIBLE,
+ payload: false,
+ })
+ }
this.region = cr
this.changeDetectionRef.detectChanges()
}
@@ -109,7 +111,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
this.closeConnectivityView()
}))
this.subscriptions.push(
- fromEvent(this.connectivityComponentElement.nativeElement, 'connectivityDataReceived', { capture: true })
+ fromEvent(this.connectivityComponentElement?.nativeElement, 'connectivityDataReceived', { capture: true })
.subscribe((e: CustomEvent) => {
this.connectedAreas = e.detail
this.connectedAreaCount.emit(this.connectedAreas.length)
@@ -118,15 +120,25 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
} else {
this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
} }),
- fromEvent(this.connectivityComponentElement.nativeElement, 'collapsedMenuChanged', { capture: true })
+ fromEvent(this.connectivityComponentElement?.nativeElement, 'collapsedMenuChanged', { capture: true })
.subscribe((e: CustomEvent) => {
this.expandMenuIndex = e.detail
}),
- fromEvent(this.connectivityComponentElement.nativeElement, 'datasetDataReceived', { capture: true })
+ fromEvent(this.connectivityComponentElement?.nativeElement, 'datasetDataReceived', { capture: true })
.subscribe((e: CustomEvent) => {
this.datasetList = e.detail
this.selectedDataset = this.datasetList[0]
}),
+ fromEvent(this.connectivityComponentElement?.nativeElement, 'customToolEvent', { capture: true })
+ .subscribe((e: CustomEvent) => {
+ if (e.detail.name === 'export csv') {
+ // ToDo Fix in future to use component
+ const a = document.querySelector('hbp-connectivity-matrix-row')
+ a.downloadCSV()
+ } else if (e.detail.name === 'Apply colors to viewer') {
+ this.defaultColorMap && this.toggleConnectivityOnViewer( {checked: this.showConnectivityToggle? false : true})
+ }
+ }),
)
}
@@ -151,6 +163,11 @@ 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) {
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
index 597ccb9a34aa1e8c36d7cb3c99aabf3b097c9794..9f626cf3207340f3a1622d5d36fa75fd43f30c08 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -11,10 +11,10 @@
show-toolbar="false"
show-description="false"
show-dataset-name="false"
- custom-dataset-selector="true">
- <div slot="header" class="w-100 d-flex justify-content-between mt-3">
- <mat-slide-toggle (change)="this.defaultColorMap && toggleConnectivityOnViewer($event)">Show connectivity on viewer</mat-slide-toggle>
- </div>
+ custom-dataset-selector="true"
+ tools_showlog="true"
+ [tools_custom]='[{"name": "Apply colors to viewer", "type": "checkbox", "checked": showConnectivityToggle}, {"name": "export csv", "type": "button"}]'
+ hide-export-view="true">
<div slot="dataset">
<div *ngIf="datasetList.length && selectedDataset" class=" flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index e4db541a0072a4b05c0af33d171b268d7eb48d23..ef857d221260faa750454650437f1aff23993a1d 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -181,6 +181,10 @@ div#scratch-pad
text-align: right;
}
+.accordion-icon
+{
+ width:1.5rem;
+}
.tab-toggle-container
{
margin-top: 1.5rem;
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index aff06dee64595cc16c52c45addf3260b67e3714f..a888f42b0264f6e4e8301cee3e0f0fae6391d549 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -200,93 +200,6 @@
</ng-template>
<!-- single region template -->
-<ng-template #singleRegionTmpl let-region="region">
- <ng-template #regionDetailTmpl>
- <div class="placeholder-region-detail side-nav-cover mat-elevation-z4">
- <span class="text-muted">
- Select a region by clicking on the viewer or search from above
- </span>
- </div>
- </ng-template>
-
- <!-- region detail -->
- <ng-container *ngIf="region; else regionDetailTmpl">
- <region-menu
- [region]="region"
- class="side-nav-cover mat-elevation-z4">
- </region-menu>
- </ng-container>
-
- <!-- regional features -->
- <mat-card class="mt-3 overflow-hidden mat-elevation-z4 side-nav-cover feature-card d-flex flex-column">
- <mat-card-subtitle class="flex-grow-0 flex-shrink-0 font-weight-bold">
- Regional features
- </mat-card-subtitle>
-
- <mat-card-content class="flex-grow-1 flex-shrink-1 w-100 feature-card overflow-hidden">
- <ng-container *ngIf="region; else regionalFeaturesPlaceholderTmpl">
- <data-browser
- [template]="templateSelected$ | async"
- [parcellation]="selectedParcellation"
- [regions]="[region]">
- </data-browser>
- </ng-container>
-
- <!-- place holder regional features -->
- <ng-template #regionalFeaturesPlaceholderTmpl>
-
- <span *ngIf="selectedParcellation">
- Regional features available in {{ selectedParcellation.name }}
- </span>
-
- <div class="d-inline-flex w-100 modality-card-container">
- <mat-card class="flex-grow-0 flex-shrink-0 modality-card m-2" *ngFor="let dataM of dataBrowser.countedDataM">
- <mat-card-content>
- <span>
- {{ dataM.name }}
- </span>
- <small class="text-muted">
- ({{ dataM.occurance }})
- </small>
- </mat-card-content>
- </mat-card>
- </div>
-
- <data-browser
- class="invisible"
- [template]="templateSelected$ | async"
- [parcellation]="selectedParcellation"
- #dataBrowser="dataBrowser">
- </data-browser>
- </ng-template>
- </mat-card-content>
-
- </mat-card>
-
- <mat-card *ngIf="selectedParcellation
- && selectedParcellation.hasAdditionalViewMode
- && selectedParcellation.hasAdditionalViewMode.includes('connectivity')
- && selectedRegions?.length"
- class="mt-3 side-nav-cover d-flex flex-column">
- <mat-card-subtitle class="flex-grow-0 flex-shrink-0">
- Connectivity
- </mat-card-subtitle>
-
- <mat-card-content class="flex-grow-1 flex-shrink-1 w-100">
- <!-- add connectivity component -->
- <ng-container *ngIf="region; else cnctvtyPlaceholderTmpl">
- <connectivity-browser class="pe-all flex-grow-5 flex-shrink-1">
- </connectivity-browser>
- </ng-container>
-
- <ng-template #cnctvtyPlaceholderTmpl>
- CONNECTIVITY PLACEHOLDER
- </ng-template>
- </mat-card-content>
- </mat-card>
-
-</ng-template>
-
<div id="scratch-pad">
</div>
@@ -315,6 +228,143 @@
</div>
</ng-template>
+<ng-template #singleRegionTmpl let-region="region">
+ <ng-template #regionDetailTmpl>
+ <div class="placeholder-region-detail side-nav-cover mat-elevation-z4">
+ <span class="text-muted">
+ Select a region by clicking on the viewer or search from above
+ </span>
+ </div>
+ </ng-template>
+
+ <!-- region detail -->
+ <ng-container *ngIf="region; else regionDetailTmpl">
+ <region-menu
+ [showRegionInOtherTmpl]="false"
+ [region]="region"
+ class="side-nav-cover mat-elevation-z4">
+ </region-menu>
+ </ng-container>
+
+
+ <mat-accordion *ngIf="region"
+ class="side-nav-cover mt-2"
+ iav-region
+ [region]="region"
+ #iavRegion="iavRegion">
+
+ <!-- expansion tmpl -->
+ <ng-template #ngMatAccordionTmpl
+ let-title="title"
+ let-desc="desc"
+ let-iconClass="iconClass"
+ let-iavNgIf="iavNgIf"
+ let-content="content">
+ <mat-expansion-panel class="mt-1 mb-1"
+ hideToggle
+ *ngIf="iavNgIf">
+
+ <mat-expansion-panel-header>
+
+ <!-- title -->
+ <mat-panel-title>
+ {{ title }}
+ </mat-panel-title>
+
+ <!-- desc + icon -->
+ <mat-panel-description class="d-flex align-items-center justify-content-end">
+ <span class="mr-3">{{ desc }}</span>
+ <span class="accordion-icon d-inline-flex justify-content-center">
+ <i [class]="iconClass"></i>
+ </span>
+ </mat-panel-description>
+
+ </mat-expansion-panel-header>
+
+ <!-- content -->
+ <ng-template matExpansionPanelContent>
+ <ng-container *ngTemplateOutlet="content">
+ </ng-container>
+ </ng-template>
+ </mat-expansion-panel>
+ </ng-template>
+
+ <!-- Explore in other template -->
+ <ng-container *ngIf="iavRegion.regionInOtherTemplates$ | async as regionInOtherTemplates">
+
+ <ng-template #exploreInOtherTmpl>
+ <mat-list class="action-list sm cursor-default">
+ <mat-list-item *ngFor="let sameRegion of regionInOtherTemplates"
+ (click)="iavRegion.changeView(sameRegion)"
+ [matTooltip]="sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '')"
+ mat-ripple>
+ {{ sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '') }}
+ </mat-list-item>
+ </mat-list>
+ </ng-template>
+
+ <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
+ title: 'Explore in other templates',
+ desc: regionInOtherTemplates.length,
+ iconClass: 'fas fa-brain',
+ iavNgIf: regionInOtherTemplates.length,
+ content: exploreInOtherTmpl
+ }">
+
+
+ </ng-container>
+ </ng-container>
+
+ <!-- regional features-->
+ <ng-template #regionalFeaturesTmpl>
+ <data-browser [template]="templateSelected$ | async"
+ [parcellation]="selectedParcellation"
+ [regions]="[region]">
+ </data-browser>
+ </ng-template>
+
+ <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
+ title: 'Regional features',
+ desc: 123,
+ iconClass: 'fas fa-database',
+ iavNgIf: true,
+ content: regionalFeaturesTmpl
+ }">
+ </ng-container>
+
+ <!-- Connectivity -->
+ <ng-template #connectivityContentTmpl>
+ <mat-card-content class="flex-grow-1 flex-shrink-1 w-100">
+ <connectivity-browser class="pe-all flex-shrink-1">
+ </connectivity-browser>
+ </mat-card-content>
+ </ng-template>
+
+ <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
+ title: 'Connectivity',
+ desc: connectedCounterDir.value,
+ iconClass: 'fas fa-braille',
+ iavNgIf: selectedParcellation
+ && selectedParcellation.hasAdditionalViewMode
+ && selectedParcellation.hasAdditionalViewMode.includes('connectivity'),
+ content: connectivityContentTmpl
+ }">
+ </ng-container>
+
+ </mat-accordion>
+ <div class="w-0 h-0"
+ iav-counter
+ #connectedCounterDir="iavCounter">
+
+ <hbp-connectivity-matrix-row [region]="region.name"
+ (connectivityDataReceived)="connectedCounterDir.value = $event.detail.length"
+ class="invisible d-block h-0 w-0"
+ loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
+ dataset-url="https://connectivityquery-connectivity.apps-dev.hbp.eu/studies">
+ </hbp-connectivity-matrix-row>
+ </div>
+</ng-template>
+
<!-- overlay templates -->
<!-- perspective view tmpl -->
diff --git a/src/ui/parcellationRegion/region.base.ts b/src/ui/parcellationRegion/region.base.ts
index 5cd0adbee794dbf5f60e7e08e21bb3750df472a4..6f4eac0d406e244bb75342346d3a0ba272fb3d41 100644
--- a/src/ui/parcellationRegion/region.base.ts
+++ b/src/ui/parcellationRegion/region.base.ts
@@ -12,11 +12,10 @@ export class RegionBase {
public rgbString: string
public rgbDarkmode: boolean
- private _region: any
+ @Input()
+ showRegionInOtherTmpl: boolean = true
- get region(){
- return this._region
- }
+ private _region: any
@Input()
set region(val) {
@@ -28,6 +27,10 @@ export class RegionBase {
const [h, s, l] = rgbToHsl(...this._region.rgb)
this.rgbDarkmode = l < 0.4
}
+
+ get region(){
+ return this._region
+ }
private region$: BehaviorSubject<any> = new BehaviorSubject(null)
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.component.spec.ts b/src/ui/parcellationRegion/regionMenu/regionMenu.component.spec.ts
index eda0f43eb94b303370a15b4f0bf4b87b35733544..0a89295f665f26c06964abf73159e57df948bcc1 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.component.spec.ts
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.component.spec.ts
@@ -119,6 +119,23 @@ describe('> regionMenu.component.ts', () => {
expect(toggleBtn).toBeTruthy()
})
+ it('> if showRegionInOtherTmpl is set to false, toggle btn will not be shown', () => {
+
+ const mockStore = TestBed.inject(MockStore)
+ mockStore.overrideSelector(
+ regionInOtherTemplateSelector,
+ nohemisphereHrms
+ )
+
+ const fixture = TestBed.createComponent(RegionMenuComponent)
+ fixture.componentInstance.region = mr1
+ fixture.componentInstance.showRegionInOtherTmpl = false
+ fixture.detectChanges()
+
+ const toggleBtn = fixture.debugElement.query( By.css(`[aria-label="${ARIA_LABELS.SHOW_IN_OTHER_REF_SPACE}"]`) )
+ expect(toggleBtn).toBeFalsy()
+ })
+
it('> even if toggleBtn exists, list should be hidden by default', () => {
const mockStore = TestBed.inject(MockStore)
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.style.css b/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
index 79e6b14b0cb65fff2a7a375c3e7ac827c825f699..7cccfc149869e1d1b181e3b5413606eee87807d6 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
@@ -1,10 +1,3 @@
-mat-list.sm mat-list-item
-{
- height:36px;
- font-size: 90%;
- cursor: default;
-}
-
mat-icon
{
transform: scale(0.75);
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
index ba865d1c594d25fa17a255fdd80046f31c761f02..f5c9a6a49e74ab04b0f2238da39c7d45e72a9d82 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
@@ -57,7 +57,7 @@
<mat-divider></mat-divider>
- <mat-list class="action-list sm">
+ <mat-list class="action-list sm cursor-default">
<!-- connectivity -->
<div *ngIf="hasConnectivity" iav-switch #connectivitySwitch="iavSwitch">
@@ -86,7 +86,9 @@
</div>
<!-- change template -->
- <ng-container *ngTemplateOutlet="regionInOtherTemplatesTmpl; context: { regionInOtherTemplates: regionInOtherTemplates$ | async }">
+ <ng-container *ngIf="showRegionInOtherTmpl">
+ <ng-container *ngTemplateOutlet="regionInOtherTemplatesTmpl; context: { regionInOtherTemplates: regionInOtherTemplates$ | async }">
+ </ng-container>
</ng-container>
</mat-list>
diff --git a/src/util/directives/counter.directive.ts b/src/util/directives/counter.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d66f71877e4f13631a4ad6b4db194aa540106de2
--- /dev/null
+++ b/src/util/directives/counter.directive.ts
@@ -0,0 +1,10 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+ selector: '[iav-counter]',
+ exportAs: 'iavCounter'
+})
+
+export class CounterDirective{
+ public value: number = 0
+}
\ No newline at end of file
diff --git a/src/util/util.module.ts b/src/util/util.module.ts
index 74bea90caf7c10bd18596c596344e03b4f94a490..4c8bf1ce5bc6b597e1bc9229c02f48df74c6d949 100644
--- a/src/util/util.module.ts
+++ b/src/util/util.module.ts
@@ -15,6 +15,7 @@ import { MediaQueryDirective } from './directives/mediaQuery.directive'
import { LayoutModule } from "@angular/cdk/layout";
import { MapToPropertyPipe } from "./pipes/mapToProperty.pipe";
import {ClickOutsideDirective} from "src/util/directives/clickOutside.directive";
+import { CounterDirective } from "./directives/counter.directive";
@NgModule({
imports:[
@@ -34,7 +35,8 @@ import {ClickOutsideDirective} from "src/util/directives/clickOutside.directive"
SwitchDirective,
MediaQueryDirective,
MapToPropertyPipe,
- ClickOutsideDirective
+ ClickOutsideDirective,
+ CounterDirective
],
exports: [
FilterNullPipe,
@@ -50,7 +52,8 @@ import {ClickOutsideDirective} from "src/util/directives/clickOutside.directive"
SwitchDirective,
MediaQueryDirective,
MapToPropertyPipe,
- ClickOutsideDirective
+ ClickOutsideDirective,
+ CounterDirective
]
})