The Run Command Component in kedro-viz (General)

[Huongg]

Description

The parent ticket is: #1753

The run command component will display the real-time command needed to achieve the current view in viz. This ticket is part of the larger ticket #1784, "Make Kedro-Viz flowchart filterable."

Context

This feature is important because it allows users to see the exact commands required to replicate the current visualization. This helps users understand how it can be run the kedro framework via CLI, enabling better debugging, learning, and sharing of workflows.

Tasks:

• Design the user interface for the run command component.
• Implement the logic to generate and update commands in real time based on the current visualization state.
• Ensure the command line shown in viz is integrates smoothly with the existing approach from framework.

Checklist

• Include labels so that we can categorise your feature request

[Huongg]

As discussed with @stephkaiser, I'm now going to do a spike work on how this works technically first while she's looking at the design for 1944

cc @rashidakanchwala @jitu5

[Huongg]

I've done a first around of spike work here, where I created a new selector to handle all the command lines and connect with the UI component

A gif to briefly show how the flow works at the moment:

[rashidakanchwala]

Is this done? @Huongg

[Huongg]

hey @rashidakanchwala not 100% done, it's only done for the slicing pipeline part, but not for other features

[Huongg]

@stephkaiser has led the design work for the run-command, which you can view here

The next step will be to decide where in the UI the run command should appear—such as when switching pipelines or selecting a node/element?

cc @astrojuanlu and @stephkaiser for any further discussion on this