From 41a0d261cac14401997c711e2caf6c0bb330f2dd Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Tue, 26 Apr 2022 13:40:03 +0100
Subject: [PATCH] Cell viability and health data: improve layout
---
.../CellPropertiesPlots.vue | 32 ++++++-----
.../{ => CellPropsRows}/CellCount.vue | 0
.../CellPropsRows/CellLineInfo.vue | 54 +++++++++++++++++++
.../CellPropsRows/CellPropsRows.vue | 46 ++++++++++++++++
.../ImagesInTime/ImagesDialog.vue | 0
.../ImagesInTime/ImagesInTime.vue | 2 +-
.../{ => CellPropsRows}/LineChart.vue | 0
.../CellViabilityAndHealthData.vue | 4 +-
8 files changed, 118 insertions(+), 20 deletions(-)
rename components/report_cards/chemical_probe/CellViabilityAndHealthComponents/{ => CellPropsRows}/CellCount.vue (100%)
create mode 100644 components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
create mode 100644 components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
rename components/report_cards/chemical_probe/CellViabilityAndHealthComponents/{ => CellPropsRows}/ImagesInTime/ImagesDialog.vue (100%)
rename components/report_cards/chemical_probe/CellViabilityAndHealthComponents/{ => CellPropsRows}/ImagesInTime/ImagesInTime.vue (81%)
rename components/report_cards/chemical_probe/CellViabilityAndHealthComponents/{ => CellPropsRows}/LineChart.vue (100%)
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
index bfcc656..404b9cc 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 0000000..7e96023
--- /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 0000000..110b1fb
--- /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 67514b1..a90fc37 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 2c43a3d..ffe21f0 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>
--
GitLab