From 31866c16111bc330a889c04ecdc86ce891604dc4 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Wed, 22 Feb 2023 23:19:44 +0000
Subject: [PATCH] update

---
 .pre-commit-config.yaml      |   19 +
 README.md                    |    2 -
 postcss.config.js            |    4 +-
 public/index.html            |   53 +-
 public/sequence.gb           |    5 +-
 public/sequence2.gb          |    5 +-
 src/App.css                  |   21 +-
 src/App.js                   | 1438 ++++++++--------------------------
 src/App.test.js              |    6 +-
 src/components/SingleRow.jsx |  683 ++++++++++++++++
 src/components/Tooltip.jsx   |   47 ++
 src/hooks.js                 |   50 ++
 src/index.css                |    6 +-
 src/index.js                 |   12 +-
 src/logo.svg                 |    2 +-
 src/reportWebVitals.js       |    4 +-
 src/setupTests.js            |    2 +-
 src/utils.js                 |   31 +
 tailwind.config.js           |    2 +-
 19 files changed, 1216 insertions(+), 1176 deletions(-)
 create mode 100644 .pre-commit-config.yaml
 create mode 100644 src/components/SingleRow.jsx
 create mode 100644 src/components/Tooltip.jsx
 create mode 100644 src/hooks.js
 create mode 100644 src/utils.js

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000..0bda5d7
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,19 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.3.0
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-yaml
+      - id: check-added-large-files
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v2.7.1" # Use the sha / tag you want to point at
+    hooks:
+      - id: prettier
+  - repo: https://github.com/pre-commit/mirrors-yapf
+    rev: v0.32.0
+    hooks:
+      - id: yapf
+        additional_dependencies: [toml]
diff --git a/README.md b/README.md
index d10524d..231e4e5 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,8 @@ A simple genome browser for smallish genomes (e.g. viruses and bacteria)
 
 ![image](https://user-images.githubusercontent.com/19732295/219011538-43b9b66b-0227-4171-87c6-08b496a7bf2e.png)
 
-
 ## https://gensplore.theo.io/
 
-
 ### Adding custom genomes
 
 For viewing a custom genome every now and then, just use the "Choose file" option. If you are doing this all the time you might want an easier method. Bacterial genomes load too slowly from NCBI for us to load them directly, but you can upload your own to a website that allows CORS access, then go to `http://gensplore.theo.io/?gb=http://mywebsite.com/myfile.gb`. If you have trouble with this feel free to raise an Issue and we may be able to add your genome.
diff --git a/postcss.config.js b/postcss.config.js
index e2dc478..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
\ No newline at end of file
+  },
+};
diff --git a/public/index.html b/public/index.html
index 4a486ab..f219a12 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,31 +5,38 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Simple genbank viewer"
+    <meta name="description" content="Simple genbank viewer" />
+    <!-- HTML Meta Tags -->
+    <title>Gensplore</title>
+    <meta name="description" content="Simple genbank viewer" />
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-W3TJTHDBX3"
+    ></script>
+    <script>
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      (window.dataLayer = window.dataLayer || []),
+        gtag("js", new Date()),
+        gtag("config", "G-W3TJTHDBX3");
+    </script>
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="http://gensplore.theo.io" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Gensplore" />
+    <meta property="og:description" content="Simple genbank viewer" />
+    <meta property="og:image" content="https://gensplore.theo.io/splash.png" />
 
-    />
-     <!-- HTML Meta Tags -->
-  <title>Gensplore</title>
-  <meta name="description" content="Simple genbank viewer">
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-W3TJTHDBX3"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-W3TJTHDBX3")</script>
-  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="http://gensplore.theo.io">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="Gensplore">
-  <meta property="og:description" content="Simple genbank viewer">
-  <meta property="og:image" content="https://gensplore.theo.io/splash.png">
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="gensplore.theo.io" />
+    <meta property="twitter:url" content="https://gensplore.theo.io" />
+    <meta name="twitter:title" content="Gensplore" />
+    <meta name="twitter:description" content="Simple genbank viewer" />
+    <meta name="twitter:image" content="https://gensplore.theo.io/splash.png" />
 
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="gensplore.theo.io">
-  <meta property="twitter:url" content="https://gensplore.theo.io">
-  <meta name="twitter:title" content="Gensplore">
-  <meta name="twitter:description" content="Simple genbank viewer">
-  <meta name="twitter:image" content="https://gensplore.theo.io/splash.png">
-
-  <!-- Meta Tags Generated via https://www.opengraph.xyz -->
+    <!-- Meta Tags Generated via https://www.opengraph.xyz -->
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/public/sequence.gb b/public/sequence.gb
index 02e2744..d960a49 100644
--- a/public/sequence.gb
+++ b/public/sequence.gb
@@ -26,7 +26,7 @@ REFERENCE   2  (bases 1 to 29903)
   JOURNAL   Submitted (05-JAN-2020) Shanghai Public Health Clinical Center &
             School of Public Health, Fudan University, Shanghai, China
 COMMENT     On Jan 17, 2020 this sequence version replaced MN908947.2.
-            
+
             ##Assembly-Data-START##
             Assembly Method       :: Megahit v. V1.1.3
             Sequencing Technology :: Illumina
@@ -398,7 +398,7 @@ FEATURES             Location/Qualifiers
                      /product="2'-O-ribose methyltransferase"
                      /note="nsp16_OMT; 2'-o-MT; produced by pp1ab only"
                      /protein_id="YP_009725311.1"
-ORIGIN      
+ORIGIN
         1 attaaaggtt tataccttcc caggtaacaa accaaccaac tttcgatctc ttgtagatct
        61 gttctctaaa cgaactttaa aatctgtgtg gctgtcactc ggctgcatgc ttagtgcact
       121 cacgcagtat aattaataac taattactgt cgttgacagg acacgagtaa ctcgtctatc
@@ -899,4 +899,3 @@ ORIGIN
     29821 tttagtagtg ctatccccat gtgattttaa tagcttctta ggagaatgac aaaaaaaaaa
     29881 aaaaaaaaaa aaaaaaaaaa aaa
 //
-
diff --git a/public/sequence2.gb b/public/sequence2.gb
index a0334b1..3004509 100644
--- a/public/sequence2.gb
+++ b/public/sequence2.gb
@@ -46,7 +46,7 @@ REFERENCE   5
             Medical Center Dr., Rockville, MD 20850, USA
 COMMENT     PROVISIONAL REFSEQ: This record has not yet been subject to final
             NCBI review. The reference sequence is identical to LN999946.
-            
+
             ##Genome-Annotation-Data-START##
             Annotation Provider :: INSDC submitter
             Annotation Status   :: Full annotation
@@ -27345,7 +27345,7 @@ FEATURES             Location/Qualifiers
                      pseudogene"
                      /pseudogene="unknown"
                      /db_xref="GeneID:812354"
-ORIGIN      
+ORIGIN
         1 tgaaccctaa accctaaacc ctaaacccta aacccctaaa ccctaaaccc tgaaccctaa
        61 accctaaacc ctaaacctaa accctaaacc ctaaaccctg aaccctaaac cctgaaccct
       121 aaacctaaac cctgaaccct aaaccctaaa ccctaaaccc taaaccctaa accctgaacc
@@ -82213,4 +82213,3 @@ ORIGIN
   3291841 gggtttaggg ttcagggttc agggtttagg gtttagggtt tagggtttca gggtttaggt
   3291901 ttagggttta gggtttaggg ttcagggttt agggtt
 //
-
diff --git a/src/App.css b/src/App.css
index fc8d842..fbe9fae 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,15 +3,14 @@
 @tailwind utilities;
 
 .stripybg {
-    width: 240px;
-    height: 240px;
-    background-color: #fff;
-    background-image: linear-gradient(0deg, transparent 99%, #eee 1%);
-    background-size: 60px 80px;
-    background-repeat: repeat;
-  }
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(0deg, transparent 99%, #eee 1%);
+  background-size: 60px 80px;
+  background-repeat: repeat;
+}
 
-.whitebg{
-    background-color: #fff;
-
-}
\ No newline at end of file
+.whitebg {
+  background-color: #fff;
+}
diff --git a/src/App.js b/src/App.js
index 7439a7b..f4c93f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,772 +1,39 @@
-import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } from "react";
-import 'rc-slider/assets/index.css';
-import './App.css';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useLayoutEffect,
+  useCallback,
+} from "react";
+import "rc-slider/assets/index.css";
+import "./App.css";
 
 import ClipLoader from "react-spinners/ClipLoader";
 import { genbankToJson } from "bio-parsers";
