New PGS Catalog web display

PGScatalog · Jul 14, 2023 · 1a102a3 · 1a102a3
1 parent 1a2b8a0
commit 1a102a3
Show file tree

Hide file tree

Showing 24 changed files with 700 additions and 299 deletions.
diff --git a/catalog/static/catalog/pgs.scss b/catalog/static/catalog/pgs.scss
diff --git a/catalog/templates/catalog/browseby.html b/catalog/templates/catalog/browseby.html
@@ -25,14 +25,17 @@
     </nav>
     <div class="table-container">
         <section>
-        <h2>{{ view_name }}</h2>
-        {% if scores_list %}
-            <ul>
-                {% for score in scores_list %}
-                    <li><a href="/pgs/{{ score.PGS_id }}/">{{ score }}</a></li>
-                {% endfor %}
-            </ul>
-        {% elif table %}
+        {% if view_name == "Polygenic Scores (PGS)" %}
+          <h2 class="pgs_facet_icon pgs_facet_1_icon">{{ view_name }}</h2>
+        {% elif view_name == "Traits" %}
+          <h2 class="pgs_facet_icon pgs_facet_2_icon icon icon-species">{{ view_name }}</h2>
+        {% elif view_name == "Publications" %}
+          <h2 class="pgs_facet_icon pgs_facet_3_icon icon icon-common">{{ view_name }}</h2>
+        {% elif view_name == "Pending Publications" %}
+          <h2><span class="fa-solid fa-hourglass-half pgs_color_1" style="padding:5px 4px"></span> {{ view_name }}</h2>
+        {% endif %}
+
+        {% if table %}
           {% if data_chart %}
             <script type="text/javascript">
               document.addEventListener("DOMContentLoaded", function(event) {

diff --git a/catalog/templates/catalog/docs/about.html b/catalog/templates/catalog/docs/about.html
@@ -25,7 +25,7 @@
     </nav>
 
     <div class="clearfix">
-      <h2 class="pgs_title_left">About the PGS Catalog</h2>
+      <h2 class="pgs_title_left pgs_page_title">About the PGS Catalog</h2>
       <div class="pgs_buttons_right clearfix mb-2">
         <div class="mr-2">
           <a class="btn btn-pgs pgs_no_icon_link" title="Email" href="mailto:{{ pgs_contact }}" target="_blank">
@@ -205,7 +205,7 @@ <h3 id="acknowledgements">Acknowledgements</h3>
           <li class="mt-1"><a href="{{ hdr_uk_cam_url }}"><b>Health Data Research UK, Cambridge</b></a> — Laurent Gil, Michael Chapman, Richard Houghton, Prof. John Danesh</li>
           <li class="mt-1"><a href="{{ ebi_url }}/gwas"><b>NHGRI-EBI GWAS Catalog Team</b></a> — Annalisa Buniello, Elizabeth Lewis, Aoife McMahon, Santhi Ramachandran, Jackie MacArthur, Laura Harris</li>
           <li class="mt-1"><a href="{{ ebi_url }}/about/spot-team"><b>EMBL-EBI Samples Phenotypes and Ontologies Team</b></a> — Helen Parkinson, Simon Jupp, James Hayhurst, Trish Whetzel</li>
-          <li class="mt-1"><a href="https://www.inouyelab.org"><b>Inouye Lab Members</b></a> — Jonathan Marten, Petar Scepanovic, Scott Ritchie, Gad Abraham</li>
+          <li class="mt-1"><a href="https://www.inouyelab.org"><b>Inouye Lab Members</b></a> — Florent Yvon, Jonathan Marten, Petar Scepanovic, Scott Ritchie, Gad Abraham</li>
         </ul>
       </p>
       <p class="mt-4">The development of the <b>PGS Catalog</b> is supported by:</p>

diff --git a/catalog/templates/catalog/docs/ancestry.html b/catalog/templates/catalog/docs/ancestry.html
@@ -12,14 +12,14 @@
       </ol>
     </nav>
 
-    <h2>PGS Catalog Ancestry Documentation</h2>
+    <h2 class="pgs_page_title">PGS Catalog Ancestry Documentation</h2>
     <p>
       This page contains information about how participant ancestry is cataloged and represented for scores and sample descriptions in the PGS Catalog.
     </p>
     <div class="content_container">
       <div class="table-of-contents">
         <nav role="navigation">
-          <h5>Table of Contents</h5>
+          <h6>Table of Contents</h6>
           <ul>
             <li><a href="#anc_category">Ancestry Categories</a></li>
             <li><a href="#anc_dist">Displaying Ancestry Distributions</a></li>

diff --git a/catalog/templates/catalog/docs/docs.html b/catalog/templates/catalog/docs/docs.html
@@ -24,15 +24,15 @@
       </ol>
     </nav>
 
-    <h2>PGS Catalog Data Description</h2>
+    <h2 class="pgs_page_title">PGS Catalog Data Description</h2>
     <p>
       This page contains information regarding the contents of the PGS Catalog, describing the curated data fields and tables extracted from PGS publications.
       The descriptions are based on the major data structures in the Catalog:
     </p>
     <div class="content_container">
       <div class="table-of-contents">
         <nav role="navigation">
-          <h5>PGS Catalog Data Structures</h5>
+          <h6>PGS Catalog Data Structures</h6>
           <ul>
             <li><a href="#desc_pub">Publication</a></li>
             <li><a href="#desc_pgs">Polygenic Score (PGS)</a></li>

diff --git a/catalog/templates/catalog/docs/faq.html b/catalog/templates/catalog/docs/faq.html
@@ -12,7 +12,7 @@
       </ol>
     </nav>
 
-    <h2>Frequently Asked Questions</h2>
+    <h2 class="pgs_page_title">Frequently Asked Questions</h2>
     <div class="content_container">
       <div class="table-of-contents">
         <nav role="navigation">
@@ -130,7 +130,7 @@ <h3 class="mt-5" id="search_how">How to search the PGS Catalog?</h3>
 
       <!-- Trait -->
       <div class="mb-5">
-        <h4 id="search_trait"><i class="fas fa-angle-right pgs_color_1"></i> Searching by trait</h4>
+        <h4 id="search_trait" class="pgs_subsection">Searching by trait</h4>
         Here are the trait information that are searchable:
         <div class="table-responsive mt-2">
           <table class="table table-striped table_pgs_auto">
@@ -152,7 +152,7 @@ <h4 id="search_trait"><i class="fas fa-angle-right pgs_color_1"></i> Searching b
 
       <!-- Publication -->
       <div class="mb-5">
-        <h4 id="search_pub"><i class="fas fa-angle-right pgs_color_1"></i> Searching by publication</h4>
+        <h4 id="search_pub" class="pgs_subsection">Searching by publication</h4>
         Here are the publication information that are searchable:
         <div class="table-responsive mt-2">
           <table class="table table-striped table_pgs_auto">
@@ -174,7 +174,7 @@ <h4 id="search_pub"><i class="fas fa-angle-right pgs_color_1"></i> Searching by
 
       <!-- Score -->
       <div class="mb-5">
-        <h4 id="search_pub"><i class="fas fa-angle-right pgs_color_1"></i> Searching by score</h4>
+        <h4 id="search_pub" class="pgs_subsection">Searching by score</h4>
         Here are the score information that are searchable:
         <div class="table-responsive mt-2">
           <table class="table table-striped table_pgs_auto">
@@ -240,7 +240,7 @@ <h3 id="search_res">How to look at the search results?</h3>
           <div class="pgs_result scores_entry mb-4">
             <div class="pgs_result_title">
               <h4 class="mt-0 mb-2">
-                <span class="result_facet_type result_facet_type_1" title="Score"></span><a href="/score/PGS000841">PGS000841</a>
+                <span class="fa-solid fa-dna pgs_color_white"></span><a href="/score/PGS000841">PGS000841</a>
               </h4>
             </div>
             <div class="pgs_result_content"><b>Name</b>: BMI<span><b>Number of Variants</b>: <span class="badge badge-pill badge-pgs">122</span></span><span><b>Publication ID</b>: <a href="/publication/PGP000211">PGP000211</a></span></div>
@@ -251,7 +251,7 @@ <h4 class="mt-0 mb-2">
           <div class="pgs_result efo_traits_entry mb-4">
             <div class="pgs_result_title">
               <h4 class="mt-0 mb-2 mr-4">
-                <span class="result_facet_type result_facet_type_2" title="Trait"></span><a href="/trait/EFO_0004340">body mass index</a>
+                <span class="fa-regular fa-eye pgs_color_white"></span><a href="/trait/EFO_0004340">body mass index</a>
               </h4>
               <div class="pgs_result_subtitles">
                 <div title="Trait ID">EFO_0004340</div><div title="Trait Category">Body measurement</div>
@@ -279,7 +279,7 @@ <h4 class="mt-0 mb-2 mr-4">
           <div class="pgs_result publications_entry mb-4" style="">
             <div class="pgs_result_title">
               <h4 class="mt-0 mb-2">
-                <span class="result_facet_type result_facet_type_3" title="Publication"></span><a href="/publication/PGP000021">Longitudinal Analysis of Genetic Susceptibility and BMI Throughout Adult Life.</a>
+                <span class="fa-solid fa-book-open pgs_color_white"></span><a href="/publication/PGP000021">Longitudinal Analysis of Genetic Susceptibility and BMI Throughout Adult Life.</a>
               </h4>
             </div>
             <div class="pgs_result_content">Song M et al. (2017) - Diabetes<span><b>PMID</b>:29212779</span><span><b>doi</b>:10.2337/db17-1156</span><span><b>PGP</b>000021</span></div>

diff --git a/catalog/templates/catalog/download.html b/catalog/templates/catalog/download.html
@@ -13,7 +13,7 @@
 </nav>
 
 
-<h2 class="mr-auto">Downloads</h2>
+<h2 class="mr-auto pgs_page_title">Downloads</h2>
 
 <div class="content_container">
   <div class="table-of-contents">
@@ -46,51 +46,59 @@ <h5>Table of Contents</h5>
   </div>
 </div>
 
-
 <section>
   <h3 id="dl_ftp_list">Available PGS Catalog downloads</h3>
-  <table class="table table-bordered table_pgs_h">
-    <tbody>
-      <tr>
-        <td>
-          <span class="pgs_h_big_header">PGS Scoring Files & Metadata</span>
-          <div class="mt-1">
-            <small>Individual PGS variants scoring and metadata files</small>
-          </div>
-        </td>
-        <td><a class="btn btn-pgs pgs_no_icon_link pgs-ftp-btn" href="{{ pgs_ftp_http_root }}/scores/" target="_blank"><span class="fas fa-folder"></span> View PGS Score Directories (FTP)</a></td>
-      </tr>
-      <tr>
-        <td>
-          <span class="pgs_h_big_header">PGS Catalog Metadata</span>
-          <div class="mt-1">
-            <small>Available PGS global metadata files</small>
-          </div>
-        </td>
-        <td><a class="btn btn-pgs pgs_no_icon_link pgs-ftp-btn" href="{{ pgs_ftp_http_root }}/metadata/" target="_blank"><span class="fas fa-folder"></span> Bulk Metadata Downloads (FTP)</a></td>
-      </tr>
-      <tr>
-        <td>
-          <span class="pgs_h_big_header">PGS Catalog REST API</span>
-          <div class="mt-1">
-            <small>Programmatic access to the PGS Catalog metadata</small>
-          </div>
-        </td>
-        <td><a class="btn btn-pgs pgs_no_icon_link" href="/rest/"><span class="fas fa-code"></span> REST API endpoint documentation</a></td>
-      </tr>
-      <tr>
-        <td>
-          <span class="pgs_h_big_header">Python package <span class="pgs_color_1">pgscatalog_utils</span></span>
-          <div class="mt-1">
-            <small>A collection of tools, such as scoring files download</small>
-          </div>
-        </td>
-        <td><a class="btn btn-pgs pgs_no_icon_link" href="https://pypi.org/project/pgscatalog-utils/"><span class="fa-brands fa-python"></span> Python package documentation</a></td>
-      </tr>
-    </tbody>
-  </table>
-</section>
+  <h4 class="pgs_subsection">FTP access</h4>
+  <div class="row no-gutters pgs_vignette">
+    <div class="col-xs-6 col-md-6">
+      <div class="pgs_browse_item">
+        <div class="pgs_data_access">
+          <div>PGS Scoring Files & Metadata</div>
+          <p>
+            Individual PGS variants scoring and metadata files
+          </p>
+        </div>
+        <a class="browse_link btn btn-pgs pgs_no_icon_link pgs-ftp-btn" href="{{ pgs_ftp_http_root }}/scores/" target="_blank"><span class="fas fa-folder"></span> View PGS Score Directories (FTP)</a>
+      </div>
+    </div>
+    <div class="col-xs-6 col-md-6">
+      <div class="pgs_browse_item">
+        <div class="pgs_data_access">
+          <div>PGS Catalog Metadata</div>
+          <p>
+            Files containing the whole PGS Catalog metadata
+          </p>
+        </div>
+        <a class="browse_link btn btn-pgs pgs_no_icon_link pgs-ftp-btn" href="{{ pgs_ftp_http_root }}/metadata/" target="_blank"><span class="fas fa-folder"></span> Bulk Metadata Downloads (FTP)</a>
+      </div>
+    </div>
+  </div>
 
+  <h4 class="pgs_subsection">Programmatic access</h4>
+  <div class="row no-gutters pgs_vignette">
+    <div class="col-xs-6 col-md-6">
+      <div class="pgs_browse_item">
+        <div class="pgs_data_access">
+          <div>PGS Catalog REST API</div>
+          <p>
+            Programmatic access to the PGS Catalog metadata
+          </p>
+        </div>
+        <a class="browse_link btn btn-pgs pgs_no_icon_link" href="/rest/"><span class="fas fa-code"></span> REST API endpoint documentation</a>
+      </div>
+    </div>
+    <div class="col-xs-6 col-md-6">
+      <div class="pgs_browse_item">
+        <div class="pgs_data_access">
+          <div>Python package <span class="pgs_color_2">pgscatalog_utils</span></div>
+          <p>
+            A collection of tools, such as scoring files download
+          </p>
+        </div>
+        <a class="browse_link btn btn-pgs pgs_no_icon_link" href="https://pypi.org/project/pgscatalog-utils/"><span class="fa-brands fa-python"></span> Python package documentation</a>
+    </div>
+  </div>
+</section>
 
 <section>
   <h3 id="dl_ftp">PGS Catalog FTP structure</h3>
@@ -100,13 +108,13 @@ <h3 id="dl_ftp">PGS Catalog FTP structure</h3>
     <pre>
 <a href="{{ pgs_ftp_http_root }}">{{ pgs_ftp_root }}</a>
   ├── <span class="pgs_hl">pgs_scores_list.txt</span> <small>(list of Polygenic Score IDs)</small>
-  ├── <a href="{{ pgs_ftp_http_meta }}"><b>metadata/</b></a>
+  ├── <a href="{{ pgs_ftp_http_meta }}"><b>metadata/</b></a> <small class="pgs_color_1">("bulk" metadata directory)</small>
   │     ├── <span class="pgs_hl">pgs_all_metadata.xlsx</span>
   │     ├── <span class="pgs_hl">pgs_all_metadata_</span>[<span class="pgs_hl_i">sheet_name</span>]<span class="pgs_hl">.csv</span> <small>(7 files)</small>
   │     ├── <span class="pgs_hl">pgs_all_metadata.tar.gz</span> <small>(xlsx + csv files)</small>
-  │     ├── <a href="{{ pgs_ftp_http_meta }}/publications/"><b>publications/</b></a> <small>(metadata for large studies)</small>
+  │     ├── <a href="{{ pgs_ftp_http_meta }}/publications/"><b>publications/</b></a> <small class="pgs_color_1">("large studies" metadata directory)</small>
   │     └── <a href="{{ pgs_ftp_http_meta }}/previous_releases/"><b>previous_releases/</b></a>
-  └── <a href="{{ pgs_ftp_http_root }}/scores"><b>scores/</b></a>
+  └── <a href="{{ pgs_ftp_http_root }}/scores"><b>scores/</b></a> <small class="pgs_color_1">(individual scores directory)</small>
         ├── <a href="{{ pgs_ftp_http_root }}/scores/PGS000001/"><b>PGS000001/</b></a>
         │     ├── <a href="{{ pgs_ftp_http_root }}/scores/PGS000001/Metadata/"><b>Metadata/</b></a>
         │     │     ├── <span class="pgs_hl">PGS000001_metadata.xlsx</span>

diff --git a/catalog/templates/catalog/efo.html b/catalog/templates/catalog/efo.html
@@ -12,7 +12,7 @@
       </ol>
     </nav>
 
-    <h2>Trait: <span id="trait_label" class="pgs_title">{{ trait.label }}</span></h2>
+    <h2 class="pgs_facet_icon pgs_facet_2_icon icon icon-species">Trait <small class="fa-solid fa-angle-right pgs_color_2"></small> <span id="trait_label" class="pgs_title">{{ trait.label }}</span></h2>
 
     <section>
       <table class="table table-bordered table_pgs_h mt-4">

diff --git a/catalog/templates/catalog/embargoed/pgp.html b/catalog/templates/catalog/embargoed/pgp.html
@@ -12,7 +12,7 @@
       </ol>
     </nav>
 
-    <h2>PGS Publication: <span class="pgs_title">{{ publication.id }}</span></h2>
+    <h2 class="pgs_page_title">PGS Publication <small class="fa-solid fa-angle-right pgs_color_facet_3"></small> <span class="pgs_title">{{ publication.id }}</span></h2>
 
   {% if publication.title %}
     <table class="table table-bordered table_pgs_h mt-4">
@@ -35,6 +35,8 @@ <h2>PGS Publication: <span class="pgs_title">{{ publication.id }}</span></h2>
 
   {% if scores_count %}
     <h4>Associated Polygenic Score{% if scores_count > 1 %}s<span class="badge badge-pill badge-pgs-small ml-2">{{ scores_count }}</span>{% endif %}<span class="pl-3 pr-3">-</span>Embargoed</h4>
+
     {% render_table scores_table %}
+
   {% endif %}
 {% endblock %}
diff --git a/catalog/templates/catalog/embargoed/pgs.html b/catalog/templates/catalog/embargoed/pgs.html
@@ -12,7 +12,7 @@
       </ol>
     </nav>
 
-    <h2>Polygenic Score (PGS) ID: <span class="pgs_title">{{score.id}}</span></h2>
+    <h2 class="pgs_page_title">Polygenic Score <small class="fa-solid fa-angle-right pgs_color_facet_1"></small> <span class="pgs_title">{{score.id}}</span></h2>
 
     <div class="clearfix">
       <div class="mt-3 float_left pgs_note pgs_note_1">

diff --git a/catalog/templates/catalog/gwas_gcst.html b/catalog/templates/catalog/gwas_gcst.html
@@ -13,7 +13,7 @@
   </nav>
 
   <section>
-    <h2>NHGRI-EBI GWAS Catalog Study: <span id="gwas_id" class="pgs_title">{{ gwas_id }}</span></h2>
+    <h2 class="pgs_page_title">NHGRI-EBI GWAS Catalog Study <small class="fa-solid fa-angle-right pgs_color_1"></small> <span id="gwas_id" class="pgs_title">{{ gwas_id }}</span></h2>
     <!-- Spinner -->
     <div id="pgs_loading" class="d-flex justify-content-center">
       <div class="spinner-border pgs_color_1" role="status">

diff --git a/catalog/templates/catalog/includes/footer.html b/catalog/templates/catalog/includes/footer.html
@@ -30,7 +30,7 @@
     <!-- Copyright -->
   </footer>
 
-  {% if is_pgs_live_site %}
+  {% if is_pgs_live_site == 'True' %}
     <!-- Google Analytics details... -->
     <script type="text/javascript">!function(e,a,n,t,i,o,c){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,o=a.createElement(n),c=a.getElementsByTagName(n)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(o,c)}(window,document,"script",0,"ga"),ga("create","UA-145149243-1",{cookieDomain:"auto"}),ga("require","linkid","linkid.js"),ga("set","anonymizeIp",!0),ga("send","pageview");</script>
     <!-- Global site tag (gtag.js) - Google Analytics -->