Fetch real data for pdbe structures in eubopen compounds

components/report_cards/chemical_probe/CrystalStructures.vue

-<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>

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>
 

components/report_cards/shared/CrystalStructures/CrystalStructures.vue

+<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>

components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue

+<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>

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'
 

web-components-submodule @ cd0c1a3c

-Subproject commit 43d94192fcbf788246d70e5c27f6d194e79f5a2a
+Subproject commit cd0c1a3cb8491bca0ab3225e228069353a1b1604