feat(frontend): allow filtering variant table on ID

frontend/package.json

@@ -30,13 +30,15 @@
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-highlight-words": "^0.20.0",
     "react-multi-select-component": "^4.3.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-window": "^1.8.10",
     "typescript": "^4.1.2"
   },
   "devDependencies": {
+    "@types/react-highlight-words": "^0.20.0",
     "@types/react-window": "^1.8.8",
     "fishery": "^2.2.2",
     "http-proxy-middleware": "^1.3.1",

frontend/src/components/DashboardListPage/DashboardListPage.tsx

@@ -193,6 +193,7 @@ const DashboardListPage = (props: DashboardListPageProps) => {
             ...dashboardList,
             variants: dashboardList.top_ten_variants,
           }}
+          searchText={""}
           selectedVariants={blankSet}
           taggedGroups={blankTaggedGroups}
           notIncludedVariants={blankSet}

frontend/src/components/VariantListPage/VariantListVariants.tsx

@@ -30,14 +30,16 @@ import {
 } from "../../types";
 
 import MultipleSelect from "../MultipleSelect";
-
 import { DownloadVariantListLink } from "./DownloadVariantList";
 import VariantsTable from "./VariantsTable";
 
 export const combineVariants = (
   variants: Variant[],
-  structuralVariants: any[]
+  structuralVariants: any[] | null
 ) => {
+  if (!structuralVariants || structuralVariants.length === 0) {
+    return variants;
+  }
   const reshapedStructuralVariants = structuralVariants.map((sv: any) => {
     return {
       id: sv.id,
@@ -112,12 +114,11 @@ const VariantListVariants = (props: VariantListVariantsProps) => {
     setPopulationsDisplayedInTable,
   ] = useState<GnomadPopulationId[]>([]);
   const [includeAC0Variants, setIncludeAC0Variants] = useState(false);
+  const [searchText, setSearchText] = useState("");
 
   const { variants, structural_variants } = variantList;
 
-  const renderedVariants = !structural_variants
-    ? variants
-    : combineVariants(variants, structural_variants);
+  const renderedVariants = combineVariants(variants, structural_variants);
 
   type DisplayNames = {
     A: string;
@@ -318,7 +319,13 @@ const VariantListVariants = (props: VariantListVariantsProps) => {
               </DownloadVariantListLink>
             </Box>
           </Box>
-
+          <Box mb={4}>
+            <Input
+              placeholder="Search variants"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+            />
+          </Box>
           <div
             style={{
               width: "100%",
@@ -334,6 +341,7 @@ const VariantListVariants = (props: VariantListVariantsProps) => {
             <VariantsTable
               userCanEdit={userCanEdit || userIsStaff}
               includePopulationFrequencies={populationsDisplayedInTable}
+              searchText={searchText}
               variantList={variantList}
               selectedVariants={selectedVariants}
               taggedGroups={taggedGroups}

frontend/src/components/VariantListPage/VariantsTable.spec.tsx

@@ -14,9 +14,11 @@ describe("Variant Table", () => {
       C: { displayName: "", variantList: new Set<VariantId>() },
       D: { displayName: "", variantList: new Set<VariantId>() },
     };
+    const testSearchText = testVariantList.uuid;
     const result = render(
       <VariantsTable
         includePopulationFrequencies={[]}
+        searchText={testSearchText}
         variantList={testVariantList}
         notIncludedVariants={blankSet}
         selectedVariants={new Set(["12-123-A-C", "12-234-A-C"])}

frontend/src/components/VariantListPage/VariantsTable.tsx

@@ -15,7 +15,7 @@ import {
   VisuallyHidden,
 } from "@chakra-ui/react";
 import { difference, intersection, sortBy } from "lodash";
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useState, useRef, useEffect } from "react";
 import { TagMultiSelect } from "./TagMultiSelect";
 import { TaggedGroups } from "./VariantListPage";
 import { GNOMAD_POPULATION_NAMES } from "../../constants/populations";
@@ -31,6 +31,7 @@ import { VariantNote } from "./VariantNote";
 import { combineVariants } from "./VariantListVariants";
 import { isStructuralVariantId } from "../identifiers";
 import { FixedSizeList } from "react-window";
+import Highlighter from "react-highlight-words";
 
 const variantAC = (variant: Variant, popIndex: number = 0) =>
   (variant.AC || [])[popIndex] || 0;
@@ -140,14 +141,16 @@ interface ColumnDef {
     variantList: VariantList,
     variantNotes: Record<VariantId, string>,
     onEditVariantNote: (variantId: VariantId, note: string) => void,
-    userCanEdit: boolean
+    userCanEdit: boolean,
+    searchText: string
   ) =>
     | JSX.Element
     | string
     | (JSX.Element | string)[]
     | null
     | undefined
-    | false;
+    | false
+    | "";
 }
 
 const BASE_COLUMNS: ColumnDef[] = [
@@ -159,37 +162,46 @@ const BASE_COLUMNS: ColumnDef[] = [
       const [chrom, pos, ref, alt] = variant.id.split("-");
       return [chrom, Number(pos), ref, alt];
     },
-    render: (variant, variantList) => {
+    render: (
+      variant,
+      variantList,
+      _variantNotes,
+      _onEditVariantNotes,
+      _userCanEdit,
+      searchText
+    ) => {
       const gnomadVersion = variantList.metadata.gnomad_version;
       const gnomadDataset = {
         "2.1.1": "gnomad_r2_1",
         "3.1.2": "gnomad_r3",
         "4.0.0": "gnomad_r4",
         "4.1.0": "gnomad_r4",
       }[gnomadVersion];
-
       const gnomadSVDataset = {
         "2.1.1": "gnomad_sv_r2_1",
         "3.1.2": "gnomad_sv_r4",
         "4.0.0": "gnomad_sv_r4",
         "4.1.0": "gnomad_sv_r4",
       }[gnomadVersion];
-
       const dataset = isStructuralVariantId(variant.id, gnomadVersion)
         ? gnomadSVDataset
         : gnomadDataset;
       const variantId = isStructuralVariantId(variant.id, gnomadVersion)
         ? variant.id.toUpperCase()
         : variant.id;
-
       return (
         <Cell maxWidth={190}>
           <Link
             href={`https://gnomad.broadinstitute.org/variant/${variantId}?dataset=${dataset}`}
             isExternal
             target="_blank"
           >
-            {variant.id}
+            <Highlighter
+              highlightClassName="highlight"
+              searchWords={[searchText]}
+              autoEscape
+              textToHighlight={variant.id}
+            />
           </Link>
         </Cell>
       );
@@ -544,6 +556,7 @@ const populationAlleleFrequencyColumns = (
 interface VariantsTableProps extends TableProps {
   userCanEdit: boolean;
   includePopulationFrequencies: GnomadPopulationId[];
+  searchText: string;
   variantList: VariantList;
   selectedVariants: Set<VariantId>;
   taggedGroups: TaggedGroups;
@@ -611,6 +624,7 @@ const VariantsTable: FC<VariantsTableProps> = ({
   userCanEdit,
   includePopulationFrequencies,
   variantList,
+  searchText,
   selectedVariants,
   taggedGroups,
   notIncludedVariants,
@@ -678,6 +692,21 @@ const VariantsTable: FC<VariantsTableProps> = ({
     notIncludedVariants && notIncludedVariants.has(variant.id) ? 1 : 0
   );
 
+  const listRef = useRef<FixedSizeList | null>(null);
+
+  useEffect(() => {
+    if (searchText) {
+      const matchIndex = sortedVariants.findIndex((variant) =>
+        variant.id.toLowerCase().includes(searchText.toLowerCase())
+      );
+
+      if (matchIndex !== -1 && listRef.current) {
+        const topPadding = Math.min(3, matchIndex);
+        listRef.current.scrollToItem(matchIndex - topPadding, "start");
+      }
+    }
+  }, [searchText, sortedVariants]);
+
   const ROW_HEIGHT = isTopTen ? 35 : 70;
   const ITEMS_DISPLAYED = isTopTen ? 10 : 15;
 
@@ -752,7 +781,8 @@ const VariantsTable: FC<VariantsTableProps> = ({
               variantList,
               variantNotes,
               onEditVariantNote,
-              userCanEdit
+              userCanEdit,
+              searchText
             )}
           </Td>
         ))}
@@ -978,6 +1008,7 @@ const VariantsTable: FC<VariantsTableProps> = ({
           style={{
             overflowX: "hidden",
           }}
+          ref={listRef}
         >
           {VariantRow}
         </FixedSizeList>

frontend/src/components/VariantListPage/__snapshots__/VariantsTable.spec.tsx.snap

@@ -314,7 +314,13 @@ exports[`Variant Table has no unexpected changes 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              12-567-A-C
+              <span>
+                <span
+                  class=""
+                >
+                  12-567-A-C
+                </span>
+              </span>
             </a>
           </span>
         </td>
@@ -520,7 +526,13 @@ exports[`Variant Table has no unexpected changes 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              12-456-A-C
+              <span>
+                <span
+                  class=""
+                >
+                  12-456-A-C
+                </span>
+              </span>
             </a>
           </span>
         </td>
@@ -726,7 +738,13 @@ exports[`Variant Table has no unexpected changes 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              12-345-A-C
+              <span>
+                <span
+                  class=""
+                >
+                  12-345-A-C
+                </span>
+              </span>
             </a>
           </span>
         </td>
@@ -949,7 +967,13 @@ exports[`Variant Table has no unexpected changes 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              12-234-A-C
+              <span>
+                <span
+                  class=""
+                >
+                  12-234-A-C
+                </span>
+              </span>
             </a>
           </span>
         </td>
@@ -1198,7 +1222,13 @@ exports[`Variant Table has no unexpected changes 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              12-123-A-C
+              <span>
+                <span
+                  class=""
+                >
+                  12-123-A-C
+                </span>
+              </span>
             </a>
           </span>
         </td>