fixed runpgs button

episphere · Oct 27, 2023 · 273af9d · 273af9d
1 parent ebf3039
commit 273af9d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 56 deletions.
diff --git a/app/calc.js b/app/calc.js
@@ -0,0 +1,25 @@
+console.log("calc.js")
+
+var makeButton = function () {
+    if (document.getElementById("button2") == null) {
+
+        var button = document.createElement('button');
+        button.innerHTML = 'Run pgs calcluations';
+        button.id = "button2"
+               // <h5>Polygenic Risk Score Calculator</h5>
+
+        button.onclick = function () {
+            (async () => {
+                //pgs23 = await import('http://127.0.0.1:5501/main.js')
+                //pgs23 = await import(location.href+'/export.js')
+                pgs23 = await import('https://episphere.github.io/diseasome/main.js')
+                pgs23.ui()
+            })()
+            return false;
+        };
+        document.getElementById("pgsDiv").appendChild(button);
+        console.log(button)
+    }
+};
+
+document.getElementById('myNum').addEventListener('change', makeButton);
diff --git a/index.html b/index.html
@@ -53,13 +53,10 @@
                         <img style="vertical-align:top" src="youtube_img.png" width="25" height="25"></img> Tutorial</a>
                 </li>
             </ul>
-
-
-
         </div>
     </nav>
 
-    <!-- side panel -->
+    <!-- side panel ----------------------------------------------->
     <section class="bgimage" id="home">
         <div class="container-fluid">
             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
@@ -73,7 +70,7 @@ <h2 class="hero_title">Diseasome</h2>
 
     </section>
 
-    <!-- pgs scoring counts bar plot -->
+    <!-- pgs scoring counts bar plot ----------------------------->
     <h5>PGS catalog Traits</h5>
     <div class="spinner-border m-5" role="status" id="spinner">
         <span class="visually-hidden">Loading...</span>
@@ -82,8 +79,7 @@ <h5>PGS catalog Traits</h5>
     <div id="pgsBar"></div>
 
 
-    <!--  input to select pgs trait -->
-
+    <!--  input to select pgs trait ------------------------------>
     <form>
         <h5>Select trait of interest</h5>
         <select id="myTrait2">
@@ -92,11 +88,11 @@ <h5>Select trait of interest</h5>
     </form>
     <br>
 
-    <!--  input to select variant number-->
-
+    <!--  input to select variant number --------------------------->
     <form>
         <h5>Select max number of variants in scoring files</h5>
         <select id="myNum">
+            <option>--Selelct variant limit from dropdown--</option>
             <option> 50</option>
             <option> 100 </option>
             <option> 500 </option>
@@ -105,21 +101,15 @@ <h5>Select max number of variants in scoring files</h5>
     </form>
     <br>
 
-    <!-- calc section-->
-    <section id="calculator">
-        <h5>Polygenic Risk Score Calculator</h5>
+    <!--  run calc for scores --------------------------->
+    <div id="pgsDiv"></div>
+
+    <!-- calc section----------------------------------------------->
         <div id="calcDiv">
-            <script>
-                (async () => {
-                    //pgs23 = await import('http://127.0.0.1:5501/main.js')
-                    //pgs23 = await import(location.href+'/export.js')
-                    pgs23 = await import('https://episphere.github.io/diseasome/main.js')
-                    pgs23.ui()
-                })()
-            </script>
+
         </div>
-    </section>
 
+    <script src="app/calc.js"></script>
 
     <script type="module" src="input2.js"></script>
     <script type="module" src="./input.js"></script>

diff --git a/input2.js b/input2.js
@@ -5,7 +5,6 @@ import {
   oneTrait,
   oneTraitSubset
 } from './sdk/oneTrait.js'
-
 //  TRAIT DROPDOWN --------------------------------------------------------------
 // populate trait drop down from oneTrait obj list
 var select = document.getElementById("myTrait2");
@@ -14,40 +13,43 @@ let div = document.createElement('div');
 div.id = 'trait2'
 
 
