Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add create score set in experiment view page #269

Merged
merged 3 commits into from
Sep 25, 2024
Merged

Add create score set in experiment view page #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b13933
Add create score set in experiment view page, but userIsAuthenticated…
EstelleDa Sep 9, 2024
20ad793
Remove experimentTitle from prop. The codes contain two page versions.
EstelleDa Sep 24, 2024
e8dc829
Separate view of experiment in creating a new score set page.
EstelleDa Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/screens/ExperimentView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@
<div class="mave-screen-title">{{ item.title || 'Untitled experiment' }}</div>
<div v-if="userIsAuthenticated">
<div v-if="!item.publishedDate" class="mave-screen-title-controls">
<Button class="p-button-sm" @click="addScoreSet">Add a score set</Button>
<Button class="p-button-sm" @click="editItem">Edit</Button>
<Button class="p-button-sm p-button-danger" @click="deleteItem">Delete</Button>
</div>
<div v-else>
<Button class="p-button-sm" @click="addScoreSet">Add a score set</Button>
</div>
</div>
</div>
<div v-if="item.shortDescription" class="mave-score-set-description">{{ item.shortDescription }}</div>
Expand Down Expand Up @@ -282,6 +286,9 @@ export default {
},

methods: {
addScoreSet: function() {
this.$router.push({name: 'createScoreSetInExperiment', params: {urn: this.item.urn}})
},
editItem: function () {
if (this.item) {
this.$router.replace({ path: `/experiments/${this.item.urn}/edit` })
Expand Down
257 changes: 151 additions & 106 deletions src/components/screens/ScoreSetCreator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,122 +33,142 @@
<template #content="{nextCallback: showNextWizardStep}">
<div class="mavedb-wizard-form">
<div class="mavedb-wizard-form-content-background"></div>
<div class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
<label :id="$scopedId('input-superseding-score-set-label')">
Does this score set correct errors in and replace a score set previously published on MaveDB that you created?
</label>
</div>
<div class="mavedb-wizard-content">
<InputSwitch v-model="isSupersedingScoreSet" :aria-labelledby="$scopedId('input-superseding-score-set-label')" />
<div class="mavedb-switch-value">{{ isSupersedingScoreSet ? 'Yes, this supersedes another score set' : 'No, this does not supersede another score set' }}</div>
</div>
</div>
<div class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
<label :id="$scopedId('input-is-meta-analysis-label')">Is this score set a meta-analysis?</label>
<div class="mavedb-help-small">
Meta-analyses are score sets derived from data in other score sets that were created by you or other users.
For example:
<ul>
<li>a score set that combines data from two other score sets to produce new scores, or</li>
<li>a score set that adds imputed missing values to the scores in another score set.</li>
</ul>
<div v-if="experimentUrn && this.experiment">
<div class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
<label :id="$scopedId('input-experiment')">
Experiment: {{ experimentUrn }}
</label>
<div class="mavedb-help-small">
To add a score set to a different experiment, supercede a score set or add a score set to meta-analysis, please navigate to "New score set".
For more on the relationship between score sets and experiments, see the
<a target="_blank" href="https://mavedb.org/docs/mavedb/record_types.html#record-types">documentation</a>.
</div>
</div>
<div class="mavedb-wizard-content">
Experiment title: {{ this.experiment.title }}
</div>
</div>
<div class="mavedb-wizard-content">
<InputSwitch v-model="isMetaAnalysis" :aria-labelledby="$scopedId('input-is-meta-analysis-label')" />
<div class="mavedb-switch-value">{{ isMetaAnalysis ? 'Yes, this is a meta-analysis' : 'No, this is not a meta-analysis' }}</div>
</div>
</div>
<div v-if="!isSupersedingScoreSet && !isMetaAnalysis" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
To which experiment does this score set belong?
<div class="mavedb-help-small">
For more on the relationship between score sets and experiments, see the
<a target="_blank" href="https://mavedb.org/docs/mavedb/record_types.html#record-types">documentation</a>.
<div v-else>
<div class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
<label :id="$scopedId('input-superseding-score-set-label')">
Does this score set correct errors in and replace a score set previously published on MaveDB that you created?
</label>
</div>
<div class="mavedb-wizard-content">
<InputSwitch v-model="isSupersedingScoreSet" :aria-labelledby="$scopedId('input-superseding-score-set-label')" />
<div class="mavedb-switch-value">{{ isSupersedingScoreSet ? 'Yes, this supersedes another score set' : 'No, this does not supersede another score set' }}</div>
</div>
</div>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && item.experiment">
Experiment:
<router-link :to="{ name: 'experiment', params: { urn: item.experiment.urn } }">{{ item.experiment.title
}}</router-link>
<div class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
<label :id="$scopedId('input-is-meta-analysis-label')">Is this score set a meta-analysis?</label>
<div class="mavedb-help-small">
Meta-analyses are score sets derived from data in other score sets that were created by you or other users.
For example:
<ul>
<li>a score set that combines data from two other score sets to produce new scores, or</li>
<li>a score set that adds imputed missing values to the scores in another score set.</li>
</ul>
</div>
</div>
<div v-else style="position: relative;">
<span class="p-float-label">
<Dropdown
v-model="experiment"
:id="$scopedId('input-experiment')"
:options="editableExperiments"
optionLabel="title"
style="width: 50%"
@change="populateExperimentMetadata"
/>
<label :for="$scopedId('input-experiment')">Experiment</label>
</span>
<span v-if="validationErrors.experiment" class="mave-field-error">{{ validationErrors.experiment }}</span>
<div class="mavedb-wizard-content">
<InputSwitch v-model="isMetaAnalysis" :aria-labelledby="$scopedId('input-is-meta-analysis-label')" />
<div class="mavedb-switch-value">{{ isMetaAnalysis ? 'Yes, this is a meta-analysis' : 'No, this is not a meta-analysis' }}</div>
</div>
</div>
</div>
<div v-if="isSupersedingScoreSet" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
What score set does this supersede?
<div class="mavedb-help-small">Type the superseded score set's MaveDB URN here and select it from the list.</div>
</div>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && supersedesScoreSet">
Supersedes:
<router-link :to="{ name: 'scoreSet', params: { urn: supersedesScoreSet.urn } }">{{ supersedesScoreSet.title }}</router-link>
<div v-if="!isSupersedingScoreSet && !isMetaAnalysis" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
To which experiment does this score set belong?
<div class="mavedb-help-small">
For more on the relationship between score sets and experiments, see the
<a target="_blank" href="https://mavedb.org/docs/mavedb/record_types.html#record-types">documentation</a>.
</div>
</div>
<div v-if="itemStatus == 'NotLoaded'" class="field">
<span class="p-float-label">
<AutoComplete
ref="supersededScoreSetInput"
v-model="supersededScoreSet"
:id="$scopedId('input-supersededScoreSet')"
field="title"
:forceSelection="true"
:suggestions="supersededScoreSetSuggestionsList"
@change="populateSupersededScoreSetMetadata"
@complete="searchSupersededScoreSets"
>
<template #item="slotProps">
{{ slotProps.item.urn }}: {{ slotProps.item.title }}
</template>
</AutoComplete>
<label :for="$scopedId('input-supersededScoreSet')">Supersedes</label>
</span>
<span v-if="validationErrors.supersededScoreSetUrn" class="mave-field-error">{{
validationErrors.supersededScoreSetUrn }}</span>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && item.experiment">
Experiment:
<router-link :to="{ name: 'experiment', params: { urn: item.experiment.urn } }">{{ item.experiment.title
}}</router-link>
</div>
<div v-else style="position: relative;">
<span class="p-float-label">
<Dropdown
v-model="experiment"
:id="$scopedId('input-experiment')"
:options="editableExperiments"
optionLabel="title"
optionValue=""
style="width: 50%"
@change="populateExperimentMetadata"
/>
<label :for="$scopedId('input-experiment')">Experiment</label>
</span>
<span v-if="validationErrors.experiment" class="mave-field-error">{{ validationErrors.experiment }}</span>
</div>
</div>
</div>
</div>
<div v-if="isMetaAnalysis" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
What score set(s) does this score set analyze?
<div class="mavedb-help-small">Type a score set's MaveDB URN here and select it from the list. You may choose more than one score set.</div>
</div>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && item?.metaAnalyzesScoreSetUrns?.length > 0">
Meta-analysis for:<br />
<div v-for="metaAnalyzesScoreSetUrn of item.metaAnalyzesScoreSetUrns" :key="metaAnalyzesScoreSetUrn">
<EntityLink entityType="scoreSet" :urn="metaAnalyzesScoreSetUrn"></EntityLink>
<div v-if="isSupersedingScoreSet" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
What score set does this supersede?
<div class="mavedb-help-small">Type the superseded score set's MaveDB URN here and select it from the list.</div>
</div>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && supersedesScoreSet">
Supersedes:
<router-link :to="{ name: 'scoreSet', params: { urn: supersedesScoreSet.urn } }">{{ supersedesScoreSet.title }}</router-link>
</div>
<div v-if="itemStatus == 'NotLoaded'" class="field">
<span class="p-float-label">
<AutoComplete
ref="supersededScoreSetInput"
v-model="supersededScoreSet"
:id="$scopedId('input-supersededScoreSet')"
field="title"
:forceSelection="true"
:suggestions="supersededScoreSetSuggestionsList"
@change="populateSupersededScoreSetMetadata"
@complete="searchSupersededScoreSets"
>
<template #item="slotProps">
{{ slotProps.item.urn }}: {{ slotProps.item.title }}
</template>
</AutoComplete>
<label :for="$scopedId('input-supersededScoreSet')">Supersedes</label>
</span>
<span v-if="validationErrors.supersededScoreSetUrn" class="mave-field-error">{{
validationErrors.supersededScoreSetUrn }}</span>
</div>
</div>
<div v-if="itemStatus == 'NotLoaded'" class="field">
<span class="p-float-label">
<AutoComplete ref="metaAnalyzesScoreSetsInput" v-model="metaAnalyzesScoreSets"
:id="$scopedId('input-metaAnalyzesScoreSets')" field="title" :forceSelection="true" :multiple="true"
:suggestions="metaAnalyzesScoreSetSuggestionsList" @complete="searchMetaAnalyzesScoreSets">
<template #item="slotProps">
{{ slotProps.item.urn }}: {{ slotProps.item.title }}
</template>
</AutoComplete>
<label :for="$scopedId('input-metaAnalyzesScoreSets')">Meta-analysis for</label>
</span>
<span v-if="validationErrors.metaAnalyzesScoreSetUrns" class="mave-field-error">{{
validationErrors.metaAnalyzesScoreSetUrns }}</span>
</div>
<div v-if="isMetaAnalysis" class="mavedb-wizard-row">
<div class="mavedb-wizard-help">
What score set(s) does this score set analyze?
<div class="mavedb-help-small">Type a score set's MaveDB URN here and select it from the list. You may choose more than one score set.</div>
</div>
<div class="mavedb-wizard-content">
<div v-if="itemStatus != 'NotLoaded' && item?.metaAnalyzesScoreSetUrns?.length > 0">
Meta-analysis for:<br />
<div v-for="metaAnalyzesScoreSetUrn of item.metaAnalyzesScoreSetUrns" :key="metaAnalyzesScoreSetUrn">
<EntityLink entityType="scoreSet" :urn="metaAnalyzesScoreSetUrn"></EntityLink>
</div>
</div>
<div v-if="itemStatus == 'NotLoaded'" class="field">
<span class="p-float-label">
<AutoComplete ref="metaAnalyzesScoreSetsInput" v-model="metaAnalyzesScoreSets"
:id="$scopedId('input-metaAnalyzesScoreSets')" field="title" :forceSelection="true" :multiple="true"
:suggestions="metaAnalyzesScoreSetSuggestionsList" @complete="searchMetaAnalyzesScoreSets">
<template #item="slotProps">
{{ slotProps.item.urn }}: {{ slotProps.item.title }}
</template>
</AutoComplete>
<label :for="$scopedId('input-metaAnalyzesScoreSets')">Meta-analysis for</label>
</span>
<span v-if="validationErrors.metaAnalyzesScoreSetUrns" class="mave-field-error">{{
validationErrors.metaAnalyzesScoreSetUrns }}</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -949,6 +969,10 @@ export default {
},

props: {
experimentUrn: {
type: String,
required: false
},
itemId: {
type: String,
required: false
Expand Down Expand Up @@ -1085,6 +1109,27 @@ export default {
},

watch: {
experimentUrn: {
immediate: true,
handler: async function (newValue, oldValue) {
if (newValue != oldValue) {
let response = null
try {
response = await axios.get(`${config.apiBaseUrl}/experiments/${this.experimentUrn}`)
} catch (e) {
response = e.response || { status: 500 }
}

if (response.status == 200) {
this.experiment = response.data
this.populateExperimentMetadata({value: this.experiment})
this.activeWizardStep = 0
} else {
this.$toast.add({ severity: 'error', summary: `Could not fetch experiment with urn ${this.experimentUrn}` })
}
}
}
},
'targetGene.externalIdentifiers': {
deep: true,
handler: function (newValue) {
Expand Down Expand Up @@ -1274,10 +1319,10 @@ export default {
// Step 0 is valid if
// - The score set is a meta-analysis and at least one meta-analyzed score set has been chosen..
// - The score set is a superseding score set, and the superseded score set has been chosen.
// - Or the score set is neither, and its parent experiment has been chosen.
// - Or the score set is neither, and its parent experiment has been chosen in dropdown or from experiment view page.
return !!(this.isMetaAnalysis && this.metaAnalyzesScoreSets.length > 0)
|| !!(this.isSupersedingScoreSet && this.supersededScoreSet)
|| !!(!this.isMetaAnalysis && !this.isSupersedingScoreSet && this.experiment)
|| !!(!this.isMetaAnalysis && !this.isSupersedingScoreSet && this.experiment || this.experimentUrn)
}
case 1: {
return this.title && this.shortDescription && this.abstractText && this.methodText
Expand Down Expand Up @@ -1810,7 +1855,7 @@ export default {
)

const editedFields = {
experimentUrn: this.experiment?.urn,
experimentUrn: this.experimentUrn ? this.experimentUrn : this.experiment?.urn,
licenseId: this.licenseId,
title: this.title,
shortDescription: this.shortDescription,
Expand Down
5 changes: 5 additions & 0 deletions src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ const routes = [{
name: 'createScoreSet',
component: ScoreSetCreator
}, {
path: '/experiment/:urn/create-score-set',
name: 'createScoreSetInExperiment',
component: ScoreSetCreator,
props: (route) => ({experimentUrn: route.params.urn})
},{
path: '/experiment-sets/:urn',
name: 'experimentSet',
component: ExperimentSetView,
Expand Down