diff --git a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts b/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts
index 02d2c0edfd876f17cce72d040f01f7f48acbf20f..1e42ac0c65b54c8389eecb7c083889ca5649bc94 100644
--- a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts
+++ b/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts
@@ -3,6 +3,7 @@ import { Store, select } from "@ngrx/store";
import { Observable, combineLatest } from "rxjs";
import { viewerStateGetOverlayingAdditionalParcellations, viewerStateGetSelectedAtlas, viewerStateToggleAdditionalLayer, viewerStateRemoveAdditionalLayer } from 'src/services/state/viewerState.store.helper'
import { map, shareReplay, withLatestFrom, filter, tap } from "rxjs/operators";
+import {safeFilter} from "src/services/stateStore.service";
@Component({
selector: 'atlas-layer-container',
@@ -21,12 +22,15 @@ export class AtlasLayerContainer {
public parcellationOfInterest$: Observable<any>
public availableDatasets: number
+ public connectedRegionsNumber: number
private overlayingParcellationLayers$: Observable<any[]>
private parcellationSelected$: Observable<any>
public visibleTab: 'dataset' | 'connectivity' | 'hierarchy'
+ private connectivityRegion$: Observable<any>
+
constructor(
private store$: Store<any>
){
@@ -65,6 +69,12 @@ export class AtlasLayerContainer {
return firstOverlayingLayer || parcellationSelected
})
)
+
+ this.connectivityRegion$ = this.store$.pipe(
+ select('viewerState'),
+ safeFilter('connectivityRegion'),
+ map(state => state.connectivityRegion),
+ )
}
handleClickWidget(type: 'dataset' | 'connectivity' | 'hierarchy'){
diff --git a/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html b/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html
index 4f7a021a8cf289d60d95ac072605864367fc2e0d..419c805ab3055bba0c29d09537a23882a7066d49 100644
--- a/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html
+++ b/src/ui/atlasLayerWidget/alwContainer/alwContainer.template.html
@@ -36,7 +36,10 @@
</ng-container>
</mat-card-header>
<mat-card-content class="flex-grow-1">
- connectivity data here ....
+ <connectivity-browser (closeConnectivity)="visibleTab = null; connectedRegionsNumber = null"
+ (connectedAreaCount)="connectedRegionsNumber = $event"
+ class="pe-all flex-grow-5 flex-shrink-1">
+ </connectivity-browser>
</mat-card-content>
</mat-card>
</div>
@@ -90,7 +93,9 @@
<ng-container *ngTemplateOutlet="btnTmpl; context: { tab: 'hierarchy', iconClass: 'fas fa-sitemap' }">
</ng-container>
- <ng-container *ngTemplateOutlet="btnTmpl; context: { tab: 'connectivity', iconClass: 'fas fa-braille' }">
+ <ng-container *ngTemplateOutlet="btnTmpl; context: { tab: 'connectivity', iconClass: 'fas fa-braille',
+ badge: visibleTab === 'connectivity' && (connectivityRegion$ | async).length ? null : connectedRegionsNumber,
+ tooltipText: !(connectivityRegion$ | async).length? 'Select connectivity region' : null, matBtnDisabled: !(connectivityRegion$ | async).length} ">
</ng-container>
<ng-container *ngTemplateOutlet="btnTmpl; context: { tab: 'dataset', iconClass: 'fas fa-database', badge: visibleTab === 'dataset' ? null : availableDatasets }">
@@ -102,13 +107,16 @@
let-matBtnDisabled="matBtnDisabled"
let-tab="tab"
let-badge="badge"
- let-iconClass="iconClass">
+ let-iconClass="iconClass"
+ let-tooltipText="tooltipText">
<iav-dynamic-mat-button
class="pe-all"
[matBadge]="badge"
+ [matTooltip]="tooltipText"
+ matTooltipPosition="after"
matBadgeColor="accent"
iav-delay-event="click"
- (iav-delay-event-emit)="handleClickWidget(tab)"
+ (iav-delay-event-emit)="!matBtnDisabled && handleClickWidget(tab)"
[iav-dynamic-mat-button-disabled]="matBtnDisabled"
iav-dynamic-mat-button-color="primary"
[iav-dynamic-mat-button-style]="tab === visibleTab ? 'mat-mini-fab' : 'mat-icon-button'">
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index 609d916759dca4eff4dc9298a3406cdaaa5d15b4..b2590e7b98ef8b7df67ec716fe694dedce14e507 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -2,8 +2,8 @@ import {
AfterContentChecked,
AfterViewInit, ChangeDetectorRef,
Component,
- ElementRef,
- OnDestroy,
+ ElementRef, EventEmitter, Input,
+ OnDestroy, Output,
ViewChild,
} from "@angular/core";
import {select, Store} from "@ngrx/store";
@@ -35,8 +35,18 @@ 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, static: true}) public connectivityComponentElement: ElementRef
+ @Output() public closeConnectivity: EventEmitter<boolean> = new EventEmitter()
+ @Output() public connectedAreaCount: EventEmitter<number> = new EventEmitter()
+
constructor(
private store$: Store<any>,
private changeDetectionRef: ChangeDetectorRef,
@@ -91,6 +101,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
fromEvent(this.connectivityComponentElement.nativeElement, 'connectivityDataReceived', { capture: true })
.subscribe((e: CustomEvent) => {
this.connectedAreas = e.detail
+ this.connectedAreaCount.emit(this.connectedAreas.length)
if (this.connectedAreas.length > 0) { this.addNewColorMap() }
}),
fromEvent(this.connectivityComponentElement.nativeElement, 'collapsedMenuChanged', { capture: true })
@@ -134,6 +145,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
}
public closeConnectivityView() {
+ this.closeConnectivity.emit()
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 970cb6d35015c6d2570b7ec13444b7d401dea6f4..97db5b884359dfba466517de70d745c08d7defb5 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -11,10 +11,10 @@
show-description="false"
show-dataset-name="false"
custom-dataset-selector="true"
- [customHeight]="componentHeight + 'px'">
+ [customHeight]="componentHeight + 'px'"
+ [ngStyle]="connectivityComponentStyle">
<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 cursor-pointer"></i>
+ <button (click)="closeConnectivityView(); setDefaultMap()" class="w-100" mat-button><i class="far fa-times-circle cursor-pointer"></i> Close connectivity</button>
</div>
<div slot="dataset">
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index c41de0bebd42c53766b2ecfee470134e6015660e..31e8849a8184a7c7c957d25122becb8f716d349f 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -6,13 +6,6 @@
class="d-block w-100">
</region-text-search-autocomplete>
- <ng-container *ngIf="(sidePanelExploreCurrentViewIsOpen$ | async)" [ngSwitch]="(sidePanelCurrentViewContent | async)">
- <connectivity-browser class="pe-all flex-grow-5 flex-shrink-1"
- *ngSwitchCase = "'Connectivity'">
-
- </connectivity-browser>
- </ng-container>
-
</div>
<div class="d-none">
@@ -44,4 +37,4 @@
</i>
</button>
</div>
-</ng-template>
+</ng-template>