search

kedro-org / kedro-viz

Visualise your Kedro data and machine-learning pipelines and track your experiments.
https://demo.kedro.org
Apache License 2.0
650 stars 107 forks source link

Document Kedro-Viz React component usage #1745

Open datajoely opened 5 months ago

datajoely commented 5 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 ..."

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: https://github.com/kedro-org/kedro-viz/issues/1351 https://github.com/kedro-org/kedro-viz/issues/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

astrojuanlu commented 5 months ago

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

tynandebold commented 5 months ago

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

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

astrojuanlu commented 3 months ago

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

https://github.com/kedro-org/kedro-viz/blob/2a6cff73b3ab19f74dc90b979255b212d669b389/README.md?plain=1#L254-L258

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

From https://github.com/kedro-org/kedro-viz/discussions/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 commented 1 month ago

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 commented 1 month ago

@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.

Screenshot 2024-06-13 at 6 12 31 p m
datajoely commented 1 month ago

Great!

astrojuanlu commented 1 month ago

xref https://github.com/kedro-org/kedro-viz/discussions/1943

astrojuanlu commented 1 month ago

Expected outcomes of this ticket:

image