Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-11-04 11:18:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

visgraph: improve nodes that are hidden when uncheck layer

Browse Source 
- 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
This commit is contained in:
Mathieu Jaumotte
2021-11-05 14:35:23 +01:00
parent 9494bdee2a
commit bfcd420cdf
3 changed files with 59 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
View File

@@ -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()

66
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
View File

@@ -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)
}
})

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

@@ -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'
}