No labels on edges after loading from json

[AbeHandler]

I try to load this json:

{
  "edges": [
    {
      "source": "1",
      "target": "2",
      "id": "5",
      "label": "Hey",
      "color": "red"
    },
    {
      "source": "2",
      "target": "3",
      "id": "6",
      "label": "There"
    }
  ],
  "nodes": [
    {
      "label": "Sciences De La Terre",
      "x": 1412.2230224609375,
      "y": -2.055976390838623,
      "id": "1",
      "color": "#ccc",
      "size": 8.540210723876953
    },
    {
      "label": "Champ",
      "x": -933.5524291992188,
      "y": 239.07545471191406,
      "id": "2",
      "color": "#ccc",
      "size": 4.0
    },
    {
      "label": "Cap Nord",
      "x": -693.8167724609375,
      "y": -305.88018798828125,
      "id": "3",
      "color": "rgb(0,204,204)",
      "size": 6.837328910827637
    }
  ]
}

with...

sigma.parsers.json('data/arctic.json', {
  container: 'graph-container'
});

The nodes render correctly, but the edge labels do not. I know that you can add edges like this:

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),
    size: Math.random(),
    color: '#ccc',
    type: ['line', 'curve', 'arrow', 'curvedArrow'][Math.random() * 4 | 0]
  });

But is it possible to load the edge labels from JSON?

[ricardojmendez]

Running into this same issue - the type seems to be ignored when loading from json. Did you ind a workaround?

[Yomguithereal]

Are you using the edgeLabel plugin? Normally, nothing should differ between loading a json and loading the graph manually in the code.

[ricardojmendez]

Testing further, the difference happens on the sigma constructor. If the map parameter is sent as on the main site's example:

{
    container: 'graph-container',
    type: 'canvas',        
    settings: {
      defaultNodeColor: '#ec5148'
    }
}

the graph is rendered but the edge settings are not applied. If instead we send a renderer parameter:

{
    renderer: {              
        container: document.getElementById("graph-container"),
        type: 'canvas'
    },
    settings: {
      defaultNodeColor: '#ec5148'
    }
}

then the edge settings are indeed respected. It appears to be the missing {renderer: { type: 'canvas'} } that does it.

(Removed my previous intermediate comment to avoid having someone else who's looking into this get sidetracked)

[Yomguithereal]

@ricardojmendez, if I record correctly, the edge labels do not work with webgl currently and only with canvas. So yes, it seems that your first example does not register the renderer correctly as a canvas renderer. I do not remember the polymorphism you show in your first example but I guess it should be correct since shown on the documentation. There is something fishy here with the constructor indeed.

As a dirty workaround you can force sigma to use the canvas renderer by default by doing this:

sigma.renderers.def = sigma.renderers.canvas;

[ricardojmendez]

Hi @Yomguithereal,

Thanks. I worked around it changing the parameter for the parser to include the renderer map.

To clarify, I'm not 100% the constructor does support passing type as a outside of the renderer. It does support passing container as a name.

Where things might get confusing for new users is that the default example is passing:

{
    container: 'graph-container',
    settings: {
      defaultNodeColor: '#ec5148'
    }
}

Where the confusion might come for new users is that one can't just pass a renderer map with the type - this is an invalid combination:

{
    container: 'graph-container',
    renderer: {              
        type: 'canvas'
    },
    settings: {
      defaultNodeColor: '#ec5148'
    }
}

Perhaps a note stating on the README.md for edgeLabels stating that webgl is not supported, and that it must be explicitly set to canvas, would help newcomers.

Seems like this issue can be closed, since it's down to a capability misunderstanding (@AbeHandler's original example also did not explicitly state that canvas should be used).

[Anup1993]

how to add tooltips to this
doc1.txt

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.