diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
index ea939a0d3c75e009b22610b513d08e2cae97949e..c311c830001ff3a38aa4a7809524f91110a06638 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
@@ -1,19 +1,15 @@
<template>
<div class="d-flex justify-space-between">
<SingleCellCountDialog
- :title="timePoints[0]"
- :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
- :total-cell-count="cellCounts[0]"
- />
- <SingleCellCountDialog
- :title="timePoints[1]"
- :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
- :total-cell-count="cellCounts[1]"
- />
- <SingleCellCountDialog
- :title="timePoints[2]"
- :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
- :total-cell-count="cellCounts[2]"
+ v-for="timePointData in timePoints"
+ :key="timePointData.key"
+ :title="timePointData.label"
+ :population-cell-count="
+ populationCellCountActivity.byTimePoints[timePointData.key]
+ "
+ :control-cell-count="
+ controlCellCountActivity.byTimePoints[timePointData.key]
+ "
/>
</div>
</template>
@@ -25,17 +21,35 @@ export default {
SingleCellCountDialog,
},
props: {
- timePoints: {
- type: Array,
- default: () => [],
+ propertiesData: {
+ type: Object,
+ default: () => {},
+ },
+ },
+ computed: {
+ timePoints() {
+ const timePoints = []
+ const cellCountProperty = this.propertiesData['Total Cell Count']
+ .byTimePoints
+ for (const key of Object.keys(cellCountProperty)) {
+ 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
},
- cellCounts: {
- type: Array,
- default: () => [],
+ populationCellCountActivity() {
+ const populationCountKey = 'Total Cell Count'
+ return this.propertiesData[populationCountKey]
},
- controlDMSOCellCount: {
- type: Number,
- default: () => 1,
+ controlCellCountActivity() {
+ const controlCountKey = 'Control DMSO Total Cells'
+ return this.propertiesData[controlCountKey]
},
},
}
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
index 0769e126b731516457403065536c8f3d75a5e4bb..4a02d9519b3a33a4b9114f24aadff57e03960b08 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
@@ -2,16 +2,15 @@
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template #activator="{ on, attrs }">
- <div>
+ <div class="d-flex flex-column justify-center align-center">
<div class="text-center">
{{ title }}
</div>
- <v-btn icon v-bind="attrs" v-on="on">
- <SingleCellCount
- :normalised-count="normalisedCount"
- :color="getColor(normalisedCount)"
- />
- </v-btn>
+ <SingleCellCount
+ :normalised-count="normalisedCount"
+ :color="getColor(normalisedCount)"
+ />
+ <v-btn v-bind="attrs" text tile x-small v-on="on"> Details </v-btn>
</div>
</template>
@@ -26,6 +25,47 @@
</v-card-text>
<v-divider />
<v-card-text>
+ <v-simple-table dense>
+ <thead>
+ <tr>
+ <th>Assay</th>
+ <th>Replicate</th>
+ <th>Population Cell Count</th>
+ <th>Control Cell Control</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr
+ v-for="(rowData, assayChemblID) in replicateDetails"
+ :key="assayChemblID"
+ >
+ <td>
+ <a :href="getLinkToAssay(chemblID)">{{
+ rowData.assayChemblID
+ }}</a>
+ </td>
+ <td>{{ rowData.replicateNumber }}</td>
+ <td>{{ rowData.populationCount }}</td>
+ <td>{{ rowData.controlCount }}</td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><b>Avg:</b></td>
+ <td>{{ populationCellCount.summary.avg }}</td>
+ <td>{{ controlCellCount.summary.avg }}</td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><b>SD:</b></td>
+ <td>{{ populationCellCount.summary.std }}</td>
+ <td>{{ controlCellCount.summary.std }}</td>
+ </tr>
+ </tbody>
+ </v-simple-table>
+
+ {{ details }}
+
<v-list dense>
<v-list-item>
<v-list-item-content>
@@ -94,6 +134,9 @@
<script>
import SingleCellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCount.vue'
+import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+
export default {
components: {
SingleCellCount,
@@ -103,13 +146,13 @@ export default {
type: String,
default: () => '',
},
- controlDMSOTotalCellCount: {
- type: Number,
- default: () => 1,
+ populationCellCount: {
+ type: Object,
+ default: () => {},
},
- totalCellCount: {
- type: Number,
- default: () => 1,
+ controlCellCount: {
+ type: Object,
+ default: () => {},
},
},
data() {
@@ -123,6 +166,30 @@ export default {
(this.totalCellCount / this.controlDMSOTotalCellCount) * 100
)
},
+ replicateDetails() {
+ const dataByAssay = {}
+
+ for (const assayChemblID in this.populationCellCount.byReplicates) {
+ const replicateData = this.populationCellCount.byReplicates[
+ assayChemblID
+ ]
+ const controlData = this.controlCellCount.byReplicates[assayChemblID]
+ dataByAssay[assayChemblID] = {
+ assayChemblID,
+ replicateNumber: parseInt(replicateData.replicate_number),
+ populationCount: replicateData.standard_value,
+ controlCount: controlData.standard_value,
+ }
+ }
+
+ return dataByAssay
+ },
+ controlDMSOTotalCellCount() {
+ return this.controlCellCount.summary.avg
+ },
+ totalCellCount() {
+ return this.populationCellCount.summary.avg
+ },
},
methods: {
getColor(normalisedCount) {
@@ -134,6 +201,11 @@ export default {
}
return 'green'
},
+ getLinkToAssay(chemblID) {
+ return LinksToEntities[EntityNames.Assay.entityID].getLinkToReportCard(
+ chemblID
+ )
+ },
},
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
index 9104db4c8b6d2873bd95d093a9af3d49e8699c4c..1bb4da43ef8a650cc5c6ef1888d660b400da04b4 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
@@ -4,7 +4,6 @@
<v-expansion-panel-header> Images </v-expansion-panel-header>
<v-expansion-panel-content>
<ImagesInTime
- :time-points="timePoints"
:image-u-r-l-s-data="cellLineData.imageURLS"
:concentration="concentration"
:cell-name="cellName"
@@ -28,12 +27,7 @@
Normalised Cell Count
</v-expansion-panel-header>
<v-expansion-panel-content>
- counts!
- <!-- <CellCount
- :time-points="timePoints"
- :cell-counts="cellLineData.cellCounts"
- :control-d-m-s-o-cell-count="cellLineData.controlDMSOCellCount"
- /> -->
+ <CellCount :properties-data="cellLineData.properties" />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
@@ -41,13 +35,13 @@
<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 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,
+ CellCount,
// LineChart,
},
props: {
@@ -68,13 +62,17 @@ export default {
default: () => '',
},
},
- computed: {
- panels() {
- if (this.$vuetify.breakpoint.xs) {
- return []
- }
- return [1, 2]
- },
+ data() {
+ return {
+ panels: [],
+ }
+ },
+ mounted() {
+ if (this.$vuetify.breakpoint.xs) {
+ this.panels = []
+ } else {
+ this.panels = [1, 2]
+ }
},
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
index 940a48f1bc006b48985d6650e2585745f96f376e..64121a2d0b6bb179eada691ba49dd0a895581712 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
@@ -19,8 +19,8 @@ export default {
},
props: {
imageURLSData: {
- type: Array,
- default: () => [],
+ type: Object,
+ default: () => {},
},
cellName: {
type: String,