diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
index bfcc65637f2a2e1ae05cd0cf06a49470467b270b..404b9cc578247d9c04553fdeef5ddac6f4f11309 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
@@ -1,31 +1,29 @@
<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: {
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue
similarity index 100%
rename from components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue
rename to components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e96023c3470c67d26aa1f0346d43f71b8d55d64
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
@@ -0,0 +1,54 @@
+<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>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
new file mode 100644
index 0000000000000000000000000000000000000000..110b1fb535c5195438a98a61aec496a391a81f39
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
@@ -0,0 +1,46 @@
+<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>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue
similarity index 100%
rename from components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue
rename to components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
similarity index 81%
rename from components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue
rename to components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
index 67514b19bbf191c177b50b07ab29289e509c80f4..a90fc3742a73859d4b7c82101104a984e16e3b48 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue
+++ b/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,
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
similarity index 100%
rename from components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue
rename to components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue
index 2c43a3d3ad4a7a17674bd1c92db8b921a36ea4b6..ffe21f061b3a2c01646a94a77a0a87d57b4f41ad 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue
+++ b/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>