Dev

src/constants/Example.ts

@@ -13,6 +13,7 @@ export const GENOMIC_EXAMPLE =
   `X\t149498202\t.\tC\tG
 10-43118436-A-C
 NC_000002.12:g.233760498G>A
+NC_000006.11:g.26091306T>C
 14 89993420 A/G
   `;
 export const CDNA_EXAMPLE =

src/styles/layout/_DefaultPageLayout.scss

@@ -557,3 +557,19 @@ span.space:before {
   font-family: "Lucida Console", "Courier New", monospace;
   font-size: 0.7em;
 }
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  gap: 10px;
+  padding: 30px;
+}
+
+.grid-container > div {
+  text-align: center;
+  font-size: 12px;
+}
+
+.varsite-logo {
+  background-color: rgba(0, 124, 130, 0.65);
+}

src/ui/layout/DefaultPageLayout.tsx

@@ -15,7 +15,7 @@ interface DefaultPageLayoutProps {
   searchResults?: MappingRecord[][][]
 }
 
-const bannerText = "We're updating ProtVar with new datasets and features. Please bear with us as there may be some temporary disruptions while we're at it."
+const bannerText = null
 
 function DefaultPageLayout(props: DefaultPageLayoutProps) {
   const [showBanner, setShowBanner ] = useState(bannerText == null ? false : true);
@@ -126,16 +126,9 @@ function DefaultPageLayout(props: DefaultPageLayoutProps) {
                           </Link>
                         </td>
                         <td className="topnav-right local-sub-title">
-                          <Link
-                            to=""
-                            onClick={() =>
-                              window.open(API_URL + '/docs', '_blank')
-                            }
-                            title="ProtVar API"
-                            rel="noreferrer"
-                          >
+                          <a href={API_URL} title="ProtVar API" target="_self">
                             API
-                          </Link>
+                          </a>
                         </td>
                         <td className="topnav-right local-sub-title">
                           <Link

src/ui/pages/AboutPage.tsx

@@ -7,8 +7,13 @@ import EnsemblLogo from "../../images/ensembl-logo.png";
 import PDBeLogo from "../../images/pdbe-logo.png";
 import CADDLogo from "../../images/cadd-logo.png";
 import EVELogo from "../../images/eve-logo.svg";
-import DMLogo from "../../images/dm-logo.png";
+import GoogleDMLogo from "../../images/Google_DeepMind_Logo_new.png";
 import FoldXLogo from "../../images/FoldX-logo.png";
+import CrossMapLogo from "../../images/crossmap.png";
+import CosmicLogo from "../../images/cosmic.png";
+import MolstarLogo from "../../images/molstar.png";
+import NCBILogo from "../../images/NCBILogo.png";
+import VarSiteLogo from "../../images/VarSiteLogo.png";
 import {TITLE} from "../../constants/const";
 
 function AboutPageContent() {
@@ -23,12 +28,6 @@ function AboutPageContent() {
   return <div className="container">
     <h4>About</h4>
     <div className="text">
-      <p>Watch the <a href="https://www.youtube.com/watch?v=6dsbozAi1lk" target="_blank" rel="noreferrer">ProtVar launch webinar</a>.
-        <br/>
-        <iframe id="ytplayer" title="Launch webinar video" width="360" height="202.5"
-                src="https://www.youtube.com/embed/6dsbozAi1lk"
-                frameBorder="0" allowFullScreen />
-      </p>
 
       <p>
         ProtVar is a regularly updated and maintained human variant annotation and assessment web tool which offers
@@ -37,70 +36,170 @@ function AboutPageContent() {
         and predictions to better understand the potential effects of missense variation on humans.
       </p>
 
+      <p>Watch the <a href="https://www.youtube.com/watch?v=6dsbozAi1lk" target="_blank" rel="noreferrer">ProtVar launch
+        webinar</a>.
+        <br/>
+        <iframe id="ytplayer" title="Launch webinar video" width="360" height="202.5"
+                src="https://www.youtube.com/embed/6dsbozAi1lk"
+                frameBorder="0" allowFullScreen/>
+      </p>
+
       <p>
-          It is funded by EMBL <a href="https://www.embl.de/" target="_blank" rel="noreferrer"><img
-            src={EMBLLogo}
-            loading="lazy"
-            alt=""
-            width="80"
-      /></a> and Open Targets <a href="https://www.opentargets.org/" target="_blank" rel="noreferrer"><img
-            src={OTLogo}
-            loading="lazy"
-            alt=""
-            width="60"
-      /></a>
+        <a href="ProtVar_Jan_2024.pdf" target="_blank" rel="noreferrer">ProtVar presentation Jan 2024</a>
+      </p>
+
+      <p>
+        <a href="ProtVar_tutorial.pdf" target="_blank" rel="noreferrer">ProtVar tutorial Sep 2023</a>
       </p>
 
+
+      <h5>Licence & disclaimer</h5>
+
+      <h6>Licence</h6>
       <p>
-        ProtVar is developed and maintained by <a href="https://www.ebi.ac.uk/people/person/james-stephenson" target="_blank" rel="noreferrer">James Stephenson</a> and <a href="https://www.ebi.ac.uk/people/person/prabhat-totoo" target="_blank" rel="noreferrer">Prabhat Totoo</a> in the <a href="https://www.ebi.ac.uk/about/teams/protein-function-development/" target="_blank" rel="noreferrer">UniProt protein function development</a> team.
+        Except where otherwise noted, content on this site is licensed under a <a
+        href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer">Creative Commons
+        Attribution 4.0 International (CC BY 4.0) License</a>.
       </p>
 
+      <h6>Disclaimer</h6>
       <p>
-        We would like to thank the following resources for the data used in ProtVar <br/>
-        <a href="https://www.uniprot.org/" target="_blank" rel="noreferrer"><img
-            src={UniprotLogo}
+        We make no warranties regarding the correctness of the data, and disclaim liability for damages
+        resulting from its use. We cannot provide unrestricted permission regarding the use of the data, as some data
+        may be covered by patents or other rights. <br/><br/>
+
+        Any medical or genetic information is provided for research, educational and informational purposes only. It is
+        not in any way intended to be used as a substitute for professional medical advice, diagnosis, treatment or
+        care.
+      </p>
+
+      <h6>Cookie</h6>
+      <p>This website uses cookies, and the limited processing of
+        your personal data in order to function. By using the site you are agreeing to this as outlined in our <a
+          target="_blank" rel="noreferrer"
+          href="https://www.ebi.ac.uk/data-protection/privacy-notice/embl-ebi-public-website">Privacy
+          Notice</a> and <a target="_blank" rel="noreferrer" href="https://www.ebi.ac.uk/about/terms-of-use">Terms of
+          Use</a>.
+      </p>
+
+      <h5>Development team</h5>
+      <p>
+        ProtVar is developed and maintained within the <a
+        href="https://www.ebi.ac.uk/about/teams/protein-function-development/" target="_blank" rel="noreferrer">UniProt
+        protein function development</a> team by <br/>
+
+        <a href="https://www.ebi.ac.uk/people/person/james-stephenson" target="_blank" rel="noreferrer">James
+          Stephenson</a> <br/>
+        <a href="https://www.ebi.ac.uk/people/person/prabhat-totoo" target="_blank" rel="noreferrer">Prabhat
+          Totoo</a>
+      </p>
+
+      <h5>Funding</h5>
+      <p>
+        ProtVar is funded by <br/>
+        EMBL <a href="https://www.embl.de/" target="_blank" rel="noreferrer"><img
+        src={EMBLLogo}
+        loading="lazy"
+        alt=""
+        width="80"
+      /></a>
+        Open Targets <a href="https://www.opentargets.org/" target="_blank" rel="noreferrer"><img
+        src={OTLogo}
+        loading="lazy"
+        alt=""
+        width="60"
+      /></a>
+      </p>
+
+      <h5>Acknowledgements</h5>
+      We would like to thank the following resources for the data used in ProtVar <br/>
+
+      <div className="grid-container">
+        <div><a href="https://www.uniprot.org/" target="_blank" rel="noreferrer"><img
+          src={UniprotLogo}
+          loading="lazy"
+          alt="UniProt"
+          width="120"
+        /></a></div>
+        <div><a href="https://www.ensembl.org/" target="_blank" rel="noreferrer"><img
+          src={EnsemblLogo}
+          loading="lazy"
+          alt="Ensembl"
+          width="140"
+        /></a></div>
+        <div><a href="https://www.ebi.ac.uk/pdbe/" target="_blank" rel="noreferrer"><img
+          src={PDBeLogo}
+          loading="lazy"
+          alt="PDBe"
+          width="50"
+        /></a></div>
+        <div><a href="https://www.deepmind.com/" target="_blank" rel="noreferrer"><img
+          src={GoogleDMLogo}
+          loading="lazy"
+          alt="Google DeepMind"
+          width="120"
+        /></a>
+        <br/>
+        <a href="https://alphafold.ebi.ac.uk/" target="_blank" rel="noreferrer">AlphaFold</a></div>
+        <div><a href="https://www.ncbi.nlm.nih.gov/" target="_blank" rel="noreferrer"><img
+          src={NCBILogo}
+          loading="lazy"
+          alt="NCBI"
+          width="100"
+        /></a><br/>
+        <a href="https://www.ncbi.nlm.nih.gov/refseq/" target="_blank" rel="noreferrer">RefSeq</a>&nbsp;
+        <a href="https://www.ncbi.nlm.nih.gov/snp/" target="_blank" rel="noreferrer">dbSNP</a>&nbsp;
+        <a href="https://www.ncbi.nlm.nih.gov/clinvar/" target="_blank" rel="noreferrer">ClinVar</a></div>
+        <div>
+          <a href="https://cancer.sanger.ac.uk/cosmic" target="_blank" rel="noreferrer"><img
+            src={CosmicLogo}
             loading="lazy"
-            alt=""
+            alt="COSMIC"
             width="120"
-        /></a>&nbsp;&nbsp;
-        <a href="https://www.ensembl.org/" target="_blank" rel="noreferrer"><img
-            src={EnsemblLogo}
-            loading="lazy"
-            alt=""
-            width="140"
-        /></a>&nbsp;&nbsp;
-        <a href="https://www.ebi.ac.uk/pdbe/" target="_blank" rel="noreferrer"><img
-            src={PDBeLogo}
-            loading="lazy"
-            alt=""
-            width="50"
-        /></a>&nbsp;&nbsp;
-        <a href="https://cadd.gs.washington.edu/" target="_blank" rel="noreferrer"><img
-            src={CADDLogo}
+          /></a></div>
+        <div><a href="https://molstar.org/" target="_blank" rel="noreferrer"><img
+            src={MolstarLogo}
             loading="lazy"
-            alt=""
-            width="60"
-        /></a>&nbsp;&nbsp;
-        <a href="https://evemodel.org/" target="_blank" rel="noreferrer"><img
-            src={EVELogo}
-            loading="lazy"
-            alt=""
-            width="120"
-        /></a>&nbsp;&nbsp;
-        <a href="https://alphafold.ebi.ac.uk/" target="_blank" rel="noreferrer">AlphaFold</a>&nbsp;&nbsp;
-        <a href="https://www.deepmind.com/" target="_blank" rel="noreferrer"><img
-            src={DMLogo}
+            alt="Molstar"
+            width="100"
+          /></a></div>
+        <div><a href="https://crossmap.sourceforge.net/" target="_blank" rel="noreferrer"><img
+            src={CrossMapLogo}
             loading="lazy"
-            alt=""
+            alt="CrossMap"
             width="120"
-        /></a>&nbsp;&nbsp;
-        <a href="https://foldxsuite.crg.eu/" target="_blank" rel="noreferrer"><img
-            src={FoldXLogo}
+          /></a></div>
+        <div><a href="https://cadd.gs.washington.edu/" target="_blank" rel="noreferrer"><img
+          src={CADDLogo}
+          loading="lazy"
+          alt="CADD"
+          width="45"
+        /></a><br/>
+        <a href="https://cadd.gs.washington.edu/" target="_blank" rel="noreferrer">CADD</a></div>
+        <div><a href="https://evemodel.org/" target="_blank" rel="noreferrer"><img
+          src={EVELogo}
+          loading="lazy"
+          alt="EVE"
+          width="120"
+        /></a></div>
+        <div><a href="https://foldxsuite.crg.eu/" target="_blank" rel="noreferrer"><img
+          src={FoldXLogo}
+          loading="lazy"
+          alt="FoldX"
+          width="80"
+        /></a></div>
+        <div><a href="https://www.ebi.ac.uk/thornton-srv/databases/VarSite" target="_blank" rel="noreferrer"><img
+            src={VarSiteLogo}
             loading="lazy"
-            alt=""
-            width="80"
-        /></a>
-      </p>
+            alt="The VarSite database"
+            width="40"
+            className="varsite-logo"
+          /></a><br/>
+          <a href="https://www.ebi.ac.uk/thornton-srv/databases/VarSite" target="_blank" rel="noreferrer">VarSite</a>
+        </div>
+
+      </div>
+
       {/*
       <p>
         If you found ProtVar useful for your work please cite: <br/>
@@ -115,6 +214,7 @@ function AboutPageContent() {
 }
 
 function AboutPage() {
-  return <DefaultPageLayout content={<AboutPageContent />} />
+  return <DefaultPageLayout content={<AboutPageContent/>}/>
 }
+
 export default AboutPage;

src/ui/pages/home/HomePage.tsx

@@ -27,23 +27,12 @@ const HomePageContent = (props: HomePageProps) => {
       <div>
         <p>
           ProtVar (<strong>Prot</strong>ein <strong>Var</strong>iation) is a
-          resource to investigate missense variation in humans by presenting
+          resource to investigate SNV missense variation (not InDels) in humans by presenting
           annotations which may be relevant to interpretation.
-          <br />
+          <br/>
           Variants can be submitted below in genomic or protein formats,
-          uploaded or accessed via our{' '}
-          <Link
-            to=""
-            onClick={() => window.open(API_URL + '/docs', '_blank')}
-            title="ProtVar REST API"
-            target="_blank"
-            rel="noreferrer"
-            className='ref-link'
-          >
-            {' '}
-            API{' '}
-          </Link>
-          .
+          uploaded or accessed via our <a href={API_URL}
+                                          title="ProtVar API" target="_self" className='ref-link'>API</a>.
         </p>
       </div>
       <div className='search-page-layout'>
@@ -58,6 +47,9 @@ const HomePageContent = (props: HomePageProps) => {
       <div>
         <br />
         <p className="info">
+          This site is licensed under a <a
+          className="ref-link" href="https://creativecommons.org/licenses/by/4.0/"
+          target="_blank" rel="noreferrer">Creative Commons</a> license and uses cookie to improve user's experience.
           Further information can be found in the{' '}
           <Link to={ABOUT} title="About ProtVar's" className="ref-link">
             ABOUT

src/ui/pages/home/SearchVariant.tsx

@@ -104,7 +104,7 @@ const SearchVariant = (props: VariantSearchProps) => {
         <section className="search-card__actions">
           <span className="search-card-header">
             <p>
-              <b>Search Variants</b> - Please paste your variants below or
+              <b>Search single nucleotide variants</b> - Please paste your variants below or
               upload your file
             </p>
           </span>