added default pgs to Cancer

episphere · Sep 11, 2024 · 9368415 · 9368415
1 parent 9d71cbb
commit 9368415
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -204,7 +204,6 @@ <h6 style="color: rgb(6, 137, 231);">Select an EFO id below:</h6>
     <script type="module" src="sdk/get23.js"></script>
     <script type="module" src="sdk/getPgs.js"></script>
     <script type="module" src="sdk/ui.js"></script>
-    <script type="module" src="sdk/sdk.js"></script>
     <script type="module" src="sdk/main.js"></script>
     <script type="module" src="sdk/plots.js"></script>
     <script type="module" src="dependencies.js"></script>

diff --git a/sdk/get23.js b/sdk/get23.js
@@ -203,11 +203,20 @@ get23.getPhenotypeNameFromId = async function (id) {
     //console.log("---------------------------")
     //console.log("running... get23.getPhenotypeNameFromId function")
     const dt = await get23.getUserPhenotypes()
-    // //console.log("dt",dt)
+    console.log("dt",dt)
     const name = dt.filter(x => x.id == id)[0].characteristic
     //console.log("Phenotype id", id, "corresponds to:", name)
     return name
 }
+get23.getPhenotypeIdFromName = async function (characteristic) {
+    console.log("---------------------------")
+    console.log("running... get23.getPhenotypeNameFromId function")
+    const dt = await get23.getUserPhenotypes()
+    console.log("dt",dt)
+    const id = dt.filter(x => x.characteristic == characteristic)[0].id
+    console.log("Phenotype name", id, "corresponds to:", characteristic)
+    return id
+}
 
 // const id = 3
 const keysLen = 5

