Merge pull request #4255 from inception-project/refactoring/4252-Limi…

…t-number-of-annotations-displayed-in-annotation-sidebar-to-avoid-crash #4252 - Limit number of annotations displayed in annotation sidebar to avoid crash
inception-project · Oct 24, 2023 · 5520bce · 5520bce
2 parents 96ade31 + cdb9eca
commit 5520bce
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 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
@@ -103,7 +103,7 @@
 </script>
 
 {#if !data}
-    <div class="mt-5 d-flex flex-column justify-content-center">
+    <div class="m-auto d-flex flex-column justify-content-center">
         <div class="d-flex flex-row justify-content-center">
             <div class="spinner-border text-muted" role="status">
                 <span class="sr-only">Loading...</span>

diff --git a/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte b/inception/inception-diam-editor/src/main/ts/src/AnnotationsByPositionList.svelte
@@ -63,7 +63,7 @@
 </script>
 
 {#if !data}
-    <div class="mt-5 d-flex flex-column justify-content-center">
+    <div class="m-auto d-flex flex-column justify-content-center">
         <div class="d-flex flex-row justify-content-center">
             <div class="spinner-border text-muted" role="status">
                 <span class="sr-only">Loading...</span>

diff --git a/inception/inception-diam-editor/src/main/ts/src/DiamAnnotationBrowser.svelte b/inception/inception-diam-editor/src/main/ts/src/DiamAnnotationBrowser.svelte
@@ -53,6 +53,7 @@
         "by-position": "Group by position",
         "by-label": "Group by label",
     };
+    let tooManyAnnotations = false;
 
     let data: AnnotatedText;
 
@@ -102,7 +103,17 @@
             return;
         }
 
-        data = unpackCompactAnnotatedTextV2(d);
+        let preData = unpackCompactAnnotatedTextV2(d);
+        if (preData.spans.size + preData.relations.size > 25000) {
+            console.error(`Too many annotations: ${preData.spans.size} spans ${preData.relations.size} relations`)
+            data = undefined
+            tooManyAnnotations = true
+        }
+        else {
+            console.info(`Loaded annotations: ${preData.spans.size} spans ${preData.relations.size} relations`)
+            tooManyAnnotations = false
+            data = preData;
+        }
     }
 
     export function connect(): void {
@@ -136,7 +147,12 @@
                 >{modes[value]}</option
             >{/each}
     </select>
-    {#if $groupingMode == "by-position"}
+    {#if tooManyAnnotations}
+        <div class="m-auto text-center text-muted">
+            <div class="fs-1"><i class="far fa-dizzy"></i></div>
+            <div>Too many annotations</div>
+        </div>
+    {:else if $groupingMode == "by-position"}
         <AnnotationsByPositionList {ajaxClient} {data} />
     {:else}
         <AnnotationsByLabelList {ajaxClient} {data} {pinnedGroups} />

diff --git a/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte b/inception/inception-diam-editor/src/main/ts/src/LabelBadge.svelte
@@ -55,7 +55,7 @@
             type="button"
             class="btn-accept btn btn-outline-success btn-sm py-0 px-1"
             on:click={handleAccept}
-            title="Accept ({annotation.vid})"
+            title="Accept"
         >
             <i class="far fa-check-circle" />
             {#if showText}
@@ -71,7 +71,7 @@
             type="button"
             class="btn-reject btn btn-outline-danger btn-sm py-0 px-1"
             on:click={handleReject}
-            title="Reject ({annotation.vid})"
+            title="Reject"
         >
             <i class="far fa-times-circle" />
         </button>
@@ -82,7 +82,7 @@
         class="btn-merge btn btn-colored btn-sm py-0 px-1 border-dark"
         style="color: {textColor}; background-color: {backgroundColor}"
         on:click={handleMerge}
-        title="Merge ({annotation.vid})"
+        title="Merge"
     >
         <i class="fas fa-clipboard-check" />
         {#if showText}
@@ -101,7 +101,7 @@
             class="btn-select btn btn-colored btn-sm py-0 px-1 border-dark"
             style="color: {textColor}; background-color: {backgroundColor}"
             on:click={handleSelect}
-            title="Select ({annotation.vid})"
+            title="Select"
         >
             {#if showText}
                 {renderLabel(annotation)}
@@ -114,7 +114,7 @@
             class="btn-delete btn btn-colored btn-sm py-0 px-1 border-dark"
             style="color: {textColor}; background-color: {backgroundColor}"
             on:click={handleDelete}
-            title="Delete ({annotation.vid})"
+            title="Delete"
         >
             <i class="far fa-times-circle" />
         </button>