bugfix: list region view

src/ui/searchSideNav/searchSideNav.template.html

@@ -74,13 +74,15 @@
   
                 <!-- 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="fas fa-brain font-2x mr-2"></i>
+                  <i class="flex-grow-0 flex-shrink-0 fas fa-brain font-2x mr-2"></i>
       
-                  <span class="font-weight-bold">
+                  <span class="flex-grow-1 flex-shrink-1 font-weight-bold">
                     {{ region.name }}
                   </span>
       
-                  <button (click)="removeRegion(region)" mat-icon-button>
+                  <button mat-icon-button
+                    class="flex-grow-0 flex-shrink-0"
+                    (click)="removeRegion(region)" >
                     <i class="fas fa-trash"></i>
                   </button>
                 </div>

src/ui/viewerStateController/regionHierachy/regionHierarchy.template.html

@@ -48,7 +48,7 @@
     <mat-divider></mat-divider>
 
     <div *ngIf="(selectedRegions | filterRowsByVisbilityPipe : null : filterTreeBySearch).length > 0"
-      class="mt-2 min-h-8"
+      class="mt-2 min-h-8 flex-grow-1 flex-shrink-1"
       hideScrollbarcontainer>
       <regions-list-view class="d-block h-100"
         (gotoRegion)="gotoRegion($event)"

src/ui/viewerStateController/regionsListView/simpleRegionsListView/regionListView.template.html

 <mat-chip-list class="p-1 d-block h-100 w-100">
+  <ng-container *ngTemplateOutlet="horizontal ? horizontalTmpl : verticalTmpl">
+  </ng-container>
+</mat-chip-list>
+
+<!-- whilst it would be quite clever to dynamically change the few properties
+virtual scroll needs to be re init'ed for it to work well
+TODO check if this can be achieved with detach/attach -->
+<ng-template #verticalTmpl>
+
   <cdk-virtual-scroll-viewport
-    [orientation]="horizontal ? 'horizontal' : 'vertical'"
+    orientation="vertical"
     class="w-100 h-100"
-    minBufferPx="1000"
-    maxBufferPx="1500"
-    itemSize="200">
+    itemSize="32">
 
     <mat-chip *cdkVirtualFor="let region of regionsSelected"
-      [ngClass]="{'w-100': !horizontal }">
+      class="w-100" >
+      <span class="flex-grow-1 flex-shrink-1 text-truncate">
+        {{ region.name }}
+      </span>
+      <button
+        *ngIf="region.position"
+        iav-stop="mousedown click"
+        (click)="gotoRegion.emit(region)"
+        mat-icon-button>
+        <i class="fas fa-map-marked-alt"></i>
+      </button>
+      <button
+        iav-stop="mousedown click"
+        (click)="deselectRegion.emit(region)"
+        mat-icon-button>
+        <i class="fas fa-trash"></i>
+      </button>
+    </mat-chip>
+  </cdk-virtual-scroll-viewport>
+</ng-template>
+
+<ng-template #horizontalTmpl>
+  <cdk-virtual-scroll-viewport
+    orientation="horizontal"
+    class="w-100 h-100"
+    itemSize="200">
+
+    <mat-chip *cdkVirtualFor="let region of regionsSelected">
       <span class="flex-grow-1 flex-shrink-1 text-truncate">
         {{ region.name }}
       </span>
@@ -26,4 +60,4 @@
       </button>
     </mat-chip>
   </cdk-virtual-scroll-viewport>
-</mat-chip-list>
\ No newline at end of file
+</ng-template>
\ No newline at end of file