Component Architecture

Outline

ReportEntry (entry point: src/components/report-entry/index.tsx)
├── ActionsBar
│   └── OpenCellCounterButton   ← opens CellCounterModal
│
└── CellCounterModal             ← modal opened from ReportEntry
    └── CellCounter             (src/components/reusable/CellCounter/index.tsx)
        ├── CellCounterConfigurations
        │   ├── MappingListView
        │   ├── MappingEditorModal
        │   └── SaveMappingsAction (uses services.ts)
        │
        ├── CellCounterEntry
        │   ├── CellCounterKeyBoardView
        │   │   └── KeyButton (plays playKeySound / playErrorSound via helpers)
        │   ├── CellCounterTableView
        │   │   └── InlineCountEditor
        │   ├── CellCounterPieChart
        │   └── CellCounterInstruction
        │
        ├── helpers.ts    ← buildDerivedLookup, buildReportFormatToKeyLookup, initializeCountsFromReportValues, buildKeyboardRows, exportValuesHandler, play sounds
        ├── services.ts   ← getTestCellCounterMappings, saveCellCounterMappings, getDefaultCells
        ├── types.ts
        ├── constants.ts
        └── styles.module.scss

Integration note:
- "Send values" in CellCounter invokes exportValuesHandler (helpers.ts) to map counts into ReportEntry parameters (via callback or shared store/API).

Components

CellCounter (index.tsx)

Top-level wrapper that exposes configuration and entry flows. Opens as a modal and wires configuration and entry together.

CellCounterConfigurations (CellCounterConfigurations.tsx)

UI to select a test, load and save mappings, edit mapping list, and launch the mapping editor. Uses services.ts for persistence.

CellCounterEntry

Orchestrates the counting session. Holds counts and change stack, initializes counts from report values, and coordinates views along with the export action.

CellCounterKeyBoardView

Visual keyboard mapped to cells. Handles key presses, plays key or error sounds, and delegates count updates to CellCounterEntry.

CellCounterTableView

Tabular editable view of counts. Supports inline edits, reset, undo, and direct updates to Entry state.

CellCounterPieChart

Visual summary of counts showing proportions and distribution. Helps validate data before exporting.

CellCounterInstruction

Provides short usage guidance such as key bindings, reset actions, and sending values.

types.ts / constants.ts / styles.module.scss

Shared types, configuration (keyboard rows, limits), and styling for the component.

Component Responsibilities

• CellCounter (index.tsx)
  Top-level container that toggles between configuration and entry views, passes props and callbacks to child components, and exposes the "Send values" action to ReportEntry.

• CellCounterConfigurations
  Fetches available tests, displays mapping lists, and persists mapping changes using services.ts.

• CellCounterEntry
  Session controller. Initializes counts from report values or defaults, manages counts and change stack, coordinates keyboard, table, and pie views, and invokes export logic.

• CellCounterKeyBoardView
  Keyboard UI that maps key presses to derived cell entries. Triggers increment or decrement actions and plays audio feedback.

• CellCounterTableView
  Editable grid of counts allowing inline edits, reset, undo, and manual adjustments that reflect in Entry state.

• CellCounterPieChart
  Visual validation of proportions to confirm counts before export.

• CellCounterInstruction
  Concise usage help for operators.

• helpers.ts
  Pure logic for building fast lookups such as buildDerivedLookup and buildReportFormatToKeyLookup, initializing state, constructing keyboard rows, and exporting counts into report-format payloads.

• services.ts
  API and persistence layer for mappings and defaults.