visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
2.99k stars 365 forks source link

vis.parseDOTNetwork() doesn't handle default label of \N to mean use the node's name. #2143

Open donno opened 5 months ago

donno commented 5 months ago

The vis.parseDOTNetwork() function does not take into account the default label of "\N" which means use the name/ID of the label instead. See GraphViz documentation for the label attribute for more.

This results in every node ending up with the label that is \N.

This is problematic because if the input DOT network is run through dot before being parsed it ends up with node [label="\N"];

System Details

Operating System Microsoft Windows 10 Version 22H2 (OS Build 19045.4170)

Browsers

Minimal code example

Example on JSBin can be seen here: https://jsbin.com/robupadela/1/edit?html,js,output

The example uses the version from GitHub as per your CodePen examples.

It can be switched to https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.9/standalone/umd/vis-network.min.js to be the old version.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Repo</title>
  <script type="text/javascript"
    src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<p>
  Demonstration of the lack of support for a label with "\N" in DOT language parser.
  This syntax means that the name/ID of the node should be used as the label.
  See <a href="https://graphviz.org/docs/attrs/label/">label documentation</a>.
</p>
<div id="mynetwork"></div>
</body>
</html>

JavaScript

var container = document.getElementById("mynetwork");
var dot =
  "dinetwork {node[label=\"\\N\"]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }";
var data = vis.parseDOTNetwork(dot);
var network = new vis.Network(container, data);

Work around

            var parsed = vis.parseDOTNetwork(dotString);
            parsed.nodes.forEach(element => {
              // As per https://graphviz.org/docs/attrs/label/ a value of
              // \N is meant to mean use the node's ID or name as the label.
              if (element.label === "\\N")
              {
                element.label = element.id;
              }
            });