Skip to content

Commit 0602164

Browse files
guillermoscriptclaude
guillermoscript
and
claude
committed
feat(teacher): course analytics page + confusion-hotspots widget
Teachers had no way to see how an exercise performs across students. The data existed — `lms_get_confusion_hotspots` already fused practice, exercise and exam-question outcomes with Elo `item_ratings` — but it was reachable only from an MCP client, had no widget, and nothing in the web app read it. Adds both surfaces, and closes the gap that actually answers "is this too hard?": `exercises.difficulty_level` (the teacher's own easy/medium/hard label) was never compared against the rating the platform measured from real attempts. Both surfaces now show the label beside the measured rating and flag the divergence. Web - /dashboard/teacher/courses/[id]/analytics — server-rendered, 7/30/90-day window via plain links (no client JS), linked from the course header. - lib/analytics/confusion-hotspots.ts fuses four signals: practice drills, exercise evaluations, lesson checkpoints and exam-question miss rates. `lesson_checkpoint_attempts` was never read by any teacher surface despite shipping a purpose-built `..._teacher_metrics_idx`. - Sweeps use `fetchAllRows`, so a course busy enough to hit PostgREST's 1000-row cap cannot silently under-report. A signal that fails to load becomes a named warning in the UI rather than an empty list that looks like "nobody is struggling". - Ownership-gated to the course author; every read runs under the teacher's own RLS policies, no admin client. MCP - resources/confusion-hotspots/widget.tsx, wired to the existing tool. - hardest_items now carries difficulty_level + mismatch. - Hotspot scope "lesson" renamed to "practice": those rows are drill topics, which may not map to a lesson at all. - Demo fixtures (default / all-clear / empty) for no-DB previews. Typing the Supabase client (rather than `SupabaseClient<any>`) caught two real defects in the hand-written row shapes: `checkpoint_id` is a number, and `submission_date` is nullable and so cannot be compared bare when picking a student's latest retake. Verified: Next build + typecheck + lint clean; mcp-server build (19 widgets) and type check pass; widget rendered headlessly in all three fixture states; page rendered live against seeded local data as creator@codeacademy.com and the seed rows removed afterwards. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VqQTE7LDYPx7d15BcWLGfC
1 parent a6c88d3 commit 0602164

9 files changed

Lines changed: 1777 additions & 29 deletions

File tree

‎app/[locale]/dashboard/teacher/courses/[courseId]/analytics/page.tsx‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
import { createClient } from '@/lib/supabase/server'
2+
import { redirect } from 'next/navigation'
3+
import Link from 'next/link'
4+
import { getTranslations } from 'next-intl/server'
5+
import { Button } from '@/components/ui/button'
6+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
7+
import { Badge } from '@/components/ui/badge'
8+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
9+
import {
10+
IconArrowLeft,
11+
IconAlertTriangle,
12+
IconChartBar,
13+
IconFlame,
14+
IconScale,
15+
IconInfoCircle,
16+
} from '@tabler/icons-react'
17+
import { getCurrentTenantId, getCurrentUserId } from '@/lib/supabase/tenant'
18+
import { getConfusionHotspots, type Hotspot } from '@/lib/analytics/confusion-hotspots'
19+
import { HotspotScopeBadge, SeverityBar, DifficultyDelta } from '@/components/teacher/analytics-cells'
20+
21+
interface PageProps {
22+
params: Promise<{ courseId: string; locale: string }>
23+
searchParams: Promise<{ days?: string }>
24+
}
25+
26+
/** Look-back windows offered in the header. Anything else falls back to 30. */
27+
const WINDOWS = [7, 30, 90] as const
28+
const DEFAULT_WINDOW = 30
29+
30+
function parseWindow(raw: string | undefined): number {
31+
const n = Number(raw)
32+
return WINDOWS.includes(n as (typeof WINDOWS)[number]) ? n : DEFAULT_WINDOW
33+
}
34+
35+
/**
36+
* Deep-link a hotspot back to the thing a teacher would edit. Practice topics
37+
* and exam questions have no standalone editor, so they link to the lesson or
38+
* stay inert rather than pointing somewhere that 404s.
39+
*/
40+
function hotspotHref(courseId: string, h: Hotspot): string | null {
41+
if (h.scope === 'exercise' && typeof h.ref === 'number') {
42+
return `/dashboard/teacher/courses/${courseId}/exercises/${h.ref}`
43+
}
44+
if (h.lessonId != null) {
45+
return `/dashboard/teacher/courses/${courseId}/lessons/${h.lessonId}`
46+
}
47+
return null
48+
}
49+
50+
export default async function CourseAnalyticsPage({ params, searchParams }: PageProps) {
51+
const { courseId } = await params
52+
const { days: daysParam } = await searchParams
53+
const days = parseWindow(daysParam)
54+
55+
const supabase = await createClient()
56+
const t = await getTranslations('dashboard.teacher.analytics')
57+
const tenantId = await getCurrentTenantId()
58+
59+
const userId = await getCurrentUserId()
60+
if (!userId) redirect('/auth/login')
61+
62+
const courseIdNum = parseInt(courseId, 10)
63+
const { data: course } = await supabase
64+
.from('courses')
65+
.select('course_id, title, author_id')
66+
.eq('course_id', courseIdNum)
67+
.eq('tenant_id', tenantId)
68+
.single()
69+
70+
// Same ownership rule the rest of the teacher course area uses: analytics
71+
// expose every student's results, so a non-author teacher must not see them.
72+
if (!course || course.author_id !== userId) {
73+
return (
74+
<div className="p-8">
75+
<Card className="border-destructive">
76+
<CardHeader>
77+
<CardTitle>{t('accessDenied')}</CardTitle>
78+
<CardDescription>{t('accessDeniedDesc')}</CardDescription>
79+
</CardHeader>
80+
<CardContent>
81+
<Link href="/dashboard/teacher/courses">
82+
<Button variant="outline">{t('backToCourses')}</Button>
83+
</Link>
84+
</CardContent>
85+
</Card>
86+
</div>
87+
)
88+
}
89+
90+
const result = await getConfusionHotspots(supabase, {
91+
courseId: courseIdNum,
92+
tenantId,
93+
days,
94+
})
95+
96+
const { hotspots, hardestItems, sources, warnings } = result
97+
const mislabeled = hardestItems.filter((i) => i.mismatch !== null)
98+
const totalSignals =
99+
sources.practiceAttempts +
100+
sources.exerciseEvaluations +
101+
sources.checkpointAttempts +
102+
sources.examSubmissions
103+
104+
return (
105+
<div className="min-h-screen bg-background pb-20">
106+
<header className="sticky top-0 z-10 border-b bg-card">
107+
<div className="container mx-auto px-4 py-5 sm:px-6 lg:px-8">
108+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
109+
<div className="space-y-1">
110+
<div className="flex min-w-0 items-center gap-2">
111+
<Link href={`/dashboard/teacher/courses/${courseId}`} className="shrink-0">
112+
<Button variant="ghost" size="icon" className="h-8 w-8" aria-label={t('backToCourse')}>
113+
<IconArrowLeft className="h-4 w-4" />
114+
</Button>
115+
</Link>
116+
<h1 className="truncate text-2xl font-bold tracking-tight">{t('title')}</h1>
117+
</div>
118+
<p className="ml-10 text-sm text-muted-foreground">
119+
{t('subtitle', { course: course.title })}
120+
</p>
121+
</div>
122+
123+
{/* Look-back window. Plain links keep the page fully server-rendered. */}
124+
<nav aria-label={t('windowLabel')} className="flex items-center gap-1">
125+
{WINDOWS.map((w) => (
126+
<Link
127+
key={w}
128+
href={`/dashboard/teacher/courses/${courseId}/analytics?days=${w}`}
129+
scroll={false}
130+
>
131+
<Button variant={w === days ? 'default' : 'outline'} size="sm">
132+
{t('windowDays', { days: w })}
133+
</Button>
134+
</Link>
135+
))}
136+
</nav>
137+
</div>
138+
</div>
139+
</header>
140+
141+
<div className="container mx-auto space-y-6 px-4 py-6 sm:px-6 lg:px-8">
142+
{warnings.length > 0 && (
143+
<Alert variant="destructive">
144+
<IconAlertTriangle />
145+
<AlertTitle>{t('warningsTitle')}</AlertTitle>
146+
<AlertDescription>
147+
<p>{t('warningsDesc')}</p>
148+
<ul className="mt-1 list-disc pl-4">
149+
{warnings.map((w) => (
150+
<li key={w}>{w}</li>
151+
))}
152+
</ul>
153+
</AlertDescription>
154+
</Alert>
155+
)}
156+
157+
{/* ── Difficulty calibration ─────────────────────────────────────── */}
158+
<Card>
159+
<CardHeader>
160+
<CardTitle className="flex items-center gap-2">
161+
<IconScale className="h-4 w-4 text-muted-foreground" />
162+
{t('calibration.title')}
163+
</CardTitle>
164+
<CardDescription>{t('calibration.desc')}</CardDescription>
165+
</CardHeader>
166+
<CardContent>
167+
{hardestItems.length === 0 ? (
168+
<p className="py-6 text-center text-sm text-muted-foreground">
169+
{t('calibration.empty')}
170+
</p>
171+
) : (
172+
<>
173+
{mislabeled.length > 0 && (
174+
<p className="mb-4 text-sm">
175+
<Badge variant="destructive" className="mr-2">
176+
{mislabeled.length}
177+
</Badge>
178+
{t('calibration.mismatchSummary', { count: mislabeled.length })}
179+
</p>
180+
)}
181+
<ul className="divide-y">
182+
{hardestItems.map((item) => (
183+
<li
184+
key={`${item.itemType}-${item.itemId}`}
185+
className="flex flex-wrap items-center gap-x-4 gap-y-2 py-3"
186+
>
187+
<div className="min-w-48 flex-1">
188+
<div className="flex items-center gap-2">
189+
{item.itemType === 'exercise' ? (
190+
<Link
191+
href={`/dashboard/teacher/courses/${courseId}/exercises/${item.itemId}`}
192+
className="truncate text-sm font-medium hover:underline"
193+
>
194+
{item.title}
195+
</Link>
196+
) : (
197+
<span className="truncate text-sm font-medium">{item.title}</span>
198+
)}
199+
</div>
200+
<p className="mt-0.5 text-xs text-muted-foreground">
201+
{t(`scope.${item.itemType}`)} ·{' '}
202+
{t('calibration.attempts', { count: item.attemptCount })}
203+
</p>
204+
</div>
205+
<DifficultyDelta
206+
declared={item.declaredDifficulty}
207+
rating={item.rating}
208+
mismatch={item.mismatch}
209+
labels={{
210+
declared: item.declaredDifficulty
211+
? t(`difficulty.${item.declaredDifficulty}`)
212+
: t('difficulty.unlabeled'),
213+
measured: t('calibration.measured'),
214+
harder: t('calibration.harderThanLabeled'),
215+
easier: t('calibration.easierThanLabeled'),
216+
}}
217+
/>
218+
</li>
219+
))}
220+
</ul>
221+
<p className="mt-4 flex items-start gap-1.5 text-xs text-muted-foreground">
222+
<IconInfoCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
223+
{t('calibration.ratingHint')}
224+
</p>
225+
</>
226+
)}
227+
</CardContent>
228+
</Card>
229+
230+
{/* ── Confusion hotspots ─────────────────────────────────────────── */}
231+
<Card>
232+
<CardHeader>
233+
<CardTitle className="flex items-center gap-2">
234+
<IconFlame className="h-4 w-4 text-muted-foreground" />
235+
{t('hotspots.title')}
236+
</CardTitle>
237+
<CardDescription>{t('hotspots.desc', { days })}</CardDescription>
238+
</CardHeader>
239+
<CardContent>
240+
{hotspots.length === 0 ? (
241+
<div className="py-8 text-center">
242+
<IconChartBar className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
243+
<p className="text-sm text-muted-foreground">
244+
{totalSignals === 0 ? t('hotspots.noData') : t('hotspots.allClear')}
245+
</p>
246+
</div>
247+
) : (
248+
<ul className="space-y-3">
249+
{hotspots.map((h) => {
250+
const href = hotspotHref(courseId, h)
251+
return (
252+
<li
253+
key={`${h.scope}-${String(h.ref)}`}
254+
className="rounded-lg border p-3"
255+
>
256+
<div className="flex flex-wrap items-start justify-between gap-2">
257+
<div className="min-w-48 flex-1">
258+
<div className="flex flex-wrap items-center gap-2">
259+
<HotspotScopeBadge scope={h.scope} label={t(`scope.${h.scope}`)} />
260+
{href ? (
261+
<Link href={href} className="text-sm font-medium hover:underline">
262+
{h.label}
263+
</Link>
264+
) : (
265+
<span className="text-sm font-medium">{h.label}</span>
266+
)}
267+
</div>
268+
<p className="mt-1 text-xs text-muted-foreground">{h.evidence}</p>
269+
</div>
270+
<SeverityBar value={h.severity} label={t('hotspots.severity')} />
271+
</div>
272+
</li>
273+
)
274+
})}
275+
</ul>
276+
)}
277+
278+
<p className="mt-4 border-t pt-3 text-xs text-muted-foreground">
279+
{t('hotspots.sources', {
280+
practice: sources.practiceAttempts,
281+
exercises: sources.exerciseEvaluations,
282+
checkpoints: sources.checkpointAttempts,
283+
exams: sources.examSubmissions,
284+
days,
285+
})}
286+
</p>
287+
</CardContent>
288+
</Card>
289+
</div>
290+
</div>
291+
)
292+
}

‎app/[locale]/dashboard/teacher/courses/[courseId]/page.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
IconClock,
3232
IconVideo,
3333
IconChevronRight,
34+
IconChartBar,
3435
} from '@tabler/icons-react'
3536
import { CourseStudentsTable } from '@/components/teacher/course-students-table'
3637
import {getCurrentTenantId, getCurrentUserId } from '@/lib/supabase/tenant'
@@ -222,6 +223,12 @@ export default async function CourseManagementPage({ params }: PageProps) {
222223
{t('tabs.preview')}
223224
</Button>
224225
</Link>
226+
<Link href={`/dashboard/teacher/courses/${courseId}/analytics`}>
227+
<Button variant="outline" size="sm" className="gap-2">
228+
<IconChartBar className="h-3.5 w-3.5" />
229+
{t('analytics')}
230+
</Button>
231+
</Link>
225232
<Link href={`/dashboard/teacher/courses/${courseId}/settings`} data-tour="course-settings">
226233
<Button variant="outline" size="sm" className="gap-2">
227234
<IconSettings className="h-3.5 w-3.5" />

0 commit comments

Comments
 (0)