Simple example of showing some elkjs JSON in the browser

[EmilStenstrom]

Is there an example somewhere that can take some elkjs JSON, can render a graph in a browser?

I've found ELK Demonstrators, which includes a (very fancy!) editor that I don't need.

I was hoping for something like:

<script src="elkjs.js></script>
<script src="sprotty.js></script>
<script>
const ELK = require('elkjs')
const elk = new ELK()

const graph = {
  id: "root",
  layoutOptions: { 'elk.algorithm': 'layered' },
  children: [
    { id: "n1", width: 30, height: 30 },
    { id: "n2", width: 30, height: 30 },
    { id: "n3", width: 30, height: 30 }
  ],
  edges: [
    { id: "e1", sources: [ "n1" ], targets: [ "n2" ] },
    { id: "e2", sources: [ "n1" ], targets: [ "n3" ] }
  ]
}

sprotty = sprotty()

elk.layout(graph).then(sprotty.render)
</script>

[spoenemann]

https://github.com/kieler/elk-live/blob/master/client/src/json/elkgraph-to-sprotty.ts

[EmilStenstrom]

@spoenemann Looks like something I need, but I don't understand all the details. Would you mind sharing how to wire this together with elkjs and sprotty too?

[spoenemann]

Maybe something like this (not tested!):

const myGraph = ... // create elkjs graph
const container = ... // create Inversify container, see examples (*)
const transformer = new ElkGraphJsonToSprotty();
const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
modelSource.setModel(transformer.transform(myGraph));

(*) https://github.com/eclipse/sprotty/tree/master/examples

[EmilStenstrom]

Hi! Thanks for attempting to explain, but this is still too high level for me.

I'll see if I can render SVG:s directly from elkjs graphs instead.

[Antony74]

No, sorry, doesn't work.

https://github.com/Antony74/visualizing-graph-data-in-typescript/blob/32dca395e66282f5bb510abea668341b42a95d44/sprotty-example/src/elkSprottyExample.ts

It's just dropping out with no explaination when you call setModel. It doesn't help that elkgraph-to-sprotty.ts is written for an out of date version of the package. I'm afraid Sprotty is one of the more difficult packages I've ever attempted to get started with.