From 58918efbcf09e1865372f5b4a447ed7a9d9ab209 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Fri, 28 Jul 2023 21:52:10 +0100
Subject: [PATCH 1/2] antisense

---
 package.json                 |  1 +
 src/App.js                   | 56 ++++++++++++++++++++++++++++++++----
 src/components/SingleRow.jsx | 47 +++++++++++++++++++++++++++---
 yarn.lock                    | 12 ++++++++
 4 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b1c2290..d955fc9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^1.7.16",
     "@tanstack/react-virtual": "^3.0.0-beta.48",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
diff --git a/src/App.js b/src/App.js
index 53c9651..da81ac5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import React, {
 } from "react";
 import "rc-slider/assets/index.css";
 import "./App.css";
+import { Dialog } from "@headlessui/react";
 
 import ClipLoader from "react-spinners/ClipLoader";
 import { genbankToJson } from "bio-parsers";
@@ -17,6 +18,8 @@ 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";
+// settings icon
+import { MdSettings } from "react-icons/md";
 import { GiDna1 } from "react-icons/gi";
 import {BsArrowRightCircleFill, BsArrowLeftCircleFill} from "react-icons/bs";
 import { ToastContainer, toast } from "react-toastify";
@@ -156,10 +159,13 @@ function SearchPanel({
   );
 }
 
-const ConfigPanel = ({ zoomLevel, setZoomLevel }) => {
+const ConfigPanel = ({ zoomLevel, setZoomLevel, configModalOpen, setConfigModalOpen }) => {
   // zoom slider
   return (
     <>
+    <button className="inline-block mr-4 text-gray-400" onClick={() => setConfigModalOpen(true)}>
+      <MdSettings className="inline-block" />
+    </button>
       <button
         className="inline-block"
         onClick={() => setZoomLevel((x) => x - 0.1)}
@@ -173,7 +179,7 @@ const ConfigPanel = ({ zoomLevel, setZoomLevel }) => {
         max={1}
         step={0.001}
         style={{ width: 150 }}
-        className="inline-block mx-5"
+        className="inline-block mx-3"
       />
       <button
         className="inline-block"
@@ -378,6 +384,8 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
   }, [centeredNucleotide, zoomLevel]);
 
   const [lastSearch, setLastSearch] = useState(null);
+  const [enableRC, setEnableRC] = useState(false);
+  const [configModalOpen, setConfigModalOpen] = useState(false);
 
   useEffect(() => {
     if (!intSearchInput) return;
@@ -470,7 +478,43 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
     );
   }
 
-  return (
+  return (<>
+  <Dialog
+  open={configModalOpen}
+  onClose={() => setConfigModalOpen(false)}
+  className="fixed z-50 max-w-2xl px-4 py-6 bg-white rounded-lg shadow-xl sm:px-6 sm:py-8 sm:pb-4 sm:pt-6"
+>
+
+  <Dialog.Panel
+    className="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity"
+    style={{ zIndex: 1000 }}
+  >
+    <div className="bg-white rounded-lg px-4 py-4 sm:px-6 sm:py-6 shadow-md max-w-md mx-auto">
+      <Dialog.Title
+        as="h3"
+        className="text-lg font-medium leading-6 text-gray-900 mb-4"
+      >
+      Settings
+      </Dialog.Title>
+
+      <Dialog.Description
+        className="text-base text-gray-600 mb-4"
+      >
+        Customize appearance
+      </Dialog.Description>
+
+      <p className="text-sm text-gray-500">
+      <label>
+        <input type="checkbox" checked={enableRC} onChange={(e) => setEnableRC(e.target.checked)} /> 
+        <span className="ml-2">Display antisense strand</span>
+        </label>
+      </p>
+
+    </div>
+  </Dialog.Panel>
+</Dialog>
+
+
     <div className="w-full p-5">
       <ToastContainer />
       {true && (
@@ -491,8 +535,8 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
         </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} />
+      <div className="fixed bottom-0 right-0 z-10 w-72 h-12 p-2 rounded shadow bg-white">
+        <ConfigPanel zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} configModalOpen={configModalOpen} setConfigModalOpen={setConfigModalOpen} />
       </div>
 
       <div className="w-full">
@@ -571,6 +615,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
                           setWhereMouseCurrentlyIs={setWhereMouseCurrentlyIs}
                           sequenceHits={sequenceHits}
                           curSeqHitIndex={curSeqHitIndex}
+                          enableRC={enableRC}
                         />
                       </div>
                     );
@@ -582,6 +627,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
         )}
       </div>
     </div>
+    </>
   );
 }
 
