vue_visgraph: manage vis objects with window variables to avoid conflict between vis and vue

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

@@ -1,8 +1,5 @@
 <template>
    <div id="visgraph"></div>
-   <!--
-   <button class="btn btn-outline-primary" @click="updateNetwork">UPDATE data</button>
-   -->
 </template>
 
 <script>
@@ -13,34 +10,7 @@ export default {
    name: "App",
    data() {
       return {
-         container: '',
+         container: ''
-         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: {
@@ -53,12 +23,10 @@ export default {
             edges: this.edges
          }
       },
-      /*
+      refreshNetwork() {  // B
-      updateNetwork() {
+         console.log('refresh network')
-         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
+         window.network.setData(this.visgraph_data)
-         this.network.setData(this.visgraph_data)
       }
-      */
    },
    mounted() {
       console.log('mounted: init graph')
@@ -67,17 +35,24 @@ export default {
    methods: {
       initGraph() {
          this.container = document.getElementById('visgraph')
-         this.network = new vis.Network(
+
-            this.container,
+         // Instanciate vis objects in window variables, see vis-network.js
-            this.visgraph_data,
+         window.network = new vis.Network(this.container, this.visgraph_data, window.options )  // A
-            this.options
-         )
-         /*{
-            nodes: new vis.DataSet(this.nodes),
-            edges: new vis.DataSet(this.relationships)
-         }*/
       }
    }
+/*
+   TODO / TO CHECK / TO UNDERSTAND
+
+   ///// A
+   new vis.Network(), param 2: why we don't need to instanciate node and edges with new vis.DataSet like in example ?
+   {
+      nodes: new vis.DataSet(this.nodes),
+      edges: new vis.DataSet(this.relationships)
+   }
+   ///// B
+   refreshNetwork() computed: need to watch/listen event to force refreshing ?
+
+*/
 }
 </script>
 

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

@@ -3,16 +3,14 @@ import { store } from "./store.js"
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { visMessages } from './i18n'
 import App from './App.vue'
+import './vis-network'
 
 const i18n = _createI18n(visMessages)
-
 const container = document.getElementById('relationship-graph')
-
 const persons = JSON.parse(container.dataset.persons)
 
 persons.forEach(person => {
     store.dispatch('addPerson', person)
-    //store.dispatch('fetchInfoForPerson', person)
 })
 
 const app = createApp({

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

@@ -0,0 +1,36 @@
+/*
+ * Vis-network initial data/configuration script
+ * Notes:
+ *   Use window.network and window.options to avoid conflict between vue and vis
+ *   cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271
+ */
+
+window.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
+    }
+};
+
+window.network = {};
+