TargetsSunburst.vue

<template>
  <div class="targets-sunburst">
    <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
    <Sunburst v-else :hierachy-tree="parsedTree" />
  </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,
      rawHierachyTree: {},
    }
  },
  computed: {
    parsedTree() {
      return {
        root: {
          children: this.rawHierachyTree,
        },
      }
    },
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      const visualisationPath =
        '/eubopen/visualisations/target_classifications/protein_classification'

      ESProxyService.getGenericData(visualisationPath)
        .then((response) => {
          this.rawHierachyTree = 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 scoped lang="scss">
.targets-sunburst {
  height: 100%;
  width: 100%;
}
</style>