DMP'25 week02 update by Justin Charles

Signed-off-by: Justin Charles <[email protected]>

Author: justin212407

src/constants/MarkdownFiles/posts/2025-06-15-dmp-25-justin212407-week02.md

@@ -0,0 +1,104 @@
+---
+title: "DMP’25 Week 02 Update by Justin Charles"
+excerpt: "Completed SVG path logic for all brick types and documented props and rendering states"
+category: "DEVELOPER NEWS"
+date: "2025-06-15"
+slug: "2025-06-15-dmp-25-justin212407-week02"
+author: "@/constants/MarkdownFiles/authors/justin-charles.md"
+tags: "dmp25,sugarlabs,week2,justin212407"
+image: "assets/Images/c4gt_DMP.png"
+---
+
+<!-- markdownlint-disable -->
+
+# Week 2 Progress Report by Safwan Sayeed
+
+**Project:** Music Blocks 4 Program Engine  
+**Mentors:** [Anindya Kundu](https://github.com/meganindya/), [Sumit Srivastava](https://github.com/sum2it)  
+**Assisting Mentors:** [Devin Ullibari](https://github.com/pikurasa/), [Walter Bender](https://github.com/walterbender)  
+**Reporting Period:** 2025-06-09 - 2025-06-15  
+
+---
+
+
+## Goals for This Week
+
+- Finalize SVG path logic for all three types of bricks  
+- Categorize and document all props passed into bricks  
+- Identify all visual states a brick can be rendered in  
+- Differentiate props and states across brick types  
+- Write comprehensive tests to verify correctness
+
+---
+
+## This Week’s Highlights
+
+### 1. Full SVG Path Generation Logic
+
+- Completed `generatePath` support for all three brick types (Simple, Expression and Compound)  
+- Rendering now properly reflects scaling, argument slots, top/bottom notches, and label widths  
+- Edge cases such as bricks with long labels or stacked arguments handled correctly
+
+### 2. Brick Input Prop Categorization
+
+- Catalogued all props across types (`strokeWidth`, `scaleFactor`, `bBoxLabel`, `bBoxArgs`, etc.)  
+- Documented their role in layout computation and how they influence final SVG shape
+
+### 3. Brick State Documentation
+
+- Mapped out all possible states a brick can be rendered in (e.g. with/without label, multiple args, missing notches)  
+- This will help improve clarity for both debugging and future features
+
+### 4. Type-wise Prop/State Differentiation
+
+- Clearly separated the logic for how each brick type handles its props and rendering states  
+- This abstraction allows brick-specific customizations without breaking general rendering flow
+
+### 5. Unified Brick Test File
+
+- Created a comprehensive Jest test file to validate path generation against expected output  
+- Covers edge cases like empty arguments, multiple stacked args, and variable heights
+
+📄 Reference: [Props & States Document – Tab 3](https://docs.google.com/document/d/1C0t4iSze2eDEv6lWbloK3MnvJgAa6HvmXmk2sQ0lCZs/edit?tab=t.99d6uc7vheda)
+
+---
+
+## Challenges & Solutions
+
+**Challenge: Mismatched Bounding Box Heights in Some Brick Types**  
+In initial tests, actual brick heights didn’t match the combined heights of `bBoxLabel` and `bBoxArgs`.  
+**Solution:** Identified a calculation flaw in vertical layout stacking. Corrected it by properly summing scaled heights and applying consistent spacing logic in path computation.
+
+**Challenge: Supporting All Brick Variants with Shared Logic**  
+Bricks share many layout rules, but also diverge in rendering.  
+**Solution:** Broke down `generatePath` into side-specific functions (`_generateLeft`, `_generateRight`, etc.) with override support depending on brick type and features like notches.
+
+---
+
+## Key Learnings
+
+- Improved understanding of scalable vector graphics and path-based layout systems  
+- Gained hands-on experience in building testable, modular rendering logic  
+- Developed systematic thinking around UI state modeling and prop-driven rendering behavior  
+
+---
+
+## Next Week’s Roadmap
+
+- Create React Components(View) to render the bricks with all its properties.
+- Create the Model components for the different Brick Types.
+
+---
+
+## Resources & References
+
+- [Props & States Document](https://docs.google.com/document/d/1C0t4iSze2eDEv6lWbloK3MnvJgAa6HvmXmk2sQ0lCZs/edit?tab=t.99d6uc7vheda)  
+- [musicblocks-v4 Repository](https://github.com/sugarlabs/musicblocks-v4)  
+
+---
+
+## Acknowledgments
+
+Thanks to my mentors for helping review the rendering logic and for encouraging a structured approach to SVG layout systems. Their early feedback made the path code significantly more robust and maintainable.
+
+---