Introduce `metadataPanel` prop in Kedro-Viz react component

[jitu5]

This PR addresses a requirement for cases where users of Kedro-Viz as a React component in embedded mode want to hide metadata panel.

<KedroViz display={{metadataPanel: false}} data={json} />

Below is the metadata panel which will be visible when user clicks on node.

Note: When user set metadataPanel to false, nothing will happen when user clicks on node.

Checklist

• [x] 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

[ravi-kumar-pilla]

Hi @jitu5 ,

I am testing the PR and it hides the metadata panel based on the display flag. I found a minor issue which seems to be present in demo site as well. Wanted to confirm if it is an expected behavior. Steps taken -

1. Click on a func node/dataset.
2. The node gets highlighted in the flowchart and in the main menu
3. Now if I click on a modular pipeline, the modular pipeline gets expanded
4. But, the node highlighted is still the node clicked at step1.
5. Should we remove the focus from the node clicked at step1 ? This seems like a bug (even without this PR)

Thank you

[ravi-kumar-pilla]

Hi @jitu5 , I understand we are not showing the metadata panel based on the display flag but I think we should still honour the stateful URL. As of now, when I click on a node, the selected node id (sid) seems missing in the URL.

Thank you