Merge pull request #349 from HumanBrainProject/chore/reworkingDatabrowserUi

chore: reworking data browser ui

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;
+}

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 {

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']">

src/ui/searchSideNav/searchSideNav.style.css

@@ -2,3 +2,10 @@
 {
   height:78px;
 }
+
+/* exactly 1.5 line height */
+
+.h-117px
+{
+  min-height:117px!important;
+}

src/ui/searchSideNav/searchSideNav.template.html

 <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]>