diff --git a/sdk/ui.js b/sdk/ui.js
@@ -28,7 +28,7 @@ const ui = async function (targetDiv) {
 
     // DROPDOWN PGS entries ///////////////////////////////////////////////////////////
     const dt = {}
-    const category = "Cancer"
+    // const category = "Cancer"
     // we need to define pgs categories and user phenotypes functions in the UI or it's slow to load from another page
     let categories
     categories = await pgsCategories.getItem("categories")
@@ -38,27 +38,65 @@ const ui = async function (targetDiv) {
         categories = (await fetch(`https://corsproxy.io/?https://www.pgscatalog.org/rest/trait_category/all`)).json().results.sort()
         pgsCategories.setItem("categories", categories)
     }
+
     // Create the dropdown (select) element
     const dropdown = document.createElement("select");
+    dropdown.id = "pgsSelect";
+
     // Create options and add them to the dropdown
     (await categories.results).map(x => {
+        // console.log("x",x)
         const op = new Option();
+        if(x.label == "Cancer"){op.defaultSelected = "Cancer"}
         op.value = x.label;
         op.text = x.label;
         dropdown.options.add(op)
     })
+
     // Add the dropdown to the div
     div.appendChild(dropdown);
 
+    let category = "Cancer"
+    dt.pgs = {}
+    let pgsIds = (await (getPgs.idsFromCategory(category))).sort().slice(5,8)
+
+    console.log("pgsIds",pgsIds)
+    let pgsTxts = await Promise.all( pgsIds.map(async x => {
+        let res = await getPgs.loadScoreHm(x)
+        return res
+    }))
+
+    dt.pgs.category = category
+    dt.pgs.ids = pgsIds
+    dt.pgs.txts = pgsTxts
+    //TODO, make dropdown select onchange reversable
+    document.getElementById("pgsSelect").addEventListener("change", async (e) => {
+         category = e.target.value
+        console.log("PGS category selected: ",e.target.value)
+        // TODO filter ids by variant number using get scoreFIles
+            let pgsIds = (await (getPgs.idsFromCategory(category))).sort().slice(5,8)
+
+            console.log("pgsIds",pgsIds)
+            let pgsTxts = await Promise.all( pgsIds.map(async x => {
+                let res = await getPgs.loadScoreHm(x)
+                return res
+            }))
+
+            dt.pgs.category = category
+            dt.pgs.ids = pgsIds
+            dt.pgs.txts = pgsTxts
+    })
+
     // DROPDOWN 23andme users ///////////////////////////////////////////////////////////
     let phenotypes
-    phenotypes = await userPhenotypes.getItem('https://opensnp.org/phenotypes.json');
+    phenotypes = (await userPhenotypes.getItem('https://opensnp.org/phenotypes.json')).sort((a, b) => a.characteristic.localeCompare(b.characteristic))
+    // console.log("phenotypes",phenotypes)
 
     if (phenotypes == null) {
         const phenotypes = (await (await fetch(`https://corsproxy.io/?https://opensnp.org/phenotypes.json`)).json()).sort((a, b) => b.number_of_users - a.number_of_users)
         userPhenotypes.setItem(url, phenotypes);
     }
-    const phenotypeId = 3
+    // const phenotypeId = 3
     const keysLen = 5
     const maxKeys = 14
     const storageSize = 1.3
@@ -71,6 +109,7 @@ const ui = async function (targetDiv) {
     <br><p>Select a user Category:</p>`
     // Create the dropdown (select) element
     const dropdown2 = document.createElement("select");
+    dropdown2.id = "userSelect"
     // Create options and add them to the dropdown
     phenotypes.map(x => {
         const op = new Option();
@@ -79,40 +118,36 @@ const ui = async function (targetDiv) {
         dropdown2.options.add(op)
     })
     // add dropdown to the div
-    div2.appendChild(dropdown2);
-
-    // SAVE PGS AND 23me DATA IN DT OBJ///////////////////////////
     dt.users = {}
 
-    const userTxts = (await get23.getUsersByPhenotypeId(phenotypeId, keysLen, maxKeys)).filter(x=> x.qc == true)
-    const phenotypeLabel = await get23.getPhenotypeNameFromId(phenotypeId)
-    // dt.users.phenotypes = phenotypes
-    dt.users.phenotypeLabel = phenotypeLabel
-    dt.users.phenotypeId = phenotypeId
-    dt.users.txts = userTxts
-    // console.log("userTxts", userTxts)
-    dt.pgs = {}
-// TODO filter ids by variant number using get scoreFIles
-    let pgsIds = (await (getPgs.idsFromCategory(category))).sort().slice(5,10)
-    // console.log("pgsIds",pgsIds)
-    let pgsTxts = await Promise.all( pgsIds.map(async x => {
-        let res = await getPgs.loadScoreHm(x)
-        return res
-    }))
-
-    dt.pgs.category = category
-    dt.pgs.ids = pgsIds
-    dt.pgs.txts = pgsTxts
-
+    div2.appendChild(dropdown2);
+    document.getElementById("userSelect").addEventListener("change", async (e) => {
+        console.log("User category selected: ",e.target.value)
+        const phenotypeLabel = e.target.value
+        const phenotypeId =  await get23.getPhenotypeIdFromName(phenotypeLabel)
+        const userTxts = (await get23.getUsersByPhenotypeId(phenotypeId, keysLen, maxKeys)).filter(x=> x.qc == true)
+
+        // dt.users.phenotypes = phenotypes
+        dt.users.phenotypeLabel = phenotypeLabel
+        dt.users.phenotypeId = phenotypeId
+        dt.users.txts = userTxts
+        console.log("dt------", dt)
+// TODO add onlcick button for prsc calculation
+        // console.log("userTxts", userTxts)
+         // SAVE PGS AND 23me DATA IN DT OBJ///////////////////////////
     // create input matrix for prs.calc
     let data = {}
     data.PGS =  dt.pgs.txts
     data.my23 = dt.users.txts//x.year > "2011" & 
+     console.log("data", data)
+
     //calculate prs    
     let prsDt = await PRS.calc(data)
     prsDt.pgs.category = category
     // if prs qc failes for one user, remove the connected pgs entry
     console.log("results: ",  prsDt)
+    })
+
 
 }