#4139 - Reusable popover component for annotation editors

- Raise target JS level to es2018
- Add new popover to the brat editor
- Remove rests of old lazy details code from brat editor
- esbuild 0.16.17 -> 0.18.19
- esbuild-sass-plugin 2.5.0 -> 2.10.0
- esbuild-svelte 0.7.3 -> 0.7.4
- mocha 10.0.0 -> 10.2.0
- mocha-junit-reporter 2.1.0 -> 2.2.1
- popperjs 2.11.7 -> 2.11.8
- svelte 3.55.0 -> 3.59.2
- svelte-preprocess 5.0.0 -> 5.0.4
- ts-mocha -> 10.0.0
- types-mocha 9.1.1 -> 10.0.1
- Regenerate package.json files

inception/inception-brat-editor/src/main/ts/build.mjs

@@ -33,7 +33,7 @@ const defaults = {
   bundle: true,
   sourcemap: true,
   minify: !argv.live,
-  target: 'es6',
+  target: 'es2018',
   loader: { '.ts': 'ts' },
   logLevel: 'info',
   plugins: [

inception/inception-brat-editor/src/main/ts/esbuild-runner.config.js

@@ -17,12 +17,14 @@
  */
 const esbuildSvelte = require('esbuild-svelte')
 const sveltePreprocess = require('svelte-preprocess')
+const { sassPlugin } = require('esbuild-sass-plugin')
 
 module.exports = {
-  type: 'bundle', // bundle or transform (see description above)
+  type: 'bundle',
   esbuild: {
     target: 'es2018',
     plugins: [
+      sassPlugin(),
       esbuildSvelte({
         compilerOptions: { css: true },
         preprocess: sveltePreprocess({ sourceMap: true })

inception/inception-brat-editor/src/main/ts/src/BratEditor.ts

@@ -23,11 +23,13 @@ import { Visualizer } from './visualizer/Visualizer'
 import { VisualizerUI } from './visualizer_ui/VisualizerUI'
 import './style-vis.scss'
 import { ResizeManager } from './annotator_ui/ResizeManager'
+import AnnotationDetailPopOver from '@inception-project/inception-js-api/src/widget/AnnotationDetailPopOver.svelte'
 
 export class BratEditor implements AnnotationEditor {
   dispatcher: Dispatcher
   visualizer: Visualizer
   resizer: ResizeManager
+  popover: AnnotationDetailPopOver
 
   public constructor (element: Element, ajax: DiamAjax, props: AnnotationEditorProperties) {
     const markupId = element.getAttribute('id')
@@ -51,6 +53,14 @@ export class BratEditor implements AnnotationEditor {
     }
 
     this.resizer = new ResizeManager(this.dispatcher, this.visualizer, ajax)
+
+    this.popover = new AnnotationDetailPopOver({
+      target: document.body,
+      props: {
+        root: element,
+        ajax
+      }
+    })
   }
 
   post (command: Message, data: any) : void {

inception/inception-brat-editor/src/main/ts/src/annotator_ui/AnnotationResizeHandle.svelte

@@ -50,8 +50,6 @@
   })
 
   $: {
-    console.debug("reactive update")
-
     const rects = highlight ? highlight.getClientRects() : []
     visibility = rects.length > 0 ? 'visible' : 'hidden'
     opacity = dragging ? 0.0 : 1

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

@@ -54,7 +54,6 @@ export class Arc {
   equiv = false
   eventDescId: string
   relation = false
-  normalizations: Array<[string?, string?, string?]> = []
   marked: MarkerType
   hidden = false
 

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

@@ -74,7 +74,6 @@ export class Entity {
   annotatorNotes? : string
   attributeMerge: Record<string, unknown> = {} // for box, cross, etc. that are span-global
   fragments: Fragment[] = []
-  normalizations: Array<[string?, string?, string?]> = []
   wholeFrom: number
   wholeTo: number
   comment: Comment
@@ -119,7 +118,6 @@ export class Entity {
     this.attributeCueFor = {}
     this.attributeMerge = {}
     this.fragments = []
-    this.normalizations = []
   }
 
   /**

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

@@ -59,7 +59,7 @@ import '@svgdotjs/svg.filter.js'
 import { SVG, Element as SVGJSElement, Svg, Container, Text as SVGText, PathCommand, Rect, ArrayXY, SVGTypeMapping, Defs } from '@svgdotjs/svg.js'
 import { INSTANCE as Configuration } from '../configuration/Configuration'
 import { INSTANCE as Util } from '../util/Util'
-import { Offsets } from '@inception-project/inception-js-api'
+import { AnnotationOutEvent, AnnotationOverEvent, Offsets, Relation, Span } from '@inception-project/inception-js-api'
 declare const $: JQueryStatic
 
 /**
@@ -82,7 +82,6 @@ function setSourceDataDefaults (sourceData: SourceData) {
     'entities',
     'equivs',
     'events',
-    'normalizations',
     'relations',
     'triggers'
   ], (attrNo, attr) => {
@@ -3519,6 +3518,21 @@ export class Visualizer {
     this.triggerRender()
   }
 
+  onMouseOutSpan (evt: MouseEvent) {
+    if (!this.data) return
+
+    const target = $(evt.target)
+    const id = target.attr('data-span-id')
+    const span = this.data.spans[id]
+
+    if (span.hidden) { return }
+
+    if (evt.target) {
+      console.log(span)
+      evt.target.dispatchEvent(new AnnotationOutEvent({ vid: id, layer: { id: span.type, name: Util.spanDisplayForm(this.entityTypes, span.type) } }, evt.originalEvent))
+    }
+  }
+
   onMouseOverSpan (evt: MouseEvent) {
     if (!this.data) return
 
@@ -3528,13 +3542,19 @@ export class Visualizer {
 
     if (span.hidden) { return }
 
+    if (evt.target) {
+      const fakeSpan = new Span()
+      fakeSpan.vid = id
+      fakeSpan.layer = { id: span.type, name: Util.spanDisplayForm(this.entityTypes, span.type) }
+      evt.target.dispatchEvent(new AnnotationOverEvent(fakeSpan, evt.originalEvent))
+    }
+
     this.dispatcher.post('displaySpanComment', [
       evt, target, id, span.type, span.attributeText,
       span.text,
       span.hovertext,
       span.comment && span.comment.text,
-      span.comment && span.comment.type,
-      span.normalizations
+      span.comment && span.comment.type
     ])
 
     if (span.actionButtons) {
@@ -3613,6 +3633,33 @@ export class Visualizer {
     this.highlight.push(highlightBox)
   }
 
+  onMouseOutArc (evt: MouseEvent) {
+    if (!this.data) return
+
+    const target = $(evt.target)
+    const originSpanId = target.attr('data-arc-origin')
+    const role = target.attr('data-arc-role')
+    const arcEventDescId: string = target.attr('data-arc-ed')
+    let arcId: string | undefined
+
+    if (arcEventDescId) {
+      const eventDesc = this.data.eventDescs[arcEventDescId]
+      if (eventDesc.relation) {
+        // among arcs, only ones corresponding to relations have "independent" IDs
+        arcId = arcEventDescId
+      }
+    }
+
+    const originSpanType = this.data.spans[originSpanId].type || ''
+
+    if (arcId) {
+      if (evt.target) {
+        const labelText = Util.arcDisplayForm(this.entityTypes, originSpanType, role, this.relationTypes)
+        evt.target.dispatchEvent(new AnnotationOutEvent({ vid: arcId, layer: { id: role, name: labelText } }, evt.originalEvent))
+      }
+    }
+  }
+
   onMouseOverArc (evt: MouseEvent) {
     if (!this.data) return
 
@@ -3650,19 +3697,23 @@ export class Visualizer {
 
     const originSpanType = this.data.spans[originSpanId].type || ''
     const targetSpanType = this.data.spans[targetSpanId].type || ''
-    let normalizations : Array<[string?, string?, string?]> = []
-    if (arcId) {
-      normalizations = this.data.arcById[arcId].normalizations
-    }
 
     this.dispatcher.post('displayArcComment', [
       evt, target, symmetric, arcId,
       originSpanId, originSpanType, role,
       targetSpanId, targetSpanType,
-      commentText, commentType, normalizations
+      commentText, commentType
     ])
 
     if (arcId) {
+      if (evt.target) {
+        const fakeRelation = new Relation()
+        fakeRelation.vid = arcId
+        const labelText = Util.arcDisplayForm(this.entityTypes, originSpanType, role, this.relationTypes)
+        fakeRelation.layer = { id: role, name: labelText }
+        evt.target.dispatchEvent(new AnnotationOverEvent(fakeRelation, evt.originalEvent))
+      }
+
       this.highlightArcs = this.svg
         .find(`g[data-id="${arcId}"]`)
         .map(e => e.addClass('highlight'))
@@ -3731,6 +3782,16 @@ export class Visualizer {
     //     arc.removeClass('highlight')
     //   }
     // }
+
+    if (target.getAttribute('data-span-id')) {
+      this.onMouseOutSpan(evt)
+      return
+    }
+
+    if (target.getAttribute('data-arc-role')) {
+      this.onMouseOutArc(evt)
+      return
+    }
   }
 
   onSelectionStarted () {

inception/inception-brat-editor/src/main/ts/src/visualizer_ui/VisualizerUI.ts

@@ -49,13 +49,10 @@ import { Entity } from '../visualizer/Entity'
 import { AttributeType } from '../visualizer/AttributeType'
 
 export class VisualizerUI {
-  private spanTypes: Record<string, EntityTypeDto> | null = null
-  private relationTypesHash: Record<string, RelationTypeDto> | null = null
+  private spanTypes: Record<string, EntityTypeDto> = {}
+  private relationTypesHash: Record<string, RelationTypeDto> = {}
   private data: DocumentData | null = null
 
-  // normalization: server-side DB by norm DB name
-  private normServerDbByNormDbName = {}
-
   private dispatcher: Dispatcher
 
   private commentPopup: JQuery
@@ -73,8 +70,8 @@ export class VisualizerUI {
     this.dispatcher
       .on('init', this, this.init)
       .on('dataReady', this, this.rememberData)
-      .on('displaySpanComment', this, this.displaySpanComment)
-      .on('displayArcComment', this, this.displayArcComment)
+//      .on('displaySpanComment', this, this.displaySpanComment)
+//      .on('displayArcComment', this, this.displayArcComment)
       .on('displaySentComment', this, this.displaySentComment)
       .on('hideComment', this, this.hideComment)
       .on('resize', this, this.onResize)
@@ -89,6 +86,9 @@ export class VisualizerUI {
 
   /* START comment popup - related */
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   adjustToCursor (evt: MouseEvent, element, offset, top, right) {
     // get the real width, without wrapping
     element.css({ left: 0, top: 0 })
@@ -117,10 +117,16 @@ export class VisualizerUI {
     element.css({ top: y, left: x })
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   displaySentComment (evt: MouseEvent, commentText: string, commentType: CommentType) {
     this.displayComment(evt, '', commentText, commentType)
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   displayComment (evt: MouseEvent, comment: string, commentText: string, commentType: CommentType, immediately?: boolean) {
     let idtype = ''
     if (commentType) {
@@ -150,6 +156,9 @@ export class VisualizerUI {
   // to avoid clobbering on delayed response
   commentPopupNormInfoSeqId = 0
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   compareLazyDetails (a, b) {
     // images at the top
     if (a[0].toLowerCase() === '<img>') return -1
@@ -158,8 +167,11 @@ export class VisualizerUI {
     return Util.cmp(a[2], b[2])
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   displaySpanComment (evt, target, spanId, spanType, mods, spanText, hoverText,
-    commentText, commentType, normalizations) {
+    commentText, commentType) {
     const immediately = false
     let comment = ('<div><span class="comment_type_id_wrapper">' +
       '<span class="comment_type">' + Util.escapeHTML(Util.spanDisplayForm(this.spanTypes, spanType)) + '</span>' + ' ' +
@@ -185,8 +197,12 @@ export class VisualizerUI {
     this.initiateNormalizationAjaxCall(spanId, spanType)
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   displayArcComment (evt, target, symmetric, arcId, originSpanId, originSpanType,
-    role, targetSpanId, targetSpanType, commentText, commentType, normalizations) {
+    role, targetSpanId, targetSpanType, commentText, commentType) {
+    if (!this.data) return
     const arcRole = target.attr('data-arc-role')
     // in arrowStr, &#8212 == mdash, &#8594 == Unicode right arrow
     const arrowStr = symmetric ? '&#8212;' : '&#8594;'
@@ -205,6 +221,9 @@ export class VisualizerUI {
     this.initiateNormalizationAjaxCall(arcId, arcRole)
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   initiateNormalizationAjaxCall (id: VID, type: number) {
     this.ajax.loadLazyDetails(id, type).then(detailGroups => {
       // extend comment popup with normalization data
@@ -259,6 +278,9 @@ export class VisualizerUI {
     })
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   hideComment () {
     clearTimeout(this.displayCommentTimer)
     if (this.commentDisplayed) {
@@ -276,6 +298,9 @@ export class VisualizerUI {
     clearTimeout(this.displayButtonsTimer)
   }
 
+  /**
+   * @deprecated To be replaced with the new Popover component
+   */
   onMouseMove (evt: MouseEvent) {
     if (this.commentDisplayed) {
       this.adjustToCursor(evt, this.commentPopup, 10, true, true)