TargetsSunburst.vue

<template>
  <div class="targets-sunburst">
    <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
    <template v-else>
      <v-card tile flat class="sunburst-card">
        <v-card-subtitle> Targets in EUbOPEN </v-card-subtitle>
        <v-divider />
        <v-breadcrumbs :items="currentPath"></v-breadcrumbs>
        <Sunburst :hierachy-tree="parsedTree" />
        <v-card-text class="text-caption text-justify">
          Click on a section to expand it. Click on the links on top to see the
          targets of the corresponding class.
        </v-card-text>
      </v-card>
    </template>
  </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: {},
      currentPath: [
        {
          text: 'Enzyme',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Kinase',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Protein Kinase',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }
  },
  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%;
  .sunburst-card {
    height: 100%;
  }
}
</style>