From 0792a387b7958f5b227052870fbaf8200e6427f6 Mon Sep 17 00:00:00 2001
From: lorenasandoval88 <43822820+lorenasandoval88@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:09:57 -0400
Subject: [PATCH] edited plot sizes

---
 index.html       | 10 ++++------
 sdk/allTraits.js | 34 +++++++++++++++++++++++-----------
 style.css        | 12 ++++++++++++
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 225532c..48d1272 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +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>
@@ -51,10 +52,8 @@
         <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 <br> (<a href="https://www.nature.com/articles/nrg.2016.27"
-                        target="_blank">risk profiles</a>) for
-                    23andme
-                    reports, using the <a href='https://www.pgscatalog.org' target="_blank">PGS Catalog</a>.</p>
+                <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>
@@ -65,14 +64,13 @@ <h3 class="hero_title">Diseasome</h3>
     <!-- pgs scoring counts bar plot ----------------------------->
   
 
-    <h6 class='display-4'>Counts of PGS entries</h6>
 
     <div class='graph-container'>
         <div id="topBarCategories"></div>
+        <div id="secondBarCategories"></div>
     </div>
 
     <div class='graph-container'>
-        <div id="secondBarCategories"></div>
         <div id="pgsPie"></div>
     </div>
 
diff --git a/sdk/allTraits.js b/sdk/allTraits.js
index a769ba1..19dea6e 100644
--- a/sdk/allTraits.js
+++ b/sdk/allTraits.js
@@ -157,14 +157,20 @@ let allTraitsDt = (await traitsData( traits)).sort(function (a, b) {return a.cou
 let topBarCategoriesDiv = document.getElementById("topBarCategories")
 var layout = {
     height: 500,
+    width: 500,
     autosize: true,
-    title: `${allTraitsDt.length} Categories`,
+    title: `Counts of PGS entries across ${allTraitsDt.length} Categories`,
     margin: {
-        l: 300,
+        l: 220,
         r: 50,
         t: -10,
         b: -10
-    }
+    },
+    xaxis: {
+        autorange: false,
+        range: [0, 300],
+        type: 'linear'
+    },
 }
 var dt = [{
     x: allTraitsDt.map(x => x.count),
@@ -197,13 +203,18 @@ let traitList = traitFiles.sort((a, b) => a.associated_pgs_ids.length - b.associ
 
 var layout = {
     autosize: true,
-    height: 700,
-    title: `${traitList.length} Traits`,
+    height: 1000,
+    title: `Counts of PGS entries across ${traitList.length} Traits`,
     margin: {
         l: 300,
         r: 50,
         t: -10,
         b: -10
+    },
+    xaxis: {
+        autorange: false,
+        range: [0, 30],
+        type: 'linear'
     }
 }
 
@@ -239,9 +250,10 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
 
     var layout = {
         autosize: true,
-        height: 900,
+        height: 600,
+        width: 600,
         title: `Variant sizes for ${pgsIds.length} ${data.points[0].y} entries `,
-        margin: {  l: 300,  r: 60,  t: -10, b: -10},
+        margin: {  l: 390,  r: 60,  t: -10, b: -10},
 
         xaxis: {
             autorange: false,
@@ -300,8 +312,8 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
     var layout = {
     title: `Proportion of ${data.points[0].y} entries`,
     autosize: false,
-    height: 900,
-    width: 900,
+    height: 600,
+    width: 600,
     }
     var data = [{
         values: Object.values(obj),
@@ -328,7 +340,7 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
                 color: data3.points[0].color,
             }
         }];
-        var layout2 = {
+        var layout = {
             autosize: true,
             title: `${res.length} ${data3.points[0].label} entries`,
             margin: {    l: 290,  r: 20,  t: -10, b: -10 },
@@ -340,7 +352,7 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
         }
 
         console.log("layout", layout2)
-        plotly.newPlot('thirdBarCategories', data2, layout2);
+        plotly.newPlot('thirdBarCategories', data2, layout);
 
     })
 })
diff --git a/style.css b/style.css
index 239c453..4c379a2 100644
--- a/style.css
+++ b/style.css
@@ -306,4 +306,16 @@ input[type=submit] {
   0% { background-position: 0 0; }
   50% { background-position: 400% 0; }
   100% { background-position: 0 0; }
+}
+
+.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
+  color: inherit;
+  text-decoration: inherit;
+}
+.bg-menu:hover {
+  background-color: #0079C1;
+  color: #FFFFFF;
+}
+.clickable {
+  cursor: pointer;
 }
\ No newline at end of file