pict-section-mapping

Embeddable Pict view for managing data-mapper Mappings — meadow-integration-shape transforms between two beacon entities (Pull from source → apply Mappings + Solvers → Write to target).

The section provides:

• a list view of all mappings in the active scope,
• a per-row Run / Edit / Delete strip,
• an editor with form fields + a JSON MappingConfiguration textarea,
• inline run-result panels with RowsRead / RowsMapped / RowsWritten / Errors / ElapsedMs.

Talks to the data-mapper's REST surface (/mapper/mappings*), running mappings via /uv/run-mapping/:id.

The data-mapper also has a separate visual mapping editor (the Pict app at index.html) for graphical field-level mapping — that's the richer alternative for editing MappingConfiguration. This section is the lightweight CRUD + Run surface.

Install

npm install pict-section-mapping

Peer requires pict-view, pict, and pict-section-modal.

Mount

const libPictSectionMapping = require('pict-section-mapping');
const libPictSectionModal   = require('pict-section-modal');

pict.addView('Modal', {}, libPictSectionModal);

pict.addView(
    'Pict-Section-Mapping',
    Object.assign({}, libPictSectionMapping.default_configuration,
    {
        ContentDestinationAddress: '#my-destination',
        APIBaseUrl:                '/mapper',
        Mode:                      'manage',
        WriteToken:                process.env.DATA_MAPPER_WRITE_TOKEN || null
    }),
    libPictSectionMapping);

pict.views['Pict-Section-Mapping'].render();

Configuration

| Option | Default | Purpose | |------------------------------|-------------------------------|---------| | ContentDestinationAddress | #Pict-Section-Mapping | CSS selector for the section's destination div. | | APIBaseUrl | /mapper | Prefix for /mappings, /mapping/:id, /uv/run-mapping/:id. | | Mode | 'manage' | 'manage' = full CRUD + Run; 'list-only' = read-only list. | | ShowToolbar | true | Section's own toolbar (title + scope picker + "+ New" button). | | Scope | null | null reads from localStorage (key shared with the operation + dashboard sections); '' = global. | | WriteToken | null | Bearer token for writes — matches DATA_MAPPER_WRITE_TOKEN. |

Public API

const view = pict.views['Pict-Section-Mapping'];

view.openList();
view.openEditor(idOrRecordOrNull);
view.refresh();
view.runMapping(idMappingConfig);
view.deleteMapping(idMappingConfig);

Conventions followed

Built per modules/pict/CLAUDE.md. Same shape as pict-section-operation (Templates + Renderables, single-element-array slot pattern, inline handlers, pict-section-modal for prompts, AppData.Mapping.* for state).

Tests

npm install
npm test

18 mocha TDD tests cover module surface, slot population, and the API provider (REST shapes, scope round-trip, bearer-token injection on writes, run-endpoint path, error-response surfacing).