Add bulk override: DB function, API route, UI select bar

- bulk_set_record_overrides() DB function merges overrides into multiple records at once using a CTE with RETURNING for accurate count - POST /records/bulk-overrides calls the function (consistent with rest of API — no raw SQL in routes) - UI: regex input on loaded rows selects rows for bulk override; labeled "Bulk select:" / "DB query:" to distinguish from server-side filters Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 10:55:59 -04:00 · 2026-04-27 10:55:59 -04:00 · e5b95e7112
commit e5b95e7112
parent 814dcb7af1
4 changed files with 148 additions and 6 deletions
--- a/api/routes/records.js
+++ b/api/routes/records.js
@ -49,6 +49,22 @@ module.exports = (pool) => {
        }
    });

+    // Set overrides for all selected records and immediately merge into transformed
+    router.post('/bulk-overrides', async (req, res, next) => {
+        try {
+            const { source_name, record_ids, overrides } = req.body;
+            if (!source_name || !Array.isArray(record_ids) || record_ids.length === 0 || !overrides || typeof overrides !== 'object')
+                return res.status(400).json({ error: 'source_name, record_ids array, and overrides object required' });
+            const idList = record_ids.map(id => parseInt(id)).join(',');
+            const result = await pool.query(
+                `SELECT bulk_set_record_overrides(${lit(source_name)}, ARRAY[${idList}]::int[], ${lit(overrides)}) as updated`
+            );
+            res.json({ updated: Number(result.rows[0].updated) });
+        } catch (err) {
+            next(err);
+        }
+    });
+
    // Set overrides for a record and immediately merge into transformed
    router.put('/:id/overrides', async (req, res, next) => {
        try {
--- a/database/queries/records.sql
+++ b/database/queries/records.sql
@ -51,6 +51,20 @@ RETURNS dataflow.records AS $$
    RETURNING *;
 $$ LANGUAGE sql;

+-- Merge overrides into multiple records at once; returns actual updated count
+CREATE OR REPLACE FUNCTION bulk_set_record_overrides(p_source_name TEXT, p_ids INT[], p_overrides JSONB)
+RETURNS BIGINT AS $$
+    WITH updated AS (
+        UPDATE dataflow.records
+        SET overrides   = COALESCE(overrides, '{}'::jsonb) || p_overrides,
+            transformed = COALESCE(transformed, data) || p_overrides
+        WHERE id = ANY(p_ids)
+          AND source_name = p_source_name
+        RETURNING id
+    )
+    SELECT count(*) FROM updated;
+$$ LANGUAGE sql;
+
 -- Clear overrides; caller should reprocess to restore computed transformed value
 CREATE OR REPLACE FUNCTION clear_record_overrides(p_id INT)
 RETURNS dataflow.records AS $$
--- a/ui/src/api.js
+++ b/ui/src/api.js
@ -136,6 +136,7 @@ export const api = {
    request('GET', `/records/source/${source}?limit=${limit}&offset=${offset}`),
  getRecord: (id) => request('GET', `/records/${id}`),
  getOverrideKeys: (source) => request('GET', `/sources/${source}/override-keys`),
+  setBulkRecordOverrides: (source, recordIds, overrides) => request('POST', `/records/bulk-overrides`, { source_name: source, record_ids: recordIds, overrides }),
  setRecordOverrides: (id, overrides) => request('PUT', `/records/${id}/overrides`, { overrides }),
  clearRecordOverrides: (id) => request('DELETE', `/records/${id}/overrides`),
 }
--- a/ui/src/pages/Records.jsx
+++ b/ui/src/pages/Records.jsx
@ -87,8 +87,10 @@ export default function Records({ source }) {
  const [loading, setLoading] = useState(false)
  const [viewError, setViewError] = useState(null)
  const [sort, setSort] = useState({ col: null, dir: 'asc' })
-  const [filters, setFilters] = useState([])
-  const debounceRef = useRef(null)
+  const [filters, setFilters] = useState([])  // DB sort/filter queries
+  const [rowFilter, setRowFilter] = useState('')  // regex filter for selecting rows
+  const [selected, setSelected] = useState(new Set())  // row IDs selected for bulk override
+  const [bulkDraft, setBulkDraft] = useState({})  // bulk override values
  const LIMIT = 100

  // Override cols — loaded from DB once per source, extended by user via +
@ -104,6 +106,7 @@ export default function Records({ source }) {
  const [panelLoading, setPanelLoading] = useState(false)
  const [panelSaving, setPanelSaving] = useState(false)
  const [panelMsg, setPanelMsg] = useState(null)
+  const debounceRef = useRef(null)

  useEffect(() => {
    if (!source) return
@ -119,8 +122,26 @@ export default function Records({ source }) {
    load(0, null, 'asc', [])
    api.getOverrideKeys(source).then(setOverrideCols).catch(() => {})
    api.getGlobalValues().then(setGlobalValues).catch(() => {})
+    setSelected(new Set())
+    setBulkDraft({})
+    setRowFilter('')
  }, [source])

+  // Auto-select all rows matching the regex filter when it changes
+  useEffect(() => {
+    if (!rowFilter) return
+    let re = null
+    try { re = new RegExp(rowFilter, 'i') } catch { return }
+    const matches = rows.filter(r => {
+      for (const col of displayCols) {
+        const val = r[col]
+        if (val != null && re.test(String(val))) return true
+      }
+      return false
+    })
+    setSelected(new Set(matches.map(r => r.id)))
+  }, [rowFilter, rows])
+
  async function load(off, col, dir, filt) {
    setLoading(true)
    try {
@ -158,6 +179,7 @@ export default function Records({ source }) {
  function removeFilter(i) {
    const next = filters.filter((_, idx) => idx !== i)
    setFilters(next)
+    setSelected(new Set())
    setOffset(0)
    load(0, sort.col, sort.dir, next)
  }
@ -165,12 +187,13 @@ export default function Records({ source }) {
  function updateFilter(i, key, val) {
    const next = filters.map((f, idx) => idx === i ? { ...f, [key]: val } : f)
    setFilters(next)
+    setSelected(new Set())
    setOffset(0)
    triggerLoad(0, sort.col, sort.dir, next)
  }

-  function prev() { const o = Math.max(0, offset - LIMIT); setOffset(o); load(o, sort.col, sort.dir, filters) }
-  function next() { const o = offset + LIMIT; setOffset(o); load(o, sort.col, sort.dir, filters) }
+  function prev() { const o = Math.max(0, offset - LIMIT); setOffset(o); setSelected(new Set()); load(o, sort.col, sort.dir, filters) }
+  function next() { const o = offset + LIMIT; setOffset(o); setSelected(new Set()); load(o, sort.col, sort.dir, filters) }

  async function openPanel(row) {
    setPanelOpen(true)
@ -269,6 +292,7 @@ export default function Records({ source }) {
        {/* Filter bar */}
        {exists !== false && visCols.length > 0 && (
          <div className="mb-4 flex flex-wrap gap-2 items-center">
+            <span className="text-xs text-gray-400 font-medium mr-1">DB query:</span>
            {filters.map((f, i) => (
              <div key={i} className="flex items-center gap-1 bg-white border border-gray-200 rounded px-2 py-1">
                <select
@ -299,6 +323,70 @@ export default function Records({ source }) {
          </div>
        )}

+        {/* Bulk select + override bar */}
+        {exists && visCols.length > 0 && (
+          <div className="mb-4 flex flex-wrap gap-2 items-center">
+            <span className="text-xs text-gray-400 font-medium mr-1">Bulk select:</span>
+            <input
+              className={`text-xs font-mono border rounded px-2 py-1.5 w-44 focus:outline-none focus:border-blue-400 ${
+                rowFilter ? 'border-blue-300' : 'border-gray-200'
+              }`}
+              placeholder="regex on loaded rows…"
+              value={rowFilter}
+              onChange={e => setRowFilter(e.target.value)}
+            />
+            {rowFilter && (
+              <span className="text-xs text-gray-400">{selected.size} of {rows.length} rows selected</span>
+            )}
+            {selected.size > 0 && (
+              <div className="flex items-center gap-2 ml-4 p-2 bg-blue-50 border border-blue-200 rounded flex-wrap">
+                {allOverrideCols.map(col => (
+                  <AutocompleteInput
+                    key={col}
+                    className="border border-blue-300 rounded px-2 py-1 text-xs min-w-24 focus:outline-none focus:border-blue-500 bg-white"
+                    placeholder={col}
+                    value={bulkDraft[col] || ''}
+                    onChange={v => setBulkDraft(d => ({ ...d, [col]: v }))}
+                    suggestions={[...(globalValues[col] || [])].sort()}
+                  />
+                ))}
+                <button
+                  onClick={async () => {
+                    const overrides = Object.fromEntries(
+                      Object.entries(bulkDraft).filter(([, v]) => v.trim())
+                    )
+                    if (Object.keys(overrides).length === 0) return
+                    if (selected.size === 0) return
+                    setPanelSaving(true)
+                    setPanelMsg(null)
+                    try {
+                      const res = await api.setBulkRecordOverrides(source, [...selected], overrides)
+                      setSelected(new Set())
+                      setBulkDraft({})
+                      setPanelMsg({ text: `Updated ${res.updated} records.`, ok: true })
+                      load(offset, sort.col, sort.dir, filters)
+                    } catch (err) {
+                      setPanelMsg({ text: err.message, ok: false })
+                    } finally {
+                      setPanelSaving(false)
+                    }
+                  }}
+                  disabled={panelSaving || selected.size === 0 || Object.values(bulkDraft).every(v => !v.trim())}
+                  className="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 disabled:opacity-40 whitespace-nowrap"
+                >
+                  Apply to {selected.size}
+                </button>
+                <button
+                  onClick={() => { setSelected(new Set()); setBulkDraft({}); setRowFilter('') }}
+                  className="text-xs text-blue-400 hover:text-blue-600"
+                >
+                  cancel
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
        {loading && <p className="text-sm text-gray-400">Loading…</p>}
        {!loading && viewError && <p className="text-sm text-red-500">View error: {viewError} — check field types in Sources.</p>}
        {!loading && exists === false && (
@ -318,6 +406,17 @@ export default function Records({ source }) {
              <table className="w-full text-sm">
                <thead>
                  <tr className="text-left text-xs text-gray-400 border-b border-gray-100 bg-gray-50">
+                    <th className="px-2 py-2 w-8">
+                      <input
+                        type="checkbox"
+                        className="cursor-pointer"
+                        checked={rows.length > 0 && rows.every(r => selected.has(r.id))}
+                        onChange={e => {
+                          if (e.target.checked) setSelected(new Set(rows.map(r => r.id)))
+                          else setSelected(new Set())
+                        }}
+                      />
+                    </th>
                    {displayCols.map(col => {
                      const active = sort.col === col
                      return (
@ -333,11 +432,23 @@ export default function Records({ source }) {
                <tbody>
                  {rows.map((row, i) => {
                    const isOverridden = row._overridden
-                    const isSelected = selectedRow?.id != null && selectedRow.id === row.id
+                    const isRowSelected = selected.has(row.id)
+                    const isPanelSelected = selectedRow?.id != null && selectedRow.id === row.id
                    return (
                      <tr key={i} onClick={() => openPanel(row)}
                        className={`border-t border-gray-50 cursor-pointer transition-colors
-                          ${isSelected ? 'bg-blue-50' : isOverridden ? 'bg-amber-50 hover:bg-amber-100' : 'hover:bg-gray-50'}`}>
+                          ${isPanelSelected ? 'bg-blue-50' : isRowSelected ? 'bg-blue-50' : isOverridden ? 'bg-amber-50 hover:bg-amber-100' : 'hover:bg-gray-50'}`}>
+                        <td className="px-2 py-2">
+                          <input
+                            type="checkbox"
+                            className="cursor-pointer"
+                            checked={isRowSelected}
+                            onChange={e => {
+                              e.stopPropagation()
+                              setSelected(s => { const n = new Set(s); n.has(row.id) ? n.delete(row.id) : n.add(row.id); return n })
+                            }}
+                          />
+                        </td>
                        {displayCols.map((col, j) => {
                          const formatted = formatVal(row[col])
                          return (