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 />
        <div class="sunburst-area">
          <Sunburst
            :hierachy-tree="parsedTree"
            @path-updated="updateBreadcrumbsPath"
          />
        </div>
        <div class="breadcrumbs-area">
          <TargetClassificationBreadcrumbs :path="currentPath" />
        </div>
        <v-divider />
        <v-card-text class="text-caption text-justify">
          Click on a section to expand it. Click on the links on top to explore
          the targets that belong to 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'
import TargetClassificationBreadcrumbs from '~/web-components-submodule/components/common/Visualisations/TargetsHierarchy/TargetClassificationBreadcrumbs.vue'
import TargetsHierarchy from '~/web-components-submodule/utils/TargetsHierarchy.js'
import ErrorTracking from '~/web-components-submodule/tracking/ErrorTracking.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'

export default {
  components: {
    Sunburst,
    TargetClassificationBreadcrumbs,
  },
  data() {
    return {
      loading: true,
      rawHierachyTree: {},
      currentPath: [],
    }
  },
  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) => {
          ErrorTracking.trackError(error, this)

          RequestNotifications.dispatchRequestErrorNotification(
            error,
            this.$store.dispatch,
            `Target Classifications: There was an error while loading the target hierarchy!`
          )
        })
    },
    updateBreadcrumbsPath(newPath) {
      const accumulatedPath = []
      const parsedPath = newPath.map((pathItem) => {
        accumulatedPath.push(pathItem.name)
        return {
          text: `${pathItem.name} (${pathItem.belongingsCount})`,
          disabled: pathItem.tentative,
          href: TargetsHierarchy.getURLForTargetsBelongingToClass(
            pathItem.queryString,
            pathItem.name,
            accumulatedPath,
            EntityNames.EubopenTarget.entityID
          ),
        }
      })
      this.currentPath = parsedPath
    },
  },
}
</script>

<style scoped lang="scss">
.targets-sunburst {
  height: 100%;
  width: 100%;
  .sunburst-card {
    height: 100%;
    .breadcrumbs-area {
      min-height: 58px;
    }
    .sunburst-area {
      height: calc(100% - 220px);
      padding-top: 20px;
      padding-bottom: 5px;
    }
  }
}
</style>