EUBOPEN probe: load some data for summary

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

 <template>
-  <EntityReportCard :report-card-structure="reportCardStructure" />
+  <EntityReportCard
+    :report-card-structure="reportCardStructure"
+    :item-i-d="itemID"
+  />
 </template>
 
 <script>
@@ -11,11 +14,19 @@ export default {
   components: {
     EntityReportCard,
   },
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
   computed: mapState({
     reportCardStructure: (state) => state.reportCard.reportCardStructure,
   }),
   mounted() {
-    const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure()
+    const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
+      this.itemID
+    )
     this.$store.dispatch(
       'reportCard/setReportCardStructure',
       reportCardStructure

components/report_cards/chemical_probe/ProbeMechanism.vue

@@ -14,6 +14,7 @@
 import { datasetMixin } from '~/web-components-submodule/mixins/datasets/datasetMixin.js'
 import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'
 import ProbeMechanism from '~/web-components-submodule/store/datasets/generators/eubopen/chemicalProbe/ProbeMechanism.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 
 export default {
   components: {
@@ -35,6 +36,7 @@ export default {
       propertiesGroups: {
         1: { id: 'report_card_table', selected: true, allHeaders: [] },
       },
+      entityID: EntityNames.EubopenCompound.entityID,
       customDataRepresentationParams: {
         possiblePageSizes: [5, 10],
         itemsPerPage: 5,

components/report_cards/chemical_probe/Summary.vue

 <template>
   <v-card>
-    <v-card-subtitle>Overview</v-card-subtitle>
-    <v-divider />
-    <v-card-text>
-      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.
+    <v-card-text v-if="!dataLoaded">
+      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
     </v-card-text>
-    <v-divider />
-    <v-card-subtitle>Details</v-card-subtitle>
-    <v-divider />
-    <v-card-text>
-      <v-row class="details-row" dense>
-        <v-col cols="12">
-          <b>Chemical Probe Name:</b>
-          PFI-6
-        </v-col>
-      </v-row>
+    <v-template v-else>
+      <v-card-subtitle>Overview</v-card-subtitle>
       <v-divider />
-      <v-row class="details-row" dense>
-        <v-col cols="12">
-          <b>Negative control compound:</b>
-          PFI-6N
-        </v-col>
-      </v-row>
+      <v-card-text 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.
+      </v-card-text>
       <v-divider />
-      <v-row class="details-row" dense>
-        <v-col cols="12">
-          <b>Synonyms:</b>
-          MLLT1/MLLT3 (ENL;LTG19;YEATS1 / AF- 9;YEATS3)
-        </v-col>
-      </v-row>
-      <v-divider />
-      <v-row class="details-row" 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" 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-card-subtitle>Details</v-card-subtitle>
       <v-divider />
+      <v-card-text>
+        <v-row class="details-row" dense>
+          <v-col cols="12">
+            <b>Chemical Probe Name:</b>
+            {{ probeSummaryData.pref_name }}
+          </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>
+        </v-row>
+        <v-divider />
+        <v-row class="details-row" dense>
+          <v-col cols="12" class="d-flex align-center flex-column flex-md-row">
+            <b>Synonyms:</b>
+            <Synonyms
+              type="molecule_synonyms"
+              :molecule-synonyms="probeSummaryData.molecule_synonyms"
+            />
+          </v-col>
+        </v-row>
+        <v-divider />
+        <v-row class="details-row" 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" 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" 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" 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" dense>
-        <v-col cols="12">
-          <b>Orthogonal chemical probes:</b>
-          NVS-MLLT-1
-        </v-col>
-      </v-row>
-      <v-divider />
+        <v-row class="details-row" dense>
+          <v-col cols="12">
+            <b>Orthogonal chemical probes:</b>
+            NVS-MLLT-1
+          </v-col>
+        </v-row>
+        <v-divider />
 
-      <v-row class="details-row" 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" 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" dense>
-        <v-col cols="12">
-          <b>Suitable for in vivo use:</b>
-          no
-        </v-col>
-      </v-row>
-      <v-divider />
-    </v-card-text>
+        <v-row class="details-row" 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-btn
-        href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
-        color="primary"
-      >
-        <v-icon>mdi-download</v-icon> PDF
-      </v-btn>
-    </v-card-actions>
+      <v-card-actions>
+        <v-btn
+          href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
+          color="primary"
+        >
+          <v-icon>mdi-download</v-icon> PDF
+        </v-btn>
+      </v-card-actions>
+    </v-template>
   </v-card>
 </template>
 
 <script>
-export default {}
+import { mapState } from 'vuex'
+import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
+
+export default {
+  components: {
+    Synonyms,
+  },
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
+  computed: mapState({
+    dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
+    probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
+  }),
+  mounted() {
+    this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
+  },
+}
 </script>
 
 <style>

components/report_cards/target/ActivityCharts.vue

 <template>
-  <v-card outlined>
+  <v-card color="yellow lighten-4" outlined>
     <v-card-text>
       <EntityRelations />
     </v-card-text>

components/report_cards/target/NameAndClassification.vue

@@ -20,9 +20,10 @@
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
-          <div class="d-flex align-center">
+          <div class="d-flex align-center flex-column flex-md-row">
             <b>Synonyms:</b>
-            <TargetSynonyms
+            <Synonyms
+              type="target_synonyms"
               :target-components="nameAndClassificationData.target_components"
             />
           </div>
@@ -45,7 +46,7 @@
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
-          <div class="d-flex align-center">
+          <div class="d-flex align-center flex-column flex-md-row">
             <b>Protein Target Classification:</b>
 
             <ProteinTargetClassification
@@ -63,12 +64,12 @@
 
 <script>
 import { mapState } from 'vuex'
-import TargetSynonyms from '~/web-components-submodule/components/common/ReportCards/Target/TargetSynonyms.vue'
+import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
 import ProteinTargetClassification from '~/web-components-submodule/components/common/ReportCards/Target/ProteinTargetClassification.vue'
 
 export default {
   components: {
-    TargetSynonyms,
+    Synonyms,
     ProteinTargetClassification,
   },
   props: {

pages/compound/_id.vue

 <template>
-  <div><ChemicalProbeReportCard /></div>
+  <ChemicalProbeReportCard :item-i-d="itemID" />
 </template>
 
 <script>
 import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
+import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+
 export default {
   components: {
     ChemicalProbeReportCard,
   },
+  layout: 'reportCard',
+  async asyncData({ $axios, error, params }) {
+    try {
+      const docSource = ['pref_name']
+      const result = await MetadataLoader.getMetadataForEntity(
+        EntityNames.EubopenCompound.entityID,
+        params.id,
+        docSource
+      )
+      return {
+        rawMetadata: result.data._source,
+      }
+    } catch (e) {
+      error({
+        statusCode: 404,
+        message: `No ${EntityNames.EubopenCompound.singularEntityName} found with id ${params.id}`,
+      })
+    }
+  },
+  head() {
+    return {
+      title: `${EntityNames.EubopenCompound.singularEntityName} ${this.itemID}`,
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: `${this.rawMetadata.pref_name}`,
+        },
+      ],
+    }
+  },
+  computed: {
+    itemID() {
+      return this.$route.params.id
+    },
+  },
 }
 </script>
 

pages/index.vue

@@ -130,6 +130,7 @@
 
 <script>
 export default {
+  layout: 'reportCard',
   computed: {
     esProxyBaseUrl() {
       return process.env.esProxyBaseUrl

pages/target/_id.vue

@@ -26,13 +26,13 @@ export default {
     } catch (e) {
       error({
         statusCode: 404,
-        message: `No Target found with id ${params.id}`,
+        message: `No ${EntityNames.EubopenTarget.singularEntityName} found with id ${params.id}`,
       })
     }
   },
   head() {
     return {
-      title: `Target ${this.itemID}`,
+      title: `${EntityNames.EubopenTarget.singularEntityName} ${this.itemID}`,
       meta: [
         {
           hid: 'description',

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 CrystalStructures from '~/components/report_cards/chemical_probe/CrystalStructures.vue'
 import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 
 const methods = {
-  generateReportCardStructure() {
+  generateReportCardStructure(itemID) {
     return {
-      title: 'PFI-6: A Chemical Probe for human MLLT1/3',
+      title: `${EntityNames.EubopenCompound.singularEntityName} ${itemID}`,
       sections: [
         {
           id: 'Summary',

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

store/probe/probeSummary.js

+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.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'
+
+export const state = () => ({
+  probeSummaryData: {},
+  dataLoaded: false,
+})
+
+export const mutations = {
+  SET_DATA_LOADED(state, dataLoaded) {
+    state.dataLoaded = dataLoaded
+  },
+  SET_PROBE_SUMMARY_DATA(state, probeSummaryData) {
+    state.probeSummaryData = probeSummaryData
+  },
+}
+
+export const actions = {
+  loadData({ commit, state, dispatch }, itemID) {
+    const docSource = ['molecule_synonyms', 'pref_name']
+    const entityID = EntityNames.EubopenCompound.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+
+    ESProxyService.getESDocument(indexName, itemID, docSource)
+      .then((response) => {
+        console.log('data: ', response.data._source)
+        commit('SET_PROBE_SUMMARY_DATA', response.data._source)
+        commit('SET_DATA_LOADED', true)
+      })
+      .catch((error) => {
+        RequestNotifications.dispatchRequestErrorNotification(
+          error,
+          dispatch,
+          `There was an error while loading the name and classification!`
+        )
+      })
+  },
+}

store/target/nameAndClassification.js

@@ -32,7 +32,6 @@ export const actions = {
 
     ESProxyService.getESDocument(indexName, itemID, docSource)
       .then((response) => {
-        console.log('data: ', response.data._source)
         commit('SET_NAME_AND_CLASSIFICATION_DATA', response.data._source)
         commit('SET_DATA_LOADED', true)
       })

web-components-submodule @ 879600fb

-Subproject commit d1367b0a20dcbaddaf865aad7998f2a87890620e
+Subproject commit 879600fb8be6d49f51636d344466253b680f840e