Merge pull request #362 from HumanBrainProject/chore/minorUiChanges

chore: minor ui changes

src/ui/databrowserModule/databrowser/databrowser.template.html

@@ -70,15 +70,16 @@
     <mat-card-content class="dataset-container w-100 overflow-hidden">
       <cdk-virtual-scroll-viewport
         class="h-100"
-        autosize>
-        <div class="virtual-scroll-element"
-          *cdkVirtualFor="let dataset of filteredDataEntry; trackBy: trackByFn; templateCacheSize: 0; let index = index">
+        minBufferPx="200"
+        maxBufferPx="400"
+        itemSize="50">
+        <div class="virtual-scroll-element overflow-hidden" *cdkVirtualFor="let dataset of filteredDataEntry; trackBy: trackByFn; templateCacheSize: 0; let index = index">
 
           <!-- divider, show if not first -->
           <mat-divider *ngIf="index !== 0"></mat-divider>
 
           <single-dataset-list-view
-            class="d-block pt-1 pb-1"
+            class="d-block pt-1 pb-1 h-100"
             [kgSchema]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[0]"
             [kgId]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[1]"
             [dataset]="dataset"
@@ -117,7 +118,7 @@
             <small *ngIf="dataentries.length > 0" class="text-muted">
               <ng-template [ngIf]="modalityPickerCmp && modalityPickerCmp.checkedModality.length > 0"
                 [ngIfElse]="noFilterTmpl">
-                {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} filtered / {{ dataentries.length }} datasets
+                {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} / {{ dataentries.length }}
               </ng-template>
               
               <ng-template #noFilterTmpl>

src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.style.css

+.name-container
+{
+  max-height: 100%;
+}

src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html

@@ -2,12 +2,14 @@
   (click)="ripple ? showDetailInfo() : null"
   [iav-stop]="ripple ? 'click' : null"
   [matRippleDisabled]="!ripple"
-  class="d-flex flex-row flex-nowrap align-items-center">
+  class="d-flex flex-row flex-nowrap align-items-center h-100">
 
   <!-- title -->
-  <small class="flex-grow-1 flex-shrink-1">
-    {{ name }}
-  </small>
+  <div class="flex-grow-1 name-container d-flex align-items-start">
+    <small class="flex-grow-1 flex-shrink-1">
+      {{ name }}
+    </small>
+  </div>
 
 
   <ng-container *ngIf="downloadEnabled">

src/ui/searchSideNav/searchSideNav.template.html

@@ -87,6 +87,10 @@
 
         <!-- single region -->
         <ng-template [ngIf]="regionsSelected.length === 1" [ngIfElse]="multiRegionTemplate">
+          
+          <small class="text-muted">
+            Region selected
+          </small>
 
           <!-- selected brain region -->
           <div class="pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap">
@@ -104,28 +108,37 @@
 
         <!-- multi region -->
         <ng-template #multiRegionTemplate>
-          <cdk-virtual-scroll-viewport class="h-100" itemSize="55">
-            <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 mr-2"></i>
-    
-                <small class="flex-grow-1 flex-shrink-1 ">
-                  {{ region.name }}
-                </small>
-    
-                <button mat-icon-button
-                  class="flex-grow-0 flex-shrink-0"
-                  (click)="removeRegion(region)" >
-                  <i class="fas fa-trash"></i>
-                </button>
+          <div class="h-100 d-flex flex-column">
+            <small class="d-block text-muted flex-shrink-0 flex-grow-0">
+              {{ regionsSelected.length }} regions selected
+            </small>
+            <cdk-virtual-scroll-viewport
+              class="flex-grow-1 flex-shrink-1"
+              itemSize="55"
+              maxBufferPx="600"
+              minBufferPx="300">
+              <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 mr-2"></i>
+      
+                  <small class="flex-grow-1 flex-shrink-1 ">
+                    {{ region.name }}
+                  </small>
+      
+                  <button mat-icon-button
+                    class="flex-grow-0 flex-shrink-0"
+                    (click)="removeRegion(region)" >
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </div>
               </div>
-            </div>
-          </cdk-virtual-scroll-viewport>
+            </cdk-virtual-scroll-viewport>
+          </div>
         </ng-template>
 
       </div>