#3877 - Show a bit of context in the annotation sidebar

- Put the fading wrapper around all labels if there are multiple labels
inception-project · Mar 15, 2023 · 92c3003 · 92c3003
1 parent a494267
commit 92c3003
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 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
@@ -159,7 +159,7 @@
                                         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
@@ -65,7 +65,7 @@
                 <li class="list-group-item list-group-item-action p-0">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <div class="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToSpan(firstSpan)}>
-                        <div class="float-end">
+                        <div class="float-end labels">
                             {#each spans as span}
                                 <LabelBadge annotation={span} {ajaxClient} />
                             {/each}
@@ -84,7 +84,7 @@
                             </div>
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <div class="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToRelation(relation)}>
-                                <div class="float-end">
+                                <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
@@ -48,7 +48,6 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="wrapper">
 {#if annotation.vid.toString().startsWith("rec:")}
     <div class="btn-group mb-0 ms-0 btn-group-recommendation bg-body" role="group">
         <button
@@ -59,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"
@@ -86,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"
@@ -95,7 +94,7 @@
         {/if}
     </button>
 {:else}
-    <div class="btn-group mb-0 ms-0 bg-body" 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"
@@ -120,14 +119,10 @@
         </button>
     </div>
 {/if}
-</div>
 
 <style lang="scss">
-    .wrapper {
-        background: linear-gradient(to right, transparent 0px, white 15px);
-        padding-left: 20px;
-        z-index: 10;
-        position: relative;
+    .label {
+        word-break: break-all;
     }
 
     .btn-colored:hover {