diff --git a/package.json b/package.json
index a2ed139c5d747a35ef3c5ed5d8db25138d6831cb..b64408dc2b1c01c525c78f56ee4dfdbc1093023f 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"devDependencies": {
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.3.7",
+ "@angular/cdk-experimental": "^7.3.7",
"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/compiler-cli": "^7.2.15",
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 8a50086a1fa8958a51baff8ec4a60b0df5b6f5b4..5c4d9fdc7e88bf8dfb19879e01d5ad6da0fa6b61 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -436,8 +436,8 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
)
this.onhoverLandmarksForFixed$ = this.rClContextualMenu.onShow.pipe(
- withLatestFrom(this.onhoverLandmark$),
- map(([_flag, onhoverLandmark]) => onhoverLandmark || [])
+ withLatestFrom(this.onhoverLandmark$),
+ map(([_flag, onhoverLandmark]) => onhoverLandmark || [])
)
/**
@@ -525,24 +525,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
}
private selectedTemplate: any
- searchRegion(regions:any[]){
- this.rClContextualMenu.hide()
-
- /**
- * TODO move this to somewhere that makes sense, not in atlas viewer (? perhaps)
- */
- this.databrowserService.queryData({ regions, parcellation: this.selectedParcellation, template: this.selectedTemplate })
-
- /**
- * TODO clean up code. do not do this imperically
- */
- if (this.isMobile) {
- this.store.dispatch({
- type : OPEN_SIDE_PANEL
- })
- this.mobileMenuTabs.tabs[1].active = true
- }
- }
openLandmarkUrl(dataset) {
this.rClContextualMenu.hide()
diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index 75604388751f3a6d86c5f39da18550cadd18c118..23c6702a2296eba0c7e0c9b2bfa8fd7d653b1e0c 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/src/atlasViewer/atlasViewer.style.css
@@ -50,22 +50,6 @@ layout-floating-container
margin: 0.8em 0.4em;
}
-[toastContainer]
-{
- pointer-events: none;
- position : absolute;
- bottom: 1.7em;
- width : 100%;
-
- display: flex;
- flex-direction: column;
-}
-
-[toastContainer] > *
-{
- flex : 0 0 auto;
-}
-
div[floatingMouseContextualContainer]
{
position : absolute;
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 5347548f8e5f9750f7f3b80634a3020af31ebf3e..c4a3b31eed146a5d2a5421bcdae087bf7ea52464 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -1,71 +1,7 @@
<ng-container *ngIf="meetsRequirement; else doesNotMeetReqTemplate">
-<!-- if not mobile -->
- <ng-template [ngIf]="!isMobile" [ngIfElse]="mobileTemplate">
- <ng-container *ngTemplateOutlet="viewerBody">
- </ng-container>
- </ng-template>
-
- <!-- if mobile -->
- <ng-template #mobileTemplate>
- <mat-sidenav-container
- (backdropClick)="changeMenuState({close: true})"
- class="w-100 h-100">
- <mat-sidenav
- #sidenav
- [fixedInViewport]="true"
- [disableClose]="true"
- [opened]="sidePanelOpen$ | async"
- class="mobileNavigationPanel p-2"
- [ngStyle]="{'background-color': darktheme? '#404040' : '#F2F2F2'}" >
-
- <!-- 'absorbs' the auto-focus behavior -->
- <button mat-button style="height: 0; position: absolute;"></button>
- <logo-container class="logoContainerMobile"></logo-container>
-
- <tabset #mobileMenuTabs [justified]="true" class="mobileMenuTabs" >
- <tab heading="Template">
- <signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
- <layout-floating-container *ngIf="this.nehubaContainer && this.nehubaContainer.nehubaViewer">
- <ui-status-card
- [selectedTemplate]="selectedTemplate"
- [isMobile]="isMobile"
- [onHoverSegmentName]="this.nehubaContainer.onHoverSegmentName$ | async"
- [nehubaViewer]="this.nehubaContainer.nehubaViewer">
- </ui-status-card>
- </layout-floating-container>
- </tab>
- <tab heading="Containers">
- <panel-component>
- <div class="m-2" heading>
- Layer Browser
- </div>
- <div class="m-2" body>
- <layer-browser></layer-browser>
- </div>
- </panel-component>
- <div dockedContainerDirective>
- </div>
- </tab>
- </tabset>
-
- </mat-sidenav>
-
- <mat-sidenav-content>
- <ng-container *ngTemplateOutlet="viewerBody">
-
- </ng-container>
- </mat-sidenav-content>
-
- </mat-sidenav-container>
-
- <div class="btnWrapper btnWrapper-lg menuButtonMobile m-2" (click)="changeMenuState()">
- <div
- class="shadow btn btn-sm btn-secondary rounded-circle">
- <i class="fas fa-bars"></i>
- </div>
- </div>
- </ng-template>
+ <ng-container *ngTemplateOutlet="viewerBody">
+ </ng-container>
</ng-container>
<ng-template #helpComponent>
@@ -153,19 +89,19 @@
</ui-nehuba-container>
<div class="z-index-10 position-absolute pe-none w-100 h-100">
+
+ <!-- dataset search side nav -->
<mat-drawer-container
*ngIf="newViewer$ | async"
[hasBackdrop]="false"
class="w-100 h-100 bg-none mat-drawer-content-overflow-visible">
<mat-drawer
mode="push"
- class="col-sm-10 col-md-4 col-lg-3 col-xl-2 p-2 bg-none box-shadow-none overflow-visible"
+ class="col-10 col-sm-10 col-md-4 col-lg-3 col-xl-2 p-2 bg-none box-shadow-none overflow-visible"
[disableClose]="true"
[autoFocus]="false"
[opened]="true"
#sideNavDrawer>
-
- <!-- template outlet -->
<search-side-nav
(dismiss)="sideNavDrawer.close()"
(open)="sideNavDrawer.open()"
@@ -174,6 +110,8 @@
</search-side-nav>
</mat-drawer>
+
+ <!-- tag for opening and closing side nav -->
<div class="d-flex h-100 align-items-start bg-none pe-none">
<button mat-flat-button
@@ -294,11 +232,7 @@
</div>
<!-- TODO Potentially implementing plugin contextual info -->
</div>
-
- <div toastContainer>
- <div toastDirective>
- </div>
- </div>
+
</layout-floating-container>
<div pluginFactoryDirective>
diff --git a/src/main.module.ts b/src/main.module.ts
index 74f30b3bce9af921a53a7a71d8f98b4296012d48..63606d089c53d9771961fea68ac174718a3fadbd 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -27,7 +27,6 @@ import { NewViewerDisctinctViewToLayer } from "./util/pipes/newViewerDistinctVie
import { ToastService } from "./services/toastService.service";
import { AtlasWorkerService } from "./atlasViewer/atlasViewer.workerService.service";
import { HelpDirective } from "./util/directives/help.directive";
-import { ToastContainerDirective } from "./util/directives/toastContainer.directive";
import { DockedContainerDirective } from "./util/directives/dockedContainer.directive";
import { FloatingContainerDirective } from "./util/directives/floatingContainer.directive";
import { PluginFactoryDirective } from "./util/directives/pluginFactory.directive";
@@ -101,7 +100,6 @@ import 'hammerjs'
fasTooltipRemoveDirective,
fasTooltipRemoveSignDirective,
HelpDirective,
- ToastContainerDirective,
DockedContainerDirective,
FloatingContainerDirective,
PluginFactoryDirective,
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 709122816f52cdd7b35003108c5d67e4e5affe5a..6fbc58d4ccd71a5d75f6c55e7389e63112455b36 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -580,3 +580,27 @@ cdk-virtual-scroll-viewport > .cdk-virtual-scroll-content-wrapper
{
overflow: visible!important;
}
+
+mat-icon[fontset="fas"],
+mat-icon[fontset="far"]
+{
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* overwrite bootstrap adding underline to anchor on hover */
+.no-hover:hover
+{
+ text-decoration: none!important;
+}
+
+.no-focus:focus
+{
+ outline: none!important;
+}
+
+.font-2x
+{
+ font-size: 200%;
+}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/databrowser.module.ts b/src/ui/databrowserModule/databrowser.module.ts
index d2d2644e7e7b44d93a059a28854cb0935b5dc2af..a535940ce7c9892fbb44f2226f126823f590a960 100644
--- a/src/ui/databrowserModule/databrowser.module.ts
+++ b/src/ui/databrowserModule/databrowser.module.ts
@@ -91,7 +91,8 @@ import { CurrentlySelectedRegions } from "../viewerStateController/currentlySele
],
entryComponents:[
DataBrowser,
- FileViewer
+ FileViewer,
+ SingleDatasetView
],
providers: [
KgSingleDatasetService
diff --git a/src/ui/databrowserModule/databrowser/databrowser.component.ts b/src/ui/databrowserModule/databrowser/databrowser.component.ts
index eb67dcfc00f1883e4be53299f65820839dbf9fd8..1971b7aeba38d2c5096d3b04865eb5d7737349b6 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.component.ts
+++ b/src/ui/databrowserModule/databrowser/databrowser.component.ts
@@ -37,8 +37,10 @@ export class DataBrowser implements OnChanges, OnDestroy,OnInit{
dataentriesUpdated: EventEmitter<DataEntry[]> = new EventEmitter()
public dataentries: DataEntry[] = []
- public focusedDataset: DataEntry
+ /**
+ * TODO deprecated
+ */
public currentPage: number = 0
public hitsPerPage: number = 5
@@ -56,9 +58,6 @@ export class DataBrowser implements OnChanges, OnDestroy,OnInit{
@ViewChild(ModalityPicker)
modalityPicker: ModalityPicker
- @ViewChild('detailDataset', {read: TemplateRef})
- detailDatasetTemplateRef: TemplateRef<any>
-
public favDataentries$: Observable<DataEntry[]>
get darktheme(){
@@ -219,11 +218,6 @@ export class DataBrowser implements OnChanges, OnDestroy,OnInit{
this.clearAll()
}
- showFocusedDataset(dataset:DataEntry){
- this.focusedDataset = dataset
- this.dialog.open(this.detailDatasetTemplateRef)
- }
-
trackbyFn(index:number, dataset:DataEntry) {
return dataset.id
}
diff --git a/src/ui/databrowserModule/databrowser/databrowser.style.css b/src/ui/databrowserModule/databrowser/databrowser.style.css
index f20a0d72a07c290e74dfaacf31e9442c3a688570..e681a88492fd6dac8e2ce334b58578d9a790929e 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.style.css
+++ b/src/ui/databrowserModule/databrowser/databrowser.style.css
@@ -8,8 +8,3 @@ radio-list
{
display: block;
}
-
-cdk-virtual-scroll-viewport
-{
- width: calc(100% + 1em);
-}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index 90a524586169ed3cd810a7f36d3fb0bc020a5a74..6b3eb1e38bba9056c2370fdb5fa0cb38eb8277f3 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/src/ui/databrowserModule/databrowser/databrowser.template.html
@@ -9,13 +9,15 @@
</ng-content>
</mat-card-header>
- <!-- transclusion header -->
+ <!-- transclusion content prepend -->
<ng-content select="[card-content='prepend']">
</ng-content>
<!-- modality filter -->
- <ng-container *ngTemplateOutlet="modalitySelector">
- </ng-container>
+ <div class="mb-1" >
+ <ng-container *ngTemplateOutlet="modalitySelector">
+ </ng-container>
+ </div>
<!-- if still loading, show spinner -->
<ng-template [ngIf]="fetchingFlag">
@@ -58,7 +60,7 @@
<ng-template #modalityPicker>
<modality-picker
- (click)="$event.stopPropagation();"
+ iav-stop="click"
class="w-100"
[countedDataM]="countedDataM"
(modalityFilterEmitter)="handleModalityFilterEvent($event)">
@@ -81,18 +83,23 @@
<mat-card-content class="h-100 w-100 overflow-hidden">
<cdk-virtual-scroll-viewport
class="h-100"
- itemSize="40">
- <mat-nav-list dense>
+ autosize>
+ <div class="virtual-scroll-element" *cdkVirtualFor="let dataset of filteredDataEntry; trackBy: trackbyFn; templateCacheSize: 0; let index = index">
+
+ <!-- divider, show if not first -->
+ <mat-divider *ngIf="index !== 0"></mat-divider>
+
<single-dataset-list-view
- *cdkVirtualFor="let dataset of filteredDataEntry; trackBy: trackbyFn; templateCacheSize: 0"
- (click)="showFocusedDataset(dataset)"
+ class="d-block pt-1 pb-1"
[kgSchema]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[0]"
[kgId]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[1]"
[dataset]="dataset"
[ripple]="true">
</single-dataset-list-view>
- </mat-nav-list>
+
+
+ </div>
</cdk-virtual-scroll-viewport>
</mat-card-content>
</ng-container>
@@ -106,26 +113,24 @@
</preview-component>
</ng-template>
-<ng-template #detailDataset>
- <single-dataset-view [dataset]="focusedDataset">
- </single-dataset-view>
-</ng-template>
-
<!-- modality picker / filter -->
<ng-template #modalitySelector>
<mat-accordion class="flex-grow-0 flex-shrink-0">
<!-- currently selected regions -->
<mat-expansion-panel
- [disabled]="regions.length === 0"
+ *ngIf="regions && regions.length > 1"
#selectedRegionExpansionPanel
hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
- {{ regions.length > 0 ? regions.length : 'No' }} region{{ regions.length > 1 ? 's' : '' }} selected
+ Regions selected
</mat-panel-title>
<mat-panel-description class="d-flex flex-row justify-content-end align-items-center">
+ <small class="text-muted mr-2">
+ {{ regions && regions.length }}
+ </small>
<i class="fas fa-brain"></i>
</mat-panel-description>
</mat-expansion-panel-header>
@@ -141,15 +146,15 @@
<mat-expansion-panel-header class="align-items-center">
<mat-panel-title>
- <span *ngIf="visibleCountedDataM && visibleCountedDataM.length > 0; else defaultCount">
- {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} filtered datasets
- </span>
- <ng-template #defaultCount>
- {{ dataentries.length }} related datasets
- </ng-template>
+ Filter
</mat-panel-title>
<mat-panel-description class="d-flex flex-row justify-content-end align-items-center">
+
+ <small *ngIf="dataentries.length > 0" class="text-muted mr-2">
+ {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} / {{ dataentries.length }}
+ </small>
+
<i class="fas fa-filter"></i>
</mat-panel-description>
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
index 29f499577191fb15cc853c24ca446f98d7f8eb35..f13e912815bbf039e07802e6471827e330631933 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
@@ -1,10 +1,11 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef} from "@angular/core";
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Inject} from "@angular/core";
import {
SingleDatasetBase,
DatabrowserService,
KgSingleDatasetService,
AtlasViewerConstantsServices
} from "../singleDataset.base";
+import { MAT_DIALOG_DATA } from "@angular/material";
@Component({
selector: 'single-dataset-view',
@@ -21,8 +22,10 @@ export class SingleDatasetView extends SingleDatasetBase{
dbService: DatabrowserService,
singleDatasetService: KgSingleDatasetService,
cdr: ChangeDetectorRef,
- constantService: AtlasViewerConstantsServices
+ constantService: AtlasViewerConstantsServices,
+
+ @Optional() @Inject(MAT_DIALOG_DATA) data: any
){
- super(dbService, singleDatasetService, cdr, constantService)
+ super(dbService, singleDatasetService, cdr, constantService, data)
}
}
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
index 8c41f9dfd842996879ecd012d8a6f9fdbe66f9b2..55c8b228fc92a58ffc82fc2965443bcd480b5caa 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
@@ -17,8 +17,7 @@
<mat-grid-tile *ngFor="let kgRef of kgReference">
<a [href]="kgRef | doiParserPipe"
matTooltip="Explore"
- (mousedown)="stop($event)"
- (click)="stop($event)"
+ iav-stop="click mousedown"
mat-icon-button
target="_blank">
<i class="fas fa-external-link-alt"></i>
@@ -29,8 +28,8 @@
<mat-grid-tile *ngIf="downloadEnabled">
<button
- (mousedown)="stop($event)"
- (click)="stop($event);toggleFav()"
+ iav-stop="click mousedown"
+ (click)="toggleFav()"
matTooltip="Pin"
mat-icon-button
[color]="(favedDataentries$ | async | datasetIsFaved : dataset) ? 'primary' : 'basic'">
@@ -41,8 +40,8 @@
<!-- preview -->
<mat-grid-tile *ngIf="preview">
<button
- (mousedown)="stop($event)"
- (click)="stop($event);showPreviewList(previewFilesListTemplate)"
+ iav-stop="click mousedown"
+ (click)="showPreviewList(previewFilesListTemplate)"
matTooltip="Preview"
mat-icon-button>
<i class="far fa-eye"></i>
@@ -53,8 +52,8 @@
<mat-grid-tile *ngIf="downloadEnabled">
<button
matTooltip="Download"
- (mousedown)="stop($event)"
- (click)="stop($event);downloadZipFromKg()"
+ iav-stop="click mousedown"
+ (click)="downloadZipFromKg()"
[disabled]="downloadInProgress"
mat-icon-button>
<i class="ml-1 fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
@@ -72,10 +71,8 @@
<mat-card-content *ngIf="!simpleMode">
<div class="d-block mb-2"
*ngFor="let publication of publications">
- <a
- *ngIf="publication.doi; else plainText"
- (mousedown)="stop($event)"
- (click)="stop($event)"
+ <a *ngIf="publication.doi; else plainText"
+ iav-stop="click mousedown"
[href]="publication.doi | doiParserPipe"
target="_blank">
{{ publication.cite }}
@@ -104,10 +101,9 @@
</a>
<!-- pin data -->
- <button
- (mousedown)="stop($event)"
- (click)="stop($event);toggleFav()"
- mat-button
+ <button mat-button
+ iav-stop="click mousedown"
+ (click)="toggleFav()"
color="primary"
[color]="(favedDataentries$ | async | datasetIsFaved : dataset) ? 'primary' : 'basic'">
{{ (favedDataentries$ | async | datasetIsFaved : dataset) ? 'Unpin' : 'Pin' }} this dataset
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
index 1f7811c6ee319d1f900e4807bbdc31a1fe981698..a107965354ff9af8f6598900784cee7fcd2a3a23 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
+++ b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
@@ -4,6 +4,8 @@ import { Component,ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/c
KgSingleDatasetService,
AtlasViewerConstantsServices
} from "../singleDataset.base";
+import { MatDialog } from "@angular/material";
+import { SingleDatasetView } from "../detailedView/singleDataset.component";
@Component({
selector: 'single-dataset-list-view',
@@ -20,8 +22,15 @@ export class SingleDatasetListView extends SingleDatasetBase {
dbService: DatabrowserService,
singleDatasetService: KgSingleDatasetService,
cdr: ChangeDetectorRef,
- constantService: AtlasViewerConstantsServices
+ constantService: AtlasViewerConstantsServices,
+ private dialog:MatDialog
){
super(dbService, singleDatasetService, cdr, constantService)
}
+
+ showDetailInfo(){
+ this.dialog.open(SingleDatasetView, {
+ data: this.dataset
+ })
+ }
}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
index a98815d99896c29159f9d3e7f03e590121dac32d..81d4bf4ccc4d9b1364d82dd5e5354be189a7dd96 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
+++ b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
@@ -1,21 +1,78 @@
-<mat-list-item [matTooltip]="name">
+<div class="d-flex flex-row flex-nowrap align-items-center">
- <small mat-line>
+ <!-- title -->
+ <small class="flex-grow-1 flex-shrink-1">
{{ name }}
</small>
- <!-- preview -->
+ <!-- pin -->
<button mat-icon-button
- *ngIf="preview"
- iav-stop="click mousedown"
- (click)="showPreviewList(previewFilesListTemplate)">
- <i class="far fa-eye"></i>
+ *ngIf="downloadEnabled"
+ class="no-focus flex-grow-0 flex-shrink-0"
+ iav-stop="click"
+ (click)="toggleFav()"
+ [color]="(favedDataentries$ | async | datasetIsFaved : dataset) ? 'primary' : 'basic'">
+ <mat-icon fontSet="fas" fontIcon="fa-thumbtack"></mat-icon>
</button>
- <button mat-icon-button>
- <i class="fas fa-info"></i>
+
+ <!-- more menu -->
+ <button mat-icon-button
+ [matMenuTriggerFor]="singleDatasetMenu"
+ class="flex-grow-0 flex-shrink-0 no-focus">
+ <i class="fas fa-ellipsis-v"></i>
</button>
-</mat-list-item>
+</div>
+
+<mat-menu
+ xPosition="before"
+ #singleDatasetMenu>
+
+ <!-- lazy rendering mat menu -->
+ <ng-template matMenuContent>
+
+ <!-- need to conditional render all mat-menu-item, or keyboard navigation becomes borked -->
+ <!-- see https://github.com/angular/components/issues/11652 -->
+ <button mat-menu-item
+ *ngIf="true"
+ class="no-focus"
+ (click)="showDetailInfo()">
+ <mat-icon fontSet="fas" fontIcon="fa-info"></mat-icon>
+ Detail
+ </button>
+
+ <!-- Explore -->
+ <a *ngFor="let kgRef of kgReference"
+ class="no-hover"
+ [href]="kgRef | doiParserPipe"
+ target="_blank"
+ mat-menu-item>
+ <mat-icon fontSet="fas" fontIcon="fa-globe-europe"></mat-icon>
+ Explore
+ <i class="fas fa-external-link-alt"></i>
+ </a>
+
+ <!-- preview -->
+ <button mat-menu-item
+ *ngIf="true"
+ class="no-focus"
+ (click)="showPreviewList(previewFilesListTemplate)">
+ <mat-icon fontSet="far" fontIcon="fa-eye"></mat-icon>
+ Preview
+ </button>
+
+ <!-- download -->
+ <button mat-menu-item
+ *ngIf="downloadEnabled"
+ class="no-focus"
+ iav-stop="click"
+ (click)="downloadZipFromKg()"
+ [disabled]="downloadInProgress">
+ <mat-icon [ngClass]="{'fa-spinner': downloadInProgress}" fontSet="fas" [fontIcon]="!downloadInProgress? 'fa-download' :'fa-pulse'"></mat-icon>
+ Download
+ </button>
+ </ng-template>
+</mat-menu>
<ng-template #previewFilesListTemplate>
<preview-component
diff --git a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
index 034d7e250aa9aa30d055e0d120980ad664ee07ab..19ff7b893d21c82b0a9ef81527bf2f895429cc90 100644
--- a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
+++ b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
@@ -57,9 +57,12 @@ export class SingleDatasetBase implements OnInit {
private dbService: DatabrowserService,
private singleDatasetService: KgSingleDatasetService,
private cdr: ChangeDetectorRef,
- private constantService: AtlasViewerConstantsServices
+ private constantService: AtlasViewerConstantsServices,
+
+ dataset?: any
){
this.favedDataentries$ = this.dbService.favedDataentries$
+ if (dataset) this.dataset = dataset
}
ngOnInit() {
@@ -143,10 +146,6 @@ export class SingleDatasetBase implements OnInit {
this.previewingFile.emit(file)
this.singleDatasetService.previewFile(file, this.dataset)
}
-
- stop(event:Event){
- event.stopPropagation()
- }
downloadZipFromKg() {
this.downloadInProgress = true
diff --git a/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.style.css b/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.style.css
index df352ebd76c28846b95958ebb0e4ed143da236d2..a37da10afb7571d0f5a2010aff618cb2b4f223bf 100644
--- a/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.style.css
+++ b/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.style.css
@@ -5,7 +5,7 @@
top: 0;
left: 0;
position: absolute;
- z-index: 999;
+ z-index: 9;
pointer-events: none;
}
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index a12387b37fa30b2bb1e94a2c148b339e8c4f1343..7a24467e0032549f794d24b2c760dff7bce8aec5 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -3,12 +3,10 @@
<!-- content append -->
<ng-container card-content="append">
- <mat-card-content (focusin)="showDataset = true">
- <region-text-search-autocomplete
- [showBadge]="true"
- class="d-block w-100">
- </region-text-search-autocomplete>
- </mat-card-content>
+ <region-text-search-autocomplete
+ [showBadge]="true"
+ class="d-block w-100">
+ </region-text-search-autocomplete>
</ng-container>
<!-- footer content -->
@@ -37,9 +35,15 @@
<!-- content prepend -->
<ng-container *ngIf="viewerStateController.regionsSelected$ | async as regionsSelected" card-content="prepend">
<mat-card-content>
- <p class="font-weight-bold">
- {{ regionsSelected.length === 0 ? 'In the current view' : regionsSelected.length === 1 ? regionsSelected[0].name : 'Multi-region selection' }}
- </p>
+ <div class="d-flex flex-row align-items-center flex-nowrap">
+ <i *ngIf="regionsSelected.length === 1"
+ class="fas fa-brain font-2x mr-2">
+ </i>
+
+ <span class="font-weight-bold">
+ {{ regionsSelected.length === 0 ? 'In the current view' : regionsSelected.length === 1 ? regionsSelected[0].name : 'Multi-region selection' }}
+ </span>
+ </div>
</mat-card-content>
</ng-container>
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index a78db023d0d1baaf078dd624c78cdc096eb91ca4..3d2399feb928cbb29784c61219766f66e0fe4d89 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -20,9 +20,12 @@ import {
MatSliderModule,
MatExpansionModule,
MatGridListModule,
- MatIconModule
+ MatIconModule,
+ MatMenuModule
} from '@angular/material';
+import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'
+
import { NgModule } from '@angular/core';
import {DragDropModule} from "@angular/cdk/drag-drop";
@@ -50,7 +53,9 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
DragDropModule,
MatExpansionModule,
MatGridListModule,
- MatIconModule
+ MatIconModule,
+ MatMenuModule,
+ ExperimentalScrollingModule
],
exports: [
MatButtonModule,
@@ -75,7 +80,9 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
DragDropModule,
MatExpansionModule,
MatGridListModule,
- MatIconModule
+ MatIconModule,
+ MatMenuModule,
+ ExperimentalScrollingModule
],
})
export class AngularMaterialModule { }
diff --git a/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.style.css b/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.style.css
index 0a4edb055852eb697e52a21108f925d49a58a7bd..c8d6803350d048c3d3214d787612704d3487a520 100644
--- a/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.style.css
+++ b/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.style.css
@@ -2,3 +2,8 @@ mat-chip-list >>> .mat-chip-list-wrapper
{
height: 100%;
}
+
+mat-chip-list
+{
+ padding: 0.5rem;
+}
diff --git a/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.template.html b/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.template.html
index d1bf21a6f3dea5322ebffaf89f856721a7ee7560..0a3e1fa75dfbb6698122c160e4c27c7b5358ede3 100644
--- a/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.template.html
+++ b/src/ui/viewerStateController/currentlySelectedRegions/currentlySelectedRegions.template.html
@@ -1,4 +1,4 @@
-<mat-chip-list class="d-block w-100 h-100">
+<mat-chip-list class="d-block h-100">
<cdk-virtual-scroll-viewport
class="w-100 h-100 overflow-x-hidden"
[itemSize]="32">
@@ -21,4 +21,4 @@
</button>
</mat-chip>
</cdk-virtual-scroll-viewport>
-</mat-chip-list>
\ No newline at end of file
+</mat-chip-list>
diff --git a/src/ui/viewerStateController/regionHierachy/regionHierarchy.style.css b/src/ui/viewerStateController/regionHierachy/regionHierarchy.style.css
index 20624e1414089518114df35ebd8e0848275622b8..62181c1198ba15da064d26ce0385738fc5177fb8 100644
--- a/src/ui/viewerStateController/regionHierachy/regionHierarchy.style.css
+++ b/src/ui/viewerStateController/regionHierachy/regionHierarchy.style.css
@@ -23,11 +23,6 @@ div[treeContainer]
overflow:hidden;
}
-[hideScrollbarcontainer] [hideScrollbarInnerContainer]
-{
- width: calc(100% + 2em);
-}
-
input[type="text"]
{
border:none;
diff --git a/src/ui/viewerStateController/viewerState.template.html b/src/ui/viewerStateController/viewerState.template.html
index 7b4b40449df22507121d105b11e2b6f4b95ebe22..52fdf3a93c24d5d79f092f4dd47a312436ad2c86 100644
--- a/src/ui/viewerStateController/viewerState.template.html
+++ b/src/ui/viewerStateController/viewerState.template.html
@@ -1,128 +1,133 @@
<mat-card>
<!-- template selection -->
- <mat-card-content class="d-inline-flex flex-nowrap w-100">
- <mat-form-field class="flex-grow-1">
- <mat-label>
- Template
- </mat-label>
- <mat-select
- [value]="(templateSelected$ | async)?.name"
- (selectionChange)="handleTemplateChange($event)"
- (openedChange)="focused = $event">
- <mat-option
- *ngFor="let template of (availableTemplates$ | async)"
- [value]="template.name">
- {{ template.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
-
- <ng-container *ngIf="templateSelected$ | async as templateSelected">
- <!-- show on hover component -->
- <sleight-of-hand
- class="d-inline-block"
- *ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo">
-
- <!-- shown when off -->
- <div sleight-of-hand-front>
- <button
- mat-icon-button>
- <i class="fas fa-info"></i>
- </button>
- </div>
-
- <!-- shown on hover -->
- <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
- <button class="flex-grow-0 flex-shrink-0" mat-icon-button>
- <i class="fas fa-info"></i>
- </button>
-
- <div class="position-relative">
- <button class="position-relative invisible pe-none" mat-icon-button>
+ <mat-card-content class="d-inline-flex flex-column flex-nowrap w-100">
+
+ <div class="flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
+ <mat-form-field class="flex-grow-1 flex-shrink-1">
+ <mat-label>
+ Template
+ </mat-label>
+ <mat-select
+ [value]="(templateSelected$ | async)?.name"
+ (selectionChange)="handleTemplateChange($event)"
+ (openedChange)="focused = $event">
+ <mat-option
+ *ngFor="let template of (availableTemplates$ | async)"
+ [value]="template.name">
+ {{ template.name }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <ng-container *ngIf="templateSelected$ | async as templateSelected">
+ <!-- show on hover component -->
+ <sleight-of-hand
+ class="d-inline-block flex-grow-0 flex-shrink-0"
+ *ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo">
+
+ <!-- shown when off -->
+ <div sleight-of-hand-front>
+ <button
+ mat-icon-button>
<i class="fas fa-info"></i>
</button>
-
- <single-dataset-view
- *ngFor="let originDataset of moreInfo.originDatasets"
- class="position-absolute left-0 top-0 w-40em"
- [name]="moreInfo.name"
- [description]="moreInfo.description"
- [publications]="moreInfo.publications"
- [kgSchema]="originDataset && originDataset.kgSchema"
- [kgId]="originDataset && originDataset.kgId">
- </single-dataset-view>
</div>
-
- </div>
- </sleight-of-hand>
-
- </ng-container>
- </mat-card-content>
-
- <!-- parcellation selection -->
- <mat-card-content class="d-inline-flex flex-nowrap w-100">
+
+ <!-- shown on hover -->
+ <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
+ <button class="flex-grow-0 flex-shrink-0" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+
+ <div class="position-relative">
+ <button class="position-relative invisible pe-none" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+
+ <single-dataset-view
+ *ngFor="let originDataset of moreInfo.originDatasets"
+ class="position-absolute left-0 top-0 w-40em"
+ [name]="moreInfo.name"
+ [description]="moreInfo.description"
+ [publications]="moreInfo.publications"
+ [kgSchema]="originDataset && originDataset.kgSchema"
+ [kgId]="originDataset && originDataset.kgId">
+ </single-dataset-view>
+ </div>
+
+ </div>
+ </sleight-of-hand>
+
+ </ng-container>
+ </div>
- <mat-form-field
- *ngIf="templateSelected$ | async as templateSelected"
- class="flex-grow-1">
- <mat-label>
- Parcellation
- </mat-label>
- <mat-select
- (selectionChange)="handleParcellationChange($event)"
- [value]="(parcellationSelected$ | async)?.name"
- (openedChange)="focused = $event">
- <mat-option
- *ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
- [value]="parcellation.name">
- {{ parcellation.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
-
- <ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
- <!-- show on hover component -->
- <sleight-of-hand
- class="d-inline-block"
- *ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo">
-
- <!-- shown when off -->
- <div sleight-of-hand-front>
- <button
- mat-icon-button>
- <i class="fas fa-info"></i>
- </button>
- </div>
-
- <!-- shown on hover -->
- <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
- <button class="flex-grow-0 flex-shrink-0" mat-icon-button>
- <i class="fas fa-info"></i>
- </button>
-
- <div class="position-relative">
- <button class="position-relative invisible pe-none" mat-icon-button>
+ <!-- parcellation selection -->
+ <div class="flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
+ <mat-form-field
+ *ngIf="templateSelected$ | async as templateSelected"
+ class="flex-grow-1 flex-shrink-1">
+ <mat-label>
+ Parcellation
+ </mat-label>
+ <mat-select
+ (selectionChange)="handleParcellationChange($event)"
+ [value]="(parcellationSelected$ | async)?.name"
+ (openedChange)="focused = $event">
+ <mat-option
+ *ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
+ [value]="parcellation.name">
+ {{ parcellation.name }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
+ <!-- show on hover component -->
+ <sleight-of-hand
+ class="d-inline-block flex-grow-0 flex-shrink-0"
+ *ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo">
+
+ <!-- shown when off -->
+ <div sleight-of-hand-front>
+ <button
+ mat-icon-button>
<i class="fas fa-info"></i>
</button>
-
- <single-dataset-view
- *ngFor="let originDataset of moreInfo.originDatasets"
- class="position-absolute left-0 top-0 w-40em"
- [name]="moreInfo.name"
- [description]="moreInfo.description"
- [publications]="moreInfo.publications"
- [kgSchema]="originDataset && originDataset.kgSchema"
- [kgId]="originDataset && originDataset.kgId">
- </single-dataset-view>
</div>
- </div>
- </sleight-of-hand>
- </ng-container>
+
+ <!-- shown on hover -->
+ <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
+ <button class="flex-grow-0 flex-shrink-0" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+
+ <div class="position-relative">
+ <button class="position-relative invisible pe-none" mat-icon-button>
+ <i class="fas fa-info"></i>
+ </button>
+
+ <single-dataset-view
+ *ngFor="let originDataset of moreInfo.originDatasets"
+ class="position-absolute left-0 top-0 w-40em"
+ [name]="moreInfo.name"
+ [description]="moreInfo.description"
+ [publications]="moreInfo.publications"
+ [kgSchema]="originDataset && originDataset.kgSchema"
+ [kgId]="originDataset && originDataset.kgId">
+ </single-dataset-view>
+ </div>
+ </div>
+ </sleight-of-hand>
+ </ng-container>
+ </div>
+
+ <div class="flex-grow-1 flex-shrink-0">
+ <ng-content select="[card-content='append']">
+ </ng-content>
+ </div>
</mat-card-content>
- <ng-content select="[card-content='append']">
- </ng-content>
<mat-card-footer>
<ng-content select="[card-footer]">
diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
index 89409b75a48ac9cb797d4064e0e73887c6f21587..bf53ed23584df960562ea335dc983a961e102aa0 100644
--- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+++ b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
@@ -57,5 +57,4 @@ export class FixedMouseContextualContainerDirective {
this.hide()
}
}
-
}
\ No newline at end of file
diff --git a/src/util/directives/toastContainer.directive.ts b/src/util/directives/toastContainer.directive.ts
deleted file mode 100644
index d80740c2e549c68827bc8d296c8282ff49689e13..0000000000000000000000000000000000000000
--- a/src/util/directives/toastContainer.directive.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Directive, ViewContainerRef,ComponentFactory, ComponentFactoryResolver, TemplateRef, ComponentRef } from '@angular/core'
-import { ToastService, defaultToastConfig } from 'src/services/toastService.service';
-import { ToastComponent } from 'src/components/toast/toast.component';
-import { AtlasViewerAPIServices } from 'src/atlasViewer/atlasViewer.apiService.service';
-import { ToastHandler } from '../pluginHandlerClasses/toastHandler';
-
-@Directive({
- selector: '[toastDirective]'
-})
-
-export class ToastContainerDirective{
-
- private toastComponentFactory: ComponentFactory<ToastComponent>
-
- constructor(
- private viewContainerRef: ViewContainerRef,
- private toastService: ToastService,
- private cfr: ComponentFactoryResolver,
- private apiService: AtlasViewerAPIServices
- ){
- this.toastComponentFactory = this.cfr.resolveComponentFactory(ToastComponent)
-
- this.toastService.showToast = (message, config = {}) => {
-
- const _config = {
- ...defaultToastConfig,
- ...config
- }
- const toastComponent = this.viewContainerRef.createComponent(this.toastComponentFactory)
- if(typeof message === 'string')
- toastComponent.instance.message = message
- if(message instanceof TemplateRef){
- toastComponent.instance.messageContainer.createEmbeddedView(message as TemplateRef<any>)
- }
-
- toastComponent.instance.dismissable = _config.dismissable
- toastComponent.instance.timeout = _config.timeout
-
- let subscription
-
- const dismissToast = () => {
- if(subscription) subscription.unsubscribe()
- toastComponent.destroy()
- }
-
- subscription = toastComponent.instance.dismissed.subscribe(dismissToast)
- return dismissToast
- }
-
- this.toastService.getToastHandler = () => {
- return this.getToastHandler()
- }
-
- this.apiService.interactiveViewer.uiHandle.getToastHandler = () => {
- return this.getToastHandler()
- }
- }
-
- public getToastHandler(){
- const handler = new ToastHandler()
- let toastComponent:ComponentRef<ToastComponent>
- handler.show = () => {
- toastComponent = this.viewContainerRef.createComponent(this.toastComponentFactory)
-
- toastComponent.instance.dismissable = handler.dismissable
-
- if (typeof handler.message === 'string') toastComponent.instance.message = handler.message
- if (handler.message instanceof TemplateRef) toastComponent.instance.messageContainer.createEmbeddedView(handler.message as TemplateRef<any>)
- toastComponent.instance.htmlMessage = handler.htmlMessage
- toastComponent.instance.timeout = handler.timeout
-
- const _subscription = toastComponent.instance.dismissed.subscribe(userInitiated => {
- _subscription.unsubscribe()
- handler.hide()
- })
- }
-
- handler.hide = () => {
- if(toastComponent){
- toastComponent.destroy()
- toastComponent = null
- }
- }
-
- return handler
- }
-}