search

kedro-org / kedro-viz

Visualise your Kedro data and machine-learning pipelines and track your experiments.
https://demo.kedro.org
Apache License 2.0
662 stars 110 forks source link

Move the 'Expand all modular pipelines' toggle from the settings panel. #1752

Closed NeroOkwa closed 4 months ago

NeroOkwa commented 6 months ago

Description

The https://github.com/kedro-org/kedro-viz/issues/1750 research highlight the need to make this toggle more discoverable to users. It is currently in the settings panel which most users do not use regularly, and can be moved to the task bar.

image

Context

This would benefit users especially those with large complex graphs to easily expand/compress their modular pipelines. It would also contribute to solving for #1726.

Possible Implementation

This toggle can be moved to the task bar, besides the 'Filters' section. image

stephkaiser commented 5 months ago

I think it makes sense to pull this out of the settings modal since this is an action that users would like to use frequently as a toggle, therefore moving it to the utility bar where controls for adjusting the pipeline flowchart view currently are makes sense to me. I don't think this should be at the bottom though next to the zoom controls as these are controls for the canvas, whereas the controls above are specifically for adjusting the pipeline flowchart view itself (showing/hiding node labels, showing/hiding layers, and exporting the visualisation)

Designs for the updated utility bar can be found below:

Expand pipeline button - https://www.figma.com/file/qk6phA6mnULZjYbGQvqHks/Kedro-Master-2023?type=design&node-id=515-40537&mode=design&t=FHII664dUTSKRvES-4 Collapse pipeline button - https://www.figma.com/file/qk6phA6mnULZjYbGQvqHks/Kedro-Master-2023?type=design&node-id=515-40656&mode=design&t=FHII664dUTSKRvES-4

Updated settings modal (showing the default configuration for the toggles) - Dark mode - https://www.figma.com/file/qk6phA6mnULZjYbGQvqHks/Kedro-Master-2023?type=design&node-id=515-42389&mode=design&t=FHII664dUTSKRvES-4 Light mode - https://www.figma.com/file/qk6phA6mnULZjYbGQvqHks/Kedro-Master-2023?type=design&node-id=515-44322&mode=design&t=FHII664dUTSKRvES-4

Let me know if you have any comments or thoughts!

SajidAlamQB commented 4 months ago

Following the PR, https://github.com/kedro-org/kedro-viz/pull/1858, the implementation has been completed but there are still a few design changes @stephkaiser has noticed that still need to be addressed, so I've re-opened this issue to address these.