Skip to content

Improve program hierarchy 6123#6145

Open
021nirav-blip wants to merge 4 commits intosugarlabs:masterfrom
021nirav-blip:Improve-program-hierarchy-6123
Open

Improve program hierarchy 6123#6145
021nirav-blip wants to merge 4 commits intosugarlabs:masterfrom
021nirav-blip:Improve-program-hierarchy-6123

Conversation

@021nirav-blip
Copy link
Contributor

@021nirav-blip 021nirav-blip commented Mar 8, 2026 •
edited
Loading

Summary

Adds a Program Structure Explorer sidebar that visualizes block hierarchy
as a collapsible tree view, addressing #6123.

Changes

  • js/program-explorer.js — hierarchy extraction, tree rendering,
    navigation, and live updates (~491 lines)
  • css/program-explorer.css — sidebar styling with dark mode and
    responsive support
  • js/activity.js — explorer initialization in finishedLoading
  • js/loader.js — module shim configuration
  • index.html — resource loading

How It Works

  • Identifies root blocks where connections[0] === null
  • Recursively traverses connections to build the hierarchy tree
  • Clicking a tree node scrolls and highlights the corresponding block
  • Tree updates when blocks are added, moved, or deleted

Testing

Manually tested with:

  • Nested control structures (loops, conditionals)
  • Action blocks and their calls
  • Pitch and rhythm block stacks
Screencast.From.2026-03-08.12-05-03.mp4

this resolves issue: #6123

  • Bug Fix
  • Feature
  • Performance
  • Tests
  • Documentation

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2026

✅ All Jest tests passed! This PR is ready to merge.

1 similar comment
@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2026

✅ All Jest tests passed! This PR is ready to merge.

@github-actions github-actions bot added the performance Improves performance (load time, memory, rendering) label Mar 8, 2026
Implement Program Structure Explorer (GitHub issue sugarlabs#6123)
e2c8f91 
- Add hierarchical tree view sidebar for block navigation
- Implement collapsible nodes with expand/collapse functionality
- Add block navigation and highlighting features
- Include responsive design with dark mode support
- Integrate with existing block system and stage
- Add toggle button and proper event handling

Files:
- js/program-explorer.js (new) - Core explorer logic
- css/program-explorer.css (new) - Complete styling
- js/activity.js (modified) - Explorer initialization
- js/loader.js (modified) - Module configuration
- index.html (modified) - Resource loading
- PROGRAM_EXPLORER_IMPLEMENTATION.md (new) - Documentation
@021nirav-blip 021nirav-blip force-pushed the Improve-program-hierarchy-6123 branch from b79797d to e2c8f91 Compare March 8, 2026 06:45
@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2026

✅ All Jest tests passed! This PR is ready to merge.

@021nirav-blip 021nirav-blip mentioned this pull request Mar 8, 2026
Open
@Ashutoshx7
Copy link
Contributor

Ashutoshx7 commented Mar 8, 2026

Any significant changes are always needs to be discusssed in the meet and then only we add
sunday 5:30 ist

and why did u checked performace its a feature
and what is a need for it though?

@021nirav-blip
Copy link
Contributor Author

021nirav-blip commented Mar 8, 2026 •
edited
Loading

I apologize for not discussing this significant change in the meeting first. I should have followed the established process.

I have also unchecked the Performance category — this is purely
a feature addition.
The feature addresses GitHub issue #6123 where users reported difficulty navigating large compositions due to vertical block stacking. The program explorer provides:

  • Hierarchical view of block structure
  • Quick navigation to specific blocks
  • Better overview of complex programs

Would you like me to hold off on further development until we can discuss this more?
@Ashutoshx7

@github-actions github-actions bot added feature Adds new functionality and removed performance Improves performance (load time, memory, rendering) labels Mar 8, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

GraphicsBlocks.test.js

Clean up Program Explorer implementation
5473f04 
- Remove temporary documentation file
- Remove unnecessary comments and code
- Simplify method implementations
- Maintain clean, production-ready code

Files cleaned:
- js/program-explorer.js (removed redundant comments)
- css/program-explorer.css (kept essential styles only)
- PROGRAM_EXPLORER_IMPLEMENTATION.md (removed temporary file)
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

✅ All Jest tests passed! This PR is ready to merge.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

✅ All Jest tests passed! This PR is ready to merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

feature Adds new functionality

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@021nirav-blip @Ashutoshx7