diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 7d93f74715df0a22257a3638b3ad232c02c39a8a..511b7e74ea83b09b394bfffde7c78f37d82f0f77 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -663,3 +663,13 @@ body::after
pointer-events: none;
z-index: 99999;
}
+
+.flex-grow-3
+{
+ flex-grow: 3!important;
+}
+
+.flex-grow-5
+{
+ flex-grow: 5!important;
+}
diff --git a/src/services/state/ngViewerState.store.ts b/src/services/state/ngViewerState.store.ts
index 3467d22582fd0bb8b606f8e5bda91b25da87f202..935a36e3387535f401fd8a0b09da48a9d46b556c 100644
--- a/src/services/state/ngViewerState.store.ts
+++ b/src/services/state/ngViewerState.store.ts
@@ -256,9 +256,11 @@ export class NgViewerUseEffect implements OnDestroy{
})
)
+ const scanFn = (acc: string[], curr: string):string[] => [curr, ...acc.slice(0,1)]
+
this.toggleMaximiseMode$ = toggleMaxmimise$.pipe(
withLatestFrom(this.panelMode$.pipe(
- scan((acc, curr: string) => [curr, ...acc.slice(0,1)], [])
+ scan(scanFn, [])
)),
map(([ _, panelModes ]) => {
return {
diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index ca40722db5809fc4de0280314b9153dbf933c4e2..522980dc8b50ea317853eb0a373d706e44e1b9a7 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/src/ui/databrowserModule/databrowser/databrowser.template.html
@@ -3,11 +3,8 @@
class="w-100 overflow-hidden d-block flex-grow-1 flex-shrink-1 d-flex flex-column">
<!-- transclusion header -->
- <mat-card-header>
- <ng-content select="[card-header]">
-
- </ng-content>
- </mat-card-header>
+ <ng-content select="[card-header]">
+ </ng-content>
<!-- transclusion content prepend -->
<ng-content select="[card-content='prepend']">
diff --git a/src/ui/searchSideNav/searchSideNav.style.css b/src/ui/searchSideNav/searchSideNav.style.css
index 484b4a0181300ea85a44957a71e8cc6750c7f30b..0e8a183c297a23062a4367233ef7429dd5469e69 100644
--- a/src/ui/searchSideNav/searchSideNav.style.css
+++ b/src/ui/searchSideNav/searchSideNav.style.css
@@ -2,3 +2,10 @@
{
height:78px;
}
+
+/* exactly 1.5 line height */
+
+.h-117px
+{
+ min-height:117px!important;
+}
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index b96c5d787c4fb7daf18fc10eef439ffe3dff1741..a531e4cc1650db113d0c544676b20d26971efd1b 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -1,5 +1,5 @@
<div class="d-flex flex-column h-100">
- <viewer-state-controller class="pe-all flex-grow-0 flex-shrink-0 mb-2" #viewerStateController>
+ <viewer-state-controller class="pe-all flex-grow-0 flex-shrink-0 mb-1" #viewerStateController>
<!-- content append -->
<ng-container card-content="append">
@@ -23,86 +23,90 @@
</div>
</viewer-state-controller>
- <data-browser
- class="pe-all flex-grow-1 flex-shrink-1"
- *ngIf="showDataset"
- [template]="viewerStateController.templateSelected$ | async"
- [parcellation]="viewerStateController.parcellationSelected$ | async"
- [regions]="viewerStateController.regionsSelected$ | async"
- (dataentriesUpdated)="availableDatasets = $event.length">
-
- <!-- content prepend -->
- <ng-container *ngIf="viewerStateController.regionsSelected$ | async as regionsSelected" card-content="prepend">
- <mat-card-content [ngClass]="{'h-10em': regionsSelected.length > 1}">
-
- <!-- show when no region is selected -->
- <ng-template [ngIf]="regionsSelected.length === 0" [ngIfElse]="showBrainRegions">
- <div class="d-flex flex-row align-items-center flex-nowrap">
+ <ng-container *ngIf="showDataset">
+
+ <!-- selected regions container -->
+ <mat-card *ngIf="viewerStateController.regionsSelected$ | async as regionsSelected"
+ [ngClass]="{'h-117px flex-grow-1': regionsSelected.length > 1, 'flex-grow-0': regionsSelected.length < 2}"
+ class="flex-shrink-0 mb-1 pe-all">
+
+ <!-- show when no region is selected -->
+ <mat-card-subtitle *ngIf="regionsSelected.length === 0">
+ In the current view
+ </mat-card-subtitle>
+
+
+ <!-- show when regions are selected -->
+ <mat-card-content *ngIf="regionsSelected.length > 0" class="h-100">
+
+ <!-- single region -->
+ <ng-template [ngIf]="regionsSelected.length === 1" [ngIfElse]="multiRegionTemplate">
+
+ <!-- selected brain region -->
+ <div class="pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap">
+ <i class="fas fa-brain font-2x mr-2"></i>
+
<span class="font-weight-bold">
- In the current view
+ {{ regionsSelected[0].name }}
</span>
+
+ <button (click)="removeRegion(regionsSelected[0])" mat-icon-button>
+ <i class="fas fa-trash"></i>
+ </button>
</div>
</ng-template>
- <!-- show when regions are selected -->
- <ng-template #showBrainRegions>
-
- <!-- single region -->
- <ng-template [ngIf]="regionsSelected.length === 1" [ngIfElse]="multiRegionTemplate">
+ <!-- multi region -->
+ <ng-template #multiRegionTemplate>
+ <cdk-virtual-scroll-viewport class="h-100" itemSize="78">
+ <div *cdkVirtualFor="let region of regionsSelected; trackBy: trackByFn ; let index = index"
+ class="region-wrapper d-flex flex-column" >
+ <!-- divider if index !== 0 -->
+ <mat-divider class="flex-grow-0 flex-shrink-0" *ngIf="index !== 0"></mat-divider>
- <!-- selected brain region -->
- <div class="pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap">
- <i class="fas fa-brain font-2x mr-2"></i>
-
- <span class="font-weight-bold">
- {{ regionsSelected[0].name }}
- </span>
-
- <button (click)="removeRegion(regionsSelected[0])" mat-icon-button>
- <i class="fas fa-trash"></i>
- </button>
- </div>
- </ng-template>
-
- <!-- multi region -->
- <ng-template #multiRegionTemplate>
- <cdk-virtual-scroll-viewport class="h-100" itemSize="78">
- <div *cdkVirtualFor="let region of regionsSelected; trackBy: trackByFn ; let index = index"
- class="region-wrapper d-flex flex-column" >
- <!-- divider if index !== 0 -->
- <mat-divider class="flex-grow-0 flex-shrink-0" *ngIf="index !== 0"></mat-divider>
-
- <!-- selected brain region -->
- <div class="flex-grow-1 flex-shrink-1 pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap">
- <i class="flex-grow-0 flex-shrink-0 fas fa-brain font-2x mr-2"></i>
-
- <span class="flex-grow-1 flex-shrink-1 font-weight-bold">
- {{ region.name }}
- </span>
-
- <button mat-icon-button
- class="flex-grow-0 flex-shrink-0"
- (click)="removeRegion(region)" >
- <i class="fas fa-trash"></i>
- </button>
- </div>
+ <!-- selected brain region -->
+ <div class="flex-grow-1 flex-shrink-1 pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap">
+ <i class="flex-grow-0 flex-shrink-0 fas fa-brain font-2x mr-2"></i>
+
+ <span class="flex-grow-1 flex-shrink-1 font-weight-bold">
+ {{ region.name }}
+ </span>
+
+ <button mat-icon-button
+ class="flex-grow-0 flex-shrink-0"
+ (click)="removeRegion(region)" >
+ <i class="fas fa-trash"></i>
+ </button>
</div>
- </cdk-virtual-scroll-viewport>
- </ng-template>
-
+ </div>
+ </cdk-virtual-scroll-viewport>
</ng-template>
+
</mat-card-content>
- </ng-container>
+ </mat-card>
+
+ <data-browser
+ class="pe-all flex-grow-5 flex-shrink-1"
+ [template]="viewerStateController.templateSelected$ | async"
+ [parcellation]="viewerStateController.parcellationSelected$ | async"
+ [regions]="viewerStateController.regionsSelected$ | async"
+ (dataentriesUpdated)="availableDatasets = $event.length">
+
+ <mat-card-subtitle card-header>
+ Related datasets
+ </mat-card-subtitle>
+
+ <!-- footer content -->
+ <div class="d-flex flex-row justify-content-center" card-footer>
+ <button mat-stroked-button
+ class="m-1"
+ (click)="showDataset = false" >
+ <i class="fas fa-chevron-up"></i>
+ </button>
+ </div>
+ </data-browser>
+ </ng-container>
- <!-- footer content -->
- <div class="d-flex flex-row justify-content-center" card-footer>
- <button mat-stroked-button
- class="m-1"
- (click)="showDataset = false" >
- <i class="fas fa-chevron-up"></i>
- </button>
- </div>
- </data-browser>
</div>
<div [hidden]>