Skip to content

Add React/TypeScript instructor dashboard alongside existing KnockoutJS frontend#100

Draft
Copilot wants to merge 1 commit into
masterfrom
copilot/create-react-instructor-dashboard
Draft

Add React/TypeScript instructor dashboard alongside existing KnockoutJS frontend#100
Copilot wants to merge 1 commit into
masterfrom
copilot/create-react-instructor-dashboard

Conversation

Copilot AI commented Jun 24, 2026

Copy link
Copy Markdown

Adds a standalone React + TypeScript frontend (Vite) that coexists with the existing KnockoutJS frontend, plus an instructor dashboard page visualizing submission metrics from the submission_counts, course_counts, assignment_counts, and user_counts tables.

New: frontend-react/

  • src/types/models.ts — TypeScript types mirroring all backend models: Submission, Course, Assignment, CourseCounts, UserCounts, and all SubmissionMetrics enum values
  • src/api/client.ts — typed fetch wrappers for every backend route group (/api/*, /courses/*, /assignments/*, /grading/*, /blockpy/*); reads window.$URL_ROOT injected by Flask
  • src/api/dashboardUtils.ts — aggregates raw fake_dashboard rows into per-assignment and per-student summaries (error rates, assertion success rate, avg edit/intervention time)
  • src/hooks/useFetch.tsuseCourses / useCourseMetrics hooks with loading/error/refetch state
  • src/pages/InstructorDashboard.tsx — dashboard with course selector, stat cards, tabbed charts (Recharts) and tables, CSV export
  • src/components/dashboard/StatCard, AssignmentSubmissionsChart, ErrorRateChart, MetricsTable, StudentTable

Flask integration

  • GET /dashboard route added to basic.py (@login_required)
  • templates/react/dashboard.html — extends existing layout; injects $URL_ROOT, accessToken, currentUserId for the API client
  • "Dashboard" nav link added to shared navbar for authenticated users
  • Vite builds to static/libs/blockpy_react/ with stable (non-hashed) output filenames; directory gitignored

Dashboard capabilities

Consumes /courses/fake_dashboard?mode=json (existing endpoint):

  • Stat cards: submission count, unique students/assignments, avg time, avg score, overall error rates
  • Charts tab: bar charts for submission counts + avg edits, and syntax/runtime error + assertion success rates per assignment
  • Assignment table: color-coded per-assignment breakdown of all SubmissionMetrics
  • Student table: per-student score, time, edits, correct count
  • CSV export: proxies to ?mode=csv

Copilot AI changed the title Add React TypeScript instructor dashboard frontend Add React/TypeScript instructor dashboard alongside existing KnockoutJS frontend Jun 24, 2026
Copilot AI requested a review from acbart June 24, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants