Cell viability and health data: improve layout

components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue

 <template>
   <div>
     <template v-for="cellData in cellViabilityData">
-      <v-row :key="cellData.cellLine.name">
-        <v-col cols="12">
-          <div class="d-flex justify-space-between">
-            <div>{{ cellData.cellLine.name }}</div>
-            <div>NCG</div>
+      <div :key="`${cellData.cellLine.name}-title`">
+        <v-banner single-line>
+          <div class="primary--text font-weight-bold">
+            {{ cellData.cellLine.name }}
           </div>
-        </v-col>
-        <v-col cols="12"> <ImagesInTime /></v-col>
-        <v-col cols="12"> <LineChart :cell-health="cellHealth" /> </v-col>
-        <v-col cols="12"> <CellCount /> </v-col>
-      </v-row>
-      <v-divider :key="`${cellData.cellLine.name}- divider`" />
+          <template #actions>
+            <CellLineInfo />
+          </template>
+        </v-banner>
+      </div>
+      <CellPropsRows :key="cellData.cellLine.name" />
+      <v-divider :key="`${cellData.cellLine.name}-divider`" />
     </template>
   </div>
 </template>
 
 <script>
-import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue'
-import ImagesInTime from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue'
-import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue'
+import CellLineInfo from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue'
+import CellPropsRows from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue'
 export default {
   components: {
-    LineChart,
-    ImagesInTime,
-    CellCount,
+    CellLineInfo,
+    CellPropsRows,
   },
   props: {
     cellHealth: {

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

+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <template #activator="{ on, attrs }">
+        <div>
+          <div>
+            {{ title }}
+          </div>
+          <v-btn color="primary" icon v-bind="attrs" v-on="on">
+            <v-icon> mdi-information-outline </v-icon>
+          </v-btn>
+        </div>
+      </template>
+
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          Cell Line Info
+        </v-card-title>
+        <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-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 {
+  props: {
+    title: {
+      type: String,
+      default: () => '',
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>
+
+<style></style>

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

+<template>
+  <v-expansion-panels v-model="panels" accordion multiple>
+    <v-expansion-panel>
+      <v-expansion-panel-header> Images </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <ImagesInTime />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-header> Properties </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <LineChart :cell-health="cellHealth" />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-header> Cell Count </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <CellCount />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<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.vue'
+import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue'
+
+export default {
+  components: {
+    ImagesInTime,
+    CellCount,
+    LineChart,
+  },
+  computed: {
+    panels() {
+      if (this.$vuetify.breakpoint.xs) {
+        return []
+      }
+      return [1]
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import ImagesDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue'
+import ImagesDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue'
 export default {
   components: {
     ImagesDialog,

components/report_cards/chemical_probe/CellViabilityAndHealthData.vue

@@ -7,10 +7,10 @@
     </v-card-text>
     <v-card-text>
       <v-row dense>
-        <v-col cols="12">
+        <v-col cols="12" sm="6">
           <PlotsForConcentration concentration="1 µM" />
         </v-col>
-        <v-col cols="12">
+        <v-col cols="12" sm="6">
           <PlotsForConcentration concentration="10 µM" />
         </v-col>
       </v-row>