MD.OFFICE
FAL

2026-03-09

Formula Builder — Popover Positioning and Width Fixes

Achievements

  • Resolved Dropdown Clipping: Successfully wrapped the formula builder suggestion list in a PrimeNG <p-popover> with appendTo="body". This fixed the issue where the dropdown was being cut off by the containing accordion's overflow: hidden.
  • Fixed Dynamic Width: Implemented a solution to match the popover width to the input field width. Since PrimeNG's internal alignment overwrites [style] bindings on open, we hooked into (onShow) to imperatively set the popover.container.style.width after the component positions itself.
  • Refined Styling: Adjusted vertical spacing between the input and dropdown using [style]="{'margin-top': '5px'}", overcoming limitations with Tailwind classes being ignored by PrimeNG's inline positioning logic.

Technical Decisions

  • Imperative Width Control: Decided to mutate popover.container directly as the most robust way to handle width when appendTo="body" is used, as CSS inheritance is lost and [style] bindings are unreliable during PrimeNG's align() phase.
  • Documentation: Added clear comments in formula-builder.component.ts explaining the use of internal properties to ensure maintainability for future PrimeNG upgrades.

Matrix Formula Integration & Key Migration

Achievements

  • Matrix Discoverability: Extended the Formula and Rule Builders to automatically discover all number-type cells inside matrix elements (including grouped columns, simple columns, and row/column sum aggregates).
  • Resolved Hyphen Subtraction Bug: Addressed a critical issue where the backend formula parser threw errors when encountering hyphens in dynamically generated JSON keys (e.g., row-1, matrix-123), misinterpreting them as mathematical subtraction.
  • Underscore Key Normalization: Refactored matrix key generation to utilize underscores exclusively (matrix_123, row_1, group_1) across dynaform.service.ts, left-panel.config.ts, and right-panel-static.component.ts.
  • Automatic Formula Migration on Mode Toggle: Fixed a data-integrity bug where switching a matrix from simple to grouped mode (or vice versa) left stale cell keys in existing formulas. Implemented proactive scanning and rewriting (updateAllFormulas) inside onColumnModeChange to automatically migrate all formula references across the form whenever the matrix structure changes.
  • Robust Label Regex Mapping: Fixed a bug where toLabelFormula and toValueFormula partially mapped overlapping variable names due to \b word boundaries failing on underscores and hyphens. Refactored the regex to use strict (?<![\w-]) negative lookbehinds/lookaheads and implemented length-descending sorting for precise variable swapping.
  • Optimized Tree Traversal: Refactored updateFormulaFieldSuggestions to merge two separate canvas tree traversals into a single unified pass, reducing redundant loops over the form JSON graph.

Technical Decisions

  • Direct Key Mutation vs Local Workarounds: Instead of writing an expensive, temporary mapping hack to intercept hyphens before sending payloads to the backend /evaluate endpoint, decided to fix the root cause by neutralizing all UUID and default key generation to strictly use _ natively.
  • Negative Lookbehinds for Boundary Detection: Chose to replace \b with (?<![\w-]) to explicitly inform the regex engine that hyphens and underscores are part of the variable names. This prevents accidental partial replacements of variables (e.g. replacing col_1 inside my-col_1).