Adjusted region search

JaiiR320 · JaiiR320 · commit c690ccd7606a · 2025-03-13T12:59:10.000-04:00
Fised a bug where regions were not showing in the results
improved display of values by adding commas
Adjusted gene query to order by name
diff --git a/index.html b/index.html
@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Genome Browser</title>
+  <title>Test Page</title>
+  <!-- uncomment this to endable react-scan which helps visulziee component changes/renders-->
   <!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
 </head>
 
diff --git a/src/components/Autocomplete/Autocomplete.tsx b/src/components/Autocomplete/Autocomplete.tsx
@@ -5,6 +5,7 @@ import {
   geneResultList,
   getCoordinates,
   icreResultList,
+  isDomain,
   snpResultList,
 } from "./utils";
 import {
@@ -147,7 +148,7 @@ const Search: React.FC<GenomeSearchProps> = ({
         ...snpResultList(snpData.data.snpAutocompleteQuery, snpLimit || 3)
       );
     }
-    if (searchCoordinate && inputValue.toLowerCase().startsWith("chr")) {
+    if (searchCoordinate && isDomain(inputValue)) {
       resultsList.push(...getCoordinates(inputValue, assembly));
     }
 
@@ -199,6 +200,7 @@ const Search: React.FC<GenomeSearchProps> = ({
         renderGroup={(params) => renderGroup(params, inputValue)}
         noOptionsText={noOptionsText(inputValue, isLoading, results)}
         renderOption={renderOptions}
+        filterOptions={(x) => x}
         renderInput={(params) => {
           if (slots && slots.input) {
             return React.cloneElement(slots.input as React.ReactElement, {
@@ -254,7 +256,7 @@ const Search: React.FC<GenomeSearchProps> = ({
  */
 function renderGroup(params: any, inputValue: string) {
   // Sort items within each group by title match relevance
-  const sortedOptions = Array.isArray(params.children)
+  const sortedOptions = Array.isArray(params.children) && !isDomain(inputValue)
     ? params.children.sort((a: any, b: any) => {
         const aTitle = (
           a.props?.children?.props?.children?.[0]?.props?.children || ""
@@ -278,7 +280,7 @@ function renderGroup(params: any, inputValue: string) {
         // Alphabetical order for equal relevance
         return aTitle.localeCompare(bTitle);
       })
-    : [];
+    : params.children;
 
   return (
     <div key={params.key}>
diff --git a/src/components/Autocomplete/queries.ts b/src/components/Autocomplete/queries.ts
@@ -36,6 +36,7 @@ export const GENE_AUTOCOMPLETE_QUERY = `
             name_prefix: $name_prefix
             limit: $limit
             assembly: $assembly
+            orderby: "name"
         ) {
             id
             name
diff --git a/src/components/Autocomplete/utils.ts b/src/components/Autocomplete/utils.ts
@@ -15,53 +15,43 @@ import {
  */
 export function getCoordinates(input: string, assembly: string): Result[] {
   const results: Result[] = [];
-  input = input.replace(/,/g, '');
+  input = input.replace(/,/g, "");
 
-  if (input.startsWith("chr") && input.length <= 5 && input.length > 3) {
-    results.push({
-      title: input.split(":")[0] + `:1-100000`,
-      domain: {
-        chromosome: input.split(":")[0],
-        start: 1,
-        end: 100000,
-      },
-      description: input.split(":")[0] + `:1-100000`,
-      type: "Coordinate",
-    });
-  }
   if (input.includes(":") && input.includes("-")) {
     const chromosome = input.split(":")[0];
     const start = parseInt(input.split(":")[1].split("-")[0]) || 0;
     const end = parseInt(input.split(":")[1].split("-")[1]) || start + 1000;
-
     const chrLength = chromosomeLengths[assembly][chromosome];
 
     // Only set coordinates if end is greater than start and within chromosome length
     if (end > start && chrLength && end <= chrLength) {
       results.push({
-        title: `${chromosome}:${start}-${end}`,
+        title: `${chromosome}:${start.toLocaleString()}-${end.toLocaleString()}`,
         domain: {
           chromosome: chromosome,
           start: start,
           end: end,
         },
-        description: `${chromosome}:${start}-${end}`,
+        description: `${chromosome}:${start.toLocaleString()}-${end.toLocaleString()}`,
         type: "Coordinate",
       });
     }
-  }
-  if (input.includes("\t")) {
+  } else if (input.includes("\t")) {
     const [chromosome, start, end] = input.split("\t");
     const chrLength = chromosomeLengths[assembly][chromosome];
-    if (parseInt(end) > parseInt(start) && chrLength && parseInt(end) <= chrLength) {
+    if (
+      parseInt(end) > parseInt(start) &&
+      chrLength &&
+      parseInt(end) <= chrLength
+    ) {
       results.push({
-        title: `${chromosome}:${start}-${end}`,
+        title: `${chromosome}:${start.toLocaleString()}-${end.toLocaleString()}`,
         domain: {
           chromosome: chromosome,
           start: parseInt(start),
           end: parseInt(end),
         },
-        description: `${chromosome}:${start}-${end}`,
+        description: `${chromosome}:${start.toLocaleString()}-${end.toLocaleString()}`,
         type: "Coordinate",
       });
     }
@@ -202,3 +192,16 @@ const chromosomeLengths: { [key: string]: { [key: string]: number } } = {
     chry: 91744698,
   },
 };
+
+export function isDomain(input: string) {
+  const hasTabs = input.includes("\t");
+  const hasHyphens = input.includes("-");
+  const hasChromosomeNumber = input.length >= 4 && /^\d$/.test(input[3]);
+  console.log(
+    input,
+    hasTabs || hasHyphens || (input.startsWith("chr") && hasChromosomeNumber)
+  );
+  return (
+    (hasTabs || hasHyphens) && input.startsWith("chr") && hasChromosomeNumber
+  );
+}
diff --git a/src/test.tsx b/src/test.tsx
@@ -17,8 +17,9 @@ function App() {
         assembly="GRCh38"
         onSearchSubmit={(r: Result) => console.log(r)}
         queries={["Gene", "SNP", "iCRE", "cCRE", "Coordinate"]}
-        style={{ width: "400px", height: "45px", paddingBottom: "30px" }}
+        style={{ width: "400px" }}
         defaultResults={[]}
+        geneLimit={5}
       />
     </Box>
   );
