Sunburst: implement handling of current path for breadcrumbs

components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue

@@ -5,8 +5,12 @@
       <v-card tile flat class="sunburst-card">
         <v-card-subtitle> Targets in EUbOPEN </v-card-subtitle>
         <v-divider />
+        <Sunburst
+          :hierachy-tree="parsedTree"
+          @path-updated="updateBreadcrumbsPath"
+        />
         <v-breadcrumbs :items="currentPath"></v-breadcrumbs>
-        <Sunburst :hierachy-tree="parsedTree" />
+        <v-divider />
         <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.
@@ -29,23 +33,7 @@ export default {
     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',
-        },
-      ],
+      currentPath: [],
     }
   },
   computed: {
@@ -78,6 +66,16 @@ export default {
           )
         })
     },
+    updateBreadcrumbsPath(newPath) {
+      const parsedPath = newPath.map((pathItem) => {
+        return {
+          text: `${pathItem.name} (${pathItem.belongingsCount})`,
+          disabled: pathItem.tentative,
+          href: '/',
+        }
+      })
+      this.currentPath = parsedPath
+    },
   },
 }
 </script>