From 0982c72ee56857bec6457634147f7a611d4d7e04 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Fri, 9 Jun 2023 10:49:02 +0200 Subject: [PATCH] Greatly reduce lag caused by hover --- .../annotations/machine_annotation.ts | 4 +- .../components/annotations/thread.ts | 4 +- app/assets/javascripts/state/Annotations.ts | 37 +++++++++++-------- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/app/assets/javascripts/components/annotations/machine_annotation.ts b/app/assets/javascripts/components/annotations/machine_annotation.ts index 93e744e0b3..2020e0bad4 100644 --- a/app/assets/javascripts/components/annotations/machine_annotation.ts +++ b/app/assets/javascripts/components/annotations/machine_annotation.ts @@ -31,8 +31,8 @@ export class MachineAnnotation extends ShadowlessLitElement { render(): TemplateResult { return html`
+ @mouseenter="${() => annotationState.setHovered(this.data, true)}" + @mouseleave="${() => annotationState.setHovered(this.data, false)}">
${I18n.t(`js.annotation.type.${this.data.type}`)} diff --git a/app/assets/javascripts/components/annotations/thread.ts b/app/assets/javascripts/components/annotations/thread.ts index 910296a278..cd8481cb5b 100644 --- a/app/assets/javascripts/components/annotations/thread.ts +++ b/app/assets/javascripts/components/annotations/thread.ts @@ -88,8 +88,8 @@ export class Thread extends i18nMixin(ShadowlessLitElement) { render(): TemplateResult { return this.data ? html`
${this.data.responses.map(response => html` diff --git a/app/assets/javascripts/state/Annotations.ts b/app/assets/javascripts/state/Annotations.ts index 98665d8206..2169dd72f5 100644 --- a/app/assets/javascripts/state/Annotations.ts +++ b/app/assets/javascripts/state/Annotations.ts @@ -2,6 +2,7 @@ import { MachineAnnotationData } from "state/MachineAnnotations"; import { AnnotationType, UserAnnotationData } from "state/UserAnnotations"; import { State } from "state/state_system/State"; import { stateProperty } from "state/state_system/StateProperty"; +import { StateMap } from "state/state_system/StateMap"; export type AnnotationVisibilityOptions = "all" | "important" | "none"; export type AnnotationData = MachineAnnotationData | UserAnnotationData; @@ -25,24 +26,28 @@ export function isUserAnnotation(annotation: AnnotationData): annotation is User class AnnotationState extends State { @stateProperty visibility: AnnotationVisibilityOptions = "all"; @stateProperty isQuestionMode = false; - @stateProperty hoveredAnnotation: AnnotationData | null = null; + readonly isHoveredByKey = new StateMap(); + + private getKeyFromAnnotation(annotation: AnnotationData): string { + if (annotation === undefined || annotation === null) { + return ""; + } + + if (isUserAnnotation(annotation)) { + return `${annotation.id}`; + } + + return `${annotation.row}-${annotation.column}-${annotation.type}-${annotation.text}`; + } + + setHovered(annotation: AnnotationData, hovered: boolean): void { + const key = this.getKeyFromAnnotation(annotation); + this.isHoveredByKey.set(key, hovered); + } isHovered = (annotation: AnnotationData): boolean => { - return this.hoveredAnnotation === annotation || ( - this.hoveredAnnotation !== null && - annotation !== null && - annotation !== undefined && (( - isUserAnnotation(annotation) && - isUserAnnotation(this.hoveredAnnotation) && - annotation.id === this.hoveredAnnotation.id - ) || ( - !isUserAnnotation(annotation) && - !isUserAnnotation(this.hoveredAnnotation) && - annotation.row === this.hoveredAnnotation.row && - annotation.column === this.hoveredAnnotation.column && - annotation.type === this.hoveredAnnotation.type && - annotation.text === this.hoveredAnnotation.text - ))); + const key = this.getKeyFromAnnotation(annotation); + return this.isHoveredByKey.get(key) ?? false; }; isVisible(annotation: AnnotationData): boolean {