From d0db03ad727a65142cfe220847e2512f80634d8f Mon Sep 17 00:00:00 2001
From: ivan-aksamentov <ivan.aksamentov@gmail.com>
Date: Sat, 28 May 2022 20:18:03 +0200
Subject: [PATCH] feat(web): limit tooltips to 20 insertions max

---
 .../components/Results/ListOfInsertions.tsx   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages_rs/nextclade-web/src/components/Results/ListOfInsertions.tsx b/packages_rs/nextclade-web/src/components/Results/ListOfInsertions.tsx
index d4f5a707e..460cac292 100644
--- a/packages_rs/nextclade-web/src/components/Results/ListOfInsertions.tsx
+++ b/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])