Merge pull request #825 from nextstrain/feat/limit-insertions

feat(web): limit tooltips to 20 insertions max

packages_rs/nextclade-web/src/components/Results/ListOfInsertions.tsx

@@ -129,7 +129,8 @@ export function ListOfInsertionsNuc({ insertions }: ListOfInsertionsNucProps) {
       </tr>
     )
 
-    const tbody = insertions.map(({ pos, ins }) => (
+    const insertionsTruncated = insertions.slice(0, 20)
+    const tbody = insertionsTruncated.map(({ pos, ins }) => (
       <tr key={pos}>
         <TdNormal className="text-center">{pos + 1}</TdNormal>
         <TdNormal className="text-center">{ins.length}</TdNormal>
@@ -139,6 +140,16 @@ export function ListOfInsertionsNuc({ insertions }: ListOfInsertionsNucProps) {
       </tr>
     ))
 
+    if (insertionsTruncated.length < insertions.length) {
+      tbody.push(
+        <tr key="trunc">
+          <td colSpan={3} className="text-center">
+            {'...truncated'}
+          </td>
+        </tr>,
+      )
+    }
+
     return { thead, tbody }
   }, [insertions, t])
 
@@ -173,7 +184,8 @@ export function ListOfInsertionsAa({ insertions }: ListOfInsertionsAaProps) {
       </tr>
     )
 
-    const tbody = insertions.map(({ pos, ins, gene }) => (
+    const insertionsTruncated = insertions.slice(0, 20)
+    const tbody = insertionsTruncated.map(({ pos, ins, gene }) => (
       <tr key={pos}>
         <TdNormal className="text-center">{gene}</TdNormal>
         <TdNormal className="text-center">{pos + 1}</TdNormal>
@@ -184,6 +196,16 @@ export function ListOfInsertionsAa({ insertions }: ListOfInsertionsAaProps) {
       </tr>
     ))
 
+    if (insertionsTruncated.length < insertions.length) {
+      tbody.push(
+        <tr key="trunc">
+          <td colSpan={3} className="text-center">
+            {'...truncated'}
+          </td>
+        </tr>,
+      )
+    }
+
     return { thead, tbody }
   }, [insertions, t])