Eubopen compound: use new ebuopen id

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue → components/report_cards/chemical_probe/EubopenCompoundReportCard.vue

@@ -29,7 +29,7 @@ export default {
   },
   data() {
     return {
-      storeModuleName: 'compoundReportCard',
+      storeModuleName: 'probeReportCard',
     }
   },
   computed: mapState({

components/report_cards/chemical_probe/Summary.vue

@@ -10,7 +10,7 @@
             <v-divider />
             <v-card-subtitle>Structure</v-card-subtitle>
             <v-divider />
-            <MoleculeImage :molecule-chembl-id="itemID" />
+            <MoleculeImage :molecule-chembl-id="chemblID" />
           </template>
           <v-card-subtitle>Details</v-card-subtitle>
           <v-divider />
@@ -19,6 +19,9 @@
               <v-col cols="12">
                 <div><b>EUbOPEN ID:</b> {{ itemID }}<v-divider /></div>
               </v-col>
+              <v-col cols="12">
+                <div><b>ChEMBL ID:</b> {{ chemblID }}<v-divider /></div>
+              </v-col>
               <v-col cols="12">
                 <div>
                   <b>Name:</b>
@@ -122,7 +125,7 @@
           lg="4"
           class="molecule-img-container"
         >
-          <MoleculeImage :molecule-chembl-id="itemID" bordered />
+          <MoleculeImage :molecule-chembl-id="chemblID" bordered />
         </v-col>
       </v-row>
     </template>
@@ -153,6 +156,8 @@ export default {
     ...mapState({
       dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
       probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
+      chemblID: (state) =>
+        state.probe.probeSummary.probeSummaryData.molecule_chembl_id,
       moleculeClassText: (state) => {
         const compoundData = state.probe.probeSummary.probeSummaryData
         const isChemicalProbe = ObjectPropertyAccess.getPropertyPalue(

pages/compound/_id.vue

 <template>
-  <ChemicalProbeReportCard :item-i-d="itemID" />
+  <EubopenCompoundReportCard :item-i-d="itemID" />
 </template>
 
 <script>
 import MetadataTagsGenerator from '@chembl/metadata-tags-generator'
-import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
+import EubopenCompoundReportCard from '~/components/report_cards/chemical_probe/EubopenCompoundReportCard.vue'
 import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
 import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
@@ -15,7 +15,7 @@ import LinksToEntities from '~/web-components-submodule/standardisation/LinksToE
 
 export default {
   components: {
-    ChemicalProbeReportCard,
+    EubopenCompoundReportCard,
   },
   layout: 'reportCard',
   async asyncData({ $axios, error, params, redirect }) {

store/probe/probeSummary.js

@@ -21,6 +21,7 @@ export const mutations = {
 export const actions = {
   loadData({ commit, state, dispatch }, itemID) {
     const docSource = [
+      'molecule_chembl_id',
       'pref_name',
       '_metadata.compound_generated.image_file',
       '_metadata.eubopen.in_vivo_use',