Automatic selection of flow colors is inconsistent

[waldyrious]

Currently, the way that colors are picked for the flow paths between nodes seems to be inconsistent: in some cases, the color of the source node is picked, but in others, the color of the target node. Perhaps the algorithm is deterministic, but it's not intuitive so it feels random.

Here's an example diagram, based on the data for the 2022 Wikimedia Foundation Board elections:

Note how the flows exiting the "Farah R1" node all share the color of the source node, and those leaving the "Kunal R2" node do the same, except for the one targeting the "Nobody" node. In contrast, those exiting the "Tobechukwu R3" and "Mike R4" nodes all have color of the destination node.

Source code:

``` :Mike R1 #8772c9 :Mike R2 #8772c9 :Mike R3 #8772c9 :Mike R4 #8772c9 :Mike R5 #8772c9 :Michał R1 #70a845 :Michał R2 #70a845 :Michał R3 #70a845 :Michał R4 #70a845 :Michał R5 #70a845 :Shani R1 #b69040 :Shani R2 #b69040 :Shani R3 #b69040 :Shani R4 #b69040 :Shani R5 #b69040 :Tobechukwu R1 #4dadc6 :Tobechukwu R2 #4dadc6 :Tobechukwu R3 #4dadc6 :Kunal R1 #cc5a43 :Kunal R2 #cc5a43 :Farah R1 #c8598f :Nobody #555555 Mike R1 [1176] Mike R2 Michał R1 [1157] Michał R2 Shani R1 [1032] Shani R2 Tobechukwu R1 [988] Tobechukwu R2 Kunal R1 [896] Kunal R2 Farah R1 [137] Mike R2 Farah R1 [102] Michał R2 Farah R1 [104] Shani R2 Farah R1 [144] Tobechukwu R2 Farah R1 [91] Kunal R2 Farah R1 [95] Nobody Mike R2 [1313] Mike R3 Michał R2 [1259] Michał R3 Shani R2 [1136] Shani R3 Tobechukwu R2 [1132] Tobechukwu R3 Kunal R2 [344] Mike R3 Kunal R2 [154] Michał R3 Kunal R2 [167] Shani R3 Kunal R2 [150] Tobechukwu R3 Kunal R2 [172] Nobody Mike R3 [1657] Mike R4 Michał R3 [1413] Michał R4 Shani R3 [1303] Shani R4 Tobechukwu R3 [338] Mike R4 Tobechukwu R3 [238] Michał R4 Tobechukwu R3 [479] Shani R4 Tobechukwu R3 [227] Nobody Mike R4 [1809.33] Mike R5 Michał R4 [1651] Michał R5 Shani R4 [1782] Shani R5 Mike R4 [87.48] Michał R5 Mike R4 [53.05] Shani R5 Mike R4 [45.14] Nobody ```

And here's the diagram after manual tweaking of the colors in the SVG file:

IMO, the solution should be to consistently pick either the source or the destination nodes for the color of the connecting flows. I personally find the source color to be more intuitive.

Another solution could be to use a gradient from the source node color to the target node color, as proposed in #33.

[nowthis]

The initial flow coloring can be customized in the 'Flows' > 'Default Flow Colors' section.

It looks like the option for 'use colors from..' > 'outermost nodes (flowing in)' is checked.

If you select 'each flow's Source' instead, it should produce the colors you're looking for.

[waldyrious]

Oh, wow, I totally missed that! So first of all, sorry for the unwarranted noise! :sweat_smile: but second, I do have some questions:

• What exactly does "colors from outermost nodes (flowing in)" mean? Maybe it's because I haven't had my morning coffee, but I can't really make sense of it. :see_no_evil: (I did look into the documentation, btw, but that option is missing from it, which is weird since it seems to be the default.)
• (Related to the above) Why is this option the default? Of course this depends on what type of flow one is representing, but it seems to me that either the source node colors or the target node colors would be, if not more frequently the desirable choice, at least more intuitive IMHO.

And an observation/suggestion: I appreciate the styling choice to deemphasize unselected options, but that sort of conflicts with the usual practice of deemphasized (i.e. greyed-out) elements being disabled, i.e. unselectable. I suspect this may have played a role in me overlooking the flow colors options — I probably just didn't read those options assuming they were disabled because they didn't apply to the diagram I was working with.

Perhaps consider emphasizing the selected ones instead? I mean, the use of blue already provides some emphasis, but if that feels insufficient, maybe make them bold too, or add a soft background color?

[Green-Gatorade-Gottle]

Is it possible to have a gradient set for the flow as an option next to the target and source?

I see above that there is an issue of whether the color is the source or the target, but a gradient would solve that issue entirely—because you'd have both, so it doesn't matter. I imagine this might be complicated on the back end, but I think it would be very beautiful and intuitive for users to have this feature. Here is an example I made in PS to illustrate my point.

From an understanding POV, this view helps us understand that money from one source turns into money from another source. Meaning, at no point is it really the source OR the target—it's both and that changes depending on the perspective.