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="breadcrumbs-area">
          <v-breadcrumbs :items="currentPath">
            <template #item="{ item }">
              <v-breadcrumbs-item
                :href="item.href"
                :disabled="item.disabled"
                v-bind="attrs"
                v-on="on"
              >
                <v-tooltip bottom>
                  <template #activator="{ on, attrs }">
                    <span v-bind="attrs" v-on="on">{{ item.text }}</span>
                  </template>
                  <span
                    >Click to explore all targets of the class
                    {{ item.text }}.</span
                  >
                </v-tooltip>
              </v-breadcrumbs-item>
            </template>
          </v-breadcrumbs>
        </div>
        <div class="sunburst-area">
          <Sunburst
            :hierachy-tree="parsedTree"
            @path-updated="updateBreadcrumbsPath"
          />
        </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 EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import LinksToBrowsers from '~/web-components-submodule/standardisation/LinksToBrowsers.js'

export default {
  components: {
    Sunburst,
  },
  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) => {
          RequestNotifications.dispatchRequestErrorNotification(
            error,
            this.$store.dispatch,
            `Target Classifications: There was an error while loading the target hierarchy!`
          )
        })
    },
    updateBreadcrumbsPath(newPath) {
      const entityID = EntityNames.EubopenTarget.entityID
      console.log('entityID: ', entityID)
      const parsedPath = newPath.map((pathItem) => {
        const b64State = this.getB64StateForTargetClass(
          pathItem.queryString,
          pathItem.name
        )
        console.log('b64State: ', b64State)
        return {
          text: `${pathItem.name} (${pathItem.belongingsCount})`,
          disabled: pathItem.tentative,
          href: LinksToBrowsers.buildURLForEntityBrowser(entityID, b64State),
        }
      })
      this.currentPath = parsedPath
    },
    getB64StateForTargetClass(queryString, itemName) {
      const desiredState = this.getStateToExport(queryString, itemName)
      const strState = JSON.stringify(desiredState)
      const b64State = btoa(strState)
      return b64State
    },
    getStateToExport(queryString, itemName) {
      return {
        dataset: {
          entityID: EntityNames.EubopenTarget.entityID,
          initialQuery: {
            query: {
              bool: {
                must: [
                  {
                    query_string: {
                      query: queryString,
                    },
                  },
                ],
              },
            },
          },
          subsetHumanDescription: `${EntityNames.EubopenTarget.pluralEntityName} that belong to the class ${itemName}`,
        },
      }
    },
  },
}
</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-bottom: 10px;
    }
  }
}
</style>