Curved Arrow graphs are broken when using parsers.gexf() #544

Closed
alexcritschristoph opened this Issue Apr 16, 2015 · 5 comments

Projects

None yet

2 participants

@alexcritschristoph

Hello,

I compiled the most recent development version of sigma JS, which incorporates new settings like defaultEdgeType: 'curvedArrow'. These features work and render fine when building graphs from JSON objects, as is the default. I've run into the issue with the below code that when calling

sigma.parsers.gexf(
      data,
  { container: document.getElementById('container') }  // sigma instance we created in initialize
    );

The curvedArrow setting then seem to be removed from the graph (the graph displays as an undirected, default straight edge graph). Is this a bug or expected behavior? Should the settings be re-applied after running the update?

My full code is below.

Thanks!
Alex

<html>
<head>
<style type="text/css">
  #container {
    max-width: 400px;
    height: 400px;
    margin: auto;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="./sigma.min.js"></script>
<script src="./plugins/sigma.parsers.json.min.js"></script>
<script src="./plugins/sigma.parsers.gexf.min.js"></script>


<script>
/**
 * This example shows the available edge label renderers for the canvas
 * renderer.
 */
var i,
    s,
    N = 10,
    E = 50,
    g = {
      nodes: [],
      edges: []
    };
// Generate a random graph:
for (i = 0; i < N; i++)
  g.nodes.push({
    id: 'n' + i,
    label: 'Node ' + i,
    x: Math.random(),
    y: Math.random(),
    size: Math.random(),
    color: '#666'
  });
for (i = 0; i < E; i++)
  g.edges.push({
    id: 'e' + i,
    label: 'Edge ' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
    color: '#ccc',
  });
// Instantiate sigma:
s = new sigma({
  renderer: {
    container: document.getElementById('container'),
    type: 'canvas'
  },
  settings: {
    edgeLabelSize: 'proportional',
    minArrowSize: '7',
    defaultEdgeType: 'curvedArrow'
  }
});

var parser = new DOMParser();
    var data = parser.parseFromString("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<gexf xmlns=\"http://www.gexf.net/1.2draft\" xmlns:viz=\"http://www.gexf.net/1.1draft/viz\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd\" version=\"1.2\">\n  <meta lastmodifieddate=\"2015-04-16\">\n    <creator>NodosChile</creator>\n    <description>A graph file writing in R using \"rgexf\"</description>\n    <keywords>gexf graph, NodosChile, R, rgexf</keywords>\n  </meta>\n  <graph mode=\"static\" defaultedgetype=\"curvedArrow\">\n    <nodes>\n      <node id=\"Alice\" label=\"Alice\">\n        <viz:color r=\"212\" g=\"71\" b=\"183\" a=\"0.852147503872402\"/>\n        <viz:position x=\"-4.20507650976917\" y=\"0.313244055019271\" z=\"0\"/>\n        <viz:size value=\"200\"/>\n      </node>\n      <node id=\"Bob\" label=\"Bob\">\n        <viz:color r=\"201\" g=\"73\" b=\"68\" a=\"0.915616617188789\"/>\n        <viz:position x=\"-6.30423802463879\" y=\"0.978565790862279\" z=\"0\"/>\n        <viz:size value=\"200\"/>\n      </node>\n      <node id=\"Cecil\" label=\"Cecil\">\n        <viz:color r=\"55\" g=\"242\" b=\"189\" a=\"0.802343390183523\"/>\n        <viz:position x=\"-6.07340510041728\" y=\"-1.2232299807912\" z=\"0\"/>\n        <viz:size value=\"200\"/>\n      </node>\n      <node id=\"David\" label=\"David\">\n        <viz:color r=\"218\" g=\"148\" b=\"71\" a=\"0.734616136993282\"/>\n        <viz:position x=\"-4.84725238189874\" y=\"2.64541350310992\" z=\"0\"/>\n        <viz:size value=\"200\"/>\n      </node>\n      <node id=\"Esmeralda\" label=\"Esmeralda\">\n        <viz:color r=\"231\" g=\"186\" b=\"117\" a=\"0.761727247037925\"/>\n        <viz:position x=\"-1.85079315049389\" y=\"-0.432937637129655\" z=\"0\"/>\n        <viz:size value=\"200\"/>\n      </node>\n    </nodes>\n    <edges>\n      <edge id=\"0\" source=\"Bob\" target=\"Alice\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n      <edge id=\"1\" source=\"Cecil\" target=\"Bob\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n      <edge id=\"2\" source=\"Cecil\" target=\"Alice\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n      <edge id=\"3\" source=\"David\" target=\"Alice\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n      <edge id=\"4\" source=\"David\" target=\"Bob\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n      <edge id=\"5\" source=\"Esmeralda\" target=\"Alice\" value=\"arrow\" weight=\"1\">\n        <viz:size value=\"100\"/>\n      </edge>\n    </edges>\n  </graph>\n</gexf>\n", "application/xml");


sigma.parsers.gexf(
      data,
  { container: document.getElementById('container') }  // sigma instance we created in initialize
    );
</script>
</body>
</html>
@Yomguithereal
Collaborator

Hello @alexcritschristoph. This is weird indeed. I start investigating.

@Yomguithereal
Collaborator

Ok, I found the problem. The gexf parser sets the edge's type to be the gexf's one (like directed or undirected) and because the word type has a different meaning for both, it messes things up.

@Yomguithereal Yomguithereal added a commit that closed this issue Apr 17, 2015
@Yomguithereal Yomguithereal Fixing edge type for gexf parser plugin.
The type property had different meaning for gexf and sigma, type is now renamed to direction.
Fix #544
a8c9cdb
@alexcritschristoph

Hey @Yomguithereal - thanks for your fast reply- I compiled the latest version of the repo and replaced my sigma.js and my sigma.parsers.gexf.min.js files, but unfortunately, I'm still getting the same issue. Attached is what the graph looks like for me (with the noticeable lack of curved edges and arrows, which I am easily able to replicate in a non-gexf graph)- does it look the same for you?
Thanks!
Alex

screenshot from 2015-04-17 20 19 16

@Yomguithereal
Collaborator

Hello @alexcritschristoph. Your example does not work because you do not pass the correct instance of sigma to the parser (in your example you actually create two distinct sigma instances):

You should either do

sigma.parsers.gexf(
      data,
      // passing your instance
      s
    );

Or change the settings passed to the parser.

@alexcritschristoph

Got it, thanks!

@styu styu added a commit to styu/sigma.js that referenced this issue Nov 2, 2015
@Yomguithereal @styu Yomguithereal + styu Fixing edge type for gexf parser plugin.
The type property had different meaning for gexf and sigma, type is now renamed to direction.
Fix #544
d8d57a2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment