Document Kedro-Viz React component usage

[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 ..."

The usage of Kedro Viz as a react component is not present in the docs.

The only way for a user to discover this functionality is by trawling through issues:
#1351
#1293

This is a powerful feature we should enable more users to take advantage of.

Context

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

I was looking into how to do this and couldn't find examples in the docs

Possible Implementation

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

Possible Alternatives

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

N/A

Checklist

• Include labels so that we can categorise your feature request

[astrojuanlu]

I've been thinking about this for a while, 100 % agreed with documenting what we already have at the very least 👍🏽

[tynandebold]

It exists in the README here: https://github.com/kedro-org/kedro-viz?tab=readme-ov-file#standalone-react-component-usage

If a user is looking for how to use it like this we should send them here until it's added to the docs.

Edit: this part is important, too.

[rashidakanchwala]

Also maybe documenting how to use graph component e.g. the way layer team did.

[astrojuanlu]

The current docs https://github.com/kedro-org/kedro-viz?tab=readme-ov-file#standalone-react-component-usage are unclear:

kedro-viz/README.md

Lines 254 to 258 in 2a6cff7

	The JSON can be obtained by running:
	```bash
	kedro viz run --save-file=filename
	```

but then if I do that, here's what I get:

exportation/api/
├── main
├── nodes
│   ├── 23c94afb
│   ├── 28754fab
│   ├── 2ab3579f
│   ├── 329e963c
│   ├── 369acf98
│   ├── 493ad53a
│   ├── 4ca0be7b
│   ├── 7b2c6e04
│   ├── 81b5866f
│   ├── 872981f9
│   ├── 93d834e1
│   ├── 966b9734
│   ├── 97202ac0
│   ├── 9ca016a8
│   ├── 9e16ddd2
│   ├── a9506115
│   ├── aadc655d
│   ├── ab512939
│   ├── acdb05cf
│   ├── aed46479
│   ├── c071dac9
│   ├── c1311718
│   ├── cae2d1c7
│   ├── d75ec4b0
│   ├── f1d596c2
│   └── f6d9538c
└── pipelines
    ├── __default__
    ├── data_processing
    ├── data_science
    └── reporting

3 directories, 31 files

where's the JSON? What am I supposed to do with this?

[astrojuanlu]

From #1850:

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?

[jitu5]

Had a discussion with @astrojuanlu and @stephkaiser on Kedro-Viz as react component.

The discussion happens mainly around feature request from @datajoely (Managed analytics), what is missing from Kedro-Viz react component and what can be scoped under this ticket.

The major feature request from Managed analytics:

1. Disabling some components of kedro-Viz
   a. Global toolbar
   b. Primary toolbar (need options to turn off each icon like layer, label)
   c. User onboarding workflow
   d. Need preview mode (only flowchart)
   e. When a user clicks on a node, send the metadata of the associated node to the caller/user of the viz component. The user can then display this metadata according to their needs.

2. Some of the existing props is not working
   a. display.sidebar(It only minimizes the sidebar/primaryToolbar but does not hide it.)

3. Need styling option to add custom theme
   a. overwrite the style of flowchart like bg, node, links etc

4. Missing documentation on how to use props React component

5. Need API to do node filtering at FE

Out of the above we mainly discuss 1.d, 1.e, 3 & 4 point. for the point 1.e and 3 needs more discussion and can be handle separately later. For now under this ticket I am focusing on documenting on what we have and exploring preview mode(flowchart only).

[jitu5]

@datajoely
Below is the example of kedro-Viz as react component with all possible pros

  <KedroViz
    data={data}
    display={{
      globalToolbar: false,
      miniMap: false,
      expandAllPipelines: false,
      sidebar: false,
    }}
    visible={{
      labelBtn: false,
      layerBtn: false,
      exportBtn: false,
      pipelineBtn: false,
      sidebar: false,
    }}
    theme="dark"
  /> 

I show in management-console code how you are using props, but for now if you follow props structure as mentioned above it should solve your disabling viz components problem like global toolbar & user onboarding workflow. the only component left which is not part of current props is primaryToolbar. For this ticket I will explore more about primaryToolbar.

[datajoely]

Great!

[astrojuanlu]

xref #1943

[astrojuanlu]

Expected outcomes of this ticket:

• https://www.npmjs.com/package/@quantumblack/kedro-viz only describes the JavaScript part, hence excluding the Python part
• https://www.npmjs.com/package/@quantumblack/kedro-viz includes a code snippet exploiting all the properties, as well as an explanation of what each of these properties mean Document Kedro-Viz React component usage #1745 (comment)
• https://www.npmjs.com/package/@quantumblack/kedro-viz showcases a toy example, maybe leveraging https://jsfiddle.net, or a new kedro-viz-standalone repo with a simple index.html, package.json, and an README
• https://docs.kedro.org/projects/kedro-viz/ links to https://www.npmjs.com/package/@quantumblack/kedro-viz for further info on how to use the React component in a standalone fashion, given that now there are zero mentions

[rashidakanchwala]

Closing this as done

[astrojuanlu]

Fixed in #1992