Cell viability and health data: Finish initial layout based on feedback

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue

@@ -11,7 +11,7 @@
           </template>
         </v-banner>
       </div>
-      <CellPropsRows :key="cellData.cellLine.name" />
+      <CellPropsRows :key="cellData.cellLine.name" :cell-health="cellHealth" />
       <v-divider :key="`${cellData.cellLine.name}-divider`" />
     </template>
   </div>

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

@@ -34,6 +34,12 @@ export default {
     CellCount,
     LineChart,
   },
+  props: {
+    cellHealth: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
   computed: {
     panels() {
       if (this.$vuetify.breakpoint.xs) {

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

@@ -8,11 +8,16 @@
         :options="chartOptions"
       ></apexchart>
     </client-only>
+    <SampleImages v-if="!cellHealth" />
   </div>
 </template>
 
 <script>
+import SampleImages from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue'
 export default {
+  components: {
+    SampleImages,
+  },
   props: {
     cellHealth: {
       type: Boolean,

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

+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <template #activator="{ on, attrs }">
+        <v-btn color="primary" outlined x-small v-bind="attrs" v-on="on">
+          Sample Images
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          Sample Images
+        </v-card-title>
+        <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>
+          </v-row>
+        </v-container>
+        <v-divider></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>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>
+
+<style></style>