scalesApp/.claude/agent-memory/react-expert-dev/MEMORY.md

ScalesApp React Expert Memory

Key File Paths

• Report Editor root: frontend/src/components/ReportEditor/
• Element models: models/Element.jsx — OOP class hierarchy, fromJSON has elementClasses map
• Element CSS: elements.css — one block per element type
• Inspector CSS: ObjectInspector.css
• Data resolver utils: utils/dataResolver.js — resolveDBTextValue, getAvailableObjects, getAvailableFields
• Expression evaluator: utils/expressionEvaluator.js — recursive-descent, no eval

Element Type Pattern

Adding a new element type requires touching 8 files:

1. models/Element.jsx — new class + register in elementClasses map in fromJSON
2. NewElement.jsx — component file, modeled on DBTextField.jsx
3. ExpressionEditorPanel.jsx (or equivalent inspector panel)
4. EditorCanvas.jsx — import + renderElement case + click handler in handleCanvasClick
5. Toolbar.jsx — tool button
6. ObjectInspector.jsx — import panel + render for element.type === 'xxx'
7. elements.css — CSS block for new class
8. ResizeHandles.jsx — add type to getHandles switch, getHandlePosition branch, and resize logic branch

ObjectInspector Band-Detection Pattern

When a panel needs to detect if an element is inside a band (for field resolution):

const parentBand = allElements.find(el => el.type === 'band' && el.children && el.children.includes(element.id));
// Nested band handling:
if (parentBand.parentBandId) {
  const grandparentBand = allElements.find(el => el.id === parentBand.parentBandId);
  // grandparentData[0][parentBand.dataSource] → nestedData array
}

DBTextField / ExpressionField Props Pattern

Both receive: element, isSelected, isSingleSelection, onSelect, onUpdate, onDelete, onDragStart, onDrag, charWidth, charHeight, previewMode, toolMode, parentBandId

Uses hooks: useElementDrag, useElementSelection, useReportData, useBandContext

resolveDBTextValue signature

resolveDBTextValue(reportData, objectKey, fieldPath, parentBandId, { currentBandData })

• objectKey = '' for band-relative field access

ExpressionField Field Ref Format

[objectKey.fieldPath] for top-level fields, [fieldPath] for band-relative fields. Strip brackets, split on first . to get objectKey and fieldPath.