-/*execute a function when someone clicks trait drop down:*/
-select.addEventListener("click", function (e) {
-  let options = allTraits.dt.traits.map(x => x.trait).sort()
-
   // populate trait dropdown
+  select.addEventListener("click", function (e) {
+  let options = allTraits.dt.traits.map(x => x.trait).sort()
   for (var i = 0; i < options.length; i++) {
     var opt = options[i];
     var el = document.createElement("option");
     el.textContent = opt;
     el.value = opt;
     select.appendChild(el);
   }
+  if (oneTrait.dt.pgsIds != undefined) {
+    div.innerHTML = `Found ${oneTrait.dt.pgsIds.length} scoring files for "${myTrait2.value}"`
+    select.parentNode.appendChild(div)
+  }
+});
 
-  let pgsIds = []
-  allTraits.dt.traits.map(x => {
+
+/*list trait data when someone clicks trait drop down:*/
+select.addEventListener("click", function (e) {
+  let dt = allTraits.dt.traits.filter(x => {
     if (select.value.includes(x.trait)) {
-      pgsIds.push(x.ids)
+         return x
     }
-  }).flatMap(x => x)
-
-  if (pgsIds[0] != undefined) {
-    div.innerHTML = `Found ${pgsIds[0].length} scoring files for "${myTrait2.value}"`
+})
+  if (dt[0] != undefined) {
+    div.innerHTML = `Found ${dt[0].pgsIds.length} scoring files for "${myTrait2.value}"`
     select.parentNode.appendChild(div)
   }
 });
 
+
 // VARIANT NUMBER DROPDOWN --------------------------------------------------------------
-// populate trait drop down from oneTrait obj list
+// select variant number from second dropdown
 var select2 = document.getElementById("myNum");
-
 let div2 = document.createElement('div');
 div2.id = 'num2'
-
-/*execute a function when someone clicks in the document:*/
+/*list trait data when someone clicks the num dropdown:*/
 select2.addEventListener("click", function (e) {
   if (oneTraitSubset.dt.scoreFiles != undefined) {
     div2.innerHTML = `Found ${oneTraitSubset.dt.scoreFiles.length} scoring files for "${myTrait2.value}" with less than or equal to ${select2.value} SNPs`

diff --git a/main.js b/main.js
@@ -339,9 +339,11 @@ PGS23.Match2 = function (data, progressReport) {
 function ui() {
 
     let div = document.getElementById('calcDiv')
-
+    var h1= document.createElement('H1');
+    h1.innerHTML = "Description";
+    div.appendChild(h1)
     div.innerHTML = `
-    <span style="font-size:medium;">
+    <br><h5>Individual polygenic risk score calculation (PRS) for 23andme reports, using the PGS Catalog.</h5><span style="font-size:medium;">
 	Below you can select, and inspect, <b style="color:maroon">A)</b> the <a href='https://www.pgscatalog.org' target="_blank">PGS Catalog</a> entries with risk scores for a list of genomic variations; and <b style="color:maroon">B)</b> <a href="https://you.23andme.com/tools/data/download" target="_blank">Your 23andMe data download</a>. Once you have both (A) and (B), you can proceed to <b style="color:maroon">C)</b> to calculate your raw polygenic risk score for the trait targeted by the PGS entry based on <br>PRS  =  exp( ∑ ( 𝛽 * z )). Where β is the effect size (or beta) of one variant and z is the number of copies of the effect allele in that 23andme individual.
     </span>
     <hr>

diff --git a/sdk/allTraits.js b/sdk/allTraits.js
@@ -38,9 +38,6 @@ allTraits.dt.traitFiles = (await fetchAll2('https://www.pgscatalog.org/rest/trai
 let traits = Array.from(new Set(allTraits.dt.traitFiles.flatMap(x => x["trait_categories"])
 .sort().filter(e => e.length).map(JSON.stringify)), JSON.parse)
 
-//console.log("allTraits.dt.traitFiles",allTraits.dt.traitFiles)
-//console.log("allTraits.dt.traitFiles2",allTraits.dt.traitFiles2)
-
 traits.map( x =>  getAllPgsIds(x))
 
 
@@ -111,7 +108,7 @@ function getAllPgsIds(trait) {
     let obj = {}
     obj["trait"] = trait
     obj["count"] = pgsIds2.length
-    obj["ids"] = pgsIds2
+    obj["pgsIds"] = pgsIds2
     obj["traitFiles"] = traitFilesArr
     allTraits.dt.traits.push(obj)
 }

diff --git a/sdk/oneTrait.js b/sdk/oneTrait.js
@@ -10,8 +10,6 @@ let oneTrait = { functions: {},   dt: {}}
 let oneTraitSubset = {  functions: {},   dt: {}}
 
 
-
-
 //biuld object for one trait filtered by variant number
 /*execute a function when someone clicks in the document:*/
 const input2 = document.getElementById('myNum')
@@ -21,7 +19,6 @@ input2.addEventListener("click",async function (e) {
 
 });
 
-
   async function getTraitFiles(trait) {
     var obj = {}
     // get trait files that match selected trait from drop down
@@ -30,11 +27,14 @@ input2.addEventListener("click",async function (e) {
              return x
         }
     })
-    let scores =   await getscoreFiles(dt[0].ids)
+    console.log("dt", dt)
+    let scores =   await getscoreFiles(dt[0].pgsIds)
+    obj["trait"] = dt[0].trait
     obj["pgsIds"] = dt[0].ids
-    obj["traitFiles"] = dt[0].traitFiles
     obj["scoreFiles"] = scores
-    obj["trait"] = dt[0].trait
+    obj["traitFiles"] = dt[0].traitFiles
+    obj["variant_limit"] = "none"
+    console.log("oneTrait", obj)
     return  obj
 }
 
@@ -66,21 +66,28 @@ async function getscoreFiles(pgsIds) {
     return scores
 }
 
-
-async function getscoreFiles2() {
-    let obj = {}
+/*execute a function when someone clicks in the document:*/
+const input1 = document.getElementById('myTrait2')
+input1.addEventListener("change",async function (e) {
     var el = document.getElementById('myTrait2')
     let trait2 = el.value
-
     oneTrait.dt =  (await getTraitFiles(trait2))
 
+    console.log("oneTrait.dt", oneTrait.dt)
+
+});
+async function getscoreFiles2() {
+    let obj = {}
     let scores =  oneTrait.dt.scoreFiles
     let trait = oneTrait.dt.trait
     let num = document.getElementById("myNum").value
     // filter scores by the number of variant in a file
     let scores2 = scores.filter(x => x.variants_number < num)
-    obj["scoreFiles"] = scores2
+    let ids2 = scores.filter(x => x.variants_number < num).map(e=> e.id)
+    console.log("ids2:", ids2)
     obj["trait"] = trait
+    obj["pgsIds"] = ids2
+    obj["scoreFiles"] = scores2
     obj["variant_limit"] = num
     return obj
 }
@@ -205,8 +212,8 @@ async function parsePGS(i = 1) {
     return obj
 }
 
-console.log("oneTrait:", oneTrait)
-console.log("oneTraitSubset:", oneTraitSubset)
+// console.log("oneTrait:", oneTrait)
+// console.log("oneTraitSubset:", oneTraitSubset)
 
 export {
     oneTrait,