add ability to query a textDepart in tree-map mode

src/pages/library/LibraryOptions.vue

@@ -7,8 +7,8 @@
       <b-form-radio-group
         id="mode-select"
         v-model="currentMode" :options="modes"
-        name="mode-select" :aria-describedby="ariaDescribedby" buttons
-        size="sm"
+        name="mode-select" :aria-describedby="ariaDescribedby"
+        buttons button-variant="outline-dark"
       />
     </b-form-group>
 
@@ -23,6 +23,7 @@
         <multiple-tags-select
           id="tags-select" :button-text="$t('options.filters.choices.tags')"
           v-model="selectedTags" :options="tags"
+          :disabled="true"
         />
       </b-form-group>
 
@@ -34,22 +35,41 @@
           id="strangeness-input"
           type="range" min="0" max="5"
           v-model="strangeness"
+          :disabled="true"
         />
       </b-form-group>
     </b-form-group>
+    <b-form-group
+      label="Texte de départ :"
+      label-for="text-depart-select"
+      class="w-25"
+    >
+      <b-form-select
+        id="text-depart-select"
+        v-model="textDepartId"
+        :options="textsDepartOptions"
+        class="border"
+      />
+    </b-form-group>
+
 
     <b-form-group
       :label="$t('options.search.title')"
       label-for="search-input"
     >
-      <b-input-group size="sm" append="search-icon">
-        <b-form-input v-model="search" id="search-input" trim />
+      <b-input-group append="search-icon">
+        <b-form-input
+          v-model="search" id="search-input" trim
+          :disabled="true"
+        />
       </b-input-group>
     </b-form-group>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'
 
 export default {
@@ -75,14 +95,30 @@ export default {
       currentMode: this.mode,
       selectedTags: [],
       strangeness: 0,
+      textDepartId: undefined,
       search: ''
     }
   },
 
+  computed: {
+    ...mapGetters(['textsDepartOptions'])
+  },
+
   watch: {
     currentMode (mode) {
       this.$router.push({ query: { mode } })
+    },
+
+    textDepartId (id) {
+      console.log('textDepartId changed', id)
+      this.$store.dispatch('GET_TREE_WITH_DEPTH', { id })
     }
+  },
+
+  created () {
+    this.$store.dispatch('GET_TEXTS_DEPART').then(data => {
+      this.textDepartId = data[0].id
+    })
   }
 }
 </script>

src/pages/library/TreeMap.vue

@@ -3,13 +3,14 @@
     <node-map
       v-if="!loading"
       v-bind="mapData"
-      :show-id="true"
       v-on="$listeners"
     />
   </b-overlay>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import NodeMap from '@/components/NodeMap'
 import { toManyManyData } from '@/helpers/d3Data'
 
@@ -21,24 +22,27 @@ export default {
     NodeMap
   },
 
-  props: {
-    id: { type: Number, default: 1 }
-  },
-
   data () {
     return {
       loading: true,
-      depth: 3,
-      mapData: { nodes: null, links: null }
+      mapData: undefined
     }
   },
 
-  created () {
-    const { id, depth } = this
-    this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
-      this.mapData = toManyManyData(data)
-      this.loading = false
-    })
+  computed: {
+    ...mapGetters(['textDepart'])
+  },
+
+  watch: {
+    textDepart (text) {
+      if (text) {
+        this.mapData = toManyManyData(this.textDepart)
+        this.loading = false
+      } else {
+        this.mapData = undefined
+        this.loading = true
+      }
+    }
   }
 }
 </script>