diff --git a/pages/compound/_id.vue b/pages/compound/_id.vue index aa63a61e174a3c81254543da9328d5aa4f044c15..4633ac40a2d92c0e529fd8672a8dd08cc54b351e 100644 --- a/pages/compound/_id.vue +++ b/pages/compound/_id.vue @@ -3,119 +3,119 @@ </template> <script> -// import MetadataTagsGenerator from '@chembl/metadata-tags-generator' +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' +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 - // ) + 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 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 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 - // ) + const chemblID = this.rawMetadata.molecule_chembl_id + const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue( + this.rawMetadata, + '_metadata.compound_generated.image_file', + undefined, + true + ) - // let imgURL + let imgURL - // if (generatedImageFilePath == null) { - // imgURL = `${process.env.chemblWSBaseUrl}/image/${chemblID}.svg` - // } else { - // imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}` - // } + 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, - // }, - // ], - // } - // }, + 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