From bfcd420cdf4183c28318dee9f2090ae77177bee0 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 5 Nov 2021 14:35:23 +0100 Subject: [PATCH] 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 --- .../Resources/public/vuejs/VisGraph/App.vue | 20 +++--- .../Resources/public/vuejs/VisGraph/store.js | 66 ++++++++++++------- .../public/vuejs/VisGraph/vis-network.js | 8 ++- 3 files changed, 59 insertions(+), 35 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue index 6552e9848..a475409a0 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue +++ b/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') - switch (nodeType) { + let node = data.nodes[0] // test - console.log( - splitId('accompanying_period_124', 'id') - ) + //this.countLinksByNode(node) + 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() diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index c18a14b65..a9ec07ce3 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/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) - 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' - } + console.log('unfoldPerson', person) + person.label = person._label + delete person._label + delete person.title + person.folded = false } }, 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) - commit('unfoldPerson', person) - dispatch('fetchInfoForPerson', person) + if (person.folded === true) { + console.log('-=. unfold and expand person', person.id) + 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) - commit('unfoldPerson', person) - dispatch('fetchInfoForPerson', person) + if (person.folded === true) { + console.log('-=. unfold and expand person', person.id) + 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) } }) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js index a6e20cd6e..21e488188 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/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': - return /(.+)_/.exec(id)[1] // return 'accompanying_period' + case 'type': // 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' }