#4223 - Covered text should show in popover

- Move the text from the HTML tooltip into the popover
- Show the text in all popovers, not only on the left annotation sidebar
- If the text is shown is controlled by the "show in hover" layer setting
- Extend client-side annotations with a reference to their respective document

inception/inception-api-annotation/src/main/java/de/tudarmstadt/ukp/inception/annotation/layer/span/SpanRenderer.java

@@ -22,8 +22,10 @@
 import static de.tudarmstadt.ukp.clarin.webanno.support.uima.ICasUtil.selectFsByAddr;
 import static java.util.Collections.emptyList;
 import static java.util.stream.Collectors.toList;
+import static org.apache.commons.lang3.StringUtils.abbreviate;
 
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -40,9 +42,12 @@
 
 import de.tudarmstadt.ukp.clarin.webanno.api.annotation.rendering.Renderer_ImplBase;
 import de.tudarmstadt.ukp.clarin.webanno.model.AnnotationFeature;
+import de.tudarmstadt.ukp.clarin.webanno.support.uima.ICasUtil;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VArc;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VDocument;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VID;
+import de.tudarmstadt.ukp.inception.rendering.vmodel.VLazyDetail;
+import de.tudarmstadt.ukp.inception.rendering.vmodel.VLazyDetailGroup;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VObject;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VRange;
 import de.tudarmstadt.ukp.inception.rendering.vmodel.VSpan;
