Implementing Left-to-Right Orientation for Kedro-Viz

[rashidakanchwala]

Description

As ETL/ELT pipelines are commonly represented in left-to-right orientations, adding flexibility to Kedro-Viz’s layout could improve usability and make the tool more adaptable to various visualization needs. Currently, the top-to-bottom orientation is widely used; however, introducing a left-to-right orientation option would align with industry standards for ETL/ELT diagrams, offering a more intuitive display for data engineering workflows.

A choice between orientations can accommodate varied user preferences and context-specific needs. For example, top-to-bottom views may suit deeply nested, hierarchical data pipelines, while left-to-right views can better represent sequential data transformations.

Integrating both orientations in Kedro-Viz allows users to tailor the visualization to their pipeline’s structure, enhancing flexibility and supporting a broader range of data visualization needs. This feature would make Kedro-Viz an even more powerful tool for pipeline visualization in data-centric applications.

Possible Implementation

Clicking on the [A] icon allows you to switch orientation https://rashidakanchwala.github.io/test-orientation/?types=nodes,datasets&expandAllPipelines=false&pid=__default__

If you need more context, this issue is related to a closed issue https://github.com/kedro-org/kedro-viz/issues/1609

Checklist

• [ ] Include labels so that we can categorise your feature request

[datajoely]

❤️ this

[datajoely]

So I think this is welcome, but it's also clear that we could have designed things slightly different if we were going from scratch.

Some thoughts:

1. The layout engine is doing some funky things with a simple project like Spaceflights

2. I think the default user experience should be more focused, the bird's eye view is useless

• The node names are very wide already, this is amplified on the horizontal orientation and I'm not sure wordwrapping gets us a much better experience.
• I almost think horizontal view needs to be focused on a subset of the DAG and then the user navigates laterally
• This is quite a cool video on a similar journey

[astrojuanlu]

2. I think the default user experience should be more focused, the bird's eye view is useless

I agree. Instead of fit-width, maybe we could try fit-height. But then obviously we have to pick whether the default view should be centered, to the left, or to the right. And make sure the user knows where do they have to scroll to see the rest.

@stephkaiser

[astrojuanlu]

@rashidakanchwala will anonymise feedback and dump it here (and I'll do the same when I get some)

[rashidakanchwala]

User	Feedback
User 1	That's a super good idea. Personally, when I explain a workflow, I always prefer telling the story from left to right. It makes the sense of progression moving toward value creation. It's less the case when moving up to down. Thanks for this feature!
User 2	I've had someone ask me about this. And this would be great for my wide monitor!
User 3	My preference is for top-down at first sight, to be honest. It works well though the flipping, but I am more a fan of top-down.
User 4	Think it looks great, and I'd expect that a lot of users would prefer this to a vertical flow. And the ability to switch layout is very nice.
User 5	This is such a nice feature, especially for my ultrawide screen! I like the idea of left-right orientation. Feature request: - Allow a mix of top-down and left-right orientation. - User selects an overall initial orientation (left-right vs top-down). - User selects the nodes through a rectangular selection tool. - User chooses a toggle to convert the selection to the desired orientation. - User repeats steps 2 and 3 for an arbitrary selection of nodes. Result: A mix of top-down and left-right orientation.
Other Users	Besides, this 4 other users reacted to this feature with a love emoticon.

@astrojuanlu , @stephkaiser