pt/dataflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multi-capture regex, computed view fields, collapsible rules, and live preview

Browse Source 
- Support multi-capture-group regex: mappings.input_value changed to JSONB,
  regexp_match() result stored as scalar or array JSONB in transformed column
- Computed expression fields in generated views: {fieldname} refs substituted
  with (transformed->>'fieldname')::numeric for arithmetic in view columns
- Fix generate_source_view to DROP VIEW before CREATE (avoids column drop error)
- Collapsible rule cards that open directly to inline edit form
- Debounced live regex preview (extract + replace) with popout modal for 50 rows
- Records page now shows dfv.<source> view output instead of raw records
- Unified field table in Sources: single table with In view, Seq, expression columns
- Fix "Rule already exists" error when editing by passing rule.id directly to submit
- Fix Sources page clearing on F5 by watching sourceObj?.name in useEffect dep

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-03-29 16:37:15 -04:00
parent eb50704ca0
commit 928a54932d
12 changed files with 658 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/routes/mappings.js
View File

@ -79,7 +79,7 @@ module.exports = (pool) => {
`INSERT INTO mappings (source_name, rule_name, input_value, output)
VALUES ($1, $2, $3, $4)
RETURNING *`,
[source_name, rule_name, input_value, JSON.stringify(output)]
[source_name, rule_name, JSON.stringify(input_value), JSON.stringify(output)]
);
res.status(201).json(result.rows[0]);
@ -116,7 +116,7 @@ module.exports = (pool) => {
ON CONFLICT (source_name, rule_name, input_value)
DO UPDATE SET output = EXCLUDED.output
RETURNING *`,
[source_name, rule_name, input_value, JSON.stringify(output)]
[source_name, rule_name, JSON.stringify(input_value), JSON.stringify(output)]
);
results.push(result.rows[0]);

79
api/routes/rules.js
View File

@ -21,6 +21,49 @@ module.exports = (pool) => {
}
});
// Preview an ad-hoc pattern against real records (no saved rule needed)
router.get('/preview', async (req, res, next) => {
try {
const { source, field, pattern, flags, function_type = 'extract', replace_value = '', limit = 20 } = req.query;
if (!source || !field || !pattern) {
return res.status(400).json({ error: 'source, field, and pattern are required' });
}
const fullPattern = (flags ? `(?${flags})` : '') + pattern;
const query = function_type === 'replace'
? `SELECT
id,
data->>$1 AS raw_value,
to_jsonb(regexp_replace(data->>$1, $2, $3)) AS extracted_value
FROM records
WHERE source_name = $4 AND data ? $1
ORDER BY id DESC LIMIT $5`
: `SELECT
r.id,
r.data->>$1 AS raw_value,
CASE
WHEN m.match IS NULL THEN NULL
WHEN cardinality(m.match) = 1 THEN to_jsonb(m.match[1])
ELSE to_jsonb(m.match)
END AS extracted_value
FROM records r
CROSS JOIN LATERAL (SELECT regexp_match(r.data->>$1, $2) AS match) m
WHERE r.source_name = $3 AND r.data ? $1
ORDER BY r.id DESC LIMIT $4`;
const params = function_type === 'replace'
? [field, fullPattern, replace_value, source, parseInt(limit)]
: [field, fullPattern, source, parseInt(limit)];
const result = await pool.query(query, params);
res.json(result.rows);
} catch (err) {
next(err);
}
});
// Test a rule against real records
router.get('/:id/test', async (req, res, next) => {
try {
@ -40,13 +83,18 @@ module.exports = (pool) => {
const pattern = (rule.flags ? `(?${rule.flags})` : '') + rule.pattern;
const result = await pool.query(
`SELECT
id,
data->>$1 AS raw_value,
substring(data->>$1 FROM $2) AS extracted_value
FROM records
WHERE source_name = $3
AND data ? $1
ORDER BY id DESC
r.id,
r.data->>$1 AS raw_value,
CASE
WHEN m.match IS NULL THEN NULL
WHEN cardinality(m.match) = 1 THEN to_jsonb(m.match[1])
ELSE to_jsonb(m.match)
END AS extracted_value
FROM records r
CROSS JOIN LATERAL (SELECT regexp_match(r.data->>$1, $2) AS match) m
WHERE r.source_name = $3
AND r.data ? $1
ORDER BY r.id DESC
LIMIT $4`,
[rule.field, pattern, rule.source_name, parseInt(limit)]
);
@ -81,7 +129,7 @@ module.exports = (pool) => {
// Create rule
router.post('/', async (req, res, next) => {
try {
const { source_name, name, field, pattern, output_field, function_type, flags, enabled, sequence } = req.body;
const { source_name, name, field, pattern, output_field, function_type, flags, replace_value, enabled, sequence } = req.body;
if (!source_name || !name || !field || !pattern || !output_field) {
return res.status(400).json({
@ -94,10 +142,10 @@ module.exports = (pool) => {
}
const result = await pool.query(
`INSERT INTO rules (source_name, name, field, pattern, output_field, function_type, flags, enabled, sequence)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
`INSERT INTO rules (source_name, name, field, pattern, output_field, function_type, flags, replace_value, enabled, sequence)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
RETURNING *`,
[source_name, name, field, pattern, output_field, function_type || 'extract', flags || '', enabled !== false, sequence || 0]
[source_name, name, field, pattern, output_field, function_type || 'extract', flags || '', replace_value || '', enabled !== false, sequence || 0]
);
res.status(201).json(result.rows[0]);
@ -115,7 +163,7 @@ module.exports = (pool) => {
// Update rule
router.put('/:id', async (req, res, next) => {
try {
const { name, field, pattern, output_field, function_type, flags, enabled, sequence } = req.body;
const { name, field, pattern, output_field, function_type, flags, replace_value, enabled, sequence } = req.body;
if (function_type && !['extract', 'replace'].includes(function_type)) {
return res.status(400).json({ error: 'function_type must be "extract" or "replace"' });
@ -129,11 +177,12 @@ module.exports = (pool) => {
output_field = COALESCE($5, output_field),
function_type = COALESCE($6, function_type),
flags = COALESCE($7, flags),
enabled = COALESCE($8, enabled),
sequence = COALESCE($9, sequence)
replace_value = COALESCE($8, replace_value),
enabled = COALESCE($9, enabled),
sequence = COALESCE($10, sequence)
WHERE id = $1
RETURNING *`,
[req.params.id, name, field, pattern, output_field, function_type, flags, enabled, sequence]
[req.params.id, name, field, pattern, output_field, function_type, flags, replace_value, enabled, sequence]
);
if (result.rows.length === 0) {

27
api/routes/sources.js
View File

@ -282,5 +282,32 @@ module.exports = (pool) => {
}
});
router.get('/:name/view-data', async (req, res, next) => {
try {
const { limit = 100, offset = 0 } = req.query;
const viewName = `dfv.${req.params.name}`;
// Check view exists
const check = await pool.query(
`SELECT 1 FROM information_schema.views
WHERE table_schema = 'dfv' AND table_name = $1`,
[req.params.name]
);
if (check.rows.length === 0) {
return res.json({ exists: false, rows: [] });
}
const result = await pool.query(
`SELECT * FROM ${viewName} LIMIT $1 OFFSET $2`,
[parseInt(limit), parseInt(offset)]
);
res.json({ exists: true, rows: result.rows });
} catch (err) {
next(err);
}
});
return router;
};

90
database/functions.sql
View File

@ -78,7 +78,8 @@ DECLARE
v_record RECORD;
v_rule RECORD;
v_transformed JSONB;
v_extracted TEXT;
v_match TEXT[];
v_extracted JSONB;
v_mapping JSONB;
v_count INTEGER := 0;
BEGIN
@ -102,24 +103,30 @@ BEGIN
LOOP
-- Apply rule based on function type
IF v_rule.function_type = 'replace' THEN
v_extracted := regexp_replace(
v_record.data->>v_rule.field,
CASE WHEN v_rule.flags != '' THEN '(?' || v_rule.flags || ')' ELSE '' END || v_rule.pattern,
v_rule.output_field
);
v_transformed := jsonb_set(
v_transformed,
ARRAY[v_rule.field],
to_jsonb(v_extracted)
ARRAY[v_rule.output_field],
to_jsonb(regexp_replace(
v_record.data->>v_rule.field,
CASE WHEN v_rule.flags != '' THEN '(?' || v_rule.flags || ')' ELSE '' END || v_rule.pattern,
v_rule.replace_value
))
);
ELSE
-- extract (default)
v_extracted := substring(
v_record.data->>v_rule.field
FROM CASE WHEN v_rule.flags != '' THEN '(?' || v_rule.flags || ')' ELSE '' END || v_rule.pattern
-- extract (default): regexp_match returns all capture groups as text[]
v_match := regexp_match(
v_record.data->>v_rule.field,
CASE WHEN v_rule.flags != '' THEN '(?' || v_rule.flags || ')' ELSE '' END || v_rule.pattern
);
IF v_extracted IS NOT NULL THEN
IF v_match IS NOT NULL THEN
-- Single capture group → scalar string; multiple groups → JSON array
IF cardinality(v_match) = 1 THEN
v_extracted := to_jsonb(v_match[1]);
ELSE
v_extracted := to_jsonb(v_match);
END IF;
-- Check if there's a mapping for this value
SELECT output INTO v_mapping
FROM dataflow.mappings
@ -131,11 +138,11 @@ BEGIN
-- Apply mapping (merge mapped fields into result)
v_transformed := v_transformed || v_mapping;
ELSE
-- No mapping, just add extracted value
-- No mapping, store extracted value (scalar or array)
v_transformed := jsonb_set(
v_transformed,
ARRAY[v_rule.output_field],
to_jsonb(v_extracted)
v_extracted
);
END IF;
END IF;
@ -164,13 +171,14 @@ COMMENT ON FUNCTION apply_transformations IS 'Apply transformation rules and map
-- Function: get_unmapped_values
-- Find extracted values that need mappings
------------------------------------------------------
CREATE OR REPLACE FUNCTION get_unmapped_values(
DROP FUNCTION IF EXISTS get_unmapped_values(TEXT, TEXT);
CREATE FUNCTION get_unmapped_values(
p_source_name TEXT,
p_rule_name TEXT DEFAULT NULL
) RETURNS TABLE (
rule_name TEXT,
output_field TEXT,
extracted_value TEXT,
extracted_value JSONB,
record_count BIGINT,
sample_records JSONB
) AS $$
@ -180,7 +188,7 @@ BEGIN
SELECT
r.name AS rule_name,
r.output_field,
rec.transformed->>r.output_field AS extracted_value,
rec.transformed->r.output_field AS extracted_value,
rec.data AS raw_record
FROM
dataflow.records rec
@ -265,24 +273,44 @@ BEGIN
LOOP
IF v_cols != '' THEN v_cols := v_cols || ', '; END IF;
CASE v_field->>'type'
WHEN 'date' THEN
v_cols := v_cols || format('(transformed->>%L)::date AS %I',
v_field->>'name', v_field->>'name');
WHEN 'numeric' THEN
v_cols := v_cols || format('(transformed->>%L)::numeric AS %I',
v_field->>'name', v_field->>'name');
ELSE
v_cols := v_cols || format('transformed->>%L AS %I',
v_field->>'name', v_field->>'name');
END CASE;
IF v_field->>'expression' IS NOT NULL THEN
-- Computed expression: substitute {fieldname} refs with (transformed->>'fieldname')::type
-- e.g. "{Amount} * {sign}" → "(transformed->>'Amount')::numeric * (transformed->>'sign')::numeric"
DECLARE
v_expr TEXT := v_field->>'expression';
v_ref TEXT;
v_cast TEXT := COALESCE(NULLIF(v_field->>'type', ''), 'numeric');
BEGIN
WHILE v_expr ~ '\{[^}]+\}' LOOP
v_ref := substring(v_expr FROM '\{([^}]+)\}');
v_expr := replace(v_expr, '{' || v_ref || '}',
format('(transformed->>%L)::numeric', v_ref));
END LOOP;
v_cols := v_cols || format('%s AS %I', v_expr, v_field->>'name');
END;
ELSE
CASE v_field->>'type'
WHEN 'date' THEN
v_cols := v_cols || format('(transformed->>%L)::date AS %I',
v_field->>'name', v_field->>'name');
WHEN 'numeric' THEN
v_cols := v_cols || format('(transformed->>%L)::numeric AS %I',
v_field->>'name', v_field->>'name');
ELSE
v_cols := v_cols || format('transformed->>%L AS %I',
v_field->>'name', v_field->>'name');
END CASE;
END IF;
END LOOP;
CREATE SCHEMA IF NOT EXISTS dfv;
v_view := 'dfv.' || quote_ident(p_source_name);
v_sql := format(
'CREATE OR REPLACE VIEW %s AS SELECT %s FROM dataflow.records WHERE source_name = %L AND transformed IS NOT NULL',
EXECUTE format('DROP VIEW IF EXISTS %s', v_view);
v_sql := format(
'CREATE VIEW %s AS SELECT %s FROM dataflow.records WHERE source_name = %L AND transformed IS NOT NULL',
v_view, v_cols, p_source_name
);

22
database/migrate_input_value_jsonb.sql Normal file
View File

@ -0,0 +1,22 @@
--
-- Migration: Change mappings.input_value from TEXT to JSONB
-- Allows multi-capture-group regex results to be used as mapping keys
--
SET search_path TO dataflow, public;
-- Drop dependent constraint and index first
ALTER TABLE dataflow.mappings DROP CONSTRAINT mappings_source_name_rule_name_input_value_key;
DROP INDEX IF EXISTS dataflow.idx_mappings_input;
-- Convert column: existing TEXT values become JSONB strings e.g. "MEIJER"
ALTER TABLE dataflow.mappings
ALTER COLUMN input_value TYPE JSONB
USING to_jsonb(input_value);
-- Recreate constraint and index
ALTER TABLE dataflow.mappings
ADD CONSTRAINT mappings_source_name_rule_name_input_value_key
UNIQUE (source_name, rule_name, input_value);
CREATE INDEX idx_mappings_input ON dataflow.mappings(source_name, rule_name, input_value);

3
database/schema.sql
View File

@ -72,6 +72,7 @@ CREATE TABLE rules (
output_field TEXT NOT NULL, -- Name of extracted field (e.g., 'merchant')
function_type TEXT NOT NULL DEFAULT 'extract', -- 'extract' or 'replace'
flags TEXT NOT NULL DEFAULT '', -- Regex flags (e.g., 'i' for case-insensitive)
replace_value TEXT NOT NULL DEFAULT '', -- Replacement string (replace mode only)
-- Options
enabled BOOLEAN DEFAULT true,
@ -100,7 +101,7 @@ CREATE TABLE mappings (
rule_name TEXT NOT NULL,
-- Mapping
input_value TEXT NOT NULL, -- Extracted value to match
input_value JSONB NOT NULL, -- Extracted value to match (string or array of capture groups)
output JSONB NOT NULL, -- Standardized output
-- Metadata

11
ui/src/App.jsx
View File

@ -41,7 +41,14 @@ export default function App() {
{/* Source selector */}
<div className="px-3 py-3 border-b border-gray-200">
<label className="text-xs text-gray-500 block mb-1">Source</label>
<div className="flex items-center justify-between mb-1">
<label className="text-xs text-gray-500">Source</label>
<NavLink to="/sources"
className="text-xs text-blue-400 hover:text-blue-600 leading-none"
title="New source"
onClick={() => {/* nav handled by link */}}
>+</NavLink>
</div>
<select
className="w-full text-sm border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-blue-400"
value={source}
@ -74,7 +81,7 @@ export default function App() {
<div className="flex-1 overflow-auto">
<Routes>
<Route path="/" element={<Navigate to="/sources" replace />} />
<Route path="/sources" element={<Sources sources={sources} setSources={setSources} setSource={setSource} />} />
<Route path="/sources" element={<Sources source={source} sources={sources} setSources={setSources} setSource={setSource} />} />
<Route path="/import" element={<Import source={source} />} />
<Route path="/rules" element={<Rules source={source} />} />
<Route path="/mappings" element={<Mappings source={source} />} />

3
ui/src/api.js
View File

@ -39,6 +39,7 @@ export const api = {
reprocess: (name) => request('POST', `/sources/${name}/reprocess`),
generateView: (name) => request('POST', `/sources/${name}/view`),
getFields: (name) => request('GET', `/sources/${name}/fields`),
getViewData: (name, limit = 100, offset = 0) => request('GET', `/sources/${name}/view-data?limit=${limit}&offset=${offset}`),
// Rules
getRules: (source) => request('GET', `/rules/source/${source}`),
@ -46,6 +47,8 @@ export const api = {
updateRule: (id, body) => request('PUT', `/rules/${id}`, body),
deleteRule: (id) => request('DELETE', `/rules/${id}`),
testRule: (id, limit = 20) => request('GET', `/rules/${id}/test?limit=${limit}`),
previewRule: (source, field, pattern, flags, function_type = 'extract', replace_value = '', limit = 20) =>
request('GET', `/rules/preview?source=${encodeURIComponent(source)}&field=${encodeURIComponent(field)}&pattern=${encodeURIComponent(pattern)}&flags=${encodeURIComponent(flags || '')}&function_type=${function_type}&replace_value=${encodeURIComponent(replace_value)}&limit=${limit}`),
// Mappings
getMappings: (source, rule) => request('GET', `/mappings/source/${source}${rule ? `?rule_name=${rule}` : ''}`),

50
ui/src/pages/Mappings.jsx
View File

@ -1,6 +1,17 @@
import { useState, useEffect } from 'react'
import { api } from '../api'
// Stable string key for a value that may be a string or array
function valueKey(v) {
return Array.isArray(v) ? JSON.stringify(v) : String(v)
}
// Human-readable display of a string or array extracted value
function displayValue(v) {
if (Array.isArray(v)) return v.join(' · ')
return v
}
export default function Mappings({ source }) {
const [tab, setTab] = useState('unmapped')
const [rules, setRules] = useState([])
@ -37,40 +48,44 @@ export default function Mappings({ source }) {
}, [source, selectedRule, tab])
function getDraft(extractedValue, outputField) {
return drafts[extractedValue] || [{ key: outputField, value: '' }]
return drafts[valueKey(extractedValue)] || [{ key: outputField, value: '' }]
}
function updateDraftKey(extractedValue, index, newKey) {
const k = valueKey(extractedValue)
setDrafts(d => {
const current = d[extractedValue] || [{ key: '', value: '' }]
const current = d[k] || [{ key: '', value: '' }]
const updated = current.map((pair, i) => i === index ? { ...pair, key: newKey } : pair)
return { ...d, [extractedValue]: updated }
return { ...d, [k]: updated }
})
}
function updateDraftValue(extractedValue, index, newValue) {
const k = valueKey(extractedValue)
setDrafts(d => {
const current = d[extractedValue] || [{ key: '', value: '' }]
const current = d[k] || [{ key: '', value: '' }]
const updated = current.map((pair, i) => i === index ? { ...pair, value: newValue } : pair)
return { ...d, [extractedValue]: updated }
return { ...d, [k]: updated }
})
}
function addDraftPair(extractedValue, outputField) {
const k = valueKey(extractedValue)
setDrafts(d => {
const current = d[extractedValue] || [{ key: outputField, value: '' }]
return { ...d, [extractedValue]: [...current, { key: '', value: '' }] }
const current = d[k] || [{ key: outputField, value: '' }]
return { ...d, [k]: [...current, { key: '', value: '' }] }
})
}
async function saveMapping(row) {
const k = valueKey(row.extracted_value)
const pairs = getDraft(row.extracted_value, row.output_field)
const output = Object.fromEntries(
pairs.filter(p => p.key && p.value).map(p => [p.key, p.value])
)
if (Object.keys(output).length === 0) return
setSaving(s => ({ ...s, [row.extracted_value]: true }))
setSaving(s => ({ ...s, [k]: true }))
try {
await api.createMapping({
source_name: source,
@ -78,12 +93,12 @@ export default function Mappings({ source }) {
input_value: row.extracted_value,
output
})
setUnmapped(u => u.filter(x => x.extracted_value !== row.extracted_value))
setDrafts(d => { const n = { ...d }; delete n[row.extracted_value]; return n })
setUnmapped(u => u.filter(x => valueKey(x.extracted_value) !== k))
setDrafts(d => { const n = { ...d }; delete n[k]; return n })
} catch (err) {
alert(err.message)
} finally {
setSaving(s => ({ ...s, [row.extracted_value]: false }))
setSaving(s => ({ ...s, [k]: false }))
}
}
@ -177,19 +192,20 @@ export default function Mappings({ source }) {
: (
<div className="space-y-2">
{unmapped.map(row => {
const k = valueKey(row.extracted_value)
const pairs = getDraft(row.extracted_value, row.output_field)
const isSaving = saving[row.extracted_value]
const sampleKey = `${row.rule_name}:${row.extracted_value}`
const isSaving = saving[k]
const sampleKey = `${row.rule_name}:${k}`
const samples = row.sample_records || []
return (
<div key={`${row.rule_name}:${row.extracted_value}`}
<div key={`${row.rule_name}:${k}`}
className="bg-white border border-gray-200 rounded px-4 py-3">
<div className="flex items-start gap-3">
{/* Left: value info */}
<div className="flex-1 min-w-0">
<div className="flex items-baseline gap-2">
<span className="font-mono text-sm text-gray-800">{row.extracted_value}</span>
<span className="font-mono text-sm text-gray-800">{displayValue(row.extracted_value)}</span>
<span className="text-xs text-gray-400">{row.record_count} records</span>
<span className="text-xs text-gray-300">· {row.rule_name}</span>
</div>
@ -277,7 +293,7 @@ export default function Mappings({ source }) {
editingId === m.id ? (
<tr key={m.id} className="border-t border-gray-50 bg-blue-50">
<td className="px-4 py-2 text-xs text-gray-400">{m.rule_name}</td>
<td className="px-4 py-2 font-mono text-gray-700">{m.input_value}</td>
<td className="px-4 py-2 font-mono text-gray-700">{displayValue(m.input_value)}</td>
<td className="px-4 py-2">
<div className="space-y-1">
{(editDrafts[m.id] || []).map((pair, i) => (
@ -320,7 +336,7 @@ export default function Mappings({ source }) {
) : (
<tr key={m.id} className="border-t border-gray-50 hover:bg-gray-50">
<td className="px-4 py-2 text-xs text-gray-400">{m.rule_name}</td>
<td className="px-4 py-2 font-mono text-gray-700">{m.input_value}</td>
<td className="px-4 py-2 font-mono text-gray-700">{displayValue(m.input_value)}</td>
<td className="px-4 py-2 font-mono text-xs text-gray-500">
{JSON.stringify(m.output)}
</td>

181
ui/src/pages/Records.jsx
View File

@ -2,28 +2,24 @@ import { useState, useEffect } from 'react'
import { api } from '../api'
export default function Records({ source }) {
const [records, setRecords] = useState([])
const [rules, setRules] = useState([])
const [mappings, setMappings] = useState([])
const [rows, setRows] = useState([])
const [exists, setExists] = useState(null)
const [offset, setOffset] = useState(0)
const [view, setView] = useState('transformed') // 'raw' | 'transformed'
const [expanded, setExpanded] = useState(null)
const [loading, setLoading] = useState(false)
const LIMIT = 50
const LIMIT = 100
useEffect(() => {
if (!source) return
setOffset(0)
load(0)
api.getRules(source).then(setRules).catch(() => {})
api.getMappings(source).then(setMappings).catch(() => {})
}, [source])
async function load(off) {
setLoading(true)
try {
const res = await api.getRecords(source, LIMIT, off)
setRecords(res)
const res = await api.getViewData(source, LIMIT, off)
setExists(res.exists)
setRows(res.rows)
} catch (err) {
console.error(err)
} finally {
@ -36,145 +32,50 @@ export default function Records({ source }) {
if (!source) return <div className="p-6 text-sm text-gray-400">Select a source first.</div>
const displayData = (record) => view === 'raw' ? record.data : (record.transformed || record.data)
// Build a lookup: rule_name + input_value → mapping output
const mappingLookup = {}
for (const m of mappings) {
mappingLookup[`${m.rule_name}::${m.input_value}`] = m.output
}
return (
<div className="p-6">
<div className="flex items-center justify-between mb-4">
<h1 className="text-xl font-semibold text-gray-800">Records — {source}</h1>
<div className="flex bg-gray-100 rounded p-0.5">
{['transformed', 'raw'].map(v => (
<button key={v} onClick={() => setView(v)}
className={`text-sm px-3 py-1 rounded transition-colors ${
view === v ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500'
}`}>
{v}
</button>
))}
</div>
{exists && rows.length > 0 && (
<span className="text-xs text-gray-400 font-mono">dfv.{source}</span>
)}
</div>
{loading && <p className="text-sm text-gray-400">Loading…</p>}
{!loading && records.length === 0 && (
<p className="text-sm text-gray-400">No records yet. Import a CSV file first.</p>
{!loading && exists === false && (
<p className="text-sm text-gray-400">
No view generated yet. Go to <span className="font-medium text-gray-600">Sources</span>, check fields as <span className="font-medium text-gray-600">In view</span>, then click <span className="font-medium text-gray-600">Generate view</span>.
</p>
)}
{!loading && records.length > 0 && (
{!loading && exists && rows.length === 0 && (
<p className="text-sm text-gray-400">View exists but no transformed records yet. Import data and run a transform first.</p>
)}
{!loading && exists && rows.length > 0 && (
<>
<div className="bg-white border border-gray-200 rounded overflow-hidden mb-4">
{(() => {
const sample = displayData(records[0]) || {}
const cols = Object.keys(sample).slice(0, 8)
return (
<table className="w-full text-sm">
<thead>
<tr className="text-left text-xs text-gray-400 border-b border-gray-100 bg-gray-50">
{cols.map(c => (
<th key={c} className="px-3 py-2 font-medium truncate max-w-32">{c}</th>
))}
<th className="px-3 py-2 font-medium w-8"></th>
</tr>
</thead>
<tbody>
{records.map(record => {
const data = displayData(record) || {}
const isExpanded = expanded === record.id
return (
<>
<tr key={record.id}
className="border-t border-gray-50 hover:bg-gray-50 cursor-pointer"
onClick={() => setExpanded(isExpanded ? null : record.id)}>
{cols.map(c => (
<td key={c} className="px-3 py-2 text-xs text-gray-600 truncate max-w-32">
{String(data[c] ?? '')}
</td>
))}
<td className="px-3 py-2 text-xs text-gray-300">
{isExpanded ? '▲' : '▼'}
</td>
</tr>
{isExpanded && (
<tr key={`${record.id}-expanded`} className="bg-gray-50 border-t border-gray-100">
<td colSpan={cols.length + 1} className="px-4 py-3 space-y-4">
{/* Transformations breakdown */}
{record.transformed && rules.length > 0 && (
<div>
<p className="text-xs font-medium text-gray-500 mb-1">Transformations</p>
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-400 border-b border-gray-100">
<th className="pb-1 font-medium pr-4">Rule</th>
<th className="pb-1 font-medium pr-4">Input value</th>
<th className="pb-1 font-medium pr-4">Extracted</th>
<th className="pb-1 font-medium">Mapped output</th>
</tr>
</thead>
<tbody>
{rules.map(rule => {
const inputVal = record.data?.[rule.field]
const extractedVal = record.transformed?.[rule.output_field]
const mappedOutput = extractedVal != null
? mappingLookup[`${rule.name}::${extractedVal}`]
: undefined
return (
<tr key={rule.id} className="border-t border-gray-50">
<td className="py-1 pr-4 font-medium text-gray-700">{rule.name}</td>
<td className="py-1 pr-4 font-mono text-gray-500 max-w-48 truncate">
{inputVal ?? <span className="text-gray-300">—</span>}
</td>
<td className="py-1 pr-4 font-mono text-gray-700">
{extractedVal != null
? extractedVal
: <span className="text-gray-300">—</span>}
</td>
<td className="py-1 font-mono text-gray-500">
{mappedOutput
? Object.entries(mappedOutput).map(([k, v]) => (
<span key={k} className="inline-block mr-2">
<span className="text-gray-400">{k}:</span> {v}
</span>
))
: <span className="text-gray-300">—</span>}
</td>
</tr>
)
})}
</tbody>
</table>
</div>
)}
{/* Full data dump */}
<div>
<p className="text-xs font-medium text-gray-500 mb-1">
{view === 'transformed' ? 'Transformed data' : 'Raw data'}
</p>
<pre className="text-xs text-gray-600 whitespace-pre-wrap font-mono bg-white border border-gray-100 rounded p-2">
{JSON.stringify(displayData(record), null, 2)}
</pre>
{view === 'transformed' && !record.transformed && (
<p className="text-xs text-orange-400 mt-1">Not yet transformed</p>
)}
</div>
</td>
</tr>
)}
</>
)
})}
</tbody>
</table>
)
})()}
<div className="bg-white border border-gray-200 rounded overflow-auto mb-4">
<table className="w-full text-sm">
<thead>
<tr className="text-left text-xs text-gray-400 border-b border-gray-100 bg-gray-50">
{Object.keys(rows[0]).map(col => (
<th key={col} className="px-3 py-2 font-medium whitespace-nowrap">{col}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row, i) => (
<tr key={i} className="border-t border-gray-50 hover:bg-gray-50">
{Object.values(row).map((val, j) => (
<td key={j} className="px-3 py-2 text-xs text-gray-600 whitespace-nowrap max-w-48 truncate">
{val === null ? <span className="text-gray-300">—</span> : String(val)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="flex items-center gap-3 text-sm text-gray-500">
@ -182,8 +83,8 @@ export default function Records({ source }) {
className="px-3 py-1 border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-40">
← Prev
</button>
<span>{offset + 1}–{offset + records.length}</span>
<button onClick={next} disabled={records.length < LIMIT}
<span>{offset + 1}–{offset + rows.length}</span>
<button onClick={next} disabled={rows.length < LIMIT}
className="px-3 py-1 border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-40">
Next →
</button>

241
ui/src/pages/Rules.jsx
View File

@ -1,9 +1,71 @@
import { useState, useEffect } from 'react'
import { useState, useEffect, useRef } from 'react'
import { api } from '../api'
const EMPTY_FORM = { name: '', field: '', pattern: '', output_field: '', function_type: 'extract', flags: '', sequence: 0 }
const EMPTY_FORM = { name: '', field: '', pattern: '', output_field: '', function_type: 'extract', flags: '', replace_value: '', sequence: 0 }
function PreviewModal({ rows, onClose }) {
const matched = rows.filter(r => r.extracted_value != null).length
return (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
<div className="bg-white rounded-lg shadow-xl w-3/4 max-w-3xl max-h-[80vh] flex flex-col"
onClick={e => e.stopPropagation()}>
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
<span className="text-sm font-medium text-gray-700">
Pattern results — <span className="text-gray-500 font-normal">{matched}/{rows.length} matched</span>
</span>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">✕</button>
</div>
<div className="overflow-auto flex-1 px-5 py-3">
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-400 border-b border-gray-100">
<th className="pb-2 font-medium w-1/2 pr-4">Raw value</th>
<th className="pb-2 font-medium">Result</th>
</tr>
</thead>
<tbody>
{rows.map((r, i) => (
<tr key={i} className="border-t border-gray-50">
<td className="py-1 font-mono text-gray-400 pr-4 break-all">{r.raw_value}</td>
<td className={`py-1 font-mono break-all ${r.extracted_value != null ? 'text-gray-800' : 'text-gray-300'}`}>
{r.extracted_value != null
? (Array.isArray(r.extracted_value) ? r.extracted_value.join(' · ') : String(r.extracted_value))
: '—'}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)
}
function FormPanel({ form, setForm, editing, error, loading, fields, source, onSubmit, onCancel }) {
const [preview, setPreview] = useState([])
const [previewing, setPreviewing] = useState(false)
const [modalOpen, setModalOpen] = useState(false)
const debounceRef = useRef(null)
// Auto-preview when field/pattern/flags change, debounced
useEffect(() => {
if (!form.field || !form.pattern) { setPreview([]); return }
clearTimeout(debounceRef.current)
debounceRef.current = setTimeout(async () => {
setPreviewing(true)
try {
const results = await api.previewRule(source, form.field, form.pattern, form.flags, form.function_type, form.replace_value, 50)
setPreview(results)
} catch {
setPreview([])
} finally {
setPreviewing(false)
}
}, 500)
return () => clearTimeout(debounceRef.current)
}, [form.field, form.pattern, form.flags, form.function_type, form.replace_value, source])
function FormPanel({ form, setForm, editing, error, loading, fields, onSubmit, onCancel }) {
return (
<div className="bg-white border border-gray-200 rounded p-4 mb-4">
<h2 className="text-sm font-semibold text-gray-700 mb-3">{editing ? 'Edit rule' : 'New rule'}</h2>
@ -82,6 +144,49 @@ function FormPanel({ form, setForm, editing, error, loading, fields, onSubmit, o
/>
</div>
</div>
{form.function_type === 'replace' && (
<div>
<label className="text-xs text-gray-500 block mb-1">Replacement string</label>
<input
className="w-full border border-gray-200 rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-blue-400"
value={form.replace_value} onChange={e => setForm(f => ({ ...f, replace_value: e.target.value }))}
placeholder="e.g. leave blank to delete the match"
/>
</div>
)}
{/* Live preview */}
{(preview.length > 0 || previewing) && (
<div className="border border-gray-100 rounded p-2 bg-gray-50">
<div className="flex items-center justify-between mb-1">
<p className="text-xs text-gray-400">
{previewing ? 'Testing…' : `${preview.filter(r => r.extracted_value != null).length}/${preview.length} matched`}
</p>
{!previewing && preview.length > 0 && (
<button type="button" onClick={() => setModalOpen(true)}
className="text-xs text-blue-400 hover:text-blue-600">expand</button>
)}
</div>
{!previewing && (
<table className="w-full text-xs">
<tbody>
{preview.slice(0, 5).map((r, i) => (
<tr key={i} className="border-t border-gray-100 first:border-0">
<td className="py-0.5 font-mono text-gray-400 truncate max-w-0 w-1/2 pr-3">{r.raw_value}</td>
<td className={`py-0.5 font-mono truncate ${r.extracted_value != null ? 'text-gray-800' : 'text-gray-300'}`}>
{r.extracted_value != null
? (Array.isArray(r.extracted_value) ? r.extracted_value.join(' · ') : String(r.extracted_value))
: '—'}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
)}
{modalOpen && <PreviewModal rows={preview} onClose={() => setModalOpen(false)} />}
{error && <p className="text-xs text-red-500">{error}</p>}
<div className="flex gap-2">
<button type="submit" disabled={loading}
@ -102,6 +207,7 @@ export default function Rules({ source }) {
const [rules, setRules] = useState([])
const [creating, setCreating] = useState(false)
const [editing, setEditing] = useState(null)
const [expanded, setExpanded] = useState(null)
const [form, setForm] = useState(EMPTY_FORM)
const [testResults, setTestResults] = useState({})
const [fields, setFields] = useState([])
@ -130,6 +236,7 @@ export default function Rules({ source }) {
output_field: rule.output_field,
function_type: rule.function_type || 'extract',
flags: rule.flags || '',
replace_value: rule.replace_value || '',
sequence: rule.sequence,
})
setEditing(rule.id)
@ -137,13 +244,14 @@ export default function Rules({ source }) {
setError('')
}
async function handleSubmit(e) {
async function handleSubmit(e, ruleId = null) {
e.preventDefault()
setError('')
setLoading(true)
const id = ruleId ?? editing
try {
if (editing) {
await api.updateRule(editing, { ...form, source_name: source })
if (id) {
await api.updateRule(id, { ...form, source_name: source })
} else {
await api.createRule({ ...form, source_name: source })
}
@ -151,6 +259,7 @@ export default function Rules({ source }) {
setRules(updated)
setCreating(false)
setEditing(null)
setExpanded(null)
} catch (err) {
setError(err.message)
} finally {
@ -202,7 +311,7 @@ export default function Rules({ source }) {
{creating && (
<FormPanel
form={form} setForm={setForm} editing={false}
error={error} loading={loading} fields={fields}
error={error} loading={loading} fields={fields} source={source}
onSubmit={handleSubmit}
onCancel={() => { setCreating(false); setError('') }}
/>
@ -212,74 +321,62 @@ export default function Rules({ source }) {
<p className="text-sm text-gray-400">No rules yet. Add a regex rule to start extracting values.</p>
)}
<div className="space-y-3">
{rules.map(rule => (
<div key={rule.id} className="bg-white border border-gray-200 rounded">
<div className="flex items-center gap-3 px-4 py-3">
<button
onClick={() => handleToggle(rule)}
className={`w-8 h-4 rounded-full transition-colors ${rule.enabled ? 'bg-blue-500' : 'bg-gray-200'}`}
title={rule.enabled ? 'Disable' : 'Enable'}
/>
<div className="flex-1 min-w-0">
<span className="font-medium text-gray-800 text-sm">{rule.name}</span>
<span className="text-gray-400 text-xs ml-2">seq {rule.sequence}</span>
<div className="text-xs text-gray-400 mt-0.5">
<span className="font-mono">{rule.field}</span>
<span className="mx-1">→</span>
<span className="font-mono bg-gray-50 px-1 rounded">{rule.pattern}</span>
{rule.flags && <span className="text-blue-400 ml-1">/{rule.flags}</span>}
<span className="mx-1">→</span>
<span className="font-mono">{rule.output_field}</span>
{rule.function_type === 'replace' && <span className="ml-1 text-orange-400">(replace)</span>}
</div>
</div>
<div className="flex gap-2">
<button onClick={() => handleTest(rule.id)}
className="text-xs text-blue-500 hover:text-blue-700">Test</button>
<button onClick={() => editing === rule.id ? setEditing(null) : startEdit(rule)}
className="text-xs text-gray-400 hover:text-gray-600">Edit</button>
<button onClick={() => handleDelete(rule.id)}
className="text-xs text-red-400 hover:text-red-600">Delete</button>
</div>
</div>
{editing === rule.id && (
<div className="px-4 pb-4">
<FormPanel
form={form} setForm={setForm} editing={true}
error={error} loading={loading} fields={fields}
onSubmit={handleSubmit}
onCancel={() => setEditing(null)}
<div className="space-y-2">
{rules.map(rule => {
const isExpanded = expanded === rule.id
return (
<div key={rule.id} className="bg-white border border-gray-200 rounded">
{/* Header — always visible, click to expand/collapse */}
<div
className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-gray-50 select-none"
onClick={() => {
if (isExpanded) { setExpanded(null); setEditing(null) }
else { setExpanded(rule.id); startEdit(rule) }
}}
>
<button
onClick={e => { e.stopPropagation(); handleToggle(rule) }}
className={`w-8 h-4 rounded-full flex-shrink-0 transition-colors ${rule.enabled ? 'bg-blue-500' : 'bg-gray-200'}`}
title={rule.enabled ? 'Disable' : 'Enable'}
/>
<div className="flex-1 min-w-0">
<span className="font-medium text-gray-800 text-sm">{rule.name}</span>
<span className="text-gray-400 text-xs ml-2">seq {rule.sequence}</span>
{!isExpanded && (
<div className="text-xs text-gray-400 mt-0.5 truncate">
<span className="font-mono">{rule.field}</span>
<span className="mx-1">→</span>
<span className="font-mono bg-gray-50 px-1 rounded">{rule.pattern}</span>
{rule.flags && <span className="text-blue-400 ml-1">/{rule.flags}</span>}
<span className="mx-1">→</span>
<span className="font-mono">{rule.output_field}</span>
{rule.function_type === 'replace' && <span className="ml-1 text-orange-400">(replace)</span>}
</div>
)}
</div>
<span className="text-xs text-gray-300 flex-shrink-0">{isExpanded ? '▲' : '▼'}</span>
</div>
)}
{testResults[rule.id] && (
<div className="border-t border-gray-100 px-4 py-3">
<p className="text-xs text-gray-500 mb-2">Test results (last 20 records)</p>
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-400">
<th className="pb-1 font-medium w-1/2">Raw value</th>
<th className="pb-1 font-medium">Extracted</th>
</tr>
</thead>
<tbody>
{testResults[rule.id].slice(0, 10).map((r, i) => (
<tr key={i} className="border-t border-gray-50">
<td className="py-1 font-mono text-gray-500 truncate max-w-0 w-1/2 pr-2">{r.raw_value}</td>
<td className={`py-1 font-mono ${r.extracted_value ? 'text-gray-800' : 'text-gray-300'}`}>
{r.extracted_value ?? '—'}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
))}
{/* Expanded content */}
{isExpanded && (
<div className="border-t border-gray-100">
<div className="px-4 pt-3 pb-1 flex justify-end">
<button onClick={e => { e.stopPropagation(); handleDelete(rule.id) }}
className="text-xs text-red-400 hover:text-red-600">Delete</button>
</div>
<div className="px-4 pb-4">
<FormPanel
form={form} setForm={setForm} editing={true}
error={error} loading={loading} fields={fields} source={source}
onSubmit={e => handleSubmit(e, rule.id)}
onCancel={() => { setEditing(null); setExpanded(null) }}
/>
</div>
</div>
)}
</div>
)
})}
</div>
</div>
)

448
ui/src/pages/Sources.jsx
View File

@ -3,22 +3,37 @@ import { api } from '../api'
const FIELD_TYPES = ['text', 'numeric', 'date']
function SourceDetail({ source, onClose, onDeleted, setSources, setSource }) {
const [dedup, setDedup] = useState(source.dedup_fields?.join(', ') || '')
const [schemaFields, setSchemaFields] = useState(source.config?.fields || [])
export default function Sources({ source, sources, setSources, setSource }) {
const [dedup, setDedup] = useState('')
const [schemaFields, setSchemaFields] = useState([])
const [stats, setStats] = useState(null)
const [saving, setSaving] = useState(false)
const [reprocessing, setReprocessing] = useState(false)
const [generating, setGenerating] = useState(false)
const [result, setResult] = useState('')
const [error, setError] = useState('')
const [viewName, setViewName] = useState(source.config?.fields?.length ? `dfv.${source.name}` : '')
const [viewName, setViewName] = useState('')
const [availableFields, setAvailableFields] = useState([])
const [creating, setCreating] = useState(false)
const [form, setForm] = useState({ name: '', dedup_fields: '', fields: [], schema: [] })
const [createError, setCreateError] = useState('')
const [createLoading, setCreateLoading] = useState(false)
const fileRef = useRef()
const sourceObj = sources.find(s => s.name === source)
useEffect(() => {
api.getStats(source.name).then(setStats).catch(() => {})
api.getFields(source.name).then(setAvailableFields).catch(() => {})
}, [source.name])
if (!sourceObj) return
setDedup(sourceObj.dedup_fields?.join(', ') || '')
setSchemaFields((sourceObj.config?.fields || []).map((f, i) => ({ seq: i + 1, ...f })))
setViewName(sourceObj.config?.fields?.length ? `dfv.${sourceObj.name}` : '')
setResult('')
setError('')
setStats(null)
setAvailableFields([])
api.getStats(sourceObj.name).then(setStats).catch(() => {})
api.getFields(sourceObj.name).then(setAvailableFields).catch(() => {})
}, [source, sourceObj?.name])
async function handleSave(e) {
e.preventDefault()
@ -26,8 +41,9 @@ function SourceDetail({ source, onClose, onDeleted, setSources, setSource }) {
setError('')
try {
const dedup_fields = dedup.split(',').map(s => s.trim()).filter(Boolean)
const config = { ...(source.config || {}), fields: schemaFields.filter(f => f.name) }
await api.updateSource(source.name, { dedup_fields, config })
const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
const config = { ...(sourceObj.config || {}), fields }
await api.updateSource(sourceObj.name, { dedup_fields, config })
const updated = await api.getSources()
setSources(updated)
setResult('Saved.')
@ -43,11 +59,11 @@ function SourceDetail({ source, onClose, onDeleted, setSources, setSource }) {
setResult('')
setError('')
try {
// Save schema first, then generate view from the saved config
const dedup_fields = dedup.split(',').map(s => s.trim()).filter(Boolean)
const config = { ...(source.config || {}), fields: schemaFields.filter(f => f.name) }
await api.updateSource(source.name, { dedup_fields, config })
const res = await api.generateView(source.name)
const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
const config = { ...(sourceObj.config || {}), fields }
await api.updateSource(sourceObj.name, { dedup_fields, config })
const res = await api.generateView(sourceObj.name)
if (res.success) {
setViewName(res.view)
setResult(`View created: ${res.view}`)
@ -62,14 +78,14 @@ function SourceDetail({ source, onClose, onDeleted, setSources, setSource }) {
}
async function handleReprocess() {
if (!confirm(`Reprocess all records for "${source.name}"? This will clear and reapply all transformations.`)) return
if (!confirm(`Reprocess all records for "${sourceObj.name}"? This will clear and reapply all transformations.`)) return
setReprocessing(true)
setResult('')
setError('')
try {
const res = await api.reprocess(source.name)
const res = await api.reprocess(sourceObj.name)
setResult(`Reprocessed ${res.transformed} records.`)
api.getStats(source.name).then(setStats).catch(() => {})
api.getStats(sourceObj.name).then(setStats).catch(() => {})
} catch (err) {
setError(err.message)
} finally {
@ -77,157 +93,18 @@ function SourceDetail({ source, onClose, onDeleted, setSources, setSource }) {
}
}
return (
<div className="mt-1 bg-white border border-gray-200 rounded p-4 space-y-4">
{/* Stats */}
{stats && (
<div className="flex gap-4 text-xs">
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.total_records}</span> total</span>
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.transformed_records}</span> transformed</span>
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.pending_records}</span> pending</span>
</div>
)}
{/* Unified field table */}
{availableFields.length > 0 && (
<div className="pt-2 border-t border-gray-100 space-y-2">
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-400 border-b border-gray-100">
<th className="pb-1 font-medium">Key</th>
<th className="pb-1 font-medium">Origin</th>
<th className="pb-1 font-medium">Type</th>
<th className="pb-1 font-medium text-center">Dedup</th>
<th className="pb-1 font-medium text-center">In view</th>
</tr>
</thead>
<tbody>
{availableFields.map(f => {
const isRaw = f.origins.includes('raw')
const dedupChecked = dedup.split(',').map(s => s.trim()).includes(f.key)
const schemaEntry = schemaFields.find(sf => sf.name === f.key)
const inView = !!schemaEntry
return (
<tr key={f.key} className="border-t border-gray-50">
<td className="py-1 font-mono text-gray-700">{f.key}</td>
<td className="py-1 text-gray-400">{f.origins.join(', ')}</td>
<td className="py-1">
{inView && (
<select
className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
value={schemaEntry.type}
onChange={e => setSchemaFields(sf =>
sf.map(s => s.name === f.key ? { ...s, type: e.target.value } : s)
)}
>
{FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
</select>
)}
</td>
<td className="py-1 text-center">
{isRaw && (
<input
type="checkbox"
checked={dedupChecked}
onChange={e => {
const current = dedup.split(',').map(s => s.trim()).filter(Boolean)
const next = e.target.checked
? [...current, f.key]
: current.filter(k => k !== f.key)
setDedup(next.join(', '))
}}
/>
)}
</td>
<td className="py-1 text-center">
<input
type="checkbox"
checked={inView}
onChange={e => {
if (e.target.checked) {
setSchemaFields(sf => [...sf, { name: f.key, type: 'text' }])
} else {
setSchemaFields(sf => sf.filter(s => s.name !== f.key))
}
}}
/>
</td>
</tr>
)
})}
</tbody>
</table>
<div className="flex items-center gap-3 pt-1">
<form onSubmit={handleSave}>
<button type="submit" disabled={saving}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
{saving ? 'Saving…' : 'Save'}
</button>
</form>
{schemaFields.length > 0 && (
<>
<button
onClick={handleGenerateView}
disabled={generating}
className="text-xs bg-green-600 text-white px-2 py-1.5 rounded hover:bg-green-700 disabled:opacity-50"
>
{generating ? 'Generating…' : 'Generate view'}
</button>
{viewName && (
<code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">{viewName}</code>
)}
</>
)}
</div>
</div>
)}
{/* Save button when no fields loaded yet */}
{availableFields.length === 0 && (
<form onSubmit={handleSave}>
<button type="submit" disabled={saving}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
{saving ? 'Saving…' : 'Save'}
</button>
</form>
)}
{/* Reprocess */}
<div className="flex items-center gap-3 pt-2 border-t border-gray-100">
<button
onClick={handleReprocess}
disabled={reprocessing}
className="text-sm bg-orange-500 text-white px-3 py-1.5 rounded hover:bg-orange-600 disabled:opacity-50"
>
{reprocessing ? 'Reprocessing…' : 'Reprocess all records'}
</button>
<span className="text-xs text-gray-400">Clears and reruns all transformation rules</span>
</div>
{result && <p className="text-xs text-green-600">{result}</p>}
{error && <p className="text-xs text-red-500">{error}</p>}
<div className="pt-1 border-t border-gray-100 flex justify-between">
<button onClick={onClose} className="text-xs text-gray-400 hover:text-gray-600">Close</button>
<button
onClick={() => onDeleted(source.name)}
className="text-xs text-red-400 hover:text-red-600"
>
Delete source
</button>
</div>
</div>
)
}
export default function Sources({ sources, setSources, setSource }) {
const [creating, setCreating] = useState(false)
const [expanded, setExpanded] = useState(null)
const [form, setForm] = useState({ name: '', dedup_fields: '', fields: [], schema: [] })
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const fileRef = useRef()
async function handleDelete() {
if (!confirm(`Delete source "${sourceObj.name}" and all its data?`)) return
try {
await api.deleteSource(sourceObj.name)
const updated = await api.getSources()
setSources(updated)
if (updated.length > 0) setSource(updated[0].name)
else setSource('')
} catch (err) {
alert(err.message)
}
}
async function handleSuggest(e) {
const file = e.target.files[0]
@ -241,93 +118,222 @@ export default function Sources({ sources, setSources, setSource }) {
schema: suggestion.fields.map(f => ({ name: f.name, type: f.type }))
}))
} catch (err) {
setError(err.message)
setCreateError(err.message)
}
}
async function handleCreate(e) {
e.preventDefault()
setError('')
const dedup = form.dedup_fields.split(',').map(s => s.trim()).filter(Boolean)
if (!form.name || dedup.length === 0) {
setError('Name and at least one dedup field required')
setCreateError('')
const dedupArr = form.dedup_fields.split(',').map(s => s.trim()).filter(Boolean)
if (!form.name || dedupArr.length === 0) {
setCreateError('Name and at least one dedup field required')
return
}
setLoading(true)
setCreateLoading(true)
try {
const config = form.schema.length > 0 ? { fields: form.schema } : {}
await api.createSource({ name: form.name, dedup_fields: dedup, config })
await api.createSource({ name: form.name, dedup_fields: dedupArr, config })
const updated = await api.getSources()
setSources(updated)
setSource(form.name)
setForm({ name: '', dedup_fields: '', fields: [], schema: [] })
setCreating(false)
} catch (err) {
setError(err.message)
setCreateError(err.message)
} finally {
setLoading(false)
}
}
async function handleDeleted(name) {
if (!confirm(`Delete source "${name}" and all its data?`)) return
try {
await api.deleteSource(name)
const updated = await api.getSources()
setSources(updated)
setExpanded(null)
if (updated.length > 0) setSource(updated[0].name)
} catch (err) {
alert(err.message)
setCreateLoading(false)
}
}
return (
<div className="p-6 max-w-2xl">
<div className="flex items-center justify-between mb-6">
<h1 className="text-xl font-semibold text-gray-800">Sources</h1>
<h1 className="text-xl font-semibold text-gray-800">
{sourceObj ? sourceObj.name : 'Sources'}
</h1>
<button
onClick={() => { setCreating(true); setError(''); setExpanded(null) }}
onClick={() => { setCreating(true); setCreateError('') }}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700"
>
New source
</button>
</div>
{sources.length === 0 && !creating && (
<p className="text-gray-500 text-sm">No sources yet. Create one to get started.</p>
{/* No source selected */}
{!sourceObj && !creating && (
<p className="text-sm text-gray-400">No sources yet. Create one to get started.</p>
)}
<div className="space-y-2">
{sources.map(s => (
<div key={s.name}>
<div
className="flex items-center justify-between bg-white border border-gray-200 rounded px-4 py-3 cursor-pointer hover:bg-gray-50"
onClick={() => setExpanded(expanded === s.name ? null : s.name)}
>
<div>
<span className="font-medium text-gray-800">{s.name}</span>
<span className="ml-3 text-xs text-gray-400">dedup: {s.dedup_fields?.join(', ')}</span>
</div>
<span className="text-xs text-gray-300">{expanded === s.name ? '▲' : '▼'}</span>
{/* Source detail */}
{sourceObj && !creating && (
<div className="space-y-4">
{/* Stats */}
{stats && (
<div className="flex gap-4 text-xs">
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.total_records}</span> total</span>
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.transformed_records}</span> transformed</span>
<span className="text-gray-500"><span className="font-medium text-gray-800">{stats.pending_records}</span> pending</span>
</div>
)}
{expanded === s.name && (
<SourceDetail
source={s}
onClose={() => setExpanded(null)}
onDeleted={handleDeleted}
setSources={setSources}
setSource={setSource}
/>
)}
{/* Unified field table */}
{availableFields.length > 0 && (
<div className="pt-2 border-t border-gray-100 space-y-2">
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-400 border-b border-gray-100">
<th className="pb-1 font-medium">Key</th>
<th className="pb-1 font-medium">Origin</th>
<th className="pb-1 font-medium">Type</th>
<th className="pb-1 font-medium text-center">Dedup</th>
<th className="pb-1 font-medium text-center">In view</th>
<th className="pb-1 font-medium text-center">Seq</th>
</tr>
</thead>
<tbody>
{availableFields.map(f => {
const isRaw = f.origins.includes('raw')
const dedupChecked = dedup.split(',').map(s => s.trim()).includes(f.key)
const schemaEntry = schemaFields.find(sf => sf.name === f.key)
const inView = !!schemaEntry
return (
<tr key={f.key} className="border-t border-gray-50">
<td className="py-1 font-mono text-gray-700">{f.key}</td>
<td className="py-1 text-gray-400">{f.origins.join(', ')}</td>
<td className="py-1">
{inView && (
<div className="flex gap-1 items-center">
<select
className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
value={schemaEntry.type}
onChange={e => setSchemaFields(sf =>
sf.map(s => s.name === f.key ? { ...s, type: e.target.value } : s)
)}
>
{FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
</select>
<input
className="border border-gray-200 rounded px-1 py-0.5 text-xs font-mono w-32 focus:outline-none focus:border-blue-400"
value={schemaEntry.expression || ''}
placeholder="{field} * {sign}"
onChange={e => setSchemaFields(sf =>
sf.map(s => s.name === f.key ? { ...s, expression: e.target.value || undefined } : s)
)}
/>
</div>
)}
</td>
<td className="py-1 text-center">
{isRaw && (
<input
type="checkbox"
checked={dedupChecked}
onChange={e => {
const current = dedup.split(',').map(s => s.trim()).filter(Boolean)
const next = e.target.checked
? [...current, f.key]
: current.filter(k => k !== f.key)
setDedup(next.join(', '))
}}
/>
)}
</td>
<td className="py-1 text-center">
<input
type="checkbox"
checked={inView}
onChange={e => {
if (e.target.checked) {
const nextSeq = schemaFields.length > 0
? Math.max(...schemaFields.map(s => s.seq ?? 0)) + 1
: 1
setSchemaFields(sf => [...sf, { name: f.key, type: 'text', seq: nextSeq }])
} else {
setSchemaFields(sf => sf.filter(s => s.name !== f.key))
}
}}
/>
</td>
<td className="py-1 text-center">
{inView && (
<input
type="number"
className="w-12 border border-gray-200 rounded px-1 py-0.5 text-xs text-center focus:outline-none focus:border-blue-400"
value={schemaEntry.seq ?? ''}
onChange={e => setSchemaFields(sf =>
sf.map(s => s.name === f.key ? { ...s, seq: parseInt(e.target.value) || 0 } : s)
)}
/>
)}
</td>
</tr>
)
})}
</tbody>
</table>
<div className="flex items-center gap-3 pt-1">
<form onSubmit={handleSave}>
<button type="submit" disabled={saving}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
{saving ? 'Saving…' : 'Save'}
</button>
</form>
{schemaFields.length > 0 && (
<>
<button
onClick={handleGenerateView}
disabled={generating}
className="text-xs bg-green-600 text-white px-2 py-1.5 rounded hover:bg-green-700 disabled:opacity-50"
>
{generating ? 'Generating…' : 'Generate view'}
</button>
{viewName && (
<code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">{viewName}</code>
)}
</>
)}
</div>
</div>
)}
{/* Save button when no fields loaded yet */}
{availableFields.length === 0 && (
<form onSubmit={handleSave}>
<button type="submit" disabled={saving}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
{saving ? 'Saving…' : 'Save'}
</button>
</form>
)}
{/* Reprocess */}
<div className="flex items-center gap-3 pt-2 border-t border-gray-100">
<button
onClick={handleReprocess}
disabled={reprocessing}
className="text-sm bg-orange-500 text-white px-3 py-1.5 rounded hover:bg-orange-600 disabled:opacity-50"
>
{reprocessing ? 'Reprocessing…' : 'Reprocess all records'}
</button>
<span className="text-xs text-gray-400">Clears and reruns all transformation rules</span>
</div>
))}
</div>
{result && <p className="text-xs text-green-600">{result}</p>}
{error && <p className="text-xs text-red-500">{error}</p>}
<div className="pt-2 border-t border-gray-100">
<button onClick={handleDelete} className="text-xs text-red-400 hover:text-red-600">
Delete source
</button>
</div>
</div>
)}
{/* Create form */}
{creating && (
<div className="mt-6 bg-white border border-gray-200 rounded p-4">
<div className="bg-white border border-gray-200 rounded p-4">
<h2 className="text-sm font-semibold text-gray-700 mb-3">New source</h2>
<div className="mb-4">
@ -394,15 +400,15 @@ export default function Sources({ sources, setSources, setSource }) {
</div>
)}
{error && <p className="text-xs text-red-500">{error}</p>}
{createError && <p className="text-xs text-red-500">{createError}</p>}
<div className="flex gap-2">
<button type="submit" disabled={loading}
<button type="submit" disabled={createLoading}
className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
{loading ? 'Creating…' : 'Create'}
{createLoading ? 'Creating…' : 'Create'}
</button>
<button type="button"
onClick={() => { setCreating(false); setError(''); setForm({ name: '', dedup_fields: '', fields: [], schema: [] }) }}
onClick={() => { setCreating(false); setCreateError(''); setForm({ name: '', dedup_fields: '', fields: [], schema: [] }) }}
className="text-sm text-gray-500 px-3 py-1.5 rounded hover:bg-gray-100">
Cancel
</button>