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..dd28050 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 average 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..0040930 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,18 +33,18 @@ 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 + "?"); }); // 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 }); - 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() @@ -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..a57650c 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 @@ -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("_", " "), @@ -131,19 +133,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["mean_absolute_tss_dist"].description, + label: bed_schema["median_tss_dist"].description, data: [ - avg.mean_absolute_tss_dist.toFixed(3), - sd.mean_absolute_tss_dist.toFixed(3), + avg.median_tss_dist.toFixed(3), + sd.median_tss_dist.toFixed(3), ], }, { @@ -332,8 +336,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} )} @@ -403,7 +407,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={{ @@ -439,7 +443,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={{ @@ -457,7 +461,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={{ 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/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 diff --git a/src/createBedSet.jsx b/src/createBedSet.jsx new file mode 100644 index 0000000..a77a313 --- /dev/null +++ b/src/createBedSet.jsx @@ -0,0 +1,170 @@ +import React from "react"; +import MaterialTable from "material-table"; +import { tableIcons } from "./tableIcons"; +import ResponsiveDialog from "./downloadMyBetSet"; +import { Paper } from "@material-ui/core"; +import Container from "react-bootstrap/Container"; +import { FaTrashAlt } from "react-icons/fa"; +import { FaDownload } from "react-icons/fa"; +import Header from "./header"; +import VersionsSpan from "./versionsSpan"; +// import axios from "axios"; +import bedhost_api_url from "./const/server"; +import "./style/home.css"; + +// const api = axios.create({ +// baseURL: bedhost_api_url, +// }); + +export default class CreateBedSet extends React.Component { + constructor() { + super(); + this.state = { + myBedSetName: "", + myBedSet: JSON.parse(localStorage.getItem('myBedSet')), + myBedSetIdx: "" + }; + } + + async componentDidMount() { + if (this.state.myBedSet) { + this.getBedIdx() + } + + } + + async createBedSet() { + // hide before process myBEDSet function is complete + // let md = await api.post( + // "/api/bedset/create/" + + // this.state.myBedSetName + + // "/" + + // this.state.myBedSetIdx + // ).then(({ data }) => data) + + // alert("Your BED set has been submitted for processing!") + + localStorage.clear(); + window.location.reload(true); + } + + handleChange(e) { + this.setState({ myBedSetName: e.target.value }); + + } + getBedIdx() { + let idx_list = [] + + idx_list.push( + this.state.myBedSet.map((bed) => { + return bed.id; + }) + ) + + idx_list = encodeURIComponent( + idx_list.toString() + ) + + this.setState({ + myBedSetIdx: idx_list + }) + this.forceUpdate(); + } + + render() { + return ( + +
+
+ {this.state.myBedSet ? ( + +

My BED Set

+ ({ + icon: () => , + tooltip: 'Save User', + onClick: (event, rowData) => alert("Download " + rowData.name) + }), + { + icon: () => , + tooltip: 'Delete BED file', + onClick: (event, rowData) => + new Promise((resolve, reject) => { + setTimeout(() => { + const dataDelete = [...this.state.myBedSet]; + const index = rowData.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) => , + }} + /> + + + + + {/* + // hide before process myBEDSet function is complete + */} + + ) : ( + +

Your BED set cart is empty.

+ + ) + } +
+ + + ); + } +} diff --git a/src/downloadMyBetSet.jsx b/src/downloadMyBetSet.jsx new file mode 100644 index 0000000..c4dd6a3 --- /dev/null +++ b/src/downloadMyBetSet.jsx @@ -0,0 +1,118 @@ +import React from "react"; +import Dialog from "@material-ui/core/Dialog"; +import DialogActions from "@material-ui/core/DialogActions"; +import DialogContent from "@material-ui/core/DialogContent"; +import DialogContentText from "@material-ui/core/DialogContentText"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; +import { useTheme } from "@material-ui/core/styles"; +import copy from "copy-to-clipboard"; +import bedhost_api_url from "./const/server"; + +export default function ResponsiveDialog(props) { + console.log("here:", props.bedfiles) + + const [open, setOpen] = React.useState(false); + // const [idx, setIdx] = React.useState(idx_list); + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); + + + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleClickCopy = () => { + copy(props.message); + }; + + return ( +
+ + + {props.btn} + + + +

+ {"Download from http with command "} + + {"wget -i my_bedset_http.txt"} + +

+

+ {"Download from s3 with command "} + + {"cat my_bedset_s3.txt | parallel aws s3 cp {} "} + +

+ + + + + + + + + + + + + + +
+ ); +} 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 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 +