From 7695530ebd3c126987ab76d334a9e18008f46319 Mon Sep 17 00:00:00 2001 From: David Mendez <dmendez@ebi.ac.uk> Date: Thu, 25 Jan 2024 15:45:20 -0500 Subject: [PATCH] Tissue Basic Information: add new vue component --- .../BasicInformation.vue | 1 - .../basic_information/BasicInformation.vue | 167 ++++++++++++++++++ .../sections/basic_information/_chembl_id.vue | 2 +- .../sections/basic_information/_chembl_id.vue | 22 +++ 4 files changed, 190 insertions(+), 2 deletions(-) rename components/report_cards/cell_line/sections/{ => basic_information}/BasicInformation.vue (98%) create mode 100644 components/report_cards/tissue/sections/basic_information/BasicInformation.vue create mode 100644 pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue diff --git a/components/report_cards/cell_line/sections/BasicInformation.vue b/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue similarity index 98% rename from components/report_cards/cell_line/sections/BasicInformation.vue rename to components/report_cards/cell_line/sections/basic_information/BasicInformation.vue index 49ae324..5a141da 100644 --- a/components/report_cards/cell_line/sections/BasicInformation.vue +++ b/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue @@ -101,7 +101,6 @@ import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js import ESProxyService from '~/web-components-submodule/services/ESProxyService.js' import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js' import DefaultValues from '~/web-components-submodule/standardisation/DefaultValues.js' -// import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js' export default { mixins: [resizeMessagesMixin, embeddingStateMixin], diff --git a/components/report_cards/tissue/sections/basic_information/BasicInformation.vue b/components/report_cards/tissue/sections/basic_information/BasicInformation.vue new file mode 100644 index 0000000..049cbdc --- /dev/null +++ b/components/report_cards/tissue/sections/basic_information/BasicInformation.vue @@ -0,0 +1,167 @@ +<template> + <div class="main-container"> + <resize-observer v-if="isEmbedded" @notify="handleResize" /> + + <v-card flat> + <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> + + <v-card-text v-else> + <v-row dense> + <v-col cols="12"> + <div><b>ID:</b> {{ chemblID }}<v-divider /></div> + </v-col> + <v-col cols="12"> + <div><b>Name:</b> {{ pref_name }}<v-divider /></div> + </v-col> + <v-col cols="12"> + <div> + <b>Uberon ID:</b> + <a + v-if="hasUberonID" + target="_parent" + :href="`https://www.ebi.ac.uk/ols/search?q=${uberon_id}`" + >{{ uberon_id }}</a + ><template v-else>{{ uberon_id }}</template> + <v-divider /> + </div> + </v-col> + <v-col cols="12"> + <div> + <b>EFO ID:</b> + + <a + v-if="hasEFOID" + target="_parent" + :href="`https://www.ebi.ac.uk/ols/search?q=${efo_id}`" + >{{ efo_id }}</a + ><template v-else>{{ efo_id }}</template> + <v-divider /> + </div> + </v-col> + <v-col cols="12"> + <div> + <b>BTO ID:</b> + + <a + v-if="hasBTOID" + target="_parent" + :href="`https://www.ebi.ac.uk/ols/search?q=${bto_id}`" + >{{ bto_id }}</a + ><template v-else>{{ bto_id }}</template> + <v-divider /> + </div> + </v-col> + <v-col cols="12"> + <div> + <b>Caloha ID:</b> + + <a + v-if="hasCalohaID" + target="_parent" + :href="`https://www.nextprot.org/term/${caloha_id}`" + >{{ caloha_id }}</a + ><template v-else>{{ caloha_id }}</template> + <v-divider /> + </div> + </v-col> + </v-row> + </v-card-text> + </v-card> + </div> +</template> + +<script> +import { resizeMessagesMixin } from '~/mixins/embedding/resizeMessages.js' +import { embeddingStateMixin } from '~/mixins/embedding/embeddingState.js' +import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js' +import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js' +import ESProxyService from '~/web-components-submodule/services/ESProxyService.js' +import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js' +import DefaultValues from '~/web-components-submodule/standardisation/DefaultValues.js' + +export default { + mixins: [resizeMessagesMixin, embeddingStateMixin], + props: { + chemblID: { + type: String, + default: () => undefined, + }, + }, + data() { + return { + loading: true, + showError: false, + errorMsg: undefined, + pref_name: undefined, + uberon_id: undefined, + efo_id: undefined, + bto_id: undefined, + caloha_id: undefined, + } + }, + computed: { + hasUberonID() { + return this.uberon_id !== DefaultValues.DefaultNullTextValue + }, + hasEFOID() { + return this.efo_id !== DefaultValues.DefaultNullTextValue + }, + hasBTOID() { + return this.bto_id !== DefaultValues.DefaultNullTextValue + }, + hasCalohaID() { + return this.caloha_id !== DefaultValues.DefaultNullTextValue + }, + }, + mounted() { + const docSource = [ + 'pref_name', + 'uberon_id', + 'efo_id', + 'bto_id', + 'caloha_id', + ] + const entityID = EntityNames.Tissue.entityID + const indexName = IndexNames.getIndexNameFromEntityID(entityID) + + ESProxyService.getESDocument(indexName, this.chemblID, docSource) + .then((response) => { + const docData = response.data._source + this.pref_name = ObjectPropertyAccess.getPropertyPalue( + docData, + 'pref_name' + ) + this.uberon_id = ObjectPropertyAccess.getPropertyPalue( + docData, + 'uberon_id' + ) + this.efo_id = ObjectPropertyAccess.getPropertyPalue(docData, 'efo_id') + this.bto_id = ObjectPropertyAccess.getPropertyPalue(docData, 'bto_id') + this.caloha_id = ObjectPropertyAccess.getPropertyPalue( + docData, + 'caloha_id' + ) + + this.loading = false + }) + .catch((error) => { + this.loading = false + this.showError = true + this.errorMsg = error + }) + }, + methods: {}, +} +</script> + +<style scoped lang="scss"> +.main-container { + position: relative; +} +</style> diff --git a/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue b/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue index 0fc03d8..f1e13e9 100644 --- a/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue +++ b/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue @@ -6,7 +6,7 @@ </template> <script> -import BasicInformation from '~/components/report_cards/cell_line/sections/BasicInformation.vue' +import BasicInformation from '~/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue' export default { components: { BasicInformation }, diff --git a/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue b/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue new file mode 100644 index 0000000..aea4080 --- /dev/null +++ b/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue @@ -0,0 +1,22 @@ +<template> + <BasicInformation + :chembl-i-d="chemblID" + id-for-parent="TissueBasicInformation" + /> +</template> + +<script> +import BasicInformation from '~/components/report_cards/tissue/sections/basic_information/BasicInformation.vue' + +export default { + components: { BasicInformation }, + layout: 'embedded', + computed: { + chemblID() { + return this.$route.params.chembl_id + }, + }, +} +</script> + +<style></style> -- GitLab