diff --git a/components/report_cards/chemical_probe/ControlStructuresAndUse.vue b/components/report_cards/chemical_probe/ControlStructuresAndUse.vue index fdc757f9e9fd7c2b9fd6ef938b94dff95228c4cb..427e28623b82db89c50592e578f232047dc4a56d 100644 --- a/components/report_cards/chemical_probe/ControlStructuresAndUse.vue +++ b/components/report_cards/chemical_probe/ControlStructuresAndUse.vue @@ -5,10 +5,11 @@ <v-col cols="12" sm="6"> <v-card tile elevation="0"> <v-card-title>PFI-6 Chemical Probe</v-card-title> - <v-img - height="250" - src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL160074.svg" - ></v-img> + <MoleculeImage + molecule-chembl-id="CHEMBL160074" + contain + :aspect-ratio="16 / 9" + /> <v-card-subtitle> <a href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL160074" @@ -39,10 +40,11 @@ <v-col cols="12" sm="6"> <v-card tile elevation="0"> <v-card-title>PFI-6N Negative Control</v-card-title> - <v-img - height="250" - src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1269459.svg" - ></v-img> + <MoleculeImage + molecule-chembl-id="CHEMBL1269459" + contain + :aspect-ratio="16 / 9" + /> <v-card-subtitle> <a href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1269459" @@ -73,10 +75,11 @@ <v-col cols="12" sm="6"> <v-card tile elevation="0"> <v-card-title>PFI-6N Another Control 1</v-card-title> - <v-img - height="250" - src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1276106.svg" - ></v-img> + <MoleculeImage + molecule-chembl-id="CHEMBL1276106" + contain + :aspect-ratio="16 / 9" + /> <v-card-subtitle> <a href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1276106" @@ -107,10 +110,11 @@ <v-col cols="12" sm="6"> <v-card tile elevation="0"> <v-card-title>PFI-6N Another Control 2</v-card-title> - <v-img - height="250" - src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1557.svg" - ></v-img> + <MoleculeImage + molecule-chembl-id="CHEMBL1557" + contain + :aspect-ratio="16 / 9" + /> <v-card-subtitle> <a href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1557" @@ -145,9 +149,12 @@ <script> import TextToClipboard from '~/web-components-submodule/components/common/TextToClipboard.vue' +import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue' + export default { components: { TextToClipboard, + MoleculeImage, }, } </script> diff --git a/components/report_cards/chemical_probe/Summary.vue b/components/report_cards/chemical_probe/Summary.vue index dd421893aecd096fe7479901d1738fb07b224051..5c415e860ebd4b35dc33d643482d3b5b049bef49 100644 --- a/components/report_cards/chemical_probe/Summary.vue +++ b/components/report_cards/chemical_probe/Summary.vue @@ -35,7 +35,7 @@ <v-row class="details-row" dense> <v-col cols="12"> <b>Chemical Probe Name:</b> - {{ probeSummaryData.pref_name }} + {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }} </v-col> </v-row> <v-divider /> @@ -184,6 +184,9 @@ export default { mounted() { this.$store.dispatch('probe/probeSummary/loadData', this.itemID) }, + methods: { + getPropertyPalue: ObjectPropertyAccess.getPropertyPalue, + }, } </script> diff --git a/components/report_cards/target/NameAndClassification.vue b/components/report_cards/target/NameAndClassification.vue index 731c94ecb1235986c3a03e8f9288bedce52b56f1..3b7d8aed4dc2411cc76745bef7dd0944dd66b65d 100644 --- a/components/report_cards/target/NameAndClassification.vue +++ b/components/report_cards/target/NameAndClassification.vue @@ -7,14 +7,16 @@ <v-row class="details-row" dense> <v-col cols="12"> <b>Type:</b> - {{ nameAndClassificationData.target_type }} + {{ + getPropertyPalue(nameAndClassificationData, 'target_type', '---') + }} </v-col> </v-row> <v-divider /> <v-row class="details-row" dense> <v-col cols="12"> <b>Preferred Name:</b> - {{ nameAndClassificationData.pref_name }} + {{ getPropertyPalue(nameAndClassificationData, 'pref_name', '---') }} </v-col> </v-row> <v-divider /> @@ -33,7 +35,7 @@ <v-row class="details-row" dense> <v-col cols="12"> <b>Organism:</b> - {{ nameAndClassificationData.organism }} + {{ getPropertyPalue(nameAndClassificationData, 'organism', '---') }} </v-col> </v-row> <v-divider /> @@ -66,6 +68,7 @@ import { mapState } from 'vuex' import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue' import ProteinTargetClassification from '~/web-components-submodule/components/common/ReportCards/Target/ProteinTargetClassification.vue' +import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js' export default { components: { @@ -95,10 +98,12 @@ export default { return 'No' }, }), - mounted() { this.$store.dispatch('target/nameAndClassification/loadData', this.itemID) }, + methods: { + getPropertyPalue: ObjectPropertyAccess.getPropertyPalue, + }, } </script> diff --git a/static/img/placeholders/structureLoadingPlaceholder.png b/static/img/placeholders/structureLoadingPlaceholder.png new file mode 100644 index 0000000000000000000000000000000000000000..f4a56d8a1a85e87581ac1a8b21fdc412987c6003 Binary files /dev/null and b/static/img/placeholders/structureLoadingPlaceholder.png differ diff --git a/web-components-submodule b/web-components-submodule index 28f28cd2cafd89687a170b5a9191b1ed8199c026..6e14f50d6975490861689cd3f838830632b7448d 160000 --- a/web-components-submodule +++ b/web-components-submodule @@ -1 +1 @@ -Subproject commit 28f28cd2cafd89687a170b5a9191b1ed8199c026 +Subproject commit 6e14f50d6975490861689cd3f838830632b7448d