Skip to content
Snippets Groups Projects

Resolve "workflow selection UI"

Merged Remi PLANEL requested to merge workflow-selection-ui-71 into dev
Files
8
<template>
<div v-if="workflowId">
<v-card flat color="transparent">
<error-alert v-if="error" :error-message="error"></error-alert>
<v-card-text>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<v-stepper v-model="step" vertical flat color="transparent">
<ValidationProvider
v-slot="{ errors }"
name="experiment"
rules="requiredExperiment"
>
<v-stepper-step
:complete="step > 1"
step="1"
editable
:rules="[() => errors.length < 1]"
>
Select an experiment
<small>{{ errors[0] }}</small>
</v-stepper-step>
<v-stepper-content step="1">
<v-card flat color="transparent">
<v-card-text>
<v-data-table
v-model="analysis.experiments"
:headers="headers"
:items="experiments"
:single-select="singleSelect"
item-key="id"
show-select
class="elevation-1"
>
</v-data-table>
<span>{{ errors[0] }}</span>
</v-card-text>
<v-card-actions>
<v-btn
v-if="analysis.experiments && analysis.experiments.length"
color="primary"
@click="step = 2"
>Continue</v-btn
>
</v-card-actions>
</v-card>
</v-stepper-content>
</ValidationProvider>
<template v-if="workflows">
<v-stepper-step :complete="step > 2" step="2" editable>
Select a workflow
</v-stepper-step>
<v-stepper-content step="2">
<v-card flat color="transparent">
<workflow-item-groups
v-model="workflow"
:workflows="detailedWorkflows"
@selection="getWorkflowParameters"
></workflow-item-groups>
<v-card-actions>
<v-btn v-if="workflow" color="primary" @click="step = 3"
>Continue</v-btn
></v-card-actions
>
</v-card>
</v-stepper-content>
</template>
<v-stepper-step :step="lastWorkflowStep"
>Set workflow parameters</v-stepper-step
>
<v-stepper-content :step="lastWorkflowStep"
><v-form v-model="valid" @submit.prevent="submit">
<v-card flat color="transparent">
<v-card-text>
<ValidationProvider
v-slot="{ errors }"
name="Name"
rules="required|max:50"
>
<v-text-field
v-model="analysis.name"
:counter="50"
:error-messages="errors"
label="Analyis Name"
hint="Set the analysis name"
persistent-hint
outlined
required
></v-text-field>
</ValidationProvider>
</v-card-text>
<!-- <v-card-title>Set workflow parameters</v-card-title> -->
<v-card-text>
<v-expansion-panels focusable>
<v-expansion-panel
v-for="param in toolsInputs"
:key="param.stepId"
>
<v-expansion-panel-header color=""
>{{ param.name }}
</v-expansion-panel-header>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<v-form v-model="valid" @submit.prevent="submit">
<ValidationProvider
v-slot="{ errors }"
name="Name"
rules="required|max:50"
>
<v-text-field
v-model="analysis.name"
:counter="50"
:error-messages="errors"
label="Name"
required
></v-text-field>
</ValidationProvider>
<v-data-table
v-model="analysis.experiments"
:headers="headers"
:items="experiments"
:single-select="singleSelect"
item-key="id"
show-select
class="elevation-1"
>
</v-data-table>
<v-expansion-panels focusable>
<v-expansion-panel v-for="param in toolsInputs" :key="param.stepId">
<v-expansion-panel-header>{{
param.name
}}</v-expansion-panel-header>
<v-expansion-panel-content v-if="workflowParameters">
<div v-for="input in param.inputs" :key="input.name" class="mt-5">
<select-tool-parameter
v-if="
input.model_class == 'SelectToolParameter' &&
workflowParameters[param.stepId][input.name]
"
v-model="workflowParameters[param.stepId][input.name]"
:input="input"
/>
<integer-tool-parameter
v-if="
input.model_class == 'IntegerToolParameter' &&
workflowParameters[param.stepId][input.name]
"
v-model="workflowParameters[param.stepId][input.name]"
:input="input"
/>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-btn type="submit" color="primary" class="mt-4" :disabled="invalid"
>Run</v-btn
>
</v-form>
</ValidationObserver>
<v-expansion-panel-content v-if="workflowParameters">
<div
v-for="input in param.inputs"
:key="input.name"
class="mt-5"
>
<select-tool-parameter
v-if="
input.model_class == 'SelectToolParameter' &&
workflowParameters[param.stepId][input.name]
"
v-model="
workflowParameters[param.stepId][input.name]
"
:input="input"
/>
<integer-tool-parameter
v-if="
input.model_class == 'IntegerToolParameter' &&
workflowParameters[param.stepId][input.name]
"
v-model="
workflowParameters[param.stepId][input.name]
"
:input="input"
/>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card-text>
<v-card-actions>
<v-btn
type="submit"
color="primary"
class="mt-4"
:disabled="invalid"
>Run</v-btn
>
</v-card-actions>
</v-card>
</v-form></v-stepper-content
>
</v-stepper>
</ValidationObserver>
</v-card-text>
<ProgressBar :waiting="waiting" message="Starting Analysis" />
</div>
</v-card>
</template>
<script>
@@ -75,7 +157,7 @@ import {
setInteractionMode,
} from 'vee-validate'
import ProgressBar from '@/components/ProgressBar'
import WorkflowItemGroups from '@/components/WorkflowItemGroups'
import ErrorAlert from '@/components/ErrorAlert'
import SelectToolParameter from '~/components/GalaxyForm/SelectToolParameter.vue'
import IntegerToolParameter from '~/components/GalaxyForm/IntegerToolParameter.vue'
@@ -85,7 +167,10 @@ extend('required', {
...required,
message: '{_field_} can not be empty',
})
extend('requiredExperiment', {
...required,
message: 'You must select one {_field_}',
})
extend('max', {
...max,
message: '{_field_} may not be greater than {length} characters',
@@ -98,19 +183,24 @@ export default {
ValidationObserver,
ErrorAlert,
ProgressBar,
WorkflowItemGroups,
},
props: {
projectId: { type: Number, required: true },
experiments: { type: Array, required: true },
workflowId: { type: String, required: true },
workflowParameters: { type: Object, default: () => null },
workflows: { type: Array, default: () => null },
preselectedWorkflowId: { type: String, default: null },
preselectedWorkflowParameters: { type: Object, default: () => null },
analysis: {
type: Object,
default: () => ({ name: '', galaxy_history_id: '', experiments: [] }),
},
// toolsInputs: { type: Array, default: () => [] },
},
data() {
return {
step: 1,
workflow: null,
error: null,
waiting: false,
valid: false,
@@ -121,6 +211,7 @@ export default {
],
singleSelect: true,
workflowTools: null,
workflowParameters: null,
}
},
computed: {
@@ -141,28 +232,70 @@ export default {
.filter((tool) => tool.inputs.length > 0)
: []
},
// toolsInputsFiltred() {
// return this.toolsInputs
// .map((tool) => {
// tool.inputs = tool.inputs.filter(
// (input) => input.model_class !== 'DataToolParameter'
// )
// return tool
// })
// .filter((tool) => tool.inputs.length > 0)
// },
workflowId() {
if (this.workflow) {
return this.workflow.id
}
if (this.preselectedWorkflowId) {
return this.preselectedWorkflowId
}
return null
},
detailedWorkflows() {
return this.workflows
? this.workflows.map((w) => w.details)
: this.workflows
},
lastWorkflowStep() {
return this.workflows ? 3 : 2
},
},
async mounted() {
try {
this.workflowTools = await this.$axios.$get(
`/api/workflow-tools/${this.workflowId}/`
)
} catch (error) {}
mounted() {
if (this.workflowId) {
this.getWorkflowTools()
}
if (this.preselectedWorkflowParameters) {
this.workflowParameters = this.preselectedWorkflowParameters
}
},
// updated() {
// console.log('UPDATED hook in RunanalysisFrom')
// this.getWorkflowTools()
// },
methods: {
isSelect(modelClass) {
return modelClass === 'SelectToolParameter'
},
async getWorkflowTools() {
try {
this.workflowTools = await this.$axios.$get(
`/api/workflow-tools/${this.workflowId}/`
)
} catch (error) {
this.error = error
this.workflowTools = null
}
},
async getWorkflowParameters() {
try {
const wfParams = await this.$axios.$get(
`/api/workflow-default-parameters/${this.workflowId}/`
)
this.workflowParameters = Object.keys(wfParams).reduce(
(acc, stepId) => {
if (Object.keys(wfParams[stepId]).length > 0) {
acc[stepId] = { ...wfParams[stepId] }
}
return acc
},
{}
)
this.getWorkflowTools()
} catch (error) {
this.error = error
this.workflowParameters = null
}
},
async submit() {
try {
this.waiting = true
Loading