<template> <v-card> <v-card-text v-if="loading"> <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader> </v-card-text> <v-card-text v-else-if="showError"> <div class="text-caption error--text">Error: {{ errorMsg }}.</div> </v-card-text> <template v-else> <v-row dense> <v-col cols="12" md="7" lg="8"> <template v-if="!showStructureImgLaterally"> <v-divider /> <v-card-subtitle>Structure</v-card-subtitle> <v-divider /> <MoleculeImage :molecule-chembl-id="chemblID" /> </template> <v-card-subtitle>Details</v-card-subtitle> <v-divider /> <v-card-text> <v-row dense> <v-col cols="12"> <div><b>EUbOPEN ID:</b> {{ itemID }}<v-divider /></div> </v-col> <v-col cols="12"> <div><b>ChEMBL ID:</b> {{ chemblID }}<v-divider /></div> </v-col> <v-col cols="12"> <div> <b>Name:</b> {{ prefName }} <v-divider /> </div> </v-col> <v-col cols="12"> <div> <b>Synonyms:</b> <br /> <Synonyms type="molecule_synonyms" :entity-i-d="entityID" :item-i-d="itemID" /> <v-divider /> </div> </v-col> <v-col cols="12"> <div> <b>Suitable for in vivo use:</b> {{ suitableForInVivoUse }} <v-divider /> </div> </v-col> <v-col cols="12"> <div> <b>Molecule Class:</b> {{ moleculeClassText }} <v-divider /> </div> </v-col> <v-col cols="12"> <div> <b>Recommended Cell Concentration:</b> {{ recommendedCellConcentration }} <v-divider /> </div> </v-col> <v-col cols="12"> <b>Link to probe data package:</b> <a :href="linkToProbePackage"> {{ linkToProbePackage }} </a> </v-col> </v-row> </v-card-text> </v-col> <v-col v-if="showStructureImgLaterally" cols="4" md="5" lg="4" class="molecule-img-container" > <MoleculeImage :molecule-chembl-id="chemblID" bordered /> </v-col> </v-row> </template> </v-card> </template> <script> import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue' import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue' import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js' import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js' import ESProxyService from '~/web-components-submodule/services/ESProxyService.js' import ErrorTracking from '~/web-components-submodule/tracking/ErrorTracking.js' import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js' export default { components: { Synonyms, MoleculeImage, }, props: { itemID: { type: String, default: () => undefined, }, }, data() { return { loading: true, showError: false, errorMsg: undefined, chemblID: undefined, prefName: undefined, suitableForInVivoUse: undefined, moleculeClassText: undefined, recommendedCellConcentration: undefined, } }, computed: { showStructureImgLaterally() { switch (this.$vuetify.breakpoint.name) { case 'xs': return false case 'sm': return false default: return true } }, entityID() { return EntityNames.EubopenCompound.entityID }, }, mounted() { this.$store.dispatch('probe/probeSummary/loadData', this.itemID) const docSource = [ 'molecule_chembl_id', 'pref_name', '_metadata.compound_generated.image_file', '_metadata.eubopen.recommended_cell_concentration', '_metadata.eubopen.in_vivo_use', '_metadata.eubopen.is_probe', '_metadata.eubopen.is_control', '_metadata.eubopen.is_chemogenomic_probe', 'molecule_structures.canonical_smiles', 'molecule_structures.standard_inchi_key', '_metadata.compound_records.src_id', ] const entityID = EntityNames.EubopenCompound.entityID const indexName = IndexNames.getIndexNameFromEntityID(entityID) ESProxyService.getESDocument(indexName, this.itemID, docSource) .then((response) => { const compoundData = response.data._source this.chemblID = compoundData.molecule_chembl_id this.prefName = compoundData.pref_name this.suitableForInVivoUse = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.eubopen.in_vivo_use', false ) ? 'yes' : 'no' const isChemicalProbe = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.eubopen.is_probe', false ) const isNegativeControl = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.eubopen.is_control', false ) const isChemogenomicProbe = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.eubopen.is_chemogenomic_probe', false ) const allClasses = [] if (isChemicalProbe) { allClasses.push('Chemical Probe') } if (isNegativeControl) { allClasses.push('Negative Control') } if (isChemogenomicProbe) { allClasses.push('Chemogenomic Compound') } this.moleculeClassText = allClasses.join(', ') this.recommendedCellConcentration = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.eubopen.recommended_cell_concentration' ) const compoundRecords = ObjectPropertyAccess.getPropertyPalue( compoundData, '_metadata.compound_records' ) const srcIDs = compoundRecords.map((record) => record.src_id) if (srcIDs.includes(55)) { this.linkToProbePackage = 'https://www.thesgc.org/donated-chemical-probes' } else { this.linkToProbePackage = 'https://www.eubopen.org/chemical-probes' } this.loading = false }) .catch((error) => { ErrorTracking.trackError(error, this) this.loading = false this.showError = true this.errorMsg = error }) }, methods: { getPropertyPalue: ObjectPropertyAccess.getPropertyPalue, }, } </script> <style scoped lang="scss"> .molecule-img-container { padding-right: 10px; } </style>