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

- Avoid adding extra lines - Fade out before it hits the label
inception-project · Mar 15, 2023 · a494267 · a494267
1 parent 0e58cdc
commit a494267
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 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,7 +156,7 @@
                                     </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">

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,7 +64,7 @@
                 {@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="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToSpan(firstSpan)}>
                         <div class="float-end">
                             {#each spans as span}
                                 <LabelBadge annotation={span} {ajaxClient} />
@@ -83,7 +83,7 @@
                                 <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="flex-grow-1 my-1 mx-2 overflow-hidden" on:click={() => scrollToRelation(relation)}>
                                 <div class="float-end">
                                     <LabelBadge annotation={relation} {ajaxClient} />
                                 </div>

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,8 +48,9 @@
 </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-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"
@@ -94,7 +95,7 @@
         {/if}
     </button>
 {:else}
-    <div class="btn-group mb-0 ms-1" role="group">
+    <div class="btn-group mb-0 ms-0 bg-body" role="group">
         <button
             type="button"
             class="btn-select btn btn-colored btn-sm py-0 px-1 border-dark"
@@ -119,8 +120,16 @@
         </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;
+    }
+
     .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,8 +22,8 @@
     export let data: AnnotatedText
     export let span: Span
 
-    const maxLength = 50
-    const showTextAfter = false // Experimental
+    const maxLength = 100
+    const showTextAfter = true // Experimental
 
     $: begin = span.offsets[0][0]
     $: end = span.offsets[0][1]
@@ -33,12 +33,22 @@
 </script>
 
 {#if text.length === 0}
-<span class="text-muted">(empty)</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">…</span>
+    <span title="{text.substring(0,1000)}">{text.substring(0, 50)}</span>
+    <span class="text-muted trailing-text">…</span>
 {:else}
-<span>{text} {#if textAfter.length > 0}<span class="text-muted">{textAfter}</span>{/if}</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>