{"action":"created","issue":{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/1451","repository_url":"https://api.github.com/repos/cytoscape/cytoscape.js","labels_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/1451/labels{/name}","comments_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/1451/comments","events_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/1451/events","html_url":"https://github.com/cytoscape/cytoscape.js/issues/1451","id":164990675,"number":1451,"title":"Invisible unbundled-bezier/segments edges","user":{"login":"fedarko","id":4177727,"avatar_url":"https://avatars.githubusercontent.com/u/4177727?v=3","gravatar_id":"","url":"https://api.github.com/users/fedarko","html_url":"https://github.com/fedarko","followers_url":"https://api.github.com/users/fedarko/followers","following_url":"https://api.github.com/users/fedarko/following{/other_user}","gists_url":"https://api.github.com/users/fedarko/gists{/gist_id}","starred_url":"https://api.github.com/users/fedarko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fedarko/subscriptions","organizations_url":"https://api.github.com/users/fedarko/orgs","repos_url":"https://api.github.com/users/fedarko/repos","events_url":"https://api.github.com/users/fedarko/events{/privacy}","received_events_url":"https://api.github.com/users/fedarko/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-07-12T04:13:55Z","updated_at":"2016-07-12T16:10:55Z","closed_at":null,"body":"Hi,\r\n\r\nWhile using the `unbundled-bezier` and `segments` edge settings, I've noticed that certain edges aren't visible after rendering the graph, and only become visible upon the user dragging their source or target nodes. (I noticed the problem was also present in some cyclic `bezier` edges.) I did a bit of digging, and it looks like some of these particular edges are flagged internally as `badBezier` edges (accessible for an arbitrary edge `e` via `e._private.rscratch.badBezier`), although some edges that exhibit this problem still have `badBezier === false`.\r\n\r\nI understand that some edges may just be impossible to draw using `unbundled-bezier` or `segments` edges, but all of the edges I use in the examples here are fairly simple and seem like they shouldn't be impossible to draw.\r\n\r\nI've identified two main types of these problems, each of which is indicated in the provided example (the code is accessible in JSBin [here](https://jsbin.com/rasejokigo/edit?html,js,output), and it's runnable also on JSBin [here](https://output.jsbin.com/rasejokigo)).\r\n\r\n**Case 1.**\r\n- `unbundled-bezier` edges that are not labelled as `badBezier` (from what I've seen, seems to be caused by a `control-point-weight` of exactly 0 or by some straight-line edges)\r\n\r\nThe edges in this case (an example of an edge exhibiting this problem is the edge from 1 to 2 in the provided code) are only occasionally visible when dragging its source or target node, and even then (on my system, at least) seem to \"flicker\" between being visible and invisible. (I'll discuss the straight-line problems below in case 2, as those can result in `badBezier` being true or false. Also, some straight-line invisible edges [e.g. edge 3 -> 4 in the provided code] seem to not have the \"flickering\" problem.)\r\n\r\n*Workaround*: Changing the first `control-point-weight` from 0 to 0.01 seems to fix this problem; as a cursory guess, maybe the control point weights are used as divisors somewhere in the edge calculations?\r\n\r\nAlso, using `'edge-distances': 'node-position'` for this edge actually just makes the problem worse, resulting in no edge (not even a flickering one) being rendered at all. I understand that a `control-point-weight` of 0 indicates that an edge's control point is located \"in line\" with either the outside (if `edge-distances` is set to `intersection`) or center (if `edge-distances` is set to `node-position`) of the source node—is a control point weight of 0 invalid, or otherwise semantically meaningless? (If so, this would be a good thing to mention in the Cytoscape.js documentation on `unbundled-bezier` edges.)\r\n\r\n**Case 2.**\r\n- `unbundled-bezier` edges that are labelled as `badBezier` (I'm not sure what exactly causes these, aside from certain types of lines)\r\n\r\nThe edges in this case (`badBezier === true`) are somewhat harder to classify, I think. Both straight lines (e.g. 3->4 in the provided code) and curved lines (e.g. 5->6 in the provided code) can suffer from this problem. In this case, the edges don't have the \"flickering\" problem—they're just not immediately visible until their source/target node are dragged, which can be confusing to users.\r\n\r\n*Workaround*: I currently use a simple workaround when processing an edge's control points where, if the magnitude of each control point's `control-point-distance` is less than some epsilon value (I'm using a relatively conservative value of 1.0 for now)  **or** the edge is self-directed, then the edge is just rendered as a normal `bezier` instead of an `unbundled-bezier` curve. (This accounts for straight-line edges and for self-directed edges.)\r\n\r\nHowever, I think there may be other cases where this behavior manifests—the edge between nodes 5 and 6 in the provided code is an example of a `badBezier` that isn't fixable using only this workaround.\r\n\r\n**Other issues with unbundled-bezier/segments edges**\r\n\r\nThis is fairly minor in comparison, but unless I'm mistaken the current way of defining relative edge control points makes representing self-directed unbundled-bezier edges (aka loops) impossible. Since there is no \"line\" from source to target when the source and target are the same node and therefore in the same position, you can't really represent the perpendicular distance or weight of a given control point.\r\n\r\nThis isn't that big of a deal (like I mentioned, I just convert all loops to basic `bezier` edges), but it might be worth mentioning in the documentation that loops aren't supported for `unbundled-bezier` and `segments` edges. (One possible way to circumvent this would be to implement coordinates relative to just the node's position, but I'm not sure of the best way to go about that and this is a pretty minor issue.)\r\n\r\n**Other details**\r\nFor reference: this issue persists for me in both Chromium 49.0.2623.108 and Iceweasel 38.7.1. My computer runs Debian 8.4. I copied the latest version of [cytoscape.min.js](http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js) into the JSBin in order to get it to run properly, so these issues seem to be present in at least Cytoscape 2.7.5 and Cytoscape 2.7.4 (which is what I've been working with for the past few days).\r\n\r\nThanks for all of your work on Cytoscape.js! It's been very useful for the project I'm currently working on."},"comment":{"url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/comments/232096964","html_url":"https://github.com/cytoscape/cytoscape.js/issues/1451#issuecomment-232096964","issue_url":"https://api.github.com/repos/cytoscape/cytoscape.js/issues/1451","id":232096964,"user":{"login":"maxkfranz","id":989043,"avatar_url":"https://avatars.githubusercontent.com/u/989043?v=3","gravatar_id":"","url":"https://api.github.com/users/maxkfranz","html_url":"https://github.com/maxkfranz","followers_url":"https://api.github.com/users/maxkfranz/followers","following_url":"https://api.github.com/users/maxkfranz/following{/other_user}","gists_url":"https://api.github.com/users/maxkfranz/gists{/gist_id}","starred_url":"https://api.github.com/users/maxkfranz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maxkfranz/subscriptions","organizations_url":"https://api.github.com/users/maxkfranz/orgs","repos_url":"https://api.github.com/users/maxkfranz/repos","events_url":"https://api.github.com/users/maxkfranz/events{/privacy}","received_events_url":"https://api.github.com/users/maxkfranz/received_events","type":"User","site_admin":false},"created_at":"2016-07-12T16:10:54Z","updated_at":"2016-07-12T16:10:54Z","body":"Your demo corrected : https://jsbin.com/nawigedeqo/edit?html,output"}}
{"actor":{"display_login":"maxkfranz"}}