visgraph: basic styles by groups, initialize legend, etc.

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -1,8 +1,32 @@
 <template>
-   <div id="visgraph"></div>
    <!--
-   <button class="btn btn-outline-primary" @click="refreshNetwork">refresh</button>
    -->
+   <div id="visgraph"></div>
+
+   <teleport to="#visgraph-legend">
+      <div class="my-4 post-menu legend">
+         <h3>Afficher</h3>
+         <div class="list-group">
+            <label class="list-group-item">
+               <input class="form-check-input me-1" type="checkbox" value="">
+               Ménage n°65
+            </label>
+            <label class="list-group-item">
+               <input class="form-check-input me-1" type="checkbox" value="">
+               Parcours n°1615
+            </label>
+            <label class="list-group-item">
+               <input class="form-check-input me-1" type="checkbox" value="">
+               Parcours n°1613
+            </label>
+            <label class="list-group-item">
+               <input class="form-check-input me-1" type="checkbox" value="">
+               Parcours n°1614
+            </label>
+         </div>
+      </div>
+      <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">Rafraîchir</button>
+   </teleport>
 </template>
 
 <script>
@@ -29,7 +53,7 @@ export default {
       },
       refreshNetwork() {  // B
          console.log('--- refresh network')
-         window.network.setData(this.visgraph_data) // <-- Error: [vuex] do not mutate vuex store state outside mutation handlers.
+         window.network.setData(this.visgraph_data)
       }
    },
    mounted() {
@@ -64,7 +88,19 @@ export default {
 <style lang="scss" scoped>
 div#visgraph {
    margin: 2em auto;
-   height: 500px;
+   height: 700px;
-   border: 1px solid lightgray;
+   border: 0px solid lightgray;
+}
+div#visgraph-legend {
+   div.post-menu.legend {
+      ul.legend-list {
+         padding-left: 0;
+         list-style-type: square;
+         li::marker {
+            color: red;
+            background-color: cyan;
+         }
+      }
+   }
 }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js

@@ -6,7 +6,8 @@ const visMessages = {
             'Course': 'Parcours',
             'Household': 'Ménage',
         }
-    }
+    },
+    en: {}
 }
 
 //Object.assign(visMessages.fr, personMessages.fr);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js

