Implement the Functionality to Select and Shift-Hold to Select 2 Nodes from the Chart

[Huongg]

Description

The idea is to allow users to slice the pipeline directly in the flowchart. When a user selects one node and then shift-holds and selects a second node, the view should update to reflect the sliced pipeline, showing only the portion from the first selected node to the second selected node. This ticket is part of the larger ticket #1784, "Make Kedro-Viz flowchart filterable."

Context

This feature allows users to focus on specific parts of the pipeline. By enabling this slicing functionality, users can more easily debug, analyze, and understand complex pipelines.

Tasks:

• [ ] Investigate on how to implement the multi-node selection with shift-hold in the flowchart view

Checklist

• [ ] Include labels so that we can categorise your feature request

[Huongg]

To summarise my SPIKE work

1. Data flow

Below is the diagram to illustrate how data flows through the application for this function. You can find my POC branch here

• When any action is performed on a node click, the system checks if the shift key is used.
• If the shift key is pressed, the application triggers the filterNodes reducer and selector.
• This process identifies the new visible nodes on the chart based on the action performed.

2. Next Step:

Design Requirements: we need input from @stephkaiser to enhance the user interface and user experience. The following elements should be included:

• The appearance and functionality of buttons.
• The color scheme for selected nodes and other interactive elements.
• The general flow and styling