From 03dafb573460314d38a709ddb77834e39701a65f Mon Sep 17 00:00:00 2001
From: mgs-sails <mahfouzshehu@gmail.com>
Date: Thu, 3 Oct 2024 14:25:03 +0100
Subject: [PATCH] WIP, localised branchwater search interface

---
 src/pages/Branchwater/Index.tsx |  90 +++++++++----
 src/pages/Home/index.tsx        |  11 +-
 src/pages/Search/Index.tsx      |   8 +-
 temp.html                       | 228 ++++++++++++++++++++++++++++++++
 4 files changed, 301 insertions(+), 36 deletions(-)
 create mode 100644 temp.html

diff --git a/src/pages/Branchwater/Index.tsx b/src/pages/Branchwater/Index.tsx
index 0613ce99..1cbe832f 100644
--- a/src/pages/Branchwater/Index.tsx
+++ b/src/pages/Branchwater/Index.tsx
@@ -71,6 +71,7 @@ const Branchwater = () => {
   const ref = useRef();
   const [showMgnifySourmash, setShowMgnifySourmash] = useState(false);
   const [uploadedFile, setUploadedFile] = useState(null);
+  const [targetDatabase, setTargetDatabase] = useState('MAGs');
 
   const handleFileUpload = (event) => {
     const file = event.target.files[0];
@@ -82,13 +83,15 @@ const Branchwater = () => {
     // }
   };
 
-  const handleSearchClick = () => {
+  const handleSearchClick = (event) => {
+    event.preventDefault();
     setShowMgnifySourmash(true);
     // if (uploadedFile) {
     //   setShowMgnifySourmash(true);
     // } else {
     //   alert('Please upload a FASTA file first.');
     // }
+    console.log(`Searching in ${targetDatabase} database`);
   };
 
   const handleClearClick = () => {
@@ -104,34 +107,63 @@ const Branchwater = () => {
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          marginBottom: '1em',
-        }}
-      >
-        <input id="file-upload" type="file" onChange={handleFileUpload} />
-        <button
-          className="vf-button vf-button--sm vf-button--primary mg-button"
-          onClick={handleSearchClick}
-        >
-          Search across Metagenomes
-        </button>
-        <button
-          className="vf-button vf-button--sm vf-button--primary mg-button"
-          onClick={handleSearchClick}
-        >
-          Search MAG Catalogues
-        </button>
-        <button
-          id="clear-button-mag"
-          type="button"
-          className="vf-button vf-button--sm vf-button--tertiary"
-          onClick={handleClearClick}
-        >
-          Clear
-        </button>
+      <div>
+        <form className="vf-stack vf-stack--400">
+          <div className="vf-form__item vf-stack">
+            <input id="file-upload" type="file" onChange={handleFileUpload} />
+
+            <fieldset className="vf-form__fieldset vf-stack vf-stack--400">
+              <legend className="vf-form__legend">
+                Select target database
+              </legend>
+
+              <div className="vf-form__item vf-form__item--radio">
+                <input
+                  type="radio"
+                  name="targetDatabase"
+                  value="MAGs"
+                  id="1"
+                  className="vf-form__radio"
+                  checked={targetDatabase === 'MAGs'}
+                  onChange={() => setTargetDatabase('MAGs')}
+                />
+                <label htmlFor="1" className="vf-form__label">
+                  MAGs
+                </label>
+              </div>
+
+              <div className="vf-form__item vf-form__item--radio">
+                <input
+                  type="radio"
+                  name="targetDatabase"
+                  value="Metagenomes"
+                  id="2"
+                  className="vf-form__radio"
+                  checked={targetDatabase === 'Metagenomes'}
+                  onChange={() => setTargetDatabase('Metagenomes')}
+                />
+                <label htmlFor="2" className="vf-form__label">
+                  Metagenomes
+                </label>
+              </div>
+
+              <button
+                className="vf-button vf-button--sm vf-button--primary mg-button"
+                onClick={handleSearchClick}
+              >
+                Search
+              </button>
+              <button
+                id="clear-button-mag"
+                type="button"
+                className="vf-button vf-button--sm vf-button--tertiary"
+                onClick={handleClearClick}
+              >
+                Clear
+              </button>
+            </fieldset>
+          </div>
+        </form>
       </div>
 
       {showMgnifySourmash && (
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index abc52bea..4814b68b 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -5,6 +5,7 @@ import BlogExcerpts from 'components/Home/BlogExcerpts';
 import ExtLink from 'components/UI/ExtLink';
 import Publications, { MainPublication } from 'components/Publications';
 import './style.css';
+import SearchPage from 'pages/Search';
 
 const HomePage: React.FC = () => {
   return (
@@ -26,10 +27,12 @@ const HomePage: React.FC = () => {
         </div>
       </div>
       <div />
-      <div className="vf-grid vf-grid__col-2">
-        <SearchBy />
-        <Request />
-      </div>
+      <SearchPage />
+      {/*<div className="vf-grid vf-grid__col-2">*/}
+      {/*  /!*<SearchBy />*!/*/}
+      {/*  <SearchPage />*/}
+      {/*  <Request />*/}
+      {/*</div>*/}
       <hr />
       <BlogExcerpts />
       <h2>Latest publications</h2>
diff --git a/src/pages/Search/Index.tsx b/src/pages/Search/Index.tsx
index 5a03269e..88e8c491 100644
--- a/src/pages/Search/Index.tsx
+++ b/src/pages/Search/Index.tsx
@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import Branchwater from 'pages/Branchwater';
+import Cobs from 'components/Genomes/Cobs';
 
 const SearchPage: React.FC = () => {
   // State to manage the active tab
@@ -90,12 +92,12 @@ const SearchPage: React.FC = () => {
           <h2>Search by Nucleotide</h2>
           <details className="vf-details">
             <summary className="vf-details--summary">Search by MAG</summary>
-            Something small enough to escape casual notice.
+            <Branchwater />
           </details>
 
           <details className="vf-details">
-            <summary className="vf-details--summary">Sarch by Gene</summary>
-            Something small enough to escape casual notice.
+            <summary className="vf-details--summary">Search by Gene</summary>
+            <Cobs />
           </details>
         </section>
       </div>
diff --git a/temp.html b/temp.html
new file mode 100644
index 00000000..029e59cb
--- /dev/null
+++ b/temp.html
@@ -0,0 +1,228 @@
+{% include 'header.html' %}
+
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Tabulator CSS file options: https://cdnjs.com/libraries/tabulator-->
+  <link
+    crossorigin="anonymous"
+    href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/css/tabulator_bootstrap5.min.css"
+    integrity="sha512-E3brrBS070QzILPd7448M+21NlCrA3fht9RmFvS9GIKo443nGQRF3tVOuK7YcY1gzPQsaks2cP/Ivp/yhoJCNA=="
+    referrerpolicy="no-referrer"
+    rel="stylesheet"
+  />
+
+  <script
+    defer="defer"
+    src="static/mgnify-component/mgnify-sourmash-component.js"
+  ></script>
+
+  <!-- Custom scripts and functions -->
+  <script src="static/dashboard.js"></script>
+  <script src="static/ex_sig.js"></script>
+
+  <!-- Tabulator and plotly libraries -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/js/tabulator.min.js"></script>
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body class="vf-body">
+<div>
+  <h1 class="vf-text vf-text-heading--1">Try out the search!</h1>
+  <p class="vf-text">
+    Submit one of the genomes below to examine its potential SRA metagenome
+    matches and explore the default metadata options.
+    <br>
+    <strong>Refresh the page to try a different genome.</strong>
+  </p>
+</div>
+<hr style="border-width: 3px; border-color: black" />
+
+<!-- Create form -->
+<style>
+    .form-row {
+        display: flex;
+        align-items: center;
+    }
+
+    .form-row input[type="radio"] {
+        margin-right: 20px;
+    }
+</style>
+<div id="form-container"></div>
+<form class="vf-stack vf-stack--400" id="form">
+
+  <fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
+    <legend class="vf-form__legend">Which do you like?</legend>
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Ralso" name="options" type="radio" value="option1">
+      <label class="vf-form__label" for="Ralso">
+        <em>Ralstonia solanacearum</em>: a soilborne bacterial pathogen that
+        causes bacterial wilt in several crops.
+        <a class="vf-link" href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/305/">RefSeq:GCF_021117135.1</a>
+      </label>
+    </div>
+
+
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Sal" name="options" type="radio" value="option2" />
+      <label class="vf-form__label" for="Sal">
+        <em>Salmonella enterica</em> subsp. <em>enterica</em>: a widespread
+        bacterial pathogen that causes salmonellosis in humans. (<a
+        href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/59201/"
+      >RefSeq:GCF_000006945.2</a
+      >)
+      </label>
+    </div>
+
+
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Promar" name="options" type="radio" value="option3" />
+      <label class="vf-form__label" for="Promar">
+        <em>Prochlorococcus marinus</em>: a widespread and abundant marine
+        cyanobacteria. (<a
+        href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/1219/"
+      >RefSeq:GCF_000015665.1</a
+      >)
+      </label>
+    </div>
+
+
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Canal" name="options" type="radio" value="option4" />
+      <label class="vf-form__label" for="Canal">
+        <em>Candida albicans</em>: a fungi common in the human gut and other parts of the body. It is an opportunistic
+        pathogen and causes infection under certain conditions. <a
+        class="vf-link" href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/5476/">RefSeq:GCF_000182965.3</a>)
+      </label>
+    </div>
+
+
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Aspsyd" name="options" type="radio" value="option5" />
+      <label class="vf-form__label" for="Aspsyd">
+        <em>Aspergillus sydowii </em>: a fungal pathogen that can cause
+        disease in humans and sea fan corals. (<a
+        href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/75750/"
+      >RefSeq:GCF_001890705.1</a
+      >)
+      </label>
+    </div>
+
+    <div class="vf-form__item vf-form__item--radio">
+      <input class="vf-form__radio" id="Pelagi" name="options" type="radio" value="option6" />
+      <label class="vf-form__label" for="Pelagi">
+        <em>Candidatus Pelagibacter ubique </em>: ubiquitous marine bacterium
+        SAR11, strain HTCC1062. (<a
+        href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/335992/"
+      >RefSeq:GCF_000012345.1</a
+      >)
+      </label>
+    </div>
+  </fieldset>
+  <button class="vf-button vf-button--primary" id="myButton" type="submit">
+    Submit
+  </button>
+</form>
+
+<!-- Create container for dashboard -->
+<div id="dashboard" style="margin: 30px"></div>
+
+<script>
+  //Once data submitted, add notification and send data to flask app
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    document.querySelector('#myButton').disabled = true;
+    // add disabled class as well
+    document.querySelector('#myButton').classList.add('vf-button--disabled');
+    // Create a new <nav> element
+    const navElement = document.createElement('nav');
+    navElement.classList.add(
+      'navbar',
+      'navbar-expand-lg',
+      'navbar-light',
+      'bg-light',
+    );
+    navElement.style.textAlign = 'center'; // Add the text-align style
+
+    // Create a new <p> element and add it to the <nav> element
+    const paragraphElement = document.createElement('h3');
+    paragraphElement.contentEditable = true; // Make the text editable
+    paragraphElement.textContent =
+      'Do not navigate from page. The query may take up to 5 minutes!'; // Set the initial text content
+    navElement.appendChild(paragraphElement);
+    // Add an event listener to the <p> element to handle text changes
+    paragraphElement.addEventListener('input', (event) => {
+      console.log(`New text: ${event.target.textContent}`);
+    });
+    // Add the <nav> element to the DOM
+    dashboard.appendChild(navElement);
+
+    //select signatures from 'ex_sig.js' based on form
+    const selectedOption = form.querySelector(
+      'input[name=\'options\']:checked',
+    );
+    let formdata;
+    if (selectedOption.id === 'Ralso') {
+      formdata = Ralso_sig;
+    } else if (selectedOption.id === 'Sal') {
+      formdata = Sal_sig;
+    } else if (selectedOption.id === 'Promar') {
+      formdata = Promar_sig;
+    } else if (selectedOption.id === 'Canal') {
+      formdata = Canal_sig;
+    } else if (selectedOption.id === 'Aspsyd') {
+      formdata = Aspsyd_sig;
+    } else if (selectedOption.id == 'Pelagi') {
+      formdata = Pelagi_sig;
+    }
+
+    //Do fetch request to proper route and create dashboard
+    fetch('/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formdata),
+    })
+      .then((response) => response.json())
+      .then((jsonData) =>
+        createdashboard(jsonData, paragraphElement, navElement),
+      )
+      .catch((error) => {
+        console.error('Error sending data to Flask server:', error);
+      });
+  });
+</script>
+
+<p class="vf-text">
+  This example search allows you to try out the
+  <a class="vf-link" href="/home"><b>default search</b></a
+  >, which rapidly searches over 700,000 metagenomes deposited in NCBI's
+  <a class="vf-link" href="https://www.ncbi.nlm.nih.gov/sra/"
+  >sequence read archive (SRA)</a
+  >
+  and bypasses additional steps for metadata collation. Search typically
+  takes less than 5 minutes. Default results return SRA metagenomes with
+  >10% containment of the query genome presented in a table, map, and
+  summary plots for selected high-interest metadata. If you'd like to have
+  greater control over the included metadata, an
+  <a class="vf-link" href="/advanced">advanced search</a> is available. Metadata selection
+  does not change the datasets that are searched; it only impacts which
+  metadata are included in the table and plots. Please note that
+  SRA run accessions vary greatly in which metadata categories have
+  information available. Further details regarding the curated metadata
+  can be found on the <a class="vf-link" href="/about">about page</a>.
+</p>
+<!-- Script for tooltips -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+  var tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+  );
+  var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+</script>
+</body>
+</html>
+{% include 'footer.html' %}