diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index 1cb0f8543f11c5548e553af870a410c102760ce7..3005273d5cbbed7939009d9600f1272fc54455a8 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/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>
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.style.css b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..87ae3bab563e38b101c9a2d19adbd8e3a4738e48 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.style.css
+++ b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.style.css
@@ -0,0 +1,4 @@
+.name-container
+{
+ max-height: 100%;
+}
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
index 559034d316c54a81f48b4a75b02b4335d3ee0c01..b96dfd4ea577601da0d32014d4b6ccc211af0417 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
+++ b/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">
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index 150ee0c7d7c3afae98acf4dd5fc0aec0e1506525..1230a72321a950f562ca9a3ea778a930b0316ae7 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/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>