diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index b56b1579651b45235cf8f5cc43f5c4f5a2f05be9..f0f1b2e0550826934afbf5e032c96fb8c706714c 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/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%;
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index aff1c05c70a4f41d8355a9d54188b323f47306af..c3828d3a89c7e36849915a581753ce76de76ac34 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -127,7 +127,7 @@
</div>
<layout-floating-container
- zIndex = "9"
+ zIndex="13"
#floatingOverlayContainer>
<div floatingContainerDirective>
diff --git a/src/components/dropdown/dropdown.template.html b/src/components/dropdown/dropdown.template.html
index e448400b8324b98dcfc159263517856732694cfc..d40112b4cabbfe292a7bf9834dea71ad660a221f 100644
--- a/src/components/dropdown/dropdown.template.html
+++ b/src/components/dropdown/dropdown.template.html
@@ -1,8 +1,8 @@
<!-- 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>
diff --git a/src/components/hoverableBlock.directive.ts b/src/components/hoverableBlock.directive.ts
index e05dc260d0f2693500c98318b5deb2c7350c56d3..bc0da29e43f6b99d73108d3db6f63633a659e922 100644
--- a/src/components/hoverableBlock.directive.ts
+++ b/src/components/hoverableBlock.directive.ts
@@ -1,4 +1,4 @@
-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)`)
diff --git a/src/components/panel/panel.template.html b/src/components/panel/panel.template.html
index a510270894b020794b9f010fc683d7c1ce27ab4c..d2c55e22b6daed1c0b223e86492e6429e34a143d 100644
--- a/src/components/panel/panel.template.html
+++ b/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>
diff --git a/src/components/readmoore/readmore.template.html b/src/components/readmoore/readmore.template.html
index 8572b5e2e175f1d3e068a989f6c6ddd9f7e4c75f..20fdb98aeca3cfb760d23090d3cde70888b5c63c 100644
--- a/src/components/readmoore/readmore.template.html
+++ b/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'"
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 1f176a851b20e3cf30cd70b363cc1c2730eefa4c..ddf0340c7f957cbed2b213a2fcb14420b7f0d324 100644
--- a/src/res/css/extra_styles.css
+++ b/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
diff --git a/src/ui/databrowserModule/databrowser/databrowser.style.css b/src/ui/databrowserModule/databrowser/databrowser.style.css
index eb0ddb2feb9c3f789cbafbc75c3a7956455303e7..03c84492265b2bd08506129d0c16e782c60788e7 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.style.css
+++ b/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]
diff --git a/src/ui/databrowserModule/datasetViewer/datasetViewer.component.ts b/src/ui/databrowserModule/datasetViewer/datasetViewer.component.ts
index d042842f54da23ceb81d56a4eca1ee3a9f398a0c..7be8d563234f7e854b1bda067e07a1a758471718 100644
--- a/src/ui/databrowserModule/datasetViewer/datasetViewer.component.ts
+++ b/src/ui/databrowserModule/datasetViewer/datasetViewer.component.ts
@@ -1,4 +1,4 @@
-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}`)
}
diff --git a/src/ui/databrowserModule/datasetViewer/datasetViewer.style.css b/src/ui/databrowserModule/datasetViewer/datasetViewer.style.css
index 5c38860fd0db7140609c87ab55fb6039de22f32c..17836b855bb96876f0781e7a30e4974aca789d72 100644
--- a/src/ui/databrowserModule/datasetViewer/datasetViewer.style.css
+++ b/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
diff --git a/src/ui/databrowserModule/datasetViewer/datasetViewer.template.html b/src/ui/databrowserModule/datasetViewer/datasetViewer.template.html
index ec0e41cf8e078b5640e2fb16fd16975d0ae0e378..c1248259e4ac13b17b3395b63ef41d1d3396b277 100644
--- a/src/ui/databrowserModule/datasetViewer/datasetViewer.template.html
+++ b/src/ui/databrowserModule/datasetViewer/datasetViewer.template.html
@@ -1,42 +1,34 @@
-<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>
diff --git a/src/ui/databrowserModule/util/filterDataEntriesByRegion.pipe.ts b/src/ui/databrowserModule/util/filterDataEntriesByRegion.pipe.ts
index ac73e32cc06694bc8aaa0c5d179b002b6a5630a9..3f45fa9d105f4a34e47dd2d1e1f428670467aa13 100644
--- a/src/ui/databrowserModule/util/filterDataEntriesByRegion.pipe.ts
+++ b/src/ui/databrowserModule/util/filterDataEntriesByRegion.pipe.ts
@@ -1,7 +1,7 @@
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))
diff --git a/src/ui/layerbrowser/layerbrowser.component.ts b/src/ui/layerbrowser/layerbrowser.component.ts
index 8a8cdbd4a952a73e8e05a0b8cba3d2ac08e19cb5..2dd2a8aa0bcca320f72a2eeff7c1ac7b2c3ed72f 100644
--- a/src/ui/layerbrowser/layerbrowser.component.ts
+++ b/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'),
diff --git a/src/ui/layerbrowser/layerbrowser.style.css b/src/ui/layerbrowser/layerbrowser.style.css
index dc597ad085a5b4f8f21dc3d786a49086a97a5dc5..83bf14bb66993088b1d86f607e24784f07926bd4 100644
--- a/src/ui/layerbrowser/layerbrowser.style.css
+++ b/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;