Details View

The Details View (details.html) is a full-page, dedicated view for a single course. It opens in a new tab when you click View details on a Dashboard course card. The URL format is:

chrome-extension://<id>/details.html?key=<courseKey>

where <courseKey> is the course's storage key (e.g. course:12345).

What It Shows

The Details View loads the course's cached snapshot from chrome.storage.local and provides:

  1. Course name and overall grade - same percentage and letter grade calculation as the overlay, but using the cached snapshot data rather than live DOM parsing.

  2. Quarter-organized category breakdown - identical logic to the overlay: categories grouped by quarter, each showing assignment-level detail with badges (DROPPED, ×multiplier, PINNED, PERM ADD) and action buttons (Drop, Edit, Pin/Unpin).

  3. What-If Calculator - the same what-if add/drop/edit interface as the overlay. Crucially, the what-if state is shared between the overlay and the Details View for the same course - both read/write to WI_${courseId}. So what-if changes made in the overlay are visible in the Details View and vice versa.

  4. Permanent Edits section - lists active pins and perm-adds for the current course (across all quarters), with Unpin and Remove links. Also provides an "Add Assignment Permanently" form that lets you choose a quarter and category and enter a name, earned points, and possible points. Permanent adds created here appear immediately in the grade calculation and are also visible in the overlay panel's Permanent Edits section. Uses the same PE_/PA_ storage keys and applyPermOverrides logic as the overlay.

  5. Grade History Chart - a time-series line chart (from charts.js) built from the course's history snapshots. Shows the overall grade percentage over time, with data points for each snapshot. Manual snapshots (user-clicked Cache) are distinguished from auto-snapshots visually.

Grade Calculation

The Details View recomputes grades from the cached snapshot using the same logic as the overlay:

  • Resolves letter-graded assignments to numeric using the user's grade scale.
  • Applies permanent score overrides (PE_${courseId}) and permanent additions (PA_${courseId}) to the base assignment values.
  • Applies what-if adds, drops, and edits on top.
  • Handles SEBI mode per category.
  • In rolling gradebook logic: the latest quarter's categories get synthetic "rolled-up" assignments representing each previous quarter's total for matching category names.
  • In traditional gradebook logic: only the current quarter's assignments are used.

History Chart

The history chart is rendered on a <canvas> element using charts.js. Data is shaped by TrendsEngine.shapeTimeSeriesData(snapshots):

  1. Snapshots are sorted chronologically.
  2. Consecutive duplicate values (same grade, auto-snapshot) are filtered out, keeping only the first occurrence and the point of transition.
  3. User-initiated (manual) snapshots are always kept, even if the grade didn't change.
  4. The result is plotted as a line chart with timestamps on the x-axis and grade percentage on the y-axis.

If a course has fewer than 2 distinct data points, the chart area is hidden or shows a "not enough data" message.

Navigation

The Details View is self-contained - there is no back button to the Dashboard. Close the tab when done. Re-opening it will reload the latest cached data.