loop on household members to add edges to graph

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

@@ -14,8 +14,9 @@ export default {
       }
    },
    computed: {
-      ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
+      //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
       ...mapGetters(['nodes', 'edges']),
+
       visgraph_data() {
          console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
          return {
@@ -24,12 +25,12 @@ export default {
          }
       },
       refreshNetwork() {  // B
-         console.log('refresh network')
+         console.log('--- refresh network')
-         window.network.setData(this.visgraph_data)
+         window.network.setData(this.visgraph_data) // <-- Error: [vuex] do not mutate vuex store state outside mutation handlers.
       }
    },
    mounted() {
-      console.log('mounted: init graph')
+      console.log('=== mounted: init graph')
       this.initGraph()
    },
    methods: {

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

@@ -14,7 +14,7 @@ const store = createStore({
     },
     getters: {
         nodes(state) {
-            let nodes = [];
+            let nodes = []
             state.persons.forEach(p => {
                 nodes.push(p)
             })
@@ -24,40 +24,55 @@ const store = createStore({
             return nodes
         },
         edges(state) {
-            return []
+            let edges = []
+            state.relationships.forEach(r => {
+                edges.push(r)
+            })
+            return edges
         },
         isHouseholdLoading: (state) => (household_id) => {
-            return state.householdLoadingIds.includes(household_id);
+            return state.householdLoadingIds.includes(household_id)
         },
     },
     mutations: {
         addPerson(state, person) {
-            console.log('addPerson', person.id)
+            console.log('+ addPerson', person.id)
-            person.label = person.text // vis need label
+            person.label = person.text          // vis need label
-            person.id = `person_${person.id}` // vis need unique id
+            person.id = `person_${person.id}`   // vis need unique id
             state.persons.push(person)
         },
         addHousehold(state, household) {
-            console.log('addHousehold', household.id)
+            console.log('+ addHousehold', household.id)
-            household.label = `Ménage n° ${household.id}` // vis need label
+            household.label = `Ménage n° ${household.id}`   // vis need label
-            household.id = `household_${household.id}` // vis need unique id
+            household.id = `household_${household.id}`      // vis need unique id
             state.households.push(household)
         },
         addCourse(state, course) {
-           console.log('addCourse', course.id)
+           console.log('+ addCourse', course.id)
            state.courses.push(course)
         },
         addRelationship(state, relationship) {
-           console.log('addRelationship', relationship.id)
+           console.log('+ addRelationship', relationship.id)
            state.relationships.push(relationship)
         },
         markHouseholdLoading(state, id) {
-            console.log('..loading', id)
+            console.log('..loading household', id)
             state.householdLoadingIds.push(id)
         },
         unmarkHouseholdLoading(state, id) {
             state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
-        }
+        },
+        addLinkFromPersonsToHousehold(state, household) {
+            const members = household.members.filter(v => household.current_members_id.includes(v.id))
+            members.forEach(m => {
+                console.log('-> addLink from person', m.person.id, 'to household', m.person.current_household_id)
+                state.relationships.push({
+                    from: `${m.person.type}_${m.person.id}`,
+                    to: `household_${m.person.current_household_id}`
+                })
+            })
+
+        },
     },
     actions: {
         addPerson({ commit, dispatch }, person) {
@@ -75,18 +90,19 @@ const store = createStore({
          *  check first isHouseholdLoading to fetch household once
          */
         fetchHouseholdForPerson({ commit, getters }, person) {
-            console.log('isHouseholdLoading', getters.isHouseholdLoading(person.current_household_id))
+            console.log('  isHouseholdLoading ?', getters.isHouseholdLoading(person.current_household_id))
             if (! getters.isHouseholdLoading(person.current_household_id)) {
                 commit('markHouseholdLoading', person.current_household_id)
                 getHouseholdByPerson(person)
                     .then(household => new Promise(resolve => {
                         //console.log('getHouseholdByPerson', household)
                         commit('addHousehold', household)
+                        commit('addLinkFromPersonsToHousehold', household)
                         resolve()
                         })
                     ).catch( () => {
                         commit('unmarkHouseholdLoading', person.current_household_id)
-                });
+                })
             }
         },
 
@@ -101,7 +117,7 @@ const store = createStore({
                     commit('addCourse', course)
                     resolve()
                 }))
-            ;
+
         },
 
         /**
@@ -115,10 +131,10 @@ const store = createStore({
                     commit('addRelationship', relationship)
                     resolve()
                 }))
-            ;
+
         },
 
     }
-});
+})
 
 export { store }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -29,6 +29,9 @@ window.options = {
     },
     nodes: {
         physics: true
+    },
+    edges: {
+        physics: true
     }
 };