-
David Mendez authored18dc0516
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
OneSet.vue 4.35 KiB
<template>
<div>
<v-skeleton-loader v-if="loading" type="table" />
<v-card-text v-else-if="showError">
<div class="text-caption error--text">Error: {{ errorMsg }}.</div>
</v-card-text>
<template v-else>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
<br />
<v-data-table
:headers="headers"
:items="setItems"
:items-per-page="10"
:search="search"
>
<template #[`item.target_pref_name`]="{ item }">
<a
v-if="showItemLinkToTarget(item)"
:href="getItemLinkToTarget(item)"
>
{{ getItemTargetIDText(item) }}
</a>
<template v-else>
{{ getItemTargetIDText(item) }}
</template>
</template>
<template #[`item.COMPOUND_NAME`]="{ item }">
<div
v-if="showItemLinkToCompound(item)"
class="d-flex flex-column justify-center align-center"
>
<MoleculeImage
:molecule-chembl-id="item['Molecule ChEMBL ID']"
:aspect-ratio="String(16 / 9)"
max-width="250px"
contain
/>
<a :href="getItemLinkToCompound(item)">
{{ getItemCompoundIDText(item) }}
</a>
</div>
<template v-else>
{{ getItemCompoundIDText(item) }}
</template>
</template>
</v-data-table>
</template>
</div>
</template>
<script>
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
export default {
components: {
MoleculeImage,
},
props: {
setID: {
type: String,
default: () => undefined,
},
},
data() {
return {
loading: true,
showError: false,
errorMsg: undefined,
setItems: [],
search: '',
nullTextValue: '---',
headers: [
{
text: 'Compound Name',
value: 'COMPOUND_NAME',
},
{
text: 'Protein Family',
value: 'Protein Family',
},
{
text: 'Target Name',
value: 'target_pref_name',
},
{
text: 'Affinity Biochemical (nM)',
value: 'Affinity biochemical',
},
{
text: 'Affinity On-target Cellular (nM)',
value: 'Affinity on-target cellular',
},
{
text: 'Recommended Concentration',
value: 'Recommended Concentration',
},
],
}
},
async mounted() {
try {
const setItemsResponse = await ESProxyService.getGenericData(
`eubopen/miscellaneous/dataset/${this.setID}`
)
this.setItems = setItemsResponse.data.setItems
} catch (e) {
this.showError = true
this.errorMsg = e.message
} finally {
this.loading = false
}
},
methods: {
showItemLinkToTarget(item) {
return item.target_id != null && item.target_id !== this.nullTextValue
},
getItemTargetIDText(item) {
const targetPrefName = item.target_pref_name
const targetID = item.target_id
return targetPrefName == null || targetPrefName === this.nullTextValue
? targetID
: targetPrefName
},
getItemLinkToTarget(item) {
return LinksToEntities[
EntityNames.EubopenTarget.entityID
].getLinkToReportCard(item.target_id)
},
showItemLinkToCompound(item) {
return (
item['Molecule ChEMBL ID'] != null &&
item['Molecule ChEMBL ID'] !== this.nullTextValue
)
},
getItemCompoundIDText(item) {
const compoundPrefName = item.COMPOUND_NAME
const compoundID = item['Molecule ChEMBL ID']
return compoundPrefName == null || compoundPrefName === this.nullTextValue
? compoundID
: compoundPrefName
},
getItemLinkToCompound(item) {
return LinksToEntities[
EntityNames.EubopenCompound.entityID
].getLinkToReportCard(item['Molecule ChEMBL ID'])
},
},
}
</script>
<style></style>