search

AbsaOSS / spline

Data Lineage Tracking And Visualization Solution
https://absaoss.github.io/spline/
Apache License 2.0
600 stars 155 forks source link

Lineage overview UI - better graph node ordering/aligment #718

Closed DaimonPl closed 4 years ago

DaimonPl commented 4 years ago

I'm aware that's related to some graph library but maybe something may be improved.

Default graph view as displayed by Spline makes it difficult to see what's going on:

image

Exactly same graph but manually reorganized + arrows

image

wajda commented 4 years ago

@oleksandr-korchak is this something we can quickly do in Cytoscape?

DaimonPl commented 4 years ago

https://cytoscape.org/cytoscape.js-dagre/ https://cytoscape.org/cytoscape.js-klay/

?

DaimonPl commented 4 years ago

@wajda do you think it's possible to improve it for 0.5.2 ? If not, any idea when 0.5.2 with current fixes would be available ?

wajda commented 4 years ago

Without this fix 0.5.2 will be released today. But let me have a glace on this one

wajda commented 4 years ago

We use cytoscape-klay for graph rendering. Here's the respective config in the project - https://github.com/AbsaOSS/spline/blob/release/0.5/client-ui/src/app/store/reducers/layout.reducer.ts#L40 As you can see there are quite a few knobs to tweak.

I tried to reproduce your example along, but it seems that it wasn't big enough to reproduce the graph layout you mentioned in the first post. This is what I got: image which is already not that bad.

Changing these two props as below

feedbackEdges: true,
fixedAlignment: 'NONE'

fixed the overlapping edges and the picture became quite close to what you want image

And a bit more complex variant of that example (with a loop from the resulted source back to the top)

image

As you can see graph focuses more on the representation of the pipeline static topology rather than chronology. The same nodes could be actioned in different times, so balancing between the projections trying to keep both representations decent just doesn't seem feasible. In the future UI version we'll add ability for the user to switch between different representations to have a better view on a pipeline focusing on different things. This cannot fit into 0.5 however.

What we could do in 0.5 is to change those Klay defaults. Try to play with them and if you find a good combination we'll include it into the release.

wajda commented 4 years ago

@oleksandr-korchak, please notice the above example which explains why we used to have that hexagon icon on the resulted source - simply because for certain graphs it's impossible to see where is the root node.

DaimonPl commented 4 years ago

@wajda your second example after this minor tweaking looks great, do you think this could be added to 0.5.2? I could then check bigger graphs and check what can be done with more complex cases in next version

BTW my intention never was to display chronology of jobs - all i'm mentioning is clear dependency graph and as you can see in initial post even quite simple scenario was difficult to read in previous version :)

wajda commented 4 years ago

Yep, will do the change.