Merge pull request #137 from Darkproduct/feature/dot-file-options

Update visjs and Fix #128 and #129
WestHealth · Apr 14, 2022 · 6438912 · 6438912
2 parents e081bcc + f58091d
commit 6438912
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 150 deletions.
diff --git a/notebooks/dot.html b/notebooks/dot.html
@@ -0,0 +1,84 @@
+<html>
+<head>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>
+<center>
+<h1></h1>
+</center>
+
+<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
+<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
+
+<style type="text/css">
+
+        #mynetwork {
+            width: 500px;
+            height: 500px;
+            background-color: #ffffff;
+            border: 1px solid lightgray;
+            position: relative;
+            float: left;
+        }
+
+
+
+
+
+
+</style>
+
+</head>
+
+<body>
+<div id = "mynetwork"></div>
+
+
+<script type="text/javascript">
+
+    // initialize global variables.
+    var edges;
+    var nodes;
+    var network; 
+    var container;
+    var options, data;
+
+
+    // This method is responsible for drawing the graph, returns the drawn network
+    function drawGraph() {
+        var container = document.getElementById('mynetwork');
+
+
+
+        var DOTstring = "digraph {     a [label=12, entity_id=12, entity_class=\"truck\"];     b [label=7, entity_id=7,entity_class=\"bike\"];     c [label=3, entity_id=3, entity_class=\"car\"];     a -> b[label=\"solid edge\"];                          a -> b [label=\"dashed edge\", style=dashed];      a -> c [label=\"dashed edge\", style=dashed];      a -> c [label=\"dotted edge\", style=dotted];       }";
+        data = vis.network.dotparser.DOTToGraph(DOTstring);
+
+        var options = data.options;
+        options = Object.assign(options, {
+            nodes: {
+                shape: "dot"
+            },
+        });
+
+        options = Object.assign(options, {"physics": {"enabled": true, "barnesHut": {"theta": 0.5, "gravitationalConstant": -2000, "centralGravity": 0.3, "springLength": 200, "springConstant": 0.04, "damping": 0.09, "avoidOverlap": 0}, "maxVelocity": 50, "minVelocity": 0.1, "solver": "barnesHut", "stabilization": {"enabled": true, "iterations": 1000, "updateInterval": 100, "onlyDynamicEdges": false, "fit": true}}})
+
+
+
+
+
+
+        network = new vis.Network(container, data, options);
+
+
+
+
+
+
+        return network;
+
+    }
+
+    drawGraph();
+
+</script>
+</body>
+</html>
diff --git a/notebooks/example.html b/notebooks/example.html
diff --git a/notebooks/example.ipynb b/notebooks/example.ipynb
@@ -6,6 +6,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "import sys\n",
+    "sys.path.append('../')\n",
     "from pyvis.network import Network"
    ]
   },
@@ -31,12 +33,11 @@
        "            src=\"example.html\"\n",
        "            frameborder=\"0\"\n",
        "            allowfullscreen\n",
-       "            \n",
        "        ></iframe>\n",
        "        "
       ],
       "text/plain": [
-       "<IPython.lib.display.IFrame at 0x7f8822f3c490>"
+       "<IPython.lib.display.IFrame at 0x7fbe1d273d30>"
       ]
      },
      "execution_count": 2,
@@ -58,6 +59,78 @@
     "g.show(\"example.html\")"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Dot File example"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"500px\"\n",
+       "            height=\"500px\"\n",
+       "            src=\"dot.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x7fbe3d2ead00>"
+      ]
+     },
+     "execution_count": 9,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "h = Network(notebook=True)\n",
+    "h.from_DOT(\"test.dot\")\n",
+    "\n",
+    "# All properties have to be enclosed by double quotes and \n",
+    "# there and there must be no comma at the end of a list.\n",
+    "# See https://visjs.github.io/vis-network/docs/network/ for all options\n",
+    "h.set_options(\"\"\"\n",
+    "var options = {\n",
+    "    \"physics\": {\n",
+    "        \"enabled\": true,\n",
+    "        \"barnesHut\": {\n",
+    "            \"theta\": 0.5,\n",
+    "            \"gravitationalConstant\": -2000,\n",
+    "            \"centralGravity\": 0.3,\n",
+    "            \"springLength\": 200,\n",
+    "            \"springConstant\": 0.04,\n",
+    "            \"damping\": 0.09,\n",
+    "            \"avoidOverlap\": 0\n",
+    "        },\n",
+    "        \"maxVelocity\": 50,\n",
+    "        \"minVelocity\": 0.1,\n",
+    "        \"solver\": \"barnesHut\",\n",
+    "        \"stabilization\": {\n",
+    "            \"enabled\": true,\n",
+    "            \"iterations\": 1000,\n",
+    "            \"updateInterval\": 100,\n",
+    "            \"onlyDynamicEdges\": false,\n",
+    "            \"fit\": true\n",
+    "        }\n",
+    "    }\n",
+    "}\n",
+    "\"\"\")\n",
+    "h.show(\"dot.html\")"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -67,7 +140,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 10,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -76,7 +149,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 11,
    "metadata": {
     "scrolled": false
    },
@@ -91,15 +164,14 @@
        "            src=\"example.html\"\n",
        "            frameborder=\"0\"\n",
        "            allowfullscreen\n",
-       "            \n",
        "        ></iframe>\n",
        "        "
       ],
       "text/plain": [
-       "<IPython.lib.display.IFrame at 0x7f88200abe20>"
+       "<IPython.lib.display.IFrame at 0x7f3ef910af40>"
       ]
      },
-     "execution_count": 4,
+     "execution_count": 11,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -403,7 +475,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.7"
+   "version": "3.8.10"
   }
  },
  "nbformat": 4,

diff --git a/notebooks/test.dot b/notebooks/test.dot
@@ -0,0 +1,9 @@
+digraph {
+    a [label=12, entity_id=12, entity_class="truck"];
+    b [label=7, entity_id=7,entity_class="bike"];
+    c [label=3, entity_id=3, entity_class="car"];
+    a -> b[label="solid edge"];                     
+    a -> b [label="dashed edge", style=dashed]; 
+    a -> c [label="dashed edge", style=dashed]; 
+    a -> c [label="dotted edge", style=dotted];      
+}
diff --git a/pyvis/options.py b/pyvis/options.py
@@ -55,8 +55,8 @@ def __repr__(self):
             return str(self.__dict__)
 
         def __init__(self):
-            self.enabled = False
-            self.type = "continuous"
+            self.enabled = True
+            self.type = "dynamic"
 
     class Color(object):
         """

diff --git a/pyvis/templates/template.html b/pyvis/templates/template.html
@@ -1,7 +1,7 @@
 <html>
 <head>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>
 <center>
 <h1>{{heading}}</h1>
 </center>
@@ -155,17 +155,17 @@ <h1>{{heading}}</h1>
         {% if use_DOT %}
 
         var DOTstring = "{{dot_lang|safe}}";
-        var parsedData = vis.network.convertDot(DOTstring);
-        
-        data = {
-          nodes: parsedData.nodes,
-          edges: parsedData.edges
-        }
-
-        var options = parsedData.options;
-        options.nodes = {
-            shape: "dot"
-        }
+        data = vis.network.dotparser.DOTToGraph(DOTstring);
+
+        var options = data.options;
+        options = Object.assign(options, {
+            nodes: {
+                shape: "dot"
+            },
+        });
+        {% if options %}
+        options = Object.assign(options, {{options|safe}})
+        {% endif %}
 
         {% else %}