Load data for eubopen targets visualisation and start to add sunburst

components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue

+<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>

components/mainPage/visualisations/VisualisationsCard.vue

+<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>

pages/index.vue

 <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>

web-components-submodule @ f46deede

-Subproject commit 98ca968e340287d92402a1ebd41622d0f666941e
+Subproject commit f46deede39e6323037ef58cf77de174b02e08836