diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue index 48ffa22d24a2abb4c6f62b0b9363120eb035cf71..063c44666ea88ec6bb77b24fd1d1d7262ff3d448 100644 --- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue +++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue @@ -18,57 +18,80 @@ </v-card-title> <v-container> <v-card outlined height="60vh"> - imgData: {{ imgData }} - <!-- <v-img + <v-carousel + :continuous="false" + hide-delimiter-background height="100%" - contain - :lazy-src=" - require('~/assets/img/placeholders/CellHealthAndViabilityPlaceholder.png') - " - :src="imgUrl" + light > - <template #placeholder> - <v-row class="fill-height ma-0" align="center" justify="center"> - <v-card> - <v-card-title> Loading Image... </v-card-title> + <v-carousel-item + v-for="(replicateData, assayChemblID) in imgData.byReplicates" + :key="assayChemblID" + > + <v-sheet color="grey lighten-4" height="100%" tile> + <v-card height="100%"> + <v-card-title + >Replicate + {{ + parseInt(replicateData.replicate_number) + }}</v-card-title + > + <v-card-text> - <div class="d-flex justify-center"> - <v-progress-circular - indeterminate - color="primary" - ></v-progress-circular> - </div> + <v-row dense> + <v-col cols="12" sm="6"> + <v-img + height="100%" + contain + :lazy-src=" + require('~/assets/img/placeholders/CellHealthAndViabilityPlaceholder.png') + " + :src="replicateData.img_url" + > + <template #placeholder> + <v-row + class="fill-height ma-0" + align="center" + justify="center" + > + <v-card> + <v-card-title> + Loading Image... + </v-card-title> + <v-card-text> + <div class="d-flex justify-center"> + <v-progress-circular + indeterminate + color="primary" + ></v-progress-circular> + </div> + </v-card-text> + </v-card> + </v-row> + </template> + </v-img> + </v-col> + + <v-col cols="12" sm="6"> + <b>Img URL:</b><br /> + <a href="replicateData.img_url"> + {{ replicateData.img_url }}</a + > + <br /><br /> + <b>Assay:</b><br /> + <a :href="getLinkToAssay(assayChemblID)">{{ + assayChemblID + }}</a> + </v-col> + </v-row> </v-card-text> </v-card> - </v-row> - </template> - </v-img> --> + </v-sheet> + </v-carousel-item> + </v-carousel> </v-card> </v-container> <v-divider /> - <v-container> - <v-list dense> - <v-subheader>Image URL:</v-subheader> - <v-list-item> - <v-list-item-content> - <v-list-item-title> - <a :href="imgUrl">{{ imgUrl }}</a></v-list-item-title - > - </v-list-item-content> - </v-list-item> - <v-subheader>Image Data DOI:</v-subheader> - <v-list-item> - <v-list-item-content> - <v-list-item-title> - <a href="https://dx.doi.org/10.6019/S-BIAD145" - >https://dx.doi.org/10.6019/S-BIAD145</a - ></v-list-item-title - > - </v-list-item-content> - </v-list-item> - </v-list> - </v-container> - <v-divider /> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" text @click="dialog = false"> Close </v-btn> @@ -79,6 +102,9 @@ </template> <script> +import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js' +import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js' + export default { props: { title: { @@ -95,6 +121,13 @@ export default { dialog: false, } }, + methods: { + getLinkToAssay(chemblID) { + return LinksToEntities[EntityNames.Assay.entityID].getLinkToReportCard( + chemblID + ) + }, + }, } </script> diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue index 76540afbfdcdf861358b7d85ac88ede636b24512..1a9b005f2bf46fa58b02542f1b4e58e499403429 100644 --- a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue +++ b/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue @@ -76,10 +76,7 @@ export default { ESProxyService.getGenericData(visualisationPath) .then((response) => { - console.log('HERE: ') - this.dataPerConcentration = response.data.concentrations - console.log('this.dataPerConcentration: ', this.dataPerConcentration) this.dataLoaded = true }) .catch((error) => {