#4480 - Show validation problems in annotation sidebar and Apache Ann…

…otator editor - Add visual cues to annotation sidebar and Apache Annotator editor - Change Apache Annotator editor such that when inline labels are disabled, the position of words in the text is no longer changed - Made the resize handles slightly transparent
inception-project · Jan 30, 2024 · a2f237c · a2f237c
1 parent dfc0007
commit a2f237c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 28 deletions.
diff --git a/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte b/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte
@@ -26,6 +26,8 @@
 
     $: backgroundColor = annotation.color || "var(--bs-secondary)";
     $: textColor = bgToFgColor(backgroundColor);
+    $: hasError = annotation.comments?.find(comment => comment.type === 'error')
+    $: hasInfo = annotation.comments?.find(comment => comment.type === 'info')
 
     function handleSelect(ev: MouseEvent) {
         ajaxClient.selectAnnotation(annotation.vid, { scrollTo: true });
@@ -97,7 +99,13 @@
         {/if}
     </button>
 {:else}
-    <div class="btn-group mb-0 ms-1 bg-body" role="group">
+    <div class="input-group mb-0 ms-1 bg-body" role="group">
+        {#if hasError || hasInfo}
+            <span class="input-group-text py-0 px-1">
+                {#if hasError}<i class="fas fa-exclamation-circle" style="color: var(--i7n-error-color)"></i>{/if}
+                {#if hasInfo}<i class="fas fa-exclamation-circle" style="color: var(--i7n-info-color)"></i>{/if}
+            </span>
+        {/if}
         <button
             type="button"
             class="btn-select btn btn-colored btn-sm py-0 px-1 border-dark"

diff --git a/...-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorEditor.scss b/...-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorEditor.scss
@@ -54,13 +54,13 @@ html > body {
   border-right-width: 0px;
 
   &.iaa-first-highlight {
-    padding-left: 5px;
-    margin-left: var(--border-width)
+    border-top-left-radius: 0.25em;
+    border-bottom-left-radius: 0.25em;
   }
 
   &.iaa-last-highlight {
-    padding-right: 5px;
-    margin-right: var(--border-width)
+    border-top-right-radius: 0.25em;
+    border-bottom-right-radius: 0.25em;
   }
 
   &.iaa-zero-width {
@@ -76,6 +76,8 @@ html > body {
     border-style: solid;
 
     &.iaa-first-highlight {
+      padding-left: 5px;
+      margin-left: var(--border-width);
       border-top-left-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       border-left-width: var(--border-width);
@@ -98,6 +100,7 @@ html > body {
         margin-right: 5px;
         border-top-left-radius: 0.5em;
         border-bottom-left-radius: 0.5em;
+        color: var(--iaa-color);
         background-color: var(--iaa-border-color);
       }
 
@@ -107,6 +110,8 @@ html > body {
     }
 
     &.iaa-last-highlight {
+      padding-right: 5px;
+      margin-right: var(--border-width);
       border-top-right-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-right-width: var(--border-width);
@@ -127,6 +132,11 @@ html > body {
 		background: rgba(255, 165, 0, 0);
 	}
 }
+
+.iaa-error-marker {
+  filter: drop-shadow(0 0 clamp(3px, 0.3em, 10px) var(--i7n-error-color)) brightness(var(--hover-brightness));
+}
+
 .iaa-ping-marker {
   background: rgba(255, 165, 0, 0);
   animation: iaa-ping-fade-animation 0.3s ease-in-out .2s 3 normal forwards;
@@ -190,47 +200,26 @@ html > body {
   &.iaa-first-highlight {
     border-left-style: solid;
     border-left-color: var(--i7n-focus-bounds-color) !important;
-    border-left-width: calc(2 * var(--border-width)) !important;
   }
 
   &.iaa-last-highlight {
     border-right-style: solid;
     border-right-color: var(--i7n-focus-bounds-color) !important;
-    border-right-width: calc(2 * var(--border-width)) !important;
   }
 
   &:not(.iaa-inline-label) {
     filter: drop-shadow(0 0 clamp(3px, 0.3em, 10px) var(--i7n-focus-color)) brightness(var(--hover-brightness));
-
-    &.iaa-first-highlight {
-      margin-left: calc(0px - var(--border-width)) !important;
-    }
-
-    &.iaa-last-highlight {
-      margin-right: calc(0px - var(--border-width)) !important;
-    }
   }
 
   &.iaa-inline-label {
     border-color: var(--i7n-focus-color);
     filter: drop-shadow(0 0 clamp(3px, 0.3em, 10px) var(--i7n-focus-color)) brightness(var(--hover-brightness));
 
     &.iaa-first-highlight {
-
-      &:not(.iaa-marker-focus) {
-       margin-left: 0px;
-      }
-
       &:before {
         background-color: var(--i7n-focus-color)t;
       }
     }
-
-    &.iaa-last-highlight {
-      &:not(.iaa-marker-focus) {
-        margin-right: 0px;
-      }
-    }
   }
 }
 

diff --git a/...tml-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts b/...tml-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorVisualizer.ts
@@ -21,10 +21,13 @@ import { CompactAnnotatedText } from '@inception-project/inception-js-api/src/mo
 import { highlightText } from '@apache-annotator/dom'
 import { showEmptyHighlights, showLabels } from './ApacheAnnotatorState'
 import { ResizeManager } from './ResizeManager'
+import { bgToFgColor } from '@inception-project/inception-js-api/src/util/Coloring'
 
 export const CLASS_RELATED = 'iaa-related'
 
 export const NO_LABEL = '◌'
+export const ERROR_LABEL = '🔴'
+export const INFO_LABEL = 'ℹ️'
 
 export class ApacheAnnotatorVisualizer {
   private ajax: DiamAjax
@@ -305,14 +308,31 @@ export class ApacheAnnotatorVisualizer {
 
     if (begin === end) classList.push('iaa-zero-width')
 
+    var decorations = ''
+
+    const hasError = span.comments?.find(comment => comment.type === 'error')
+    if (hasError) {
+      classList.push('iaa-error-marker')
+      decorations += ERROR_LABEL
+    }
+
+    const hasInfo = span.comments?.find(comment => comment.type === 'info')
+    if (hasInfo) {
+      classList.push('iaa-info-marker')
+      decorations += INFO_LABEL
+    }
+
     const styleList = [
+      `--iaa-color: ${bgToFgColor(span.color || '#000000')}`,
       `--iaa-background-color: ${span.color || '#000000'}${this.alpha}`,
       `--iaa-border-color: ${span.color || '#000000'}`
     ]
 
+    decorations += ' '
+
     const attributes = {
       'data-iaa-id': `${span.vid}`,
-      'data-iaa-label': `${span.label || `[${span.layer.name}]` || NO_LABEL}`,
+      'data-iaa-label': `${decorations}${span.label || `[${span.layer.name}]` || NO_LABEL}`,
       class: classList.join(' '),
       style: styleList.join('; ')
     }

diff --git a/inception/inception-js-api/src/main/ts/src/style/InceptionEditorColors.scss b/inception/inception-js-api/src/main/ts/src/style/InceptionEditorColors.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 $i7n-focus-color: rgba(255,165,0);
-$i7n-focus-bounds-color: rgb(255, 106, 0);
+$i7n-focus-bounds-color: rgba(255, 106, 0, 0.7);
 $i7n-match-focus-color: rgb(0, 217, 255);
 $i7n-error-color: rgb(255, 0, 0);