Field Mapping

\n Review and adjust the field mappings to CDM ISDA model\n

\n \n ← Back to Upload\n \n

\n\n {/* Summary Stats */}\n

{mappings.length}

Mapped Fields

{unmappedFields.length}

Unmapped Fields

\n {mappings.filter(m => m.validationStatus === 'valid').length}\n

Valid Mappings

\n {mappings.filter(m => m.validationStatus === 'error').length}\n

Errors

\n\n

\n {/* Main Mapping Table */}\n

\n {/* Controls */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full mp-input\"\n />\n

\n setFilterStatus(e.target.value as any)}\n className=\"mp-input\"\n >\n \n \n \n \n \n \n {isValidating ? 'Validating...' : 'Validate All'}\n \n

\n\n {/* Mapping Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n {filteredMappings.map((mapping, index) => (\n \n \n \n \n \n \n \n ))}\n \n

\n Source Field\n	\n Target Field\n	\n Confidence\n	\n Status\n	\n Actions\n
\n \n {mapping.sourceField}\n \n	\n handleMappingChange(index, e.target.value)}\n className=\"w-full text-sm border border-gray-300 rounded px-2 py-1\"\n >\n \n {/* Add more CDM field options here */}\n \n	\n \n {Math.round(mapping.confidence * 100)}%\n \n	\n \n {mapping.validationStatus}\n \n	\n \n setSelectedMapping(mapping)}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n Edit\n \n handleRemoveMapping(index)}\n className=\"text-red-600 hover:text-red-800\"\n >\n Remove\n \n \n

\n\n {filteredMappings.length === 0 && (\n

\n No mappings found matching your criteria\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n \n ← Back to Upload\n \n \n Continue to Review →\n \n

\n\n {/* Sidebar */}\n

\n {/* Unmapped Fields */}\n {unmappedFields.length > 0 && (\n

Unmapped Fields

\n {unmappedFields.map((field) => (\n \n {field}\n {\n // Open mapping dialog\n setSelectedMapping({\n sourceField: field,\n targetField: '',\n confidence: 0,\n validationStatus: 'valid',\n });\n }}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n Map\n \n

\n ))}\n

\n )}\n\n {/* Validation Summary */}\n

Validation Summary

\n Valid\n \n {mappings.filter(m => m.validationStatus === 'valid').length}\n \n

\n Warnings\n \n {mappings.filter(m => m.validationStatus === 'warning').length}\n \n

\n Errors\n \n {mappings.filter(m => m.validationStatus === 'error').length}\n \n

\n\n {/* Quick Actions */}\n

Quick Actions

\n {/* Auto-map remaining fields */}}\n className=\"w-full mp-button-secondary text-sm\"\n >\n Auto-map Remaining\n \n {/* Clear all mappings */}}\n className=\"w-full mp-button-secondary text-sm\"\n >\n Clear All Mappings\n \n {/* Export mappings */}}\n className=\"w-full mp-button-secondary text-sm\"\n >\n Export Mappings\n \n

\n\n {/* Help */}\n

Mapping Help

• Green status indicates valid mappings

• Yellow status shows warnings

• Red status indicates errors

• Higher confidence scores are better

\n\n {/* Mapping Detail Modal */}\n {selectedMapping && (\n {\n if (selectedMapping.sourceField && !selectedMapping.targetField) {\n // Adding new mapping\n handleAddMapping(updatedMapping.sourceField, updatedMapping.targetField);\n } else {\n // Updating existing mapping\n const index = mappings.findIndex(m => m.sourceField === selectedMapping.sourceField);\n if (index >= 0) {\n handleMappingChange(index, updatedMapping.targetField);\n }\n }\n setSelectedMapping(null);\n }}\n onCancel={() => setSelectedMapping(null)}\n />\n )}\n \n );\n};\n\n// Mapping Detail Modal Component\nconst MappingDetailModal: React.FC<{\n mapping: FieldMapping;\n onSave: (mapping: FieldMapping) => void;\n onCancel: () => void;\n}> = ({ mapping, onSave, onCancel }) => {\n const [targetField, setTargetField] = useState(mapping.targetField);\n const [suggestions, setSuggestions] = useState([]);\n\n useEffect(() => {\n // Load suggestions for the source field\n loadSuggestions();\n }, [mapping.sourceField]);\n\n const loadSuggestions = async () => {\n try {\n const response = await fetch('/api/upload/suggest-mapping', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ sourceField: mapping.sourceField }),\n });\n\n if (response.ok) {\n const result = await response.json();\n setSuggestions(result.suggestions.map((s: any) => s.targetField));\n }\n } catch (error) {\n console.error('Failed to load suggestions:', error);\n }\n };\n\n return (\n

Edit Field Mapping

\n \n

\n \n Source Field\n \n \n

\n\n

\n \n Target CDM Field\n \n setTargetField(e.target.value)}\n className=\"w-full mp-input\"\n >\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n

\n\n {suggestions.length > 0 && (\n

\n \n Suggestions\n \n

\n {suggestions.slice(0, 5).map((suggestion) => (\n setTargetField(suggestion)}\n className=\"block w-full text-left text-sm p-2 hover:bg-gray-50 rounded\"\n >\n {suggestion}\n \n ))}\n

\n )}\n

\n\n

\n \n Cancel\n \n onSave({ ...mapping, targetField })}\n disabled={!targetField}\n className=\"mp-button-primary disabled:opacity-50\"\n >\n Save Mapping\n \n

\n );\n};\n\nexport default MappingView;","deleted","label",[172,173,154],"frontend","components","permalink","https://www.val.town/x/MRPRRSIDENT/CDMBenchmarking/code/frontend/components/MappingView.tsx","extension","actionData","errors"]