From a6f2ab13a6decebb722429fa21f095be0e0c7604 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Fri, 20 Aug 2021 16:16:56 +0100
Subject: [PATCH] Fetch real data for pdbe structures in eubopen compounds
---
.../chemical_probe/CrystalStructures.vue | 44 ------
.../report_cards/chemical_probe/Summary.vue | 8 +-
.../CrystalStructures/CrystalStructures.vue | 109 +++++++++++++++
.../CrystalStructures/PDBeVisualisations.vue | 126 ++++++++++++++++++
.../CompoundReportCardGenerator.js | 2 +-
web-components-submodule | 2 +-
6 files changed, 241 insertions(+), 50 deletions(-)
delete mode 100644 components/report_cards/chemical_probe/CrystalStructures.vue
create mode 100644 components/report_cards/shared/CrystalStructures/CrystalStructures.vue
create mode 100644 components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue
diff --git a/components/report_cards/chemical_probe/CrystalStructures.vue b/components/report_cards/chemical_probe/CrystalStructures.vue
deleted file mode 100644
index 905ae41..0000000
--- a/components/report_cards/chemical_probe/CrystalStructures.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
- <v-card class="yellow lighten-4">
- <v-card-text>
- <v-card-title> PDBe ligand code: {{ ligandCode }} </v-card-title>
- <v-row>
- <v-col v-for="pdbeMol in pdbeMolecules" :key="pdbeMol" cols="12" lg="6">
- <v-card outlined tile>
- <v-card-title> {{ pdbeMol }} </v-card-title>
- <v-card-text>
- <Molstar :pbde-molecule-i-d="pdbeMol" />
- </v-card-text>
- </v-card>
- </v-col>
- </v-row>
- </v-card-text>
- <v-card-actions>
- <a target="_blank" :href="pdbeEntriesList">
- <v-btn depressed color="primary">
- See all PDBe entries for {{ ligandCode }}
- <v-icon> mdi-open-in-new </v-icon>
- </v-btn>
- </a>
- </v-card-actions>
- </v-card>
-</template>
-
-<script>
-import Molstar from '~/web-components-submodule/components/externalTools/PDBe/Molstar.vue'
-export default {
- components: {
- Molstar,
- },
- data() {
- return {
- pdbeMolecules: ['1tbf', '1udt', '2h42'],
- ligandCode: 'VIA',
- pdbeEntriesList:
- 'https://www.ebi.ac.uk/pdbe-srv/pdbechem/PDBEntry/list/VIA',
- }
- },
-}
-</script>
-
-<style></style>
diff --git a/components/report_cards/chemical_probe/Summary.vue b/components/report_cards/chemical_probe/Summary.vue
index f440944..4386530 100644
--- a/components/report_cards/chemical_probe/Summary.vue
+++ b/components/report_cards/chemical_probe/Summary.vue
@@ -3,7 +3,7 @@
<v-card-text v-if="!dataLoaded">
<v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
</v-card-text>
- <v-template v-else>
+ <template v-else>
<v-row dense>
<v-col cols="12" md="7" lg="8">
<v-card-subtitle>Overview</v-card-subtitle>
@@ -19,12 +19,12 @@
MLLT1/3.
</p>
</v-card-text>
- <v-template v-if="!showStructureImgLaterally">
+ <template v-if="!showStructureImgLaterally">
<v-divider />
<v-card-subtitle>Structure</v-card-subtitle>
<v-divider />
<MoleculeImage :molecule-chembl-id="itemID" />
- </v-template>
+ </template>
<v-divider />
<v-card-subtitle>Details</v-card-subtitle>
<v-divider />
@@ -127,7 +127,7 @@
<MoleculeImage :molecule-chembl-id="itemID" bordered />
</v-col>
</v-row>
- </v-template>
+ </template>
</v-card>
</template>
diff --git a/components/report_cards/shared/CrystalStructures/CrystalStructures.vue b/components/report_cards/shared/CrystalStructures/CrystalStructures.vue
new file mode 100644
index 0000000..223d003
--- /dev/null
+++ b/components/report_cards/shared/CrystalStructures/CrystalStructures.vue
@@ -0,0 +1,109 @@
+<template>
+ <v-card>
+ <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
+ <template v-if="!loading && !thereAreRefs">
+ <v-card-text> No entires found in PDB for {{ itemID }} </v-card-text>
+ </template>
+ <template v-if="!loading && thereAreRefs">
+ <v-tabs show-arrows :vertical="makeTabsVertical">
+ <v-tab v-for="ref in pdbeRefs" :key="ref.id"> {{ ref.id }} </v-tab>
+ <v-tab-item v-for="ref in pdbeRefs" :key="`${ref.id}-item`">
+ <PDBeVisualisations :ligand-code="ref.id" :ref-link="ref.link" />
+ </v-tab-item>
+ </v-tabs>
+ </template>
+ </v-card>
+</template>
+
+<script>
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
+import PDBeVisualisations from '~/components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue'
+
+export default {
+ components: {
+ PDBeVisualisations,
+ },
+ props: {
+ idType: {
+ type: String,
+ default: () => EntityNames.EubopenCompound.entityID,
+ validator: (value) =>
+ [
+ EntityNames.EubopenCompound.entityID,
+ EntityNames.EubopenTarget.entityID,
+ ].includes(value),
+ },
+ itemID: {
+ type: String,
+ default: () => undefined,
+ },
+ },
+ data() {
+ return {
+ loading: true,
+ ligandCode: 'VIA',
+ pdbeRefs: [],
+ }
+ },
+ computed: {
+ makeTabsVertical() {
+ switch (this.$vuetify.breakpoint.name) {
+ case 'xs':
+ return false
+ case 'sm':
+ return false
+ default:
+ return true
+ }
+ },
+ thereAreRefs() {
+ return this.pdbeRefs.length > 0
+ },
+ },
+ mounted() {
+ if (this.idType === EntityNames.EubopenCompound.entityID) {
+ this.loadDataForCompounds()
+ } else {
+ this.loadDataForTargets()
+ }
+ },
+ methods: {
+ loadDataForCompounds() {
+ const entityID = EntityNames.Compound.entityID
+ const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+ const unichemPropertyPath = '_metadata.unichem'
+ const docSource = [unichemPropertyPath]
+
+ ESProxyService.getESDocument(indexName, this.itemID, docSource)
+ .then((response) => {
+ const sourceObtained = response.data._source
+ const unichemRefs = ObjectPropertyAccess.getPropertyPalue(
+ sourceObtained,
+ unichemPropertyPath,
+ [],
+ false
+ )
+ const pdbeRefs = unichemRefs.filter((ref) => ref.src_name === 'PDBe')
+ this.pdbeRefs = pdbeRefs
+ this.loading = false
+ })
+ .catch((error) => {
+ RequestNotifications.dispatchRequestErrorNotification(
+ error,
+ this.$store.dispatch,
+ `Crystal Structures: There was an error while loading the unichem references for ${this.itemID}`
+ )
+ })
+ },
+ loadDataForTargets() {
+ console.log('Load Data for Targets!')
+ },
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue b/components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue
new file mode 100644
index 0000000..cc0d691
--- /dev/null
+++ b/components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue
@@ -0,0 +1,126 @@
+<template>
+ <v-card outlined tile>
+ thereAreMolecules: {{ thereAreMolecules }}, pdbeMolecules:
+ {{ pdbeMolecules }}
+ <v-skeleton-loader v-if="loading" type="image"></v-skeleton-loader>
+ <template v-if="!loading && !thereAreRefs">
+ <v-card-text> No entires found in PDB for {{ ligandCode }} </v-card-text>
+ </template>
+ <template v-if="!loading && thereAreRefs">
+ <v-card-text>
+ <v-card-title> PDB ligand code: {{ ligandCode }} </v-card-title>
+ <v-row>
+ <v-col
+ v-for="pdbeMol in pdbeMolecules"
+ :key="pdbeMol"
+ cols="12"
+ lg="6"
+ >
+ <v-card outlined tile>
+ <v-card-title> {{ pdbeMol }} </v-card-title>
+ <v-card-text>
+ <Molstar :pbde-molecule-i-d="pdbeMol" />
+ </v-card-text>
+ </v-card>
+ </v-col>
+ </v-row>
+ </v-card-text>
+ <v-card-actions>
+ <div class="buttons-container d-flex flex-wrap justify-space-around">
+ <v-btn
+ class="a-button"
+ depressed
+ color="primary"
+ :href="refLink"
+ target="_blank"
+ >
+ Summary of {{ ligandCode }} in PDB
+
+ <v-icon> mdi-open-in-new </v-icon>
+ </v-btn>
+
+ <v-btn
+ class="a-button"
+ depressed
+ color="primary"
+ :href="pdbeEntriesListURL"
+ target="_blank"
+ >
+ All PDB entries for {{ ligandCode }}
+ <v-icon> mdi-open-in-new </v-icon>
+ </v-btn>
+ </div>
+ </v-card-actions>
+ </template>
+ </v-card>
+</template>
+
+<script>
+import axios from 'axios'
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
+import Molstar from '~/web-components-submodule/components/externalTools/PDBe/Molstar.vue'
+
+export default {
+ components: {
+ Molstar,
+ },
+ props: {
+ ligandCode: {
+ type: String,
+ default: () => '',
+ },
+ refLink: {
+ type: String,
+ default: () => '',
+ },
+ },
+ data() {
+ return {
+ pdbeMolecules: [],
+ loading: true,
+ }
+ },
+ computed: {
+ pdbeEntriesListURL() {
+ return `'https://www.ebi.ac.uk/pdbe-srv/pdbechem/PDBEntry/list/${this.ligandCode}`
+ },
+ thereAreMolecules() {
+ return this.pdbeMolecules.length > 0
+ },
+ },
+ mounted() {
+ this.loadPDBEntriesForLigand()
+ },
+ methods: {
+ loadPDBEntriesForLigand() {
+ const requestURL = `https://www.ebi.ac.uk/pdbe/graph-api/compound/in_pdb/${this.ligandCode}`
+ console.log('requestURL: ', requestURL)
+ axios
+ .get(requestURL)
+ .then((response) => {
+ console.log('response obtained: ', response)
+ const pdbeMolecules = response.data[this.ligandCode]
+ console.log('pdbeMolecules: ', pdbeMolecules)
+ this.pdbeMolecules = pdbeMolecules
+ this.loading = false
+ })
+ .catch((error) => {
+ RequestNotifications.dispatchRequestErrorNotification(
+ error,
+ this.$store.dispatch,
+ `There was an error while loading the PDB entries that contains the compound ${this.ligandCode}`
+ )
+ })
+ },
+ },
+}
+</script>
+
+<style scoped lang="scss">
+.buttons-container {
+ width: 100%;
+ .a-button {
+ margin-top: 5px;
+ }
+}
+</style>
diff --git a/report_cards_structure/CompoundReportCardGenerator.js b/report_cards_structure/CompoundReportCardGenerator.js
index 0ba150d..3c6cdec 100644
--- a/report_cards_structure/CompoundReportCardGenerator.js
+++ b/report_cards_structure/CompoundReportCardGenerator.js
@@ -3,7 +3,7 @@ import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/Co
import CellularAssayTargetEngagement from '~/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue'
import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.vue'
import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechanism.vue'
-import CrystalStructures from '~/components/report_cards/chemical_probe/CrystalStructures.vue'
+import CrystalStructures from '~/components/report_cards/shared/CrystalStructures/CrystalStructures.vue'
import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
diff --git a/web-components-submodule b/web-components-submodule
index 43d9419..cd0c1a3 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 43d94192fcbf788246d70e5c27f6d194e79f5a2a
+Subproject commit cd0c1a3cb8491bca0ab3225e228069353a1b1604
--
GitLab