Merge pull request #733 from HumanBrainProject/exmpt_sidePanelDatasetUiISsues

exmpt: update on dataset side panel ui issues

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`,

src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.component.ts

-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,

src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.style.css

+:host
+{
+  position: relative;
+}
+
 .header-container
 {
   padding: 16px;

src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html

+<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 }))

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()
     )
   }
 }

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>