Eubopen: add metadata for target and compound report cards

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

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,
         },
       ],
     }

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>
 

web-components-submodule @ aedc8a0f

-Subproject commit 90d092e3a4d86cffc1c80164cea2129f6474b407
+Subproject commit aedc8a0fe49296cfbf772093e55f5c44c04457f5