From 0b7c2323ad0ead02162285e52a1e87e2e4f76fe6 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Wed, 18 Aug 2021 21:40:56 +0200
Subject: [PATCH] Use code splitting import() for vis-network

---
 editor/src/graph.js | 98 ++++++++++++++++++++++++---------------------
 1 file changed, 53 insertions(+), 45 deletions(-)

diff --git a/editor/src/graph.js b/editor/src/graph.js
index a817738..12003d5 100644
--- a/editor/src/graph.js
+++ b/editor/src/graph.js
@@ -1,59 +1,67 @@
-import {DataSet} from "vis-data/peer";
-import {Network} from "vis-network/peer";
+// import {DataSet} from "vis-data/peer";
+// import {Network} from "vis-network/peer";
 import $ from 'jquery';
 
 function wikiGraph(selector, options) {
-    $(selector).each(function (i, el) {
-        let $el = $(el)
-        var nodeName = $el.data('name')
-        fetch('/api/graph?name=' + nodeName)
-            .then(res => res.json())
-            .then(graph => {
-                var nodes = new DataSet(graph.nodes)
-                var edges = new DataSet(graph.edges)
+    Promise.all([
+        import("vis-data/peer"),
+        import("vis-network/peer"),
+    ]).then(imports => {
+        const DataSet = imports[0].DataSet
+        const Network = imports[1].Network
 
-                var data = {
-                    nodes: nodes,
-                    edges: edges
-                };
+        $(selector).each(function (i, el) {
+            let $el = $(el)
+            var nodeName = $el.data('name')
+            fetch('/api/graph?name=' + nodeName)
+                .then(res => res.json())
+                .then(graph => {
+                    var nodes = new DataSet(graph.nodes)
+                    var edges = new DataSet(graph.edges)
 
-                var options = {
-                    edges: {
-                        arrows: 'to',
-                        color: {
-                            highlight: 'green'
-                        },
-                        chosen: {
-                            edge: function (values, id, selected, hovering) {
-                                if (this.from === 1) {
-                                    values.color = 'blue';
+                    var data = {
+                        nodes: nodes,
+                        edges: edges
+                    };
+
+                    var options = {
+                        edges: {
+                            arrows: 'to',
+                            color: {
+                                highlight: 'green'
+                            },
+                            chosen: {
+                                edge: function (values, id, selected, hovering) {
+                                    if (this.from === 1) {
+                                        values.color = 'blue';
+                                    }
                                 }
                             }
-                        }
-                    },
+                        },
 
-                    nodes: {
-                        shape: 'dot',
-                        size: 15,
-                        font: {
-                            background: 'white'
+                        nodes: {
+                            shape: 'dot',
+                            size: 15,
+                            font: {
+                                background: 'white'
+                            }
+                        },
+                        layout: {
+                            improvedLayout: true
                         }
-                    },
-                    layout: {
-                        improvedLayout: true
-                    }
-                };
+                    };
 
-                var network = new Network(el, data, options);
-                network.on('doubleClick', function (props) {
-                    if (props.nodes.length) {
-                        let nodeId = props.nodes[0]
-                        let node = nodes.get(nodeId)
-                        // TODO: Reload directly in this same page
-                        window.location.href = '/edit/' + node.label
-                    }
+                    var network = new Network(el, data, options);
+                    network.on('doubleClick', function (props) {
+                        if (props.nodes.length) {
+                            let nodeId = props.nodes[0]
+                            let node = nodes.get(nodeId)
+                            // TODO: Reload directly in this same page
+                            window.location.href = '/edit/' + node.label
+                        }
+                    })
                 })
-            })
+        })
     })
 }