feat(tuning): weekly trend view — per-surface series + knob-turn markers
The verify half of the tune→verify loop (#1251), on the same admin Tuning page as the knobs: - RecommendationWeeklyTrends: weekly per-source outcomes aggregated across all users (the knobs are global, so judging a turn needs global outcomes — rows carry rates only, no track/user identity), with a taste-hit count per bucket: plays whose track's artist has a positive weight in the player's current taste profile. That's the "cheap recompute" reading — retroactive over the whole window, at the cost of profile drift. - GET /api/admin/recommendation-trends?weeks=N (default 12, cap 52): per-family weekly series (skip rate, sample-weighted completion, taste-hit rate) plus the tuning-audit markers inside the window. - Web: sparkline table under the tuning cards — skip rate per week on a shared axis with dashed ticks at knob turns, latest-week columns, window taste-hit rate, low-volume rows dimmed as anecdote, and a plain-text list of the window's tuning changes. Also fixes the revive unused-parameter lint on the tuning GET handler that failed CI run 1903 on the previous commit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TsF3cNoKrqCYsU78cXC8U6
This commit is contained in:
@@ -4,10 +4,14 @@
|
||||
getTuning,
|
||||
patchTuning,
|
||||
resetTuning,
|
||||
getTrends,
|
||||
type TuningScope,
|
||||
type TuningSnapshot,
|
||||
type WeightProfile,
|
||||
type TasteTuning
|
||||
type TasteTuning,
|
||||
type TrendsResponse,
|
||||
type TrendSeries,
|
||||
type TrendMarker
|
||||
} from '$lib/api/tuning';
|
||||
import { errMessage } from '$lib/api/errors';
|
||||
import { pushToast } from '$lib/stores/toast.svelte';
|
||||
@@ -124,6 +128,86 @@
|
||||
saving = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Trends (#1251): weekly skip-rate sparklines per surface with
|
||||
// knob-turn markers — the verify half of the tune→verify loop.
|
||||
|
||||
let trends = $state<TrendsResponse | null>(null);
|
||||
let trendsFailed = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
getTrends()
|
||||
.then((t) => {
|
||||
trends = t;
|
||||
})
|
||||
.catch(() => {
|
||||
trendsFailed = true;
|
||||
});
|
||||
});
|
||||
|
||||
const SPARK_W = 220;
|
||||
const SPARK_H = 36;
|
||||
const TREND_LOW_VOLUME = 20;
|
||||
|
||||
// The week axis is the sorted union of every series' buckets, so all
|
||||
// sparklines and markers share one x scale.
|
||||
const weekAxis = $derived.by(() => {
|
||||
if (!trends) return [] as string[];
|
||||
const set = new Set<string>();
|
||||
for (const s of trends.series) for (const p of s.points) set.add(p.week_start);
|
||||
return [...set].sort();
|
||||
});
|
||||
|
||||
function xFor(week: string): number {
|
||||
const i = weekAxis.indexOf(week);
|
||||
if (i < 0 || weekAxis.length < 2) return 0;
|
||||
return (i / (weekAxis.length - 1)) * SPARK_W;
|
||||
}
|
||||
|
||||
// Polyline of the series' weekly skip rate on a fixed [0,1] y-scale
|
||||
// (higher = worse, drawn upward) so rows are visually comparable.
|
||||
function sparkPoints(s: TrendSeries): string {
|
||||
return s.points
|
||||
.map((p) => `${xFor(p.week_start).toFixed(1)},${(SPARK_H - p.skip_rate * SPARK_H).toFixed(1)}`)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
// A marker lands on the latest axis week that starts at/before it.
|
||||
function markerX(m: TrendMarker): number {
|
||||
const day = m.changed_at.slice(0, 10);
|
||||
let idx = -1;
|
||||
for (let i = 0; i < weekAxis.length; i++) {
|
||||
if (weekAxis[i] <= day) idx = i;
|
||||
}
|
||||
if (idx < 0 || weekAxis.length < 2) return 0;
|
||||
return (idx / (weekAxis.length - 1)) * SPARK_W;
|
||||
}
|
||||
|
||||
function windowTasteHitRate(s: TrendSeries): number {
|
||||
let plays = 0;
|
||||
let hits = 0;
|
||||
for (const p of s.points) {
|
||||
plays += p.plays;
|
||||
hits += p.taste_hit_rate * p.plays;
|
||||
}
|
||||
return plays > 0 ? hits / plays : 0;
|
||||
}
|
||||
|
||||
function latest(s: TrendSeries): { skip: number; completion: number } {
|
||||
const last = s.points[s.points.length - 1];
|
||||
return last ? { skip: last.skip_rate, completion: last.avg_completion } : { skip: 0, completion: 0 };
|
||||
}
|
||||
|
||||
function pct(v: number): string {
|
||||
return `${(v * 100).toFixed(0)}%`;
|
||||
}
|
||||
|
||||
function markerSummary(m: TrendMarker): string {
|
||||
const when = m.changed_at.slice(0, 10);
|
||||
if (m.action === 'reset') return `${when} — ${m.scope} reset to defaults`;
|
||||
const fields = (m.changes ?? []).map((c) => `${c.field} ${c.old}→${c.new}`).join(', ');
|
||||
return `${when} — ${m.scope}: ${fields}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -247,4 +331,104 @@
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Weekly trends (#1251): the verify half. Sparklines share one
|
||||
week axis; dashed ticks mark knob turns so cause→effect reads
|
||||
off the chart. -->
|
||||
<section class="space-y-3 rounded border border-border bg-surface p-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Weekly trends</h2>
|
||||
<p class="text-xs text-text-secondary">
|
||||
Skip rate per surface over the last {trends?.weeks ?? 12} weeks (lower is better; all
|
||||
users aggregated, rates only). Dashed ticks mark tuning changes. Taste hit is the share
|
||||
of plays whose artist fits the current taste profile.
|
||||
</p>
|
||||
</div>
|
||||
{#if trendsFailed}
|
||||
<p class="text-sm text-text-secondary">Couldn't load trends.</p>
|
||||
{:else if !trends}
|
||||
<p class="text-sm text-text-secondary">Loading…</p>
|
||||
{:else if trends.series.length === 0}
|
||||
<p class="text-sm text-text-secondary">
|
||||
No plays recorded yet — trends appear once listening accumulates.
|
||||
</p>
|
||||
{:else}
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-text-secondary">
|
||||
<th class="py-1 font-medium">Surface</th>
|
||||
<th class="py-1 font-medium">Skip rate by week</th>
|
||||
<th class="py-1 text-right font-medium">Plays</th>
|
||||
<th class="py-1 text-right font-medium">Latest skip</th>
|
||||
<th class="py-1 text-right font-medium">Latest completion</th>
|
||||
<th class="py-1 text-right font-medium">Taste hit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each trends.series as s (s.key)}
|
||||
<tr
|
||||
class="border-t border-border"
|
||||
class:opacity-60={s.plays < TREND_LOW_VOLUME}
|
||||
title={s.plays < TREND_LOW_VOLUME
|
||||
? 'Fewer than 20 plays in the window — treat as anecdote, not signal.'
|
||||
: undefined}
|
||||
>
|
||||
<td class="py-1.5 pr-2">{s.label}</td>
|
||||
<td class="py-1.5">
|
||||
<svg
|
||||
width={SPARK_W}
|
||||
height={SPARK_H}
|
||||
viewBox="0 0 {SPARK_W} {SPARK_H}"
|
||||
role="img"
|
||||
aria-label="{s.label} weekly skip rate"
|
||||
data-testid="sparkline-{s.key}"
|
||||
>
|
||||
<line x1="0" y1={SPARK_H - 0.5} x2={SPARK_W} y2={SPARK_H - 0.5}
|
||||
stroke="currentColor" opacity="0.15" />
|
||||
{#each trends.markers as m, i (i)}
|
||||
<line
|
||||
x1={markerX(m)} y1="0" x2={markerX(m)} y2={SPARK_H}
|
||||
stroke="currentColor" opacity="0.35" stroke-dasharray="2,2"
|
||||
>
|
||||
<title>{markerSummary(m)}</title>
|
||||
</line>
|
||||
{/each}
|
||||
{#if s.points.length > 1}
|
||||
<polyline
|
||||
class="text-accent"
|
||||
points={sparkPoints(s)}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
{:else if s.points.length === 1}
|
||||
<circle
|
||||
class="text-accent"
|
||||
cx={xFor(s.points[0].week_start)}
|
||||
cy={SPARK_H - s.points[0].skip_rate * SPARK_H}
|
||||
r="2" fill="currentColor"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
</td>
|
||||
<td class="py-1.5 text-right tabular-nums">{s.plays}</td>
|
||||
<td class="py-1.5 text-right tabular-nums">{pct(latest(s).skip)}</td>
|
||||
<td class="py-1.5 text-right tabular-nums">{pct(latest(s).completion)}</td>
|
||||
<td class="py-1.5 text-right tabular-nums">{pct(windowTasteHitRate(s))}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{#if trends.markers.length > 0}
|
||||
<div class="space-y-1">
|
||||
<h3 class="text-sm font-medium">Tuning changes in this window</h3>
|
||||
<ul class="space-y-0.5 text-xs text-text-secondary">
|
||||
{#each trends.markers as m, i (i)}
|
||||
<li>{markerSummary(m)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user