From 2a86fd12d7a0e0f2e97eebdede5541d5538991ac Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Tue, 26 Oct 2021 21:29:17 +0200 Subject: [PATCH] vue_visgraph: add checkbox legend to enable/disable layers --- .../Resources/public/vuejs/VisGraph/App.vue | 104 +++++++++++++----- .../Resources/public/vuejs/VisGraph/store.js | 17 ++- .../public/vuejs/VisGraph/vis-network.js | 10 +- 3 files changed, 97 insertions(+), 34 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue index d0e78bfaa..cb9e07716 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue @@ -1,30 +1,28 @@ @@ -37,12 +35,19 @@ export default { name: "App", data() { return { - container: '' + container: '', + checkedLayers: [], } }, computed: { - //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds', 'courseLoadedIds']), ...mapGetters(['nodes', 'edges']), + ...mapState(['households', 'courses', + 'excludedNodesIds' + //'persons', + //'relationships', + //'householdLoadingIds', + //'courseLoadedIds', + ]), visgraph_data() { console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges') @@ -51,10 +56,36 @@ export default { edges: this.edges } }, + refreshNetwork() { // B console.log('--- refresh network') window.network.setData(this.visgraph_data) + }, + + legendLayers() { + console.log('--- refresh legendLayers') + return [ + ...this.households, + ...this.courses + ] + }, + + rebuildCheckedLayers() { + console.log('-*- rebuild checked Layers Arrays from graph nodes') + this.checkedLayers = [] + let layersDisplayed = [ + ...this.nodes.filter(n => n.id.startsWith('household')), + ...this.nodes.filter(n => n.id.startsWith('accompanying')) + ] + layersDisplayed.forEach(layer => { + this.checkedLayers.push(layer.id) + }) + }, + + checkedLayers() { // required to refresh data checkedLayers + return this.checkedLayers } + }, mounted() { console.log('=== mounted: init graph') @@ -63,7 +94,6 @@ export default { methods: { initGraph() { this.container = document.getElementById('visgraph') - // Instanciate vis objects in window variables, see vis-network.js window.network = new vis.Network(this.container, this.visgraph_data, window.options ) // A }, @@ -71,7 +101,29 @@ export default { console.log('forceUpdateComponent - method 3') this.$forceUpdate() this.refreshNetwork - } + }, + + toggleLayer(value) { + let id = value.target.value + console.log('--> toggleLayer', this.checkedLayers) + if (this.checkedLayers.includes(id)) { + this.removeLayer(id) + } else { + this.addLayer(id) + } + console.log('<-- toggleLayer after', this.checkedLayers) + }, + addLayer(id) { + console.log('+ add Layer', id) + this.checkedLayers.push(id) + this.$store.commit('removeExcludedNode', id) + }, + removeLayer(id) { + console.log('- remove Layer', id) + this.checkedLayers = this.checkedLayers.filter(i => i !== id) + this.$store.commit('addExcludedNode', id) + }, + } /* TODO / TO CHECK / TO UNDERSTAND @@ -98,14 +150,6 @@ div#visgraph { } div#visgraph-legend { div.post-menu.legend { - ul.legend-list { - padding-left: 0; - list-style-type: square; - li::marker { - color: red; - background-color: cyan; - } - } } } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index a06e6e55c..b4938ff4a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js @@ -12,7 +12,8 @@ const store = createStore({ courses: [], relationships: [], householdLoadingIds: [], - courseLoadedIds: [] + courseLoadedIds: [], + excludedNodesIds: [] }, getters: { nodes(state) { @@ -26,6 +27,10 @@ const store = createStore({ state.courses.forEach(c => { nodes.push(c) }) + // except excluded nodes (unchecked layers) + state.excludedNodesIds.forEach(excluded => { + nodes = nodes.filter(n => n.id !== excluded) + }) return nodes }, edges(state) { @@ -56,7 +61,7 @@ const store = createStore({ state.courses.push(adapt2vis(course)) }, addRelationship(state, relationship) { - console.log('+ addRelationship', relationship) + console.log('+ addRelationship from', relationship.from, 'to', relationship.to) state.relationships.push(relationship) }, markHouseholdLoading(state, id) { @@ -72,6 +77,12 @@ const store = createStore({ unmarkCourseLoaded(state, id) { state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id) }, + addExcludedNode(state, id) { + state.excludedNodesIds.push(id) + }, + removeExcludedNode(state, id) { + state.excludedNodesIds = state.excludedNodesIds.filter(e => e !== id) + } }, actions: { /** @@ -185,7 +196,7 @@ const store = createStore({ arrows: 'to', color: 'orange', font: { color: 'orange' }, - label: 'usager', + label: 'concerné', //group: 'link_person_course', }) }) 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 cc0ef717a..bfdc74991 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js @@ -10,6 +10,14 @@ import { visMessages } from './i18n' window.options = { locale: 'fr', locales: visMessages, + /* + configure: { + enabled: true, + filter: 'nodes,edges', + container: undefined, + showButton: true + }, + */ manipulation: { enabled: true, initiallyActive: true, @@ -63,7 +71,7 @@ window.options = { physics: true, font: { color: '#b0b0b0', - size: 9, + size: 9, face: 'arial', background: 'none', strokeWidth: 2, // px