From 096ac0a89c67aa8c72fee192a92e7a644b617e26 Mon Sep 17 00:00:00 2001
From: David <dmendez@ebi.ac.uk>
Date: Fri, 30 Jul 2021 10:07:03 -0500
Subject: [PATCH] EUBOPEN probe: load some data for summary
---
.../ChemicalProbeReportCard.vue | 15 +-
.../chemical_probe/ProbeMechanism.vue | 2 +
.../report_cards/chemical_probe/Summary.vue | 206 ++++++++++--------
.../report_cards/target/ActivityCharts.vue | 2 +-
.../target/NameAndClassification.vue | 11 +-
pages/compound/_id.vue | 41 +++-
pages/index.vue | 1 +
pages/target/_id.vue | 4 +-
.../CompoundReportCardGenerator.js | 5 +-
.../TargetReportCardGenerator.js | 3 +-
store/probe/probeSummary.js | 40 ++++
store/target/nameAndClassification.js | 1 -
web-components-submodule | 2 +-
13 files changed, 229 insertions(+), 104 deletions(-)
create mode 100644 store/probe/probeSummary.js
diff --git a/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue b/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
index 5991f9b..25caad0 100644
--- a/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
+++ b/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
@@ -1,5 +1,8 @@
<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
diff --git a/components/report_cards/chemical_probe/ProbeMechanism.vue b/components/report_cards/chemical_probe/ProbeMechanism.vue
index 3d17afb..b46e402 100644
--- a/components/report_cards/chemical_probe/ProbeMechanism.vue
+++ b/components/report_cards/chemical_probe/ProbeMechanism.vue
@@ -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,
diff --git a/components/report_cards/chemical_probe/Summary.vue b/components/report_cards/chemical_probe/Summary.vue
index 1b7a70b..c820c2d 100644
--- a/components/report_cards/chemical_probe/Summary.vue
+++ b/components/report_cards/chemical_probe/Summary.vue
@@ -1,106 +1,136 @@
<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>
diff --git a/components/report_cards/target/ActivityCharts.vue b/components/report_cards/target/ActivityCharts.vue
index 2dcf334..df8b063 100644
--- a/components/report_cards/target/ActivityCharts.vue
+++ b/components/report_cards/target/ActivityCharts.vue
@@ -1,5 +1,5 @@
<template>
- <v-card outlined>
+ <v-card color="yellow lighten-4" outlined>
<v-card-text>
<EntityRelations />
</v-card-text>
diff --git a/components/report_cards/target/NameAndClassification.vue b/components/report_cards/target/NameAndClassification.vue
index 0cadf56..731c94e 100644
--- a/components/report_cards/target/NameAndClassification.vue
+++ b/components/report_cards/target/NameAndClassification.vue
@@ -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: {
diff --git a/pages/compound/_id.vue b/pages/compound/_id.vue
index 8fc3c74..ee72721 100644
--- a/pages/compound/_id.vue
+++ b/pages/compound/_id.vue
@@ -1,13 +1,52 @@
<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>
diff --git a/pages/index.vue b/pages/index.vue
index df22baf..15d49d0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -130,6 +130,7 @@
<script>
export default {
+ layout: 'reportCard',
computed: {
esProxyBaseUrl() {
return process.env.esProxyBaseUrl
diff --git a/pages/target/_id.vue b/pages/target/_id.vue
index 209a00e..530329e 100644
--- a/pages/target/_id.vue
+++ b/pages/target/_id.vue
@@ -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',
diff --git a/report_cards_structure/CompoundReportCardGenerator.js b/report_cards_structure/CompoundReportCardGenerator.js
index c2994c3..0ba150d 100644
--- a/report_cards_structure/CompoundReportCardGenerator.js
+++ b/report_cards_structure/CompoundReportCardGenerator.js
@@ -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',
diff --git a/report_cards_structure/TargetReportCardGenerator.js b/report_cards_structure/TargetReportCardGenerator.js
index b8cd4c1..2739b5f 100644
--- a/report_cards_structure/TargetReportCardGenerator.js
+++ b/report_cards_structure/TargetReportCardGenerator.js
@@ -1,10 +1,11 @@
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',
diff --git a/store/probe/probeSummary.js b/store/probe/probeSummary.js
new file mode 100644
index 0000000..6a6181b
--- /dev/null
+++ b/store/probe/probeSummary.js
@@ -0,0 +1,40 @@
+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!`
+ )
+ })
+ },
+}
diff --git a/store/target/nameAndClassification.js b/store/target/nameAndClassification.js
index 7e58e8e..de03ae1 100644
--- a/store/target/nameAndClassification.js
+++ b/store/target/nameAndClassification.js
@@ -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)
})
diff --git a/web-components-submodule b/web-components-submodule
index d1367b0..879600f 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit d1367b0a20dcbaddaf865aad7998f2a87890620e
+Subproject commit 879600fb8be6d49f51636d344466253b680f840e
--
GitLab