From e0f351f68b0bba7be2b767fe1e17dace9de35433 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Fri, 14 Jan 2022 13:58:30 -0500 Subject: [PATCH 01/14] https://github.com/databio/bedstat/issues/31 --- package.json | 2 +- src/about.jsx | 8 ++-- src/bedCountsSpan.jsx | 87 ++++++++++++++++++++++++++++++++++++ src/bedInfo.jsx | 4 +- src/bedSetSplash.jsx | 10 ++--- src/bedSetTable.jsx | 2 +- src/graphql/bedQueries.js | 5 ++- src/graphql/bedSetQueries.js | 5 ++- 8 files changed, 106 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 0c61152..97d1a0d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "axios": "^0.21.1", "bootstrap": "^4.6.0", "copy-to-clipboard": "^3.3.1", - "graphql": "^15.6.1", + "graphql": "^15.7.2", "jQuery-QueryBuilder": "^2.6.2", "lodash": "^4.17.21", "material-table": "1.69.1", diff --git a/src/about.jsx b/src/about.jsx index 3232ed8..99e6b2d 100644 --- a/src/about.jsx +++ b/src/about.jsx @@ -155,10 +155,10 @@ export default class Info extends React.Component { fontWeight: "bold", }} > - Mean absolute distance from TSS + Median TSS distance - The average absolute distance to the Transcription + The median absolute distance to the Transcription Start Sites (TSS) @@ -310,10 +310,10 @@ export default class Info extends React.Component { fontWeight: "bold", }} > - Mean absolute distance from TSS + Median TSS distance - The average absolute distance to the Transcription + The median absolute distance to the Transcription Start Sites (TSS) of the BED set. diff --git a/src/bedCountsSpan.jsx b/src/bedCountsSpan.jsx index d4f1c18..33f982d 100644 --- a/src/bedCountsSpan.jsx +++ b/src/bedCountsSpan.jsx @@ -85,6 +85,92 @@ export default class BedCountsSpan extends React.Component { bedstat and bedbuncher pipeline.{" "}
+ + { + + + + + + + + + + + + + + + + + + + + + +
+ Server Name + + URL + + Maintainer + + Description +
+ Primary server + + + http://bedbase.org + + + Sheffield lab + + Main demonstration server +
+ Dev server + + + http://dev1.bedbase.org + + + Sheffield lab + + Developmental server +
+ }
) diff --git a/src/bedInfo.jsx b/src/bedInfo.jsx index 188e5a6..1fa3639 100644 --- a/src/bedInfo.jsx +++ b/src/bedInfo.jsx @@ -129,8 +129,8 @@ export default function BedInfo(props) { }} > {value.label === - "Mean absolute distance from transcription start sites" ? ( - <>Mean absolute distance from TSS + "Median absolute distance from transcription start sites" ? ( + <>Median TSS distance ) : ( <>{value.label} )} diff --git a/src/bedSetSplash.jsx b/src/bedSetSplash.jsx index 6e7be2f..5073f4b 100644 --- a/src/bedSetSplash.jsx +++ b/src/bedSetSplash.jsx @@ -140,10 +140,10 @@ export default class BedSetSplash extends React.Component { data: [avg.gc_content.toFixed(3), sd.gc_content.toFixed(3)], }, { - label: bed_schema["mean_absolute_tss_dist"].description, + label: bed_schema["median_absolute_tss_dist"].description, data: [ - avg.mean_absolute_tss_dist.toFixed(3), - sd.mean_absolute_tss_dist.toFixed(3), + avg.median_absolute_tss_dist.toFixed(3), + sd.median_absolute_tss_dist.toFixed(3), ], }, { @@ -332,8 +332,8 @@ export default class BedSetSplash extends React.Component { }} > {value.label === - "Mean absolute distance from transcription start sites" ? ( - <>Mean absolute distance from TSS + "Median absolute distance from transcription start sites" ? ( + <>Median TSS distance ) : ( <>{value.label} )} diff --git a/src/bedSetTable.jsx b/src/bedSetTable.jsx index 1f75799..8fc895b 100644 --- a/src/bedSetTable.jsx +++ b/src/bedSetTable.jsx @@ -115,7 +115,7 @@ export default class BedSetTable extends React.Component { }); } else if (i !== 0) { if ( - cols[i] === "meanAbsoluteTssDist" || + cols[i] === "medianTssDist" || cols[i] === "meanRegionWidth" ) { tableColumns.push({ diff --git a/src/graphql/bedQueries.js b/src/graphql/bedQueries.js index 9984e3a..dea4f6b 100644 --- a/src/graphql/bedQueries.js +++ b/src/graphql/bedQueries.js @@ -16,6 +16,7 @@ export const GET_SAMPLE_BED = gql` md5sum } } + totalCount } } `; @@ -63,7 +64,7 @@ export const GET_BED_STATS = gql` node { gcContent regionsNo - meanAbsoluteTssDist + medianTssDist meanRegionWidth exonPercentage intronPercentage @@ -188,7 +189,7 @@ export const GET_BED_SPLASH = gql` bigbedfile gcContent regionsNo - meanAbsoluteTssDist + medianTssDist meanRegionWidth exonPercentage intronPercentage diff --git a/src/graphql/bedSetQueries.js b/src/graphql/bedSetQueries.js index 40c31e4..bc7a781 100644 --- a/src/graphql/bedSetQueries.js +++ b/src/graphql/bedSetQueries.js @@ -40,6 +40,7 @@ export const GET_SAMPLE_BEDSET = gql` md5sum } } + totalCount } } `; @@ -98,7 +99,7 @@ export const GET_BEDSET_BEDFILES = gql` regionsNo gcContent meanRegionWidth - meanAbsoluteTssDist + medianTssDist exonFrequency exonPercentage intronFrequency @@ -175,7 +176,7 @@ export const GET_BEDSET_SPLASH = gql` regionsNo gcContent meanRegionWidth - meanAbsoluteTssDist + medianTssDist exonFrequency exonPercentage intronFrequency From 38fed381c78d448b64318724af3e90c0f41cf618 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Fri, 14 Jan 2022 22:27:05 -0500 Subject: [PATCH 02/14] update trackhub file path with endpoint url: https://github.com/databio/bedhost/issues/44 --- src/about.jsx | 2 +- src/bedSetSplash.jsx | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/about.jsx b/src/about.jsx index 99e6b2d..dd28050 100644 --- a/src/about.jsx +++ b/src/about.jsx @@ -313,7 +313,7 @@ export default class Info extends React.Component { Median TSS distance - The median absolute distance to the Transcription + The average median absolute distance to the Transcription Start Sites (TSS) of the BED set. diff --git a/src/bedSetSplash.jsx b/src/bedSetSplash.jsx index 5073f4b..a962f99 100644 --- a/src/bedSetSplash.jsx +++ b/src/bedSetSplash.jsx @@ -131,19 +131,21 @@ export default class BedSetSplash extends React.Component { hubFilePath: "http://genome.ucsc.edu/cgi-bin/hgTracks?db=" + JSON.parse(res.genome).alias + - "&hubUrl=http://data.bedbase.org/outputs/bedbuncher_output/" + + "&hubUrl=" + + bedhost_api_url + + "/api/bedset/" + this.props.match.params.bedset_md5sum + - "/bedsetHub/hub.txt", + "/track_hub", bedSetStat: [ { label: bed_schema["gc_content"].description, data: [avg.gc_content.toFixed(3), sd.gc_content.toFixed(3)], }, { - label: bed_schema["median_absolute_tss_dist"].description, + label: bed_schema["median_tss_dist"].description, data: [ - avg.median_absolute_tss_dist.toFixed(3), - sd.median_absolute_tss_dist.toFixed(3), + avg.median_tss_dist.toFixed(3), + sd.median_tss_dist.toFixed(3), ], }, { From 89879774324e7dce723cb9a96517f25ac9e1fa1e Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Wed, 19 Jan 2022 01:26:46 -0500 Subject: [PATCH 03/14] rename endpoint https://github.com/databio/bedhost-ui/issues/6 --- src/bedCountsSpan.jsx | 2 +- src/bedSetSplash.jsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/bedCountsSpan.jsx b/src/bedCountsSpan.jsx index 33f982d..963cce2 100644 --- a/src/bedCountsSpan.jsx +++ b/src/bedCountsSpan.jsx @@ -40,7 +40,7 @@ export default class BedCountsSpan extends React.Component { // console.log("BED set count retrieved from the server: ", bscount.data); this.setState({ bedSet: bscount.data }); - let bed = await api.get("/api/bed/all/data?ids=md5sum&limit=1").then(({ data }) => data); + let bed = await api.get("/api/bed/all/metadata?ids=md5sum&limit=1").then(({ data }) => data); let bedurl = '/bedsplash/' + bed.data[0][0] this.setState({ sampleBed: bedurl }); diff --git a/src/bedSetSplash.jsx b/src/bedSetSplash.jsx index a962f99..349db92 100644 --- a/src/bedSetSplash.jsx +++ b/src/bedSetSplash.jsx @@ -405,7 +405,7 @@ export default class BedSetSplash extends React.Component { bedhost_api_url + "/api/bedset/" + this.props.match.params.bedset_md5sum + - "/data" + "/metadata" } className="home-link" style={{ @@ -441,7 +441,7 @@ export default class BedSetSplash extends React.Component { bedhost_api_url + "/api/bedset/" + this.props.match.params.bedset_md5sum + - "/data?ids=bedset_means&ids=bedset_standard_deviation" + "/metadata?ids=bedset_means&ids=bedset_standard_deviation" } className="home-link" style={{ @@ -459,7 +459,7 @@ export default class BedSetSplash extends React.Component { bedhost_api_url + "/api/bedset/" + this.props.match.params.bedset_md5sum + - "/data?ids=region_commonality" + "/metadata?ids=region_commonality" } className="home-link" style={{ From caefad5a53b695f6f050b0dbbe505cb69fcd1624 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Wed, 19 Jan 2022 01:29:57 -0500 Subject: [PATCH 04/14] rename endpoint https://github.com/databio/bedhost-ui/issues/6 --- src/bedCountsSpan.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/bedCountsSpan.jsx b/src/bedCountsSpan.jsx index 963cce2..2ef1070 100644 --- a/src/bedCountsSpan.jsx +++ b/src/bedCountsSpan.jsx @@ -25,7 +25,7 @@ export default class BedCountsSpan extends React.Component { async componentDidMount() { let bfcount = await api - .get("/api/bed/all/data/count") + .get("/api/bed/count") .catch(function (error) { alert(error + "; is bedhost running at " + bedhost_api_url + "?"); }); @@ -33,7 +33,7 @@ export default class BedCountsSpan extends React.Component { this.setState({ bed: bfcount.data }); let bscount = await api - .get("/api/bedset/all/data/count") + .get("/api/bedset/count") .catch(function (error) { alert(error + "; is bedhost running at " + bedhost_api_url + "?"); }); From 3172655a9dc27cddf90e68b05e213db7ce824ef0 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Wed, 19 Jan 2022 01:33:44 -0500 Subject: [PATCH 05/14] rename endpoint https://github.com/databio/bedhost-ui/issues/6 --- src/bedSetSplash.jsx | 4 ++-- src/bedSplash.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/bedSetSplash.jsx b/src/bedSetSplash.jsx index 349db92..34e1680 100644 --- a/src/bedSetSplash.jsx +++ b/src/bedSetSplash.jsx @@ -40,10 +40,10 @@ export default class BedSetSplash extends React.Component { async componentDidMount() { // get table schema via fastAPI const bed_schema = await api - .get("/api/bed/all/schema") + .get("/api/bed/schema") .then(({ data }) => data); const bedset_schema = await api - .get("/api/bedset/all/schema") + .get("/api/bedset/schema") .then(({ data }) => data); // get bedsetsplash data via Graphql diff --git a/src/bedSplash.jsx b/src/bedSplash.jsx index b409fad..cdf31a2 100644 --- a/src/bedSplash.jsx +++ b/src/bedSplash.jsx @@ -34,7 +34,7 @@ export default class BedSplash extends React.Component { } async componentDidMount() { - let schema = await api.get("/api/bed/all/schema").then(({ data }) => data); + let schema = await api.get("/api/bed/schema").then(({ data }) => data); this.setState({ bedSchema: schema }); await api From c2ccec4cad00142cc79ec98a60b0a11c9e130479 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Fri, 21 Jan 2022 15:45:05 -0500 Subject: [PATCH 06/14] fix endpoint url --- src/bedCountsSpan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bedCountsSpan.jsx b/src/bedCountsSpan.jsx index 2ef1070..0040930 100644 --- a/src/bedCountsSpan.jsx +++ b/src/bedCountsSpan.jsx @@ -44,7 +44,7 @@ export default class BedCountsSpan extends React.Component { let bedurl = '/bedsplash/' + bed.data[0][0] this.setState({ sampleBed: bedurl }); - let bedset = await api.get("/api/bedset/all/data?ids=md5sum&limt=1").then(({ data }) => data) + let bedset = await api.get("/api/bedset/all/metadata?ids=md5sum&limt=1").then(({ data }) => data) let bedseturl = '/bedsetsplash/' + bedset.data[0][0] this.setState({ sampleBedSet: bedseturl }); this.getAPIcount() From c89f92971294b8e14700728fe70283c36e861339 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Mon, 16 May 2022 15:31:56 -0400 Subject: [PATCH 07/14] hide iGD download --- src/bedSetSplash.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/bedSetSplash.jsx b/src/bedSetSplash.jsx index 34e1680..a57650c 100644 --- a/src/bedSetSplash.jsx +++ b/src/bedSetSplash.jsx @@ -59,8 +59,10 @@ export default class BedSetSplash extends React.Component { let bedSetFile = [] Object.entries(res).forEach(([key, value], index) => { + console.log(key) if (bedset_schema[key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)] && - bedset_schema[key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)].type === "file") { + bedset_schema[key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)].type === "file" && + key !== "bedsetIgdDatabasePath") { bedSetFile.push({ id: key, label: bedset_schema[key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)].label.replaceAll("_", " "), From a05f0ee356f93e5b0e96a619d4275a0b1b744647 Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Thu, 9 Jun 2022 14:59:41 -0400 Subject: [PATCH 08/14] update dist score calculation --- src/searchResult.jsx | 69 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 61 insertions(+), 8 deletions(-) diff --git a/src/searchResult.jsx b/src/searchResult.jsx index f99982f..3c408d1 100644 --- a/src/searchResult.jsx +++ b/src/searchResult.jsx @@ -42,6 +42,11 @@ export default class ResultsBed extends React.Component { variables: { filters: { searchTermIlike: terms[0] } }, }) .then(({ data }) => data.distances.edges); + res = res.map((bed, index) => { + if (JSON.parse(bed.node.bedfile.genome).alias === this.props.genome) { + return bed; + } + }); res = res.slice().sort((a, b) => a.node.score - b.node.score); } else { res = []; @@ -56,11 +61,11 @@ export default class ResultsBed extends React.Component { if (j === 0) { res = new_res; } else if (j === terms.length - 1) { - res = this.getAvgDist(res, new_res, terms.length).sort( + res = this.getAvgDist(res, new_res).sort( (a, b) => a.node.score - b.node.score ); } else { - res = this.getAvgDist(res, new_res, 1); + res = this.getAvgDist(res, new_res); } } } @@ -85,8 +90,31 @@ export default class ResultsBed extends React.Component { this.getData(); } - getAvgDist(old_res, new_res, len) { - var editable = _.cloneDeep(old_res); + getUnique(arr1, arr2) { + var uniqueArr = [] + for (var i = 0; i < arr1.length; i++) { + var flag = 0; + for (var j = 0; j < arr2.length; j++) { + if (arr1[i] === arr2[j]) { + arr2.splice(j, 1); + j--; + flag = 1; + } + } + + if (flag === 0) { + uniqueArr.push(arr1[i]); + } + } + uniqueArr.push(arr2); + return uniqueArr; + } + + getAvgDist(old_res, new_res) { + + const thresh = 0.5 + var oldres = _.cloneDeep(old_res); + var newres = _.cloneDeep(new_res); var avg_res = []; var bed_old = old_res.map((bed, index) => { return bed.node.bedId; @@ -94,22 +122,47 @@ export default class ResultsBed extends React.Component { var bed_new = new_res.map((bed, index) => { return bed.node.bedId; }); - const bedlist = bed_old.filter((value) => bed_new.includes(value)); + const bedunique = this.getUnique(bed_old, bed_new)[0] + + avg_res = oldres.map((bed, index) => { + if (bedunique.includes(bed.node.bedId)) { + if (JSON.parse(bed.node.bedfile.genome).alias === this.props.genome) { + bed.node.score = + (bed.node.score + thresh) / 2; + console.log("bed:", bed) + return bed; + } + } else { - avg_res = editable.map((bed, index) => { - if (bedlist.includes(bed.node.bedId)) { if (JSON.parse(bed.node.bedfile.genome).alias === this.props.genome) { var new_res_idx = new_res.findIndex(function (new_bed) { return new_bed.node.bedId === bed.node.bedId; }); + bed.node.score = - (bed.node.score + new_res[new_res_idx].node.score) / len; + (bed.node.score + new_res[new_res_idx].node.score) / 2; + console.log("bed:", bed) return bed; + } } return {} }); + + newres.map((bed, index) => { + if (bedunique.includes(bed.node.bedId)) { + if (JSON.parse(bed.node.bedfile.genome).alias === this.props.genome) { + bed.node.score = + (bed.node.score + thresh) / 2; + console.log("bed:", bed) + avg_res.push(bed); + } + } + } + ) + avg_res = avg_res.filter(value => Object.keys(value).length !== 0); + console.log("avg_res:", avg_res) return avg_res; } From 140dddfb6d2085d835adc3b60b9ced3102146a3f Mon Sep 17 00:00:00 2001 From: Bingjie Xue Date: Mon, 13 Jun 2022 11:06:37 -0400 Subject: [PATCH 09/14] select and add BED files to create BED set cart --- src/createBedSet.jsx | 108 +++++++++++++++++++++++++++++++++++++++++++ src/header.jsx | 6 +++ src/index.js | 2 + src/searchResult.jsx | 22 +++++++++ src/tableIcons.js | 3 +- 5 files changed, 140 insertions(+), 1 deletion(-) create mode 100644 src/createBedSet.jsx diff --git a/src/createBedSet.jsx b/src/createBedSet.jsx new file mode 100644 index 0000000..36897a0 --- /dev/null +++ b/src/createBedSet.jsx @@ -0,0 +1,108 @@ +import React from "react"; +import MaterialTable from "material-table"; +import { tableIcons } from "./tableIcons"; +import Spinner from "react-bootstrap/Spinner"; +import { Paper } from "@material-ui/core"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; +import Header from "./header"; +import VersionsSpan from "./versionsSpan"; +import "./style/home.css"; + +export default class CreateBedSet extends React.Component { + constructor() { + super(); + this.state = { + myBedSetName: "", + myBedSet: JSON.parse(localStorage.getItem('myBedSet')) + }; + } + + async componentDidMount() { + console.log("my bed set:", this.state.myBedSet) + } + + createBedSet() { + localStorage.clear(); + console.log("my bed setname :", this.state.myBedSetName) + } + + handleChange(e) { + this.setState({ myBedSetName: e.target.value }); + + } + + render() { + return ( + +
+
+ + + + new Promise((resolve, reject) => { + setTimeout(() => { + const dataDelete = [...this.state.myBedSet]; + const index = oldData.tableData.id; + dataDelete.splice(index, 1); + this.setState({ + myBedSet: dataDelete + }, () => { + localStorage.setItem('myBedSet', JSON.stringify(this.state.myBedSet)) + }); + resolve() + }, 1000) + }), + }} + options={{ + headerStyle: { + backgroundColor: "#264653", + color: "#FFF", + fontWeight: "bold", + }, + actionsColumnIndex: -1, + actionsCellStyle: { justifyContent: "center" }, + paging: true, + search: false, + toolbar: false, + }} + components={{ + Container: (props) => , + }} + /> + + + + + + +
+ + + ); + } +} diff --git a/src/header.jsx b/src/header.jsx index 6bf7207..25ac8ad 100644 --- a/src/header.jsx +++ b/src/header.jsx @@ -4,6 +4,7 @@ import Nav from "react-bootstrap/Nav"; import { Link } from "react-router-dom"; import { FaGithub } from "react-icons/fa"; import { FaBook } from "react-icons/fa"; +import { FaFolderOpen } from "react-icons/fa"; import bedhost_api_url from "./const/server"; export default function Header() { @@ -36,6 +37,11 @@ export default function Header() { GraphiQL +