diff --git a/src/components/flatTree/flatTree.component.ts b/src/components/flatTree/flatTree.component.ts
index 25da07a20e49899d8cce9f75e013f4fb5fe68d8a..e3c19238b5b67a39bc91ba5e91277337d4fd5964 100644
--- a/src/components/flatTree/flatTree.component.ts
+++ b/src/components/flatTree/flatTree.component.ts
@@ -87,16 +87,24 @@ export class FlatTreeComponent implements AfterViewChecked, AfterViewInit, OnIni
}
collapsedLevels: Set<string> = new Set()
- searchedVisibleSet: Set<string> = new Set()
+ uncollapsedLevels : Set<string> = new Set()
toggleCollapse(flattenedItem:FlattenedTreeInterface){
- this.collapsedLevels.has(flattenedItem.lvlId)
- ? this.collapsedLevels.delete(flattenedItem.lvlId)
- : this.collapsedLevels.add(flattenedItem.lvlId)
+ this.isCollapsed(flattenedItem)
+ ? (this.collapsedLevels.delete(flattenedItem.lvlId), this.uncollapsedLevels.add(flattenedItem.lvlId))
+ : (this.collapsedLevels.add(flattenedItem.lvlId), this.uncollapsedLevels.delete(flattenedItem.lvlId))
}
isCollapsed(flattenedItem:FlattenedTreeInterface):boolean{
- return this.collapsedLevels.has(flattenedItem.lvlId)
+ return this.isCollapsedById(flattenedItem.lvlId)
+ }
+
+ isCollapsedById(id:string):boolean{
+ return this.collapsedLevels.has(id)
+ ? true
+ : this.uncollapsedLevels.has(id)
+ ? false
+ : !this.childrenExpanded
}
collapseRow(flattenedItem:FlattenedTreeInterface):boolean{
@@ -106,9 +114,7 @@ export class FlatTreeComponent implements AfterViewChecked, AfterViewInit, OnIni
.concat(acc.length === 0
? curr
: acc[acc.length -1].concat(`_${curr}`)), [])
- .find(id => this.collapsedLevels.has(id))
- ? true
- : false
+ .some(id => this.isCollapsedById(id))
}
private _currentPos : number = 0
diff --git a/src/components/tree/treeBase.directive.ts b/src/components/tree/treeBase.directive.ts
index 20869d5df68affcfa2336814ff92442773d75f24..01f3354064b51d36470c3dc8cf4e6d763051bc52 100644
--- a/src/components/tree/treeBase.directive.ts
+++ b/src/components/tree/treeBase.directive.ts
@@ -6,7 +6,7 @@ import { Subscription } from "rxjs";
selector : '[treebase]',
host :{
'style' : `
- background-color:red
+
`
},
providers : [
diff --git a/src/services/stateStore.service.ts b/src/services/stateStore.service.ts
index 7d49498576165b98c3e70426ccfd0a67519c1f41..4bc28d1decaac6670d8299ebf1c156fa9e4e85aa 100644
--- a/src/services/stateStore.service.ts
+++ b/src/services/stateStore.service.ts
@@ -402,6 +402,7 @@ export interface DedicatedViewAction extends Action{
export interface DataEntry{
type : string
name : string
+ kgID? : string
regionName : {
regionName : string,
relationship : string
diff --git a/src/ui/databrowser/databrowser.component.ts b/src/ui/databrowser/databrowser.component.ts
index 8713fd29506dd28aef9da430ca1ee1b312c6a5c8..003a019511c6addb57fb61d34bca3adcfe891ab8 100644
--- a/src/ui/databrowser/databrowser.component.ts
+++ b/src/ui/databrowser/databrowser.component.ts
@@ -224,28 +224,27 @@ export class DataBrowserUI implements OnDestroy,OnInit{
dataWindowRegistry: Set<string> = new Set()
- handleTreeNodeClick(obj:{inputItem:any,node:TreeComponent},searchResult:any){
-
- const { properties, kgID } = searchResult
-
- obj.node.childrenExpanded = !obj.node.childrenExpanded
+ handleFlatTreeNodeClick(payload:{dataset:DataEntry, file:File}){
+ const { dataset, file } = payload
+ const { properties, kgID } = dataset
+ if(file.mimetype){
- if(obj.inputItem.mimetype){
- if(this.dataWindowRegistry.has(obj.inputItem.name)){
+ // TODO use KG id in future
+ if(this.dataWindowRegistry.has(file.name)){
/* already open, will not open again */
- return
+ return
}
/* not yet open, add the name to registry */
- this.dataWindowRegistry.add(obj.inputItem.name)
+ this.dataWindowRegistry.add(file.name)
const component = this.fileViewerComponentFactory.create(this.injector)
- component.instance.searchResultFile = Object.assign({}, obj.inputItem, { datasetProperties : properties }, kgID ? { kgID } : {})
- const compref = this.widgetServices.addNewWidget(component,{title:obj.inputItem.name,exitable:true,state:'floating'})
+ component.instance.searchResultFile = Object.assign({}, file, { datasetProperties : properties }, kgID ? { kgID } : {})
+ const compref = this.widgetServices.addNewWidget(component,{title:file.name,exitable:true,state:'floating'})
/* on destroy, removes name from registry */
- compref.onDestroy(() => this.dataWindowRegistry.delete(obj.inputItem.name))
+ compref.onDestroy(() => this.dataWindowRegistry.delete(file.name))
}else{
- console.warn('the selected file has no mimetype defined')
+ /** no mime type */
}
}
diff --git a/src/ui/databrowser/databrowser.style.css b/src/ui/databrowser/databrowser.style.css
index 15640d08dd89bcf8a6f128699eaee4f11e156720..88352b854fa20469bd1370c7c55d25f95666c954 100644
--- a/src/ui/databrowser/databrowser.style.css
+++ b/src/ui/databrowser/databrowser.style.css
@@ -114,4 +114,12 @@ div[noSelectedRegion]
:host-context([darktheme="true"]) div[noSelectedRegion]
{
background-color: rgba(0,0,0,0.2);
+}
+
+dataset-viewer
+{
+ display: block;
+ margin: 1em;
+ padding: 1em;
+ background-color: rgba(128, 128, 128, 0.2);
}
\ No newline at end of file
diff --git a/src/ui/databrowser/databrowser.template.html b/src/ui/databrowser/databrowser.template.html
index a6a46842be46513a51d282301dde48382f1bda3e..8daf3f2489500241f8c6a2b65360f9c33cb38ba6 100644
--- a/src/ui/databrowser/databrowser.template.html
+++ b/src/ui/databrowser/databrowser.template.html
@@ -112,28 +112,13 @@
</div>
</div>
<div body>
- <panel-component
- *ngFor = "let searchResult of data.searchResults | filterDataEntriesByType : hideDataTypes"
- [collapseBody] = "true"
- [bodyCollapsable] = "true"
- dataentry>
-
- <div heading>
- {{ searchResult.type }}
- </div>
-
- <div body>
- <tree-component
- *ngFor = "let item of searchResult.files | copyProperty : 'filename' : 'path' | pathToNestedChildren"
- [childrenExpanded] = "false"
- [renderNode] = "renderNode"
- (treeNodeClick) = "handleTreeNodeClick($event,searchResult)"
- [inputItem] = " item "
- treebase>
-
- </tree-component>
- </div>
- </panel-component>
+
+ <dataset-viewer
+ (launchFileViewer) = "handleFlatTreeNodeClick($event)"
+ [dataset] = "searchResult"
+ *ngFor = "let searchResult of data.searchResults">
+
+ </dataset-viewer>
</div>
</panel-component>
</div>
diff --git a/src/ui/datasetViewer/datasetViewer.component.ts b/src/ui/datasetViewer/datasetViewer.component.ts
index 2d0ee15a05e387b76b29dc1d7881288d782c680d..cbd5b087aa54d053da76d65fe553a711d92f80d5 100644
--- a/src/ui/datasetViewer/datasetViewer.component.ts
+++ b/src/ui/datasetViewer/datasetViewer.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, Output, EventEmitter } from "@angular/core";
import { DataEntry } from "../../services/stateStore.service";
@Component({
@@ -9,4 +9,26 @@ import { DataEntry } from "../../services/stateStore.service";
export class DatasetViewerComponent{
@Input() dataset : DataEntry
+ @Output() launchFileViewer : EventEmitter<{dataset:DataEntry, file:any}> = new EventEmitter()
+
+ previewFileClick(ev, el){
+
+ ev.event.preventDefault()
+ ev.event.stopPropagation()
+
+ if(ev.inputItem.children.length > 0){
+ el.toggleCollapse(ev.inputItem)
+ }else{
+ this.launchFileViewer.emit({
+ dataset : this.dataset,
+ file : ev.inputItem
+ })
+ }
+ }
+
+ renderNode(obj){
+ return obj.name
+ ? obj.name
+ : obj.path
+ }
}
\ No newline at end of file
diff --git a/src/ui/datasetViewer/datasetViewer.style.css b/src/ui/datasetViewer/datasetViewer.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..59294f4b3947a97d6df29535ec13fd50c81c915d 100644
--- a/src/ui/datasetViewer/datasetViewer.style.css
+++ b/src/ui/datasetViewer/datasetViewer.style.css
@@ -0,0 +1,14 @@
+div[title]
+{
+ margin: 0.5rem;
+}
+
+flat-tree-component
+{
+ overflow: hidden;
+}
+
+:host-context([darktheme="true"]) hr
+{
+ border-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/ui/datasetViewer/datasetViewer.template.html b/src/ui/datasetViewer/datasetViewer.template.html
index 357acc26b0c1a785537940f17c937c1e68aef0c6..eb385d627ca09acee655332d183ad792cd5b7bec 100644
--- a/src/ui/datasetViewer/datasetViewer.template.html
+++ b/src/ui/datasetViewer/datasetViewer.template.html
@@ -1,6 +1,29 @@
<div *ngIf = "dataset; else defaultDisplay">
- {{ dataset.name }}
+ <h4 title>
+ {{ dataset.name }}
+ </h4>
+ <kg-entry-viewer *ngIf = "dataset.kgID; else noKgID" [kgQueryString] = "dataset.kgID">
+
+ </kg-entry-viewer>
+
+ <hr />
+ <h5>
+ Preview Dataset
+ </h5>
+ <flat-tree-component
+ #flatTreeNode
+ *ngFor = "let item of dataset.files | copyProperty : 'filename' : 'path' | pathToNestedChildren"
+ [childrenExpanded] = "false"
+ [renderNode] = "renderNode"
+ [inputItem] = " item "
+ (treeNodeClick)= "previewFileClick($event, flatTreeNode)">
+
+ </flat-tree-component>
+ <hr />
</div>
<ng-template #defaultDisplay>
Nothing to display ...
-</ng-template>
\ No newline at end of file
+</ng-template>
+<ng-template #noKgID>
+ kgID not specified.
+</ng-template>
diff --git a/src/ui/fileviewer/fileviewer.template.html b/src/ui/fileviewer/fileviewer.template.html
index b34b7668b20ebaea7d44d1b5d5c97d6eed10f508..1f2b7aa4c8096c370b59b20c9b2bebc1bb24d69e 100644
--- a/src/ui/fileviewer/fileviewer.template.html
+++ b/src/ui/fileviewer/fileviewer.template.html
@@ -3,7 +3,7 @@
</div>
<!-- KG Entry Viewer -->
-<kg-entry-viewer *ngIf = "searchResultFile.kgID" [kgQueryString] = "searchResultFile.kgID">
+<kg-entry-viewer *ngIf = "searchResultFile.kgID && false" [kgQueryString] = "searchResultFile.kgID">
</kg-entry-viewer>
diff --git a/src/ui/kgEntryViewer/kgentry.style.css b/src/ui/kgEntryViewer/kgentry.style.css
index a1ee25a5d6620dc942c744265bdacfe7ba1d13d8..08aa2ff604ef4cb81be1dbfaf936c5df17aff5c5 100644
--- a/src/ui/kgEntryViewer/kgentry.style.css
+++ b/src/ui/kgEntryViewer/kgentry.style.css
@@ -16,3 +16,15 @@ div[body]
overflow-y:auto;
overflow-x:hidden;
}
+
+div[container]
+{
+ overflow:hidden;
+}
+
+a[linkToKG]
+{
+ display: inline-block;
+ margin-top: 1rem;
+ white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/ui/kgEntryViewer/kgentry.template.html b/src/ui/kgEntryViewer/kgentry.template.html
index 8b6d77d208dfb4d81ab3cdbe340f22456bd30f8c..8f7e85d366d02bd8addaa6f050a281a9b599b9bd 100644
--- a/src/ui/kgEntryViewer/kgentry.template.html
+++ b/src/ui/kgEntryViewer/kgentry.template.html
@@ -1,4 +1,4 @@
-<div *ngIf = "kgData; else showDefault">
+<div *ngIf = "kgData; else showDefault" container>
<readmore-component>
@@ -132,8 +132,8 @@
</panel-component>
</readmore-component>
- <a target = "_blank" [href] = "kgHref">
- See this dataset in the Knowledge Graph <i class = "glyphicon glyphicon-new-window"></i>
+ <a target = "_blank" [href] = "kgHref" linkToKG>
+ Open in Knowledge Graph <i class = "glyphicon glyphicon-new-window"></i>
</a>
</div>