Merge pull request #3702 from inception-project/feature/3701-Improve-…

…grouped-by-label-visuals #3701 - Improve grouped-by-label visuals
inception-project · Jan 8, 2023 · a76a2a5 · a76a2a5
2 parents f1bcc78 + c65e531
commit a76a2a5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 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
@@ -52,29 +52,39 @@
             {#each sortedLabels as label}
                 {@const spans = groupedSpans[`${label}`] || []}
                 {@const relations = groupedRelations[`${label}`] || []}
-                <li class="list-group-item py-1 px-0">
-                    <div class="px-2 py-1 bg.-light fw-bold">
+                <li class="list-group-item py-1 px-0 border-0">
+                    <div class="px-2 py-1 bg.-light fw-bold sticky-top bg-body">
                         {label || 'No label'}
                     </div>
                     <ul class="ps-3 pe-0">
                         {#each spans as span}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <li class="list-group-item list-group-item-action py-1 px-2" on:click={() => scrollToSpan(span)}>
-                                <div class="float-end">
-                                    <LabelBadge annotation={span} {ajaxClient} />
+                            <li class="list-group-item list-group-item-action p-0 d-flex">
+                                <div class="text-secondary bg-light border-end px-2 d-flex align-items-center">
+                                    <div class="annotation-type-marker">␣</div>
+                                </div>
+                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                <div class="flex-grow-1 py-1 px-2" on:click={() => scrollToSpan(span)}>
+                                    <div class="float-end">
+                                        <LabelBadge annotation={span} {ajaxClient} showText={false} />
+                                    </div>
+
+                                    <SpanText {data} span={span} />
                                 </div>
-
-                                <SpanText {data} span={span} />
                             </li>
                         {/each}
                         {#each relations as relation}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <li class="list-group-item list-group-item-action py-1 px-2" on:click={() => scrollToRelation(relation)}>
-                                <div class="float-end">
-                                    <LabelBadge annotation={relation} {ajaxClient} />
+                            <li class="list-group-item list-group-item-action p-0 d-flex">
+                                <div class="text-secondary bg-light border-end px-2 d-flex align-items-center">
+                                    <div class="annotation-type-marker">→</div>
+                                </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">
+                                        <LabelBadge annotation={relation} {ajaxClient} showText={false} />
+                                    </div>
+
+                                    <SpanText {data} span={relation.arguments[0].target} />
                                 </div>
-
-                                <SpanText {data} span={relation.arguments[0].target} />
                             </li>
                         {/each}
                     </ul>
@@ -85,6 +95,9 @@
 </div>
 
 <style lang="scss">
-
+    .annotation-type-marker {
+        width: 1em;
+        text-align: center;
+    }
 </style>
 
diff --git a/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte b/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte
@@ -18,7 +18,6 @@
      */
     import {
         AnnotatedText,
-        Annotation,
         DiamAjax,
         Offsets,
         Relation,

diff --git a/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte b/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte
@@ -22,6 +22,7 @@
 
     export let annotation: Annotation;
     export let ajaxClient: DiamAjax;
+    export let showText: boolean = true;
 
     $: backgroundColor = annotation.color || "var(--bs-secondary)";
     $: textColor = bgToFgColor(backgroundColor);
@@ -38,7 +39,7 @@
     title={`${annotation.vid}@${annotation.layer.name}`}
     role="button" style="color: {textColor}; background-color: {backgroundColor}"
 >
-    {annotation.label || "No label"}
+    {showText ? annotation.label || "No label" : "\u00A0"}
 </span>
 
 <style>

diff --git a/inception/inception-diam-editor/src/main/ts/src/SpanText.svelte b/inception/inception-diam-editor/src/main/ts/src/SpanText.svelte
@@ -24,10 +24,14 @@
 
     $: begin = span.offsets[0][0]
     $: end = span.offsets[0][1]
-    $: text = data.text.substring(begin, end)
+    $: text = data.text.substring(begin, end).trim()
 </script>
 
+{#if text.length === 0}
+<span class="text-muted">(empty span)</span>
+{:else}
 <span>{text.substring(0, 50)+(text.length > 50 ? '…' : '')}</span>
+{/if}
 
 <style>
 </style>
diff --git a/inception/inception-diam-editor/src/main/ts/src/Utils.ts b/inception/inception-diam-editor/src/main/ts/src/Utils.ts
@@ -82,11 +82,18 @@ export function groupBy<T> (data: IterableIterator<T>, keyMapper: (s: T) => stri
 export function groupSpansByLabel (data: AnnotatedText): Record<string, Span[]> {
   const groups = groupBy(data?.spans.values(), (s) => s.label || '')
   for (const items of Object.values(groups)) {
-    items.sort((a, b) => compareOffsets(a.offsets[0], b.offsets[0]))
+    items.sort((a, b) => compareSpanText(data, a, b) || compareOffsets(a.offsets[0], b.offsets[0]))
   }
   return groups
 }
 
+export function compareSpanText (data: AnnotatedText, a: Span, b: Span): number {
+  const textA = data.text?.substring(a.offsets[0][0], a.offsets[0][1]) || ''
+  const textB = data.text?.substring(b.offsets[0][0], b.offsets[0][1]) || ''
+
+  return textA.localeCompare(textB)
+}
+
 /**
  * Groups relations by label.
  *