From 11b58e0e8824973d517aa2726401a52d84e55793 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Wed, 25 Aug 2021 12:10:40 +0100
Subject: [PATCH] Load data for eubopen targets visualisation and start to add
sunburst
---
.../TargetsTree/TargetsSunburst.vue | 48 ++++++++++++++++
.../visualisations/VisualisationsCard.vue | 56 +++++++++++++++++++
pages/index.vue | 17 ++++--
web-components-submodule | 2 +-
4 files changed, 116 insertions(+), 7 deletions(-)
create mode 100644 components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue
create mode 100644 components/mainPage/visualisations/VisualisationsCard.vue
diff --git a/components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue b/components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue
new file mode 100644
index 0000000..7f667db
--- /dev/null
+++ b/components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue
@@ -0,0 +1,48 @@
+<template>
+ <div>
+ <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
+ <Sunburst v-else />
+ </div>
+</template>
+
+<script>
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import Sunburst from '~/web-components-submodule/components/common/Visualisations/Sunburst/Sunburst.vue'
+
+export default {
+ components: {
+ Sunburst,
+ },
+ data() {
+ return {
+ loading: true,
+ hierachyTree: {},
+ }
+ },
+ mounted() {
+ this.loadData()
+ },
+ methods: {
+ loadData() {
+ const visualisationPath =
+ '/eubopen/visualisations/target_classifications/protein_classification'
+
+ ESProxyService.getGenericData(visualisationPath)
+ .then((response) => {
+ this.hierachyTree = response.data
+ this.loading = false
+ })
+ .catch((error) => {
+ RequestNotifications.dispatchRequestErrorNotification(
+ error,
+ this.$store.dispatch,
+ `Target Classifications: There was an error while loading the target hierarchy!`
+ )
+ })
+ },
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/mainPage/visualisations/VisualisationsCard.vue b/components/mainPage/visualisations/VisualisationsCard.vue
new file mode 100644
index 0000000..be8cd97
--- /dev/null
+++ b/components/mainPage/visualisations/VisualisationsCard.vue
@@ -0,0 +1,56 @@
+<template>
+ <v-card tile flat class="visualisations-card" :class="heightClasses">
+ <v-card-text>
+ <TargetsSunburst />
+ </v-card-text>
+ </v-card>
+</template>
+
+<script>
+import TargetsSunburst from '~/components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue'
+
+export default {
+ components: {
+ TargetsSunburst,
+ },
+ computed: {
+ heightClasses() {
+ switch (this.$vuetify.breakpoint.name) {
+ case 'xs':
+ return {
+ 'xs-screen-height': true,
+ }
+ case 'sm':
+ return {
+ 'sm-screen-height': true,
+ }
+ case 'md':
+ return {
+ 'md-screen-height': true,
+ }
+ default:
+ return {
+ 'lg-screen-height': true,
+ }
+ }
+ },
+ },
+}
+</script>
+
+<style scoped lang="scss">
+.visualisations-card {
+ &.xs-screen-height,
+ &.sm-screen-height {
+ height: 60vh;
+ min-height: 350px;
+ }
+ &.md-screen-height {
+ height: 50vmin;
+ }
+ &.lg-screen-height {
+ height: 50vh;
+ max-height: 850px;
+ }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index cb56166..640efc7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
<template>
- <v-row justify="center" align="center">
+ <v-row justify="center" align="center" class="main-row">
<v-col cols="12">
<div class="d-flex justify-center">
<div class="text-h4 font-weight-light text-center">
@@ -31,15 +31,17 @@
</div>
</v-col>
<v-col cols="12" md="6">
- <v-img
- :src="require('~/static/img/placeholders/visualisationPlaceholder.png')"
- ></v-img>
+ <VisualisationsCard />
</v-col>
</v-row>
</template>
<script>
+import VisualisationsCard from '~/components/mainPage/visualisations/VisualisationsCard.vue'
export default {
+ components: {
+ VisualisationsCard,
+ },
layout: 'default',
computed: {
esProxyBaseUrl() {
@@ -49,7 +51,10 @@ export default {
}
</script>
<style scoped lang="scss">
-.buttons-container {
- padding: 5px;
+.main-row {
+ margin-top: 30px;
+ .buttons-container {
+ padding: 5px;
+ }
}
</style>
diff --git a/web-components-submodule b/web-components-submodule
index 98ca968..f46deed 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 98ca968e340287d92402a1ebd41622d0f666941e
+Subproject commit f46deede39e6323037ef58cf77de174b02e08836
--
GitLab