Hide cached searches

When query changes, old cached search results still show as their data is not null, so the check passes. Now also checks if the query is allowed.

Author: JaiiR320

src/components/Autocomplete/Autocomplete.tsx

@@ -17,7 +17,11 @@ import {
 } from "@mui/material";
 import { Autocomplete } from "@mui/material";
 import { GenomeSearchProps, Result } from "./types";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/react-query";
 
 /**
  * An autocomplete search component for genomic landmarks such as genes, SNPs, ICRs, and CCRs.
@@ -43,13 +47,6 @@ const Search: React.FC<GenomeSearchProps> = ({
   slotProps,
   ...autocompleteProps
 }) => {
-  // Boolean flags for each query
-  const searchGene = queries.includes("Gene");
-  const searchSnp = queries.includes("SNP");
-  const searchICRE = queries.includes("iCRE");
-  const searchCCRE = queries.includes("cCRE");
-  const searchCoordinate = queries.includes("Coordinate");
-
   // State variables
   const [inputValue, setInputValue] = useState("");
   const [selection, setSelection] = useState<Result>({} as Result);
@@ -58,6 +55,12 @@ const Search: React.FC<GenomeSearchProps> = ({
   );
   const [isLoading, setIsLoading] = useState(false);
 
+  const searchGene = queries.includes("Gene");
+  const searchSnp = queries.includes("SNP");
+  const searchICRE = queries.includes("iCRE");
+  const searchCCRE = queries.includes("cCRE");
+  const searchCoordinate = queries.includes("Coordinate");
+
   const {
     data: icreData,
     refetch: refetchICREs,
@@ -130,31 +133,43 @@ const Search: React.FC<GenomeSearchProps> = ({
   useEffect(() => {
     if (isLoading) return;
     const resultsList = [];
-    if (geneData) {
+    if (geneData && searchGene) {
       resultsList.push(...geneResultList(geneData.data.gene, geneLimit || 3));
     }
-    if (icreData && inputValue.toLowerCase().startsWith("eh")) {
+    if (icreData && searchICRE && inputValue.toLowerCase().startsWith("eh")) {
       resultsList.push(
         ...icreResultList(icreData.data.iCREQuery, icreLimit || 3)
       );
     }
-    if (ccreData && inputValue.toLowerCase().startsWith("eh")) {
+    if (ccreData && searchCCRE && inputValue.toLowerCase().startsWith("eh")) {
       resultsList.push(
         ...ccreResultList(ccreData.data.cCREQuery, ccreLimit || 3)
       );
     }
-    if (snpData && inputValue.toLowerCase().startsWith("rs")) {
+    if (snpData && searchSnp && inputValue.toLowerCase().startsWith("rs")) {
       resultsList.push(
         ...snpResultList(snpData.data.snpAutocompleteQuery, snpLimit || 3)
       );
     }
-    if (searchCoordinate && isDomain(inputValue)) {
+    if (isDomain(inputValue) && searchCoordinate) {
       resultsList.push(...getCoordinates(inputValue, assembly));
     }
 
     if (resultsList.length === 0) setResults(null);
     else setResults(resultsList);
-  }, [isLoading, icreData, ccreData, geneData, snpData]);
+  }, [
+    isLoading,
+    icreData,
+    ccreData,
+    geneData,
+    snpData,
+    searchGene,
+    searchICRE,
+    searchCCRE,
+    searchSnp,
+    searchCoordinate,
+    inputValue,
+  ]);
 
   // Handle submit
   const onSubmit = useCallback(() => {
@@ -184,10 +199,10 @@ const Search: React.FC<GenomeSearchProps> = ({
   return (
     <Box
       display="flex"
-      flexDirection="row" 
+      flexDirection="row"
       gap={2}
       style={{ ...style }}
-      sx={{ ...sx}}
+      sx={{ ...sx }}
       {...slotProps?.box}
     >
       <Autocomplete
@@ -256,31 +271,32 @@ 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) && !isDomain(inputValue)
-    ? params.children.sort((a: any, b: any) => {
-        const aTitle = (
-          a.props?.children?.props?.children?.[0]?.props?.children || ""
-        ).toLowerCase();
-        const bTitle = (
-          b.props?.children?.props?.children?.[0]?.props?.children || ""
-        ).toLowerCase();
-        const query = inputValue.toLowerCase();
-        // Exact matches first
-        if (aTitle === query && bTitle !== query) return -1;
-        if (bTitle === query && aTitle !== query) return 1;
+  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 || ""
+          ).toLowerCase();
+          const bTitle = (
+            b.props?.children?.props?.children?.[0]?.props?.children || ""
+          ).toLowerCase();
+          const query = inputValue.toLowerCase();
+          // Exact matches first
+          if (aTitle === query && bTitle !== query) return -1;
+          if (bTitle === query && aTitle !== query) return 1;
 
-        // Starts with query second
-        if (aTitle.startsWith(query) && !bTitle.startsWith(query)) return -1;
-        if (bTitle.startsWith(query) && !aTitle.startsWith(query)) return 1;
+          // Starts with query second
+          if (aTitle.startsWith(query) && !bTitle.startsWith(query)) return -1;
+          if (bTitle.startsWith(query) && !aTitle.startsWith(query)) return 1;
 
-        // Contains query third
-        if (aTitle.includes(query) && !bTitle.includes(query)) return -1;
-        if (bTitle.includes(query) && !aTitle.includes(query)) return 1;
+          // Contains query third
+          if (aTitle.includes(query) && !bTitle.includes(query)) return -1;
+          if (bTitle.includes(query) && !aTitle.includes(query)) return 1;
 
-        // Alphabetical order for equal relevance
-        return aTitle.localeCompare(bTitle);
-      })
-    : params.children;
+          // Alphabetical order for equal relevance
+          return aTitle.localeCompare(bTitle);
+        })
+      : params.children;
 
   return (
     <div key={params.key}>

src/test.tsx

@@ -1,59 +1,28 @@
 import { createRoot } from "react-dom/client";
-import { Stack } from "@mui/material";
-import { MiniMapProps, ScatterPlot } from "./components/ScatterPlot";
+import { Box, Typography } from "@mui/material";
+import { GenomeSearch, ResultType } from "./components/Autocomplete";
 import { useEffect, useState } from "react";
 
-type Point = {
-  x: number;
-  y: number;
-  color: string;
-  shape: "circle" | "triangle";
-};
-
-// Example data for the scatter plot
-const scatterData: Point[] = [
-  { x: 1, y: 2, color: 'red', shape: "circle" },
-  { x: 3, y: 4, color: 'blue', shape: "circle" },
-  { x: 5, y: 6, color: 'green', shape: "circle" },
-];
-
-// Mock for the map prop
-const miniMap: MiniMapProps = {
-  position: { right: 50, bottom: 50 }
-};
-
 function App() {
-  const [isLoading, setIsLoading] = useState(true);
-
-useEffect(() => {
-    const fakeLoading = setTimeout(() => {
-        setIsLoading(false);
-    }, 2000); // Adjust delay as needed
-
-    return () => clearTimeout(fakeLoading); // Cleanup on unmount
-}, []);
-
+  const [query, setQuery] = useState<ResultType[]>(["Gene"]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setQuery(["SNP"]);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, []);
   return (
-    <Stack height={"57vh"} width={"70vw"} padding={1} sx={{ border: '2px solid', borderColor: 'grey.400', borderRadius: '8px' }}>
-      <ScatterPlot
-        pointData={scatterData}
-        loading={isLoading}
-        leftAxisLabel="sdgc"
-        bottomAxisLabel="s.khdcvsvb"
-        miniMap={miniMap}
-        disableTooltip
-        initialState={
-          {
-            minimap: {
-              open: true,
-            },
-            controls: {
-              selectionType: "pan"
-            }
-          }
-        }
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" height="50vh" width="100%">
+      <Typography variant="h1">{query.join(", ")}</Typography>
+      <GenomeSearch
+        assembly="GRCh38"
+        queries={query}
+        onSearchSubmit={(result) => {
+          console.log(result);
+        }}
+        sx={{ width: "400px" }}
       />
-    </Stack>
+    </Box>
   );
 }