visgraph: improve update graph mechanism

adding an updateHack in store, and a watcher in component.
* updateHack increment a value in the lpop,
* the watcher detect when value changes
* and $forceUpdate

improve layer checkbox legend refresh and rebuild

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -8,7 +8,7 @@
             <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
                {{ $t('visgraph.add_link') }}
             </button>
-            <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
+            <button type="button" class="list-group-item list-group-item-action btn btn-misc">
                <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
             </button>
             <button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
@@ -152,7 +152,7 @@ export default {
                class: null,
                text: null
             },
-         },
+         }
       }
    },
    computed: {
@@ -172,20 +172,12 @@ export default {
       },
 
       refreshNetwork() {
-         //console.log('--- refresh network')
+         console.log('--- refresh network')
          window.network.setData(this.visgraph_data)
       },
 
       legendLayers() {
-         //console.log('--- refresh legend')
-         return [
-            ...this.households,
-            ...this.courses
-         ]
-      },
-
-      rebuildCheckedLayers() {
-         //console.log('--- rebuild checked Layers')
+         console.log('--- refresh legend and rebuild checked Layers')
          this.checkedLayers = []
          let layersDisplayed = [
             ...this.nodes.filter(n => n.id.startsWith('household')),
@@ -194,9 +186,14 @@ export default {
          layersDisplayed.forEach(layer => {
             this.checkedLayers.push(layer.id)
          })
+         return [
+            ...this.households,
+            ...this.courses
+         ]
       },
 
       checkedLayers() { // required to refresh data checkedLayers
+         console.log('--- checkedLayers')
          return this.checkedLayers
       },
 
@@ -219,14 +216,27 @@ export default {
       },
 
    },
+   watch: {
+      updateHack(newValue, oldValue) {
+         console.log(`--- updateHack ${oldValue} <> ${newValue}`)
+         if (oldValue !== newValue) {
+            this.forceUpdateComponent()
+         }
+      }
+   },
    mounted() {
       //console.log('=== mounted: init graph')
       this.initGraph()
       this.listenOnGraph()
       this.getRelationsList()
-      this.forceUpdateComponent()
    },
    methods: {
+      forceUpdateComponent() {
+         //console.log('!! forceUpdateComponent !!')
+         this.refreshNetwork
+         this.$forceUpdate()
+      },
+
       initGraph() {
          this.container = document.getElementById('visgraph')
          // Instanciate vis objects in separate window variables, see vis-network.js
@@ -250,7 +260,6 @@ export default {
                      if (person.folded === true) {
                         console.log('   @@> expand mode event')
                         this.$store.commit('unfoldPerson', person)
-                        this.forceUpdateComponent()
                      }
                   } else {
                      console.log('   @@> create link mode event')
@@ -262,19 +271,18 @@ export default {
                   let household = this.nodes.filter(n => n.id === node)[0]
                   console.log('@@@@@@ event on selected Node', household.id)
                   this.$store.dispatch('unfoldPersonsByHousehold', household)
-                  this.forceUpdateComponent()
                   break
 
                case 'accompanying_period':
                   let course = this.nodes.filter(n => n.id === node)[0]
                   console.log('@@@@@@ event on selected Node', course.id)
                   this.$store.dispatch('unfoldPersonsByCourse', course)
-                  this.forceUpdateComponent()
                   break
 
                default:
                   throw 'event is undefined for this type of node'
             }
+            this.forceUpdateComponent()
          })
          window.network.on('selectEdge', (data) => {
             if (data.nodes.length !== 0 || data.edges.length !== 1) {
@@ -322,13 +330,6 @@ export default {
          }
       },
 
-      // force refresh
-      forceUpdateComponent() {
-         //console.log('!! forceUpdateComponent !!')
-         this.$forceUpdate()
-         this.refreshNetwork
-      },
-
       /// control Layers
       toggleLayer(value) {
          let id = value.target.value