From 014da5b518432c00588a1eb47deced4e60ac5e49 Mon Sep 17 00:00:00 2001
From: Richard Eckart de Castilho <richard.eckart@gmail.com>
Date: Wed, 20 Sep 2023 22:29:11 +0200
Subject: [PATCH] #4199 - Jumping to the end of a long annotation sometimes
 does not work

- Fix issue (hopefully)
- Also fix another occasional issue when keying through the ADEP
---
 .../ApacheAnnotatorVisualizer.ts              | 32 +++++++++++--------
 .../detail/AnnotationDetailEditorPanel.js     |  9 +++---
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts b/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts
index feffbdcb7fc..a408d4778f3 100644
--- a/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts
+++ b/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts
@@ -36,8 +36,9 @@ export class ApacheAnnotatorVisualizer {
   private showInlineLabels = false
   private showEmptyHighlights = false
 
-  private removePingMarkers: (() => void)[] = []
-  private removePingMarkersTimeout: number | undefined = undefined
+  private removeTransientMarkers: (() => void)[] = []
+  private removeTransientMarkersTimeout: number | undefined = undefined
+
   private alpha = '55'
 
   constructor (element: Element, ajax: DiamAjax) {
@@ -110,6 +111,7 @@ export class ApacheAnnotatorVisualizer {
     if (doc.spans) {
       console.log(`Loaded ${doc.spans.size} span annotations`)
       doc.spans.forEach(span => this.renderSpanAnnotation(doc, span))
+
       this.removeSpuriousZeroWidthHighlights()
       if (!this.showEmptyHighlights) {
         this.removeWhitepaceOnlyHighlights()
@@ -159,7 +161,7 @@ export class ApacheAnnotatorVisualizer {
 
     const vhl = this.root.ownerDocument.createElement('div')
     vhl.classList.add('iaa-vertical-marker-focus')
-    vhl.style.top = `${top - scrollerContainerRect.top + this.root.scrollTop}px`
+    vhl.style.top = `${top - scrollerContainerRect.top + (this.root.scrollTop || 0)}px`
     vhl.style.height = `${bottom - top}px`
     this.root.appendChild(vhl)
 
@@ -206,8 +208,8 @@ export class ApacheAnnotatorVisualizer {
   /**
    * Some highliths may only contain whitepace. This method removes such highlights.
    */
-  private removeWhitepaceOnlyHighlights () {
-    this.getAllHighlights().forEach(e => {
+  private removeWhitepaceOnlyHighlights (selector: string = '.iaa-highlighted') {
+    this.root.querySelectorAll(selector).forEach(e => {
       if (!e.classList.contains('iaa-zero-width') && !e.textContent?.trim()) {
         e.after(...e.childNodes)
         e.remove()
@@ -338,16 +340,21 @@ export class ApacheAnnotatorVisualizer {
     const range = offsetToRange(this.root, args.offset, args.offset)
     if (!range) return
 
-    window.clearTimeout(this.removePingMarkersTimeout)
-    this.removePingMarkers.forEach(remove => remove())
+    window.clearTimeout(this.removeTransientMarkersTimeout)
+    this.removeTransientMarkers.forEach(remove => remove())
 
     const removeScrollMarker = highlightText(range, 'mark', { id: 'iaa-scroll-marker' })
-    this.removePingMarkers = []
+    this.removeTransientMarkers = [removeScrollMarker]
     for (const pingOffset of args.pingRanges || []) {
       const pingRange = offsetToRange(this.root, pingOffset[0], pingOffset[1])
       if (!pingRange) continue
-      this.removePingMarkers.push(highlightText(pingRange, 'mark', { class: 'iaa-ping-marker' }))
+      this.removeTransientMarkers.push(highlightText(pingRange, 'mark', { class: 'iaa-ping-marker' }))
     }
+
+    if (!this.showEmptyHighlights) {
+      this.removeWhitepaceOnlyHighlights('.iaa-ping-marker')
+    }
+
     this.root.querySelectorAll('.iaa-ping-marker').forEach(e => {
       if (!e.textContent) e.remove()
     })
@@ -371,10 +378,9 @@ export class ApacheAnnotatorVisualizer {
       scrollTarget.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'nearest' })
     }
 
-    removeScrollMarker()
-    this.removePingMarkersTimeout = window.setTimeout(() => {
-      this.removePingMarkers.forEach(remove => remove())
-      console.log('ping removed')
+    this.removeTransientMarkersTimeout = window.setTimeout(() => {
+      this.removeTransientMarkers.forEach(remove => remove())
+      this.removeTransientMarkers = []
     }, 2000)
   }
 
diff --git a/inception/inception-ui-annotation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/detail/AnnotationDetailEditorPanel.js b/inception/inception-ui-annotation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/detail/AnnotationDetailEditorPanel.js
index cd5fa34af45..cb799a593ea 100644
--- a/inception/inception-ui-annotation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/detail/AnnotationDetailEditorPanel.js
+++ b/inception/inception-ui-annotation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/detail/AnnotationDetailEditorPanel.js
@@ -20,13 +20,14 @@ $(document).ready(function() {
   // http://stackoverflow.com/questions/2335553/jquery-how-to-catch-enter-key-and-change-event-to-tab
 
   function moveToNextInput(current) {
-    var inputs = $(current).parents("#annotationFeatureForm").eq(0).find(":input");
-    var idx = inputs.index(current);
+    let inputs = $(current).parents("#annotationFeatureForm").eq(0).find(":input");
+    let idx = inputs.index(current);
     if (idx == inputs.length - 1) {
       inputs[idx].blur();
     } else {
-      inputs[idx + 1].focus(); //  handles submit buttons
-      inputs[idx + 1].select();
+      let input = inputs[idx + 1];
+      if (input.focus) input.focus(); //  handles submit buttons
+      if (input.select) input.select();
     }
   }