mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Create components/WorkflowInvocationState/Export
RE: review on https://github.com/galaxyproject/galaxy/pull/14374 - created `components/WorkflowInvocationState/Export` - created 'components/WorkflowInvocationStatecomponents/WorkflowInvocationState/WorkflowInvocationExportOptions.vue'/Export/BioComputeObjectExportCard.vue` - modified 'components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue' Changes to be committed: new file: client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue new file: client/src/components/WorkflowInvocationState/Export/index.js modified: client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue
This commit is contained in:
Hadley King
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
A BioCompute Object (BCO) is the unofficial name for a JSON object that adheres to the
|
||||
<a href="https://standards.ieee.org/ieee/2791/7337/">IEEE-2791-2020 standard</a>. A BCO is designed to
|
||||
communicate High-throughput Sequencing (HTS) analysis results, data set creation, data curation, and
|
||||
bioinformatics verification protocols.
|
||||
</p>
|
||||
<p>Learn more about <a href="https://biocomputeobject.org/" target="_blank">BioCompute Objects</a>.</p>
|
||||
<p>
|
||||
Instructions for
|
||||
<a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start" target="_blank"
|
||||
>creating a BCO using Galaxy</a
|
||||
>.
|
||||
</p>
|
||||
<b-tabs lazy>
|
||||
<b-tab title="Download">
|
||||
<a class="bco-json" style="padding-left: 1em" :href="bcoDownloadLink"><b>Download BCO</b></a>
|
||||
</b-tab>
|
||||
<b-tab title="Submit To BCODB">
|
||||
<div>
|
||||
<p>
|
||||
To submit to a BCODB you need to already have an authenticated account. Instructions on
|
||||
submitting a BCO from Galaxy are available
|
||||
<a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start/" target="_blank">here</a>.
|
||||
</p>
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="form-group">
|
||||
<label for="fetch">BCO DB URL (example: https://biocomputeobject.org)</label>
|
||||
<input
|
||||
id="fetch"
|
||||
v-model="form.fetch"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="https://biocomputeobject.org"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="authorization">User API Key</label>
|
||||
<input
|
||||
id="authorization"
|
||||
v-model="form.authorization"
|
||||
type="password"
|
||||
class="form-control"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="table">Prefix</label>
|
||||
<input
|
||||
id="table"
|
||||
v-model="form.table"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="BCO"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="owner_group">User Name</label>
|
||||
<input
|
||||
id="owner_group"
|
||||
v-model="form.owner_group"
|
||||
type="text"
|
||||
class="form-control"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary">{{ "Submit" | localize }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRootFromIndexLink } from "onload";
|
||||
import { getAppRoot } from "onload/loadConfig";
|
||||
import { mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
|
||||
const getUrl = (path) => getRootFromIndexLink() + path;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
invocationId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bco: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
fetch: "",
|
||||
authorization: "",
|
||||
table: "",
|
||||
owner_group: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["getInvocationById"]),
|
||||
indexStr() {
|
||||
if (this.index == null) {
|
||||
return 0;
|
||||
} else {
|
||||
return `${this.index + 1}`;
|
||||
}
|
||||
},
|
||||
bcoDownloadLink: function () {
|
||||
return `${getAppRoot()}api/invocations/${this.invocationId}/biocompute/download`;
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
axios
|
||||
.get(getUrl(`./api/invocations/${this.invocationId}/biocompute/`))
|
||||
.then((response) => {
|
||||
this.bco = response.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.errors.push(e);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
const bcoString = {
|
||||
POST_api_objects_draft_create: [
|
||||
{
|
||||
contents: this.bco,
|
||||
owner_group: this.form.owner_group,
|
||||
schema: "IEEE",
|
||||
prefix: this.form.table,
|
||||
},
|
||||
],
|
||||
};
|
||||
const headers = {
|
||||
Authorization: "Token " + this.form.authorization,
|
||||
"Content-type": "application/json; charset=UTF-8",
|
||||
};
|
||||
const submitURL = this.form.fetch;
|
||||
axios
|
||||
.post(`${submitURL}/api/objects/drafts/create/`, bcoString, { headers: headers })
|
||||
.then((response) => {
|
||||
if (response.status === 200) {
|
||||
console.log("response:", response);
|
||||
alert(response.data[0].message);
|
||||
}
|
||||
if (response.status === 207) {
|
||||
console.log("response:", response);
|
||||
alert(response.data[0].message);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log("Error", { ...error });
|
||||
if (error.response.status == 401) {
|
||||
alert(error.response.data.detail);
|
||||
console.log("Error response: ", error);
|
||||
} else {
|
||||
console.log("Error", error);
|
||||
alert("Error", error);
|
||||
}
|
||||
});
|
||||
this.form.owner_group = "";
|
||||
this.form.authorization = "";
|
||||
this.form.owner_group = "";
|
||||
this.form.fetch = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as BioComputeObjectExportCard } from "./BioComputeObjectExportCard";
|
||||
@@ -1,178 +1,21 @@
|
||||
<template>
|
||||
<b-card-group deck>
|
||||
<b-card title="BioCompute Object" class="export-plugin-card">
|
||||
<p>
|
||||
A BioCompute Object (BCO) is the unofficial name for a JSON object that adheres to the
|
||||
<a href="https://standards.ieee.org/ieee/2791/7337/">IEEE-2791-2020 standard</a>. A BCO is designed to
|
||||
communicate High-throughput Sequencing (HTS) analysis results, data set creation, data curation, and
|
||||
bioinformatics verification protocols.
|
||||
</p>
|
||||
<p>Learn more about <a href="https://biocomputeobject.org/" target="_blank">BioCompute Objects</a>.</p>
|
||||
<p>
|
||||
Instructions for
|
||||
<a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start" target="_blank"
|
||||
>creating a BCO using Galaxy</a
|
||||
>.
|
||||
</p>
|
||||
<b-tabs lazy>
|
||||
<b-tab title="Download">
|
||||
<a class="bco-json" :href="bcoDownloadLink"><b>Download BCO</b></a>
|
||||
</b-tab>
|
||||
<b-tab title="Submit To BCODB">
|
||||
<div>
|
||||
<p>
|
||||
To submit to a BCODB you need to already have an authenticated account. Instructions on
|
||||
submitting a BCO from Galaxy are available
|
||||
<a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start/" target="_blank">here</a
|
||||
>.
|
||||
</p>
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="form-group">
|
||||
<label for="fetch">BCO DB URL (example: https://biocomputeobject.org)</label>
|
||||
<input
|
||||
id="fetch"
|
||||
v-model="form.fetch"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="https://biocomputeobject.org"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="authorization">User API Key</label>
|
||||
<input
|
||||
id="authorization"
|
||||
v-model="form.authorization"
|
||||
type="password"
|
||||
class="form-control"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="table">Prefix</label>
|
||||
<input
|
||||
id="table"
|
||||
v-model="form.table"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="BCO"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="owner_group">User Name</label>
|
||||
<input
|
||||
id="owner_group"
|
||||
v-model="form.owner_group"
|
||||
type="text"
|
||||
class="form-control"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary">{{ "Submit" | localize }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
<b-card title="BioCompute Object Export" class="export-plugin-card">
|
||||
<bio-compute-object-export-card :invocation-id="invocationId" />
|
||||
</b-card>
|
||||
<!-- Add more export plugins here -->
|
||||
</b-card-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRootFromIndexLink } from "onload";
|
||||
import { getAppRoot } from "onload/loadConfig";
|
||||
import { mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
|
||||
const getUrl = (path) => getRootFromIndexLink() + path;
|
||||
|
||||
import BioComputeObjectExportCard from "./Export/BioComputeObjectExportCard.vue";
|
||||
export default {
|
||||
components: { BioComputeObjectExportCard },
|
||||
props: {
|
||||
invocationId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bco: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
fetch: "",
|
||||
authorization: "",
|
||||
table: "",
|
||||
owner_group: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["getInvocationById"]),
|
||||
indexStr() {
|
||||
if (this.index == null) {
|
||||
return 0;
|
||||
} else {
|
||||
return `${this.index + 1}`;
|
||||
}
|
||||
},
|
||||
bcoDownloadLink: function () {
|
||||
return `${getAppRoot()}api/invocations/${this.invocationId}/biocompute/download`;
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
axios
|
||||
.get(getUrl(`./api/invocations/${this.invocationId}/biocompute/`))
|
||||
.then((response) => {
|
||||
this.bco = response.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.errors.push(e);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
const bcoString = {
|
||||
POST_api_objects_draft_create: [
|
||||
{
|
||||
contents: this.bco,
|
||||
owner_group: this.form.owner_group,
|
||||
schema: "IEEE",
|
||||
prefix: this.form.table,
|
||||
},
|
||||
],
|
||||
};
|
||||
const headers = {
|
||||
Authorization: "Token " + this.form.authorization,
|
||||
"Content-type": "application/json; charset=UTF-8",
|
||||
};
|
||||
const submitURL = this.form.fetch;
|
||||
axios
|
||||
.post(`${submitURL}/api/objects/drafts/create/`, bcoString, { headers: headers })
|
||||
.then((response) => {
|
||||
if (response.status === 200) {
|
||||
console.log("response:", response);
|
||||
alert(response.data[0].message);
|
||||
}
|
||||
if (response.status === 207) {
|
||||
console.log("response:", response);
|
||||
alert(response.data[0].message);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log("Error", { ...error });
|
||||
if (error.response.status == 401) {
|
||||
alert(error.response.data.detail);
|
||||
console.log("Error response: ", error);
|
||||
} else {
|
||||
console.log("Error", error);
|
||||
alert("Error", error);
|
||||
}
|
||||
});
|
||||
this.form.owner_group = "";
|
||||
this.form.authorization = "";
|
||||
this.form.owner_group = "";
|
||||
this.form.fetch = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user