add ability to query a text tree with a depth variable

src/pages/Map.vue

@@ -3,24 +3,24 @@
     <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 class="node-map">
+          <node-map
+            v-if="data"
+            v-bind="mapSingle"
+            :show-id="showId"
+          />
+        </div>
       </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 class="node-map">
+          <node-map
+            v-if="data"
+            v-bind="mapMany"
+            :show-id="showId"
+            id="map-2"
+            />
+        </div>
       </div>
     </div>
 
@@ -28,10 +28,20 @@
       <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
         <b-form-select
           v-model="textId"
+          @input="query"
           :options="textsDepartOptions"
         />
       </b-form-group>
 
+      <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
+        <b-form-spinbutton
+          v-model="depth"
+          @input="query"
+          min="0" max="6"
+          inline
+        />
+      </b-form-group>
+
       <b-form-checkbox v-model="showId" name="check-button" switch>
         Afficher les numéros
       </b-form-checkbox>
@@ -57,6 +67,7 @@ export default {
     return {
       textId: undefined,
       showId: true,
+      depth: 3,
       data: null,
       mapSingle: { nodes: null, links: null },
       mapMany: { nodes: null, links: null }
@@ -67,9 +78,11 @@ export default {
     ...mapGetters(['textsDepartOptions'])
   },
 
-  watch: {
-    textId (id) {
-      this.$store.dispatch('GET_TREE', id).then((data) => {
+  methods: {
+    query () {
+      const { textId: id, depth } = this
+      this.data = null
+      this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
         this.mapSingle = toSingleManyData(data)
         this.mapMany = toManyManyData(data)
         this.data = data
@@ -102,7 +115,12 @@ export default {
   }
 
   .node-map {
+    height: 100%;
     border: 1px solid grey;
   }
+
+}
+.col > * {
+  width: auto;
 }
 </style>