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

David Mendez
committed
<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'

David Mendez
committed
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,

David Mendez
committed
TargetClassificationBreadcrumbs,
},
data() {
return {
loading: true,
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) {

David Mendez
committed
const accumulatedPath = []
const parsedPath = newPath.map((pathItem) => {

David Mendez
committed
accumulatedPath.push(pathItem.name)
return {
text: `${pathItem.name} (${pathItem.belongingsCount})`,
disabled: pathItem.tentative,

David Mendez
committed
href: TargetsHierarchy.getURLForTargetsBelongingToClass(
pathItem.queryString,

David Mendez
committed
accumulatedPath,
EntityNames.EubopenTarget.entityID

David Mendez
committed
),
}
})
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);

David Mendez
committed
padding-top: 20px;
padding-bottom: 5px;