visgraph: hide somes persons nodes labels (folded)

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

@@ -9,8 +9,8 @@ const visMessages = {
             both: 'neutre, non binaire',
             woman: 'féminin',
             man: 'masculin',
-            years: 'ans'
+            years: 'ans',
-
+            click_to_expand: 'cliquez pour étendre',
         },
         edit: 'Éditer',
         del: 'Supprimer',

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

@@ -59,49 +59,53 @@ const store = createStore({
     mutations: {
         addPerson(state, person) {
             console.log('+ addPerson', person.id)
-            state.persons.push(adapt2vis(person))
+            state.persons.push(person)
         },
         addHousehold(state, household) {
             console.log('+ addHousehold', household.id)
-            state.households.push(adapt2vis(household))
+            state.households.push(household)
         },
         addCourse(state, course) {
            console.log('+ addCourse', course.id)
-           state.courses.push(adapt2vis(course))
+           state.courses.push(course)
         },
         addRelationship(state, relationship) {
            console.log('+ addRelationship', relationship.id)
-           state.relationships.push(adapt2vis(relationship))
+           state.relationships.push(relationship)
         },
         addLink(state, link) {
            console.log('+ addLink from', link.from, 'to', link.to)
            state.links.push(link)
         },
+
+        //// id markers
         markPersonLoaded(state, id) {
             state.personLoadedIds.push(id)
         },
-        unmarkPersonLoaded(state, id) {
+            unmarkPersonLoaded(state, id) {
-            state.personLoadedIds = state.personLoadedIds.filter(i => i !== id)
+                state.personLoadedIds = state.personLoadedIds.filter(i => i !== id)
-        },
+            },
         markHouseholdLoading(state, id) {
             console.log('..loading household', id)
             state.householdLoadingIds.push(id)
         },
-        unmarkHouseholdLoading(state, id) {
+            unmarkHouseholdLoading(state, id) {
-            state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
+                state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
-        },
+            },
         markCourseLoaded(state, id) {
             state.courseLoadedIds.push(id)
         },
-        unmarkCourseLoaded(state, id) {
+            unmarkCourseLoaded(state, id) {
-            state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id)
+                state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id)
-        },
+            },
         markRelationshipLoaded(state, id) {
             state.relationshipLoadedIds.push(id)
         },
-        unmarkRelationshipLoaded(state, id) {
+            unmarkRelationshipLoaded(state, id) {
-            state.relationshipLoadedIds = state.relationshipLoadedIds.filter(i => i !== id)
+                state.relationshipLoadedIds = state.relationshipLoadedIds.filter(i => i !== id)
-        },
+            },
+
+        //// excluded
         addExcludedNode(state, id) {
             state.excludedNodesIds.push(id)
         },
@@ -117,7 +121,7 @@ const store = createStore({
          */
         addPerson({ commit, dispatch }, person) {
             commit('markPersonLoaded', person.id)
-            commit('addPerson', person)
+            commit('addPerson', adapt2vis(person, { folded: false }))
             dispatch('fetchInfoForPerson', person)
         },
 
@@ -147,7 +151,7 @@ const store = createStore({
                 getHouseholdByPerson(person)
                     .then(household => new Promise(resolve => {
                         //console.log('getHouseholdByPerson', household)
-                        commit('addHousehold', household)
+                        commit('addHousehold', adapt2vis(household))
                         commit('addExcludedNode', household.id)
                         dispatch('addLinkFromPersonsToHousehold', household)
                         resolve()
@@ -212,7 +216,7 @@ const store = createStore({
                 if (! getters.isCourseLoaded(course.id)) {
                     //console.log('course', course.id)
                     commit('markCourseLoaded', course.id)
-                    commit('addCourse', course)
+                    commit('addCourse', adapt2vis(course))
                     commit('addExcludedNode', course.id)
                     dispatch('addLinkFromPersonsToCourse', course)
                 }
@@ -270,7 +274,7 @@ const store = createStore({
                 if (! getters.isRelationshipLoaded(relationship.id)) {
                     //console.log('relationship', relationship.id)
                     commit('markRelationshipLoaded', relationship.id)
-                    commit('addRelationship', relationship)
+                    commit('addRelationship', adapt2vis(relationship))
                     dispatch('addLinkFromRelationship', relationship)
                 }
             })
@@ -308,9 +312,11 @@ const store = createStore({
          *  @param person
          */
         addMissingPerson({ commit, getters, dispatch }, person) {
-            //console.log('addMissingPerson', person)
             commit('markPersonLoaded', person.id)
-            commit('addPerson', person)
+            commit('addPerson', adapt2vis(person, { folded: true }))
+
+            console.log('********* fetch infos for missing', person.id, '******')
+            //dispatch('fetchInfoForPerson', person)
         },
     }
 })

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

@@ -166,15 +166,20 @@ window.options = {
  * Adapt entity to graph (id, label)
  * rename id in _id and add properties needed by vis
  * @param entity
+ * @param options
  * @returns entity
  */
-const adapt2vis = (entity) => {
+const adapt2vis = (entity, options = {}) => {
     entity.group = entity.type
     switch (entity.type) {
         case 'person':
             entity._id = entity.id
             entity.label = `${entity.text}\n` + getGender(entity.gender) +' - '+ getAge(entity.birthdate)
-            //entity.title = `${entity.text}`
+            if (options.folded) {
+                entity.title = visMessages.fr.visgraph.click_to_expand
+                entity._label = entity.label  // keep label
+                entity.label = null
+            }
             entity.id = `person_${entity.id}`
             break
         case 'household':