Skip to content
Snippets Groups Projects
Commit dc837fa2 authored by David Mendez's avatar David Mendez
Browse files

Cell health and viability: start to implement with real data!

parent 2a8d1c92
No related branches found
No related tags found
1 merge request!80Add multiplex data visualisation
Showing with 105 additions and 58 deletions
......@@ -14,7 +14,7 @@
<CellPropsRows
:key="`${cellLineID}-props`"
:cell-health="cellHealth"
:time-points="timePoints"
:concentration="concentration"
:cell-line-data="dataPerCell[cellLineID]"
:cell-name="cellData.name"
/>
......@@ -44,6 +44,10 @@ export default {
type: Array,
default: () => [],
},
concentration: {
type: String,
default: () => '',
},
},
data() {
return {
......
......@@ -5,19 +5,22 @@
<v-expansion-panel-content>
<ImagesInTime
:time-points="timePoints"
:image-u-r-l-s="cellLineData.imageURLS"
:image-u-r-l-s-data="cellLineData.imageURLS"
:concentration="concentration"
:cell-name="cellName"
/>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header> Properties </v-expansion-panel-header>
<v-expansion-panel-content>
<LineChart
lines
<!-- <LineChart
:cell-health="cellHealth"
:time-points="timePoints"
:cell-properties="cellLineData.properties"
:cell-name="cellName"
/>
/> -->
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
......@@ -25,11 +28,12 @@
Normalised Cell Count
</v-expansion-panel-header>
<v-expansion-panel-content>
<CellCount
counts!
<!-- <CellCount
:time-points="timePoints"
:cell-counts="cellLineData.cellCounts"
:control-d-m-s-o-cell-count="cellLineData.controlDMSOCellCount"
/>
/> -->
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
......@@ -37,24 +41,20 @@
<script>
import ImagesInTime from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue'
import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue'
import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue'
// import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue'
// import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue'
export default {
components: {
ImagesInTime,
CellCount,
LineChart,
// CellCount,
// LineChart,
},
props: {
cellHealth: {
type: Boolean,
default: () => false,
},
timePoints: {
type: Array,
default: () => [],
},
cellLineData: {
type: Object,
default: () => {},
......@@ -63,6 +63,10 @@ export default {
type: String,
default: () => '',
},
concentration: {
type: String,
default: () => '',
},
},
computed: {
panels() {
......
......@@ -18,7 +18,8 @@
</v-card-title>
<v-container>
<v-card outlined height="60vh">
<v-img
imgData: {{ imgData }}
<!-- <v-img
height="100%"
contain
:lazy-src="
......@@ -41,7 +42,7 @@
</v-card>
</v-row>
</template>
</v-img>
</v-img> -->
</v-card>
</v-container>
<v-divider />
......@@ -84,9 +85,9 @@ export default {
type: String,
default: () => '',
},
imgUrl: {
type: String,
default: () => '',
imgData: {
type: Object,
default: () => {},
},
},
data() {
......
<template>
<div>
<div class="d-flex justify-space-between">
<ImagesDialog :title="timePoints[0]" :img-url="imageURLS[0]" />
<ImagesDialog :title="timePoints[1]" :img-url="imageURLS[1]" />
<ImagesDialog :title="timePoints[2]" :img-url="imageURLS[2]" />
<ImagesDialog
v-for="timePointData in timePoints"
:key="timePointData.key"
:title="timePointData.label"
:img-data="imageURLSData[timePointData.key]"
/>
</div>
</div>
</template>
......@@ -15,13 +18,33 @@ export default {
ImagesDialog,
},
props: {
timePoints: {
imageURLSData: {
type: Array,
default: () => [],
},
imageURLS: {
type: Array,
default: () => [],
cellName: {
type: String,
default: () => '',
},
concentration: {
type: String,
default: () => '',
},
},
computed: {
timePoints() {
const timePoints = []
for (const key of Object.keys(this.imageURLSData)) {
const keyParts = key.split(' ')
const number = parseInt(keyParts[0])
const units = keyParts[1] === 'hours' ? 'h' : keyParts[1]
timePoints.push({
label: `${number}${units}`,
key,
})
}
return timePoints
},
},
}
......
......@@ -9,18 +9,20 @@
<v-tab-item>
<div class="tab-item-content">
<CellPropertiesPlots
:data-per-cell="data.cellHealthProperties.dataPerCell"
:time-points="timePoints"
/></div
></v-tab-item>
:data-per-cell="data.dataPerCell"
:concentration="concentration"
/>
</div>
</v-tab-item>
<v-tab-item>
<div class="tab-item-content">
<CellPropertiesPlots
:data-per-cell="data.viabilityProperties.dataPerCell"
:data-per-cell="data.dataPerCell"
:concentration="concentration"
cell-health
:time-points="timePoints"
/></div
></v-tab-item>
/>
</div>
</v-tab-item>
</v-tabs>
</v-card-text>
</v-card>
......@@ -42,14 +44,6 @@ export default {
type: Object,
default: () => {},
},
dataPerCell: {
type: Object,
default: () => {},
},
timePoints: {
type: Array,
default: () => [],
},
},
}
</script>
......
......@@ -35,7 +35,6 @@
<PlotsForConcentration
:concentration="concentration"
:data="data"
:time-points="timePoints"
/>
</v-col>
</v-row>
......@@ -66,7 +65,6 @@ export default {
return {
dataLoaded: false,
dataPerConcentration: {},
timePoints: [],
}
},
mounted() {
......@@ -78,8 +76,10 @@ export default {
ESProxyService.getGenericData(visualisationPath)
.then((response) => {
this.timePoints = response.data.timePoints
console.log('HERE: ')
this.dataPerConcentration = response.data.concentrations
console.log('this.dataPerConcentration: ', this.dataPerConcentration)
this.dataLoaded = true
})
.catch((error) => {
......
......@@ -68,18 +68,38 @@ export default {
false
)
const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
this.itemID,
prefName,
isChemicalProbe,
isNegativeControl
)
this.$store.dispatch(
`${this.storeModuleName}/setReportCardStructure`,
reportCardStructure
)
const cellHeatlhAndViabilityDataPath = `/eubopen/visualisations/compound/cell_viability_and_health_data/${this.itemID}`
ESProxyService.getGenericData(cellHeatlhAndViabilityDataPath)
.then((response) => {
const numDataPoints = response.data.num_datapoints
const showCellHeatlhAndViabilityData = numDataPoints > 0
const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
this.itemID,
prefName,
isChemicalProbe,
isNegativeControl,
showCellHeatlhAndViabilityData
)
this.$store.dispatch(
`${this.storeModuleName}/setReportCardStructure`,
reportCardStructure
)
this.$store.dispatch(
`${this.storeModuleName}/setStructureReady`,
true
)
})
.catch((error) => {
ErrorTracking.trackError(error, this)
this.$store.dispatch(`${this.storeModuleName}/setStructureReady`, true)
RequestNotifications.dispatchRequestErrorNotification(
error,
this.$store.dispatch,
`Target Classifications: There was an error while loading the Cell Viability and Health Data!`
)
})
})
.catch((error) => {
ErrorTracking.trackError(error, this)
......
......@@ -13,7 +13,8 @@ const methods = {
itemID,
prefName,
isChemicalProbe,
isNegativeControl
isNegativeControl,
showCellHeatlhAndViabilityData
) {
const basePageStructure = [
{
......@@ -51,7 +52,7 @@ const methods = {
id: 'CellViabilityAndHealthData',
title: 'Cell Viability And Health Data',
component: CellViabilityAndHealthData,
include: true,
include: showCellHeatlhAndViabilityData,
},
{
id: 'CalculatedProperties',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment