From 47e5c9f864213d085f85413707572efee51d5203 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Thu, 28 Oct 2021 14:59:47 +0100
Subject: [PATCH] Eubopen: add metadata for target and compound report cards
---
nuxt.config.js | 12 +++++--
pages/compound/_id.vue | 59 ++++++++++++++++++++++++++++++++--
pages/target/_id.vue | 69 ++++++++++++++++++++++++++++++++++++++--
web-components-submodule | 2 +-
4 files changed, 132 insertions(+), 10 deletions(-)
diff --git a/nuxt.config.js b/nuxt.config.js
index b2e905e..d0828ec 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -4,15 +4,20 @@ require('dotenv').config({ path: process.env.ENV_FILE_PATH })
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
- titleTemplate: '%s - eubopen-web',
- title: 'eubopen-web',
+ titleTemplate: '%s - EUbOPEN',
+ title: 'EUbOPEN Portal',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
- { hid: 'description', name: 'description', content: '' },
+ {
+ hid: 'description',
+ name: 'description',
+ content:
+ 'The EUbOPEN consortium is an Innovative Medicines Initiative (IMI) funded project to enable and unlock biology in the open.',
+ },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
@@ -52,6 +57,7 @@ export default {
entityBrowserStateUrlTemplate:
process.env.ENTITY_BROWSER_STATE_URL_TEMPLATE ||
'/<BROWSER_NAME>/browse/<GENERATED_STATE>',
+ primaryDomain: process.env.PRIMARY_DOMAIN || '0.0.0.0:3000',
},
// Global CSS: https://go.nuxtjs.dev/config-css
diff --git a/pages/compound/_id.vue b/pages/compound/_id.vue
index 079f4f4..8df38dc 100644
--- a/pages/compound/_id.vue
+++ b/pages/compound/_id.vue
@@ -6,6 +6,8 @@
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'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
+import StringUtils from '~/web-components-submodule/utils/StringUtils.js'
export default {
components: {
@@ -14,7 +16,12 @@ export default {
layout: 'reportCard',
async asyncData({ $axios, error, params }) {
try {
- const docSource = ['pref_name']
+ const docSource = [
+ 'molecule_chembl_id',
+ 'pref_name',
+ 'molecule_synonyms',
+ '_metadata.compound_generated.image_file',
+ ]
const result = await MetadataLoader.getMetadataForEntity(
EntityNames.EubopenCompound.entityID,
params.id,
@@ -31,13 +38,59 @@ export default {
}
},
head() {
+ const name = this.rawMetadata.pref_name || this.itemID
+ const synonymsList = this.rawMetadata.molecule_synonyms
+ .filter((synonym) => synonym.syn_type !== 'TRADE_NAME')
+ .map((synonym) => synonym.molecule_synonym)
+ const synonymsText =
+ synonymsList.length === 0 ? '' : `Synonyms: ${synonymsList.join(', ')}`
+ const descriptionText = StringUtils.truncateString(
+ `Explore ${name} ${this.rawMetadata.pref_name} in EUbOPEN. ${synonymsText}`,
+ 170
+ )
+
+ const titleText = `${EntityNames.EubopenCompound.singularEntityName} ${name}`
+ const canonicalURL =
+ `https://${process.env.primaryDomain}` + this.$route.path
+
+ const chemblID = this.rawMetadata.molecule_chembl_id
+ const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue(
+ this.rawMetadata,
+ '_metadata.compound_generated.image_file',
+ undefined,
+ true
+ )
+
+ let imgURL
+
+ if (generatedImageFilePath == null) {
+ imgURL = `${process.env.chemblWSBaseUrl}/image/${chemblID}.svg`
+ } else {
+ imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}`
+ }
+
return {
- title: `${EntityNames.EubopenCompound.singularEntityName} ${this.pref_name}`,
+ title: titleText,
meta: [
{
hid: 'description',
name: 'description',
- content: `${this.rawMetadata.pref_name}`,
+ content: descriptionText,
+ },
+ { hid: 'og:title', name: 'og:title', content: titleText },
+ {
+ hid: 'og:description',
+ name: 'og:description',
+ content: descriptionText,
+ },
+ { hid: 'og:type', name: 'og:type', content: 'object' },
+ { hid: 'og:url', name: 'og:url', content: canonicalURL },
+ { hid: 'og:image', name: 'og:image', content: imgURL },
+ ],
+ link: [
+ {
+ rel: 'canonical',
+ href: canonicalURL,
},
],
}
diff --git a/pages/target/_id.vue b/pages/target/_id.vue
index dce39d4..9c4eb9f 100644
--- a/pages/target/_id.vue
+++ b/pages/target/_id.vue
@@ -9,6 +9,7 @@ import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.j
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
+import StringUtils from '~/web-components-submodule/utils/StringUtils.js'
export default {
components: {
@@ -50,7 +51,7 @@ export default {
}
} else {
try {
- const docSource = ['pref_name']
+ const docSource = ['pref_name', 'target_components']
const result = await MetadataLoader.getMetadataForEntity(
entityID,
itemID,
@@ -68,13 +69,47 @@ export default {
}
},
head() {
+ const name = this.rawMetadata.pref_name || this.itemID
+ const synonymsList = this.parseTargetSynonyms(
+ this.rawMetadata.target_components
+ )
+ const synonymsText =
+ synonymsList.length === 0 ? '' : `Synonyms: ${synonymsList.join(', ')}`
+ const descriptionText = StringUtils.truncateString(
+ `Explore ${EntityNames.EubopenTarget.singularEntityName} ${name} in EUbOPEN. ${synonymsText}`,
+ 170
+ )
+ const titleText = `${EntityNames.EubopenTarget.singularEntityName} ${name}`
+
+ const canonicalURL =
+ `https://${process.env.primaryDomain}` + this.$route.path
+
+ const imgURL = `https://${
+ process.env.primaryDomain
+ }${require('~/static/img/logo.png')}`
+
return {
- title: `${EntityNames.EubopenTarget.singularEntityName} ${this.itemID}`,
+ title: titleText,
meta: [
{
hid: 'description',
name: 'description',
- content: `${this.rawMetadata.pref_name}`,
+ content: descriptionText,
+ },
+ { hid: 'og:title', name: 'og:title', content: titleText },
+ {
+ hid: 'og:description',
+ name: 'og:description',
+ content: descriptionText,
+ },
+ { hid: 'og:type', name: 'og:type', content: 'object' },
+ { hid: 'og:url', name: 'og:url', content: canonicalURL },
+ { hid: 'og:image', name: 'og:image', content: imgURL },
+ ],
+ link: [
+ {
+ rel: 'canonical',
+ href: canonicalURL,
},
],
}
@@ -84,6 +119,34 @@ export default {
return this.$route.params.id
},
},
+ methods: {
+ parseTargetSynonyms(targetComponents) {
+ const theSynonyms = []
+ targetComponents.forEach((component) => {
+ component.target_component_synonyms.forEach((synonym) => {
+ const synonymTerm = synonym.component_synonym
+ if (synonymTerm != null) {
+ if (synonym.syn_type !== 'EC_NUMBER') {
+ theSynonyms.push(synonymTerm)
+ }
+ }
+ })
+ })
+ return this.cleanUpSynonyms([...new Set(theSynonyms)])
+ },
+ cleanUpSynonyms(synonyms) {
+ const upperCase = new Set()
+ const finalSynonyms = []
+ synonyms.forEach((synonym) => {
+ const synonymUpperCase = synonym.toUpperCase()
+ if (!upperCase.has(synonymUpperCase)) {
+ upperCase.add(synonymUpperCase)
+ finalSynonyms.push(synonym)
+ }
+ })
+ return finalSynonyms
+ },
+ },
}
</script>
diff --git a/web-components-submodule b/web-components-submodule
index 90d092e..aedc8a0 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 90d092e3a4d86cffc1c80164cea2129f6474b407
+Subproject commit aedc8a0fe49296cfbf772093e55f5c44c04457f5
--
GitLab