setup map display

src/pages/Library.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="h-100">
+  <div class="h-100 position-relative">
     <!-- BACKGROUND (mode) -->
-    <!-- <component :is="mode" /> -->
+    <component :is="mode" />
 
     <!-- FOREGROUND (texts) -->
     <section v-for="group in groups" :key="group.id" class="split-screen">
@@ -22,9 +22,9 @@ export default {
   name: 'Library',
 
   components: {
-    // CardList,
+    CardList,
-    // CardMap,
+    CardMap,
-    // TreeMap,
+    TreeMap,
     TextCard
   },
 

src/pages/library/TreeMap.vue

@@ -1,10 +1,44 @@
 <template>
-  <component-debug :component="this" />
+  <b-overlay :show="loading" class="h-100 position-absolute">
+    <node-map
+      v-if="!loading"
+      v-bind="mapData"
+      :show-id="true"
+    />
+  </b-overlay>
 </template>
 
 <script>
+import NodeMap from '@/components/NodeMap'
+import { toManyManyData } from '@/helpers/d3Data'
+
+
 export default {
-  name: 'TreeMap'
+  name: 'TreeMap',
+
+  components: {
+    NodeMap
+  },
+
+  props: {
+    id: { type: Number, default: 1 }
+  },
+
+  data () {
+    return {
+      loading: true,
+      depth: 3,
+      mapData: { nodes: null, links: null }
+    }
+  },
+
+  created () {
+    const { id, depth } = this
+    this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
+      this.mapData = toManyManyData(data)
+      this.loading = false
+    })
+  }
 }
 </script>