Introduce onActionCallback prop in Kedro-Viz react component

[jitu5]

Description

Resolves #2022

This PR addresses a requirement for users of Kedro-Viz as a React component in embedded mode. It allows displaying node metadata in a custom UI. Additionally, it supports the VSCode extension use case where clicking on a node passes the node data to the extension to open the relevant file.

<KedroViz 
  data={data} 
  options={...}
  onActionCallback={(action) => {
    console.log('Action: ', action);
  }}
/>

Below is the action format, which will be pass as argument to call back function

action = {
  type: <ACTION_NAME>,
  payload: <PAYLOAD_OF_ANY_TYPE>
}

Note: We can not put onNodeClickCallback under a options prop as onActionCallback is a callback function and options are Redux state, it should only contain plain JavaScript objects, arrays, and primitives.

Development notes

• Callback is pass to store via configureStore in App.js
• Callback call happens in createCallbackMiddleware
• On TOGGLE_NODE_CLICKED action intercept in middleware, using clicked node id and state.graph.nodes entire node object is pass as an argument to callback.

QA notes

You can test new prop in src/components/container.js as is the entry point or top level component for a standalone use case.

import React from 'react';
import App from '../app';
import getPipelineData from '../../utils/data-source';
import './container.scss';

/**
 * Top-level component for the use-case where Kedro-Viz is run as a standalone
 * app rather than imported as a library/package into a larger application.
 */
const Container = () => (
  <>
    <App
      options={{
        display: {
          globalNavigation: false,
          metadataPanel: false,
          sidebar: false,
        },
        theme: 'dark',
      }}
      onActionCallback ={(action) => {
        console.log('Action: ', action);
      }}
      data={getPipelineData()}
    />
  </>
);

export default Container;

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[Huongg]

hey generally the PR is looking pretty good and simple, thank you @jitu5 . My first thought would be what happens if we introduce another callback? eg: for slicing, run command etc. Would it be better to have a group for all the callback? Let me know your thought

<KedroViz 
  data={data} 
  options={...}
  callbacks={
     onNodeClick={(node) => {
         console.log('Node clicked:', node);
      }} 
     onRunCommandClick={(runCommand) => ...}
  }
/>

[jitu5]

hey generally the PR is looking pretty good and simple, thank you @jitu5 . My first thought would be what happens if we introduce another callback? eg: for slicing, run command etc. Would it be better to have a group for all the callback? Let me know your thought

<KedroViz 
  data={data} 
  options={...}
  callbacks={
     onNodeClick={(node) => {
         console.log('Node clicked:', node);
      }} 
     onRunCommandClick={(runCommand) => ...}
  }
/>

@Huongg I made changes to accept any event or action if we want to use a callback, as shown below.

<KedroViz 
  data={data} 
  options={...}
  onActionCallback={(action) => {
    console.log('Action: ', action);
  }}
/>

Below is the action format, which will be pass as argument to call back function

action = {
  type: <ACTION_NAME>,
  payload: <PAYLOAD_OF_ANY_TYPE>
}

[rashidakanchwala]

Look's great!. thanks @jitu5

[Huongg]

thanks for the update @jitu5 . looks good to me too