Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove on hover highlight for annotations #4771

Merged
merged 2 commits into from
Jun 19, 2023
Merged

Remove on hover highlight for annotations #4771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
feef742
Remove on hover highlight for annotations
jorg-vr Jun 19, 2023
0615358
Merge branch 'main' into fix/browser-hang
jorg-vr Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions app/assets/javascripts/components/annotations/annotation_marker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,10 @@ export class AnnotationMarker extends LitElement {

static getStyle(annotation: AnnotationData): string {
if (["error", "warning", "info"].includes(annotation.type)) {
return `text-decoration: wavy underline ${AnnotationMarker.colors[annotation.type]} ${annotationState.isHovered(annotation) ? 2 : 1}px;`;
return `text-decoration: wavy underline ${AnnotationMarker.colors[annotation.type]} 1px;`;
} else {
const colorKey = annotationState.isHovered(annotation) ? `${annotation.type}-intense` : annotation.type;
return `
background: ${AnnotationMarker.colors[colorKey]};
background: ${AnnotationMarker.colors[annotation.type]};
padding-top: 2px;
padding-bottom: 2px;
margin-top: -2px;
Expand Down Expand Up @@ -96,20 +95,12 @@ export class AnnotationMarker extends LitElement {
}

get sortedAnnotations(): AnnotationData[] {
return this.annotations.sort( (a, b) => {
if (annotationState.isHovered(a)) {
return -1;
} else if (annotationState.isHovered(b)) {
return 1;
} else {
return compareAnnotationOrders(a, b);
}
});
return this.annotations.sort( compareAnnotationOrders );
}

get machineAnnotationMarkerSVG(): TemplateResult | undefined {
const firstMachineAnnotation = this.sortedAnnotations.find(a => !isUserAnnotation(a));
const size = annotationState.isHovered(firstMachineAnnotation) ? 20 : 14;
const size = 14;
return firstMachineAnnotation && html`<svg style="position: absolute; top: ${16 - size/2}px; left: -${size/2}px" width="${size}" height="${size}" viewBox="0 0 24 24">
<path fill="${AnnotationMarker.colors[firstMachineAnnotation.type]}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z"/>
</svg>`;
Expand Down
4 changes: 1 addition & 3 deletions app/assets/javascripts/components/annotations/machine_annotation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ export class MachineAnnotation extends ShadowlessLitElement {

render(): TemplateResult {
return html`
<div class="annotation machine-annotation ${this.data.type}"
@mouseenter="${() => annotationState.setHovered(this.data, true)}"
@mouseleave="${() => annotationState.setHovered(this.data, false)}">
<div class="annotation machine-annotation ${this.data.type}">
<div class="annotation-header">
<span class="annotation-meta">
${I18n.t(`js.annotation.type.${this.data.type}`)}
Expand Down
5 changes: 1 addition & 4 deletions app/assets/javascripts/components/annotations/thread.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,7 @@ export class Thread extends i18nMixin(ShadowlessLitElement) {

render(): TemplateResult {
return this.data ? html`
<div class="thread ${annotationState.isVisible(this.data) ? "" : "hidden"}"
@mouseenter="${() => annotationState.setHovered(this.data, true)}"
@mouseleave="${() => annotationState.setHovered(this.data, false)}"
>
<div class="thread ${annotationState.isVisible(this.data) ? "" : "hidden"}">
<d-user-annotation .data=${this.data}></d-user-annotation>
${this.data.responses.map(response => html`
<d-user-annotation .data=${response}></d-user-annotation>
Expand Down
23 changes: 0 additions & 23 deletions app/assets/javascripts/state/Annotations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,6 @@ export function isUserAnnotation(annotation: AnnotationData): annotation is User
class AnnotationState extends State {
@stateProperty visibility: AnnotationVisibilityOptions = "all";
@stateProperty isQuestionMode = false;
readonly isHoveredByKey = new StateMap<string, boolean>();

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 => {
const key = this.getKeyFromAnnotation(annotation);
return this.isHoveredByKey.get(key) ?? false;
};

isVisible(annotation: AnnotationData): boolean {
if (this.visibility === "none") {
Expand Down