Add first version of pdbe structures visualisation for targets

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

@@ -92,13 +92,12 @@ export default {
   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
         })

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/shared/CrystalStructures/CrystalStructures.vue'
+import CompoundCrystalStructures from '~/components/report_cards/chemical_probe/CompoundCrystalStructures.vue'
 import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
 import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 
@@ -51,7 +51,7 @@ const methods = {
         {
           id: 'CrystalStructures',
           title: 'Crystal Structures',
-          component: CrystalStructures,
+          component: CompoundCrystalStructures,
           index: 6,
         },
       ],

report_cards_structure/TargetReportCardGenerator.js

 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'
+import TargetCrystalStructures from '~/components/report_cards/target/TargetCrystalStructures.vue'
 
 const methods = {
   generateReportCardStructure(itemID) {
@@ -19,6 +20,12 @@ const methods = {
           component: ActivityCharts,
           index: 1,
         },
+        {
+          id: 'CrystalStructures',
+          title: 'Crystal Structures',
+          component: TargetCrystalStructures,
+          index: 2,
+        },
       ],
     }
   },

web-components-submodule @ 98ca968e

-Subproject commit cd0c1a3cb8491bca0ab3225e228069353a1b1604
+Subproject commit 98ca968e340287d92402a1ebd41622d0f666941e