From 55c2aed613871d4086f8cbe14fc2b7c5289b4c0d Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Thu, 4 Nov 2021 21:44:11 +0100 Subject: [PATCH] visgraph: fix algo problems when expanding graph --- .../Resources/public/vuejs/VisGraph/App.vue | 12 +- .../Resources/public/vuejs/VisGraph/store.js | 148 +++++++++--------- 2 files changed, 79 insertions(+), 81 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue index b724789fd..c091546ef 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue @@ -147,7 +147,7 @@ export default { ]), visgraph_data() { - //console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges') + console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges') return { nodes: this.nodes, edges: this.edges @@ -239,7 +239,7 @@ export default { case 'person': let person = this.nodes.filter(n => n.id === data.nodes[0])[0] - console.log('@@@@@@@@ event on selected Person Node @@@@@@@@', person.id) + console.log('@@@@@@ event on selected Node', person.id) if (person.label === null) { this.$store.commit('unfoldPerson', person) this.forceUpdateComponent() @@ -248,14 +248,14 @@ export default { case 'household': let household = this.nodes.filter(n => n.id === data.nodes[0])[0] - console.log('######## event on selected Household Node ########', household.id) + 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] - console.log('&&&&&&&& event on selected AccompanyingCourse Node &&&&&&&&', course.id) + console.log('@@@@@@ event on selected Node', course.id) this.$store.dispatch('unfoldPersonsByCourse', course) this.forceUpdateComponent() break @@ -277,9 +277,9 @@ export default { this.refreshNetwork }, toggleLayer(value) { - //console.log('toggleLayer') - this.forceUpdateComponent() let id = value.target.value + console.log('@@@@@ toggle Layer', id) + this.forceUpdateComponent() if (this.checkedLayers.includes(id)) { this.removeLayer(id) } else { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index d2a930658..96149908f 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js @@ -64,40 +64,44 @@ const store = createStore({ //console.log('getParticipationsByCourse', course_id) const course = state.courses.filter(c => c.id === course_id)[0] const currentParticipations = course.participations.filter(p => p.endDate === null) - const participations = [] - currentParticipations.forEach(p => { - participations.push(p) - }) - console.log('participations', - participations.map(i => i.person.id), - participations - .filter(i => typeof i.person._id !== 'undefined') - .map(i => i.person.id) + console.log('get persons in', course_id, + currentParticipations.map(p => p.person.id), //currentParticipations.map(p => p.person), + 'with folded', currentParticipations + .filter(p => p.person.folded === true) + .map(p => p.person.id) ) - return participations + return currentParticipations }, getMembersByHousehold: (state) => (household_id) => { //console.log('getMembersByHousehold', household_id) const household = state.households.filter(h => h.id === household_id)[0] const currentMembers = household.members.filter(m => household.current_members_id.includes(m.id)) - const members = [] - currentMembers.forEach(m => { - members.push(m) - }) - console.log('members', - members.map(i => i.person.id), - members - .filter(i => typeof i.person._id !== 'undefined') - .map(i => i.person.id) + console.log('get persons in', household_id, + currentMembers.map(m => m.person.id), //currentMembers.map(m => m.person), + 'with folded', currentMembers + .filter(m => m.person.folded === true) + .map(m => m.person.id) ) - return members + return currentMembers }, - getFoldedPersons: () => (array) => { - return array - .filter(i => typeof i.person._id !== 'undefined') - .map(i => i.person) + getFoldedPersons: (state) => (array) => { + //console.log('array', array.map(r => r.person.id)) + + let folded = [] + array.forEach(a => { + let id = (typeof a.person._id !== 'undefined') ? a.person._id : a.person.id + if (state.personLoadedIds.includes(id)) { + folded.push(state.persons.filter(person => person._id === id)[0]) + } + }) + console.log('get FoldedPersons', folded.map(r => r.id)) + return folded + + //return array + // .filter(i => i.person.folded === true) ///// <== tout ce qui passe dans la mutation addPerson reçoit un _id + // .map(i => i.person) ///// donc changer le filtrage }, @@ -110,10 +114,13 @@ const store = createStore({ person._id = person.id person.id = `person_${person.id}` person.label = `*${person.text}*\n_${getGender(person.gender)} - ${getAge(person.birthdate)}_` - if (options.folded) { + person.folded = false + + if (options.folded) { // used by missing persons person.title = visMessages.fr.visgraph.click_to_expand person._label = person.label // keep label person.label = null + person.folded = true } state.persons.push(person) @@ -181,23 +188,26 @@ const store = createStore({ //// excluded addExcludedNode(state, id) { - console.log('exclude list: +', id) + console.log('==> exclude list: +', id) state.excludedNodesIds.push(id) }, removeExcludedNode(state, id) { - console.log('exclude list: -', id) + console.log('<== exclude list: -', id) state.excludedNodesIds = state.excludedNodesIds.filter(e => e !== id) }, //// unfold unfoldPerson(state, person) { - //console.log('unfoldPerson', person) - if (person.label !== null) { - throw 'person is not folded' + if (person.folded === true) { + console.log('unfoldPerson', person) + person.label = person._label + delete person._label + delete person.title + person.folded = false + } else { + console.log('person is not folded', person) + //throw 'person is not folded' } - person.label = person._label - delete person._label - delete person.title } }, actions: { @@ -268,6 +278,7 @@ const store = createStore({ width: getHouseholdWidth(m), }) if (!getters.isPersonLoaded(m.person.id)) { + console.log('addMissingPerson from household', household.id) dispatch('addMissingPerson', [m.person, household]) } }) @@ -302,7 +313,7 @@ const store = createStore({ //console.log('course', course.id) commit('markCourseLoaded', course.id) commit('addCourse', course) - dispatch('addExcludedNode', course.id) // layer uncheck when added + commit('addExcludedNode', course.id) // init: layer uncheck when added dispatch('addLinkFromPersonsToCourse', course) } }) @@ -314,7 +325,7 @@ const store = createStore({ * @param course */ addLinkFromPersonsToCourse({ commit, getters, dispatch }, course) { - let participations = getters.getParticipationsByCourse(course.id) + const participations = getters.getParticipationsByCourse(course.id) console.log('add link for', participations.length, 'participations') participations.forEach(p => { //console.log(p.person.id) @@ -400,7 +411,7 @@ const store = createStore({ commit('markPersonLoaded', person.id) commit('addPerson', [person, { folded: true }]) if (getters.isExcludedNode(parent.id)) { - commit('addExcludedNode', person.id) //1 + commit('addExcludedNode', person.id) // init: exclude missing persons if parent is excluded } }, @@ -416,15 +427,11 @@ const store = createStore({ */ unfoldPersonsByCourse({ getters, commit, dispatch }, course) { const participations = getters.getParticipationsByCourse(course.id) - const folded = getters.getFoldedPersons(participations) - console.log('folded', folded) - participations.forEach(p => { - console.log('participation person', p.person.id) - if (p.person.label === null) { - console.log(' -> unfold folded') - commit('unfoldPerson', p.person) - dispatch('fetchInfoForPerson', p.person) - } + getters.getFoldedPersons(participations) + .forEach(person => { + console.log('-=. unfold and expand person', person.id) + commit('unfoldPerson', person) + dispatch('fetchInfoForPerson', person) }) }, @@ -436,16 +443,11 @@ const store = createStore({ */ unfoldPersonsByHousehold({ getters, commit, dispatch }, household) { const members = getters.getMembersByHousehold(household.id) - const folded = getters.getFoldedPersons(members) - console.log('folded', folded) - - members.forEach(m => { - console.log('member person', m.person.id) - if (m.person.label === null) { - console.log(' -> unfold folded') - commit('unfoldPerson', m.person) - dispatch('fetchInfoForPerson', m.person) - } + getters.getFoldedPersons(members) + .forEach(person => { + console.log('-=. unfold and expand person', person.id) + commit('unfoldPerson', person) + dispatch('fetchInfoForPerson', person) }) }, @@ -455,23 +457,21 @@ const store = createStore({ * @param id */ addExcludedNode({ getters, commit }, id) { - console.log('==> addExcludedNode') + console.log('==> ExcludedNode') commit('addExcludedNode', id) switch (splitId(id, 'type')) { case 'accompanying_period': - let participations = getters.getParticipationsByCourse(id) - participations.forEach(p => { - if (p.person.label === null) { - commit('addExcludedNode', p.person.id) - } + const participations = getters.getParticipationsByCourse(id) + getters.getFoldedPersons(participations) + .forEach(person => { + commit('addExcludedNode', person.id) }) break case 'household': let members = getters.getMembersByHousehold(id) - members.forEach(m => { - if (m.person.label === null) { - commit('addExcludedNode', m.person.id) - } + getters.getFoldedPersons(members) + .forEach(person => { + commit('addExcludedNode', person.id) }) break default: @@ -485,23 +485,21 @@ const store = createStore({ * @param id */ removeExcludedNode({ getters, commit }, id) { - console.log('<== removeExcludedNode') + console.log('<== ExcludedNode') commit('removeExcludedNode', id) switch (splitId(id, 'type')) { case 'accompanying_period': - let participations = getters.getParticipationsByCourse(id) - participations.forEach(p => { - if (p.person.label === null) { - commit('removeExcludedNode', p.person.id) - } + const participations = getters.getParticipationsByCourse(id) + getters.getFoldedPersons(participations) + .forEach(person => { + commit('removeExcludedNode', person.id) }) break case 'household': let members = getters.getMembersByHousehold(id) - members.forEach(m => { - if (m.person.label === null) { - commit('removeExcludedNode', m.person.id) - } + getters.getFoldedPersons(members) + .forEach(person => { + commit('removeExcludedNode', person.id) }) break default: