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')
+         console.log('--- refresh legend and rebuild checked Layers')
-         return [
-            ...this.households,
-            ...this.courses
-         ]
-      },
-
-      rebuildCheckedLayers() {
-         //console.log('--- 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

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js

@@ -18,7 +18,8 @@ const store = createStore({
         householdLoadingIds: [],
         courseLoadedIds: [],
         relationshipLoadedIds: [],
-        excludedNodesIds: []
+        excludedNodesIds: [],
+        updateHack: 0
     },
     getters: {
         nodes(state) {
@@ -71,7 +72,7 @@ const store = createStore({
                     //console.log(link.id, state.excludedNodesIds.indexOf(splitId(link.id, 'link')))
                 }
             })
-            console.log('count links', array.length, array.map(i => i.id))
+            //console.log('count links', array.length, array.map(i => i.id))
             return array.length
         },
 
@@ -231,6 +232,11 @@ const store = createStore({
             delete person._label
             delete person.title
             person.folded = false
+        },
+
+        //// force update hack
+        updateHack(state) {
+            state.updateHack = state.updateHack + 1
         }
     },
     actions: {
@@ -246,6 +252,7 @@ const store = createStore({
         addPerson({ commit, dispatch }, person) {
             commit('markPersonLoaded', person.id)
             commit('addPerson', [person, { folded: false }])
+            commit('updateHack')
             dispatch('fetchInfoForPerson', person)
         },
 
@@ -279,8 +286,10 @@ const store = createStore({
                     .then(household => new Promise(resolve => {
                         commit('addHousehold', household)
                             // DISABLED: in init or expand loop, layer is uncheck when added
-                        //dispatch('addExcludedNode', household.id)
+                            //commit('addExcludedNode', household.id)
+                            //commit('updateHack')
                         dispatch('addLinkFromPersonsToHousehold', household)
+                        commit('updateHack')
                         resolve()
                         })
                     ).catch( () => {
@@ -341,6 +350,7 @@ const store = createStore({
                     commit('addCourse', course)
                     commit('addExcludedNode', course.id)  // in init or expand loop, layer is uncheck when added
                     dispatch('addLinkFromPersonsToCourse', course)
+                    commit('updateHack')
                 }
             })
         },
@@ -395,6 +405,7 @@ const store = createStore({
                     commit('markRelationshipLoaded', relationship.id)
                     commit('addRelationship', relationship)
                     dispatch('addLinkFromRelationship', relationship)
+                    commit('updateHack')
                 }
             })
         },
@@ -441,6 +452,7 @@ const store = createStore({
                 // in init or expand loop, exclude too missing persons if parent have been excluded
                 commit('addExcludedNode', person.id)
             }
+            commit('updateHack')
         },
 
         /**
@@ -513,6 +525,7 @@ const store = createStore({
                     commit('removeExcludedNode', person.id)
                 })
             }
+            commit('updateHack')
         },
 
     }