Skip to content
Snippets Groups Projects
Commit b4f4aa8d authored by David Mendez's avatar David Mendez
Browse files

Eubopen report cards: show pref names for report card titles

parent 664638b5
No related branches found
No related tags found
1 merge request!24Improve report cards layout and remove some properties for now
Hide whitespace changes
Inline Side-by-side
components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
+ 5
− 3
View file @ b4f4aa8d
......@@ -32,7 +32,9 @@ export default {
}
},
computed: mapState({
reportCardStructure: (state) => state.probeReportCard.reportCardStructure,
reportCardStructure(state) {
return state[this.storeModuleName].reportCardStructure
},
}),
mounted() {
const docSource = ['pref_name']
......@@ -54,11 +56,11 @@ export default {
prefName
)
this.$store.dispatch(
'probeReportCard/setReportCardStructure',
`${this.storeModuleName}/setReportCardStructure`,
reportCardStructure
)
this.$store.dispatch('probeReportCard/setStructureReady', true)
this.$store.dispatch(`${this.storeModuleName}/setStructureReady`, true)
})
.catch((error) => {
RequestNotifications.dispatchRequestErrorNotification(
......
components/report_cards/chemical_probe/Summary.vue
+ 8
− 74
View file @ b4f4aa8d
......@@ -6,40 +6,27 @@
<template v-else>
<v-row dense>
<v-col cols="12" md="7" lg="8">
<v-card-subtitle>Overview</v-card-subtitle>
<v-divider />
<v-card-text>
<p class="yellow lighten-4">
The small YEATS protein domain is found in four human proteins,
including MLLT1 and MLLT3, and is an epigenetic reader of
acetyl-lysine histone marks. MLLT1 has been found to be a driver
of acute myeloid leukaemia. A collaboration between Pfizer and the
SGC has resulted in the discovery of PFI-6, a potent disrupter of
protein:protein interactions involving the YEATS domains of
MLLT1/3.
</p>
</v-card-text>
<template v-if="!showStructureImgLaterally">
<v-divider />
<v-card-subtitle>Structure</v-card-subtitle>
<v-divider />
<MoleculeImage :molecule-chembl-id="itemID" />
</template>
<v-divider />
<v-card-subtitle>Details</v-card-subtitle>
<v-divider />
<v-card-text>
<v-row class="details-row" dense>
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Chemical Probe Name:</b>
{{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
<b>CIDX ID:</b>
someID
</v-col>
</v-row>
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12" class="yellow lighten-4">
<b>Negative control compound:</b>
PFI-6N
<v-col cols="12">
<b>Chemical Probe Name:</b>
{{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
</v-col>
</v-row>
<v-divider />
......@@ -53,62 +40,9 @@
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Recommended in vitro assay concentration:</b>
<p>
10 µM for PFI-6 and PFI-6N; use with negative control and
orthogonal probe for best interpretation of data
</p>
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Web link for more details:</b>
<a
href="https://www.thesgc.org/chemical-probes/PFI-6"
target="_blank"
>https://www.thesgc.org/chemical-probes/PFI-6</a
>
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Publications:</b>
None at the time of writing
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Orthogonal chemical probes:</b>
NVS-MLLT-1
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Cellular assay(s) for target-engagement:</b>
NanoBRET FRAP
</v-col>
</v-row>
<v-divider />
<v-row class="details-row yellow lighten-4" dense>
<v-col cols="12">
<b>Suitable for in vivo use:</b>
no
</v-col>
</v-row>
<v-divider />
</v-card-text>
<v-card-actions>
<v-card-actions class="d-flex justify-center">
<v-btn
href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
color="primary"
......
components/report_cards/target/TargetReportCard.vue
+ 41
− 8
View file @ b4f4aa8d
......@@ -8,8 +8,13 @@
<script>
import { mapState } from 'vuex'
import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
import TargetReportCardGenerator from '~/report_cards_structure/TargetReportCardGenerator.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
export default {
components: {
......@@ -27,16 +32,44 @@ export default {
}
},
computed: mapState({
reportCardStructure: (state) => state.targetReportCard.reportCardStructure,
reportCardStructure(state) {
return state[this.storeModuleName].reportCardStructure
},
}),
mounted() {
const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
this.itemID
)
this.$store.dispatch(
'targetReportCard/setReportCardStructure',
reportCardStructure
)
const docSource = ['pref_name']
const entityID = EntityNames.EubopenTarget.entityID
const indexName = IndexNames.getIndexNameFromEntityID(entityID)
ESProxyService.getESDocument(indexName, this.itemID, docSource)
.then((response) => {
const sourceObtained = response.data._source
const prefName = ObjectPropertyAccess.getPropertyPalue(
sourceObtained,
'pref_name',
'',
false
)
const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
this.itemID,
prefName
)
this.$store.dispatch(
`${this.storeModuleName}/setReportCardStructure`,
reportCardStructure
)
this.$store.dispatch(`${this.storeModuleName}/setStructureReady`, true)
})
.catch((error) => {
RequestNotifications.dispatchRequestErrorNotification(
error,
this.$store.dispatch,
`There was an error while loading the page structure`
)
})
},
}
</script>
......
report_cards_structure/CompoundReportCardGenerator.js
+ 3
− 2
View file @ b4f4aa8d
......@@ -5,11 +5,12 @@ import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.
import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechanism.vue'
import CompoundCrystalStructures from '~/components/report_cards/chemical_probe/CompoundCrystalStructures.vue'
import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
const methods = {
generateReportCardStructure(itemID, title) {
generateReportCardStructure(itemID, prefName) {
return {
title,
title: `${EntityNames.EubopenCompound.singularEntityName} ${prefName}`,
sections: [
{
id: 'Summary',
......
report_cards_structure/TargetReportCardGenerator.js
+ 2
− 2
View file @ b4f4aa8d
......@@ -4,9 +4,9 @@ import EntityNames from '~/web-components-submodule/standardisation/EntityNames.
import TargetCrystalStructures from '~/components/report_cards/target/TargetCrystalStructures.vue'
const methods = {
generateReportCardStructure(itemID) {
generateReportCardStructure(itemID, prefName) {
return {
title: `${EntityNames.EubopenTarget.singularEntityName} ${itemID}`,
title: `${EntityNames.EubopenTarget.singularEntityName} ${prefName}`,
sections: [
{
id: 'NameAndClassification',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment