vue_visgraph: add vis manipulation actions and vis styles

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

@@ -1,59 +1,87 @@
 <template>
    <div id="visgraph"></div>
+   <!--
+   <button class="btn btn-outline-primary" @click="updateNetwork">UPDATE data</button>
+   -->
 </template>
 
 <script>
-import vis from 'vis-network/dist/vis-network.min'
+import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
 
 export default {
    name: "App",
    data() {
       return {
-         network: {},
+         container: '',
-         options: {}
+         network: null,
+         options: {
+            manipulation: {
+               enabled: true,
+               initiallyActive: true,
+               addNode: function(nodeData, callback) {
+                  console.log('addNode', nodeData)
+                  nodeData.label = 'hello world';
+                  callback(nodeData);
+               },
+               editNode: function(nodeData, callback) {
+                  console.log('editNode', nodeData)
+                  callback(nodeData);
+               },
+               addEdge: function(edgeData, callback) {
+                  console.log('addEdge', edgeData)
+                  callback(edgeData);
+               },
+               editEdge: function(edgeData, callback) {
+                  console.log('editNode', edgeData)
+                  callback(edgeData);
+               },
+            },
+            nodes: {
+               physics: true
+            }
+         }
       }
    },
    computed: {
       ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
       ...mapGetters(['nodes', 'edges']),
-      getNetwork() {
+      visgraph_data() {
-         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
+         console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
-         this.network.setData({
+         return {
             nodes: this.nodes,
             edges: this.edges
-         })
+         }
-      }, /*
-      getNodes() {
-         console.log('refresh nodes', this.nodes.length)
-         /// BOUM
-         this.network.setData({nodes: this.nodes})
-         return this.nodes
       },
-      getEdges() {
+      /*
-         /// BOUM
+      updateNetwork() {
-         //this.network.setData({edges: this.edges})
+         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
-         return this.edges
+         this.network.setData(this.visgraph_data)
-      }  */
+      }
+      */
+   },
+   mounted() {
+      console.log('mounted: init graph')
+      this.initGraph()
    },
    methods: {
       initGraph() {
-         const container = document.getElementById('visgraph')
+         this.container = document.getElementById('visgraph')
          this.network = new vis.Network(
-            container, {
+            this.container,
-               nodes: new vis.DataSet(this.nodes),
+            this.visgraph_data,
-               edges: new vis.DataSet(this.relationships)
+            this.options
-            }, this.options
          )
+         /*{
+            nodes: new vis.DataSet(this.nodes),
+            edges: new vis.DataSet(this.relationships)
+         }*/
       }
-   },
-   mounted() {
-      console.log('mounted')
-      this.initGraph()
    }
 }
 </script>
 
+<style src="vis-network/dist/dist/vis-network.min.css"></style>
 <style lang="scss" scoped>
 div#visgraph {
    margin: 2em auto;

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

@@ -34,10 +34,12 @@ const store = createStore({
     mutations: {
         addPerson(state, person) {
             person.label = person.text // vis need label
+            person.id = `person_${person.id}`
             state.persons.push(person)
         },
         addHousehold(state, household) {
             household.label = `Ménage n° ${household.id}` // vis need label
+            household.id = `household_${household.id}`
             state.households.push(household)
         },
         markHouseholdLoading(state, id) {