update Map view to query text tree on the fly & add show id option

src/pages/Map.vue

@@ -1,16 +1,50 @@
 <template>
-  <div id="map">
-    <node-map class="node-map" v-if="data" v-bind="one" />
-    <node-map
-      class="node-map" v-if="data2" v-bind="two"
-      id="ùmqsldùml"
-    />
+  <div class="d-flex flex-column h-100 px-4 py-3">
+    <div id="maps">
+      <div>
+        <h4>Carte avec duplication</h4>
+        <node-map
+          v-if="data"
+          v-bind="mapSingle"
+          :key="data.id + '-single'"
+          class="node-map"
+          :show-id="showId"
+        />
+      </div>
+      <div>
+        <h4>Carte avec liens multiples</h4>
+        <node-map
+          v-if="data"
+          v-bind="mapMany"
+          :key="data.id + '-many'"
+          class="node-map"
+          :show-id="showId"
+          id="map-2"
+        />
+      </div>
+    </div>
+
+    <b-form class="mt-4">
+      <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
+        <b-form-select
+          v-model="textId"
+          :options="textsDepartOptions"
+        />
+      </b-form-group>
+
+      <b-form-checkbox v-model="showId" name="check-button" switch>
+        Afficher les numéros
+      </b-form-checkbox>
+    </b-form>
   </div>
 </template>
 
 <script>
-import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'
+import { mapGetters } from 'vuex'
+
 import NodeMap from '@/components/NodeMap'
+import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'
+
 
 export default {
   name: 'Home',
@@ -21,35 +55,54 @@ export default {
 
   data () {
     return {
-      id: 39,
+      textId: undefined,
+      showId: true,
       data: null,
-      data2: null,
-      one: { nodes: null, links: null },
-      two: { nodes: null, links: null }
+      mapSingle: { nodes: null, links: null },
+      mapMany: { nodes: null, links: null }
+    }
+  },
+
+  computed: {
+    ...mapGetters(['textsDepartOptions'])
+  },
+
+  watch: {
+    textId (id) {
+      this.$store.dispatch('GET_TREE', id).then((data) => {
+        this.mapSingle = toSingleManyData(data)
+        this.mapMany = toManyManyData(data)
+        this.data = data
+      })
     }
   },
 
   created () {
-    this.$store.dispatch('GET_TREE', this.id).then((data) => {
-      this.data = data
-      this.one = toSingleManyData(data)
-    })
-    this.$store.dispatch('GET_TREE', this.id).then((data) => {
-      this.data2 = data
-      this.two = toManyManyData(data)
+    this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
+      this.textId = textsDepart[0].id
     })
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#map {
-  height: 100%;
+#maps {
   width: 100%;
+  height: 100%;
   display: flex;
-  flex-basis: 50%;
-}
-.node-map {
-  width: 50vw;
+
+  & > div {
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+
+    & + div .node-map {
+      border-left: none;
+    }
+  }
+
+  .node-map {
+    border: 1px solid grey;
+  }
 }
 </style>