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

src/components/NodeMap.vue

@@ -3,24 +3,30 @@
     width="100%" height="100%"
     ref="svg" :id="id"
   >
-    <path
-      v-for="(item, index) in links"
-      :key="`link_${index}`"
-      :d="lineGenerator([item.source, item.target])"
-      stroke="black"
-    />
+    <template v-if="ready">
+      <path
+        v-for="(item, index) in links"
+        :key="`link_${index}`"
+        :d="lineGenerator([item.source, item.target])"
+        stroke="black"
+      />
 
-    <template v-for="(node, index) in nodes">
-      <circle
-        :key="'circle' + index"
-        :cx="node.x"
-        :cy="node.y"
-        :class="node.data.class + (node.data.first ? ' first' : '')"
-        :r="node.children ? 7 : 5"
-      >
-        <title>{{ node.data.title }}</title>
-      </circle>
-      <text :key="'text' + index" :x="node.x + 7" :y="node.y-7">{{ node.data.id }}</text>
+      <template v-for="(node, index) in nodes">
+        <circle
+          :key="'circle' + index"
+          :cx="node.x"
+          :cy="node.y"
+          :class="node.data.class + (node.data.first ? ' first' : '')"
+          :r="node.children ? 7 : 5"
+        >
+          <title>{{ node.data.title }}</title>
+        </circle>
+
+        <text
+          v-if="showId"
+          :key="'text' + index" :x="node.x + 7" :y="node.y-7"
+        >{{ node.data.id }}</text>
+      </template>
     </template>
   </svg>
 </template>
@@ -45,11 +51,13 @@ export default {
   props: {
     nodes: { type: Array, required: true },
     links: { type: Array, required: true },
-    id: { type: String, default: 'map' }
+    id: { type: String, default: 'node-map' },
+    showId: { type: Boolean, default: true }
   },
 
   data () {
     return {
+      ready: false,
       width: 100,
       height: 100,
       simulation: forceSimulation(),
@@ -74,6 +82,7 @@ export default {
       this.setupForces()
       // Wait for DOM update so d3 can select
       this.$nextTick(this.initListeners)
+      this.ready = true
     },
 
     initListeners () {

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>