Collapse/Expand namespace pipeline with button

[jitu5]

Description

Currently, in the Kedro VSCode extension, users can expand pipelines but lack the ability to collapse them. This limitation hinders efficient navigation and management of complex pipelines within the flowchart view.

Context

The absence of a collapse feature affects users working with intricate pipelines, making it challenging to focus on specific sections. Implementing a collapse functionality would enhance usability by allowing users to manage pipeline visibility effectively, thereby improving workflow efficiency.

Possible Implementation

Introduce a collapse/expand toggle directly within the flowchart view, enabling users to control the visibility of individual pipeline sections by passing relevant props for Kedro-Viz react component in VSCode.

Acceptance Criteria

• Users can see a toggle button/icon to collapse or expand individual pipeline sections.
• Clicking the toggle button collapses the selected pipeline section and hides its nodes.
• Clicking the toggle button again expands the pipeline section, revealing the previously hidden nodes.

Checklist

• Include labels so that we can categorise your feature request

[rashidakanchwala]

The figma design for this ticket are here - Designs can be found here - https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=2936-125807&t=Km8oiXjUlRyVBUMk-4

In our React component, we need to introduce a new dictionary called toolbar to manage toolbarOptions. This will enable or disable the primary toolbar and its options.

For example, in the VS Code extension, we will need to disable the export option in the primary toolbar.