visgraph: improve nodes that are hidden when uncheck layer

- a new getter count links by node. before exclude person, check first if node has others visible links
- links id are rewrote to serve count links getter
- unfold and expand only folded person

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

@@ -140,7 +140,10 @@ export default {
       }
    },
    computed: {
-      ...mapGetters(['nodes', 'edges']),
+      ...mapGetters(['nodes', 'edges',
+         // not used
+         'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getFoldedPersons',
+      ]),
       ...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
          // not used
          'links', 'relationships', 'whitelistIds', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
@@ -234,16 +237,15 @@ export default {
             if (data.nodes.length > 1) {
                throw 'Multi selection is not allowed. Disable it in options.interaction !'
             }
-            let nodeType = splitId(data.nodes[0], 'type')
+            let node = data.nodes[0]
-            switch (nodeType) {
 
             // test
-            console.log(
+            //this.countLinksByNode(node)
-               splitId('accompanying_period_124', 'id')
-            )
 
+            let nodeType = splitId(node, 'type')
+            switch (nodeType) {
                case 'person':
-                  let person = this.nodes.filter(n => n.id === data.nodes[0])[0]
+                  let person = this.nodes.filter(n => n.id === node)[0]
                   console.log('@@@@@@ event on selected Node', person.id)
                   if (person.label === null) {
                      this.$store.commit('unfoldPerson', person)
@@ -252,14 +254,14 @@ export default {
                   break
 
                case 'household':
-                  let household = this.nodes.filter(n => n.id === data.nodes[0])[0]
+                  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 === data.nodes[0])[0]
+                  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()

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

@@ -64,6 +64,21 @@ const store = createStore({
             return state.excludedNodesIds.includes(id)
         },
 
+        countLinksByNode: (state) => (node_id) => {
+            let array = []
+            state.links.filter(link => ! link.id.startsWith('relationship'))
+            .forEach(link => {
+                if (link.from === node_id || link.to === node_id) {
+                    if (state.excludedNodesIds.indexOf(splitId(link.id, 'link')) === -1) {
+                        array.push(link)
+                    }
+                    //console.log(link.id, state.excludedNodesIds.indexOf(splitId(link.id, 'link')))
+                }
+            })
+            console.log(array.length, array.map(i => i.id))
+            return array.length
+        },
+
         getParticipationsByCourse: (state) => (course_id) => {
             //console.log('getParticipationsByCourse', course_id)
             const course = state.courses.filter(c => c.id === course_id)[0]
@@ -88,14 +103,13 @@ const store = createStore({
          */
         getFoldedPersons: (state) => (array) => {
             let folded = []
-            console.log('array', array.map(item => item.person.id))
             array.forEach(item => {
                 let id = splitId(item.person.id, 'id')
-                console.log(id)
                 if (state.personLoadedIds.includes(id)) {
                     folded.push(state.persons.filter(person => person._id === id)[0])
                 }
             })
+            //console.log('array', array.map(item => item.person.id))
             console.log('get FoldedPersons', folded.map(f => f.id))
             return folded
         },
@@ -197,16 +211,11 @@ const store = createStore({
 
         //// unfold
         unfoldPerson(state, person) {
-            if (person.folded === true) {
+            console.log('unfoldPerson', person)
-                console.log('unfoldPerson', person)
+            person.label = person._label
-                person.label = person._label
+            delete person._label
-                delete person._label
+            delete person.title
-                delete person.title
+            person.folded = false
-                person.folded = false
-            } else {
-                console.log('person is not folded', person)
-                //throw 'person is not folded'
-            }
         }
     },
     actions: {
@@ -247,7 +256,7 @@ const store = createStore({
                 getHouseholdByPerson(person)
                     .then(household => new Promise(resolve => {
                         commit('addHousehold', household)
-                        //dispatch('addExcludedNode', household.id)  // layer uncheck when added
+                        //dispatch('addExcludedNode', household.id)  // uncheck layer when added
                         dispatch('addLinkFromPersonsToHousehold', household)
                         resolve()
                         })
@@ -269,7 +278,7 @@ const store = createStore({
                 commit('addLink', {
                     from: `${m.person.type}_${m.person.id}`,
                     to: `household_${m.person.current_household_id}`,
-                    id: `p${m.person.id}-h${m.person.current_household_id}`,
+                    id: `household_${m.person.current_household_id}-person_${m.person.id}`,
                     arrows: 'from',
                     color: 'pink',
                     font: { color: '#D04A60' },
@@ -331,7 +340,7 @@ const store = createStore({
                 commit('addLink', {
                     from: `${p.person.type}_${p.person.id}`,
                     to: `${course.id}`,
-                    id: `p${p.person.id}-c`+ splitId(course.id,'id'),
+                    id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
                     arrows: 'from',
                     color: 'orange',
                     font: { color: 'darkorange' },
@@ -384,7 +393,7 @@ const store = createStore({
             commit('addLink', {
                 from: `person_${r.fromPerson.id}`,
                 to: `person_${r.toPerson.id}`,
-                id: 'r' + splitId(r.id,'id') + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
+                id: 'relationship_' + splitId(r.id,'id') + '-person_' + r.fromPerson.id + '-person_' + r.toPerson.id,
                 arrows: getRelationshipDirection(r),
                 color: 'lightblue',
                 font: { color: '#33839d' },
@@ -426,9 +435,14 @@ const store = createStore({
             const participations = getters.getParticipationsByCourse(course.id)
             getters.getFoldedPersons(participations)
             .forEach(person => {
-                console.log('-=. unfold and expand person', person.id)
+                if (person.folded === true) {
-                commit('unfoldPerson', person)
+                    console.log('-=. unfold and expand person', person.id)
-                dispatch('fetchInfoForPerson', person)
+                    commit('unfoldPerson', person)
+                    dispatch('fetchInfoForPerson', person)
+                //} else {
+                    //console.log('person is not folded', person)
+                    //throw 'person is not folded'
+                }
             })
         },
 
@@ -442,9 +456,14 @@ const store = createStore({
             const members = getters.getMembersByHousehold(household.id)
             getters.getFoldedPersons(members)
             .forEach(person => {
-                console.log('-=. unfold and expand person', person.id)
+                if (person.folded === true) {
-                commit('unfoldPerson', person)
+                    console.log('-=. unfold and expand person', person.id)
-                dispatch('fetchInfoForPerson', person)
+                    commit('unfoldPerson', person)
+                    dispatch('fetchInfoForPerson', person)
+                //} else {
+                    //console.log('person is not folded', person)
+                    //throw 'person is not folded'
+                }
             })
         },
 
@@ -471,7 +490,8 @@ const store = createStore({
                 commit('addExcludedNode', id)
                 getters.getFoldedPersons(personGroup())
                 .forEach(person => {
-                    if (!getters.isInWhitelist(person.id)) {
+                    // countLinks < 2 but parent has just already been added !
+                    if (!getters.isInWhitelist(person.id) && getters.countLinksByNode(person.id) < 1) {
                         commit('addExcludedNode', person.id)
                     }
                 })

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

@@ -264,17 +264,19 @@ const getRelationshipTitle = (relationship) => {
  * Split string id and return type|id substring
  * @param id
  * @param position
- * @returns string
+ * @returns string|integer
  */
 const splitId = (id, position) => {
     switch (position) {
-        case 'type':
+        case 'type':                    // return 'accompanying_period'
-            return /(.+)_/.exec(id)[1]  // return 'accompanying_period'
+            return /(.+)_/.exec(id)[1]
         case 'id':                      // return 124
             return parseInt(id
                 .toString()
                 .split("_")
                 .pop())
+        case 'link':
+            return id.split("-")[0]     // return first segment
         default:
             throw 'position undefined'
     }