Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 16:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

visgraph: try to remove folded person nodes when layer is unchecked (wip)

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-11-03 23:31:32 +01:00
parent 5d7f4bde1d
commit 19badc0062
3 changed files with 239 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,7 +111,7 @@ import { mapState, mapGetters } from "vuex"
import Modal from 'ChillMainAssets/vuejs/_components/Modal'
import VueMultiselect from 'vue-multiselect'
import { getRelationsList, postRelationship } from "./api";
import { adapt2vis, splitId } from "./vis-network";
import { splitId } from "./vis-network";
export default {
name: "App",
@@ -142,11 +142,12 @@ export default {
computed: {
...mapGetters(['nodes', 'edges']),
...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
// not used 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
// not used
'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
]),
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
@@ -154,12 +155,12 @@ export default {
},
refreshNetwork() {
console.log('--- refresh network')
//console.log('--- refresh network')
window.network.setData(this.visgraph_data)
},
legendLayers() {
console.log('--- refresh legend')
//console.log('--- refresh legend')
return [
...this.households,
...this.courses
@@ -167,7 +168,7 @@ export default {
},
rebuildCheckedLayers() {
console.log('--- rebuild checked Layers')
//console.log('--- rebuild checked Layers')
this.checkedLayers = []
let layersDisplayed = [
...this.nodes.filter(n => n.id.startsWith('household')),
@@ -215,7 +216,7 @@ export default {
eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
},
mounted() {
console.log('=== mounted: init graph')
//console.log('=== mounted: init graph')hill
this.initGraph()
this.listenOnGraph()
this.getRelationsList()
@@ -235,24 +236,30 @@ export default {
}
let nodeType = splitId(data.nodes[0], 'type')
switch (nodeType) {
case 'person':
let person = this.nodes.filter(n => n.id === data.nodes[0])[0]
console.log('@@@@@@@@ event on selected Person Node @@@@@@@@', person.id, person)
console.log('@@@@@@@@ event on selected Person Node @@@@@@@@', person.id)
if (person.label === null) {
this.$store.commit('unfoldPerson', person)
this.forceUpdateComponent()
}
break
case 'household':
let household = this.nodes.filter(n => n.id === data.nodes[0])[0]
console.log('######## event on selected Household Node ########', household.id, household)
console.log('######## event on selected Household 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, course)
console.log('&&&&&&&& event on selected AccompanyingCourse Node &&&&&&&&', course.id)
this.$store.dispatch('unfoldPersonsByCourse', course)
this.forceUpdateComponent()
break
default:
throw 'this node type is undefined'
}
@@ -265,7 +272,7 @@ export default {
*/
},
forceUpdateComponent() {
console.log('forceUpdateComponent')
//console.log('!! forceUpdateComponent !!')
this.$forceUpdate()
this.refreshNetwork
},
@@ -280,14 +287,14 @@ export default {
}
},
addLayer(id) {
console.log('+ addLayer', id)
//console.log('+ addLayer', id)
this.checkedLayers.push(id)
this.$store.commit('removeExcludedNode', id)
this.$store.dispatch('removeExcludedNode', id)
},
removeLayer(id) {
console.log('- removeLayer', id)
//console.log('- removeLayer', id)
this.checkedLayers = this.checkedLayers.filter(i => i !== id)
this.$store.commit('addExcludedNode', id)
this.$store.dispatch('addExcludedNode', id)
},
addRelationshipModal(edgeData) {
@@ -327,15 +334,15 @@ export default {
},
getRelationsList() {
console.log('fetch relationsList')
//console.log('fetch relationsList')
return getRelationsList().then(relations => new Promise(resolve => {
console.log('+ relations list', relations.results.length)
//console.log('+ relations list', relations.results.length)
this.relations = relations.results.filter(r => r.isActive === true)
resolve()
})).catch()
},
customLabel(value) {
console.log('customLabel', value)
//console.log('customLabel', value)
return (value.title && value.reverseTitle) ? `${value.title.fr} ↔ ${value.reverseTitle.fr}` : ''
},
getPerson(idtext) {
@@ -353,7 +360,7 @@ export default {
)
.then(relationship => new Promise(resolve => {
console.log('post response', relationship)
this.$store.dispatch('addLinkFromRelationship', adapt2vis(relationship))
this.$store.dispatch('addLinkFromRelationship', relationship)
this.modal.showModal = false
this.resetForm()
resolve()
@@ -370,7 +377,7 @@ export default {
return patchRelationship(relationship)
.then(response => new Promise(resolve => {
console.log('patch response', response)
this.$store.dispatch('updateLinkFromRelationship', adapt2vis(response))
this.$store.dispatch('updateLinkFromRelationship', response)
this.modal.showModal = false
this.resetForm()
resolve()