diff --git a/src/components/SingleRow.jsx b/src/components/SingleRow.jsx
index 8bfd3c4..958f838 100644
--- a/src/components/SingleRow.jsx
+++ b/src/components/SingleRow.jsx
@@ -171,7 +171,8 @@ const SingleRow = ({
   whereMouseCurrentlyIs,
   setWhereMouseCurrentlyIs,
   sequenceHits,
-  curSeqHitIndex
+  curSeqHitIndex,
+  enableRC
 }) => {
   const zoomFactor = 2 ** zoomLevel;
   const sep = 10 * zoomFactor;
@@ -386,6 +387,7 @@ const SingleRow = ({
 
   // Generate sequence characters
   let chars = null;
+  let chars2 = null;
 
   if (zoomLevel > -1) {
     chars = rowSequence.split("").map((char, i) => {
@@ -410,6 +412,34 @@ const SingleRow = ({
       );
     });
   }
+  const rc = {"A": "T", "T": "A", "C": "G", "G": "C", "N": "N"};
+  if (//window.RC &&
+   zoomLevel > -1) {
+    // Generate reverse complement sequence characters
+    chars2 = 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)}
+        >
+          {rc[char]}
+        </text>
+      );
+    });
+  }
+
+
   const codonZoomThreshold = -2;
 
   const featureBlocksSVG = featureBlocks.map((feature, i) => {
@@ -682,7 +712,7 @@ const SingleRow = ({
     >
       <svg
         width={width + 40}
-        height={height - 20}
+        height={height - 20 + (enableRC ? 20 : 0)}
         style={{ position: "absolute", top: 0, left: 0 }}
       >
         {selectionRect}
@@ -690,6 +720,8 @@ const SingleRow = ({
           {sequenceHitRects}
         </g>
         <g fillOpacity={0.7}>
+        <g transform={enableRC ? `translate(0,20)` : ""}>
+        
           <g
             transform={`translate(${extraPadding}, ${height - 40})`}
             style={{ zIndex: -5 }}
@@ -704,16 +736,23 @@ const SingleRow = ({
           {
             // line above ticks
           }
-          <line
+          
+        </g>
+        </g>
+        <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>
+        
+        {enableRC &&
+          <g transform={`translate(${extraPadding}, ${height - 55 + 19})`}>{chars2}</g>
+
+        }
         <g transform={`translate(${extraPadding}, 5)`}>{featureBlocksSVG}</g>
        
       </svg>
diff --git a/yarn.lock b/yarn.lock
index aff83ac..8b970ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1225,6 +1225,13 @@
   dependencies:
     stream-browserify "^3.0.0"
 
+"@headlessui/react@^1.7.16":
+  version "1.7.16"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.16.tgz#9c458c9c4dbb708258c9e8da3fe5363f915f7b11"
+  integrity sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==
+  dependencies:
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -3145,6 +3152,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"

From 5ab198fb744f2a771647575d62960bcd532533b9 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Fri, 28 Jul 2023 21:53:50 +0100
Subject: [PATCH 2/2] update

---
 src/App.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App.js b/src/App.js
index da81ac5..59af245 100644
--- a/src/App.js
+++ b/src/App.js
@@ -510,6 +510,15 @@ function GensploreView({ genbankString, searchInput, setSearchInput }) {
         </label>
       </p>
 
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          className="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-transparent rounded-md hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
+          onClick={() => setConfigModalOpen(false)}
+        >
+          Close
+        </button>
+        </div>
     </div>
   </Dialog.Panel>
 </Dialog>