vue_visgraph: store missing persons from courses, household and relationship

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

@@ -36,13 +36,9 @@ export default {
    },
    computed: {
       ...mapGetters(['nodes', 'edges']),
-      ...mapState(['households', 'courses', 'excludedNodesIds'
-         //'persons',
-         //'links,
-         //'relationships',
-         //'householdLoadingIds',
-         //'courseLoadedIds',
-         //'relationshipLoadedIds',
+      ...mapState(['households', 'courses', 'excludedNodesIds',
+         // not used
+         'persons', 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
       ]),
 
       visgraph_data() {

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

@@ -13,6 +13,7 @@ const store = createStore({
         courses: [],
         relationships: [],
         links: [],
+        personLoadedIds: [],
         householdLoadingIds: [],
         courseLoadedIds: [],
         relationshipLoadedIds: [],
@@ -41,9 +42,6 @@ const store = createStore({
             state.links.forEach(l => {
                 edges.push(l)
             })
-            //state.relationships.forEach(r => {
-            //    edges.push(r)
-            //})
             return edges
         },
         isHouseholdLoading: (state) => (household_id) => {
@@ -54,6 +52,9 @@ const store = createStore({
         },
         isRelationshipLoaded: (state) => (relationship_id) => {
             return state.relationshipLoadedIds.includes(relationship_id)
+        },
+        isPersonLoaded: (state) => (person_id) => {
+            return state.personLoadedIds.includes(person_id)
         }
     },
     mutations: {
@@ -77,6 +78,12 @@ const store = createStore({
            console.log('+ addLink from', link.from, 'to', link.to)
            state.links.push(link)
         },
+        markPersonLoaded(state, id) {
+            state.personLoadedIds.push(id)
+        },
+        unmarkPersonLoaded(state, id) {
+            state.personLoadedIds = state.personLoadedIds.filter(i => i !== id)
+        },
         markHouseholdLoading(state, id) {
             console.log('..loading household', id)
             state.householdLoadingIds.push(id)
@@ -108,7 +115,9 @@ const store = createStore({
          *  1) Add a person in state
          *  @param Person person
          */
+
         addPerson({ commit, dispatch }, person) {
+            commit('markPersonLoaded', person.id)
             commit('addPerson', person)
             dispatch('fetchInfoForPerson', person)
         },
@@ -149,7 +158,7 @@ const store = createStore({
          *  4) Add an edge for each household member (household -> person)
          *  @param Household household
          */
-        addLinkFromPersonsToHousehold({ commit }, household) {
+        addLinkFromPersonsToHousehold({ commit, getters, dispatch }, household) {
             const currentMembers = household.members.filter(v => household.current_members_id.includes(v.id))
             currentMembers.forEach(m => {
                 //console.log('-> addLink from person', m.person.id, 'to household', m.person.current_household_id)
@@ -163,30 +172,32 @@ const store = createStore({
                     label: getHouseholdLabel(m),
                     width: getHouseholdWidth(m),
                 })
+                if (!getters.isPersonLoaded(m.person.id)) {
+                    console.log('  person is not loaded', m.person.id)
+                    dispatch('addMissingPerson', m.person)
+                }
             })
-
         },
 
         /**
          *  5) Fetch AccompanyingCourses for the person
          *  @param Person person
          */
-        fetchCoursesByPerson({ dispatch }, person) {
+        fetchCoursesByPerson({ commit, dispatch }, person) {
             //console.log('fetchCoursesByPerson', person)
             getCoursesByPerson(person)
                 .then(courses => new Promise(resolve => {
                     console.log('fetch courses', courses.length)
-                    dispatch('addCourse', courses)
+                    dispatch('addCourses', courses)
                     resolve()
                 }))
-
         },
 
         /**
          *  6) Add each distinct course
          *  @param array courses
          */
-        addCourse({ commit, getters, dispatch }, courses) {
+        addCourses({ commit, getters, dispatch }, courses) {
             //console.log('addCourse', courses)
             let currentCourses = courses.filter(c => c.closingDate === null)
             currentCourses.forEach(course => {
@@ -204,7 +215,7 @@ const store = createStore({
          *  7) Add an edge for each course participation (course <- person)
          *  @param AccompanyingCourse course
          */
-        addLinkFromPersonsToCourse({ commit }, course) {
+        addLinkFromPersonsToCourse({ commit, getters, dispatch }, course) {
             let currentParticipations = course.participations.filter(p => p.endDate === null)
             console.log('  participations', currentParticipations.length)
             currentParticipations.forEach(p => {
@@ -217,6 +228,10 @@ const store = createStore({
                     font: { color: 'darkorange' },
                     label: visMessages.fr.visgraph.concerned,
                 })
+                if (!getters.isPersonLoaded(p.person.id)) {
+                    console.log('  person is not loaded', p.person.id)
+                    dispatch('addMissingPerson', p.person)
+                }
             })
         },
 
@@ -229,7 +244,7 @@ const store = createStore({
             getRelationshipsByPerson(person)
                 .then(relationships => new Promise(resolve => {
                     console.log('fetch relationships', relationships.length)
-                    dispatch('addRelationship', relationships)
+                    dispatch('addRelationships', relationships)
                     resolve()
                 }))
         },
@@ -239,7 +254,7 @@ const store = createStore({
          *  9) Add each distinct relationship
          *  @param array relationships
          */
-        addRelationship({ commit, getters, dispatch }, relationships) {
+        addRelationships({ commit, getters, dispatch }, relationships) {
             relationships.forEach(relationship => {
                 console.log('  isRelationshipLoaded ?', getters.isRelationshipLoaded(relationship.id))
                 if (! getters.isRelationshipLoaded(relationship.id)) {
@@ -253,40 +268,36 @@ const store = createStore({
 
         /**
          *  10) Add an edge for each relationship (person -> person)
-         *  @param Relationship relationship
+         *  @param Relationship r
          */
-        addLinkFromRelationship({ commit }, r) {
-
-            console.log(
-                '-> addLink from person', r.fromPerson.id, 'to person', r.toPerson.id,
-                //'reverse', r.reverse,
-                //'relation', r.relation.title.fr, r.relation.reverseTitle.fr
-            )
-
+        addLinkFromRelationship({ commit, getters, dispatch }, r) {
+            //console.log('-> addLink from person', r.fromPerson.id, 'to person', r.toPerson.id)
             commit('addLink', {
                 from: `person_${r.fromPerson.id}`,
                 to: `person_${r.toPerson.id}`,
                 id: 'r' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
-                arrows: 'from',
+                arrows: 'to',
                 color: 'lightblue', dashes: true,
-                font: { color: 'lightblue' },
+                font: { color: '#33839d' },
                 label: getRelationshipLabel(r, false),
             })
-
-            /*
-            // add reverse relation
-            commit('addLink', {
-                from: `person_${r.toPerson.id}`,
-                to: `person_${r.fromPerson.id}`,
-                id: 'rr' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
-                arrows: 'from',
-                color: 'lightblue', dashes: true,
-                font: { color: 'lightblue' },
-                label: getRelationshipLabel(r, true),
-            })
-            */
+            for (let person of [r.fromPerson, r.toPerson]) {
+                if (!getters.isPersonLoaded(person.id)) {
+                    console.log('  person is not loaded', person.id)
+                    dispatch('addMissingPerson', person)
+                }
+            }
         },
 
+        /**
+         *  Fetch missing person
+         *  @param Person person
+         */
+        addMissingPerson({ commit, getters, dispatch }, person) {
+            //console.log('addMissingPerson', person)
+            commit('markPersonLoaded', person.id)
+            commit('addPerson', person)
+        },
     }
 })
 

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

@@ -167,7 +167,11 @@ const getHouseholdLabel = (member) => {
 /**
  * Return edge width for member (depends of position in household)
  * @param member
- * @returns string
+ * @returns integer (width)
+ *
+ * TODO
+ * to use: holder, shareHousehold
+ * not use: ordering, position (-> null)
  */
 const getHouseholdWidth = (member) => {
     switch (member.position.ordering) {
@@ -179,6 +183,8 @@ const getHouseholdWidth = (member) => {
         case 2: //children
         case 3: //children out of household
             return 1
+        default:
+            throw 'Ordering not supported'
     }
 }