Cell health and viability data: add explanation sent by Amelie

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue

@@ -16,6 +16,7 @@
         :cell-health="cellHealth"
         :time-points="timePoints"
         :cell-line-data="dataPerCell[cellLineID]"
+        :cell-name="cellData.name"
       />
       <v-divider :key="`${cellData.name}-divider`" />
     </template>

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

@@ -16,6 +16,7 @@
           :cell-health="cellHealth"
           :time-points="timePoints"
           :cell-properties="cellLineData.properties"
+          :cell-name="cellName"
         />
       </v-expansion-panel-content>
     </v-expansion-panel>
@@ -58,6 +59,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    cellName: {
+      type: String,
+      default: () => '',
+    },
   },
   computed: {
     panels() {

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

@@ -8,7 +8,7 @@
         :options="chartOptions"
       ></apexchart>
     </client-only>
-    <SampleImages v-if="!cellHealth" />
+    <SampleImages v-if="!cellHealth" :cell-name="cellName" />
   </div>
 </template>
 
@@ -31,6 +31,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    cellName: {
+      type: String,
+      default: () => '',
+    },
   },
   data() {
     return {

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

 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog
+      v-model="dialog"
+      fullscreen
+      hide-overlay
+      transition="dialog-bottom-transition"
+    >
       <template #activator="{ on, attrs }">
         <v-btn color="primary" outlined x-small v-bind="attrs" v-on="on">
           Training Images
@@ -8,20 +13,34 @@
       </template>
 
       <v-card>
-        <v-card-title class="text-h5 grey lighten-2">
-          Training Images
-        </v-card-title>
+        <v-toolbar dark color="primary">
+          <v-btn icon dark @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+          <v-toolbar-title>Training Images for {{ cellName }}</v-toolbar-title>
+        </v-toolbar>
+
         <v-container>
           <v-row>
-            <v-col cols="12" md="4">
-              <v-img src="https://picsum.photos/400"></v-img>
-            </v-col>
-            <v-col cols="12" md="4">
-              <v-img src="https://picsum.photos/400"></v-img>
-            </v-col>
-            <v-col cols="12" md="4">
-              <v-img src="https://picsum.photos/400"></v-img>
-            </v-col>
+            <template v-for="imgName in imgNames">
+              <v-col :key="imgName" cols="12" sm="6">
+                <div
+                  class="img-and-divider d-flex flex-column justify-space-between"
+                >
+                  <div />
+                  <div class="img-container">
+                    <v-img
+                      width="100%"
+                      :src="
+                        require(`@/static/img/multiplexData/trainingImages/${imgName}.jpg`)
+                      "
+                    ></v-img>
+                  </div>
+
+                  <v-divider />
+                </div>
+              </v-col>
+            </template>
           </v-row>
         </v-container>
         <v-divider></v-divider>
@@ -36,12 +55,35 @@
 
 <script>
 export default {
+  props: {
+    cellName: {
+      type: String,
+      default: () => '',
+    },
+  },
   data() {
     return {
       dialog: false,
     }
   },
+  computed: {
+    imgNames() {
+      const imgNames = []
+      for (let i = 1; i < 7; i++) {
+        const currentName = `${this.cellName}-${i}`
+        imgNames.push(currentName)
+      }
+      return imgNames
+    },
+  },
 }
 </script>
 
-<style></style>
+<style scoped lang="scss">
+.img-and-divider {
+  height: 100%;
+  .img-container {
+    padding: 5px;
+  }
+}
+</style>

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue

 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog
+      v-model="dialog"
+      fullscreen
+      hide-overlay
+      transition="dialog-bottom-transition"
+    >
       <template #activator="{ on, attrs }">
         <v-btn color="primary" v-bind="attrs" v-on="on">
           {{ activatorBtnText }} <v-icon right> mdi-help-circle </v-icon>
@@ -8,19 +13,78 @@
       </template>
 
       <v-card>
-        <v-card-title class="text-h5 grey lighten-2">
-          About the data
-        </v-card-title>
+        <v-toolbar dark color="primary">
+          <v-btn icon dark @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+          <v-toolbar-title>About the data</v-toolbar-title>
+        </v-toolbar>
 
-        <v-card-text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </v-card-text>
+        <v-container>
+          <v-row>
+            <v-col cols="12" md="6">
+              <div class="d-flex align-center figure-container">
+                <v-container>
+                  <v-img
+                    width="100%"
+                    :src="require(`@/static/img/multiplexData/treeFigure.jpg`)"
+                  ></v-img>
+                </v-container>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="d-flex align-center text-container">
+                <div>
+                  <p class="text-justify">
+                    Data was generated using a Multiplex live-cell assay
+                    <b>[1]</b> in three different cell lines (osteosarcoma cells
+                    (U2OS), human embryonic kidney cells (HEK293T) and
+                    non-transformed human fibroblasts (MRC-9)) at two
+                    concentrations (1 µM and 10 µM) after 12h, 24h and 48h.
+                    Cells per well (384 well plate) are counted and normalised
+                    against DMSO 0.1 %.
+                  </p>
+                  <p class="text-justify">
+                    Afterwards, cells were gated based on the shown tree
+                    principle. Cell Health properties (Fragmented Nuclei,
+                    Healthy Nuclei, Pyknosed Nuclei) are calculated based on
+                    normal cell count. Viability properties (Membrane
+                    permeabilized, Mitochondrial mass, Tubulin effect) are
+                    calculated from Healthy Nuclei Count.
+                  </p>
+                  <p class="text-justify">
+                    Data will give you an estimate impression on cellular health
+                    after compound treatment. Normalised cell count should
+                    always be taken into account when interpreting the data.
+                  </p>
+                  <v-divider />
+                  <br />
+                  <div class="text-subtitle-2">References</div>
+                  <br />
+
+                  <ol>
+                    <li>
+                      Tjaden A, Chaikuad A, Kowarz E, Marschalek R, Knapp S,
+                      Schröder M, Müller S. Image-Based Annotation of
+                      Chemogenomic Libraries for Phenotypic Screening.
+                      Molecules. 2022 Feb 21;27(4):1439. doi:<a
+                        href="https://doi.org/10.3390/molecules27041439"
+                        >10.3390/molecules27041439</a
+                      >. PMID:
+                      <a href="https://pubmed.ncbi.nlm.nih.gov/35209227/"
+                        >35209227</a
+                      >; PMCID:
+                      <a
+                        href="http://www.ncbi.nlm.nih.gov/pmc/articles/pmc8878468/"
+                        >PMC8878468</a
+                      >.
+                    </li>
+                  </ol>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
 
         <v-divider></v-divider>
 
@@ -43,11 +107,18 @@ export default {
   computed: {
     activatorBtnText() {
       return this.$vuetify.breakpoint.xs
-        ? 'Help'
+        ? 'About'
         : 'How to interpret this data?'
     },
   },
 }
 </script>
 
-<style></style>
+<style scoped lang="scss">
+.figure-container {
+  height: 100%;
+}
+.text-container {
+  height: 100%;
+}
+</style>