Merge pull request #142 from HumanBrainProject/pr_reworkDatasetViewer

feat: reworked dataset viewer

src/atlasViewer/atlasViewer.style.css

@@ -21,9 +21,10 @@ ui-nehuba-container
   height:100%;
 }
 
+/* zindex of banner wrapper needs to be lower than zindex of floating layer */
 div[bannerWrapper]
 {
-  z-index:1000;
+  z-index:12;
   position:absolute;
 
   width:100%;

src/atlasViewer/atlasViewer.template.html

@@ -127,7 +127,7 @@
     </div>
   
     <layout-floating-container
-      zIndex = "9"
+      zIndex="13"
       #floatingOverlayContainer>
       <div floatingContainerDirective>
   

src/res/css/extra_styles.css

@@ -325,7 +325,13 @@ markdown-dom pre code
 {
   height:100%;
 }
+
 .overflow-x-hidden
 {
   overflow-x:hidden;
+}
+
+.muted
+{
+  opacity : 0.5!important;
 }
\ No newline at end of file

src/ui/databrowserModule/databrowser/databrowser.style.css

@@ -114,8 +114,6 @@ div[noSelectedRegion]
 dataset-viewer
 {
   display: block;
-  padding: 0.3em 1em;
-  background-color: rgba(128, 128, 128, 0.2);
 }
 
 div[regionsContainer]

src/ui/databrowserModule/datasetViewer/datasetViewer.component.ts

-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
 import { DataEntry } from "src/services/stateStore.service";
 
 @Component({
@@ -11,15 +11,20 @@ export class DatasetViewerComponent{
   @Input() dataset : DataEntry
   
   @Output() showPreviewDataset: EventEmitter<{datasetName:string, event:MouseEvent}> = new EventEmitter()
-
+  @ViewChild('kgrRef', {read:ElementRef}) kgrRef: ElementRef
 
   previewDataset(event:MouseEvent){
+    if (!this.dataset.preview) return
     this.showPreviewDataset.emit({
       event,
       datasetName: this.dataset.name
     })
+    event.stopPropagation()
   }
 
+  clickMainCard(event:MouseEvent) {
+    if (this.kgrRef) this.kgrRef.nativeElement.click()
+  }
 
   get methods(): string[]{
     return this.dataset.activity.reduce((acc, act) => {
@@ -27,6 +32,10 @@ export class DatasetViewerComponent{
     }, [])
   }
 
+  get hasKgRef(): boolean{
+    return this.kgReference.length > 0
+  }
+
   get kgReference(): string[] {
     return this.dataset.kgReference.map(ref => `https://doi.org/${ref}`)
   }

src/ui/databrowserModule/datasetViewer/datasetViewer.style.css

@@ -12,4 +12,15 @@ flat-tree-component
 .dataset-pill
 {
   font-size:80%;
+}
+
+.ds-container
+{
+
+  background-color: rgba(128, 128, 128, 0.2);
+}
+
+.preview-container
+{
+  flex: 0 0 2em;
 }
\ No newline at end of file

src/ui/databrowserModule/datasetViewer/datasetViewer.template.html

-<div *ngIf = "dataset; else defaultDisplay">
-  <ng-content select="[regionTagsContainer]">
+<div class="d-flex">
+  <div
+    *ngIf="dataset; else defaultDisplay"
+    (click)="clickMainCard($event)"
+    [ngClass]="{'muted': !hasKgRef}"
+    class="p-2 ds-container main-container"
+    [hoverable]="{translateY:-2,disable:!hasKgRef}">
+    <ng-content select="[regionTagsContainer]">
 
-  </ng-content>
-  <div title>
-    {{ dataset.name }}
-  </div>
-
-  <div class="btn-group">
+    </ng-content>
+    <div title>
+      {{ dataset.name }}
+    </div>
 
     <a
       *ngFor="let kgr of kgReference"
-      class="btn btn-sm btn-outline-secondary"
+      class="btn btn-sm btn-link"
       target="_blank"
-      tooltip="show in knowledge graph"
-      [href]="kgr">
-      <i class="fas fa-brain"></i>
-    </a>
-  
-    <a
-      *ngIf="dataset.preview"
-      class="btn btn-sm btn-outline-secondary"
-      (click)="previewDataset($event)"
-      tooltip="preview dataset"
-      href="#">
-      <i class="fas fa-chart-pie"></i>
+      [href]="kgr"
+      hidden
+      #kgrRef>
+      Show more info on this dataset <i class="fas fa-external-link-alt"></i>
     </a>
   </div>
-  <!-- <kg-entry-viewer [dataset]="dataset">
-
-  </kg-entry-viewer> -->
-
-  <div *ngIf="false">
 
-    <hr />
-    <h5>
-      Preview Dataset
-    </h5>
-    <hr />
+  <div
+    *ngIf="dataset.preview"
+    (click)="previewDataset($event)"
+    class="ds-container ml-1 p-2 preview-container text-muted d-flex align-items-center"
+    [hoverable]="{translateY:-3}">
+    <i class="fas fa-eye"></i>
   </div>
 </div>
 

src/ui/layerbrowser/layerbrowser.component.ts

@@ -73,6 +73,7 @@ export class LayerBrowser implements OnDestroy{
         select('viewerState'),
         select('templateSelected'),
         distinctUntilChanged((o,n) => o.templateSelected.name === n.templateSelected.name),
+        filter(templateSelected => !!templateSelected),
         map(templateSelected => Object.keys(templateSelected.nehubaConfig.dataset.initialNgState.layers)),
         buffer(this.store.pipe(
           select('ngViewerState'),

src/ui/layerbrowser/layerbrowser.style.css

@@ -16,11 +16,6 @@ div[body]
   background-color:rgba(0, 0, 0, 0.1);
 }
 
-.muted
-{
-  opacity : 0.5;
-}
-
 .muted-text
 {
   text-decoration: line-through;