diff --git a/common/constants.js b/common/constants.js index a2809d6b76625aaef42c4fa54abc3c668dd3747c..d049e51ec4cb95099b437d673a082b93abff1f7b 100644 --- a/common/constants.js +++ b/common/constants.js @@ -8,7 +8,7 @@ COLLAPSE: 'Collapse', // dataset specific - EXPLORE_DATASET_IN_KG: `Explore dataset in Knowledge`, + EXPLORE_DATASET_IN_KG: `Explore dataset in Knowledge Graph`, SHOW_DATASET_PREVIEW: 'Show dataset preview', TOGGLE_EXPLORE_PANEL: `Toggle explore panel`, MODALITY_FILTER: `Toggle dataset modality filter`, diff --git a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.component.ts b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.component.ts index bc7ecdd969511e0c44a559a1fe1d33ddfa72a352..ca11f4955796b127e928fe8f29426cf52070c31a 100644 --- a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.component.ts +++ b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnChanges, OnDestroy, Optional, SimpleChange, SimpleChanges } from "@angular/core"; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnChanges, OnDestroy, Optional, Output, EventEmitter } from "@angular/core"; import { MatSnackBar } from "@angular/material/snack-bar"; import { Observable } from "rxjs"; import { REGION_OF_INTEREST, TRegionOfInterest } from "src/util/interfaces"; @@ -18,6 +18,9 @@ import { SingleDatasetBase } from "../singleDataset.base"; export class SingleDatasetSideNavView extends SingleDatasetBase implements OnChanges, OnDestroy{ + @Output() + clear: EventEmitter<null> = new EventEmitter() + constructor( dbService: DatabrowserService, sDsService: KgSingleDatasetService, diff --git a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.style.css b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.style.css index 8d0266fe77710f71d9e50865274cd336aaf8cecc..ccdddfd5e46b96c4f33db7ef7e6370dd1bd59f02 100644 --- a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.style.css +++ b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.style.css @@ -1,3 +1,8 @@ +:host +{ + position: relative; +} + .header-container { padding: 16px; diff --git a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html index 91dd2aa8d349b4c6a51f816838729f8b6c95e783..f86265a5e28e97fa691246ce3c020eb4c48fe69f 100644 --- a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html +++ b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html @@ -1,9 +1,19 @@ +<button mat-button + class="position-absolute z-index-10 m-2" + (click)="clear.emit()"> + <i class="fas fa-chevron-left"></i> + <span class="ml-1"> + Back + </span> +</button> + <mat-card class="mat-elevation-z4"> <div class="header-container"> <mat-card-title> - <span> + <ng-content select="[region-of-interest]"></ng-content> + <div> {{ name }} - </span> + </div> </mat-card-title> <mat-card-subtitle class="d-inline-flex align-items-center"> @@ -31,9 +41,6 @@ </mat-card-subtitle> </div> -</mat-card> - -<mat-card class="mt-4"> <mat-card-content> <mat-tab-group> @@ -75,7 +82,6 @@ </mat-card-content> </mat-card> - <ng-template #favDatasetBtn> <ng-container *ngTemplateOutlet="isFavCtxTmpl; context: { isFav: (favedDataentries$ | async | datasetIsFaved : ({ fullId: fullId })) diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts index a8d205d0455570436c88d3506f5b3dce0abab365..a0ca5fae81db51d42565d081eb8f8a218efa4d4b 100644 --- a/src/ui/nehubaContainer/nehubaContainer.component.ts +++ b/src/ui/nehubaContainer/nehubaContainer.component.ts @@ -310,7 +310,8 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy { private store: Store<any>, private elementRef: ElementRef, private log: LoggingService, - private cdr: ChangeDetectorRef + private cdr: ChangeDetectorRef, + @Optional() @Inject(REGION_OF_INTEREST) public regionOfInterest$: Observable<any> ) { this.useMobileUI$ = this.pureConstantService.useTouchUI$ @@ -1113,12 +1114,14 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy { } } - public clearPreviewingDataset(){ + public clearPreviewingDataset(id: string){ /** * clear all preview */ this.store.dispatch( - uiActionHideAllDatasets() + id + ? uiActionHideDatasetWithId({ id }) + : uiActionHideAllDatasets() ) } } diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html index 3cc1fdd470830deb315376f68bbf29ceec226d60..1c9c490c1105b34065b29a217d20ce09723ad474 100644 --- a/src/ui/nehubaContainer/nehubaContainer.template.html +++ b/src/ui/nehubaContainer/nehubaContainer.template.html @@ -148,18 +148,26 @@ <!-- sidenav datasets --> <ng-container *ngIf="iavShownDataset.shownDatasetId$ | async as shownDatasetId"> <ng-template [ngIf]="shownDatasetId.length > 0" [ngIfElse]="sideNavVolumePreview"> - <!-- backbtn --> - <button mat-button class="position-fixed mt-4 z-index-10" - (click)="clearPreviewingDataset()"> - <i class="fas fa-chevron-left"></i> - <span> - Back - </span> - </button> + <!-- single dataset side nav panel --> <single-dataset-sidenav-view *ngFor="let id of shownDatasetId" + (clear)="clearPreviewingDataset(id)" [fullId]="id" class="side-nav-cover"> + <mat-chip *ngIf="regionOfInterest$ && regionOfInterest$ | async as region" + region-of-interest + iav-region + [region]="region" + [ngClass]="{ + 'darktheme':regionDirective.rgbDarkmode === true, + 'lighttheme': regionDirective.rgbDarkmode === false + }" + [style.backgroundColor]="regionDirective.rgbString" + #regionDirective="iavRegion"> + <span class="iv-custom-comp text text-truncate d-inline"> + {{ region.name }} + </span> + </mat-chip> </single-dataset-sidenav-view> </ng-template> </ng-container>