Styled edges in DOT file don't show up with pyvis but do work with vis network.

[tuschla]

I'm having an issue with the styling of my edges in a DOT not being represented when visualizing the graph with pyvis.
I am just reading the DOT with the from_DOT method but the edges with styling [style="dotted"] or [style="dashed"] have the same appearance as the other (solid) edges.

Of course I tried adding each edge to the graph with add_edge and then do the styling with something like dashes=1 for dashed edges and dashes=[1, 6] for dotted edges but that's not really the most elegant solution considering the from_DOT method already exists and the edge styling works just fine with my DOT files when I play around with vis network.

DOT file:

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];      
}

This is what I get with pyvis:

Here is the relevant generated js code:

    // 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 simple_graph {     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];       }";
        var parsedData = vis.network.convertDot(DOTstring);
        
        data = {
          nodes: parsedData.nodes,
          edges: parsedData.edges
        }
        
        var options = parsedData.options;
        options.nodes = {
            shape: "dot"
        }
        
        network = new vis.Network(container, data, options);

        return network;
    }

    drawGraph();

And this is what vis network draws:

[Darkproduct]

This project uses an very old Version of vis-network. You can solve this by changing the following lines in the template:

pyvis/pyvis/templates/template.html

Lines 3 to 4 in b11d105

	<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>

This will change the vis-network version to the latest release. I tested this with the currently latest version 9.1.0.

If you want the exact version and no updates. Replace @latest with @9.1.0 in the URLs above.

Then you also need to change the parsing function of the DOT file here:

pyvis/pyvis/templates/template.html

Lines 157 to 168 in b11d105

	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"
	}

var DOTstring = "{{dot_lang|safe}}";
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 %}