Passing Data to Edge

[jkanel]

In v7 the <Edge> is passed as a property to an <Anchor edge={CustomEdge} edgeLabel={buttonLabel} />.

• In my custom <Edge> component, how would I reference the edgeLabel that was passed through the <Anchor>? For example, I would like to specify a button label.
• Is there any other way to pass data from the <Anchor> to a custom <Edge>?

Thanks!

[briangregoryholmes]

Hi @jkanel. I'm not sure if this is exactly what you're looking for, but you can fully customize labels by passing them as children to the Edge component as seen here: https://svelvet.mintlify.app/components/edge

You just specify slot="label" on the outermost element.

The edgeLabel prop on the Anchor component is just for changing the text of the default label.

If instead you're asking if you can have a generic custom Edge that you've created, but then also a pass a different custom label at the Anchor level, that is not explicitly possible. But again, passing a custom Edge is in many ways just a proxy for passing a custom label, since you can override the Edge properties on the Anchor.

If you have a specific use case in mind that you feel isn't covered, I'd be happy to look into how we might implement it.

[jkanel]

@briangregoryholmes - thank you for the quick response.

I think you are saying that, at the <Anchor> level, an <Edge> can only be customized based on path, color, label.

The <button> example in the documentation threw me off. I'm curious how the edgeClick callback could pass anything useful to a function since there is not way to get data to a custom <Edge> in the first place?

Would it make sense as a roadmap item to have an <Anchor> pass data to a custom <Edge>?

Hopefully I am understanding your response correctly.

[jkanel]

Here's an example use case. In the diagram example below I would want "lives at" to be a <button> that could open a form for editing the relationship label and other information.

[briangregoryholmes]

So, I'll share the direction we're imagining for Edges going forward. Enabling them as a custom component was a last minute addition for v7 and they are largely a holdover implementation from previous versions with just a little bit of extra functionality. The edgeClick prop and the idea of a passing a button as a label is really limited to aesthetic, non contextual changes or deleting the edge through our exposed destroy function.

It's possible to implement what you're describing, but not in a way that really exists in the context of the source and target Anchors. You'd create, for instance, a Professor->Student Edge component and you could enable functionality to change the label prop with options local to that particular Edge. You could also create a generic Edge component that allowed for the ability to change the label arbitrarily. If your timeframe requires getting this working sooner rather than later, I'd be happy to show you exactly how to do this using the current Edge implementation.

The idea going forward, though, is to offer the same composability with Edges as we do for Nodes and Anchors, where you'd pass the Edge as a child of an Anchor rather than as a prop. Enabling this requires a little more care because people consider Edges very differently. Some developers see them purely as just a visual representation of an underlying connection and others as this functional thing that exists in the context of the Anchors it's connected to. It also doesn't entirely capture the fact that Edges are really scoped to both the Source and Target, so we want to enable a way for developers to account for that dynamically. The end goal is to create an Edge component that can easily do one thing when connected to Anchor A and another when connected to Anchor B.

[jkanel]

Thanks, @briangregoryholmes. That was a helpful explanation. At the moment, I can work with documented functionality, and look forward to composable Edges. If I need something more sophisticated in the mean time, I'll get in touch.