thob-capability-map/Week-2/Task-1/thob/notes.md

Thob Observations: Task 1 - Material Variant Switcher

Thob Observations from Task Notes

• Possible: yes, Implementing material color/property switching using two distinct UI patterns: discrete Buttons and a RadioGroup component.
• Implementation used:
  • Method A (Button): Discrete button nodes with individual click triggers linked to material states.
  • Method B (RadioButton): A RadioGroup utilizing a For loop to dynamically generate selectable items (Red, Blue, Yellow).
• What worked as expected: Both methods successfully switched material properties. The RadioGroup provided a much cleaner and more professional interactive experience for the user.
• Main limitation observed: The Button method is more complex and tedious from a user perspective as it requires manual layout/logic for every new option. The RadioButton method is more intuitive but triggers more background console warnings.
• Builder flow used:
  • Button: UI Flex -> Button -> Trigger logic.
  • Radio: UI Flex -> RadioGroup -> For Loop -> RadioGroupItem.
• Complexity: Low-Medium. The RadioGroup method requires slightly more "logical" setup (using the For loop) but is ultimately the more scalable option.
• Main limitation signals: Massive duplication of GetBindingData logs in the console and an occasional WebGL Context Lost during rapid state changes.
• Workaround status: Fully native; no external code scripts were required for either implementation.

Console Warnings/Errors Seen (Deduplicated) and Probable Meaning

1. Resource 404: GET https://builder.thob.studio/builder/... 404 (Not Found).
   • Probable Meaning: A generic builder error when a resource thumbnail or asset is temporarily unavailable during editing.
2. Radio Button Loop Conflict: GetBindingData... method already registered.
   • Probable Meaning: Specific to the RadioButton/For-Loop method. Indicates the builder's logic-binding system is re-registering identifiers multiple times as the loop renders UI items.
3. UI Initialization Lag: undefined is changing from uncontrolled to controlled.
   • Probable Meaning: Occurs when the RadioGroup component first renders before its state is fully defined by the Material Variant manager.
4. Interaction Stress Error: THREE.WebGLRenderer: Context Lost.
   • Probable Meaning: Observed during rapid switching in the RadioButton method. The 3D context crashed due to the frequency of property updates or browser resource throttling.

Overall Read

The RadioButton method is the recommended "best practice" for building configurators in Thob. While the Button method is simpler for one-off actions, the RadioGroup + For-Loop pattern provides the professional "Product Option" feel expected in high-end configurators. The console warnings (specifically the binding registration) suggest that the builder's internal logic management is a bit heavy during loops, but the visual performance remains reliable.