@@ -56,6 +61,8 @@
 public class SpanRenderer
     extends Renderer_ImplBase<SpanAdapter>
 {
+    private static final int MAX_HOVER_TEXT_LENGTH = 1000;
+
     private final List<SpanLayerBehavior> behaviors;
 
     private Type type;
@@ -130,6 +137,27 @@ public List<AnnotationFS> selectAnnotationsInWindow(CAS aCas, int aWindowBegin,
                 .collect(toList());
     }
 
+    @Override
+    public List<VLazyDetailGroup> lookupLazyDetails(CAS aCas, VID aVid, int aWindowBeginOffset,
+            int aWindowEndOffset)
+    {
+        if (!checkTypeSystem(aCas)) {
+            return Collections.emptyList();
+        }
+
+        var fs = ICasUtil.selectByAddr(aCas, AnnotationFS.class, aVid.getId());
+
+        var group = new VLazyDetailGroup();
+        group.addDetail(
+                new VLazyDetail("Text", abbreviate(fs.getCoveredText(), MAX_HOVER_TEXT_LENGTH)));
+
+        var details = super.lookupLazyDetails(aCas, aVid, aWindowBeginOffset, aWindowEndOffset);
+        if (!group.getDetails().isEmpty()) {
+            details.add(0, group);
+        }
+        return details;
+    }
+
     @Override
     public void render(CAS aCas, List<AnnotationFeature> aFeatures, VDocument aResponse,
             int aWindowBegin, int aWindowEnd)

inception/inception-brat-editor/src/main/ts/src/util/Util.ts

@@ -106,12 +106,12 @@ export class Util {
     return str.replace(/"/g, '"')
   }
 
-  getSpanLabels (spanTypes, spanType) {
+  getSpanLabels (spanTypes: Record<string, EntityTypeDto>, spanType: string) : string[] {
     const type = spanTypes[spanType]
     return (type && type.labels) || []
   }
 
-  spanDisplayForm (spanTypes, spanType) {
+  spanDisplayForm (spanTypes: Record<string, EntityTypeDto>, spanType: string) : string {
     const labels = this.getSpanLabels(spanTypes, spanType)
     if (labels[0]) {
       return labels[0]

inception/inception-brat-editor/src/main/ts/src/visualizer/Visualizer.ts

@@ -3545,6 +3545,7 @@ export class Visualizer {
     if (evt.target) {
       const fakeSpan = new Span()
       fakeSpan.vid = id
+      fakeSpan.document = { text: this.data.text }
       fakeSpan.layer = { id: span.type, name: Util.spanDisplayForm(this.entityTypes, span.type) }
       evt.target.dispatchEvent(new AnnotationOverEvent(fakeSpan, evt.originalEvent))
     }

inception/inception-diam-editor/src/main/ts/src/SpanText.svelte

@@ -35,7 +35,9 @@
 {#if text.length === 0}
     <span class="text-muted">(empty)</span>
 {:else if text.length > maxLength}
-    <span title="{text.substring(0,1000)}">{text.substring(0, 50)}</span>
+    <!-- The AnnotationDetailPopOver displays the text now provided that the lazy detail provider
+         of the span layer sends it. - title="{text.substring(0,1000)}" -->
+    <span>{text.substring(0, 50)}</span>
     <span class="text-muted trailing-text">…</span>
 {:else}
     {text}

inception/inception-js-api/src/main/ts/src/model/Annotation.ts

@@ -15,9 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { VID, Comment, Layer } from '.'
+import { VID, Comment, Layer, AnnotatedText } from '.'
 
 export interface Annotation {
+    document: AnnotatedText
+
     layer: Layer
 
     vid: VID

inception/inception-js-api/src/main/ts/src/model/Relation.ts

@@ -15,14 +15,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Annotation, VID, Argument, Layer, Comment } from '.'
+import { Annotation, VID, Argument, Layer, Comment, AnnotatedText } from '.'
 
 export class Relation implements Annotation {
+  document: AnnotatedText
   layer: Layer
   vid: VID
   color?: string
   label?: string
   score?: number
   comments?: Comment[]
   arguments: Array<Argument>
+
+  constructor (other?: Relation) {
+    if (other) {
+      this.document = other.document
+      this.layer = other.layer
+      this.vid = other.vid
+      this.color = other.color
+      this.label = other.label
+      this.comments = other.comments
+      this.arguments = other.arguments
+    }
+  }
 }

inception/inception-js-api/src/main/ts/src/model/Span.ts

@@ -15,12 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Annotation, Offsets, VID, Comment } from '.'
+import { Annotation, Offsets, VID, Comment, AnnotatedText } from '.'
 import { Layer } from './Layer'
 
 export type ClippingStatus = undefined | 's' | 'e' | 'se'
 
 export class Span implements Annotation {
+  document: AnnotatedText
   layer: Layer
   vid: VID
   offsets: Array<Offsets>
@@ -36,6 +37,7 @@ export class Span implements Annotation {
 
   constructor (other?: Span) {
     if (other) {
+      this.document = other.document
       this.layer = other.layer
       this.vid = other.vid
       this.offsets = other.offsets

inception/inception-js-api/src/main/ts/src/model/compact_v2/CompactRelation.ts

@@ -29,6 +29,7 @@ export type CompactRelation = [
 
 export function unpackCompactRelation (doc: AnnotatedText, raw: CompactRelation): Relation {
   const cooked = new Relation()
+  cooked.document = doc
   cooked.layer = doc.__getOrCreateLayer(raw[0])
   cooked.vid = raw[1]
   cooked.arguments = raw[2].map(arg => unpackCompactArgument(doc, arg))

inception/inception-js-api/src/main/ts/src/model/compact_v2/CompactSpan.ts

@@ -28,6 +28,7 @@ export type CompactSpan = [
 
 export function unpackCompactSpan (doc: AnnotatedText, raw: CompactSpan): Span {
   const cooked = new Span()
+  cooked.document = doc
   cooked.layer = doc.__getOrCreateLayer(raw[0])
   cooked.vid = raw[1]
   cooked.offsets = raw[2]

inception/inception-js-api/src/main/ts/src/widget/AnnotationDetailPopOver.svelte

@@ -127,7 +127,7 @@
         const y = e.clientY;
 
         // Flip up if the popover is about to be clipped at the bottom
-        if (y + rect.height > window.innerHeight) {
+        if (y + rect.height + yOffset > window.innerHeight) {
             top = y - rect.height - yOffset;
         } else {
             top = y + yOffset;