open spatial landmark dataset on click

src/atlasViewer/atlasViewer.component.ts

@@ -41,6 +41,7 @@ import { FixedMouseContextualContainerDirective } from "src/util/directives/Fixe
 import { getViewer, isSame } from "src/util/fn";
 import { NehubaContainer } from "../ui/nehubaContainer/nehubaContainer.component";
 import { colorAnimation } from "./atlasViewer.animation"
+import {SingleDatasetView} from "src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component";
 
 /**
  * TODO
@@ -124,6 +125,9 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   private persistentStateNotifierTemplate$: Observable<string>
   // private pluginRegionSelectionEnabled: boolean = false
 
+  private hoveringRegions = []
+  private hoveringLandmark: any
+
   constructor(
     private store: Store<IavRootStoreInterface>,
     private widgetServices: WidgetServices,
@@ -299,10 +303,14 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
         }
       }),
     )
-
-    this.onhoverSegments$.subscribe(hr => {
-      this.hoveringRegions = hr
-    })
+    this.subscriptions.push(
+      this.onhoverSegments$.subscribe(hr => {
+        this.hoveringRegions = hr
+      }),
+      this.onhoverLandmark$.subscribe(hl => {
+        this.hoveringLandmark = hl
+      })
+    )
   }
 
   private selectedParcellation$: Observable<any>
@@ -447,14 +455,24 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     )
   }
 
-  private hoveringRegions = []
-
   public mouseDownNehuba(_event) {
     this.rClContextualMenu.hide()
   }
 
   public mouseClickNehuba(event) {
     // if (this.mouseUpLeftPosition === event.pageX && this.mouseUpTopPosition === event.pageY) {}
+    if (this.hoveringLandmark) {
+      this.matDialog.open(SingleDatasetView, {
+        data: {
+          name: this.hoveringLandmark.landmarkDataset[0].name,
+          sourceTitle: this.hoveringLandmark.landmarkName,
+          description: this.hoveringLandmark.landmarkDataset[0].description,
+          kgExternalLink: this.hoveringLandmark.landmarkDataset[0].externalLink,
+          //ToDo change to dynamic
+          underEmbargo: true
+        },
+      })
+    }
     if (!this.rClContextualMenu) { return }
     this.rClContextualMenu.mousePos = [
       event.clientX,

src/atlasViewer/atlasViewer.template.html

@@ -133,7 +133,12 @@
 
                 </mat-icon>
 
-                <div matLine *ngFor="let text of labelText.text" [innerHTML]="text">
+                <div class="d-flex flex-column">
+                  <div *ngIf="labelText.dataset && labelText.dataset.length">
+                    <span matLine *ngFor="let dataset of labelText.dataset" [innerHTML]="dataset"></span>
+                  </div>
+                  <div matLine *ngFor="let text of labelText.text" [innerHTML]="text">
+                  </div>
                 </div>
               </mat-list-item>
             </mat-list>
@@ -160,20 +165,8 @@
             </div>
           </ng-container>
         </ng-container>
-
-        <ng-container *ngIf="(onhoverLandmarkForFixed$ | async) as onHoverLandmark">
-          <ng-container *ngIf="onHoverLandmark.landmarkName">
-            <landmark-menu class="pe-all"
-                           [landmark]="onHoverLandmark"
-                           (closeLandmarkMenu)="rClContextualMenu.hide()">
-
-            </landmark-menu>
-          </ng-container>
-        </ng-container>
-
       </div>
 
-
     </layout-floating-container>
 
     <!-- required for manufacturing plugin templates -->

src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html

 
+<mat-card-title *ngIf="sourceTitle">
+  {{ sourceTitle }}
+</mat-card-title>
 <!-- title -->
 <mat-card-subtitle>
   {{ name }}
@@ -122,7 +125,7 @@
 
 
   <!-- download -->
-  <a *ngIf="files.length > 0"
+  <a *ngIf="files && files.length > 0"
     [href]="dlFromKgHref"
     target="_blank">
     <button
@@ -148,6 +151,8 @@
     </span>
     <i class="ml-1 far fa-eye"></i>
   </button>
+
+  <button *ngIf="underEmbargo" mat-button disabled>Under embargo</button>
 </mat-card-actions>
 
 <mat-card-footer></mat-card-footer>

src/ui/databrowserModule/singleDataset/singleDataset.base.ts

@@ -22,6 +22,7 @@ export class SingleDatasetBase implements OnInit {
    * while the actual data is being loaded from KG with kgSchema and kgId
    */
   @Input() public name?: string
+  @Input() public sourceTitle?: string
   @Input() public description?: string
   @Input() public publications?: IPublication[]
 
@@ -32,6 +33,7 @@ export class SingleDatasetBase implements OnInit {
   @Input() public simpleMode: boolean = false
 
   @Input() public kgExternalLink: string = ''
+  @Input() public underEmbargo: boolean = false
 
   @Output() public previewingFile: EventEmitter<ViewerPreviewFile> = new EventEmitter()
 
@@ -82,13 +84,16 @@ export class SingleDatasetBase implements OnInit {
     const { kgId, kgSchema, dataset } = this
     this.dlFromKgHref = this.singleDatasetService.getDownloadZipFromKgHref({ kgSchema, kgId })
     if ( dataset ) {
-      const { name, description, kgReference, publications, files, preview } = dataset
+      const { name, sourceTitle, description, kgReference, publications, files, preview, kgExternalLink, underEmbargo } = dataset
       this.name = name
+      this.sourceTitle = sourceTitle
       this.description = description
       this.kgReference = kgReference
       this.publications = publications
       this.files = files
       this.preview = preview
+      this.kgExternalLink = kgExternalLink
+      this.underEmbargo = underEmbargo
 
       return
     }

src/ui/nehubaContainer/landmarkUnit/landmarkMenu/landmarkMenu.component.ts

-import {Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from "@angular/core";
-import {MatDialog, MatDialogRef} from "@angular/material/dialog";
-
-@Component({
-  selector: 'landmark-menu',
-  templateUrl: './landmarkMenu.template.html'
-})
-export class LandmarkMenuComponent {
-    @Input() landmark: any
-    @Output() closeLandmarkMenu: EventEmitter<any> = new EventEmitter<any>()
-    @ViewChild('spatialDatasetPreview', {read: TemplateRef}) spatialDatasetPreview: TemplateRef<any>
-
-    private spatialLandmarkDatasetDialog: MatDialogRef<any>
-
-
-    constructor(private matDialog: MatDialog,) {}
-
-    exploreDataset() {
-      this.spatialLandmarkDatasetDialog = this.matDialog.open(this.spatialDatasetPreview)
-      this.closeLandmarkMenu.emit()
-    }
-}
\ No newline at end of file

src/ui/nehubaContainer/landmarkUnit/landmarkMenu/landmarkMenu.template.html

-<mat-card>
-    <mat-card-subtitle>
-        {{ landmark.landmarkName }}
-    </mat-card-subtitle>
-    <mat-card-actions class="d-flex flex-row flex-wrap">
-        <button (click)="exploreDataset()"
-                *ngFor="let dataset of landmark.landmarkDataset"
-                [matTooltip]="dataset.name.length>12 && dataset.name"
-                mat-menu-item>
-            Explore dataset {{ (dataset.name.length > 12) ? (dataset.name | slice:0:12) + '..' : (dataset.name) }}
-        </button>
-    </mat-card-actions>
-</mat-card>
-
-<ng-template #spatialDatasetPreview>
-    <div *ngFor="let dataset of landmark.landmarkDataset">
-        <single-dataset-view
-                [name]="dataset.name"
-                [description]="dataset.description"
-                [kgExternalLink]="dataset.externalLink">
-        </single-dataset-view>
-    </div>
-</ng-template>

src/ui/ui.module.ts

@@ -78,7 +78,6 @@ import {ConnectivityBrowserComponent} from "src/ui/connectivityBrowser/connectiv
 import { RegionMenuComponent } from 'src/ui/parcellationRegion/regionMenu/regionMenu.component'
 import { RegionListSimpleViewComponent } from "./parcellationRegion/regionListSimpleView/regionListSimpleView.component";
 import { SimpleRegionComponent } from "./parcellationRegion/regionSimple/regionSimple.component";
-import {LandmarkMenuComponent} from "src/ui/nehubaContainer/landmarkUnit/landmarkMenu/landmarkMenu.component";
 
 @NgModule({
   imports : [
@@ -130,7 +129,6 @@ import {LandmarkMenuComponent} from "src/ui/nehubaContainer/landmarkUnit/landmar
     ConnectivityBrowserComponent,
     SimpleRegionComponent,
     RegionListSimpleViewComponent,
-    LandmarkMenuComponent,
 
     /* pipes */
     GroupDatasetByRegion,
@@ -194,7 +192,6 @@ import {LandmarkMenuComponent} from "src/ui/nehubaContainer/landmarkUnit/landmar
     ViewerStateMini,
     RegionMenuComponent,
     FixedMouseContextualContainerDirective,
-    LandmarkMenuComponent,
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,

src/util/directives/mouseOver.directive.ts

@@ -176,6 +176,15 @@ export class MouseOverTextPipe implements PipeTransform {
     }
   }
 
+  private renderDatasetTitle = ({ label, obj }): SafeHtml[] => {
+    switch (label) {
+    case 'landmark':
+      return obj.dataset.map(d => this.sanitizer.sanitize(SecurityContext.HTML, d.name))
+    default:
+      return null
+    }
+  }
+
   public transform(inc: {segments: any, landmark: any, userLandmark: any}): Array<{label: string, text: SafeHtml[]}> {
     const keys = Object.keys(inc)
     return keys
@@ -187,6 +196,7 @@ export class MouseOverTextPipe implements PipeTransform {
         return {
           label: key,
           text: this.renderText({ label: key, obj: inc[key] }),
+          dataset: this.renderDatasetTitle({ label: key, obj: inc[key] })
         }
       })
   }