[New plugin] Leader Line Between Elements

Hi @mckim! The plugin should already be repeating group friendly. There is a repeating group/data demo on the demo page (at the bottom): Leader Line Between Elements :slight_smile:

Nice work @Thimo
That looks great! :grin:

I keep getting this…

ERROR

@Thimo plugin evaluation error The plugin Leader Line Between Elements / action Connect elements with a Leader Line a Leader Line threw the following error: Error: start and end are required. at it (https://cdn.jsdelivr.net/npm/leader-line@1.0.7/leader-line.min.js:2:51907) at ot.setOptions (https://cdn.jsdelivr.net/npm/leader-line@1.0.7/leader-line.min.js:2:73051) (please report this to the plugin author)

@ryan8 Like the error states, could it be that you did not supply a start and end ‘element ID’ or are the elements for these ‘element IDs’ not visible on the page?

Wow! Just got this plug-in and it’s doing exactly what I hoped for: letting me create a ‘network-style’ graph connecting elements. I found it only accidentally, as it was not showing up in the searches for things like ‘graph’ or ‘map’ , and it did not occur to me to search for ‘line’.
Also, I nearly didn’t try it because I mistakenly thought it was perhaps limited to just one line IN, since the demo page has elements that have at most ONE input (though it does show a ‘tree’ with one element that has two outputs). But it works great, and there’s no problem connecting an element in a two-way loop, though I wish I could shift the line a little so you could clearly see that it’s two separate lines… maybe there is a tweak I can make so the lines are not directly on top of each other?
EDIT: Just realized :woman_facepalming: that of COURSE you can change this… there are multiple “path types” to the line, and if I set one to “arc” and the other to “fluid” and set the arrows etc. I get two distinct connections between two elements, showing a two-way loop. Ahhhhh so good :slight_smile:

In my perfect world, the lines would themselves be clickable and generate their own workflow actions as ‘first-class element citizens’. But I really really love this Thimo.

1 Like

just purchased this plugin to help show how elements in one repeating group are connected to their children in a second repeating group. I knew it would be a challenge but I had hoped to make better progress than I am! I’ll keep at it - but it would be super powerful if when using the ‘Create a leader line’ you can connect one line to multiple end elements/a list of elements.

Example:
RG1 - list of fruits (on the left)
RG2 - list of vitamins (on the right)

Assume I have five fruits on the left, and a set of up to 12 vitamins to match each item on the right. I want to show each relevant vitamin for each fruit (so using RGs) and use the connecting lines to show the relationship. At the moment I’m just asking it to draw 12 lines per fruit and then if the element exists, it’ll draw the line. If not, it’ll throw a .js error

I can continue to work with this (I think) but it’s hacky and I suspect will not play nicely!!

Are there any other solutions to this? the plugin is beautiful and so close to what I was hoping it would do - I put $40 in with hope !

1 Like

I agree, I would buy it. Please @Thimo if you plan on developing this ping me and I will gladly buy this.
My use case is:
I have a main element (outside the repeating group) from which the line will start, then I want to connect it with n number of elements in a repeating group.

@manipaje I am always looking for ideas to make the plugin more useful! I just pushed an update (1.8.1) that allows to you supply a comma separated list of end IDs so you can connect multuple lines from 1 starting element to multiple ending elements. I also updated the demo:

This update also adds a new state that contains a list of Leader Lines IDs of the lines you added via the list. Hopefully this helps! :slight_smile: (cc: @hoke )

2 Likes

Works FLAWLESSLY. THANKS

@Thimo you are so great. This change removes so much nonsense from my workflows (I broke the left RG into Groups and forced each connecting line in, even if it was not needed, so .js errors galore). This change is so super, and your speed and willingness to do it gives me a huge smile.

I honestly thought I’d have to drop the plugin, I was gutted, the workaround felt like a temporary patch but the delight is completely revived.

Thank you so much - each time I find a little challenge with bubble there’s a solid answer to guide me forward. :heart: to you.

did you got this working? i am losing my mind about how to get this done

could you maybe go more in detail about this? i think it will be a good use case for other people as well - i purchased the plugin directly to pay for you answer directly. hope you help <3 (i am stuck since hours on this)

Hi @buero I will send you a PM!

Update 1.10.1

Added the ability to use a comma separated list of start IDs:

Creating Mind Maps and other complicated flows programmatically should be much, much easier now!

2 Likes

Hey @Thimo,

I’ve been trying to get your plugin to work for a “hub-and-spoke” type graph, where I want the leader lines to emanate from and connect to the center of the specified elements, not the edges (and also end behind said elements).

However, since there is no option for the plugs to meet at the center of the element, I’ve tried placing a 0 x 0px anchor element at the center of each target align-to-parent group, where the main card is placed on top of the anchor group. Unfortunately, even after modifying the z-index of the leader lines action & the target elements via an HTML element using the code below, the lines are still showing up above the cards. I should note I’m using a hard-coded list for the end nodes, but even using a single value does not change the behavior.

<style>
#tgm {
  z-index: 10000 !important;
}
#teamcenter {
  z-index: 9999 !important;
}   
</style>

