_id.vue

<template>
  <ChemicalProbeReportCard :item-i-d="itemID" />
</template>

<script>
import MetadataTagsGenerator from '@chembl/metadata-tags-generator'
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: {
    ChemicalProbeReportCard,
  },
  layout: 'reportCard',
  async asyncData({ $axios, error, params }) {
    try {
      const docSource = [
        'molecule_chembl_id',
        'pref_name',
        'molecule_synonyms',
        '_metadata.compound_generated.image_file',
      ]
      const result = await MetadataLoader.getMetadataForEntity(
        EntityNames.EubopenCompound.entityID,
        params.id,
        docSource
      )

      const itemURL = `https://gateway.eubopen.org/compound/${params.id}`
      const imgBaseURL = 'https://www.ebi.ac.uk/chembl/api/data/image'
      const fallbackImgBaseURL = ''
      const bioschemasMetadata = await MetadataTagsGenerator.EUbOPEN.CompoundMetadata.getBioschemasMetadata(
        {
          itemID: params.id,
          itemURL,
          imgBaseURL,
          fallbackImgBaseURL,
        }
      )
      return {
        rawMetadata: result.data._source,
        bioschemasJSONLD: bioschemasMetadata,
      }
    } catch (e) {
      error({
        statusCode: 404,
        message: `No ${EntityNames.EubopenCompound.singularEntityName} found with id ${params.id}`,
      })
    }
  },
  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.canonicalDomain}` + 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: titleText,
      meta: [
        {
          hid: 'description',
          name: 'description',
          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,
        },
      ],
      script: [
        {
          id: 'JSON_LD',
          type: 'application/ld+json',
          json: this.bioschemasJSONLD,
        },
      ],
    }
  },
  computed: {
    itemID() {
      return this.$route.params.id
    },
  },
}
</script>

<style></style>