https://kedro.org/ logo
Join Slack
Powered by
Hey team! Is there a way to download a pipeline's ...
# questions
p
Hey team! Is there a way to download a pipeline's kedro viz visualisation programmatically?
āž• 1
1ļøāƒ£ 1
r
Nope, u can export it as png/svg from the UI
šŸ‘ 1
p
I see
d
You can export the json form the cli?
p
Yeah I saw that we are getting json as response from the API endpoint
d
Yeah you can do that and it can also read just the json mode too
p
Not sure tho how the svg is created. Maybe something done by the frontend code?
d
Yeah the actual image needs to be rendered because the layout engine executes at runtime
p
Gotcha
j
maybe with @Ravi Kumar Pillaā€™s new 
NotebookVisualizer
, or the bundled ESM package https://github.com/kedro-org/kedro-viz/tree/main/esm and some browser automation solution it would be feasible to make something programmatic?
thankyou 1
would love to know more about your use case @Puneet Saini
p
I wanted to automate the snapshots for the kedro pipeline at sub-pipeline level which is why I needed this.
Having the cool diagram from kedro-viz would have been amazing
I created something using graphviz as of now which will do for now
How can I use the ESM package btw? Do we have some documentation for the same?
j
try this:
Copy code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kedro-Viz</title>
  </head>
  <body>
    <div id="kedro-viz-1234" style="height: 600px"></div>
    <script src="<https://cdn.jsdelivr.net/npm/react@18.2/umd/react.production.min.js>"></script>
    <!-- script src="<https://cdn.jsdelivr.net/npm/react-dom@18.2/umd/react-dom.production.min.js>"></script -->
    <script type="module">
      import { KedroViz, createRoot } from '<https://cdn.jsdelivr.net/gh/kedro-org/kedro-viz@main/esm/kedro-viz.production.mjs>';

      const viz_container = document.getElementById('kedro-viz-1234');
      const options = {
        display: {
          expandPipelinesBtn: false,
          exportBtn: false,
          globalNavigation: false,
          labelBtn: false,
          layerBtn: false,
          metadataPanel: true,
          miniMap: false,
          sidebar: false,
          zoomToolbar: false,
        },
        expandAllPipelines: false,
        behaviour: {
          reFocus: false,
        },
        theme: 'dark',
      };

      fetch('spaceflights.mock.json')
        .then((response) => response.json())
        .then((json) => {
          if (createRoot && viz_container) {
            const viz_root = createRoot(viz_container);
            viz_root.render(
              React.createElement(KedroViz, {
                data: json,
                options: options,
              })
            );
          }
        })
        .catch((error) => console.error('Error loading data:', error));
    </script>
  </body>
</html>
šŸŽ‰ 3
(fixed url)
extra docs for the JS part can be found at https://www.npmjs.com/package/@quantumblack/kedro-viz
p
MAGIC
Nice! Thank you Juan! Very helpful
j
šŸ”„ any time!
extreme teamwork 2
4 Views
Open in Slack
PreviousNext
Powered by