Admin: source Articles inspector (verify metrics against real evidence)
New per-row "Articles" button on the Sources table expands a read-only inline
panel of the source's ACTUAL ingested articles — so the automated metrics
(paywall/image/acceptance/duplicate) can be verified against evidence instead of
trusted blind. Distinct from "Check" (which re-samples the LIVE feed for
would-pass quality); this shows what's already in the DB, which is what the table
metrics are computed from.
- Backend: GET /api/admin/sources/{id}/articles?filter=&limit=&offset= (admin,
read-only). queries.source_articles + source_articles_summary — per article:
title, url, date, accepted, reason (the "why"), topic/flavor, paywalled
(domain rule), has_image, duplicate. Summary = counts + source-level paywall
rule.
- Frontend: expandable panel with a summary header ("27 ingested · 18 accepted
· … · paywall rule: ON (domain)"), filter chips (All/Accepted/Rejected/No
image/Duplicates), compact rows with title→link + badges + reason, Load more.
So "100% paywall" or "0% images" becomes clickable evidence: open two articles
to tell a real paywall from a mis-flagged domain, or a true image gap from an
enrichment failure. Test: test_source_articles_inspector. 241 pytest + 11 vitest.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -263,6 +263,27 @@
|
||||
}
|
||||
function dismissCheck(s) { s._check = null; s._checkErr = ''; }
|
||||
|
||||
// --- Source article inspector: the real articles behind the metrics ---
|
||||
async function toggleArticles(s) {
|
||||
if (s._showArts) { s._showArts = false; return; }
|
||||
s._showArts = true;
|
||||
if (!s._arts) await loadArticles(s, 'all', true);
|
||||
}
|
||||
async function loadArticles(s, filter, reset) {
|
||||
s._artBusy = true; s._artErr = '';
|
||||
if (reset) { s._artFilter = filter; s._artOffset = 0; s._arts = []; }
|
||||
try {
|
||||
const q = `filter=${s._artFilter}&limit=25&offset=${s._artOffset}`;
|
||||
const r = await getJSON(`/api/admin/sources/${s.id}/articles?${q}`);
|
||||
s._arts = reset ? r.articles : [...(s._arts || []), ...r.articles];
|
||||
if (r.summary) s._artSummary = r.summary;
|
||||
s._artMore = r.has_more;
|
||||
s._artOffset += r.articles.length;
|
||||
} catch (e) { s._artErr = e?.message || 'Could not load articles.'; }
|
||||
finally { s._artBusy = false; }
|
||||
}
|
||||
const ART_FILTERS = [['all', 'All'], ['accepted', 'Accepted'], ['rejected', 'Rejected'], ['no_image', 'No image'], ['duplicates', 'Duplicates']];
|
||||
|
||||
// --- Source candidates: supervised "add a source" pipeline ---
|
||||
let candidates = $state([]);
|
||||
let newFeedUrl = $state('');
|
||||
@@ -677,6 +698,7 @@
|
||||
<button class="act" onclick={() => (s.review_flag ? clearReview(s) : openFlag(s))}>{s.review_flag ? 'Clear' : 'Flag'}</button>
|
||||
<button class="act" onclick={() => toggleVisible(s)}>{s.content_visible ? 'Hide' : 'Show'}</button>
|
||||
<button class="act" title="Read-only spot-check of the live feed" onclick={() => checkSource(s)} disabled={s._checking}>{s._checking ? 'Checking…' : 'Check'}</button>
|
||||
<button class="act" title="Inspect this source's real ingested articles" onclick={() => toggleArticles(s)}>{s._showArts ? 'Hide' : 'Articles'}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{#if s._checking || s._check || s._checkErr}
|
||||
@@ -698,6 +720,49 @@
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{#if s._showArts}
|
||||
<tr class="artrow">
|
||||
<td colspan="10">
|
||||
{#if s._artSummary}
|
||||
<div class="artsum">
|
||||
<strong>{s._artSummary.total}</strong> ingested · {s._artSummary.accepted} accepted ·
|
||||
{s._artSummary.rejected} rejected · {s._artSummary.no_image} no image ·
|
||||
{s._artSummary.duplicates} dup ·
|
||||
paywall rule: <span class="pwrule" class:on={s._artSummary.paywalled}>{s._artSummary.paywalled ? 'ON (domain)' : 'off'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="artfilters">
|
||||
{#each ART_FILTERS as [key, label] (key)}
|
||||
<button class="chip sm" class:on={(s._artFilter || 'all') === key} onclick={() => loadArticles(s, key, true)}>{label}</button>
|
||||
{/each}
|
||||
<button class="act" onclick={() => (s._showArts = false)}>close</button>
|
||||
</div>
|
||||
{#if s._artErr}<p class="cerr">{s._artErr}</p>{/if}
|
||||
{#if s._arts?.length}
|
||||
<ul class="artlist">
|
||||
{#each s._arts as a (a.id)}
|
||||
<li>
|
||||
<div class="art-row">
|
||||
<a class="art-title" href={a.url} target="_blank" rel="noopener">{a.title}</a>
|
||||
{#if a.accepted === 1}<span class="badge ok">accepted</span>{:else if a.accepted === 0}<span class="badge no">rejected</span>{/if}
|
||||
{#if a.paywalled}<span class="pw" title="domain paywall rule">🔒</span>{/if}
|
||||
{#if !a.has_image}<span class="art-flag" title="no image extracted">no img</span>{/if}
|
||||
{#if a.duplicate}<span class="art-flag" title="marked duplicate">dup</span>{/if}
|
||||
{#if a.topic}<span class="art-cat">{a.topic}</span>{/if}
|
||||
<span class="art-when">{a.published_at ? fdate(a.published_at) : ''}</span>
|
||||
</div>
|
||||
{#if a.reason}<div class="art-reason">{a.reason}</div>{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if s._artMore}<button class="act more" onclick={() => loadArticles(s, s._artFilter, false)} disabled={s._artBusy}>{s._artBusy ? 'Loading…' : 'Load more'}</button>{/if}
|
||||
{:else if !s._artBusy}
|
||||
<p class="muted small">No articles{s._artFilter && s._artFilter !== 'all' ? ' match this filter' : ' yet'}.</p>
|
||||
{/if}
|
||||
{#if s._artBusy && !s._arts?.length}<p class="muted small">Loading articles…</p>{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{:else}
|
||||
<tr><td colspan="10" class="srcempty">{srcSearch.trim() ? `No sources match “${srcSearch.trim()}”.` : 'No sources in this view.'}</td></tr>
|
||||
{/each}
|
||||
@@ -1188,6 +1253,28 @@
|
||||
.chkex { margin-top: 5px; color: var(--ink); }
|
||||
.chkex .chklbl { color: var(--muted); }
|
||||
.chkex.chkrej { color: var(--muted); }
|
||||
|
||||
/* Source article inspector */
|
||||
.srctable tr.artrow td { background: var(--bg); font-size: 0.84rem; padding: 10px 12px; }
|
||||
.artsum { color: var(--ink); margin-bottom: 8px; }
|
||||
.artsum .pwrule { color: var(--muted); font-weight: 600; }
|
||||
.artsum .pwrule.on { color: #9a3b3b; }
|
||||
.artfilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
|
||||
.chip.sm { font-size: 0.74rem; padding: 3px 10px; }
|
||||
.artlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-height: 360px; overflow-y: auto; }
|
||||
.artlist li { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
|
||||
.art-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.art-title { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
|
||||
.art-title:hover { text-decoration: underline; }
|
||||
.art-row .badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; }
|
||||
.badge.ok { background: #e3efe4; color: #3f7048; }
|
||||
.badge.no { background: #f3e0e0; color: #9a3b3b; }
|
||||
.art-row .pw { font-size: 0.78rem; }
|
||||
.art-flag { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
|
||||
.art-cat { font-size: 0.72rem; color: var(--muted); text-transform: capitalize; }
|
||||
.art-when { font-size: 0.72rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
|
||||
.art-reason { font-size: 0.76rem; color: var(--muted); font-style: italic; margin-top: 2px; }
|
||||
.act.more { margin-top: 8px; }
|
||||
.srctable .rowactions { white-space: nowrap; }
|
||||
.srctable .rowactions .act {
|
||||
background: none; border: 1px solid var(--line); color: var(--accent-deep);
|
||||
|
||||
Reference in New Issue
Block a user