Eubopen target: show name and classification

components/report_cards/target/NameAndClassification.vue

 <template>
   <v-card outlined>
-    dataLoaded: {{ dataLoaded }} itemID: {{ itemID }}
-    <v-card-text>
+    <v-card-text v-if="!dataLoaded">
       <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
     </v-card-text>
-    <v-card-text>
+    <v-card-text v-else>
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Type:</b>
-          SINGLE PROTEIN
+          {{ nameAndClassificationData.target_type }}
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Preferred Name:</b>
-          Microtubule-associated protein 2
+          {{ nameAndClassificationData.pref_name }}
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
-          <b>Synonyms:</b>
-          MAP2 MAP-2 Microtubule-associated protein 2
+          <div class="d-flex align-center">
+            <b>Synonyms:</b>
+            <TargetSynonyms
+              :target-components="nameAndClassificationData.target_components"
+            />
+          </div>
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Organism:</b>
-          Homo Sapiens
+          {{ nameAndClassificationData.organism }}
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Species Group:</b>
-          No
+          {{ speciesGroup }}
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
-          <b>Protein Target Classification:</b>
-          <br />
-          <br />
-          <p>
-            <v-chip outlined color="secondary" label>
-              Unclassified protein
-            </v-chip>
-            >
-            <v-chip outlined color="secondary" label>
-              Epigenetic regulator
-            </v-chip>
-            >
-            <v-chip outlined color="secondary" label> Reader </v-chip>
-            >
-            <v-chip outlined color="secondary" label> Bromodomain </v-chip>
-          </p>
+          <div class="d-flex align-center">
+            <b>Protein Target Classification:</b>
+
+            <ProteinTargetClassification
+              :protein-classifications="
+                nameAndClassificationData._metadata.protein_classification
+              "
+            />
+          </div>
         </v-col>
       </v-row>
       <v-divider />
@@ -67,7 +63,14 @@
 
 <script>
 import { mapState } from 'vuex'
+import TargetSynonyms from '~/web-components-submodule/components/common/ReportCards/Target/TargetSynonyms.vue'
+import ProteinTargetClassification from '~/web-components-submodule/components/common/ReportCards/Target/ProteinTargetClassification.vue'
+
 export default {
+  components: {
+    TargetSynonyms,
+    ProteinTargetClassification,
+  },
   props: {
     itemID: {
       type: String,
@@ -76,14 +79,29 @@ export default {
   },
   computed: mapState({
     dataLoaded: (state) => state.target.nameAndClassification.dataLoaded,
+    nameAndClassificationData: (state) =>
+      state.target.nameAndClassification.nameAndClassificationData,
+    speciesGroup: (state) => {
+      const speciesGroupFlag =
+        state.target.nameAndClassification.nameAndClassificationData
+          .species_group_flag
+      if (speciesGroupFlag == null) {
+        return '---'
+      }
+      if (speciesGroupFlag) {
+        return 'Yes'
+      }
+      return 'No'
+    },
   }),
+
   mounted() {
     this.$store.dispatch('target/nameAndClassification/loadData', this.itemID)
   },
 }
 </script>
 
-<style>
+<style scoped>
 .details-row {
   margin: 0;
 }

components/report_cards/target/TargetReportCard.vue

@@ -24,7 +24,9 @@ export default {
     reportCardStructure: (state) => state.reportCard.reportCardStructure,
   }),
   mounted() {
-    const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure()
+    const reportCardStructure = TargetReportCardGenerator.generateReportCardStructure(
+      this.itemID
+    )
     this.$store.dispatch(
       'reportCard/setReportCardStructure',
       reportCardStructure

layouts/reportCard.vue

+<template>
+  <v-app>
+    <Notifications />
+    <MainAppBar :permanently-pinned="true">
+      <template #logo>
+        <Logo />
+      </template>
+    </MainAppBar>
+    <v-main class="lowered">
+      <nuxt />
+    </v-main>
+    <Footer />
+  </v-app>
+</template>
+
+<script>
+import MainAppBar from '~/web-components-submodule/components/common/Masthead/MainAppBar.vue'
+import Footer from '~/components/footer/Footer.vue'
+import Notifications from '~/web-components-submodule/components/common/Notifications.vue'
+import Logo from '~/components/Logo.vue'
+
+export default {
+  components: {
+    MainAppBar,
+    Footer,
+    Notifications,
+    Logo,
+  },
+}
+</script>
+<style scoped>
+.lowered {
+  margin-top: 80px;
+}
+</style>

pages/index.vue

@@ -5,7 +5,9 @@
       <v-btn color="primary" outlined to="/compound/browse">
         Browse Compounds
       </v-btn>
-      <v-btn color="primary" outlined to="/target/1"> Target Example</v-btn>
+      <v-btn color="primary" outlined to="/target/CHEMBL1075317">
+        Target Example</v-btn
+      >
       <v-btn color="primary" outlined to="/target/browse">
         Browse Targets</v-btn
       >

report_cards_structure/TargetReportCardGenerator.js

@@ -2,9 +2,9 @@ import NameAndClassification from '~/components/report_cards/target/NameAndClass
 import ActivityCharts from '~/components/report_cards/target/ActivityCharts.vue'
 
 const methods = {
-  generateReportCardStructure() {
+  generateReportCardStructure(itemID) {
     return {
-      title: 'Target 123456',
+      title: `Target ${itemID}`,
       sections: [
         {
           id: 'NameAndClassification',

store/target/nameAndClassification.js

+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
+import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+
+export const state = () => ({
+  nameAndClassificationData: {},
+  dataLoaded: false,
+})
+
+export const mutations = {
+  SET_DATA_LOADED(state, dataLoaded) {
+    state.dataLoaded = dataLoaded
+  },
+  SET_NAME_AND_CLASSIFICATION_DATA(state, nameAndClassificationData) {
+    state.nameAndClassificationData = nameAndClassificationData
+  },
+}
+
+export const actions = {
+  loadData({ commit, state, dispatch }, itemID) {
+    const docSource = [
+      'target_type',
+      'pref_name',
+      'target_components',
+      'organism',
+      'species_group_flag',
+      '_metadata.protein_classification',
+    ]
+    const entityID = EntityNames.EubopenTarget.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+
+    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)
+      })
+      .catch((error) => {
+        RequestNotifications.dispatchRequestErrorNotification(
+          error,
+          dispatch,
+          `There was an error while loading the name and classification!`
+        )
+      })
+  },
+}

web-components-submodule @ d1367b0a

-Subproject commit 1ec6c0358b317b8ed1918dafdc6dd0c7a5e47b6f
+Subproject commit d1367b0a20dcbaddaf865aad7998f2a87890620e