update buttons

episphere · Mar 26, 2024 · aaf0812 · aaf0812
1 parent c8b7d87
commit aaf0812
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>Diseasome</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    
+
     <!-- bootstrap CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
@@ -28,13 +28,14 @@
 
             <ul class="nav navbar-nav navbar-right">
                 <li class="nav-item active">
-                    <a class="nav-link"  href="#notices">Notices</a>
+                    <a class="nav-link" href="#notices">Notices</a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" target="_blank" href="https://github.com/episphere/diseasome">Github Code</a>
                 </li>
                 <li class="nav-item active"><a class="nav-link" target="_blank"
-                        href="https://observablehq.com/@lorenasandoval88/polygenic_risk_scores_sdk" target="_blank">Notebook</a>
+                        href="https://observablehq.com/@lorenasandoval88/polygenic_risk_scores_sdk"
+                        target="_blank">Notebook</a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" target="_blank" href="https://gitter.im/episphere/PRS">Discussion</a>
@@ -52,49 +53,62 @@
         <div class="container-fluid">
             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 hero-text">
                 <h3 class="hero_title">Diseasome</h3>
-                <p class="hero_desc">Calculation of multiple <a class="link-unstyled" href="https://www.nature.com/articles/nrg.2016.27"
-                        target="_blank">risk profiles</a> for <br>23andme reports,using the <a class="link-unstyled" href='https://www.pgscatalog.org' target="_blank">PGS Catalog</a>.</p>
-                    <button  class="glow-on-hover" onclick="location.href='https://observablehq.com/@lorenasandoval88/polygenic_risk_scores_sdk'" type="button">
-                        Get Started</button>
-                </div>
+                <p class="hero_desc">Calculation of multiple <a class="link-unstyled"
+                        href="https://www.nature.com/articles/nrg.2016.27" target="_blank">risk profiles</a> for
+                    <br>23andme reports,using the <a class="link-unstyled" href='https://www.pgscatalog.org'
+                        target="_blank">PGS Catalog</a>.</p>
+                <button class="glow-on-hover"
+                    onclick="location.href='https://observablehq.com/@lorenasandoval88/polygenic_risk_scores_sdk'"
+                    type="button">
+                    Get Started</button>
+            </div>
         </div>
 
     </section>
 
     <!-- pgs scoring counts bar plot ----------------------------->
-
-
-
-    <div class='graph-container'>
-        <div id="topBarCategories"></div>        <div id="secondBarCategories"></div>
-
-    </div>
+    <br>
+    <h5 style="color: rgb(6, 137, 231);">Select from the bar chart below, to display variant sizes for all entries
+        related to a specific category</h5>
 
     <div class='graph-container'>
+        <div id="topBarCategories"></div>
+        <div id="secondBarCategories"></div>
     </div>
+    <div id="secondBarCategoriesButton"></div>
+<!--  --------------------->
 
+    <br>
+    <h5 id="h5"></h5>
     <div class='graph-container'>
         <div id="pgsPie"></div>
         <div id="thirdBarCategories"></div>
     </div>
+    <div id="thirdBarCategoriesButton"></div>
 
-    <div class="spinner-border m-5" role="status" id="spinner">
+        <div class="spinner-border m-5" role="status" id="spinner">
         <span class="visually-hidden">Loading...</span>
     </div>
-<hr>
+
+<!--  --------------------->
+
+    <hr>
+    <h5 style="color: rgb(6, 137, 231);">Select from the bar charts below, to display variant sizes for all entries
+        related to a specific trait</h5>
+
     <div class='graph-container'>
         <div id="topBarTraits"></div>
         <div id="secondBarTraits"></div>
-
     </div>
+    <div id="secondBarTraitsButton"></div>
+
+
 
 
-
-
 
 
     <!-- scripts----------------------------------------------->
-  
+
     <script type="module" src="sdk/allTraits.js"></script>
     <script type="module" src="sdk/openSnp.js"></script>
     <script type="module" src="dependencies.js"></script>