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 kedro-viz with React Component #1351
• Stateful URLs Extending stateful URLS  #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

• Include labels so that we can categorise your feature request

[astrojuanlu]

This might already be possible to some extent #1745 (comment) 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 #1668 (comment) or even VSCode easier

[astrojuanlu]

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

Could you clarify this one a bit more @datajoely ? It's unlike the others.

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.

The truth is that I have no idea of what's possible currently until we properly tackle #1745 , this should be high priority.

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.

Already being tracked in different issues and discussions: #1148, #1852. I think there's enough evidence that we should do something about this, but it's unclear what or how. This will probably need some research I assume @stephkaiser ?

[datajoely]

@astrojuanlu like dbt I want a 1:1 relationship with the filtering syntax in the CLI and Viz. Moreover, I want this logic accessible in the front-end without the need for a server so it works as an embedded component.