mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
visgraph: improve update graph mechanism
adding an updateHack in store, and a watcher in component. * updateHack increment a value in the lpop, * the watcher detect when value changes * and $forceUpdate improve layer checkbox legend refresh and rebuild
This commit is contained in:
parent
7230fd9c07
commit
95610ffd34
@ -8,7 +8,7 @@
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
|
||||
{{ $t('visgraph.add_link') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc">
|
||||
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
|
||||
@ -152,7 +152,7 @@ export default {
|
||||
class: null,
|
||||
text: null
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -172,20 +172,12 @@ export default {
|
||||
},
|
||||
|
||||
refreshNetwork() {
|
||||
//console.log('--- refresh network')
|
||||
console.log('--- refresh network')
|
||||
window.network.setData(this.visgraph_data)
|
||||
},
|
||||
|
||||
legendLayers() {
|
||||
//console.log('--- refresh legend')
|
||||
return [
|
||||
...this.households,
|
||||
...this.courses
|
||||
]
|
||||
},
|
||||
|
||||
rebuildCheckedLayers() {
|
||||
//console.log('--- rebuild checked Layers')
|
||||
console.log('--- refresh legend and rebuild checked Layers')
|
||||
this.checkedLayers = []
|
||||
let layersDisplayed = [
|
||||
...this.nodes.filter(n => n.id.startsWith('household')),
|
||||
@ -194,9 +186,14 @@ export default {
|
||||
layersDisplayed.forEach(layer => {
|
||||
this.checkedLayers.push(layer.id)
|
||||
})
|
||||
return [
|
||||
...this.households,
|
||||
...this.courses
|
||||
]
|
||||
},
|
||||
|
||||
checkedLayers() { // required to refresh data checkedLayers
|
||||
console.log('--- checkedLayers')
|
||||
return this.checkedLayers
|
||||
},
|
||||
|
||||
@ -219,14 +216,27 @@ export default {
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
updateHack(newValue, oldValue) {
|
||||
console.log(`--- updateHack ${oldValue} <> ${newValue}`)
|
||||
if (oldValue !== newValue) {
|
||||
this.forceUpdateComponent()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//console.log('=== mounted: init graph')
|
||||
this.initGraph()
|
||||
this.listenOnGraph()
|
||||
this.getRelationsList()
|
||||
this.forceUpdateComponent()
|
||||
},
|
||||
methods: {
|
||||
forceUpdateComponent() {
|
||||
//console.log('!! forceUpdateComponent !!')
|
||||
this.refreshNetwork
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
initGraph() {
|
||||
this.container = document.getElementById('visgraph')
|
||||
// Instanciate vis objects in separate window variables, see vis-network.js
|
||||
@ -250,7 +260,6 @@ export default {
|
||||
if (person.folded === true) {
|
||||
console.log(' @@> expand mode event')
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
this.forceUpdateComponent()
|
||||
}
|
||||
} else {
|
||||
console.log(' @@> create link mode event')
|
||||
@ -262,19 +271,18 @@ export default {
|
||||
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 === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', course.id)
|
||||
this.$store.dispatch('unfoldPersonsByCourse', course)
|
||||
this.forceUpdateComponent()
|
||||
break
|
||||
|
||||
default:
|
||||
throw 'event is undefined for this type of node'
|
||||
}
|
||||
this.forceUpdateComponent()
|
||||
})
|
||||
window.network.on('selectEdge', (data) => {
|
||||
if (data.nodes.length !== 0 || data.edges.length !== 1) {
|
||||
@ -322,13 +330,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// force refresh
|
||||
forceUpdateComponent() {
|
||||
//console.log('!! forceUpdateComponent !!')
|
||||
this.$forceUpdate()
|
||||
this.refreshNetwork
|
||||
},
|
||||
|
||||
/// control Layers
|
||||
toggleLayer(value) {
|
||||
let id = value.target.value
|
||||
|
||||
@ -18,7 +18,8 @@ const store = createStore({
|
||||
householdLoadingIds: [],
|
||||
courseLoadedIds: [],
|
||||
relationshipLoadedIds: [],
|
||||
excludedNodesIds: []
|
||||
excludedNodesIds: [],
|
||||
updateHack: 0
|
||||
},
|
||||
getters: {
|
||||
nodes(state) {
|
||||
@ -71,7 +72,7 @@ const store = createStore({
|
||||
//console.log(link.id, state.excludedNodesIds.indexOf(splitId(link.id, 'link')))
|
||||
}
|
||||
})
|
||||
console.log('count links', array.length, array.map(i => i.id))
|
||||
//console.log('count links', array.length, array.map(i => i.id))
|
||||
return array.length
|
||||
},
|
||||
|
||||
@ -231,6 +232,11 @@ const store = createStore({
|
||||
delete person._label
|
||||
delete person.title
|
||||
person.folded = false
|
||||
},
|
||||
|
||||
//// force update hack
|
||||
updateHack(state) {
|
||||
state.updateHack = state.updateHack + 1
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -246,6 +252,7 @@ const store = createStore({
|
||||
addPerson({ commit, dispatch }, person) {
|
||||
commit('markPersonLoaded', person.id)
|
||||
commit('addPerson', [person, { folded: false }])
|
||||
commit('updateHack')
|
||||
dispatch('fetchInfoForPerson', person)
|
||||
},
|
||||
|
||||
@ -255,9 +262,9 @@ const store = createStore({
|
||||
* @param person
|
||||
*/
|
||||
fetchInfoForPerson({ dispatch }, person) {
|
||||
// TODO enfants hors ménages
|
||||
// example: household 61
|
||||
// console.log(person.text, 'household', person.current_household_id)
|
||||
// TODO enfants hors ménages
|
||||
// example: household 61
|
||||
// console.log(person.text, 'household', person.current_household_id)
|
||||
if (null !== person.current_household_id) {
|
||||
dispatch('fetchHouseholdForPerson', person)
|
||||
}
|
||||
@ -278,9 +285,11 @@ const store = createStore({
|
||||
getHouseholdByPerson(person)
|
||||
.then(household => new Promise(resolve => {
|
||||
commit('addHousehold', household)
|
||||
// DISABLED: in init or expand loop, layer is uncheck when added
|
||||
//dispatch('addExcludedNode', household.id)
|
||||
// DISABLED: in init or expand loop, layer is uncheck when added
|
||||
//commit('addExcludedNode', household.id)
|
||||
//commit('updateHack')
|
||||
dispatch('addLinkFromPersonsToHousehold', household)
|
||||
commit('updateHack')
|
||||
resolve()
|
||||
})
|
||||
).catch( () => {
|
||||
@ -341,6 +350,7 @@ const store = createStore({
|
||||
commit('addCourse', course)
|
||||
commit('addExcludedNode', course.id) // in init or expand loop, layer is uncheck when added
|
||||
dispatch('addLinkFromPersonsToCourse', course)
|
||||
commit('updateHack')
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -395,6 +405,7 @@ const store = createStore({
|
||||
commit('markRelationshipLoaded', relationship.id)
|
||||
commit('addRelationship', relationship)
|
||||
dispatch('addLinkFromRelationship', relationship)
|
||||
commit('updateHack')
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -441,6 +452,7 @@ const store = createStore({
|
||||
// in init or expand loop, exclude too missing persons if parent have been excluded
|
||||
commit('addExcludedNode', person.id)
|
||||
}
|
||||
commit('updateHack')
|
||||
},
|
||||
|
||||
/**
|
||||
@ -513,6 +525,7 @@ const store = createStore({
|
||||
commit('removeExcludedNode', person.id)
|
||||
})
|
||||
}
|
||||
commit('updateHack')
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user