From ecb1e210184bd84af1176fc0056b9b3e7415b366 Mon Sep 17 00:00:00 2001
From: David <dmendez@ebi.ac.uk>
Date: Thu, 29 Jul 2021 10:34:05 -0500
Subject: [PATCH] Eubopen target: show name and classification
---
.../target/NameAndClassification.vue | 70 ++++++++++++-------
.../report_cards/target/TargetReportCard.vue | 4 +-
layouts/reportCard.vue | 35 ++++++++++
pages/index.vue | 4 +-
.../TargetReportCardGenerator.js | 4 +-
store/target/nameAndClassification.js | 47 +++++++++++++
web-components-submodule | 2 +-
7 files changed, 135 insertions(+), 31 deletions(-)
create mode 100644 layouts/reportCard.vue
create mode 100644 store/target/nameAndClassification.js
diff --git a/components/report_cards/target/NameAndClassification.vue b/components/report_cards/target/NameAndClassification.vue
index ff99b84..0cadf56 100644
--- a/components/report_cards/target/NameAndClassification.vue
+++ b/components/report_cards/target/NameAndClassification.vue
@@ -1,63 +1,59 @@
<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;
}
diff --git a/components/report_cards/target/TargetReportCard.vue b/components/report_cards/target/TargetReportCard.vue
index caf4440..7579080 100644
--- a/components/report_cards/target/TargetReportCard.vue
+++ b/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
diff --git a/layouts/reportCard.vue b/layouts/reportCard.vue
new file mode 100644
index 0000000..5f0af70
--- /dev/null
+++ b/layouts/reportCard.vue
@@ -0,0 +1,35 @@
+<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>
diff --git a/pages/index.vue b/pages/index.vue
index 575abcd..df22baf 100644
--- a/pages/index.vue
+++ b/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
>
diff --git a/report_cards_structure/TargetReportCardGenerator.js b/report_cards_structure/TargetReportCardGenerator.js
index af505ff..b8cd4c1 100644
--- a/report_cards_structure/TargetReportCardGenerator.js
+++ b/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',
diff --git a/store/target/nameAndClassification.js b/store/target/nameAndClassification.js
new file mode 100644
index 0000000..7e58e8e
--- /dev/null
+++ b/store/target/nameAndClassification.js
@@ -0,0 +1,47 @@
+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!`
+ )
+ })
+ },
+}
diff --git a/web-components-submodule b/web-components-submodule
index 1ec6c03..d1367b0 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 1ec6c0358b317b8ed1918dafdc6dd0c7a5e47b6f
+Subproject commit d1367b0a20dcbaddaf865aad7998f2a87890620e
--
GitLab