I’ve noticed that when I set the leader lines action’s z-index as low as 2, they still show up above the target elements, regardless of how high I set their z-indices to. With the z-index of the leader lines at 1, they disappear behind everything else on the page.

The start & end plugs are already set to “behind” – I believe if you can create a placement option for “center”, then this would all work and we wouldn’t have to worry about troubleshooting z-index (which would be nice, because the z-index of the reusable this is being used inside may change in different pages/locations).

Let me know if anything I can do to help. Thanks!

Josh

Hi @jgh3,

I am not 100% sure what kind of graph you want to create, do you mind sharing a picture so I can get a better idea of how it looks?

The plugin is made to connect elements with leader lines. These lines will lay on top of your elements, but you should be able to control the z-index. However, the Leader Lines will always connect to the edges of the elements, that’s just how this plugin is build.

Maybe if you share an image of the graph you are looking to develop I can try to see if it is possible to create! :slight_smile:

@Thimo sure, here’s a picture of what this would generally look like, except that the lines should end behind the center element, and behind the outer elements as well (incomplete / some info hidden currently):

I’m not sure why the z-index doesn’t seem to be applying correctly to either the lines or the elements; the leader lines’ index being set to 2 should certainly cause them to appear behind at least some elements, right? As it stands, z-index of 2 is somehow still putting them in front of multiple layers, while z-index of 1 causes them to be behind everything.

This really depends on the Z-index of the other elements in your application. Also, the leader line lays on top of the page, so the z-index of elements that are not laying on top of the page in the same way does not really matter, as it lays on top of the page it can’t be behind those elements. The z-index field was added for popups and floating groups.

A fix would be to remove the background color of your page and add some CSS on the page to increase z-index of the page container (as that has the same hierarchy as the leader lines). This will allow the page to lay on top of the leader lines. However this might be a bit hacky and could influence how your floating groups/popups behave:

Demo: Leader-line-demo | Bubble Editor

Maybe you can look into a different kind of UI where the leader lines don’t have to lay below certain elements?

@Thimo,

Thanks for that clarification on the z-index hierarchy. Since our design system uses cards on top of a gray background (and the reusable this is inside of will potentially exist throughout various pages and views), I don’t think that method of raising the page z-index will work, since the cards that are embedded in that page layer will then sit in front of the leader lines. This is what I found when I tried a few different variations of that just now.

We do need a straight hub-and-spoke diagram. The other options all place the connectors haphazardly around the various sides of the end nodes, and that’s definitely a more distracting UI choice.

Is there any possibility you’d be able to implement center-anchoring to elements, corner anchoring (though unsure how this would play with element border radii), or even just better control over z-index within the page level hierarchy? This would allow additional customization possibilities and use cases for users like ourselves willing to pay for your plugin, if it can do these things. I’m really curious if there is any smarter way to modulate the z-index more acutely – we would benefit even further from being able to have other UI elements appear in front of the leader line segments when they need to, which I’m realizing is another issue that’s going to emerge as we build out our UI for this.

Let me know if there’s anything else I can do or if you have any more ideas aside from the above. Thank you!

Josh

As the Leader Lines are build to live as new DOM elements in the most upper level of the DOM tree, it will not be possible to overlay your nested elements on top of the leader lines. This is unfortunately how webpages work.

As far as I can see center anchoring is not supported, however, you can place a small (e.g. 1px by 1px) element in the center of a bigger element and connect the leader lines to that element. That way the leader lines will appear centered.

Hopefully this still helps! :slight_smile: