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

Eubopen compound: improve layout of summary section

parent 096ac0a8
No related branches found
No related tags found
1 merge request!8Improve layout of report cards and search bar
Hide whitespace changes
Inline Side-by-side
components/report_cards/chemical_probe/ControlStructuresAndUse.vue
+ 1
− 1
View file @ 8df54463
<template>
<v-card>
<v-card-text>
<v-card-text class="yellow lighten-4">
<v-row>
<v-col cols="12" sm="6">
<v-card tile elevation="0">
......
components/report_cards/chemical_probe/Summary.vue
+ 156
− 99
View file @ 8df54463
......@@ -4,107 +4,139 @@
<v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
</v-card-text>
<v-template v-else>
<v-card-subtitle>Overview</v-card-subtitle>
<v-divider />
<v-card-text 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.
</v-card-text>
<v-divider />
<v-card-subtitle>Details</v-card-subtitle>
<v-divider />
<v-card-text>
<v-row class="details-row" dense>
<v-col cols="12">
<b>Chemical Probe Name:</b>
{{ probeSummaryData.pref_name }}
</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>
</v-row>
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12" class="d-flex align-center flex-column flex-md-row">
<b>Synonyms:</b>
<Synonyms
type="molecule_synonyms"
:molecule-synonyms="probeSummaryData.molecule_synonyms"
/>
</v-col>
</v-row>
<v-divider />
<v-row class="details-row" 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
<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-col>
</v-row>
<v-divider />
<v-row class="details-row" 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-card-text>
<v-template v-if="!showStructureImgLaterally">
<v-divider />
<v-card-subtitle>Structure</v-card-subtitle>
<v-divider />
<MoleculeImage
:molecule-chembl-id="itemID"
:generated-image-file-path="generatedImageFilePath"
/>
</v-template>
<v-divider />
<v-card-subtitle>Details</v-card-subtitle>
<v-divider />
<v-card-text>
<v-row class="details-row" dense>
<v-col cols="12">
<b>Chemical Probe Name:</b>
{{ probeSummaryData.pref_name }}
</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>
</v-row>
<v-divider />
<v-row class="details-row" dense>
<v-col
cols="12"
class="d-flex align-center flex-column flex-md-row"
>
<b>Synonyms:</b>
<Synonyms
type="molecule_synonyms"
:molecule-synonyms="probeSummaryData.molecule_synonyms"
/>
</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" 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>Publications:</b>
None at the time of writing
</v-col>
</v-row>
<v-divider />
<v-row class="details-row" 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>Orthogonal chemical probes:</b>
NVS-MLLT-1
</v-col>
</v-row>
<v-divider />
<v-row class="details-row" 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>Cellular assay(s) for target-engagement:</b>
NanoBRET FRAP
</v-col>
</v-row>
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12">
<b>Suitable for in vivo use:</b>
no
</v-col>
</v-row>
<v-divider />
</v-card-text>
<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-btn
href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
color="primary"
<v-card-actions>
<v-btn
href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
color="primary"
>
<v-icon>mdi-download</v-icon> PDF
</v-btn>
</v-card-actions>
</v-col>
<v-col
v-if="showStructureImgLaterally"
cols="4"
md="5"
lg="4"
class="molecule-img-container"
>
<v-icon>mdi-download</v-icon> PDF
</v-btn>
</v-card-actions>
<MoleculeImage
:molecule-chembl-id="itemID"
:generated-image-file-path="generatedImageFilePath"
bordered
/>
</v-col>
</v-row>
</v-template>
</v-card>
</template>
......@@ -112,10 +144,13 @@
<script>
import { mapState } from 'vuex'
import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
export default {
components: {
Synonyms,
MoleculeImage,
},
props: {
itemID: {
......@@ -123,18 +158,40 @@ export default {
default: () => undefined,
},
},
computed: mapState({
dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
}),
computed: {
...mapState({
dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
generatedImageFilePath: (state) =>
ObjectPropertyAccess.getPropertyPalue(
state.probe.probeSummary.probeSummaryData,
'_metadata.compound_generated.image_file',
undefined,
true
),
}),
showStructureImgLaterally() {
switch (this.$vuetify.breakpoint.name) {
case 'xs':
return false
case 'sm':
return false
default:
return true
}
},
},
mounted() {
this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
},
}
</script>
<style>
<style scoped lang="scss">
.details-row {
margin: 0;
}
.molecule-img-container {
padding-right: 10px;
}
</style>
nuxt.config.js
+ 6
− 0
View file @ 8df54463
......@@ -24,6 +24,12 @@ export default {
delayedJobsBaseUrl:
process.env.DELAYED_JOBS_BASE_URL ||
'https://wwwdev.ebi.ac.uk/chembl/interface_api/delayed_jobs',
chemblWSBaseUrl:
process.env.CHEMBL_WS_BASE_URL ||
'https://wwwdev.ebi.ac.uk/chembl/api/data',
fallbackIMGsBaseUrl:
process.env.FALLBACK_IMGS_BASE_URL ||
'https://wwwdev.ebi.ac.uk/chembl/k8s/static/chembl/img',
delayedJobsIgnoreCache: process.env.DELAYED_JOBS_IGNORE_CACHE === 'true',
esIndexPrefix: process.env.ES_INDEX_PREFIX || 'chembl_',
djJobStatusCheckIntervalMillis: process.env
......
store/probe/probeSummary.js
+ 6
− 2
View file @ 8df54463
......@@ -19,13 +19,17 @@ export const mutations = {
export const actions = {
loadData({ commit, state, dispatch }, itemID) {
const docSource = ['molecule_synonyms', 'pref_name']
const docSource = [
'molecule_synonyms',
'pref_name',
'_metadata.compound_generated.image_file',
]
const entityID = EntityNames.EubopenCompound.entityID
const indexName = IndexNames.getIndexNameFromEntityID(entityID)
ESProxyService.getESDocument(indexName, itemID, docSource)
.then((response) => {
console.log('data: ', response.data._source)
console.log('data received: ', response.data._source)
commit('SET_PROBE_SUMMARY_DATA', response.data._source)
commit('SET_DATA_LOADED', true)
})
......
web-components-submodule @ 743d6c66
Compare 879600fb...743d6c66
Subproject commit 879600fb8be6d49f51636d344466253b680f840e
Subproject commit 743d6c6657d00d482c4204cba10efcbdd6b432ca
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