diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
index 72848ed66c7852f88b8ad2d88786a11e1b076b72..09bdb1482967e283eeaa4000ed52851230d505aa 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
@@ -2,22 +2,38 @@
<div>
<div class="d-flex justify-space-between">
<v-btn-toggle v-model="propsType" tile group>
- <v-btn small value="cell_viability"> Viability </v-btn>
- <v-btn small value="cell_health"> Cell Health </v-btn>
+ <v-btn small value="phenotypes"> Phenotypes </v-btn>
+ <v-btn small value="viability"> Viability </v-btn>
</v-btn-toggle>
<PropertiesDetailsDialog :properties-data="propertiesData" />
</div>
- <client-only>
- <apexchart
- type="line"
- height="250"
- :series="series"
- :options="chartOptions"
- ></apexchart>
- </client-only>
- <SampleImages v-if="propsType === 'cell_viability'" :cell-name="cellName" />
+ <div v-if="propsType === 'phenotypes'">
+ <client-only>
+ <apexchart
+ type="line"
+ height="300"
+ :series="phenotypesSeries"
+ :options="lineChartOptions"
+ ></apexchart>
+ </client-only>
+ </div>
+ <div v-else>
+ <client-only>
+ <apexchart
+ type="bar"
+ height="300"
+ :series="viabilitySeries"
+ :options="barChartOptions"
+ ></apexchart>
+ </client-only>
+ </div>
+ <div class="text-caption">
+ The values shown in the plot are the averages among the replicates. Click
+ on 'details' to see the exact values.
+ </div>
+ <SampleImages v-if="propsType === 'phenotypes'" :cell-name="cellName" />
</div>
</template>
@@ -42,8 +58,8 @@ export default {
},
data() {
return {
- propsType: 'cell_viability',
- chartOptions: {
+ propsType: 'phenotypes',
+ lineChartOptions: {
chart: {
type: 'line',
zoom: {
@@ -54,7 +70,7 @@ export default {
},
},
stroke: {
- width: [5, 5, 4],
+ width: 3,
curve: 'straight',
},
labels: ['0h', '12h', '24h', '48h'], // check why this needs to be like that!
@@ -64,19 +80,86 @@ export default {
max: 100,
tickAmount: 2,
labels: {
- formatter: (value) => value.toFixed(0) + '%',
+ formatter: (value) => `${value}%`,
},
},
dataLabels: {
enabled: false,
},
},
+ barChartOptions: {
+ chart: {
+ type: 'bar',
+ stacked: true,
+ stackType: '100%',
+ },
+ plotOptions: {
+ bar: {
+ horizontal: true,
+ },
+ },
+ stroke: {
+ width: 1,
+ colors: ['#fff'],
+ },
+ xaxis: {
+ labels: {
+ formatter: (value) => {
+ return `${value}`
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ yaxis: {
+ labels: {
+ formatter: (value) => {
+ return `${this.timePointsList[parseInt(value) - 1]}`
+ },
+ },
+ },
+ tooltip: {
+ y: {
+ show: true,
+ formatter(value, { w }) {
+ return `${value}%`
+ },
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+ legend: {
+ position: 'bottom',
+ },
+ },
}
},
computed: {
- series() {
+ phenotypesSeries() {
+ const series = []
+ for (const propKey of Object.keys(this.phenotypesActivities)) {
+ const propData = this.propertiesData[propKey]
+
+ const propertyLabel = propData.config.label
+ const values = []
+ for (const timePointKey of Object.keys(propData.byTimePoints)) {
+ const timePointData = propData.byTimePoints[timePointKey]
+ const timePointValue = timePointData.summary.avg
+ values.push(timePointValue)
+ }
+
+ series.push({
+ name: propertyLabel,
+ data: values,
+ })
+ }
+ return series
+ },
+ viabilitySeries() {
const series = []
- for (const propKey of Object.keys(this.shownActivities)) {
+ for (const propKey of Object.keys(this.viabilityActivities)) {
const propData = this.propertiesData[propKey]
const propertyLabel = propData.config.label
@@ -94,12 +177,36 @@ export default {
}
return series
},
- shownActivities() {
+ phenotypesActivities() {
+ const activities = {}
+ const activityIDs = [
+ 'Population Membrane Permeable-Phenotype (%)',
+ 'Population Mitochondria Different-Phenotype (%)',
+ 'Population Tubulin-Different-Phenotype (%)',
+ ]
+
+ for (const propKey of Object.keys(this.propertiesData)) {
+ const propData = this.propertiesData[propKey]
+ if (activityIDs.includes(propKey)) {
+ if (propData.config.show) {
+ activities[propKey] = propData
+ }
+ }
+ }
+
+ return activities
+ },
+ viabilityActivities() {
const activities = {}
+ const activityIDs = [
+ 'Population Fragmented Nuclei (%)',
+ 'Population Healthy Nuclei (%)',
+ 'Population Pyknosed Nuclei (%)',
+ ]
for (const propKey of Object.keys(this.propertiesData)) {
const propData = this.propertiesData[propKey]
- if (propData.config.isCellHealth === this.showingCellHealth) {
+ if (activityIDs.includes(propKey)) {
if (propData.config.show) {
activities[propKey] = propData
}
@@ -109,7 +216,7 @@ export default {
return activities
},
showingCellHealth() {
- return this.propsType === 'cell_health'
+ return this.propsType === 'viability'
},
timePoints() {
const timePoints = []
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue
index 9be4bd007b6b5ee261208360a1111bbbe4bd6072..8b6f5148a3a2e1c80fcbfdc1f8537bf555c133a1 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue
@@ -7,11 +7,21 @@
<v-card>
<v-card-title class="text-h5 grey lighten-2"> Details </v-card-title>
<br />
- <template v-for="(actData, actKey) in propertiesData">
- <v-card-subtitle :key="`${actKey}-subtitle`">{{
- actKey
- }}</v-card-subtitle>
- <v-card-text :key="`${actKey}-text`">
+ <v-card-text>
+ <v-container>
+ <v-select
+ v-model="currentProperty"
+ :items="possibleProperties"
+ label="Select a property"
+ ></v-select>
+ </v-container>
+ </v-card-text>
+
+ <v-card-text>
+ <div v-if="currentProperty == null">
+ Select a property to show the details
+ </div>
+ <div v-else>
<v-simple-table dense>
<thead>
<tr>
@@ -24,7 +34,9 @@
</thead>
<tbody>
<tr
- v-for="rowData in getActivityRows(actData.byTimePoints)"
+ v-for="rowData in getActivityRows(
+ currentPropertyData.byTimePoints
+ )"
:key="rowData.timePoint"
>
<template v-if="rowData.replicateNumber > 0">
@@ -54,9 +66,8 @@
</tr>
</tbody>
</v-simple-table>
- </v-card-text>
- </template>
-
+ </div>
+ </v-card-text>
<v-divider />
<v-card-actions>
<v-spacer></v-spacer>
@@ -79,14 +90,20 @@ export default {
data() {
return {
dialog: false,
+ currentProperty: undefined,
}
},
computed: {
detailsRows() {
const rows = []
-
return rows
},
+ possibleProperties() {
+ return Object.keys(this.propertiesData)
+ },
+ currentPropertyData() {
+ return this.propertiesData[this.currentProperty]
+ },
},
methods: {
getActivityRows(actData) {