-import { useMeasure } from 'react-use'; // or just 'react-use-measure'
-import { FaSearch, FaTimes, FaZoo } from 'react-icons/fa';
-import { DebounceInput } from 'react-debounce-input';
-import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
+import { useMeasure } from "react-use"; // or just 'react-use-measure'
+import { FaSearch, FaTimes, FaZoo } from "react-icons/fa";
+import { DebounceInput } from "react-debounce-input";
+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 ColorHash from 'color-hash';
-import { useNavigate, useLocation } from "react-router-dom"
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-import qs from "qs"
-import { U } from "ve-sequence-utils/lib/DNAComplementMap";
-var colorHash = new ColorHash({ lightness: [0.75, 0.9, 0.7, 0.8] });
-
-
-function useDebounce(value, delay) {
-  // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(
-    () => {
-      // Update debounced value after delay
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-      // Cancel the timeout if value changes (also on delay change or unmount)
-      // This is how we prevent debounced value from updating if value is changed ...
-      // .. within the delay period. Timeout gets cleared and restarted.
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay] // Only re-call effect if value or delay changes
-  );
-  return debouncedValue;
-}
-
-const filterFeatures = (features, search) => {
-  return features.filter((feature) => {
-    // if feature name contains search string
-    if (feature.name.toLowerCase().includes(search.toLowerCase())) {
-      return true;
-    }
-    const product = feature.notes && feature.notes.product ? feature.notes.product[0] : "";
-    if (product.toLowerCase().includes(search.toLowerCase())) {
-      return true;
-    }
-    const locus_tag = feature.notes && feature.notes.locus_tag ? feature.notes.locus_tag[0] : "";
-    if (locus_tag.toLowerCase().includes(search.toLowerCase())) {
-      return true;
-    }
-    return false;
-  });
-}
-
-const useQueryState = query => {
-  const location = useLocation()
-  const navigate = useNavigate()
-
-  const setQuery = useCallback(
-    value => {
-      const existingQueries = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-      })
-
-      const queryString = qs.stringify(
-        { ...existingQueries, [query]: value },
-        { skipNulls: true }
-      )
-
-      navigate(`${location.pathname}?${queryString}`)
-    },
-    [navigate, location, query]
-  )
-
-  return [
-    qs.parse(location.search, { ignoreQueryPrefix: true })[query],
-    setQuery,
-  ]
-}
-
-const Tooltip = ({ hoveredInfo }) => {
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-
-  // position to right of mouse unless x is too close to right edge
-  const left_or_right = tooltipPosition.x > window.innerWidth - 200 ? {
-    right: `${window.innerWidth - tooltipPosition.x + 10}px`,
-  } : {
-    left: `${tooltipPosition.x + 10}px`,
-  };
-
-  const tooltipStyles = {
-    position: "absolute",
-    top: `${tooltipPosition.y + 10}px`,
-    ...left_or_right,
-    visibility: hoveredInfo ? "visible" : "hidden",
-
-    zIndex: 1000,
-  };
-
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      setTooltipPosition({ x: e.pageX, y: e.pageY });
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-
-  return (
-    <div style={tooltipStyles} className="text-sm bg-gray-100 p-2 rounded">
-      {hoveredInfo && <span>{hoveredInfo.label}</span>}
-      {hoveredInfo && hoveredInfo.product && (
-        <div className="text-xs">{hoveredInfo.product}</div>
-
-      )}
-
-    </div>
-  );
-};
-
-const getColor = (feature, product) => {
-  switch (feature.type) {
-    case "CDS":
-      switch (feature.name) {
-        case "S":
-          return "#ff7373";
-        case "nsp3":
-          return "#d3ffce"
-
-        case "leader":
-          return "#ff7f50";
-
-        case "nsp2":
-          return "#ddffdd";
-
-        case "nsp4":
-          return "#ff7373";
-
-
-
-        case "N":
-          return "#7fffd4";
-        case "E":
-          return "#ff7f50";
-        case "M":
-          return "#eeee88";
-        case "nsp12; RdRp":
-          return "#ff7f50"
-        case "nsp6":
-          return "#ee99ee"
-        case "nsp7":
-          return "#99ee99"
-
-        case "nsp8":
-          return "#ff7373";
-        case "nsp10":
-          return "#d3ffce";
-
-        case "nsp14":
-          return "#ff7f50";
-        case "nsp15":
-          return "#ddffdd";
-        case "nsp16":
-          return "#ffeeee";
-        case "nsp13":
-          return "#ff7f50";
-
-        default:
-          return colorHash.hex(feature.name + product + feature.type);
-      }
-    case "gene":
-      return "blue";
-    case "misc_feature":
-      return "green";
-    case "5'UTR":
-      return "orange";
-    case "3'UTR":
-      return "orange";
-    default:
-      return colorHash.hex(feature.name + product + feature.type);
-  }
-};
-
-const codonToAminoAcid = (codon) => {
-  switch (codon) {
-    case "TTT":
-    case "TTC":
-      return "F";
-    case "TTA":
-    case "TTG":
-    case "CTT":
-    case "CTC":
-    case "CTA":
-    case "CTG":
-      return "L";
-    case "ATT":
-    case "ATC":
-    case "ATA":
-      return "I";
-    case "ATG":
-      return "M";
-    case "GTT":
-    case "GTC":
-    case "GTA":
-    case "GTG":
-      return "V";
-    case "TCT":
-    case "TCC":
-    case "TCA":
-    case "TCG":
-    case "AGT":
-    case "AGC":
-      return "S";
-    case "CCT":
-    case "CCC":
-    case "CCA":
-    case "CCG":
-      return "P";
-    case "ACT":
-    case "ACC":
-    case "ACA":
-    case "ACG":
-      return "T";
-    case "GCT":
-    case "GCC":
-    case "GCA":
-    case "GCG":
-      return "A";
-    case "TAT":
-    case "TAC":
-      return "Y";
-    case "TAA":
-    case "TAG":
-    case "TGA":
-      return "*";
-    case "CAT":
-    case "CAC":
-      return "H";
-    case "CAA":
-    case "CAG":
-      return "Q";
-    case "AAT":
-    case "AAC":
-      return "N";
-    case "AAA":
-    case "AAG":
-      return "K";
-    case "GAT":
-    case "GAC":
-      return "D";
-    case "GAA":
-    case "GAG":
-      return "E";
-    case "TGT":
-    case "TGC":
-      return "C";
-    case "TGG":
-      return "W";
-    case "CGT":
-    case "CGC":
-    case "CGA":
-    case "CGG":
-    case "AGA":
-    case "AGG":
-      return "R";
-    case "GGT":
-    case "GGC":
-    case "GGA":
-    case "GGG":
-      return "G";
-    default:
-      return "X";
-  }
-};
-
-const baseToComplement = { "A": "T", "T": "A", "G": "C", "C": "G", "N": "N", "-": "-" };
-
-const getReverseComplement = (sequence) => {
-  return sequence.split("").map((base) => baseToComplement[base]).reverse().join("");
-}
-
-const SingleRow = ({ parsedSequence, rowStart, rowEnd, setHoveredInfo, rowId, intSearchInput, annotSearchInput, zoomLevel, whereMouseWentDown, setWhereMouseWentDown,
-  whereMouseWentUp, setWhereMouseWentUp,
-  whereMouseCurrentlyIs, setWhereMouseCurrentlyIs }) => {
-
-
-
-  const zoomFactor = 2 ** zoomLevel;
-  const sep = 10 * zoomFactor;
-
-
-
-
-
-
-
-
-
-  const fullSequence = parsedSequence.sequence;
-  const rowSequence = fullSequence.slice(rowStart, rowEnd);
-
-  const relevantFeatures = parsedSequence.features.filter(
-    (feature) => (
-      feature.type !== "source" &&
-      feature.type !== "gene" &&
-      feature.type !== "mRNA" &&
-      (
-        (feature.start >= rowStart && feature.start <= rowEnd) ||
-        (feature.end >= rowStart && feature.end <= rowEnd) ||
-        (feature.start <= rowStart && feature.end >= rowEnd))
-    )
-  );
-
-  const searchFeatures = !annotSearchInput ? [] : filterFeatures(relevantFeatures, annotSearchInput)
-
-  const isSelected = (intSearchInput >= rowStart && intSearchInput <= rowEnd) || searchFeatures.length > 0;
-
-  if (rowStart == 0) {
-    //console.log(relevantFeatures);
-  }
-
-  const featureBlocks = relevantFeatures.map((feature, i) => {
-
-    let startPos2;
-    let endPos2;
-
-    if (feature.start < rowStart) {
-      startPos2 = 0;
-
-    }
-    else {
-      startPos2 = feature.start - rowStart;
-    }
-
-    if (feature.end > rowEnd) {
-      endPos2 = rowEnd - rowStart;
-
-    }
-    else {
-      endPos2 = feature.end - rowStart;
-    }
-
-
-    const locations = feature.locations ? feature.locations : [{
-      start: feature.start,
-      end: feature.end,
-    }];
-
-    const blocks = locations.filter(
-      (location) => (
-        (location.start >= rowStart && location.start <= rowEnd) ||
-        (location.end >= rowStart && location.end <= rowEnd) ||
-        (location.start <= rowStart && location.end >= rowEnd)
-      )
-
-    ).map((location, j) => {
-      let startPos;
-      let endPos;
-      let startIsActual = true;
-
-
-
-      if (location.start < rowStart) {
-        startPos = 0;
-        startIsActual = false;
-      }
-      else {
-        startPos = location.start - rowStart;
-      }
-      let endIsActual = true;
-      if (location.end > rowEnd) {
-        endPos = rowEnd - rowStart;
-        endIsActual = false;
-      }
-      else {
-        endPos = location.end - rowStart;
-      }
-      return {
-        start: startPos,
-        end: endPos,
-        startIsActual: startIsActual,
-        endIsActual: endIsActual,
-
-      }
-    });
-
-
-
-
-    // positions in the translation
-    // for each location in this row: check if it is in any of the locations, if so, figure out which codon it is in
-    // and add it to the map
-
-    const seqLength = locations.reduce((acc, location) => acc + location.end - location.start + 1, 0);
-
-    const codonMap = [];
-    if (zoomLevel > (-2) && (feature.type == "CDS" | feature.type == "mat_peptide")) {
-
-      for (let j = rowStart; j < rowEnd; j++) {
-        let positionSoFar = 0;
-        for (let k = 0; k < locations.length; k++) {
-          if (j >= locations[k].start && j <= locations[k].end) {
-
-            const nucIndex = (j);
-
-            const codonIndexInitial = Math.floor((j - (locations[k].start - positionSoFar)) / 3);
-            const codonIndex = feature.strand > 0 ? codonIndexInitial : seqLength / 3 - codonIndexInitial - 1;
-            const frame = (j - (locations[k].start - positionSoFar)) % 3;
-            if (frame != 1) {
-              continue;
-            }
-
-            const middleIndex = nucIndex
-            const middleChar = fullSequence.slice(middleIndex, middleIndex + 1);
-            const firstIndex = nucIndex - locations[k].start > 0 ? nucIndex - 1 :
-              locations[k - 1].end;
-            const firstChar = fullSequence.slice(firstIndex, firstIndex + 1);
-            const lastIndex = nucIndex < locations[k].end ? nucIndex + 1 :
-              locations[k + 1].start;
-            const lastChar = fullSequence.slice(lastIndex, lastIndex + 1);
-            const codonSeq = firstChar + middleChar + lastChar;
-            //console.log(nucIndex, locations[k].start, firstChar, middleChar, lastChar);
-
-
-
-            const aminoAcid = codonToAminoAcid(feature.strand > 0 ? codonSeq : getReverseComplement(codonSeq));
-            //const aminoAcid = forTranslation[codonIndex];
-
-            codonMap.push({
-              first: firstIndex - rowStart,
-              middle: nucIndex - rowStart,
-              last: lastIndex - rowStart,
-              aminoAcid: aminoAcid,
-              codonIndex: codonIndex,
-              gene: feature.name,
-            });
-
-          }
-          positionSoFar += locations[k].end - locations[k].start + 1;
-        }
-      }
-    }
-    //console.log(codonMap);
-
-
-
-
-
-
-    return ({
-      start: startPos2,
-      end: endPos2,
-
-      blocks: blocks,
-      name: feature.name,
-      type: feature.type,
-      notes: feature.notes,
-      strand: feature.strand,
-      locations: locations,
-      codonMap: codonMap,
-      key: i
-    });
-  });
-
-
-  const extraPadding = 25;
-
-  // Calculate dimensions and tick interval
-  const width = rowSequence.length * sep; // 10 pixels per character
-  let height = 70 + featureBlocks.length * 20;
-// if rowStart is more than 5 digits, then we need more spacing
-  const spacing = rowStart > 10000 ? 60 : 40;
-  const approxNumTicks = Math.ceil(width / spacing); // One tick every 60 pixels
-  let tickInterval = Math.ceil(rowSequence.length / approxNumTicks);
-  const options = [5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000];
-  // find option just larger than tickInterval
-  
-  tickInterval  = options.find((option) => option >= tickInterval);
-  const modulus = rowStart % tickInterval;
-  const numTicks = Math.floor((rowEnd - rowStart) / tickInterval) + 1;
-
-  // Generate tick labels
-  const tickLabels = Array.from({ length: numTicks }, (_, i) => {
-    return (i + 1) * tickInterval + rowStart - modulus - 1;
-  });
-
-
-
-
-  // Generate ticks and labels
-  const ticks = tickLabels.map((label, i) => {
-    const x = ((label - rowStart) / (rowEnd - rowStart)) * width;
-    return (
-      <g key={i}>
-        <line x1={x} y1={0} x2={x} y2={10} stroke="black" />
-        <text x={x} y={20} textAnchor="middle" fontSize="10"
-        // bold
-
-        >
-          {label + 1}
-        </text>
-      </g>
-    );
-  });
-
-  // Generate sequence characters
-  let chars = null;
-
-  if (zoomLevel > -1) {
-    chars = rowSequence.split("").map((char, i) => {
-      const x = i * sep;
-      return (
-        <text key={i} x={x} y={10} textAnchor="middle" fontSize={
-          zoomLevel < -0.5 ? "10" : "12"} fillOpacity={0.9}
-
-          onMouseEnter={
-            () => setHoveredInfo({
-
-              label: `Nucleotide ${i + rowStart + 1}: ${char}`
-            })
-          }
-          onMouseLeave={() => setHoveredInfo(null)}
-
-        >
-          {char}
-        </text>
-      );
-    });
-  }
-  const codonZoomThreshold = -2
-
-  const featureBlocksSVG = featureBlocks.map((feature, i) => {
-    const x = feature.start * sep;
-    
-
-    const width = (feature.end - feature.start) * sep;
-    
-    const y = 7 + i * 20;
-    const extraFeat = 5 * zoomFactor;
-    const codonPad = 15 * zoomFactor;
-
-    const product = feature.notes ? feature.notes.product : "";
-    let betterName = feature.type == "mat_peptide" ? product : feature.name;
-
-    const altName = feature.type == "mat_peptide" ? feature.name : product;
-    if (betterName == "Untitled Feature") betterName = feature.type;
-
-
-
-
-    return (
-      <g key={i}>
-        <line x1={x} y1={y + 5} x2={x + width} y2={y + 5} stroke={getColor(feature, product)}
-          // width 2
-          strokeWidth={1.5}
-        />
-        {feature.blocks.map((block, j) => (
-
-          <rect x={block.start * sep - extraFeat} y={y} width={(block.end - block.start) * sep + extraFeat * 2} height={10} fill={
-            getColor(feature, product)
-          }
-            onMouseEnter={
-              () => {
-                if (zoomLevel < codonZoomThreshold) setHoveredInfo({
-                  label: `${feature.name}: ${feature.type}`,
-                  product: altName,
-                  locusTag: feature.notes && feature.notes.locus_tag ? feature.notes.locus_tag : null,
-                })
-              }
-            }
-            onMouseLeave={() => {
-              if (zoomLevel < codonZoomThreshold) setHoveredInfo(null)
-            }}
-
-
-          />
-        ))}
-
-
-        <text x={x - 10} y={y} textAnchor="left" fontSize="10"
-        >
-          {betterName}
-        </text>
-        {
-          feature.codonMap.map((codon, j) => {
-            return (<>
-              {
-                zoomLevel > codonZoomThreshold && <text key={j} x={codon.middle * sep} y={y + 9} textAnchor="middle" fontSize="10"
-                  onMouseOver={
-                    () => setHoveredInfo({
-                      label: `${betterName}: ${codon.aminoAcid}${codon.codonIndex + 1}`,
-                      product: altName,
-                      locusTag: feature.notes && feature.notes.locus_tag ? feature.notes.locus_tag : null,
-
-                    })
-                  }
-                  onMouseLeave={() => setHoveredInfo(null)}
-
-                  fillOpacity={0.75}
-
-                >
-                  {codon.aminoAcid}
-                </text>}
-              {codon.middle > 2 && zoomLevel > -0.5 &&
-                <text key={"bb" + j} x={codon.middle * sep} y={y - 1} textAnchor="middle" fontSize="7" fillOpacity={0.4}
-                //fontWeight="bold"
-                >
-                  {codon.codonIndex + 1}
-                </text>
-              }
-
-            </>
-            );
-          }
-
-          )
-
-        }
-        {zoomLevel > -2 &&
-          feature.codonMap.map((codon, j) => {
-            // create a line either side of the codon
-
-            return (
-              <g key={j}>
-                {codon.middle > 1 && codon.middle < 3 &&
-                  <line x1={codon.middle * sep - codonPad} y1={y} x2={codon.middle * sep - codonPad} y2={y + 10} stroke="black" strokeOpacity={0.1} />
-                }
-                <line x1={codon.middle * sep + codonPad} y1={y} x2={codon.middle * sep + codonPad} y2={y + 10} stroke="black" strokeOpacity={0.1} />
-              </g>
-            );
-
-          }
-
-          )
-        }
-      </g>
-    );
-  });
-
-  // create a tick specifically at searchInput
-  let searchTick = null;
-  if (intSearchInput != null && intSearchInput >= rowStart && intSearchInput <= rowEnd) {
-    searchTick = (
-      <g key={-1}>
-        <line x1={(intSearchInput - rowStart) * sep} y1={0} x2={(intSearchInput - rowStart) * sep} y2={10} stroke="red" />
-        {//rect behind tick
-        }
-        <rect x={(intSearchInput - rowStart) * sep - 30} y={0} width={60} height={30} fill="#ffffee" />
-        <text x={(intSearchInput - rowStart) * sep} y={20} textAnchor="middle" fontSize="10"
-          fill="red"
-        >
-          {intSearchInput + 1}
-        </text>
-      </g>
-    );
-  }
-
-  let selectionRect = null;
-  let selTempStart = null;
-  let selTempEnd = null;
-  //console.log(whereMouseWentDown, whereMouseWentUp, whereMouseCurrentlyIs);
-
-  if (whereMouseWentDown != null) {
-
-
-    const alternative = whereMouseWentUp != null ? whereMouseWentUp : whereMouseCurrentlyIs;
-
-    const rectStart = Math.min(whereMouseWentDown, alternative);
-    const rectEnd = Math.max(whereMouseWentDown, alternative);
-    //console.log(rectStart, rectEnd);
-    selectionRect = (
-      <rect x={extraPadding + (rectStart - rowStart - 0.5) * sep} y={0} width={(rectEnd - rectStart) * sep} height={height} fill="#bbbbff" fillOpacity={0.5} />
-    );
-
-  }
-
-
-
-
-
-
-  // Concatenate sequence characters and ticks with SVG
-  return (
-    <div style={{
-      position: "relative", height: `${height}px`,
-      ...(isSelected ? { backgroundColor: "#ffffee" } : {})
-
-    }}
-      onMouseDown={e => {
-        // figure out which nucleotide was clicked
-        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
-        const nucleotide = Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
-        setWhereMouseWentDown(nucleotide);
-        setWhereMouseWentUp(null);
-        e.preventDefault();
-
-      }
-      }
-
-      onMouseUp={e => {
-        // figure out which nucleotide was clicked
-        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
-        const nucleotide = Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
-        if (Math.abs(nucleotide - whereMouseWentDown) <= 1) {
-          // if the mouse didn't move, then this is a click
-
-          setWhereMouseWentDown(null);
-          setWhereMouseWentUp(null);
-        }
-        else {
-          // otherwise, this is a drag
-          setWhereMouseWentUp(nucleotide);
-          e.preventDefault();
-        }
-      }
-      }
-
-      onMouseMove={e => {
-        // figure out which nucleotide was clicked
-        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
-        const nucleotide = Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
-        setWhereMouseCurrentlyIs(nucleotide);
-      }
-      }
-
-
-      id={`row-${rowId}`}>
-      <svg
-        width={width + 40}
-        height={height - 20}
-        style={{ position: "absolute", top: 0, left: 0 }}
-      >
-        {selectionRect}
-        <g
-          fillOpacity={0.7}
-        >
-          <g transform={`translate(${extraPadding}, ${height - 40})`} style={
-            { zIndex: -5 }
-          }>{ticks}</g>
-          {searchTick && <g transform={`translate(${extraPadding}, ${height - 40})`}>{searchTick}</g>
-          }
-          {// line above ticks 
-          }
-          <line x1={0 + extraPadding} y1={height - 40} x2={width + extraPadding + 0} y2={height - 40}
-
-            stroke="black" />
-        </g>
-
-        <g transform={`translate(${extraPadding}, ${height - 55})`}>{chars}</g>
-        <g transform={`translate(${extraPadding}, 5)`}>{featureBlocksSVG}</g>
-      </svg>
-    </div>
-  );
-};
-
-function SearchPanel({ searchPanelOpen, setSearchPanelOpen, searchInput, setSearchInput, searchType, setSearchType }) {
-
-
+import { AiOutlineZoomIn, AiOutlineZoomOut } from "react-icons/ai";
+import { GiDna1 } from "react-icons/gi";
+
+import { ToastContainer, toast } from "react-toastify";
+import { useDebounce, useQueryState } from "./hooks";
+import "react-toastify/dist/ReactToastify.css";
+import Tooltip from "./components/Tooltip";
+import { getReverseComplement, filterFeatures } from "./utils";
+import SingleRow from "./components/SingleRow";
+
+function SearchPanel({
+  searchPanelOpen,
+  setSearchPanelOpen,
+  searchInput,
+  setSearchInput,
+  searchType,
+  setSearchType,
+}) {
   const handleInputChange = (event) => {
     setSearchInput(event.target.value);
     // if event.target.value has non-numeric characters, then set searchType to annot
@@ -774,7 +41,6 @@ function SearchPanel({ searchPanelOpen, setSearchPanelOpen, searchInput, setSear
       setSearchType("annot");
       console.log("setting searchType to annot");
     }
-
   };
 
   const searchOption = [
@@ -784,44 +50,43 @@ function SearchPanel({ searchPanelOpen, setSearchPanelOpen, searchInput, setSear
 
   return (
     <div className="bg-white p-1 text-sm shadow rounded flex items-center">
-      {searchPanelOpen ? ((<>
-        <select
-
-          value={searchType}
-          onChange={(option) => setSearchType(option.value)}
-          className="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-2 rounded inline-flex items-center"
-        >
-          {searchOption.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-
-
-
-        <DebounceInput
-          minLength={2}
-          debounceTimeout={300}
-          type="text"
-          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"}
-          id="search-input"
-          // don't autocomplete
-          autoComplete="off"
-        />
-        <button
-          className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center"
-          onClick={() => {
-            setSearchPanelOpen(false)
-            setSearchInput(null)
-          }}
-        >
-          <FaTimes className="mr-2" />
-        </button></>
-      )) : (
+      {searchPanelOpen ? (
+        <>
+          <select
+            value={searchType}
+            onChange={(option) => setSearchType(option.value)}
+            className="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-2 rounded inline-flex items-center"
+          >
+            {searchOption.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          <DebounceInput
+            minLength={2}
+            debounceTimeout={300}
+            type="text"
+            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"}
+            id="search-input"
+            // don't autocomplete
+            autoComplete="off"
+          />
+          <button
+            className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center"
+            onClick={() => {
+              setSearchPanelOpen(false);
+              setSearchInput(null);
+            }}
+          >
+            <FaTimes className="mr-2" />
+          </button>
+        </>
+      ) : (
         <button
           className="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center"
           onClick={() => setSearchPanelOpen(true)}
@@ -837,9 +102,12 @@ const ConfigPanel = ({ zoomLevel, setZoomLevel }) => {
   // zoom slider
   return (
     <>
-      <button className="inline-block" onClick={() => setZoomLevel(
-        (x) => x - 0.1
-      )}><AiOutlineZoomOut className="inline-block" /></button>
+      <button
+        className="inline-block"
+        onClick={() => setZoomLevel((x) => x - 0.1)}
+      >
+        <AiOutlineZoomOut className="inline-block" />
+      </button>
       <Slider
         value={zoomLevel}
         onChange={(x) => setZoomLevel(x)}
@@ -849,21 +117,17 @@ const ConfigPanel = ({ zoomLevel, setZoomLevel }) => {
         style={{ width: 150 }}
         className="inline-block mx-5"
       />
-      <button className="inline-block" onClick={() => setZoomLevel(
-        (x) => x + 0.1
-      )}><AiOutlineZoomIn className="inline-block" /></button>
+      <button
+        className="inline-block"
+        onClick={() => setZoomLevel((x) => x + 0.1)}
+      >
+        <AiOutlineZoomIn className="inline-block" />
+      </button>
     </>
   );
 };
 
-
-
-
-
-
-
 function GensploreView({ genbankString, searchInput, setSearchInput }) {
-
   const [searchPanelOpen, setSearchPanelOpen] = useState(false);
   const [zoomLevel, setRawZoomLevel] = useState(0);
   const [whereMouseWentDown, setWhereMouseWentDown] = useState(null);
@@ -876,7 +140,6 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
   const [hoveredInfo, setHoveredInfo] = useState(null);
   const [genbankData, setGenbankData] = useState(null);
 
-
   // safely convert searchInput to int
   const intSearchInput = searchType === "nuc" ? parseInt(searchInput) : null;
   const annotSearchInput = searchType === "annot" ? searchInput : null;
@@ -912,19 +175,14 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     };
   }, [whereOnPage]);
 
-
-
-
-
-
   useEffect(() => {
     const loadGenbankString = async () => {
       try {
-
         const genbankObject = await genbankToJson(genbankString);
         console.log("GenBank file loaded:", genbankObject);
         // to uppercase
-        genbankObject[0].parsedSequence.sequence = genbankObject[0].parsedSequence.sequence.toUpperCase();
+        genbankObject[0].parsedSequence.sequence =
+          genbankObject[0].parsedSequence.sequence.toUpperCase();
         setGenbankData(genbankObject[0]);
       } catch (error) {
         console.error("Error loading GenBank file:", error);
@@ -933,7 +191,6 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     loadGenbankString();
   }, []);
 
-
   // detect ctrl-F and open search panel
   useEffect(() => {
     const handleKeyDown = (e) => {
@@ -945,12 +202,8 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
           document.getElementById("search-input").focus();
           // select all text
           document.getElementById("search-input").select();
-        }
-          , 100);
+        }, 100);
       }
-
-
-
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -958,31 +211,30 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     };
   }, []);
 
-
-
   // detect ctrl-F and open search panel
   useEffect(() => {
     const handleKeyDown = (e) => {
-
       // ctrl-C
       if ((e.ctrlKey || e.metaKey) && e.keyCode === 67) {
-
         const selStart = Math.min(whereMouseWentDown, whereMouseWentUp);
         const selEnd = Math.max(whereMouseWentDown, whereMouseWentUp);
         //console.log(selStart,selEnd);
-        let selectedText = genbankData.parsedSequence.sequence.substring(selStart, selEnd);
+        let selectedText = genbankData.parsedSequence.sequence.substring(
+          selStart,
+          selEnd
+        );
         if (selectedText) {
           if (e.shiftKey) {
             selectedText = getReverseComplement(selectedText);
           }
           console.log(selectedText);
           navigator.clipboard.writeText(selectedText);
-          toast.success(`Copied ${e.shiftKey ? "reverse complement" : ""} to clipboard`);
+          toast.success(
+            `Copied ${e.shiftKey ? "reverse complement" : ""} to clipboard`
+          );
           e.preventDefault();
         }
       }
-
-
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -990,74 +242,57 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     };
   }, [genbankData, whereMouseWentDown, whereMouseWentUp]);
 
-
-
-
-  let rowWidth = Math.floor(width * .0965 / (2 ** zoomLevel));
+  let rowWidth = Math.floor((width * 0.0965) / 2 ** zoomLevel);
   // rowWidth minimum 50
   if (rowWidth < 30) {
     rowWidth = 30;
   }
   //console.log("rowWidth", rowWidth);
 
-
-
   let fullSequence, sequenceLength;
   if (genbankData) {
     fullSequence = genbankData.parsedSequence.sequence;
     sequenceLength = fullSequence.length;
   }
 
-
   const rowData = useMemo(() => {
     if (!fullSequence) return [];
     const rowData = [];
 
-
-
     for (let i = 0; i < sequenceLength; i += rowWidth) {
-
       rowData.push({
         rowStart: i,
-        rowEnd: (i + rowWidth > sequenceLength ? sequenceLength : i + rowWidth)
+        rowEnd: i + rowWidth > sequenceLength ? sequenceLength : i + rowWidth,
       });
     }
     return rowData;
-  }
-    , [fullSequence, rowWidth, sequenceLength]);
-
+  }, [fullSequence, rowWidth, sequenceLength]);
 
   const parentRef = useRef(null);
   const parentOffsetRef = useRef(0);
 
   useLayoutEffect(() => {
-    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0
-  }, [])
-
-
-
+    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0;
+  }, []);
 
   const rowVirtualizer = useWindowVirtualizer({
     count: rowData.length,
     estimateSize: () => 90,
     scrollMargin: parentOffsetRef.current,
-  })
-
-
+  });
 
   const virtualItems = rowVirtualizer.getVirtualItems();
   const [centeredNucleotide, setCenteredNucleotide] = useState(null);
 
-
   const setZoomLevel = (x) => {
-    const middleRow = virtualItems[Math.floor(virtualItems.length / 2)].index
+    const middleRow = virtualItems[Math.floor(virtualItems.length / 2)].index;
     const middleRowStart = rowData[middleRow].rowStart;
     const middleRowEnd = rowData[middleRow].rowEnd;
     const middleRowMiddle = Math.floor((middleRowStart + middleRowEnd) / 2);
     setCenteredNucleotide(middleRowMiddle);
     console.log("middleRowMiddle", middleRowMiddle);
     setRawZoomLevel(x);
-  }
+  };
 
   useEffect(() => {
     if (!centeredNucleotide) return;
@@ -1066,7 +301,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
       const midPoint = Math.floor((whereMouseWentDown + whereMouseWentUp) / 2);
       rowVirtualizer.scrollToIndex(3 + Math.floor(midPoint / rowWidth), {
         align: "center",
-        smoothScroll: false
+        smoothScroll: false,
       });
       setCenteredNucleotide(null);
       return;
@@ -1074,43 +309,38 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     const row = Math.floor(centeredNucleotide / rowWidth);
     rowVirtualizer.scrollToIndex(row, {
       align: "center",
-      smoothScroll: false
+      smoothScroll: false,
     });
     setCenteredNucleotide(null);
     console.log("scrolling to", centeredNucleotide);
   }, [centeredNucleotide, zoomLevel]);
 
-
   const [lastSearch, setLastSearch] = useState(null);
 
-
-
   useEffect(() => {
     if (!intSearchInput) return;
     const row = Math.floor(intSearchInput / rowWidth);
     if (intSearchInput === lastSearch) {
-      return
+      return;
     }
     // checkrow is valid
     if (row > rowData.length) {
-      return
-
+      return;
     }
 
     rowVirtualizer.scrollToIndex(row + 1, { align: "center" });
 
     setLastSearch(intSearchInput);
-
-
-
-
   }, [intSearchInput, rowWidth]);
   useEffect(() => {
     if (!annotSearchInput) return;
     const strippedAnnotInput = annotSearchInput.replace(/\s/g, "");
     if (strippedAnnotInput === "") return;
     // search the features for one that matches
-    const matchingFeatures = filterFeatures(genbankData.parsedSequence.features, strippedAnnotInput);
+    const matchingFeatures = filterFeatures(
+      genbankData.parsedSequence.features,
+      strippedAnnotInput
+    );
     if (matchingFeatures.length === 0) {
       toast.error("No matching features found");
       return;
@@ -1121,28 +351,18 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     setLastSearch(annotSearchInput);
   }, [annotSearchInput]);
 
-
-
-
-
   //console.log("virtualItems", virtualItems);
 
   if (!genbankData) {
     return <div>Loading...</div>;
   }
 
-
-
-
-
   if (!width) {
     return (
       <div className="w-full h-full p-5">
         <div ref={ref} className="w-full h-full" />
-
       </div>
     );
-
   }
 
   return (
@@ -1157,84 +377,80 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
             setSearchPanelOpen={setSearchPanelOpen}
             searchType={searchType}
             setSearchType={setSearchType}
-
           />
         </div>
       )}
 
       <div className="fixed bottom-0 right-0 z-10 w-64 h-12 p-2 rounded shadow bg-white">
-        <ConfigPanel
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
-        />
+        <ConfigPanel zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
       </div>
 
-
-
       <div className="w-full">
         <Tooltip hoveredInfo={hoveredInfo} />
         {genbankData && (
-          <div ref={ref} >
+          <div ref={ref}>
             {
               // small logo on left, name and definition on right
             }
             <div className="flex flex-row">
               <div className="flex flex-col">
                 <h3 className="text-xl mr-3 text-gray-700 ml-4 font-bold ">
-                  <a href="/"><GiDna1 className="inline" />
-
+                  <a href="/">
+                    <GiDna1 className="inline" />
                     Gensplore
-                  </a></h3>
+                  </a>
+                </h3>
               </div>
             </div>
             <div className="flex flex-col ml-4 mt-3 text-gray-900">
-
-              <h2 className="text-2xl"
-              >{genbankData.parsedSequence.name}</h2>
+              <h2 className="text-2xl">{genbankData.parsedSequence.name}</h2>
               <div>
                 <div className="flex flex-row">
                   <span>{genbankData.parsedSequence.definition}</span>
                 </div>
-
-
-
               </div>
             </div>
             <div ref={parentRef} className="mt-5 h-80">
               <div
                 style={{
                   height: rowVirtualizer.getTotalSize(),
-                  width: '100%',
-                  position: 'relative',
+                  width: "100%",
+                  position: "relative",
                 }}
                 className="stripybg"
               >
                 <div
                   style={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 0,
                     left: 0,
-                    width: '100%',
-                    transform: `translateY(${virtualItems[0].start - rowVirtualizer.options.scrollMargin
-                      }px)`,
+                    width: "100%",
+                    transform: `translateY(${
+                      virtualItems[0].start -
+                      rowVirtualizer.options.scrollMargin
+                    }px)`,
                   }}
                   className="whitebg"
                 >
-
                   {virtualItems.map((virtualitem) => {
                     const row = rowData[virtualitem.index];
                     //return (<div>{genbankData.parsedSequence.sequence.slice(row.start,row.end)}</div>)
                     return (
-                      <div ref={rowVirtualizer.measureElement}
+                      <div
+                        ref={rowVirtualizer.measureElement}
                         data-index={virtualitem.index}
-                        key={virtualitem.key}>
-                        <SingleRow key={virtualitem.index} parsedSequence={genbankData.parsedSequence} rowStart={row.rowStart} rowEnd={row.rowEnd}
+                        key={virtualitem.key}
+                      >
+                        <SingleRow
+                          key={virtualitem.index}
+                          parsedSequence={genbankData.parsedSequence}
+                          rowStart={row.rowStart}
+                          rowEnd={row.rowEnd}
                           rowWidth={rowWidth}
                           setHoveredInfo={setHoveredInfo}
                           rowId={virtualitem.index}
                           intSearchInput={intSearchInput - 1}
                           annotSearchInput={annotSearchInput}
-
                           renderProperly={true}
                           zoomLevel={zoomLevel}
                           whereMouseWentDown={whereMouseWentDown}
@@ -1243,36 +459,33 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
                           setWhereMouseWentUp={setWhereMouseWentUp}
                           whereMouseCurrentlyIs={whereMouseCurrentlyIs}
                           setWhereMouseCurrentlyIs={setWhereMouseCurrentlyIs}
-
                         />
-                      </div>)
-                  }
-                  )
-                  }
+                      </div>
+                    );
+                  })}
                 </div>
               </div>
             </div>
-
-
           </div>
         )}
       </div>
     </div>
   );
-
 }
 
-
 const App = () => {
   const addlExamples = [
     ["Mpox clade II", "NC_063383.1"],
     ["HIV-1", "NC_001802.1"],
-    ["M. tuberculosis", "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/gensplore/mtb.gb"],
-    ["E. coli K12", "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/gensplore/k12.gb"]
-
-
-
-  ]
+    [
+      "M. tuberculosis",
+      "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/gensplore/mtb.gb",
+    ],
+    [
+      "E. coli K12",
+      "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/gensplore/k12.gb",
+    ],
+  ];
 
   // option to either load from URL or upload a file
   const [genbankString, setGenbankString] = useState(null);
@@ -1284,7 +497,9 @@ const App = () => {
     // check for errors
     if (!response.ok) {
       setLoading(false);
-      window.alert("Error loading file: for large Genbank files, try using the 'Load from file' option instead.");
+      window.alert(
+        "Error loading file: for large Genbank files, try using the 'Load from file' option instead."
+      );
       return;
     }
 
@@ -1294,19 +509,15 @@ const App = () => {
   };
 
   const loadFromFile = async (file) => {
-
     const text = await file.text();
 
     setGenbankString(text);
     setLoaded(true);
-
   };
 
-
-
-  const [gbUrl, setGbUrl] = useQueryState("gb")
-  const [loaded, setLoaded] = useQueryState("loaded")
-  const [searchInput, setSearchInput] = useQueryState("search")
+  const [gbUrl, setGbUrl] = useQueryState("gb");
+  const [loaded, setLoaded] = useQueryState("loaded");
+  const [searchInput, setSearchInput] = useQueryState("search");
 
   useEffect(() => {
     if (gbUrl) {
@@ -1320,221 +531,218 @@ const App = () => {
   const [genbankId, setGenbankId] = useState(null);
 
   const loadFromGenbankId = async (id) => {
-
-    const strippedOfWhitespace = id.replace(/\s/g, '')
+    const strippedOfWhitespace = id.replace(/\s/g, "");
     // if no length, do nothing
     if (strippedOfWhitespace.length <= 3) {
-      return
+      return;
     }
 
-    const url = `https://genbank-api.vercel.app/api/genbank/${strippedOfWhitespace}`
-    setGbUrl(url)
-  }
+    const url = `https://genbank-api.vercel.app/api/genbank/${strippedOfWhitespace}`;
+    setGbUrl(url);
+  };
 
   const [genbankResults, setGenbankResults] = useState(null);
-  
+
   const doGenBankSearch = async (searchTerm) => {
-    let query = searchTerm + ' AND genome AND (biomol_genomic[PROP] AND ("1"[SLEN] : "1000000"[SLEN]))'
+    let query =
+      searchTerm +
+      ' AND genome AND (biomol_genomic[PROP] AND ("1"[SLEN] : "1000000"[SLEN]))';
     /// restrict to viruses, bacteria and protists, or SAR
-    query += ' AND ("Viruses"[Organism] OR "Bacteria"[Organism] OR "Protista"[Organism] OR "SAR"[Organism])'
-    const url = `https://genbank-api.vercel.app/api/genbank_search/${query}`
-      fetch(url)
-        .then(response => response.json())
-        .then(data => {
-          data = data.filter(d => d.accession!="uids")
-          setGenbankResults(data)
-        })
-  }
+    query +=
+      ' AND ("Viruses"[Organism] OR "Bacteria"[Organism] OR "Protista"[Organism] OR "SAR"[Organism])';
+    const url = `https://genbank-api.vercel.app/api/genbank_search/${query}`;
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        data = data.filter((d) => d.accession != "uids");
+        setGenbankResults(data);
+      });
+  };
   // debounce the search
   const debouncedId = useDebounce(genbankId, 500);
 
-
-
   useEffect(() => {
     if (debouncedId) {
       //doGenBankSearch(debouncedId);
-      console.log("would search")
+      console.log("would search");
     }
   }, [debouncedId]);
 
-
-
   // create UI for loading from URL or file
-  return (<>
-    {ready && <GensploreView genbankString={genbankString}
-      searchInput={searchInput}
-      setSearchInput={setSearchInput}
-    />}
-    {!ready && loading && (
-      <div className="w-full h-full text-gray-700 flex flex-col justify-center items-center">
-        <ClipLoader color={"#ccc"} loading={loading} size={150} className="mt-20" />
-      </div>
-    )}
-
-    {!ready && !loading && (
-
-      <div className="w-full h-full text-gray-700 flex flex-col justify-center items-center"
-        // handle dragover
-        onDragOver={(e) => {
-          e.preventDefault();
-          setBeingDraggedOver(true);
-        }}
-        // handle dragleave
-        onDragLeave={(e) => {
-          e.preventDefault();
-          setBeingDraggedOver(false);
-        }}
-        // handle drop
-        onDrop={(e) => {
-
-          e.preventDefault();
-          setBeingDraggedOver(false);
-          loadFromFile(e.dataTransfer.files[0]);
-        }}
-
-
-
-
-
-      >
-        <div className="fixed bottom-5 text-center w-full">
-          <a className="text-gray-300 hover:text-gray-500" href="https://github.com/theosanderson/gensplore">View code on GitHub</a>
+  return (
+    <>
+      {ready && (
+        <GensploreView
+          genbankString={genbankString}
+          searchInput={searchInput}
+          setSearchInput={setSearchInput}
+        />
+      )}
+      {!ready && loading && (
+        <div className="w-full h-full text-gray-700 flex flex-col justify-center items-center">
+          <ClipLoader
+            color={"#ccc"}
+            loading={loading}
+            size={150}
+            className="mt-20"
+          />
         </div>
+      )}
 
-
-        <h3 className="text-2xl mr-3 text-gray-700 ml-3 font-bold text-center mt-4 mb-4 ">
-          <GiDna1 className="inline" />
-
-          Gensplore</h3>
-        <div className="flex flex-row justify-center">
-
-
-          <div className="flex flex-col">
-            <h2 className="text-l">Upload a GenBank file, or drag and drop</h2>
-            {beingDraggedOver && (
-              <div className="border rounded-lg py-2 px-3 mt-2 text-center text-green-500">
-                Drop file now to load
-              </div>
-            )}
-            <input
-              type="file"
-              className="border rounded-lg py-2 px-3 mt-2 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
-              onChange={(e) => loadFromFile(e.target.files[0])}
-            />
+      {!ready && !loading && (
+        <div
+          className="w-full h-full text-gray-700 flex flex-col justify-center items-center"
+          // handle dragover
+          onDragOver={(e) => {
+            e.preventDefault();
+            setBeingDraggedOver(true);
+          }}
+          // handle dragleave
+          onDragLeave={(e) => {
+            e.preventDefault();
+            setBeingDraggedOver(false);
+          }}
+          // handle drop
+          onDrop={(e) => {
+            e.preventDefault();
+            setBeingDraggedOver(false);
+            loadFromFile(e.dataTransfer.files[0]);
+          }}
+        >
+          <div className="fixed bottom-5 text-center w-full">
+            <a
+              className="text-gray-300 hover:text-gray-500"
+              href="https://github.com/theosanderson/gensplore"
+            >
+              View code on GitHub
+            </a>
           </div>
-        </div>
-
-        <div className="flex flex-row justify-center mt-5 border-t border-gray-300 pt-5 text-center ">
 
-          <div className="flex flex-col">
-            <h2 className="text-l mb-5">or enter a GenBank ID:</h2>
-            <div>
+          <h3 className="text-2xl mr-3 text-gray-700 ml-3 font-bold text-center mt-4 mb-4 ">
+            <GiDna1 className="inline" />
+            Gensplore
+          </h3>
+          <div className="flex flex-row justify-center">
+            <div className="flex flex-col">
+              <h2 className="text-l">
+                Upload a GenBank file, or drag and drop
+              </h2>
+              {beingDraggedOver && (
+                <div className="border rounded-lg py-2 px-3 mt-2 text-center text-green-500">
+                  Drop file now to load
+                </div>
+              )}
               <input
-                type="text"
-                className="border rounded-lg py-2 px-3 mt-2focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
-                onChange={(e) => setGenbankId(e.target.value)}
-                placeholder="NC..."
-                onKeyUp={(e) => {
-                  if (e.key === "Enter") {
-                    
-                    loadFromGenbankId(genbankId)
-                  }
-                }
-                }
+                type="file"
+                className="border rounded-lg py-2 px-3 mt-2 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                onChange={(e) => loadFromFile(e.target.files[0])}
               />
-              <button
-                className="bg-gray-100 ml-3 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
-                onClick={() => {
-                  loadFromGenbankId(genbankId)
-                }
-                }
-              >
-                Load accession
-              </button>
-            </div>
-            <div>
-              {genbankId && genbankId.length > 1 && (
-                <p className="text-gray-500 text-xs mt-2">
-                  This will only work for virus-sized genomes, for bacterial genomes please upload a file above.
-                </p>)}
             </div>
-            {genbankResults && genbankResults.length > 0 && (
-
-
-
-<div className="mt-5 text-xs">
-  <h3 className="text-l">We also tried searching for this query:</h3>
-  <div 
-  // scroll y
-  className="h-24 overflow-y-auto"
-  >
-  <ul>
-    {genbankResults.map((result) => (
-      <li key={result.description}>
-        <button
-          className="text-blue-400 hover:text-blue-700 mb-1 mt-1"
-          onClick={() => setGbUrl(`https://genbank-api.vercel.app/api/genbank/${result.description}`)}
-        >
-          {result.description}: {result.title}
-        </button>
-      </li>
-    ))}
-  </ul>
-  </div>
-
-</div>
-)}
-              
-           
-
-
           </div>
 
-        </div>
-        <div className="flex flex-row justify-center mt-5 border-t border-gray-300 pt-5 text-center">
-          <div className="flex flex-col">
-            <h2 className="text-l">or select an example:</h2>
-            <ul>
-              <li>
-                <button
-                  className="text-blue-400 hover:text-blue-700 mb-3 mt-3"
-                  onClick={() => setGbUrl("/sequence.gb")}
-                >
-                  SARS-CoV-2 reference genome
-                </button>
-              </li>
-              <li>
+          <div className="flex flex-row justify-center mt-5 border-t border-gray-300 pt-5 text-center ">
+            <div className="flex flex-col">
+              <h2 className="text-l mb-5">or enter a GenBank ID:</h2>
+              <div>
+                <input
+                  type="text"
+                  className="border rounded-lg py-2 px-3 mt-2focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                  onChange={(e) => setGenbankId(e.target.value)}
+                  placeholder="NC..."
+                  onKeyUp={(e) => {
+                    if (e.key === "Enter") {
+                      loadFromGenbankId(genbankId);
+                    }
+                  }}
+                />
                 <button
-                  className="text-blue-400 hover:text-blue-700 mb-3"
-                  onClick={() => setGbUrl("/sequence2.gb")}
+                  className="bg-gray-100 ml-3 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
+                  onClick={() => {
+                    loadFromGenbankId(genbankId);
+                  }}
                 >
-                  <i>P. falciparum</i> chromosome 14
+                  Load accession
                 </button>
-              </li>
-              {addlExamples.map((example) => (
+              </div>
+              <div>
+                {genbankId && genbankId.length > 1 && (
+                  <p className="text-gray-500 text-xs mt-2">
+                    This will only work for virus-sized genomes, for bacterial
+                    genomes please upload a file above.
+                  </p>
+                )}
+              </div>
+              {genbankResults && genbankResults.length > 0 && (
+                <div className="mt-5 text-xs">
+                  <h3 className="text-l">
+                    We also tried searching for this query:
+                  </h3>
+                  <div
+                    // scroll y
+                    className="h-24 overflow-y-auto"
+                  >
+                    <ul>
+                      {genbankResults.map((result) => (
+                        <li key={result.description}>
+                          <button
+                            className="text-blue-400 hover:text-blue-700 mb-1 mt-1"
+                            onClick={() =>
+                              setGbUrl(
+                                `https://genbank-api.vercel.app/api/genbank/${result.description}`
+                              )
+                            }
+                          >
+                            {result.description}: {result.title}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-row justify-center mt-5 border-t border-gray-300 pt-5 text-center">
+            <div className="flex flex-col">
+              <h2 className="text-l">or select an example:</h2>
+              <ul>
+                <li>
+                  <button
+                    className="text-blue-400 hover:text-blue-700 mb-3 mt-3"
+                    onClick={() => setGbUrl("/sequence.gb")}
+                  >
+                    SARS-CoV-2 reference genome
+                  </button>
+                </li>
                 <li>
                   <button
                     className="text-blue-400 hover:text-blue-700 mb-3"
-                    onClick={
-
-                      example[1].startsWith("http") ? () => setGbUrl(example[1]) :
-                        () => loadFromGenbankId(example[1])}
+                    onClick={() => setGbUrl("/sequence2.gb")}
                   >
-                    {example[0]}
+                    <i>P. falciparum</i> chromosome 14
                   </button>
                 </li>
-              ))}
-            </ul>
+                {addlExamples.map((example) => (
+                  <li>
+                    <button
+                      className="text-blue-400 hover:text-blue-700 mb-3"
+                      onClick={
+                        example[1].startsWith("http")
+                          ? () => setGbUrl(example[1])
+                          : () => loadFromGenbankId(example[1])
+                      }
+                    >
+                      {example[0]}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-    )}
-  </>);
+      )}
+    </>
+  );
 };
 
-
-
-
-
-
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
index 1f03afe..9382b9a 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
diff --git a/src/components/SingleRow.jsx b/src/components/SingleRow.jsx
new file mode 100644
index 0000000..23aa555
--- /dev/null
+++ b/src/components/SingleRow.jsx
@@ -0,0 +1,683 @@
+import ColorHash from "color-hash";
+import { getReverseComplement, filterFeatures } from "../utils";
+var colorHash = new ColorHash({ lightness: [0.75, 0.9, 0.7, 0.8] });
+
+const getColor = (feature, product) => {
+  switch (feature.type) {
+    case "CDS":
+      switch (feature.name) {
+        case "S":
+          return "#ff7373";
+        case "nsp3":
+          return "#d3ffce";
+
+        case "leader":
+          return "#ff7f50";
+
+        case "nsp2":
+          return "#ddffdd";
+
+        case "nsp4":
+          return "#ff7373";
+
+        case "N":
+          return "#7fffd4";
+        case "E":
+          return "#ff7f50";
+        case "M":
+          return "#eeee88";
+        case "nsp12; RdRp":
+          return "#ff7f50";
+        case "nsp6":
+          return "#ee99ee";
+        case "nsp7":
+          return "#99ee99";
+
+        case "nsp8":
+          return "#ff7373";
+        case "nsp10":
+          return "#d3ffce";
+
+        case "nsp14":
+          return "#ff7f50";
+        case "nsp15":
+          return "#ddffdd";
+        case "nsp16":
+          return "#ffeeee";
+        case "nsp13":
+          return "#ff7f50";
+
+        default:
+          return colorHash.hex(feature.name + product + feature.type);
+      }
+    case "gene":
+      return "blue";
+    case "misc_feature":
+      return "green";
+    case "5'UTR":
+      return "orange";
+    case "3'UTR":
+      return "orange";
+    default:
+      return colorHash.hex(feature.name + product + feature.type);
+  }
+};
+
+const codonToAminoAcid = (codon) => {
+  switch (codon) {
+    case "TTT":
+    case "TTC":
+      return "F";
+    case "TTA":
+    case "TTG":
+    case "CTT":
+    case "CTC":
+    case "CTA":
+    case "CTG":
+      return "L";
+    case "ATT":
+    case "ATC":
+    case "ATA":
+      return "I";
+    case "ATG":
+      return "M";
+    case "GTT":
+    case "GTC":
+    case "GTA":
+    case "GTG":
+      return "V";
+    case "TCT":
+    case "TCC":
+    case "TCA":
+    case "TCG":
+    case "AGT":
+    case "AGC":
+      return "S";
+    case "CCT":
+    case "CCC":
+    case "CCA":
+    case "CCG":
+      return "P";
+    case "ACT":
+    case "ACC":
+    case "ACA":
+    case "ACG":
+      return "T";
+    case "GCT":
+    case "GCC":
+    case "GCA":
+    case "GCG":
+      return "A";
+    case "TAT":
+    case "TAC":
+      return "Y";
+    case "TAA":
+    case "TAG":
+    case "TGA":
+      return "*";
+    case "CAT":
+    case "CAC":
+      return "H";
+    case "CAA":
+    case "CAG":
+      return "Q";
+    case "AAT":
+    case "AAC":
+      return "N";
+    case "AAA":
+    case "AAG":
+      return "K";
+    case "GAT":
+    case "GAC":
+      return "D";
+    case "GAA":
+    case "GAG":
+      return "E";
+    case "TGT":
+    case "TGC":
+      return "C";
+    case "TGG":
+      return "W";
+    case "CGT":
+    case "CGC":
+    case "CGA":
+    case "CGG":
+    case "AGA":
+    case "AGG":
+      return "R";
+    case "GGT":
+    case "GGC":
+    case "GGA":
+    case "GGG":
+      return "G";
+    default:
+      return "X";
+  }
+};
+
+const SingleRow = ({
+  parsedSequence,
+  rowStart,
+  rowEnd,
+  setHoveredInfo,
+  rowId,
+  intSearchInput,
+  annotSearchInput,
+  zoomLevel,
+  whereMouseWentDown,
+  setWhereMouseWentDown,
+  whereMouseWentUp,
+  setWhereMouseWentUp,
+  whereMouseCurrentlyIs,
+  setWhereMouseCurrentlyIs,
+}) => {
+  const zoomFactor = 2 ** zoomLevel;
+  const sep = 10 * zoomFactor;
+
+  const fullSequence = parsedSequence.sequence;
+  const rowSequence = fullSequence.slice(rowStart, rowEnd);
+
+  const relevantFeatures = parsedSequence.features.filter(
+    (feature) =>
+      feature.type !== "source" &&
+      feature.type !== "gene" &&
+      feature.type !== "mRNA" &&
+      ((feature.start >= rowStart && feature.start <= rowEnd) ||
+        (feature.end >= rowStart && feature.end <= rowEnd) ||
+        (feature.start <= rowStart && feature.end >= rowEnd))
+  );
+
+  const searchFeatures = !annotSearchInput
+    ? []
+    : filterFeatures(relevantFeatures, annotSearchInput);
+
+  const isSelected =
+    (intSearchInput >= rowStart && intSearchInput <= rowEnd) ||
+    searchFeatures.length > 0;
+
+  if (rowStart == 0) {
+    //console.log(relevantFeatures);
+  }
+
+  const featureBlocks = relevantFeatures.map((feature, i) => {
+    let startPos2;
+    let endPos2;
+
+    if (feature.start < rowStart) {
+      startPos2 = 0;
+    } else {
+      startPos2 = feature.start - rowStart;
+    }
+
+    if (feature.end > rowEnd) {
+      endPos2 = rowEnd - rowStart;
+    } else {
+      endPos2 = feature.end - rowStart;
+    }
+
+    const locations = feature.locations
+      ? feature.locations
+      : [
+          {
+            start: feature.start,
+            end: feature.end,
+          },
+        ];
+
+    const blocks = locations
+      .filter(
+        (location) =>
+          (location.start >= rowStart && location.start <= rowEnd) ||
+          (location.end >= rowStart && location.end <= rowEnd) ||
+          (location.start <= rowStart && location.end >= rowEnd)
+      )
+      .map((location, j) => {
+        let startPos;
+        let endPos;
+        let startIsActual = true;
+
+        if (location.start < rowStart) {
+          startPos = 0;
+          startIsActual = false;
+        } else {
+          startPos = location.start - rowStart;
+        }
+        let endIsActual = true;
+        if (location.end > rowEnd) {
+          endPos = rowEnd - rowStart;
+          endIsActual = false;
+        } else {
+          endPos = location.end - rowStart;
+        }
+        return {
+          start: startPos,
+          end: endPos,
+          startIsActual: startIsActual,
+          endIsActual: endIsActual,
+        };
+      });
+
+    // positions in the translation
+    // for each location in this row: check if it is in any of the locations, if so, figure out which codon it is in
+    // and add it to the map
+
+    const seqLength = locations.reduce(
+      (acc, location) => acc + location.end - location.start + 1,
+      0
+    );
+
+    const codonMap = [];
+    if (
+      zoomLevel > -2 &&
+      (feature.type == "CDS") | (feature.type == "mat_peptide")
+    ) {
+      for (let j = rowStart; j < rowEnd; j++) {
+        let positionSoFar = 0;
+        for (let k = 0; k < locations.length; k++) {
+          if (j >= locations[k].start && j <= locations[k].end) {
+            const nucIndex = j;
+
+            const codonIndexInitial = Math.floor(
+              (j - (locations[k].start - positionSoFar)) / 3
+            );
+            const codonIndex =
+              feature.strand > 0
+                ? codonIndexInitial
+                : seqLength / 3 - codonIndexInitial - 1;
+            const frame = (j - (locations[k].start - positionSoFar)) % 3;
+            if (frame != 1) {
+              continue;
+            }
+
+            const middleIndex = nucIndex;
+            const middleChar = fullSequence.slice(middleIndex, middleIndex + 1);
+            const firstIndex =
+              nucIndex - locations[k].start > 0
+                ? nucIndex - 1
+                : locations[k - 1].end;
+            const firstChar = fullSequence.slice(firstIndex, firstIndex + 1);
+            const lastIndex =
+              nucIndex < locations[k].end
+                ? nucIndex + 1
+                : locations[k + 1].start;
+            const lastChar = fullSequence.slice(lastIndex, lastIndex + 1);
+            const codonSeq = firstChar + middleChar + lastChar;
+            //console.log(nucIndex, locations[k].start, firstChar, middleChar, lastChar);
+
+            const aminoAcid = codonToAminoAcid(
+              feature.strand > 0 ? codonSeq : getReverseComplement(codonSeq)
+            );
+            //const aminoAcid = forTranslation[codonIndex];
+
+            codonMap.push({
+              first: firstIndex - rowStart,
+              middle: nucIndex - rowStart,
+              last: lastIndex - rowStart,
+              aminoAcid: aminoAcid,
+              codonIndex: codonIndex,
+              gene: feature.name,
+            });
+          }
+          positionSoFar += locations[k].end - locations[k].start + 1;
+        }
+      }
+    }
+    //console.log(codonMap);
+
+    return {
+      start: startPos2,
+      end: endPos2,
+
+      blocks: blocks,
+      name: feature.name,
+      type: feature.type,
+      notes: feature.notes,
+      strand: feature.strand,
+      locations: locations,
+      codonMap: codonMap,
+      key: i,
+    };
+  });
+
+  const extraPadding = 25;
+
+  // Calculate dimensions and tick interval
+  const width = rowSequence.length * sep; // 10 pixels per character
+  let height = 70 + featureBlocks.length * 20;
+  // if rowStart is more than 5 digits, then we need more spacing
+  const spacing = rowStart > 10000 ? 60 : 40;
+  const approxNumTicks = Math.ceil(width / spacing); // One tick every 60 pixels
+  let tickInterval = Math.ceil(rowSequence.length / approxNumTicks);
+  const options = [
+    5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000,
+    200000, 500000, 1000000, 2000000, 5000000, 10000000,
+  ];
+  // find option just larger than tickInterval
+
+  tickInterval = options.find((option) => option >= tickInterval);
+  const modulus = rowStart % tickInterval;
+  const numTicks = Math.floor((rowEnd - rowStart) / tickInterval) + 1;
+
+  // Generate tick labels
+  const tickLabels = Array.from({ length: numTicks }, (_, i) => {
+    return (i + 1) * tickInterval + rowStart - modulus - 1;
+  });
+
+  // Generate ticks and labels
+  const ticks = tickLabels.map((label, i) => {
+    const x = ((label - rowStart) / (rowEnd - rowStart)) * width;
+    return (
+      <g key={i}>
+        <line x1={x} y1={0} x2={x} y2={10} stroke="black" />
+        <text
+          x={x}
+          y={20}
+          textAnchor="middle"
+          fontSize="10"
+          // bold
+        >
+          {label + 1}
+        </text>
+      </g>
+    );
+  });
+
+  // Generate sequence characters
+  let chars = null;
+
+  if (zoomLevel > -1) {
+    chars = rowSequence.split("").map((char, i) => {
+      const x = i * sep;
+      return (
+        <text
+          key={i}
+          x={x}
+          y={10}
+          textAnchor="middle"
+          fontSize={zoomLevel < -0.5 ? "10" : "12"}
+          fillOpacity={0.9}
+          onMouseEnter={() =>
+            setHoveredInfo({
+              label: `Nucleotide ${i + rowStart + 1}: ${char}`,
+            })
+          }
+          onMouseLeave={() => setHoveredInfo(null)}
+        >
+          {char}
+        </text>
+      );
+    });
+  }
+  const codonZoomThreshold = -2;
+
+  const featureBlocksSVG = featureBlocks.map((feature, i) => {
+    const x = feature.start * sep;
+
+    const width = (feature.end - feature.start) * sep;
+
+    const y = 7 + i * 20;
+    const extraFeat = 5 * zoomFactor;
+    const codonPad = 15 * zoomFactor;
+
+    const product = feature.notes ? feature.notes.product : "";
+    let betterName = feature.type == "mat_peptide" ? product : feature.name;
+
+    const altName = feature.type == "mat_peptide" ? feature.name : product;
+    if (betterName == "Untitled Feature") betterName = feature.type;
+
+    return (
+      <g key={i}>
+        <line
+          x1={x}
+          y1={y + 5}
+          x2={x + width}
+          y2={y + 5}
+          stroke={getColor(feature, product)}
+          // width 2
+          strokeWidth={1.5}
+        />
+        {feature.blocks.map((block, j) => (
+          <rect
+            x={block.start * sep - extraFeat}
+            y={y}
+            width={(block.end - block.start) * sep + extraFeat * 2}
+            height={10}
+            fill={getColor(feature, product)}
+            onMouseEnter={() => {
+              if (zoomLevel < codonZoomThreshold)
+                setHoveredInfo({
+                  label: `${feature.name}: ${feature.type}`,
+                  product: altName,
+                  locusTag:
+                    feature.notes && feature.notes.locus_tag
+                      ? feature.notes.locus_tag
+                      : null,
+                });
+            }}
+            onMouseLeave={() => {
+              if (zoomLevel < codonZoomThreshold) setHoveredInfo(null);
+            }}
+          />
+        ))}
+
+        <text x={x - 10} y={y} textAnchor="left" fontSize="10">
+          {betterName}
+        </text>
+        {feature.codonMap.map((codon, j) => {
+          return (
+            <>
+              {zoomLevel > codonZoomThreshold && (
+                <text
+                  key={j}
+                  x={codon.middle * sep}
+                  y={y + 9}
+                  textAnchor="middle"
+                  fontSize="10"
+                  onMouseOver={() =>
+                    setHoveredInfo({
+                      label: `${betterName}: ${codon.aminoAcid}${
+                        codon.codonIndex + 1
+                      }`,
+                      product: altName,
+                      locusTag:
+                        feature.notes && feature.notes.locus_tag
+                          ? feature.notes.locus_tag
+                          : null,
+                    })
+                  }
+                  onMouseLeave={() => setHoveredInfo(null)}
+                  fillOpacity={0.75}
+                >
+                  {codon.aminoAcid}
+                </text>
+              )}
+              {codon.middle > 2 && zoomLevel > -0.5 && (
+                <text
+                  key={"bb" + j}
+                  x={codon.middle * sep}
+                  y={y - 1}
+                  textAnchor="middle"
+                  fontSize="7"
+                  fillOpacity={0.4}
+                  //fontWeight="bold"
+                >
+                  {codon.codonIndex + 1}
+                </text>
+              )}
+            </>
+          );
+        })}
+        {zoomLevel > -2 &&
+          feature.codonMap.map((codon, j) => {
+            // create a line either side of the codon
+
+            return (
+              <g key={j}>
+                {codon.middle > 1 && codon.middle < 3 && (
+                  <line
+                    x1={codon.middle * sep - codonPad}
+                    y1={y}
+                    x2={codon.middle * sep - codonPad}
+                    y2={y + 10}
+                    stroke="black"
+                    strokeOpacity={0.1}
+                  />
+                )}
+                <line
+                  x1={codon.middle * sep + codonPad}
+                  y1={y}
+                  x2={codon.middle * sep + codonPad}
+                  y2={y + 10}
+                  stroke="black"
+                  strokeOpacity={0.1}
+                />
+              </g>
+            );
+          })}
+      </g>
+    );
+  });
+
+  // create a tick specifically at searchInput
+  let searchTick = null;
+  if (
+    intSearchInput != null &&
+    intSearchInput >= rowStart &&
+    intSearchInput <= rowEnd
+  ) {
+    searchTick = (
+      <g key={-1}>
+        <line
+          x1={(intSearchInput - rowStart) * sep}
+          y1={0}
+          x2={(intSearchInput - rowStart) * sep}
+          y2={10}
+          stroke="red"
+        />
+        {
+          //rect behind tick
+        }
+        <rect
+          x={(intSearchInput - rowStart) * sep - 30}
+          y={0}
+          width={60}
+          height={30}
+          fill="#ffffee"
+        />
+        <text
+          x={(intSearchInput - rowStart) * sep}
+          y={20}
+          textAnchor="middle"
+          fontSize="10"
+          fill="red"
+        >
+          {intSearchInput + 1}
+        </text>
+      </g>
+    );
+  }
+
+  let selectionRect = null;
+  let selTempStart = null;
+  let selTempEnd = null;
+  //console.log(whereMouseWentDown, whereMouseWentUp, whereMouseCurrentlyIs);
+
+  if (whereMouseWentDown != null) {
+    const alternative =
+      whereMouseWentUp != null ? whereMouseWentUp : whereMouseCurrentlyIs;
+
+    const rectStart = Math.min(whereMouseWentDown, alternative);
+    const rectEnd = Math.max(whereMouseWentDown, alternative);
+    //console.log(rectStart, rectEnd);
+    selectionRect = (
+      <rect
+        x={extraPadding + (rectStart - rowStart - 0.5) * sep}
+        y={0}
+        width={(rectEnd - rectStart) * sep}
+        height={height}
+        fill="#bbbbff"
+        fillOpacity={0.5}
+      />
+    );
+  }
+
+  // Concatenate sequence characters and ticks with SVG
+  return (
+    <div
+      style={{
+        position: "relative",
+        height: `${height}px`,
+        ...(isSelected ? { backgroundColor: "#ffffee" } : {}),
+      }}
+      onMouseDown={(e) => {
+        // figure out which nucleotide was clicked
+        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
+        const nucleotide =
+          Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
+        setWhereMouseWentDown(nucleotide);
+        setWhereMouseWentUp(null);
+        e.preventDefault();
+      }}
+      onMouseUp={(e) => {
+        // figure out which nucleotide was clicked
+        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
+        const nucleotide =
+          Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
+        if (Math.abs(nucleotide - whereMouseWentDown) <= 1) {
+          // if the mouse didn't move, then this is a click
+
+          setWhereMouseWentDown(null);
+          setWhereMouseWentUp(null);
+        } else {
+          // otherwise, this is a drag
+          setWhereMouseWentUp(nucleotide);
+          e.preventDefault();
+        }
+      }}
+      onMouseMove={(e) => {
+        // figure out which nucleotide was clicked
+        const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
+        const nucleotide =
+          Math.floor((x - extraPadding) / sep + 0.5) + rowStart;
+        setWhereMouseCurrentlyIs(nucleotide);
+      }}
+      id={`row-${rowId}`}
+    >
+      <svg
+        width={width + 40}
+        height={height - 20}
+        style={{ position: "absolute", top: 0, left: 0 }}
+      >
+        {selectionRect}
+        <g fillOpacity={0.7}>
+          <g
+            transform={`translate(${extraPadding}, ${height - 40})`}
+            style={{ zIndex: -5 }}
+          >
+            {ticks}
+          </g>
+          {searchTick && (
+            <g transform={`translate(${extraPadding}, ${height - 40})`}>
+              {searchTick}
+            </g>
+          )}
+          {
+            // line above ticks
+          }
+          <line
+            x1={0 + extraPadding}
+            y1={height - 40}
+            x2={width + extraPadding + 0}
+            y2={height - 40}
+            stroke="black"
+          />
+        </g>
+
+        <g transform={`translate(${extraPadding}, ${height - 55})`}>{chars}</g>
+        <g transform={`translate(${extraPadding}, 5)`}>{featureBlocksSVG}</g>
+      </svg>
+    </div>
+  );
+};
+
+export default SingleRow;
diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx
new file mode 100644
index 0000000..83ef73a
--- /dev/null
+++ b/src/components/Tooltip.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+
+const Tooltip = ({ hoveredInfo }) => {
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+
+  // position to right of mouse unless x is too close to right edge
+  const left_or_right =
+    tooltipPosition.x > window.innerWidth - 200
+      ? {
+          right: `${window.innerWidth - tooltipPosition.x + 10}px`,
+        }
+      : {
+          left: `${tooltipPosition.x + 10}px`,
+        };
+
+  const tooltipStyles = {
+    position: "absolute",
+    top: `${tooltipPosition.y + 10}px`,
+    ...left_or_right,
+    visibility: hoveredInfo ? "visible" : "hidden",
+
+    zIndex: 1000,
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      setTooltipPosition({ x: e.pageX, y: e.pageY });
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return (
+    <div style={tooltipStyles} className="text-sm bg-gray-100 p-2 rounded">
+      {hoveredInfo && <span>{hoveredInfo.label}</span>}
+      {hoveredInfo && hoveredInfo.product && (
+        <div className="text-xs">{hoveredInfo.product}</div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;
diff --git a/src/hooks.js b/src/hooks.js
new file mode 100644
index 0000000..005739f
--- /dev/null
+++ b/src/hooks.js
@@ -0,0 +1,50 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import { useState, useEffect, useCallback } from "react";
+import qs from "qs";
+
+export function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+  return debouncedValue;
+}
+
+export const useQueryState = (query) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const setQuery = useCallback(
+    (value) => {
+      const existingQueries = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+      });
+
+      const queryString = qs.stringify(
+        { ...existingQueries, [query]: value },
+        { skipNulls: true }
+      );
+
+      navigate(`${location.pathname}?${queryString}`);
+    },
+    [navigate, location, query]
+  );
+
+  return [
+    qs.parse(location.search, { ignoreQueryPrefix: true })[query],
+    setQuery,
+  ];
+};
diff --git a/src/index.css b/src/index.css
index ec2585e..4a1df4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/index.js b/src/index.js
index d740e98..5b1d783 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter as Router } from "react-router-dom";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <Router>
diff --git a/src/logo.svg b/src/logo.svg
index 9dfc1c0..7169476 100644
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3a..9ecd33f 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,6 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);
diff --git a/src/setupTests.js b/src/setupTests.js
index 8f2609b..1dd407a 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..5b61073
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,31 @@
+const baseToComplement = { A: "T", T: "A", G: "C", C: "G", N: "N", "-": "-" };
+
+export const getReverseComplement = (sequence) => {
+  return sequence
+    .split("")
+    .map((base) => baseToComplement[base])
+    .reverse()
+    .join("");
+};
+
+export const filterFeatures = (features, search) => {
+  return features.filter((feature) => {
+    // if feature name contains search string
+    if (feature.name.toLowerCase().includes(search.toLowerCase())) {
+      return true;
+    }
+    const product =
+      feature.notes && feature.notes.product ? feature.notes.product[0] : "";
+    if (product.toLowerCase().includes(search.toLowerCase())) {
+      return true;
+    }
+    const locus_tag =
+      feature.notes && feature.notes.locus_tag
+        ? feature.notes.locus_tag[0]
+        : "";
+    if (locus_tag.toLowerCase().includes(search.toLowerCase())) {
+      return true;
+    }
+    return false;
+  });
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index a0cebb6..19973dd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,4 +5,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-}
\ No newline at end of file
+};