chore: refactor virtual scroll

src/components/flatTree/flatTree.component.ts

-import {EventEmitter, Component, Input, Output, ChangeDetectionStrategy, OnChanges, ViewChild} from "@angular/core";
+import {EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, AfterViewChecked} from "@angular/core";
 import { FlattenedTreeInterface } from "./flattener.pipe";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
 
@@ -15,7 +15,7 @@ import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
   changeDetection:ChangeDetectionStrategy.OnPush
 })
 
-export class FlatTreeComponent implements OnChanges {
+export class FlatTreeComponent implements AfterViewChecked {
   @Input() inputItem : any = {
     name : 'Untitled',
     children : []
@@ -34,8 +34,9 @@ export class FlatTreeComponent implements OnChanges {
   @Input() findChildren : (item:any)=>any[] = (item)=>item.children ? item.children : [] 
   @Input() searchFilter : (item:any)=>boolean | null = ()=>true
 
-  @ViewChild('flatTreeVirtualScrollViewPort') _temp: CdkVirtualScrollViewport
-  @Output() uncollaspedItemsNumber = new EventEmitter<number>()
+  @ViewChild('flatTreeVirtualScrollViewPort') virtualScrollViewPort: CdkVirtualScrollViewport
+  @Output() totalRenderedListChanged = new EventEmitter<{ previous: number, current: number }>()
+  private totalDataLength: number = null
 
   public flattenedItems : any[] = []
 
@@ -46,10 +47,15 @@ export class FlatTreeComponent implements OnChanges {
   collapsedLevels: Set<string> = new Set()
   uncollapsedLevels : Set<string> = new Set()
 
-  ngOnChanges(): void {
-    if (this._temp) {
-      setTimeout(() => {this.uncollaspedItemsNumber.emit(this._temp.getDataLength())})
-    }
+  ngAfterViewChecked(){
+    const currentTotalDataLength = this.virtualScrollViewPort.getDataLength()
+    const previousDataLength = this.totalDataLength
+
+    this.totalRenderedListChanged.emit({
+      current: currentTotalDataLength,
+      previous: previousDataLength
+    })
+    this.totalDataLength = currentTotalDataLength
   }
 
   toggleCollapse(flattenedItem:FlattenedTreeInterface){
@@ -62,7 +68,6 @@ export class FlatTreeComponent implements OnChanges {
     }
     this.collapsedLevels = new Set(this.collapsedLevels)
     this.uncollapsedLevels = new Set(this.uncollapsedLevels)
-    setTimeout(() => {this.uncollaspedItemsNumber.emit(this._temp.getDataLength())})
   }
 
   isCollapsed(flattenedItem:FlattenedTreeInterface):boolean{

src/ui/regionHierachy/regionHierarchy.component.ts

@@ -62,15 +62,20 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
   @ViewChild('searchTermInput', {read: ElementRef})
   private searchTermInput: ElementRef
 
-  countItemsIntoTheTree: number
+  /**
+   * set the height to max, bound by max-height
+   */
+  numTotalRenderedRegions: number = 999
   windowHeight: number
 
   @HostListener('document:click', ['$event'])
   closeRegion(event: MouseEvent) {
     const contains = this.el.nativeElement.contains(event.target)
     this.showRegionTree = contains
-    if (!this.showRegionTree)
+    if (!this.showRegionTree){
       this.searchTerm = ''
+      this.numTotalRenderedRegions = 999
+    }
   }
 
   @HostListener('window:resize', ['$event'])
@@ -149,15 +154,6 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
         this.changeSearchTerm(ev)
       })
     )
-
-    setTimeout(() => {
-      this.countItemsIntoTheTree = 1
-      if (this.aggregatedRegionTree.children &&
-          this.aggregatedRegionTree.children.length > 0) {
-        this.countItems(this.aggregatedRegionTree)
-      }
-    })
-
   }
 
   getInputPlaceholder(parcellation:any) {
@@ -174,20 +170,14 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
 
   }
 
-  countItems(objectToCount) {
-    objectToCount.children.forEach(object => {
-      this.countItemsIntoTheTree += 1
-      if (object.children && object.children.length > 0) this.countItems(object)
-    })
-  }
-
-  uncollapsedFlatTreeItems(event) {
-    this.countItemsIntoTheTree = event
+  handleTotalRenderedListChanged(changeEvent: {previous: number, current: number}){
+    const { current } = changeEvent
+    this.numTotalRenderedRegions = current
   }
 
   regionHierarchyHeight(){
     return({
-      'height' : (this.countItemsIntoTheTree * 15 + 60).toString() + 'px',
+      'height' : (this.numTotalRenderedRegions * 15 + 60).toString() + 'px',
       'max-height': (this.windowHeight - 100) + 'px'
     })
   }

src/ui/regionHierachy/regionHierarchy.template.html

@@ -38,7 +38,7 @@
       class="tree-body">
       <flat-tree-component
         (treeNodeClick)="handleClickRegion($event)"
-        (uncollaspedItemsNumber)="uncollapsedFlatTreeItems($event)"
+        (totalRenderedListChanged)="handleTotalRenderedListChanged($event)"
         [inputItem]="aggregatedRegionTree"
         [renderNode]="displayTreeNode"
         [searchFilter]="filterTreeBySearch">