diff --git a/src/components/flatTree/flatTree.component.ts b/src/components/flatTree/flatTree.component.ts
index 1ff00222081d946cee2fa22491f57af0d4c519dd..bf1efd663bf2bb3f9af5615fb5284057f341be7c 100644
--- a/src/components/flatTree/flatTree.component.ts
+++ b/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 */
diff --git a/src/components/flatTree/flatTree.style.css b/src/components/flatTree/flatTree.style.css
index d71418cc8ef2641f95bd5b11b263462bbf600960..9ee266f33ce80735ba9ebae0689f01c031aaaeaf 100644
--- a/src/components/flatTree/flatTree.style.css
+++ b/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
+}
diff --git a/src/components/flatTree/flatTree.template.html b/src/components/flatTree/flatTree.template.html
index bd497ac3b326e3cf083a77454baed07f263816cc..b95e5fb5e91fbcea8d7028d19dcf62228c590c98 100644
--- a/src/components/flatTree/flatTree.template.html
+++ b/src/components/flatTree/flatTree.template.html
@@ -1,4 +1,5 @@
<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">
diff --git a/src/ui/databrowserModule/databrowser.module.ts b/src/ui/databrowserModule/databrowser.module.ts
index e32ba854996cdf9652fd7f97d0011f2ac9cf0bec..1238aa758a99074e33dfdfaccd0daf488e82cbc7 100644
--- a/src/ui/databrowserModule/databrowser.module.ts
+++ b/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
diff --git a/src/ui/databrowserModule/preview/preview.component.ts b/src/ui/databrowserModule/preview/preview.component.ts
index 46f8884070da9c2112b569d662caf2db495732a7..19921de6402afa653c9e2b6ec68352df13e7dfdd 100644
--- a/src/ui/databrowserModule/preview/preview.component.ts
+++ b/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)
diff --git a/src/ui/databrowserModule/preview/preview.style.css b/src/ui/databrowserModule/preview/preview.style.css
index 73c51d8df719dfe12dd57b77d06acb9e24a802e1..23018c4cb9c1562bb329a8416a148bb819a503ed 100644
--- a/src/ui/databrowserModule/preview/preview.style.css
+++ b/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
diff --git a/src/ui/databrowserModule/preview/preview.template.html b/src/ui/databrowserModule/preview/preview.template.html
index 67f1676bc1cd90ddcd5f77ad248b73bd6046a89f..1eb28f46694f3252ffc923011d1106230a6543b8 100644
--- a/src/ui/databrowserModule/preview/preview.template.html
+++ b/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
diff --git a/src/ui/databrowserModule/util/aggregateArrayIntoRoot.pipe.ts b/src/ui/databrowserModule/util/aggregateArrayIntoRoot.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..513da12531b9531fd5618f23ba5fe1efffdd56aa
--- /dev/null
+++ b/src/ui/databrowserModule/util/aggregateArrayIntoRoot.pipe.ts
@@ -0,0 +1,16 @@
+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