@@ -74,10 +74,19 @@ const store = createStore({
         },
     },
     actions: {
+        /**
+         *  1) Add a person in state
+         *  @param Person person
+         */
         addPerson({ commit, dispatch }, person) {
             commit('addPerson', person)
             dispatch('fetchInfoForPerson', person)
         },
+
+        /**
+         *  2) Fetch infos for this person (hub)
+         *  @param Person person
+         */
         fetchInfoForPerson({ dispatch }, person) {
             dispatch('fetchHouseholdForPerson', person)
             dispatch('fetchCoursesByPerson', person)
@@ -85,8 +94,9 @@ const store = createStore({
         },
 
         /**
-         *  Fetch person current household if it is not already loading
+         *  3) Fetch person current household (if it is not already loading)
          *  check first isHouseholdLoading to fetch household once
+         *  @param Person person
          */
         fetchHouseholdForPerson({ commit, getters, dispatch }, person) {
             console.log('  isHouseholdLoading ?', getters.isHouseholdLoading(person.current_household_id))
@@ -104,6 +114,11 @@ const store = createStore({
                 })
             }
         },
+
+        /**
+         *  4) Add an edge for each household member (household -> person)
+         *  @param Household household
+         */
         addLinkFromPersonsToHousehold({ commit }, household) {
             const members = household.members.filter(v => household.current_members_id.includes(v.id))
             members.forEach(m => {
@@ -111,14 +126,20 @@ const store = createStore({
                 commit('addRelationship', {
                     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: `p${m.person.id}-h${m.person.current_household_id}`,
+                    arrows: 'from',
+                    color: 'pink',
+                    font: { color: 'pink' },
+                    label: 'enfant',
+                    ////group: 'link_person_household',
                 })
             })
 
         },
 
         /**
-         *  Fetch person current AccompanyingCourses
+         *  5) Fetch AccompanyingCourses for the person
+         *  @param Person person
          */
         fetchCoursesByPerson({ dispatch }, person) {
             //console.log('fetchCoursesByPerson', person)
@@ -130,6 +151,11 @@ const store = createStore({
                 }))
 
         },
+
+        /**
+         *  6) Add each distinct course
+         *  @param array courses
+         */
         addCourse({ commit, getters, dispatch }, courses) {
             //console.log('addCourse', courses)
             let currentCourses = courses.filter(c => c.closingDate === null)
@@ -143,6 +169,11 @@ const store = createStore({
                 }
             })
         },
+
+        /**
+         *  7) Add an edge for each course participation (course <- person)
+         *  @param AccompanyingCourse course
+         */
         addLinkFromPersonsToCourse({ commit }, course) {
             let currentParticipations = course.participations.filter(p => p.endDate === null)
             console.log('  participations', currentParticipations.length)
@@ -150,7 +181,12 @@ const store = createStore({
                 commit('addRelationship', {
                     from: `${p.person.type}_${p.person.id}`,
                     to: `${course.id}`,
-                    id: `p${p.person.id}-c`+ course.id.split('_')[2]
+                    id: `p${p.person.id}-c`+ course.id.split('_')[2],
+                    arrows: 'to',
+                    color: 'orange',
+                    font: { color: 'orange' },
+                    label: 'usager',
+                    //group: 'link_person_course',
                 })
             })
         },

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

@@ -8,6 +8,8 @@ import { visMessages } from './i18n'
  */
 
 window.options = {
+    locale: 'fr',
+    locales: visMessages,
     manipulation: {
         enabled: true,
         initiallyActive: true,
@@ -20,6 +22,10 @@ window.options = {
             console.log('editNode', nodeData)
             callback(nodeData);
         },
+        deleteNode: function(nodeData, callback) {
+            console.log('deleteNode', nodeData)
+            callback(nodeData);
+        },
         addEdge: function(edgeData, callback) {
             console.log('addEdge', edgeData)
             callback(edgeData);
@@ -28,12 +34,78 @@ window.options = {
             console.log('editNode', edgeData)
             callback(edgeData);
         },
+        deleteEdge: function(edgeData, callback) {
+            console.log('deleteNode', edgeData)
+            callback(edgeData);
+        },
+        controlNodeStyle: { /*
+            shape:'dot',
+            size: 6,
+            color: {
+                background: '#ff0000',
+                border: '#3c3c3c',
+                highlight: {
+                    background: '#07f968',
+                    border: '#3c3c3c'
+                }
+            },
+            borderWidth: 2,
+            borderWidthSelected: 2
+            */
+        }
     },
     nodes: {
-        physics: true
+        physics: true,
+        borderWidth: 1,
+        borderWidthSelected: 3,
     },
     edges: {
-        physics: true
+        physics: true,
+        font: {
+            color: '#b0b0b0',
+            size: 9, 
+            face: 'arial',
+            background: 'none',
+            strokeWidth: 2, // px
+            strokeColor: '#ffffff',
+            align: 'horizontal',
+            multi: false,
+            vadjust: 0,
+        },
+        scaling:{
+            label: true,
+        },
+        smooth: true,
+    },
+    groups: {
+        person: {
+            shape: 'box',
+            shapeProperties: {
+                borderDashes: false,
+                borderRadius: 3,
+            },
+            color: {
+                border: '#b0b0b0',
+                background: 'rgb(193,229,222)',
+                highlight: {
+                    border: '#368d7e',
+                    background: 'rgb(193,229,222)'
+                }
+            }
+        },
+        household: {
+            /*
+            shape: 'dot',
+            */
+            color: 'pink'
+        },
+        accompanying_period: {
+            /*
+            shape: 'triangle',
+            */
+            color: 'orange',
+
+        },
     }
 };
 
@@ -45,6 +117,7 @@ window.network = {};
 *   and add properties needed by vis
 */
 const adapt2vis = (entity) => {
+    entity.group = entity.type
     switch (entity.type) {
         case 'person':
             entity._id = entity.id

src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig

@@ -8,13 +8,11 @@
     <div id="relationship-graph"
         data-persons="{{ persons|e('html_attr') }}">
     </div>
-    {#
-        {{ dump() }}
-    #}
-
 {% endblock %}
 
-{% block block_post_menu %}{% endblock %}
+{% block block_post_menu %}
+    <div id="visgraph-legend"></div>
+{% endblock %}
 
 {% block js %}
     {{ encore_entry_script_tags('vue_visgraph') }}