Phase 5.2: Enhanced Block Configuration Modal - COMPLETE

Status: ✅ COMPLETE
Date: October 24, 2025
Phase: 5.2 - Block Configuration UI Enhancement

Overview

Enhanced the existing block configuration modal in the Logic Builder to support the new block.config structure introduced in Phase 5.1. Instead of creating a new modal component, we upgraded the existing "Edit Block" modal with a tabbed configuration system.

Implementation Summary

1. Enhanced Configuration Section with Tabs

File: libs/singularity-lib/src/lib/components/logic-builder/logic-builder.component.html

Added a tabbed interface to the Configuration section:

• Inputs Tab: Configure how each input port receives data
• Outputs Tab: Configure where block results are stored
• Settings Tab: Block-specific operational settings

2. Inputs Tab Features

For each input port, users can configure:

Input Mode Selection

• Connection: Data comes from a connected port (default)
• Variable: Data comes from a variable reference (e.g., $myVar)
• Constant: Fixed value set in the block

Conditional Fields

• Variable Mode: Input field for variable name with $ prefix helper
• Constant Mode:
  • Number input for number type ports
  • Boolean selector for boolean type ports
  • Text input for all other types
• Default Value: Fallback value if primary source is unavailable

3. Outputs Tab Features

For each output port, users can configure:

• Variable Name: Where to store the block's result (e.g., sum, userData, result)
• Helper text explaining variable usage

4. Settings Tab Features

Block-specific settings based on type/category:

Math Function Blocks

• Operation selector: Add, Subtract, Multiply, Divide, Power, Square Root, Min/Max, Round, Floor, Ceiling, Absolute Value

String Function Blocks

• Operation selector: Uppercase, Lowercase, Capitalize, Reverse, Length, Concatenate, Split, Replace, Trim

Database Action Blocks

• Operation selector: Save, Get, Update, Remove, List, Query
• Collection/Table name input

Legacy Configuration

• Displays old block.configuration fields for backward compatibility

TypeScript Methods Added

File: libs/singularity-lib/src/lib/components/logic-builder/logic-builder.component.ts

Added 11 new methods to support the configuration UI:

State Management

1. configTab: Property to track active tab ('inputs' | 'outputs' | 'settings')

Input Configuration Methods

2. getInputConfig(portName: string): Retrieves input configuration
3. setInputConfigType(portName: string, event): Sets input type (variable/constant/connection)
4. setInputVariableName(portName: string, event): Sets variable name for variable inputs
5. setInputConstantValue(portName: string, event): Sets constant value with type conversion
6. setInputDefaultValue(portName: string, event): Sets fallback default value

Output Configuration Methods

7. getOutputConfig(portName: string): Retrieves output configuration
8. setOutputVariableName(portName: string, event): Sets output variable name

Settings Configuration Methods

9. getSettingsConfig(key: string): Retrieves settings value
10. setSettingsConfig(key: string, event): Sets settings value

Utility Methods

11. hasAnySettings(): Checks if block has configurable settings
12. Updated closeBlockEditor(): Resets config tab to 'inputs' on close

SCSS Styling Added

File: libs/singularity-lib/src/lib/components/logic-builder/logic-builder.component.scss

Added ~215 lines of comprehensive styling for the new configuration UI:

Tab Navigation (.config-tabs)

• Modern tab buttons with hover effects
• Active tab with gradient background and glow effect
• Icon indicators for each tab

Tab Content (.config-tab-content)

• Flexible vertical layout with spacing
• Smooth animations

Configuration Item Cards (.config-input-item, .config-output-item, .settings-item)

• Card-based layout with subtle backgrounds
• Hover effects for better interactivity
• Rounded corners and borders

Input/Output Headers

• Port name with icon
• Data type badge (e.g., NUMBER, BOOLEAN)
• Required indicator badge for mandatory inputs

Form Controls

• All inputs styled consistently
• Focus states with glow effects
• Placeholder text styling
• Type-specific inputs (number, boolean selector)

Settings Divider

• Visual separator for legacy configuration
• Gradient line with centered text

Key Features

1. Smart Type Handling

• Automatic type conversion for number inputs (parseFloat)
• Boolean value conversion (string 'true'/'false' → boolean)
• Type-aware input fields (number input for number ports, select for boolean ports)

2. Backward Compatibility

• New block.config structure is optional
• Old block.configuration still displays in Settings tab under "Legacy Configuration"
• Existing blocks work without modification

3. User-Friendly UI

• Tabbed interface reduces visual clutter
• Contextual help text (e.g., "Use $ prefix for test variables")
• Empty states with helpful messages

4. Real-Time Updates

• All changes immediately update the block's config object
• Change detection triggered on every update
• Console logging for debugging

5. Complete Persistence

• All configuration stored in block.config (part of LogicBlock interface)
• Automatically saved when user clicks "Save Changes"
• Full JSON serialization for export/import

Integration with Phase 5.1 & 5.4

This UI enhancement works seamlessly with:

• Phase 5.1: Uses the block.config data structure added to LogicBlock interface
• Phase 5.4: Configuration is read by LogicExecutionEngineService during flow execution:
  • resolveInputsFromConfig() reads input configuration
  • storeOutputsFromConfig() writes output results
  • Settings are used to determine operation types

Technical Highlights

1. Automatic Initialization

All setter methods automatically initialize the config structure if it doesn't exist:

if (!this.editingBlock.config) this.editingBlock.config = {};
if (!this.editingBlock.config.inputs) this.editingBlock.config.inputs = {};

This ensures no null reference errors and provides a smooth UX.

2. Type-Safe Value Conversion

if (port.dataType === 'number') {
  value = parseFloat(value);
} else if (port.dataType === 'boolean') {
  value = value === 'true';
}

Ensures values are stored with correct types for execution.

3. Conditional Rendering

Angular's @if control flow intelligently shows/hides fields based on:

• Selected input type (variable/constant/connection)
• Port data type (number/boolean/string)
• Block type and category (math/string/database)

Files Modified

1. logic-builder.component.html (~255 lines added)

   • Replaced simple config grid with tabbed interface
   • Added Inputs, Outputs, and Settings tabs
   • Conditional rendering for different input modes

2. logic-builder.component.ts (~185 lines added)

   • 11 new protected methods for config management
   • Type-safe value handling
   • Automatic config structure initialization

3. logic-builder.component.scss (~215 lines added)

   • Complete styling for tabs and config UI
   • Modern, accessible design
   • Hover effects and focus states

Testing Notes

Manual Testing Checklist

• Tabs switch correctly (Inputs, Outputs, Settings)
• Input mode selector changes available fields
• Variable name input accepts text
• Constant value input type matches port data type
• Default value input persists values
• Output variable name input works
• Settings tab shows correct options for block types
• Save Changes persists all configuration
• Configuration survives page refresh (Flash Persistence)
• Legacy configuration still displays

Edge Cases Handled

• Block with no inputs/outputs shows helpful empty state
• Block with no settings shows "No additional settings" message
• Type conversion for number and boolean values
• Null/undefined checks prevent errors

What's Next

With Phase 5.2 complete, the next steps are:

1. Phase 5.3: Inline Quick Config - Add quick-edit controls directly on block cards for common operations
2. Phase 6: AI Integration - Add AI assistant for block configuration
3. Phase 7.4: Export/Import UI Buttons - Add buttons to header for flow export/import

Screenshots

The enhanced modal now displays:

1. Header: Block icon, title, type badge, close button
2. Block Properties: Name, Title, Description, Color, Icon, Status (existing, unchanged)
3. Configuration (NEW):
   • Tabs: Inputs, Outputs, Settings
   • Input config: Type selector, variable/constant fields, default value
   • Output config: Variable name input
   • Settings: Operation selectors, collection inputs, legacy config
4. Port Connections: Input/Output ports with connection status (existing, unchanged)
5. Footer: Cancel and Save Changes buttons (existing, unchanged)

Conclusion

Phase 5.2 successfully transforms the block configuration experience from a simple, static modal to a powerful, tabbed configuration system. Users can now fully customize how blocks receive inputs, where they store outputs, and what operations they perform - all through an intuitive UI.

The implementation maintains backward compatibility, integrates seamlessly with the execution engine, and provides a solid foundation for AI-assisted configuration in Phase 6.

Status: ✅ COMPLETE - Ready for Phase 5.3