Merge branch 'dev_next' of https://github.com/HumanBrainProject/interactive-viewer into dev_next

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/components/dropdown/dropdown.template.html

 <!-- TODO remove dependency on ismobile -->
 <span
-  class = "btn btn-default"
-  [innerHTML] = "activeDisplay(selectedItem)"
-  hoverable
+  class="btn btn-default"
+  [innerHTML]="activeDisplay(selectedItem)"
+  [hoverable]="{translateY:-2}"
   #dropdownToggle
   dropdownToggle
               
@@ -23,7 +23,7 @@
   [selectedItem]="selectedItem"
   [inputArray]="inputArray"
   [@showState]="openState ? 'show' : 'hide'"
-  [isMobile] = "isMobile"
-  [darktheme] = "darktheme">
+  [isMobile]="isMobile"
+  [darktheme]="darktheme">
 
 </radio-list>

src/components/hoverableBlock.directive.ts

-import { Directive, HostListener, HostBinding } from "@angular/core";
+import { Directive, HostListener, HostBinding, Input } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 
 @Directive({
@@ -15,6 +15,26 @@ import { DomSanitizer } from "@angular/platform-browser";
 
 export class HoverableBlockDirective{
 
+  @Input('hoverable')
+  config:any = {
+    disable: false,
+    translateY: -5
+  }
+
+  private _disable = false
+  private _translateY = -5
+
+  ngOnChanges(){
+    this._disable = this.config && !!this.config.disable
+    /**
+     * 0 is evaluated as falsy, but a valid number
+     * conditional tests for whether we need to fall back to default
+     */
+    this._translateY = this.config && this.config.translateY !== 0 && !!Number(this.config.translateY)
+      ? Number(this.config.translateY)
+      : -5
+  }
+
   @HostBinding('style.opacity')
   opacity : number = 0.9
 
@@ -26,13 +46,19 @@ export class HoverableBlockDirective{
 
   @HostListener('mouseenter')
   onMouseenter(){
+    if (this._disable) return
     this.opacity = 1.0
     this.boxShadow = this.sanitizer.bypassSecurityTrustStyle(`0 4px 6px 0 rgba(5,5,5,0.25)`)
-    this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(-2%)`)
+    /**
+     * n.b. risk of XSS. But sincle translate Y is passed through Number, and corerced into a number,
+     * and using 5 as a fallback, it should be safe
+     */
+    this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(${this._translateY}px)`)
   }
 
   @HostListener('mouseleave')
   onmouseleave(){
+    if (this._disable) return
     this.opacity = 0.9
     this.boxShadow = this.sanitizer.bypassSecurityTrustStyle(`0 4px 6px 0 rgba(5,5,5,0.1)`)
     this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(0px)`)

src/components/panel/panel.template.html

@@ -11,7 +11,7 @@
       *ngIf="showHeading"
       class="l-card-title"
       (click)="toggleCollapseBody($event)"
-      hoverable>
+      [hoverable]="{disable:!bodyCollapsable}">
       <ng-content select="[heading]">
       </ng-content>
     </div>

src/components/readmoore/readmore.template.html

@@ -9,7 +9,7 @@
 <div 
   (click)="toggle($event)" 
   sliver
-  hoverable>
+  [hoverable]="{translateY:-1}">
 
   <i 
     [ngClass] = "show ? 'fa-chevron-up' : 'fa-chevron-down'" 

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/databrowserModule/util/filterDataEntriesByRegion.pipe.ts

 import { Pipe, PipeTransform } from "@angular/core";
 import { DataEntry } from "src/services/stateStore.service";
 
-const isSubRegion = (high, low) => high.name === low.name
+const isSubRegion = (high, low) => (high.id && low.id && high.id === low.id) || high.name === low.name
   ? true
   : high.children && high.children.some
     ? high.children.some(r => isSubRegion(r, low))

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;