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

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue

@@ -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 {

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

@@ -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() {

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue

@@ -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() {

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

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

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue

@@ -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>

components/report_cards/chemical_probe/CellViabilityAndHealthData.vue

@@ -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) => {

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -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)

report_cards_structure/CompoundReportCardGenerator.js

@@ -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',