Interpreting edge label position
jbeard4 opened this issue · comments
Hi,
Please consider the following Klay JSON:
{
"id": "root",
"labels": [
{
"text": "root"
}
],
"edges": [
{
"id": "off_on",
"source": "off",
"target": "on",
"labels": [
{
"text": "touch",
"width": 10.140625,
"height": 5
}
]
},
{
"id": "on_off",
"source": "on",
"target": "off",
"labels": [
{
"text": "touch",
"width": 10.140625,
"height": 5
}
]
}
],
"width": 10,
"height": 10,
"children": [
{
"id": "off",
"labels": [
{
"text": "off"
}
],
"edges": [],
"width": 10,
"height": 10
},
{
"id": "on",
"labels": [
{
"text": "on"
}
],
"edges": [],
"width": 10,
"height": 10
}
]
}When layout is applied, this yields the following kgraph:
{
"id": "root",
"labels": [
{
"text": "root"
}
],
"edges": [
{
"id": "off_on",
"source": "off",
"target": "on",
"labels": [
{
"text": "touch",
"width": 10.140625,
"height": 5,
"x": 37.99999952316284,
"y": 0
}
],
"sourcePoint": {
"x": 88.14062404632568,
"y": 24
},
"targetPoint": {
"x": 22,
"y": 24
},
"junctionPoints": []
},
{
"id": "on_off",
"source": "on",
"target": "off",
"labels": [
{
"text": "touch",
"width": 10.140625,
"height": 5,
"x": 37.99999952316284,
"y": 16
}
],
"sourcePoint": {
"x": 22,
"y": 27.333333333333332
},
"targetPoint": {
"x": 88.14062404632568,
"y": 27.333333333333336
},
"bendPoints": [
{
"x": 35.99999976158142,
"y": 27.333333333333332
},
{
"x": 35.99999976158142,
"y": 40
},
{
"x": 74.14062428474426,
"y": 40
},
{
"x": 74.14062428474426,
"y": 27.333333333333336
}
],
"junctionPoints": []
}
],
"width": 110.14062404632568,
"height": 53,
"children": [
{
"id": "off",
"labels": [
{
"text": "off"
}
],
"edges": [],
"width": 10,
"height": 10,
"x": 88.14062404632568,
"y": 20.666666666666668,
"$H": 26
},
{
"id": "on",
"labels": [
{
"text": "on"
}
],
"edges": [],
"width": 10,
"height": 10,
"x": 12,
"y": 20.666666666666664,
"$H": 27
}
],
"$H": 1
}I was wondering if you could guide me as to how to interpret the x and y values of the edge labels.
When both edge labels are interpreted as being in the coordinate space (sharing the offset of) node "on", then this renders beautifully:
However it is unclear to me how to characterize the general relationship between these edge coordinates and node "on". For example, edge "on_off" has a relationship with "on" such that "on" is the source of "on_off". But this is not true of edge "off_on" - in this case node "on" is the target.
I would appreciate any guidance you can offer on how to interpret these coordinates. Thank you.
The expected behavior would be that both labels are relative to the parent node of their corresponding source node. In this case that is the invisible root node.
There's an example model which illustrates what coordinates are relative to.
Note that for us a label's coordinates denote the top-left corner, I'm not sure if that's the case for svg text as well.
Thank you @uruuru, the documentation you linked to is what I was looking for. Unfortunately, the edge label coordinates do not appear to include the correct offset. Please see the attached screenshot, which illustrates label position in the root element coordinate space:
Here is the SVG as a reference:
<svg class="schviz2 ng-isolate-scope" display-model="displayModel" viewBox="0 -10 109.78124904632568 53">
<desc>Created with Snap</desc><defs></defs>
<g>
<g class="node compound">
<rect></rect>
<g id="off" transform="matrix(1,0,0,1,87.7812,20.6667)" class="node leaf highlighted">
<rect x="0" y="0" width="10" height="10"></rect><text x="2.5" y="6.5">off</text>
</g>
<path d="M87.78124904632568 24 L22 24" class="link"></path>
<text x="37.99999952316284" y="0">touch</text>
<g id="on" transform="matrix(1,0,0,1,12,20.6667)" class="node leaf">
<rect x="0" y="0" width="10" height="10"></rect><text x="2.5" y="6.5">on</text>
</g>
<path d="M22 27.333333333333332 L35.99999976158142 27.333333333333332 L35.99999976158142 40 L73.78124928474426 40 L73.78124928474426 27.333333333333336 L87.78124904632568 27.333333333333336" class="link"></path>
<text x="37.99999952316284" y="16">touch</text>
</g>
</g>
<defs>
<marker id="end" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="3" markerHeight="5" orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
</svg>Is it possible this is a bug in the edge label positioning algorithm? Thank you.
Looks like a bug in the position application code. I'll look into it. Thanks for mentioning the issue.
I pushed a new version that hopefully fixes the issue. Let me know if it helps.
I will review and let you know.
Thank you for looking into this. The issue persists. Please see the attached screenshots:
And SVG:
<svg class="schviz2 ng-isolate-scope" display-model="displayModel" viewBox="0 0 109.78124904632568 53">
<desc>Created with Snap</desc>
<defs/>
<g>
<g class="node compound">
<rect/>
<g id="off" transform="matrix(1,0,0,1,87.7812,20.6667)" class="node leaf highlighted">
<rect x="0" y="0" width="10" height="10"/>
<text x="2.5" y="6.5">off</text>
</g>
<path d="M87.78124904632568 24 L22 24" class="link"/>
<text x="49.99999952316284" y="12">touch</text>
<g id="on" transform="matrix(1,0,0,1,12,20.6667)" class="node leaf">
<rect x="0" y="0" width="10" height="10"/>
<text x="2.5" y="6.5">on</text>
</g>
<path d="M22 27.333333333333332 L35.99999976158142 27.333333333333332 L35.99999976158142 40 L73.78124928474426 40 L73.78124928474426 27.333333333333336 L87.78124904632568 27.333333333333336" class="link"/>
<text x="49.99999952316284" y="28">touch</text>
</g>
</g>
<defs>
<marker id="end" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="3" markerHeight="5" orient="auto">
<path d="M0,-5L10,0L0,5"/>
</marker>
</defs>
</svg>The positions look correct to me. The upper touch label is at ~50, 12, where 12 is the default distance to the border. Is it possible that the svg's text coordinates refer to the bottom-left corner and you have to add the height of the label?
Hi @uruuru. You are correct. I had to set dominant-baseline="text-before-edge" on the SVG text element in order to make the x, y coordinates equivalent to the top left corner of the text. This returns a good result. Here is the output, with option { labelSpacing : 1}.
Thank you for your assistance resolving this.
I opened a related issue here: #9. Thank you.