Cell health and viability: use real cell counts!

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue

 <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]
     },
   },
 }

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>

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>

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,