Merge pull request #3878 from inception-project/feature/3877-Show-a-b…

…it-of-context-in-the-annotation-sidebar #3877 - Show a bit of context in the annotation sidebar
inception-project · Mar 29, 2023 · d5947f5 · d5947f5
2 parents 90e2cc2 + 35f4dab
commit d5947f5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 15 deletions.
diff --git a/inception/inception-diam-editor/src/main/ts/src/AnnotationsByLabelList.svelte b/inception/inception-diam-editor/src/main/ts/src/AnnotationsByLabelList.svelte
@@ -156,10 +156,10 @@
                                     </div>
                                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                                     <div
-                                        class="flex-grow-1 py-1 px-2"
+                                        class="flex-grow-1 my-1 mx-2 position-relative overflow-hidden"
                                         on:click={() => scrollTo(ann)}
                                     >
-                                        <div class="float-end">
+                                        <div class="float-end labels">
                                             <LabelBadge
                                                 annotation={ann}
                                                 {ajaxClient}
@@ -187,6 +187,13 @@
 {/if}
 
 <style lang="scss">
+    .labels {
+        background: linear-gradient(to right, transparent 0px, white 15px);
+        padding-left: 20px;
+        z-index: 10;
+        position: relative;
+    }
+
     .annotation-type-marker {
         width: 1em;
         text-align: center;

diff --git a/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte b/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte
@@ -64,8 +64,8 @@
                 {@const firstSpan = spans[0]}
                 <li class="list-group-item list-group-item-action p-0">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <div class="flex-grow-1 py-1 px-2" on:click={() => scrollToSpan(firstSpan)}>
-                        <div class="float-end">
+                    <div class="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToSpan(firstSpan)}>
+                        <div class="float-end labels">
                             {#each spans as span}
                                 <LabelBadge annotation={span} {ajaxClient} />
                             {/each}
@@ -83,8 +83,8 @@
                                 <span>↳</span>
                             </div>
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <div class="flex-grow-1 py-1 px-2" on:click={() => scrollToRelation(relation)}>
-                                <div class="float-end">
+                            <div class="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToRelation(relation)}>
+                                <div class="float-end labels">
                                     <LabelBadge annotation={relation} {ajaxClient} />
                                 </div>
 
@@ -100,6 +100,13 @@
 {/if}
 
 <style lang="scss">
+    .labels {
+        background: linear-gradient(to right, transparent 0px, white 15px);
+        padding-left: 20px;
+        z-index: 10;
+        position: relative;
+    }
+
     .list-group-flush > .list-group-item:last-child {
         border-bottom-width: 1px;
     }

diff --git a/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte b/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte
@@ -49,7 +49,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if annotation.vid.toString().startsWith("rec:")}
-    <div class="btn-group mb-0 ms-1 btn-group-recommendation" role="group">
+    <div class="btn-group mb-0 ms-0 btn-group-recommendation bg-body" role="group">
         <button
             type="button"
             class="btn-accept btn btn-outline-success btn-sm py-0 px-1"
@@ -58,7 +58,7 @@
         >
             <i class="far fa-check-circle" />
             {#if showText}
-                {annotation.label || "No label"}
+                <span class="label">{annotation.label || "No label"}</span>
             {/if}
             {#if annotation.score}
                 <span class="small font-monospace score"
@@ -85,7 +85,7 @@
     >
         <i class="fas fa-clipboard-check" />
         {#if showText}
-            {annotation.label || "No label"}
+            <span class="label">{annotation.label || "No label"}</span>
         {/if}
         {#if annotation.score}
             <span class="small font-monospace score"
@@ -94,7 +94,7 @@
         {/if}
     </button>
 {:else}
-    <div class="btn-group mb-0 ms-1" role="group">
+    <div class="btn-group mb-0 ms-1 bg-body" role="group">
         <button
             type="button"
             class="btn-select btn btn-colored btn-sm py-0 px-1 border-dark"
@@ -121,6 +121,10 @@
 {/if}
 
 <style lang="scss">
+    .label {
+        word-break: break-all;
+    }
+
     .btn-colored:hover {
         filter: brightness(0.8);
     }

diff --git a/inception/inception-diam-editor/src/main/ts/src/SpanText.svelte b/inception/inception-diam-editor/src/main/ts/src/SpanText.svelte
@@ -22,18 +22,33 @@
     export let data: AnnotatedText
     export let span: Span
 
+    const maxLength = 100
+    const showTextAfter = true // Experimental
+
     $: begin = span.offsets[0][0]
     $: end = span.offsets[0][1]
     $: text = data.text.substring(begin, end).trim().replace(/\s+/g, ' ')
+    $: textAfter = (showTextAfter && text.length < maxLength) ? 
+        data.text.substring(end, end + maxLength - text.length).trim().replace(/\s+/g, ' ') : ''
 </script>
 
 {#if text.length === 0}
-<span class="text-muted">(empty span)</span>
-{:else if text.length > 50}
-<span title="{text.substring(0,1000)}">{text.substring(0, 50)}</span><span class="text-muted">…</span>
+    <span class="text-muted">(empty)</span>
+{:else if text.length > maxLength}
+    <span title="{text.substring(0,1000)}">{text.substring(0, 50)}</span>
+    <span class="text-muted trailing-text">…</span>
 {:else}
-<span>{text}</span>
+    {text}
+    {#if textAfter.length > 0}
+        <span class="text-muted trailing-text">{textAfter}</span>
+    {/if}
 {/if}
 
-<style>
+<style lang="scss">
+    .trailing-text {
+        font-weight: lighter;
+        width: 0px;
+        display: inline-block;
+        white-space: nowrap;
+    }
 </style>