Eubopen report cards: show pref names for report card titles

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -32,7 +32,9 @@ export default {
     }
   },
   computed: mapState({
-    reportCardStructure: (state) => state.probeReportCard.reportCardStructure,
+    reportCardStructure(state) {
+      return state[this.storeModuleName].reportCardStructure
+    },
   }),
   mounted() {
     const docSource = ['pref_name']
@@ -54,11 +56,11 @@ export default {
           prefName
         )
         this.$store.dispatch(
-          'probeReportCard/setReportCardStructure',
+          `${this.storeModuleName}/setReportCardStructure`,
           reportCardStructure
         )
 
-        this.$store.dispatch('probeReportCard/setStructureReady', true)
+        this.$store.dispatch(`${this.storeModuleName}/setStructureReady`, true)
       })
       .catch((error) => {
         RequestNotifications.dispatchRequestErrorNotification(

components/report_cards/chemical_probe/Summary.vue

@@ -6,40 +6,27 @@
     <template v-else>
       <v-row dense>
         <v-col cols="12" md="7" lg="8">
-          <v-card-subtitle>Overview</v-card-subtitle>
-          <v-divider />
-          <v-card-text>
-            <p 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.
-            </p>
-          </v-card-text>
           <template v-if="!showStructureImgLaterally">
             <v-divider />
             <v-card-subtitle>Structure</v-card-subtitle>
             <v-divider />
             <MoleculeImage :molecule-chembl-id="itemID" />
           </template>
-          <v-divider />
           <v-card-subtitle>Details</v-card-subtitle>
           <v-divider />
           <v-card-text>
-            <v-row class="details-row" dense>
+            <v-row class="details-row yellow lighten-4" dense>
               <v-col cols="12">
-                <b>Chemical Probe Name:</b>
-                {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
+                <b>CIDX ID:</b>
+                someID
               </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 cols="12">
+                <b>Chemical Probe Name:</b>
+                {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
               </v-col>
             </v-row>
             <v-divider />
@@ -53,62 +40,9 @@
               </v-col>
             </v-row>
             <v-divider />
-            <v-row class="details-row yellow lighten-4" 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 yellow lighten-4" 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 yellow lighten-4" 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 yellow lighten-4" dense>
-              <v-col cols="12">
-                <b>Orthogonal chemical probes:</b>
-                NVS-MLLT-1
-              </v-col>
-            </v-row>
-            <v-divider />
-
-            <v-row class="details-row yellow lighten-4" 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 yellow lighten-4" 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-card-actions class="d-flex justify-center">
             <v-btn
               href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
               color="primary"

components/report_cards/target/TargetReportCard.vue

@@ -8,8 +8,13 @@
 
 <script>
 import { mapState } from 'vuex'
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
 import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
 import TargetReportCardGenerator from '~/report_cards_structure/TargetReportCardGenerator.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'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
 
 export default {
   components: {
@@ -27,16 +32,44 @@ export default {
     }
   },
   computed: mapState({
-    reportCardStructure: (state) => state.targetReportCard.reportCardStructure,
+    reportCardStructure(state) {
+      return state[this.storeModuleName].reportCardStructure
+    },
   }),
   mounted() {
-    const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
-      this.itemID
-    )
-    this.$store.dispatch(
-      'targetReportCard/setReportCardStructure',
-      reportCardStructure
-    )
+    const docSource = ['pref_name']
+    const entityID = EntityNames.EubopenTarget.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+
+    ESProxyService.getESDocument(indexName, this.itemID, docSource)
+      .then((response) => {
+        const sourceObtained = response.data._source
+        const prefName = ObjectPropertyAccess.getPropertyPalue(
+          sourceObtained,
+          'pref_name',
+          '',
+          false
+        )
+
+        const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
+          this.itemID,
+          prefName
+        )
+
+        this.$store.dispatch(
+          `${this.storeModuleName}/setReportCardStructure`,
+          reportCardStructure
+        )
+
+        this.$store.dispatch(`${this.storeModuleName}/setStructureReady`, true)
+      })
+      .catch((error) => {
+        RequestNotifications.dispatchRequestErrorNotification(
+          error,
+          this.$store.dispatch,
+          `There was an error while loading the page structure`
+        )
+      })
   },
 }
 </script>

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 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'
 
 const methods = {
-  generateReportCardStructure(itemID, title) {
+  generateReportCardStructure(itemID, prefName) {
     return {
-      title,
+      title: `${EntityNames.EubopenCompound.singularEntityName} ${prefName}`,
       sections: [
         {
           id: 'Summary',

report_cards_structure/TargetReportCardGenerator.js

@@ -4,9 +4,9 @@ import EntityNames from '~/web-components-submodule/standardisation/EntityNames.
 import TargetCrystalStructures from '~/components/report_cards/target/TargetCrystalStructures.vue'
 
 const methods = {
-  generateReportCardStructure(itemID) {
+  generateReportCardStructure(itemID, prefName) {
     return {
-      title: `${EntityNames.EubopenTarget.singularEntityName} ${itemID}`,
+      title: `${EntityNames.EubopenTarget.singularEntityName} ${prefName}`,
       sections: [
         {
           id: 'NameAndClassification',