From 5f392ac169fff1151c9f078c41d62d7c5eb34893 Mon Sep 17 00:00:00 2001 From: lorenasandoval88 <43822820+lorenasandoval88@users.noreply.github.com> Date: Thu, 12 Sep 2024 09:21:26 -0400 Subject: [PATCH] added line plot to prs --- sdk/get23.js | 2 +- sdk/ui.js | 231 ++++++++++++++++++++++++++------------------------- 2 files changed, 121 insertions(+), 112 deletions(-) diff --git a/sdk/get23.js b/sdk/get23.js index 4ac0370..081e1a6 100644 --- a/sdk/get23.js +++ b/sdk/get23.js @@ -178,7 +178,7 @@ get23.getUsersByPhenotypeId = async function (phenoId, keysLen, maxKeys) { if (userIds2.length < maxUsers) { cleanUsers = get23.getUsersByType("23andme", userIds2) } else { - cleanUsers = await (get23.getUsersByType("23andme", userIds2.slice(6, 10)))//.slice(0,maxUsers) + cleanUsers = await (get23.getUsersByType("23andme", userIds2.slice(6, 12)))//.slice(0,maxUsers) console.log("Warning: user txts for phenotypeID", phenoId, "> 7. First 6 files used.") } // get 23 and me texts from urls using getTxts function diff --git a/sdk/ui.js b/sdk/ui.js index da75fdc..689c4cd 100644 --- a/sdk/ui.js +++ b/sdk/ui.js @@ -1,7 +1,15 @@ -import {getPgs} from "./getPgs.js" -import {get23} from "./get23.js" - -import {PRS} from "./prs.js" +import { + getPgs +} from "./getPgs.js" +import { + get23 +} from "./get23.js" +import { + plotly +} from "../dependencies.js"; +import { + PRS +} from "./prs.js" import localforage from 'https://cdn.skypack.dev/localforage'; // NOtes: I have to run the calc on QC passed users and pgs entries. Then, I run the calc @@ -48,21 +56,23 @@ const ui = async function (targetDiv) { (await categories.results).map(x => { // console.log("x",x) const op = new Option(); - if(x.label == "Cancer"){op.defaultSelected = "Cancer"} + 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 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 })) @@ -72,20 +82,20 @@ const ui = async function (targetDiv) { 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) + 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 + 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 /////////////////////////////////////////////////////////// @@ -115,7 +125,9 @@ const ui = async function (targetDiv) { phenotypes.map(x => { const op = new Option(); - if(x.characteristic == "Cervical dysplasia / cancer"){op.defaultSelected = "Cervical dysplasia / cancer"} + if (x.characteristic == "Cervical dysplasia / cancer") { + op.defaultSelected = "Cervical dysplasia / cancer" + } op.value = x.characteristic; op.text = x.characteristic; dropdown2.options.add(op) @@ -127,18 +139,18 @@ const ui = async function (targetDiv) { div2.innerHTML += "
"; div2.appendChild(document.createElement("br")) - var prsButton = document.createElement("button"); + var prsButton = document.createElement("button"); prsButton.id = "prsButton" prsButton.innerHTML = `Calculate` div2.appendChild(prsButton); document.getElementById("prsButton").addEventListener("click", async (e) => { - console.log("User category selected: ",document.getElementById("userSelect").value) - const phenotypeLabel =document.getElementById("userSelect").value// e.target.value - const phenotypeId = await get23.getPhenotypeIdFromName(phenotypeLabel) - console.log("phenotypeId",phenotypeId) - const userTxts = (await get23.getUsersByPhenotypeId(phenotypeId, keysLen, maxKeys)).filter(x=> x.qc == true) - console.log("userTxts",userTxts) + console.log("User category selected: ", document.getElementById("userSelect").value) + const phenotypeLabel = document.getElementById("userSelect").value // e.target.value + const phenotypeId = await get23.getPhenotypeIdFromName(phenotypeLabel) + console.log("phenotypeId", phenotypeId) + const userTxts = (await get23.getUsersByPhenotypeId(phenotypeId, keysLen, maxKeys)).filter(x => x.qc == true) + console.log("userTxts", userTxts) // dt.users.phenotypes = phenotypes dt.users.phenotypeLabel = phenotypeLabel @@ -146,89 +158,86 @@ const ui = async function (targetDiv) { dt.users.txts = userTxts // TODO add onlcick button for prsc calculation - // 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) + // 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) + data.PRS = prsDt.prs + + prsDt.pgs.category = category + // if prs qc failes for one user, remove the connected pgs entry + console.log("results: ", prsDt) + + // plot PRS -------------------------------------------------------------------- + var prsDiv = document.createElement("div"); + prsDiv.id = "prsDiv" + div2.appendChild(prsDiv); + + var layout = { + showlegend: true, + autosize: false, + height: 900, + width: 800, + title: `PRS scores`, + yaxis: { + title: { + text: "PRS" + }, + }, + xaxis: { + title: { + text: "Users" + }, + }, + margin: { + b: 440 + } + } + + // reverse look up the PRS matrix to fill the traces + let traces = {} + data.PGS.map((x, i) => { + let arr = [] + let idx = i + // let snpTxts2 = snpTxts.filter(x=> x.meta.split(/\r?\n|\r|\n/g)[0].slice(-4) > 2010) + + data.my23.map(y => { + arr.push(data.PRS[idx]) + idx += data.PGS.length + }) + traces[data.PRS[i].pgsId] = arr + }) + //console.log("traces",traces) + let plotData = Object.keys(traces).map((x, i) => { + let obj = { + y: traces[x].map(x => x.PRS), + x: traces[x].map(x => { + let monthDay = x.my23meta.split(/\r?\n|\r|\n/g)[0].slice(-20, -14) + let year = x.my23meta.split(/\r?\n|\r|\n/g)[0].slice(-4) + // TODO add variation to data + let phenotypeVariation = x.openSnp.id //[output.userPhenotype]["variation"] + let xlabel = phenotypeVariation + "_" + x.openSnp.name + "_" + "ID" + "_" + x.my23Id + "_" + year + "_" + monthDay + return xlabel + }), + mode: 'lines+markers', + opacity: 0.80, + hoverinfo: "y", + name: x + ": " + data.PGS[i].meta.variants_number + " variants", + } + return obj + }) + plotly.newPlot(prsDiv, plotData, layout); }) - } ui("prsDiv") -export {ui} - - -// document.getElementById('prsButton').addEventListener('click', async function(event) { -// let data = {} -// data.PGS = Object.values(output["myPgsTxts"])[0].slice(0,10)//.filter(x => x.qc == "true") - -// //console.log('output:', output) -// data.my23 = output["my23"].slice(0,10) -// //console.log("data",data) - -// let prsDt = PRS.calc(data) -// data["PRS"] = await prsDt - -// // plot PRS -------------------------------------------------------------------- -// let prsDiv = document.getElementById("prsDiv") -// var layout = { -// showlegend: true, -// autosize: false, -// height: 900, -// width: 800, -// title: `PRS scores`, -// yaxis: { -// title: { -// text: "PRS"}, -// }, -// xaxis:{ -// title: { -// text: "Users"}, -// }, -// margin: {b: 440 } -// } - -// // reverse look up the PRS matrix to fill the traces -// let traces = {} -// data.PGS.map( (x,i) => { -// let arr = [] -// let idx = i -// // let snpTxts2 = snpTxts.filter(x=> x.meta.split(/\r?\n|\r|\n/g)[0].slice(-4) > 2010) - -// data.my23.map( y => { -// arr.push( data.PRS[idx]) -// idx += data.PGS.length -// }) -// traces[data.PRS[i].pgsId] = arr -// }) -// //console.log("traces",traces) -// let plotData= Object.keys(traces).map( (x, i) =>{ -// let obj = { -// y: traces[x].map( x => x.PRS), -// x: traces[x].map( x => { - -// let monthDay = x.my23meta.split(/\r?\n|\r|\n/g)[0].slice(-20,-14) -// let year = x.my23meta.split(/\r?\n|\r|\n/g)[0].slice(-4) -// let phenotypeVariation = x.openSnp.phenotypes[output.userPhenotype]["variation"] -// let xlabel = phenotypeVariation + "_" + x.openSnp.name + "_" + "ID" + "_" + x.my23Id + "_" + year + "_" + monthDay -// return xlabel -// }), -// mode: 'lines+markers', -// opacity: 0.80, -// hoverinfo:"y", -// name: x + ": "+ data.PGS[i].meta.variants_number + " variants", -// } -// return obj -// }) -// plotly.newPlot(prsDiv, plotData, layout); -// }) \ No newline at end of file +export { + ui +}