Cell health and viability: add placeholder images from actual BIA

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

 <template>
-  <v-progress-circular :value="normalisedCount" :color="color">
-    <div class="text-caption">{{ normalisedCount }}%</div>
-  </v-progress-circular>
+  <v-progress-circular :value="normalisedCount" :color="color" />
 </template>
 
 <script>

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

@@ -45,7 +45,7 @@ export default {
       if (this.$vuetify.breakpoint.xs) {
         return []
       }
-      return [1]
+      return [1, 2]
     },
   },
 }

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

 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog v-model="dialog">
       <template #activator="{ on, attrs }">
         <div>
           <div>
@@ -13,11 +13,42 @@
       </template>
 
       <v-card>
-        <v-card-title class="text-h5 grey lighten-2"> Image </v-card-title>
+        <v-card-title class="text-h5 grey lighten-2">
+          {{ title }}
+        </v-card-title>
         <v-container>
-          <v-img src="https://picsum.photos/400"></v-img>
+          <v-card outlined height="70vh">
+            <v-img
+              height="100%"
+              contain
+              :lazy-src="
+                require('~/assets/img/placeholders/CellHealthAndViabilityPlaceholder.png')
+              "
+              :src="imgUrl"
+            >
+              <template #placeholder>
+                <v-row class="fill-height ma-0" align="center" justify="center">
+                  <v-card>
+                    <v-card-title> Loading Image... </v-card-title>
+                    <v-card-text>
+                      <div class="d-flex justify-center">
+                        <v-progress-circular
+                          indeterminate
+                          color="primary"
+                        ></v-progress-circular>
+                      </div>
+                    </v-card-text>
+                  </v-card>
+                </v-row>
+              </template>
+            </v-img>
+          </v-card>
         </v-container>
-        <v-divider></v-divider>
+        <v-divider />
+        <v-container>
+          <TextToClipboard :text="imgUrl" title="Image URL" />
+        </v-container>
+        <v-divider />
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn color="primary" text @click="dialog = false"> Close </v-btn>
@@ -28,7 +59,11 @@
 </template>
 
 <script>
+import TextToClipboard from '~/web-components-submodule/components/common/TextToClipboard.vue'
 export default {
+  components: {
+    TextToClipboard,
+  },
   props: {
     title: {
       type: String,
@@ -38,6 +73,8 @@ export default {
   data() {
     return {
       dialog: false,
+      imgUrl:
+        'https://www.ebi.ac.uk/biostudies/files/S-BIAD145/processed_images/CQ1-ctf001_HEK_blanc/20211006T142945/B-02_F0001_T0001_Z0001.png',
     }
   },
 }