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

EUBOPEN probe: load some data for summary

parent 54b33690
No related branches found
No related tags found
1 merge request!8Improve layout of report cards and search bar
Showing with 229 additions and 104 deletions
<template>
<EntityReportCard :report-card-structure="reportCardStructure" />
<EntityReportCard
:report-card-structure="reportCardStructure"
:item-i-d="itemID"
/>
</template>
<script>
......@@ -11,11 +14,19 @@ export default {
components: {
EntityReportCard,
},
props: {
itemID: {
type: String,
default: () => undefined,
},
},
computed: mapState({
reportCardStructure: (state) => state.reportCard.reportCardStructure,
}),
mounted() {
const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure()
const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
this.itemID
)
this.$store.dispatch(
'reportCard/setReportCardStructure',
reportCardStructure
......
......@@ -14,6 +14,7 @@
import { datasetMixin } from '~/web-components-submodule/mixins/datasets/datasetMixin.js'
import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'
import ProbeMechanism from '~/web-components-submodule/store/datasets/generators/eubopen/chemicalProbe/ProbeMechanism.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
export default {
components: {
......@@ -35,6 +36,7 @@ export default {
propertiesGroups: {
1: { id: 'report_card_table', selected: true, allHeaders: [] },
},
entityID: EntityNames.EubopenCompound.entityID,
customDataRepresentationParams: {
possiblePageSizes: [5, 10],
itemsPerPage: 5,
......
<template>
<v-card>
<v-card-subtitle>Overview</v-card-subtitle>
<v-divider />
<v-card-text>
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-if="!dataLoaded">
<v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
</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>
PFI-6
</v-col>
</v-row>
<v-template v-else>
<v-card-subtitle>Overview</v-card-subtitle>
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12">
<b>Negative control compound:</b>
PFI-6N
</v-col>
</v-row>
<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-row class="details-row" dense>
<v-col cols="12">
<b>Synonyms:</b>
MLLT1/MLLT3 (ENL;LTG19;YEATS1 / AF- 9;YEATS3)
</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
</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-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
</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-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" 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" 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" 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" 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-icon>mdi-download</v-icon> PDF
</v-btn>
</v-card-actions>
<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-template>
</v-card>
</template>
<script>
export default {}
import { mapState } from 'vuex'
import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
export default {
components: {
Synonyms,
},
props: {
itemID: {
type: String,
default: () => undefined,
},
},
computed: mapState({
dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
}),
mounted() {
this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
},
}
</script>
<style>
......
<template>
<v-card outlined>
<v-card color="yellow lighten-4" outlined>
<v-card-text>
<EntityRelations />
</v-card-text>
......
......@@ -20,9 +20,10 @@
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12">
<div class="d-flex align-center">
<div class="d-flex align-center flex-column flex-md-row">
<b>Synonyms:</b>
<TargetSynonyms
<Synonyms
type="target_synonyms"
:target-components="nameAndClassificationData.target_components"
/>
</div>
......@@ -45,7 +46,7 @@
<v-divider />
<v-row class="details-row" dense>
<v-col cols="12">
<div class="d-flex align-center">
<div class="d-flex align-center flex-column flex-md-row">
<b>Protein Target Classification:</b>
<ProteinTargetClassification
......@@ -63,12 +64,12 @@
<script>
import { mapState } from 'vuex'
import TargetSynonyms from '~/web-components-submodule/components/common/ReportCards/Target/TargetSynonyms.vue'
import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
import ProteinTargetClassification from '~/web-components-submodule/components/common/ReportCards/Target/ProteinTargetClassification.vue'
export default {
components: {
TargetSynonyms,
Synonyms,
ProteinTargetClassification,
},
props: {
......
<template>
<div><ChemicalProbeReportCard /></div>
<ChemicalProbeReportCard :item-i-d="itemID" />
</template>
<script>
import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
export default {
components: {
ChemicalProbeReportCard,
},
layout: 'reportCard',
async asyncData({ $axios, error, params }) {
try {
const docSource = ['pref_name']
const result = await MetadataLoader.getMetadataForEntity(
EntityNames.EubopenCompound.entityID,
params.id,
docSource
)
return {
rawMetadata: result.data._source,
}
} catch (e) {
error({
statusCode: 404,
message: `No ${EntityNames.EubopenCompound.singularEntityName} found with id ${params.id}`,
})
}
},
head() {
return {
title: `${EntityNames.EubopenCompound.singularEntityName} ${this.itemID}`,
meta: [
{
hid: 'description',
name: 'description',
content: `${this.rawMetadata.pref_name}`,
},
],
}
},
computed: {
itemID() {
return this.$route.params.id
},
},
}
</script>
......
......@@ -130,6 +130,7 @@
<script>
export default {
layout: 'reportCard',
computed: {
esProxyBaseUrl() {
return process.env.esProxyBaseUrl
......
......@@ -26,13 +26,13 @@ export default {
} catch (e) {
error({
statusCode: 404,
message: `No Target found with id ${params.id}`,
message: `No ${EntityNames.EubopenTarget.singularEntityName} found with id ${params.id}`,
})
}
},
head() {
return {
title: `Target ${this.itemID}`,
title: `${EntityNames.EubopenTarget.singularEntityName} ${this.itemID}`,
meta: [
{
hid: 'description',
......
......@@ -5,11 +5,12 @@ import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.
import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechanism.vue'
import CrystalStructures from '~/components/report_cards/chemical_probe/CrystalStructures.vue'
import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
const methods = {
generateReportCardStructure() {
generateReportCardStructure(itemID) {
return {
title: 'PFI-6: A Chemical Probe for human MLLT1/3',
title: `${EntityNames.EubopenCompound.singularEntityName} ${itemID}`,
sections: [
{
id: 'Summary',
......
import NameAndClassification from '~/components/report_cards/target/NameAndClassification.vue'
import ActivityCharts from '~/components/report_cards/target/ActivityCharts.vue'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
const methods = {
generateReportCardStructure(itemID) {
return {
title: `Target ${itemID}`,
title: `${EntityNames.EubopenTarget.singularEntityName} ${itemID}`,
sections: [
{
id: 'NameAndClassification',
......
import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.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'
export const state = () => ({
probeSummaryData: {},
dataLoaded: false,
})
export const mutations = {
SET_DATA_LOADED(state, dataLoaded) {
state.dataLoaded = dataLoaded
},
SET_PROBE_SUMMARY_DATA(state, probeSummaryData) {
state.probeSummaryData = probeSummaryData
},
}
export const actions = {
loadData({ commit, state, dispatch }, itemID) {
const docSource = ['molecule_synonyms', 'pref_name']
const entityID = EntityNames.EubopenCompound.entityID
const indexName = IndexNames.getIndexNameFromEntityID(entityID)
ESProxyService.getESDocument(indexName, itemID, docSource)
.then((response) => {
console.log('data: ', response.data._source)
commit('SET_PROBE_SUMMARY_DATA', response.data._source)
commit('SET_DATA_LOADED', true)
})
.catch((error) => {
RequestNotifications.dispatchRequestErrorNotification(
error,
dispatch,
`There was an error while loading the name and classification!`
)
})
},
}
......@@ -32,7 +32,6 @@ export const actions = {
ESProxyService.getESDocument(indexName, itemID, docSource)
.then((response) => {
console.log('data: ', response.data._source)
commit('SET_NAME_AND_CLASSIFICATION_DATA', response.data._source)
commit('SET_DATA_LOADED', true)
})
......
Subproject commit d1367b0a20dcbaddaf865aad7998f2a87890620e
Subproject commit 879600fb8be6d49f51636d344466253b680f840e
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