Error creating link dynamically in order-preserving
Closed this issue · 5 comments
I am building an interactive graph builder using KlayJS-D3 library klayjs-d3 version 0.3.5 build 201604271204 and get an error when I try to create links between certain nodes while using the Order-preserving layout.
In screen shot below I get an error while creating links between nodes node-2 and node-4 that appear to be in the same level. I get this error both for dynamically created links and for graph loaded from file that has links between nodes 2, 4. The error below is printed from code block from the file klayjs-d3.js is shown below the error.
This error doesn't occur when I use Automatic layout or Layered layout options.
Many thanks for looking into this.
Error: {
"type": "com.google.gwt.core.client.JavaScriptException",
"text": "(TypeError) : Cannot read property 'f' of null",
"stacktrace": "Unknown.x9(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.A9(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown._Q(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.aR(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.YQ(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.AQ(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.IP(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.layout(http://localhost:63342/.../apps/src/web/js/klayjs/klay.js)\nUnknown.d3klay.kgraph(http://localhost:63342/.../apps/src/web/js/klayjs-d3/klayjs-d3.js)\nUnknown.WorkflowVisualize.workflowVis.layoutOrderPreserve(http://localhost:63342/.../apps/src/web/apps/workflow_builder/index_2.js)"
}
// Code block where the above error is caught
d3klay.kgraph = function (root)
{
applyLayout = d3_kgraph_applyLayout;
// start the layouter
layouter.layout ({
"graph" : root,
"options" : options,
"success" : function (kgraph)
{
graph = kgraph;
applyLayout (kgraph);
},
"error" : function (e)
{
console.error (JSON.stringify (e,null,1));
}
});
return d3klay;
};
Can you share the input graph and the options object?
@uruuru Here are the input graph and options objects:
{
"id": "root",
"x": 0,
"y": 0,
"children": [
{
"name": "name_n_1",
"id": "node-1",
"labels": [
{
"text": "node-1"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_2",
"id": "node-2",
"labels": [
{
"text": "node-2"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_3",
"id": "node-3",
"labels": [
{
"text": "node-3"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_4",
"id": "node-4",
"labels": [
{
"text": "node-4"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
}
],
"edges": [
{
"id": "link-1",
"source": "node-1",
"target": "node-2",
"labels": [
{
"text": "link-1"
}
]
},
{
"id": "link-2",
"source": "node-2",
"target": "node-3",
"labels": [
{
"text": "link-2"
}
]
},
{
"id": "link-3",
"source": "node-3",
"target": "node-4",
"labels": [
{
"text": "link-3"
}
]
},
{
"id": "link-4",
"source": "node-4",
"target": "node-2",
"labels": [
{
"text": "link-4"
}
]
}
],
"labels": [
{
"text": "Workflow"
}
]
}
// Options object
options = {
fix : {
algorithm : "de.cau.cs.kieler.fixed",
layoutHierarchy : false
},
auto : {
algorithm : "de.cau.cs.kieler.klay.layered",
spacing : 10,
layoutHierarchy : true,
intCoordinates : true,
direction : "RIGHT",
edgeRouting : "ORTHOGONAL",
},
layer : {
algorithm : "de.cau.cs.kieler.klay.layered",
spacing : 10,
layoutHierarchy : true,
intCoordinates : true,
direction : "RIGHT",
edgeRouting : "ORTHOGONAL",
cycleBreaking : "INTERACTIVE",
nodeLayering : "INTERACTIVE",
},
order : {
algorithm : "de.cau.cs.kieler.klay.layered",
spacing : 10,
layoutHierarchy : true,
intCoordinates : true,
direction : "DOWN",
edgeRouting : "ORTHOGONAL",
crossMin : "INTERACTIVE",
},
layerOrder : {
algorithm : "de.cau.cs.kieler.klay.layered",
spacing : 10,
layoutHierarchy : true,
intCoordinates : true,
direction : "RIGHT",
edgeRouting : "ORTHOGONAL",
cycleBreaking : "INTERACTIVE",
nodeLayering : "INTERACTIVE",
crossMin : "INTERACTIVE",
}
}
Thanks for your quick response!
In your screenshot there is an edge n4->n3, in your example graph it's n3->n4?
Sorry about that typo: here's the rectified input graph object:
{
"id": "root",
"x": 0,
"y": 0,
"children": [
{
"name": "name_n_1",
"id": "node-1",
"labels": [
{
"text": "node-1"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_2",
"id": "node-2",
"labels": [
{
"text": "node-2"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_3",
"id": "node-3",
"labels": [
{
"text": "node-3"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
},
{
"name": "name_n_4",
"id": "node-4",
"labels": [
{
"text": "node-4"
}
],
"x": 0,
"y": 0,
"width": 10,
"height": 10
}
],
"edges": [
{
"id": "link-1",
"source": "node-1",
"target": "node-2",
"labels": [
{
"text": "link-1"
}
]
},
{
"id": "link-2",
"source": "node-2",
"target": "node-3",
"labels": [
{
"text": "link-2"
}
]
},
{
"id": "link-3",
"source": "node-4",
"target": "node-3",
"labels": [
{
"text": "link-3"
}
]
},
{
"id": "link-4",
"source": "node-4",
"target": "node-2",
"labels": [
{
"text": "link-4"
}
]
}
],
"labels": [
{
"text": "Workflow"
}
]
}
It seems to be a bug in the Java code. I'll create an issue there and further investigate it when I find time.
You can find the issue here: eclipse/elk#80