diff --git a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts index 533e5ea2818a13d8655fcad988a243dda4141e6e..b375fa6c94fc299b29e7c401d9a5441083e61381 100644 --- a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts +++ b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts @@ -1,5 +1,5 @@ -import { Component, EventEmitter, OnDestroy, Optional } from "@angular/core"; -import { Observable, of, Subscription } from "rxjs"; +import { Component, ElementRef, EventEmitter, HostListener, OnDestroy, Optional } from "@angular/core"; +import { fromEvent, Observable, of, Subscription } from "rxjs"; import { RegionalFeaturesService } from "src/ui/regionalFeatures/regionalFeature.service"; import { PureContantService } from "src/util"; import { RegionFeatureBase } from "../../base/regionFeature.base"; @@ -16,12 +16,18 @@ export class ReceptorDensityFeatureCmp extends RegionFeatureBase implements ISin public DS_PREVIEW_URL = DATASET_PREVIEW_URL viewChanged: EventEmitter<null> = new EventEmitter() + private WEB_COMPONENT_MOUSEOVER_EVENT_NAME = 'kg-ds-prv-regional-feature-mouseover' + private webComponentOnHover: string = null + + public selectedReceptor: string + public darktheme$: Observable<boolean> private subs: Subscription[] = [] public depScriptLoaded$: Observable<boolean> constructor( regService: RegionalFeaturesService, + el: ElementRef, @Optional() pureConstantService: PureContantService ){ super(regService) @@ -31,9 +37,20 @@ export class ReceptorDensityFeatureCmp extends RegionFeatureBase implements ISin } else { this.darktheme$ = of(false) } + + this.subs.push( + fromEvent(el.nativeElement, this.WEB_COMPONENT_MOUSEOVER_EVENT_NAME).subscribe((ev: CustomEvent) => { + this.webComponentOnHover = ev.detail?.data?.receptor?.label + }) + ) } - public selectedReceptor: string + @HostListener('click') + onClick(){ + if (this.webComponentOnHover) { + this.selectedReceptor = this.webComponentOnHover + } + } ngOnDestroy(){ while(this.subs.length > 0) this.subs.pop().unsubscribe() diff --git a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html index 474bb7df28823b10240fc748fa8725e7384d1742..63da533879908ef0a59b8cd9691411e192de6f41 100644 --- a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html +++ b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html @@ -12,18 +12,26 @@ </ng-container> </ng-container> -<mat-form-field class="mt-2 w-100"> - <mat-label> - Select a receptor - </mat-label> - <mat-select [(value)]="selectedReceptor"> - <mat-option - *ngFor="let receptor of (data$ | async | getAllReceptors)" - [value]="receptor"> - {{ receptor }} - </mat-option> - </mat-select> -</mat-form-field> +<ng-container *ngIf="data$ | async | getAllReceptors as allReceptors; else selectPlaceHolderTmpl"> + + <mat-form-field class="mt-2 w-100" *ngIf="allReceptors.length > 0; else selectPlaceHolderTmpl"> + <mat-label> + Select a receptor + </mat-label> + <mat-select [(value)]="selectedReceptor"> + <mat-option + *ngFor="let receptor of allReceptors" + [value]="receptor"> + {{ receptor }} + </mat-option> + </mat-select> + </mat-form-field> + +</ng-container> + +<ng-template #selectPlaceHolderTmpl> + <span class="text-muted">No profile or autoradiographs available.</span> +</ng-template> <ng-template [ngIf]="selectedReceptor"> <ng-container *ngTemplateOutlet="prArTmpl; context: { filter: '_pr_', label: 'Profile' }">