diff --git a/sdk/allTraits.js b/sdk/allTraits.js
index ae3764c..4ed0195 100644
--- a/sdk/allTraits.js
+++ b/sdk/allTraits.js
@@ -23,132 +23,6 @@ const traits = Array.from(new Set(traitFiles.flatMap(x => x["trait_categories"])
.sort().filter(e => e.length).map(JSON.stringify)), JSON.parse)
traits.map(x => getAllPgsIdsByCategory(x))
-// get all data from API without limits--------------------------------------------
-async function fetchAll2(url, maxPolls = null) {
- var spinner = document.getElementById("spinner");
- spinner.style.display = "block";
- const allResults = []
- const counts = (await (await (fetch(url))).json())
- if (maxPolls == null) maxPolls = Infinity
-
- // loop throught the pgs catalog API to get all files using "offset"
- for (let i = 0; i < Math.ceil(counts.count / 100); i++) { //4; i++) { //maxPolls; i++) {
- let offset = i * 100
- let queryUrl = `${url}?limit=100&offset=${offset}`
-
- // get trait files and scoring files from indexDB if the exist
- let cachedData = await fetchAll.getItem(queryUrl);
-
- // cach url and data
- if (cachedData !== null) {
- allResults.push(cachedData)
- } else if (cachedData == null) {
- let notCachedData = (await (await fetch(queryUrl)).json()).results
- fetchAll.setItem(queryUrl, notCachedData);
- allResults.push(notCachedData)
- }
- if (allResults.length > 40) {
- break
- }
- }
- spinner.style.display = "none";
- return allResults
-}
-// remove local storage api requests that didnt go through--------------------
-async function removeLocalStorageValues(target, dbName) {
- let i = await dbName.length();
- while (i-- > 0) {
- let key = await dbName.key(i);
-
- if ((await dbName.getItem(key)).message != undefined) { //.includes(target)) {
- dbName.removeItem(key);
- console.log("removeLocalStorageValues with failed requests (limits)", i)
- }
- }
-}
-removeLocalStorageValues('request', pgs)
-
-// get pgsids for all 17 traits ------------------------------------------------
-async function traitsData(traits) {
- let dt
- if ((await pgs.getItem("traitsData")) === null) {
-
- dt = traits.map(trait => {
- let traitFilesArr = []
- let pgsIds = []
-
- traitFiles.map(tfile => {
- if (trait.includes(tfile["trait_categories"][0])) {
- traitFilesArr.push(tfile)
- }
- })
- if (traitFilesArr.length != 0) {
- pgsIds.push(traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().filter((v, i) => traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().indexOf(v) == i))
- }
- let pgsIds2 = pgsIds.flatMap(x => x)
-
- let obj = {}
- obj["trait"] = trait
- obj["count"] = pgsIds2.length
- obj["pgsIds"] = pgsIds2
- obj["traitFiles"] = traitFilesArr
- return obj
- })
- pgs.setItem("traitsData", dt)
-
- } else if (await pgs.getItem("traitsData") != null) {
- dt = await pgs.getItem("traitsData")
- }
- return dt
-}
-//--------------------------------------
-function getAllPgsIdsByCategory(trait) {
- let traitFilesArr = []
- let pgsIds = []
- // get trait files that match selected trait from drop down
- traitFiles.map(tfile => {
- if (trait.includes(tfile["trait_categories"][0])) {
- traitFilesArr.push(tfile)
- }
- })
- if (traitFilesArr.length != 0) {
- pgsIds.push(traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().filter((v, i) => traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().indexOf(v) == i))
- }
- return pgsIds.flatMap(x => x)
-
-}
-//--------------------------------------
-const timeout = (ms) => {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-//------------------------------------
-async function getscoreFiles(pgsIds) {
- var scores = []
- let i = 0
- while (i < pgsIds.length) {
- let url = `https://www.pgscatalog.org/rest/score/${pgsIds[i]}`
- let cachedData = await pgs.getItem(url);
- if (cachedData !== null) {
- scores.push(cachedData)
- } else if (cachedData == null) {
- console.log(i, "No cached data found for ", `${pgsIds[i]}`)
- await timeout(150); // pgs has 100 queries per minute limit
- let notCachedData =
- await (fetch(url)).then(function (response) {
- return response.json()
- })
- .then(function (response) {
- return response
- }).catch(function (ex) {
- console.log("There has been an error: ", ex)
- })
- pgs.setItem(url, notCachedData);
- scores.push(notCachedData)
- }
- i += 1
- }
- return scores
-}
// top bar plot of PGS entries by category--------------------------------------------------------------------------------
let allTraitsDt = (await traitsData(traits)).sort(function (a, b) {
return a.count - b.count
@@ -239,11 +113,11 @@ var dt = [{
plotly.newPlot(topBarTraitsDiv, dt, layout);
-// bar chart of variant sizes after category bar chart click-----------------------------------------
+// bar chart of variant sizes after click-----------------------------------------
topBarCategoriesDiv.on('plotly_click', async function (data) {
+ console.log("Category selected:",data.points[0].y)
let pgsIds = getAllPgsIdsByCategory(data.points[0].y)
let scoreFiles = (await getscoreFiles(pgsIds)).sort((a, b) => a.variants_number - b.variants_number)
-console.log("scoreFiles.length",scoreFiles.length)
var layout = {
autosize: true,
height: 600,
@@ -277,8 +151,8 @@ console.log("scoreFiles.length",scoreFiles.length)
// pie chart of traits -----------------------------------
topBarCategoriesDiv.on('plotly_click', async function (data) {
- const newH = document.getElementById("h5");
- newH.innerHTML = "Select a trait from the pie chart to display variant sizes for all entries related to that subcategory"
+ const newH = document.getElementById("pieHeader");
+ newH.innerHTML = "Select a subcategory to display entries and variant sizes"
newH.style = "color: rgb(6, 137, 231);"
let pgsIds = getAllPgsIdsByCategory(data.points[0].y)
let scoreFiles = (await getscoreFiles(pgsIds)).sort((a, b) => a.variants_number - b.variants_number)
@@ -301,20 +175,23 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
plotly.newPlot('pgsPie', data, layout);
// bar chart of variant size by trait from pie selection------------------------
- document.getElementById("pgsPie").on('plotly_click', async function (data3) {
- let res = scoreFiles.filter(x => x.trait_reported === data3.points[0].label).sort((a, b) => a.variants_number - b.variants_number)
- var data2 = [{
+ document.getElementById("pgsPie").on('plotly_click', async function (data2) {
+ let trait = data2.points[0].label
+ console.log("Subcategory selected:",data2.points[0].label)
+
+ let res = scoreFiles.filter(x => x.trait_reported === data2.points[0].label).sort((a, b) => a.variants_number - b.variants_number)
+ var data = [{
x: res.map(x => x.variants_number),
y: res.map(x => x.trait_reported.concat(" " + x.id)),
type: 'bar',
orientation: 'h',
marker: {
- color: data3.points[0].color,
+ color: data2.points[0].color,
}
}];
var layout = {
autosize: true,
- title: `Variant sizes ${res.length} "${data3.points[0].label}" entries`,
+ title: `Variant sizes ${res.length} "${data2.points[0].label}" entries`,
margin: {
l: 250
},
@@ -324,7 +201,7 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
type: 'linear'
},
}
- plotly.newPlot('thirdBarCategories', data2, layout);
+ plotly.newPlot('thirdBarCategories', data, layout);
// add download button for pgsIds
createButton("thirdBarCategories","button2", res);
@@ -333,7 +210,7 @@ topBarCategoriesDiv.on('plotly_click', async function (data) {
//bar chart of traits -----------------------------------------
topBarTraitsDiv.on('plotly_click', async function (data) {
-
+ console.log("Trait selected:",data.points[0].y)
let pgsIds = traitFiles.filter(tfile => tfile.label == data.points[0].label)[0].associated_pgs_ids
let scoreFiles = (await getscoreFiles(pgsIds)).sort((a, b) => a.variants_number - b.variants_number)
var layout = {
@@ -363,7 +240,7 @@ topBarTraitsDiv.on('plotly_click', async function (data) {
createButton("secondBarTraits","button3", scoreFiles);
})
-
+// FUNCTIONS------------------------------------------------------------------------
/** Download contents as a file
* Source: https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
*/
@@ -381,7 +258,7 @@ function downloadBlob(content, filename, contentType) {
pom.click();
}
-
+// make download buttons under plots
function createButton(parent,buttonId, dt) {
const button = document.createElement("button");
button.textContent = "download pgs IDs";
@@ -395,3 +272,131 @@ function createButton(parent,buttonId, dt) {
}
+// get all data from API without limits--------------------------------------------
+async function fetchAll2(url, maxPolls = null) {
+ var spinner = document.getElementById("spinner");
+ spinner.style.display = "block";
+ const allResults = []
+ const counts = (await (await (fetch(url))).json())
+ if (maxPolls == null) maxPolls = Infinity
+
+ // loop throught the pgs catalog API to get all files using "offset"
+ for (let i = 0; i < Math.ceil(counts.count / 100); i++) { //4; i++) { //maxPolls; i++) {
+ let offset = i * 100
+ let queryUrl = `${url}?limit=100&offset=${offset}`
+
+ // get trait files and scoring files from indexDB if the exist
+ let cachedData = await fetchAll.getItem(queryUrl);
+
+ // cach url and data
+ if (cachedData !== null) {
+ allResults.push(cachedData)
+ } else if (cachedData == null) {
+ let notCachedData = (await (await fetch(queryUrl)).json()).results
+ fetchAll.setItem(queryUrl, notCachedData);
+ allResults.push(notCachedData)
+ }
+ if (allResults.length > 40) {
+ break
+ }
+ }
+ spinner.style.display = "none";
+ return allResults
+}
+// remove local storage api requests that didnt go through--------------------
+async function removeLocalStorageValues(target, dbName) {
+ let i = await dbName.length();
+ while (i-- > 0) {
+ let key = await dbName.key(i);
+
+ if ((await dbName.getItem(key)).message != undefined) { //.includes(target)) {
+ dbName.removeItem(key);
+ console.log("removeLocalStorageValues with failed requests (limits)", i)
+ }
+ }
+}
+removeLocalStorageValues('request', pgs)
+
+// get pgsids for all 17 traits ------------------------------------------------
+async function traitsData(traits) {
+ let dt
+ if ((await pgs.getItem("traitsData")) === null) {
+
+ dt = traits.map(trait => {
+ let traitFilesArr = []
+ let pgsIds = []
+
+ traitFiles.map(tfile => {
+ if (trait.includes(tfile["trait_categories"][0])) {
+ traitFilesArr.push(tfile)
+ }
+ })
+ if (traitFilesArr.length != 0) {
+ pgsIds.push(traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().filter((v, i) => traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().indexOf(v) == i))
+ }
+ let pgsIds2 = pgsIds.flatMap(x => x)
+
+ let obj = {}
+ obj["trait"] = trait
+ obj["count"] = pgsIds2.length
+ obj["pgsIds"] = pgsIds2
+ obj["traitFiles"] = traitFilesArr
+ return obj
+ })
+ pgs.setItem("traitsData", dt)
+
+ } else if (await pgs.getItem("traitsData") != null) {
+ dt = await pgs.getItem("traitsData")
+ }
+ return dt
+}
+//--------------------------------------
+function getAllPgsIdsByCategory(trait) {
+ let traitFilesArr = []
+ let pgsIds = []
+ // get trait files that match selected trait from drop down
+ traitFiles.map(tfile => {
+ if (trait.includes(tfile["trait_categories"][0])) {
+ traitFilesArr.push(tfile)
+ }
+ })
+ if (traitFilesArr.length != 0) {
+ pgsIds.push(traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().filter((v, i) => traitFilesArr.flatMap(x => x.associated_pgs_ids).sort().indexOf(v) == i))
+ }
+ return pgsIds.flatMap(x => x)
+
+}
+//--------------------------------------
+const timeout = (ms) => {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
+//------------------------------------
+async function getscoreFiles(pgsIds) {
+ var scores = []
+ let i = 0
+ while (i < pgsIds.length) {
+ let url = `https://www.pgscatalog.org/rest/score/${pgsIds[i]}`
+ let cachedData = await pgs.getItem(url);
+ if (cachedData !== null) {
+ scores.push(cachedData)
+ } else if (cachedData == null) {
+ console.log(i, "No cached data found for ", `${pgsIds[i]}`)
+ await timeout(150); // pgs has 100 queries per minute limit
+ let notCachedData =
+ await (fetch(url)).then(function (response) {
+ return response.json()
+ })
+ .then(function (response) {
+ return response
+ }).catch(function (ex) {
+ console.log("There has been an error: ", ex)
+ })
+ pgs.setItem(url, notCachedData);
+ scores.push(notCachedData)
+ }
+ i += 1
+ }
+ return scores
+}
+
+
diff --git a/style.css b/style.css
index e2f8e7a..17ec48a 100644
--- a/style.css
+++ b/style.css
@@ -11,12 +11,12 @@
}
/* text css above hero image*/
.hero_title {
- font-size: 3.5rem;
+ font-size:2.5rem;
color: rgb(225, 222, 222);
}
.hero_desc {
- font-size: 1.2rem;
+ font-size: 1rem;
}
.hero-text {
text-align: left;
@@ -44,7 +44,7 @@
/* social media icons styling */
.social-icons {
- font-size: 36px;
+ font-size: 2px;
cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
@@ -91,7 +91,7 @@
position: absolute;
top: 0;
right: 25px;
- font-size: 36px;
+ font-size: 25px;
}
.openbtn {
@@ -108,16 +108,19 @@
}
/* nav bar*/
- @media (min-width: 768px) {
+ /* @media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
- }
-
-
-
+ } */
+ nav {
+ background: black;
+ color: rgb(25, 20, 20);
+ font-size: 0.7em !important;
+ }
+
body {
position: relative;