Support for node previews (mermaid, text and image)

[ravi-kumar-pilla]

Description

Related to kedro-org/kedro#5317

Development notes

• Added UI + backend support to show previews for TaskNodes (text + mermaid diagrams).

Backend changes

• Extended node responses to include preview data (see package/kedro_viz/api/rest/responses/nodes.py). This enables the frontend to request/render previews without extra round-trips.

Frontend changes

• Added mermaid-renderer (uses mermaid) and text-renderer (with code block support). Components and styles added under src/components/*. Tests included for renderers.
• Updated src/utils/normalize-preview.js to normalize TaskNode previews

QA notes

• All tests should pass

To ease testing process, I created a test-branch with a combination of #2553 , #2554 and preview_tests pipeline which is only added to test various previews

• Install kedro from main branch - uv pip install git+https://github.com/kedro-org/kedro@main
• Install kedro-viz from test branch - pip install git+https://github.com/kedro-org/kedro-viz.git@test/task_node_previews#subdirectory=package
• cd demo-project
• Run kedro viz
• Test for all DataNode and TaskNode previews
• Alternately you can test for any kedro project implementing DataNode previews as before and TaskNode previews as documented Implement user-injectable node preview function kedro#5317

NOTE: Text, Mermaid and Image TaskNode previews are supported as of now

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

[jitu5]

Thanks.

[ElenaKhaustova]

Thank you, @ravi-kumar-pilla 👍

I've tested it once again with the academy project and can confirm it now works as expected and the flickering issue is gone!

[ElenaKhaustova]

One thing that came to mind is that we may apply a default Kedro style to these diagrams to make them look better in case the style is not defined by the user. But this is for a separate PR.

[ravi-kumar-pilla]

One thing that came to mind is that we may apply a default Kedro style to these diagrams to make them look better in case

There is default mermaid config - https://github.com/kedro-org/kedro-viz/pull/2554/changes#diff-273d7957d8946a18bcd8d0369826fe0a084f74118a1fa20f823c5263b1bf3c96R12

But we can improve on this. Thank you

[rashidakanchwala]

thank you!