Merge branch 'full-text-search' into 'main'

Full text search implementation

See merge request !15

src/components/Loading.css

@@ -8,8 +8,8 @@
 }
 
 .loading-gif {
-  width: 150px; /* Adjust the size as needed */
-  height: 150px; /* Adjust the size as needed */
+  width: 500px; /* Adjust the size as needed */
+  height: 500px; /* Adjust the size as needed */
 }
 
 .loading-container p {

src/components/Loading.jsx

@@ -5,11 +5,11 @@ const Loading = () => {
   return (
     <div className="loading-container">
       <img
-        src="https://static.igem.wiki/teams/5125/small-bouncing-coraline.gif"
+        src="https://static.igem.wiki/teams/5125/loading.gif"
         alt="Loading..."
         className="loading-gif"
       />
-      <p>Loading...</p>
+      {/* <p>Loading...</p> */}
     </div>
   );
 };

src/components/Navbar.jsx

@@ -4,6 +4,7 @@ import Pages from "../pages";
 import "./Navbar.css";
 import { motion, AnimatePresence } from "framer-motion";
 import SpringScroll from "./SpringScroll";
+import Search from "../components/Search";
 
 export function Navbar() {
   // give me a useState variable that is an empty string
@@ -191,6 +192,7 @@ export function Navbar() {
           </Link>
         </div>
         <ul className="navbar-nav">{pages}</ul>
+        <Search />
       </nav>
       <SpringScroll />
     </div>

src/components/Search.css

+.search {
+  min-width: 320px;
+}
+.search .search-icon,
+.search .close-icon {
+  height: 25px;
+  width: 25px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+.search .search-icon {
+  margin-left: 245px;
+}
+
+.search .search-bar {
+  margin-right: 20px;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0);
+  border-bottom: 1px solid var(--dark-blue);
+  outline: 0;
+  color: var(--dark-blue);
+  font: var(--primary-font);
+}
+.search .dropdown {
+  position: absolute;
+  min-width: 250px;
+  min-height: 100px;
+  overflow: auto;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  top: 90px;
+  right: 67px;
+  /* padding: 10px; */
+  border-radius: 10px;
+  background-color: var(--light-blue);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}

src/components/Search.jsx

+// src/components/Search.js
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import pagesData from "../fullTextSearch";
+import "./Search.css";
+
+const Search = ({ pages = pagesData }) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [searchButton, setSearchButton] = useState(true);
+  const navigate = useNavigate();
+
+  // If required we can later use a fuzzy matching algorithm like Levenshtein distance
+  useEffect(() => {
+    const trimmedQuery = query.trim().replace(/\s+/g, " ");
+    if (trimmedQuery.length >= 3) {
+      const queryWords = trimmedQuery.toLowerCase().split(" ");
+      const searchResults = pages
+        .map((page) => {
+          const contentLower = page.content.toLowerCase();
+          const count = queryWords.reduce((acc, word) => {
+            const wordCount = (contentLower.match(new RegExp(word, "g")) || [])
+              .length;
+            return acc + wordCount;
+          }, 0);
+          return { ...page, count };
+        })
+        .filter((page) => page.count > 0)
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 5);
+      setResults(searchResults);
+    } else {
+      setResults([]);
+    }
+  }, [query, pages]);
+
+  const handleResultClick = (page) => {
+    navigate(page); // This navigates to the specified page using react-router-dom
+  };
+
+  return searchButton ? (
+    // JSX for when searchButton is true
+    <div className="search">
+      <img
+        className="search-icon"
+        src="https://static.igem.wiki/teams/5125/search.png"
+        onClick={() => setSearchButton(false)}
+      ></img>
+    </div>
+  ) : (
+    // JSX for when searchButton is falses
+    <div className="search">
+      <input
+        className="search-bar"
+        type="text"
+        placeholder="Ask Coraline :)"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+
+      <img
+        className="close-icon"
+        src="https://static.igem.wiki/teams/5125/close.png"
+        onClick={() => setSearchButton(true)}
+      />
+      <div className="dropdown">
+        Check out:
+        <ul>
+          {results.map((result, index) => (
+            <li key={index} onClick={() => handleResultClick(result.page)}>
+              {result.title} &rarr;
+              {/* puts an arrow */}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

src/fullTextSearch.js

+// import { Description } from "./contents/index";
+const pagesData = [
+  {
+    title: "Description",
+    page: "/description",
+    content: `
+    "# Project Background Coral reefs are the largest structures made by living creatures, estimated to cover over 284,300 km2 of the ocean’s surface area, which makes them the only living structure visible from space! To understand how corals build reefs, we have to understand their small but mighty building blocks: coral polyps. ## Coral Polyps Coral polyps are jellyfish-like animals, which can range from mere millimeters in diameter to almost 10 centimeters [1]. Despite their small size, coral polyps play a monumental role in marine ecosystems, and are the building blocks of coral reefs. Coral polyps cluster together, forming colonies through a process known as budding — the process by which individual polyps ‘multiply’ to make genetically identical copies of themselves — forming large structures. Anatomically, an individual polyp is essentially a cylindrical sac, with a mouth at its distal (uppermost) region, where water and other material enter and leave. Surrounding the mouth is a ring of tentacles with stinging cells called nematocysts — akin to a jellyfish’s — which aid the polyp in capturing prey [2]. ## Corals Coral polyps which cluster together eventually form corals; in other words, coral polyps are to a coral what cells are to a tissue. Polyps come together to form the thousands of known coral species, which exist in a dazzling array of shapes are colors! Despite being ‘rooted’ like plants, corals are members of the Animal Kingdom due to their inability to make their own food. Further characteristics place them in the Phylum Cnidaria and the Classes Anthozoa and Hydrozoa [2]. Anthozoa is further divided into Hexacorallia, containing members with six-fold symmetry such as stony corals, and Octocorallia, containing members with eight-fold symmetry such as soft corals. ## Coral Reefs While soft corals are more common, hard corals construct reefs! They do so by extracting calcium from their surroundings to form tough calcium carbonate (CaCO₃) shells for protection. The corals themselves, the CaCO₃ skeleton, and other reef animals make up the coral reef ecosystem [3]. ## The Coral Holobiont In addition to providing a home to hundreds of thousands of reef animals, corals have one of the most abundant microbiota, composed of bacteria, algae, fungi, protists, archaea, and viruses. The coral microbiome has a community structure that varies with the changing physicochemical parameters of water, thus imparting new traits to its host [4]. ### Symbiodineaceae At the core of coral-microbiome symbiosis is a dynamic relationship with Symbiodiniaceae (also known as zooxanthellae), a family of marine dinoflagellates that resides inside the individual polyp’s tissue [5]. The Symbiodiniaceae family is known for its role as the primary phototrophic algal symbiont of corals, providing corals with color and 90% of their energy, in exchange for shelter and carbon dioxide (CO2) [2]. ### Endozoicomonas Endozoicomonas are gram-negative, aerobic and facultatively anaerobic symbionts of corals that are hypothesized to be indicators of coral health, as they have a high abundance in healthy corals and a low abundance in diseases or stressed corals [6]. ## How are Corals Threatened? Coral reefs are threatened by both anthropogenic stressors, including poor agriculture and aquaculture practices, and environmental stressors, including rising ocean temperatures, which together can contribute to the decline of said reefs and their potential death, indicated by washed-away colors. Coral reefs are mainly threatened by: 1. Rising temperatures: rising sea temperature levels result in the production of reactive oxygen species (ROS) by Symbiodineacea, which cause oxidative stress and photosynthetic dysfunction. The leakage of these ROS into corals results in the dissociation of Symbiodineacea from corals, which ultimately causes coral bleaching, a condition where corals lose their vibrant corals and eventually die [7]. 2. Coral disease: coral disease is an understudied but serious threat to coral reefs, one shown to correlate strongly with rising temperatures. Coral disease prevalence tripled over the past 25 years and could result in 76.8% of our corals contracting a disease by 2100 if temperatures increase at the same rate, the most conservative worst-case scenario [8]. 3. Ocean acidification: ocean acidification, a direct consequence of rising CO2 levels, impairs the production of CaCO₃ skeletons. 4. Eutrophication: eutrophication, the excessive richness of water, is primarily a result of poor agricultural practices and can promote fast-growing algal blooms, depleting oxygen and introducing new diseases [9]. 5. Coastal development: coastal development can result in increased sedimentation, which can physically smother corals and block the sunlight necessary for photosynthesis. According to climate models, corals may disappear by 2070 if climate change continues at the current rate. Regionally, coral reefs are facing the same problems. Despite being some of the most heat-resistant in the world, corals off the coast of the United Arab Emirates (UAE) are disappearing fast, with almost a 100% extinction rate of certain corals in the summer of 2023. ## Why Should we Care? Coral reefs are our ‘rainforests of the sea’, the most diverse ecosystem on the planet. While reefs do occupy less than one percent of the ocean’s surface area, they support an estimated quarter of marine life, or over 830,000 multicellular species. The health of coral reefs is thus directly correlated with the health of our oceans. That is not where reef services stop, however. Reefs provide additional provisioning service, including fisheries; regulating services, such as storm protection; cultural services, including recreation and ecotourism; and supporting services, such as sand formation. All in all, reefs are estimated to provide world economies with nearly US $30 billion in net benefits annually. # Our Solution The NYUAD iGEM 2024 team chose to tackle coral bleaching and coral disease, both threats that arise as a result of rising temperatures. By engineering Symbiodineacea to express heat-tolerant genes, while engineering Endozoicomonas to express genes that protect against coral disease. ## Proof-of-Concept Differential gene expression between Symbiodineacea variants strongly influences their bleaching tolerance, hence influencing coral gene expression and bleaching susceptibility. The United Arab Emirates offers unique insights into this phenomenon, given its close proximity to the world’s warmest sea, the Arabian/Persian Gulf. The warm temperatures of the Arabian/Persian Gulf have given rise to thermally-tolerant corals, ones that can withstand temperatures upwards of 5°C warmer than those that would be lethal to corals of the Great Barrier Reef. Studies of those corals have shown that the thermo-tolerant Symbiodinium thermophilum is their most prevalent symbiont all year round, and wider studies have confirmed the important role of Symbiodineaceae composition and type in governing coral heat tolerance [10]. Researchers utilize the role of the microbiome to perform coral microbiome transplantations (CMTs), a process where tissue homogenates from healthy, or thermo-tolerant corals, are inoculated in thermo-sensitive corals, with positive results [11]. That being said, CMTs risk the introduction of pathogens and do not take into account the long-term effects of a drastic microbiome shift. In fact, studies have shown that a shift in just the Symbiodineaceae strain, while retaining other microbiome species, is able to confer heat tolerance at the expense of reduced coral calcification rate and growth [12], emphasizing the fact that drastic microbiome shifts may come with off-target effects. Therefore, to ensure minimal microbiome changes, our solution, REEFORM!, aims to engineer native, obligate and mutualistic coral symbionts, specific to the coral of interest, for improved coral health. By engineering native symbionts, we hope to overcome the aforementioned challenges associated with impaired growth that come with microbiome transplantations. In fact, studies observing corals that associate with heat-evolved symbionts showed a far greater survival rate, without impaired growth, when compared to corals that associate with wild-type symbionts of the same strain [13], a fact associated with drastic changes in gene expression [14]. However, generating heat-evolved Symbiodineaceae strains is a lengthy process that requires years to be successful, which is the reason we believe that a synthetic biology approach would expedite this essential process. ## Specific Aims Given that both Symbiodineaceae and Endozoicomonas are non-model organisms with poorly outline transformation protocols, our specific aims are as follows: 1. Optimize transformation protocols for Symbiodineaceae and Endozoicomonas 2. Generate a genetic toolkit of well-characterized regulatory elements for the transformation of Symbiodiniaceae and Endozoicomonas 3. Use the generated toolkit to drive the expression of GOIs for improved coral health # References 1. https://www.livingoceansfoundation.org/education/portal/course/coral-anatomy/#coral-anatomy 2. https://cdhc.noaa.gov/coral-biology/coral-biology/ 3. https://www.livingoceansfoundation.org/corals-without-skeletons/#:~:text=They include two groups, the,that provide support and protection 4. https://doi.org/10.1146/annurev-micro-102215-095440 5. https://ocean.si.edu/ocean-life/invertebrates/what-coral-coral-polyp-and-zooxanthellae 6. https://doi.org/10.1099/ijs.0.051490-0 7. https://www.encyclopedie-environnement.org/en/life/corals-ocean-engineers-under-threat/ 8. https://doi.org/10.1111/ele.14266 9. https://new.nsf.gov/news/too-much-algae-too-many-microbes-threaten-coral#:~:text=The researchers theorized that when 10. https://doi.org/10.1007/s00338-017-1640-3 11. https://doi.org/10.1186/s40168-021-01053-6 12. https://doi.org/10.1186/s40168-023-01653-4 13. https://doi.org/10.1007/s00338-023-02426-z 14. https://doi.org/10.1126/sciadv.aba2498"
+    `,
+  },
+  // Add more pages as needed
+];
+
+export default pagesData;