Skip to content

Commit

Permalink
added line plot to prs
Browse files Browse the repository at this point in the history
  • Loading branch information
@lorenasandoval88
lorenasandoval88 committed Sep 12, 2024
1 parent 6c2e155 commit 5f392ac
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 112 deletions.
2 changes: 1 addition & 1 deletion sdk/get23.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
231 changes: 120 additions & 111 deletions sdk/ui.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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
}))
Expand All @@ -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 ///////////////////////////////////////////////////////////
Expand Down Expand Up @@ -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)
Expand All @@ -127,108 +139,105 @@ const ui = async function (targetDiv) {
div2.innerHTML += "<br>";
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
dt.users.phenotypeId = phenotypeId
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);
// })
export {
ui
}

0 comments on commit 5f392ac

Please sign in to comment.