feat: added use defaultList instead of virtual list for flattened tree

src/components/flatTree/flatTree.component.ts

@@ -21,6 +21,8 @@ export class FlatTreeComponent{
   }
   @Input() childrenExpanded : boolean = true
 
+  @Input() useDefaultList: boolean = false
+
   @Output() treeNodeClick : EventEmitter<any> = new EventEmitter()
 
   /* highly non-performant. rerenders each time on mouseover or mouseout */

src/components/flatTree/flatTree.style.css

@@ -5,7 +5,8 @@
   height:100%;
 }
 
-cdk-virtual-scroll-viewport
+cdk-virtual-scroll-viewport,
+.default-container
 {
   flex: 1 0 auto;
   overflow-x: hidden;
@@ -177,4 +178,4 @@ span[renderText]
 [renderNode]
 {
   height: 15px;
-}
\ No newline at end of file
+}

src/components/flatTree/flatTree.template.html

 <cdk-virtual-scroll-viewport
+  *ngIf="!useDefaultList"
   (wheel)="$event.stopPropagation()"
   itemSize="15">
 
@@ -33,6 +34,42 @@
   </div>
 </cdk-virtual-scroll-viewport>
 
+<div class="overflow-auto">
+
+  <div class="overflow-hidden default-container">
+    <div
+      *ngFor="let flattenedItem of (inputItem | flattenTreePipe : findChildren | filterRowsByVisbilityPipe : findChildren : searchFilter | appendSiblingFlagPipe )" 
+      [ngClass]="getClass(flattenedItem.flattenedTreeLevel)"
+      class="text-nowrap"
+      [attr.flattenedtreelevel]="flattenedItem.flattenedTreeLevel" 
+      [attr.collapsed]="flattenedItem.collapsed ? flattenedItem.collapsed : false"
+      [attr.lvlId]="flattenedItem.lvlId"
+      [hidden]="collapseRow(flattenedItem) "
+      renderNode>
+  
+      <span class="padding-block-container">
+        <span
+          *ngFor="let block of flattenedItem.siblingFlags"
+          [attr.hidemargin]="block"
+          class="padding-block">
+  
+        </span>
+      </span>
+      <span
+        *ngIf="findChildren(flattenedItem).length > 0; else noChildren"
+        (click)="$event.stopPropagation(); toggleCollapse(flattenedItem)" >
+        <i [ngClass]="isCollapsed(flattenedItem) ? 'r-270' : ''" class="fas fa-chevron-down"></i>
+      </span>
+      <span
+        (click)="treeNodeClick.emit({event:$event,inputItem:flattenedItem})"
+        class="render-node-text"
+        [innerHtml]="flattenedItem | renderPipe : renderNode ">
+      </span>
+    </div>
+  </div>
+</div>
+
+
 <ng-template #noChildren>
   <i class="fas fa-none">
 

src/ui/databrowserModule/databrowser.module.ts

@@ -20,6 +20,7 @@ import { Chart } from 'chart.js'
 import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
 import { PopoverModule } from "ngx-bootstrap/popover";
 import { UtilModule } from "src/util/util.module";
+import { AggregateArrayIntoRootPipe } from "./util/aggregateArrayIntoRoot.pipe";
 
 @NgModule({
   imports:[
@@ -47,7 +48,8 @@ import { UtilModule } from "src/util/util.module";
     PathToNestedChildren,
     CopyPropertyPipe,
     FilterDataEntriesbyMethods,
-    FilterDataEntriesByRegion
+    FilterDataEntriesByRegion,
+    AggregateArrayIntoRootPipe
   ],
   exports:[
     DataBrowser

src/ui/databrowserModule/preview/preview.component.ts

@@ -2,6 +2,12 @@ import { Component, Input, OnInit } from "@angular/core";
 import { DatabrowserService } from "../databrowser.service";
 import { ViewerPreviewFile } from "src/services/state/dataStore.store";
 
+const getRenderNodeFn = ({name : activeFileName = ''} = {}) => ({name = '', path = 'unpathed'}) => name
+? activeFileName === name
+  ? `<span class="text-warning">${name}</span>`
+  : name
+: path
+
 @Component({
   selector: 'preview-component',
   templateUrl: './preview.template.html',
@@ -20,7 +26,7 @@ export class PreviewComponent implements OnInit{
   constructor(
     private dbrService:DatabrowserService
   ){
-  
+    this.renderNode = getRenderNodeFn()
   }
 
   previewFileClick(ev, el){
@@ -32,20 +38,11 @@ export class PreviewComponent implements OnInit{
       el.toggleCollapse(ev.inputItem)
     }else{
       this.activeFile = ev.inputItem
-      // this.launchFileViewer.emit({
-      //   dataset : this.dataset,
-      //   file : ev.inputItem
-      // })
+      this.renderNode = getRenderNodeFn(this.activeFile)
     }
   }
 
-  renderNode(obj){
-    return obj.name
-      ? this.activeFile.name === obj.name
-        ? `<span class="text-warning">${obj.name}</span>`
-        : obj.name
-      : obj.path
-  }
+  public renderNode: (obj:any) => string
 
   ngOnInit(){
     if (this.datasetName) {
@@ -54,6 +51,7 @@ export class PreviewComponent implements OnInit{
           this.previewFiles = json as ViewerPreviewFile[]
           if (this.previewFiles.length > 0)
             this.activeFile = this.previewFiles[0]
+            this.renderNode = getRenderNodeFn(this.activeFile)
         })
         .catch(e => {
           this.error = JSON.stringify(e)

src/ui/databrowserModule/preview/preview.style.css

@@ -6,6 +6,7 @@
 
 .readmore-wrapper
 {
-
-  height: 10em;
+  font-size: 80%;
+  max-height: 25em;
+  overflow: auto;
 }
\ No newline at end of file

src/ui/databrowserModule/preview/preview.template.html

@@ -8,19 +8,15 @@
 </file-viewer>
 
 <hr />
-<readmore-component
-  [collapsedHeight]="65">
+<div class="readmore-wrapper">
 
-  <div class="readmore-wrapper">
-
-    <flat-tree-component
-      #flatTreeNode
-      *ngFor="let item of previewFiles | copyProperty : 'filename' : 'path' | pathToNestedChildren"
-      [childrenExpanded]="false"
-      [renderNode]="renderNode.bind(this)"
-      [inputItem]="item"
-      (treeNodeClick)="previewFileClick($event, flatTreeNode)">
-    
-    </flat-tree-component>
-  </div>
-</readmore-component>
\ No newline at end of file
+  <flat-tree-component
+    #flatTreeNode
+    *ngIf="previewFiles | copyProperty : 'filename' : 'path' | pathToNestedChildren | aggregateArrayIntoRootPipe : 'Files'; let rootFile"
+    [useDefaultList]="true"
+    [renderNode]="renderNode"
+    [inputItem]="rootFile"
+    (treeNodeClick)="previewFileClick($event, flatTreeNode)">
+  
+  </flat-tree-component>
+</div>
\ No newline at end of file

src/ui/databrowserModule/util/aggregateArrayIntoRoot.pipe.ts

+import { Pipe, PipeTransform } from "@angular/core";
+
+
+@Pipe({
+  name: 'aggregateArrayIntoRootPipe'
+})
+
+export class AggregateArrayIntoRootPipe implements PipeTransform{
+  public transform(array: any[], rootName: string = 'Root Element', childrenPropertyName: string = 'children'){
+    const returnObj = {
+      name: rootName
+    }
+    returnObj[childrenPropertyName] = array
+    return returnObj
+  }
+}
\ No newline at end of file