Embeddable, filterable, annotateable Kedro-Viz react component

datajoely commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

@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 commented 5 months ago

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 commented 5 months ago

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

kedro-org / kedro-viz