Cell health and viability: add data details dialog

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

 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog v-model="dialog">
       <template #activator="{ on, attrs }">
         <div class="d-flex flex-column justify-center align-center">
           <div class="text-center">
@@ -31,7 +31,7 @@
                 <th>Assay</th>
                 <th>Replicate</th>
                 <th>Population Cell Count</th>
-                <th>Control Cell Control</th>
+                <th>Control Cell Count</th>
               </tr>
             </thead>
 

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

 <template>
   <div>
-    <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-toggle>
-    timePointsList: {{ timePointsList }}
+    <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-toggle>
+
+      <PropertiesDetailsDialog :properties-data="propertiesData" />
+    </div>
+
     <client-only>
       <apexchart
         type="line"
@@ -19,9 +23,12 @@
 
 <script>
 import SampleImages from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue'
+import PropertiesDetailsDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue'
+
 export default {
   components: {
     SampleImages,
+    PropertiesDetailsDialog,
   },
   props: {
     cellName: {
@@ -50,7 +57,7 @@ export default {
           width: [5, 5, 4],
           curve: 'straight',
         },
-        labels: this.timePointsList,
+        labels: ['0h', '12h', '24h', '48h'], // check why this needs to be like that!
         xaxis: {},
         yaxis: {
           min: 0,
@@ -68,7 +75,6 @@ export default {
   },
   computed: {
     series() {
-      console.log('HERE: ')
       const series = []
       for (const propKey of Object.keys(this.shownActivities)) {
         const propData = this.propertiesData[propKey]

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/PropertiesDetails/PropertiesDetailsDialog.vue

+<template>
+  <v-dialog v-model="dialog">
+    <template #activator="{ on, attrs }">
+      <v-btn v-bind="attrs" outlined x-small v-on="on"> Details </v-btn>
+    </template>
+
+    <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-simple-table dense>
+            <thead>
+              <tr>
+                <th>Time Point</th>
+                <th>Assay</th>
+                <th>Replicate Number</th>
+                <th>Standard Value</th>
+                <th>Standard Units</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="rowData in getActivityRows(actData.byTimePoints)"
+                :key="rowData.timePoint"
+              >
+                <td>{{ rowData.timePoint }}</td>
+                <td>
+                  <a :href="getLinkToAssay(chemblID)">{{
+                    rowData.assayChemblID
+                  }}</a>
+                </td>
+
+                <td>{{ rowData.replicateNumber }}</td>
+                <td>{{ rowData.standardValue }}</td>
+                <td>{{ rowData.standardUnits }}</td>
+              </tr>
+            </tbody>
+          </v-simple-table>
+        </v-card-text>
+      </template>
+
+      <v-divider />
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="dialog = false"> Close </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+
+export default {
+  props: {
+    propertiesData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+  computed: {
+    detailsRows() {
+      const rows = []
+
+      return rows
+    },
+  },
+  methods: {
+    getActivityRows(actData) {
+      const rows = []
+
+      for (const timePoint of Object.keys(actData)) {
+        const timePointData = actData[timePoint]
+
+        for (const assayChemblID of Object.keys(timePointData.byReplicates)) {
+          const replicateData = timePointData.byReplicates[assayChemblID]
+          rows.push({
+            timePoint,
+            assayChemblID,
+            replicateNumber: parseInt(replicateData.replicate_number),
+            standardValue: replicateData.standard_value,
+            standardUnits: replicateData.standard_units,
+          })
+        }
+      }
+
+      return rows
+    },
+    getLinkToAssay(chemblID) {
+      return LinksToEntities[EntityNames.Assay.entityID].getLinkToReportCard(
+        chemblID
+      )
+    },
+  },
+}
+</script>
+<style></style>