Embeddable, filterable, annotateable Kedro-Viz react component

[datajoely]

Description

Is your feature request related to a problem? A clear and concise description of what the problem is: "I'm always frustrated when ..."

I want to embed a lightweight version of Kedro-Viz in a front-end user-interface which allows users to specify run configuration exposed by the Kedro CLI e.g.:

kedro run --to-nodes=<node_name1>,<node_name1>, --namespace=<my_namespace>

• As a user I want to filter Kedro-Viz to match the run definition of my pipeline only showing the nodes which will be executed as part of the run configuration
• As a user of the react component I want to disable both left and right sidebars since I intend to use this as an embedded element with a narrow viewport.
• As a user of the react component I want to change the style of certain to 'idle', 'active', 'pending' and 'failed' states to mirror the lifecycle of a kedro run.

I think this may bring together lots of the good work done on the project in recent months.

• React component https://github.com/kedro-org/kedro-viz/issues/1351
• Stateful URLs https://github.com/kedro-org/kedro-viz/issues/1736

Context

Why is this change important to you? How would you use it? How can it benefit other users?

Kedro Viz is a well designed, beautiful product which could grow its usefulness as a remixable, embeddable component of other applications.

Possible Implementation

(Optional) Suggest an idea for implementing the addition or change.

The React component functionality is not actually documented on the Kedro-Viz docs #1745 , so I don't have a great view on how well this works. But I think it's just a case of passing the right JSON to the object.

• Is the JSON schema defined anywhere?
• If new JSON is provided does it trigger a full refresh?
  • Is there a way to do a graceful addition/removal?
• The 'state' annotation could accept a two parameters a (1) foreground/text colour (2) a background color

Possible Alternatives

(Optional) Describe any alternative solutions or features you've considered.

Open to suggestions!

Checklist

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

[astrojuanlu]

This might already be possible to some extent https://github.com/kedro-org/kedro-viz/issues/1745#issuecomment-1939171556 worth investigating that, and then narrow down the scope of this ticket if needed

[rashidakanchwala]

@datajoely - This ticket has 3 different issues, we have created an issue on the first one related to filterable flowchart. Can I request you to create 2 seperate issues on the other 2 you mentioned, with more details and we can look into it. Thank you.

[datajoely]

These two?

As a user of the react component I want to disable both left and right sidebars since I intend to use this as an embedded element with a narrow viewport. As a user of the react component I want to change the style of certain to 'idle', 'active', 'pending' and 'failed' states to mirror the lifecycle of a kedro run.

[astrojuanlu]

Parts of this would in turn make embedding on Jupyter as showcased in https://github.com/kedro-org/kedro-viz/issues/1668#issuecomment-1839158368 or even VSCode easier