Incorporated changes requested by NAR reviewers

ui/.env

@@ -9,5 +9,7 @@ VITE_TITLE="AlphaFind"
 VITE_DESCRIPTION="AlphaFind - protein search engine"
 VITE_KEYWORDS="alphafind, protein, search, similarity"
 VITE_ABSTRACT="AlphaFind"
-VITE_COPYRIGHT="© 2023 MUNI FI"
+VITE_COPYRIGHT="© 2024 MUNI FI"
 VITE_AUTHOR="Jakub Čillík"
+
+VITE_FOOTER_YEAR="%YEAR%"

ui/README.md

@@ -3,7 +3,7 @@ AlphaFind ([https://alphafind.fi.muni.cz/](https://alphafind.fi.muni.cz/)) is a
 
 This repository contains the source code of the AlphaFind's front-end.
 
-![public/alphafind.png](public/alphafind.png){width=40%}
+![public/alphafind.png](public/alphafind.png)
 
 ## Running locally
 

ui/package.json

@@ -22,6 +22,7 @@
     "bootstrap": "^5.3.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
+    "molstar": "^4.0.1",
     "ngl": "^2.2.1",
     "react": "^18.2.0",
     "react-autocomplete-input": "^1.0.29",

ui/src/components/ComparisonModal/ComparisonModal.tsx

@@ -6,13 +6,12 @@ import { QueryObjectContext } from "../../pages/ProteinSearch/ProteinSearch";
 import "./comparison-modal.scss";
 import ProteinVisualizer from "../ProteinVisualizer";
 
+
 const controlHintPopover = (
     <Popover id="popover-basic" style={{
-        // fontSize: 1.1 + 'rem',
         width: 'auto',
         maxWidth: 450 + 'px',
     }}>
-        {/* <Popover.Header as="h3">Controls</Popover.Header> */}
         <Popover.Body>
             <Table borderless striped>
                 <tbody>
@@ -100,6 +99,7 @@ export function ComparisonModal({ show, onHide, comparingUniProtId }: Props) {
             <Modal.Body className="p-0 pb-2">
                 <div className="comparison-3d">
                     <ProteinVisualizer uniProtIds={uniProtIds} stageElementId='protein-overlapping' allowControlPanel={true} />
+                    {/* <MolStarWrapper uniProtIds={uniProtIds} /> */}
                 </div>
             </Modal.Body>
         </Modal>

ui/src/components/Description/Description.tsx

@@ -15,6 +15,9 @@ export const Description = memo(() => {
                 3D visualizations of the structural superposition of the proteins are provided, and text filters can be used to find specific organisms or Uniprot IDs.
                 For details about the methodology and usage, please see the <a href="https://github.com/Coda-Research-Group/AlphaFind/wiki/Manual" target="_blank" rel="noreferrer">manual</a>.
                 This website is free and open to all users and there is no login requirement.
+                <hr />
+                If you found <strong>Alpha<span className="title-color">Find</span></strong> helpful, please cite: <i>Procházka, D., Slanináková, T., Oľha, J., Rošinec, A., Grešová, K., Jánošová, M., Čillík, J., Porubská, J., Svobodová, R., Dohnal, V., & Antol, M. (2024). <a href="https://www.biorxiv.org/content/10.1101/2024.02.15.580465v1">AlphaFind: Discover structure similarity across the entire known proteome.</a></i> Are you interested in a research collaboration? Feel free to <a href="mailto:slaninakova@mail.muni.cz">contact us</a>.
+                <hr />
             </p>
         </div>
     );

ui/src/components/ExampleVisualizations/ExampleVisualization.tsx

@@ -1,19 +1,17 @@
+import { Link } from "react-router-dom";
 import { Representation } from "../../common/enums";
 import ProteinVisualizer from "../ProteinVisualizer";
 import "./example-visualization.scss";
 
-const defaultStyle = {
-    height: 300 + "px",
-};
-
 type Props = {
     i: number,
     exampleUniProtIds: string[]
     name: string;
     text: string;
+    limit?: number;
 };
 
-export function ExampleVisualization({i, exampleUniProtIds, name, text }: Props) {
+export function ExampleVisualization({i, exampleUniProtIds, name, text, limit=50}: Props) {
     return (
         <div className="example-card">
             <ProteinVisualizer
@@ -23,7 +21,7 @@ export function ExampleVisualization({i, exampleUniProtIds, name, text }: Props)
                 defaultRepresentation={Representation.Tube}
                 spin={true}
             />
-            <h3><a href={`search?q=${exampleUniProtIds[0]}`}>{name}</a></h3>
+            <h3><Link to={`/search?q=${exampleUniProtIds[0]}&limit=${limit}`}>{name}</Link></h3>
             <p style={{textAlign: 'justify'}} dangerouslySetInnerHTML={{ __html: text }} />
         </div>
     );

ui/src/components/ExampleVisualizations/ExampleVisualizations.tsx

@@ -3,19 +3,19 @@ import { ExampleVisualization } from "./ExampleVisualization";
 import "./examples-visualizations.scss";
 
 const examples = [
-    ["I1VZV6","A0A3G2VQ77","C7S3C6", "A0A2K6R518","A0A0D9RKY6","H9EWV6","A0A3G2VT59",],
+    ["P69905", "P63108", "D1MGQ2", "A0A0K2BMD8","A0A341AFD2","Q5R9M5",],
     ["A0A1D6JW22","A0A3L6TI92","A0A317Y945","A0A835EH74",],
     ["Q9FFD0","A0A7J7D5F1","A0A067JHG6","B9IQ11",],
 ];
 
 const names = [
-    "Hemoglobin Alpha 1",
+    "Hemoglobin alpha 1",
     "Cytochrome P450",
     "PIN5 protein",
 ];
 
 const texts = [
-    "Hemoglobin is a protein that facilitates the transport of oxygen and other gases in red blood cells. Almost all vertebrates contain hemoglobin. It consists of four protein subunits (globins), and is one of the first proteins whose 3D structure has been experimentally determined. There are many types of hemoglobin, with hemoglobin Alpha 1 (encoded by the HBA1 gene) occurring in humans and being the main form of hemoglobin in adults. In this use case, AlphaFind shows us that highly similar hemoglobin structures can also be found in other species.",
+    "Hemoglobin is a protein that facilitates the transport of oxygen and other gases in red blood cells. Almost all vertebrates contain hemoglobin. It consists of four protein subunits (globins), and is one of the first proteins whose 3D structure has been experimentally determined. There are many types of hemoglobin, with hemoglobin alpha 1 (encoded by the HBA1 gene) occurring in humans and being the main form of hemoglobin in adults. In this use case, AlphaFind shows us that highly similar hemoglobin structures can also be found in other species.",
     "Cytochrome P450 are enzymes which are important for the metabolism of many endogenous compounds and xenobiotics. P450 enzymes have been identified across all biological kingdoms: animals, plants, fungi, bacteria and archaea, as well as in viruses. Cytochrome P450 proteins contain one chain which is composed of more than 20 sheets and helices. Their sequence similarity is very low. In this use case, we can see similarities among cytochrome P450 structures from various species. The search starts with a cytochrome from corn (Zea Mays), and within the first 50 hits, we find similar structures originating from various animals (mouse, cat, horse, etc.).",
     "The PIN proteins are transmembrane proteins which regulate plant growth by influencing auxin transport from the cytosol to the extracellular space. They only occur in plants and feature a configuration of 10 main helices that collectively form a pore. Eight types of PIN proteins are known (PIN1-PIN8), and recently, the structures of three PIN proteins were uncovered and published in Nature. The structure of the PIN5 protein differs from other PINs (<a href='https://www.nature.com/articles/s41586-022-04883-y' target='_blank' rel='noreferrer'>Ung 2022</a>) and has not yet been experimentally determined. This use case shows that the PIN5 protein structure is strongly conserved among many different plant species.",
 ];
@@ -24,7 +24,7 @@ export function ExampleVisualizations() {
     return (
         <Row className="examples">
             <Col xl="4" md="12">
-                <ExampleVisualization i={0} exampleUniProtIds={examples[0]} name={names[0]} text={texts[0]} />
+                <ExampleVisualization i={0} exampleUniProtIds={examples[0]} name={names[0]} text={texts[0]} limit={1000}/>
             </Col>
             <Col xl="4" md="12">
                 <ExampleVisualization i={1} exampleUniProtIds={examples[1]} name={names[1]} text={texts[1]} />

ui/src/components/ExperimentalStructuresModal/ExperimentalStructuresModal.tsx

@@ -0,0 +1,48 @@
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Modal } from "react-bootstrap";
+import "./experimental-structures-modal.scss";
+import { ExperimentalStructuresModalAttributes } from "../ProteinTable/ProteinTable";
+
+type Props = {
+    attrs: ExperimentalStructuresModalAttributes;
+    onHide: () => void;
+};
+
+export function ExperimentalStructuresModal({ attrs, onHide }: Props) {
+    if (attrs === null)
+        return (<></>);
+
+    const { experimentalStructures } = attrs;
+
+    return (
+        <Modal
+            show={experimentalStructures.length > 0}
+            onHide={onHide}
+            aria-labelledby="contained-modal-title-vcenter"
+            centered
+            className="experimental-structures-modal"
+        >
+            <Modal.Header closeButton className="">
+                <Modal.Title>
+                    Experimental Structures
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <p>
+                    Experimental structures (PDBe) corresponding to <b>{attrs.entryUniProtId}</b>:
+                </p>
+                <ul>
+                    {experimentalStructures.map((structure, index) => (
+                        <li key={index}>
+                            <a href={`https://www.ebi.ac.uk/pdbe-srv/view/entry/${structure}`} target="_blank" rel="noreferrer">
+                                {structure}
+                                <sup className="ms-1"><FontAwesomeIcon icon={faArrowUpRightFromSquare} /></sup>
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </Modal.Body>
+        </Modal>
+    );
+}

ui/src/components/ExperimentalStructuresModal/experimental-structures-modal.scss

@@ -0,0 +1,21 @@
+.experimental-structures-modal {
+    .modal-title {
+        font-size: 1.2rem;
+    }
+
+    ul {
+        list-style: none;
+        // font-size: 1.1rem;
+        max-height: 450px;
+        overflow-y: scroll;
+
+        li {
+            margin-bottom: 0.75rem;
+            // border-bottom: 1px solid #ccc;
+        }
+    }
+
+    sup {
+        font-size: 0.7rem;
+    }
+}

ui/src/components/ExperimentalStructuresModal/index.tsx

@@ -0,0 +1,3 @@
+import { ExperimentalStructuresModal } from "./ExperimentalStructuresModal";
+
+export default ExperimentalStructuresModal;

ui/src/components/LoadMoreButton/LoadMoreButton.tsx

@@ -59,6 +59,7 @@ export function LoadMoreButton({ isLoading, loadMoreFn, queue, currentDataLength
 
     const availableCount = MAX_LIMIT - currentDataLength;
 
+    // Do not show button if the user reached upper limit
     if (availableCount <= 0)
         return (<></>);
 

ui/src/components/MainFooter/MainFooter.tsx

@@ -5,20 +5,23 @@ import "./main-footer.scss";
 import { memo } from 'react';
 
 export const MainFooter = memo(() => {
+    let footer_year: string = import.meta.env.VITE_FOOTER_YEAR;
+    footer_year = footer_year.replace("%YEAR%", new Date().getFullYear().toString());
+
     return (
         <>
             <footer className="main">
                 <div className="content">
                     <Container>
                         <div className="header">
-                        Alpha<span className="title-color">Find</span>
+                            Alpha<span className="title-color">Find</span>
                         </div>
                         <div className="links">
                             <a href="https://disa.fi.muni.cz/complex-data-analysis/" target="_blank" title="Website"  rel="noreferrer">
                                 {/* <Image src="imgs/fi-logo.png" fluid className="muni" /> */}
                                 <FontAwesomeIcon icon={faPeopleGroup} />
                             </a>
-                            <a href="mailto:xslanin@mail.muni.cz">
+                            <a href="mailto:slaninakova@mail.muni.cz">
                                 <FontAwesomeIcon icon={faEnvelope} />
                             </a>
                         </div>
@@ -29,7 +32,7 @@ export const MainFooter = memo(() => {
                     </Container>
                 </div>
                 <div className="copyright">
-                    2023 | Created at the <a href="https://disa.fi.muni.cz/complex-data-analysis/">Intelligent Systems for Complex Data Research Group</a> <span className="author"> | Website made by {import.meta.env.VITE_AUTHOR}</span>
+                    {footer_year} | Created at the <a href="https://disa.fi.muni.cz/complex-data-analysis/">Intelligent Systems for Complex Data Research Group</a> <span className="author"> | Website made by {import.meta.env.VITE_AUTHOR}</span>
                 </div>
             </footer>
         </>

ui/src/components/MainHeader/MainHeader.tsx

@@ -3,6 +3,7 @@ import { Col, Container, Row } from "react-bootstrap";
 import Description from "../Description";
 import "./main-header.scss";
 import { useUrlParams } from "../../common/utils";
+import { Link } from "react-router-dom";
 
 export const MainHeader = memo(() => {
     const [urlParams] = useUrlParams();
@@ -12,7 +13,11 @@ export const MainHeader = memo(() => {
             <Container>
                 <Row>
                     <Col xs={8}>
-                        <h1 className="mb-0"><a style={{ textDecoration: "none", color: "inherit" }} href="./">Alpha<span className="title-color">Find</span></a></h1>
+                        <h1 className="mb-0">
+                            <Link style={{ textDecoration: "none", color: "inherit" }} to="./">
+                                Alpha<span className="title-color">Find</span>
+                            </Link>
+                        </h1>
                     </Col>
                     <Col xs={4} className={urlParams.searchQuery === null ? "manual-container visually-hidden" : "manual-container"}>
                         <a href="https://github.com/Coda-Research-Group/AlphaFind/wiki/Manual" target="_blank" rel="noreferrer">Manual</a>