Skip to content

Conversation

@danielcaldas
Copy link
Owner

Hello all,

With this draft I purpose a change to solve #185 adding support for redundant links between nodes.

What do I Introduce in this PR

  • Allow clients to define id property to uniquely identify links (alongside with source and targert)
  • Offer out of the box to render redundant links, by automatically smoothing the curve of redundant links so that they don't overlap, here I took inspiration from @Shrutijamgade where the following adaption of the radius calculation is added:
// link.helper.js
/**
 * Computes radius for a smooth curve effect.
 * @param {number} x1 - x value for point 1
 * @param {number} y1 - y value for point 1
 * @param {number} x2 - y value for point 2
 * @param {number} y2 - y value for point 2
 * @param {number} delta - additional factor to tweak curvature.
 * @returns{number} value of radius.
 * @memberof Link/helper
 */
function smoothCurveRadius(x1, y1, x2, y2, delta = 1) {
    const dx = (x2 - x1) * delta;
    const dy = (y2 - y1) * delta;

    return Math.sqrt(dx * dx + dy * dy);
}
  • Supporting redundant links fixes the JavaScript error that many are facing here.

How does it look like?

See for yourself a small dataset with redundant links looks like this.

support-for-redundant-links

I would like to have some of you trying this out before merging. Additionally, let me know if you think there's' a better way to achieve this.

@danielcaldas danielcaldas changed the title [DRAFT] Feature/multiple edges between same nodes [WIP] Feature/multiple edges between same nodes Aug 29, 2020
const cacheLinksCount = new Map();
const cacheIdCount = new Map();
const _key = (s, t) => `${s}:${t}`;
const addLink = (s, t, id) => {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • This cache implementation is messy, I would definitely get this refactored moving forward.

* @memberof Link/helper
*/
function buildLinkPathDefinition({ source = {}, target = {} }, type = LINE_TYPES.STRAIGHT) {
function buildLinkPathDefinition({ id, source, target }, type = LINE_TYPES.STRAIGHT) {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • To avoid confusion, better rename source to sourceInfo since it's an object and not the actual source identifier

*/
function buildLinkPathDefinition({ source = {}, target = {} }, type = LINE_TYPES.STRAIGHT) {
function buildLinkPathDefinition({ id, source, target }, type = LINE_TYPES.STRAIGHT) {
addLink(source.source, target.target, id);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Shouldn't call addLink if id is non-existent

@lifehackett
Copy link

The onClickLink is going to need the id passed to the callback so it can be identified.

handleOnMouseOverLink = () =>
this.props.onMouseOverLink && this.props.onMouseOverLink(this.props.source, this.props.target);
// NOTE: this.props.id is optional, it might be undefined
this.props.onMouseOverLink && this.props.onMouseOverLink(this.props.source, this.props.target, this.props.id);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onClickLink is going to need the id passed to the callback so it can be identified.

  • Double check that this API is working properly.

@zebde
Copy link

zebde commented Mar 24, 2021

I have been using this feature for a while as our data expects multiple edges between the same node and have not noticed any obvious errors. This is in a user base of 500+ with a dataset of 650K+ entities.

@akat12
Copy link

akat12 commented May 4, 2021

Any updates on this pull request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants