Skip to content
Snippets Groups Projects
Commit 9ae0baf4 authored by Xiao Gui's avatar Xiao Gui
Browse files

chore: added click interactivity to receptor fp

chore: added no pr or ar message
parent 6181c38d
No related branches found
No related tags found
No related merge requests found
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()
......
......@@ -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' }">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment