From a49157f77335262ae8768614d012cfc52284e3bf Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Fri, 28 Jul 2023 17:30:36 +0100
Subject: [PATCH 1/3] sequence search

---
 src/App.js                   | 100 +++++++++++++++++++++++++++++++++--
 src/components/SingleRow.jsx |  41 ++++++++++++++
 2 files changed, 137 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index f4c93f1..0895141 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,7 @@ import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import Slider, { Range } from "rc-slider";
 import { AiOutlineZoomIn, AiOutlineZoomOut } from "react-icons/ai";
 import { GiDna1 } from "react-icons/gi";
-
+import {BsArrowRightCircleFill, BsArrowLeftCircleFill} from "react-icons/bs";
 import { ToastContainer, toast } from "react-toastify";
 import { useDebounce, useQueryState } from "./hooks";
 import "react-toastify/dist/ReactToastify.css";
@@ -33,23 +33,37 @@ function SearchPanel({
   setSearchInput,
   searchType,
   setSearchType,
+  curSeqHitIndex,
+  sequenceHits,
+  setCurSeqHitIndex
 }) {
   const handleInputChange = (event) => {
+    setCurSeqHitIndex(0);
     setSearchInput(event.target.value);
+    // if event.target.value has only ACGT characters, then set searchType to sequence
     // if event.target.value has non-numeric characters, then set searchType to annot
-    if (event.target.value.match(/[^0-9]/)) {
+    // if event.target.value has only numeric characters, then set searchType to nuc
+    if (/^[0-9]+$/.test(event.target.value)) {
+      setSearchType("nuc");
+    }
+    else if (/^[ACGTacgt]+$/.test(event.target.value)) {
+      setSearchType("sequence");
+    }
+    else if (/^[^0-9]+$/.test(event.target.value)) {
       setSearchType("annot");
-      console.log("setting searchType to annot");
     }
+
   };
 
   const searchOption = [
     { value: "nuc", label: "nucleotide" },
     { value: "annot", label: "annotation" },
+    { value: "sequence", label: "sequence"}
   ];
 
   return (
-    <div className="bg-white p-1 text-sm shadow rounded flex items-center">
+    <div className="bg-white p-1 text-sm shadow rounded ">
+      <div className="flex items-center">
       {searchPanelOpen ? (
         <>
           <select
@@ -94,6 +108,38 @@ function SearchPanel({
           <FaSearch className="mr-2" />
         </button>
       )}
+      </div>
+      {
+        searchType === "sequence" && (
+          <div className="my-2 text-gray-800 text-center px-3">
+            {sequenceHits.length > 0 && (
+              <>
+              <button>
+                <BsArrowLeftCircleFill onClick={() => setCurSeqHitIndex((x) => x==0? sequenceHits.length-1: x-1)}
+                className="mx-3 text-gray-400" />
+              </button>
+          
+          
+            
+            
+            Hit {curSeqHitIndex + 1} of {sequenceHits.length}
+
+          
+              <button>
+                <BsArrowRightCircleFill onClick={() => setCurSeqHitIndex((x) => x==sequenceHits.length-1? 0: x+1)}
+                className="mx-3 text-gray-400" />
+              </button>
+              </>
+            )}
+            {sequenceHits.length === 0 && (
+              <>
+                No hits found
+              </>
+            )}
+          </div>
+        )
+
+      }
     </div>
   );
 }
@@ -139,10 +185,13 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
 
   const [hoveredInfo, setHoveredInfo] = useState(null);
   const [genbankData, setGenbankData] = useState(null);
+  const [sequenceHits, setSequenceHits] = useState([]);
+  const [curSeqHitIndex, setCurSeqHitIndex] = useState(0);
 
   // safely convert searchInput to int
   const intSearchInput = searchType === "nuc" ? parseInt(searchInput) : null;
   const annotSearchInput = searchType === "annot" ? searchInput : null;
+  const sequenceSearchInput = searchType === "sequence" ? searchInput.toUpperCase() : null;
 
   const [whereOnPage, setWhereOnPage] = useState(0);
 
@@ -351,6 +400,44 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     setLastSearch(annotSearchInput);
   }, [annotSearchInput]);
 
+
+  useEffect(() => {
+    if(!sequenceSearchInput) {
+      setSequenceHits([]);
+      return;
+    }
+    const strippedSequenceInput = sequenceSearchInput.replace(/\s/g, "");
+    if (strippedSequenceInput === ""){
+      setSequenceHits([]);
+      return;
+    }
+    console.log("strippedSequenceInput", strippedSequenceInput);
+    const matchingSequence = fullSequence.indexOf(strippedSequenceInput);
+    
+    if(matchingSequence === -1) {
+      //toast.error("No matching sequence found");
+      setSequenceHits([]);
+
+      return;
+    }
+    // we want to find all locations that match and store them with setSequenceHits as [start,end]
+    const seqHits = [];
+    let start = 0;
+    while (true) {
+      const hit = fullSequence.indexOf(strippedSequenceInput, start);
+      if (hit === -1) break;
+      seqHits.push([hit, hit + strippedSequenceInput.length]);
+      start = hit + 1;
+    }
+    setSequenceHits(seqHits);
+
+    const row = Math.floor(seqHits[curSeqHitIndex][0] / rowWidth);
+    console.log("row", row);
+    rowVirtualizer.scrollToIndex(row + 1, { align: "center" });
+    setLastSearch(sequenceSearchInput);
+  }, [sequenceSearchInput, curSeqHitIndex]);
+
+
   //console.log("virtualItems", virtualItems);
 
   if (!genbankData) {
@@ -377,6 +464,9 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
             setSearchPanelOpen={setSearchPanelOpen}
             searchType={searchType}
             setSearchType={setSearchType}
+            curSeqHitIndex={curSeqHitIndex}
+            setCurSeqHitIndex={setCurSeqHitIndex}
+            sequenceHits={sequenceHits}
           />
         </div>
       )}
@@ -459,6 +549,8 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
                           setWhereMouseWentUp={setWhereMouseWentUp}
                           whereMouseCurrentlyIs={whereMouseCurrentlyIs}
                           setWhereMouseCurrentlyIs={setWhereMouseCurrentlyIs}
+                          sequenceHits={sequenceHits}
+                          curSeqHitIndex={curSeqHitIndex}
                         />
                       </div>
                     );
diff --git a/src/components/SingleRow.jsx b/src/components/SingleRow.jsx
index 23aa555..8bfd3c4 100644
--- a/src/components/SingleRow.jsx
+++ b/src/components/SingleRow.jsx
@@ -170,6 +170,8 @@ const SingleRow = ({
   setWhereMouseWentUp,
   whereMouseCurrentlyIs,
   setWhereMouseCurrentlyIs,
+  sequenceHits,
+  curSeqHitIndex
 }) => {
   const zoomFactor = 2 ** zoomLevel;
   const sep = 10 * zoomFactor;
@@ -601,6 +603,41 @@ const SingleRow = ({
     );
   }
 
+  let sequenceHitRects = null;
+
+  if(sequenceHits.length > 0){
+    sequenceHitRects = [];
+    for(let i = 0; i < sequenceHits.length; i++){
+      const hit = sequenceHits[i];
+      let [start, end] = hit;
+      // if the hit is outside the current view, skip it
+      if(start > rowEnd || end < rowStart){
+        continue;
+      }
+      // if the hit is partially outside the current view, clip it
+      if(start < rowStart){
+        start = rowStart;
+      }
+      if(end > rowEnd){
+        end = rowEnd;
+      }
+      sequenceHitRects.push(
+        <rect
+          x={extraPadding + (start - rowStart - 0.5) * sep}
+          y={0}
+          width={(end - start) * sep}
+          height={height}
+          fill={i==curSeqHitIndex? "#ff8888":"#ffbbbb"}
+          fillOpacity={0.5}
+        />
+      );
+    }
+  }
+
+            
+
+
+
   // Concatenate sequence characters and ticks with SVG
   return (
     <div
@@ -649,6 +686,9 @@ const SingleRow = ({
         style={{ position: "absolute", top: 0, left: 0 }}
       >
         {selectionRect}
+        <g>
+          {sequenceHitRects}
+        </g>
         <g fillOpacity={0.7}>
           <g
             transform={`translate(${extraPadding}, ${height - 40})`}
@@ -675,6 +715,7 @@ const SingleRow = ({
 
         <g transform={`translate(${extraPadding}, ${height - 55})`}>{chars}</g>
         <g transform={`translate(${extraPadding}, 5)`}>{featureBlocksSVG}</g>
+       
       </svg>
     </div>
   );

From 36ac6b58a57c67580870e883a0ec7092a261f0af Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Fri, 28 Jul 2023 17:32:45 +0100
Subject: [PATCH 2/3] update

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 0895141..803ec90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -85,7 +85,7 @@ function SearchPanel({
             value={searchInput}
             onChange={handleInputChange}
             className="mx-2 bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
-            placeholder={searchType === "nuc" ? "nuc. index" : "gene name"}
+            placeholder={searchType === "nuc" ? "nuc. index" : searchType === "annot" ? "gene name" : "ATGGC.."}
             id="search-input"
             // don't autocomplete
             autoComplete="off"

From 6861ab5b9a6bfa2840f1aeafd0be2f153b8d95b5 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Fri, 28 Jul 2023 20:57:29 +0100
Subject: [PATCH 3/3] add RC

---
 src/App.js | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 803ec90..1d1c93a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,6 +26,8 @@ import Tooltip from "./components/Tooltip";
 import { getReverseComplement, filterFeatures } from "./utils";
 import SingleRow from "./components/SingleRow";
 
+
+
 function SearchPanel({
   searchPanelOpen,
   setSearchPanelOpen,
@@ -35,7 +37,9 @@ function SearchPanel({
   setSearchType,
   curSeqHitIndex,
   sequenceHits,
-  setCurSeqHitIndex
+  setCurSeqHitIndex,
+  includeRC,
+  setIncludeRC
 }) {
   const handleInputChange = (event) => {
     setCurSeqHitIndex(0);
@@ -111,12 +115,21 @@ function SearchPanel({
       </div>
       {
         searchType === "sequence" && (
-          <div className="my-2 text-gray-800 text-center px-3">
+          <div className="my-2 text-gray-400 text-left px-3">
+            <input type="checkbox" value={includeRC} onChange={() => {
+              
+              setIncludeRC(!includeRC);
+          setCurSeqHitIndex(0);
+            }
+            
+        }/>
+            <label className="ml-2 text-gray-900">Include reverse complement</label>
+
             {sequenceHits.length > 0 && (
               <>
               <button>
                 <BsArrowLeftCircleFill onClick={() => setCurSeqHitIndex((x) => x==0? sequenceHits.length-1: x-1)}
-                className="mx-3 text-gray-400" />
+                className="mx-3 text-gray-600" />
               </button>
           
           
@@ -187,6 +200,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
   const [genbankData, setGenbankData] = useState(null);
   const [sequenceHits, setSequenceHits] = useState([]);
   const [curSeqHitIndex, setCurSeqHitIndex] = useState(0);
+  const [includeRC, setIncludeRC] = useState(false);
 
   // safely convert searchInput to int
   const intSearchInput = searchType === "nuc" ? parseInt(searchInput) : null;
@@ -423,8 +437,13 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     // we want to find all locations that match and store them with setSequenceHits as [start,end]
     const seqHits = [];
     let start = 0;
+    const rc = getReverseComplement(strippedSequenceInput);
+    console.log("rc", rc);
     while (true) {
-      const hit = fullSequence.indexOf(strippedSequenceInput, start);
+      const hit1 = fullSequence.indexOf(strippedSequenceInput, start);
+      const hit2 = includeRC ? fullSequence.indexOf(rc, start) : -1;
+      const hit = hit1 === -1 ? hit2 : (hit2 === -1 ? hit1 : Math.min(hit1, hit2));
+
       if (hit === -1) break;
       seqHits.push([hit, hit + strippedSequenceInput.length]);
       start = hit + 1;
@@ -435,7 +454,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     console.log("row", row);
     rowVirtualizer.scrollToIndex(row + 1, { align: "center" });
     setLastSearch(sequenceSearchInput);
-  }, [sequenceSearchInput, curSeqHitIndex]);
+  }, [sequenceSearchInput, curSeqHitIndex,includeRC]);
 
 
   //console.log("virtualItems", virtualItems);
@@ -467,6 +486,8 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
             curSeqHitIndex={curSeqHitIndex}
             setCurSeqHitIndex={setCurSeqHitIndex}
             sequenceHits={sequenceHits}
+            includeRC={includeRC}
+            setIncludeRC={setIncludeRC}
           />
         </div>
       )}