Improve Program Hierarchy Visualization and Navigation in Music Blocks UI

[priyanshuKumar56]

Overview

The current Music Blocks interface uses a vertical block-stacking model to represent program logic. While this works well for simple compositions, it becomes difficult to navigate and understand the structure when programs grow larger.

Introducing a Program Structure Explorer would provide a clearer overview of the block hierarchy and allow users to quickly navigate complex compositions.

Problem

When many blocks are added:

• The program becomes a long vertical stack
• It is difficult to understand the overall structure of the composition
• Users must scroll extensively to find specific blocks
• There is no quick way to jump between sections of the program

This reduces usability for larger music compositions.

Proposed Solution

Add a Program Structure Explorer panel that visualizes the hierarchy of blocks in a collapsible tree view.

Example structure:

Program
 ├ Instrument: Guitar
 │   ├ Note: Sol
 │   └ Note: Mi
 ├ Rhythm Pattern
 └ Melody Sequence

Selecting an item in the tree should focus or highlight the corresponding block in the canvas.

Implementation Approach

1. Extract Block Hierarchy

   • Use the existing block parent-child relationships from the block workspace.
   • Build a hierarchical data structure representing the block tree.

2. Create a Sidebar Tree Component

   • Render the hierarchy as a collapsible tree view in a new sidebar panel.

3. Block Navigation

   • Clicking a tree node scrolls the workspace to the corresponding block.

4. Live Updates

   • Update the tree dynamically when blocks are added, removed, or moved.

Expected Benefits

• Clear visualization of program structure
• Faster navigation within large compositions
• Improved usability for complex musical logic
• Modernized UI while preserving the current block editor

Optional Future Improvements

• Block search functionality
• Workspace minimap
• Collapsible block groups
• Timeline-based visualization for musical sequences

Screenshot

(Current UI example attached)

Notes

This feature would complement the existing block editor without changing the current workflow, making the interface easier to use as compositions grow in complexity.

[thevanshit]

Hi! @priyanshuKumar56 I'd like to work on this issue.

After exploring the Music Blocks codebase, I noticed that blocks are managed through the blockList structure where each block maintains its parent-child relationships via the connections array. Based on this, my approach for implementing the Program Structure Explorer would be:

Proposed approach

1. Extract block hierarchy

   • Identify top-level blocks where connections[0] === null.
   • Recursively traverse the connections array to build a hierarchical tree structure.

2. Create a Program Explorer UI

   • Implement a new widget (similar to existing widgets like Rhythm Maker) that displays the block hierarchy as a collapsible tree.

3. Navigation

   • Clicking a node in the tree will scroll/focus the canvas on the corresponding block and highlight it.

4. Live updates

   • Refresh the hierarchy view whenever blocks are created, moved, or deleted.

Initially, I plan to implement a minimal version with:

• hierarchy extraction
• collapsible tree visualization
• block focus on click

Additional features like block search or minimap can be considered later.
Please let me know if this approach aligns with the intended direction before I begin implementing it.

[021nirav-blip]

hi @priyanshuKumar56
please checkout this PR : #6145 (comment)