Add filtering of pipelines on Kedro-Viz flowchart in VSCode

[SajidAlamQB]

Description

Related to: #157

For the large Kedro projects, the absence of a filtering mechanism in the Kedro-Viz flowchart panel makes the Kedro-Viz integration nearly unusable. Implementing a filtering feature would allow users to focus on specific pipelines or subsets of nodes, thereby enhancing usability and productivity.

Development notes

New Feature: Filter Pipelines

• package.json: Added a new command kedro.filterPipelines to the list of commands.
• src/common/commands.ts: Implemented the filterPipelines function to filter pipelines based on user selection and update the project data.

Command Registration

• src/common/activationHelper.ts: Registered the new kedro.filterPipelines command and updated the registerCommandsAndEvents function to include this command. [1] [2]

Webview Integration

• src/webview/vizWebView.ts: Added a sendMessage method to KedroVizPanel to send messages to the webview, and updated the message handler to include the showPipelineFilter command. [1] [2]
• webview/src/App.jsx: Updated the App component to handle the new showPipelineFilter command and added a button to trigger the pipeline filter functionality. [1] [2] [3]

GIF

QA notes

• To test, we need to pass the selected_pipeline key with a valid pipeline name. Any subsequent changes should update the flowchart with the passed pipeline name.
• From VSCode in KedroViz component pass display.filterBtn as true

[noklam]

I see a different UI:

I wonder what's the behavior should be when someone run :Filter Pipeline before Run Kedro Viz. 2 options in mind:

1. Trigger Run Viz automatically + the filtering option
2. Do not show the Filter pipeline if viz panel does not exist.