feat(Grade by Student): Visual location display

[hirokiterashima]

Notes

Please style as you see fit! I had trouble with these, as you can see in the image below:

• The highlighted segment is not the same size as the non-highlighted segments. This seems to happen for only units with multiple lessons. It looks like the width of the segment is matching the width of the step position ("1.2")
• Text overlaps with the display above.

Changes

In Grade by Student view, add a visual display (see above) to show where students are in the unit. Before, this was text-only, like "1.2: Let's Discuss". The visual should be more useful because it will give a quick overview of where the students are.

• If the unit has just 1 lesson, the segments are the steps in that lesson.
• If the unit has more than 1 lesson, the segments are the lessons in the unit.
• The segment that the student is on has a fill-color, a location marker, and the step number (e.g., "1.2")
• Hovering over the component shows step position text (e.g., "1.2: Let's Discuss")
• If the student hasn't done any work, it still shows the segments, but none of the segments are highlighted

Test

• Above works as described
• Sorting by columns (location, completion, etc.) works as before

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (4)

Rating	File	% Diff	Uncovered Line #s
	...ets/wise5/classroomMonitor/student-progress/StudentProgress.ts	100.0%
	...lassroomMonitor/project-location/project-location.component.ts	100.0%
	...lassroomMonitor/student-progress/student-progress.component.ts	100.0%
	src/assets/wise5/services/classroomStatusService.ts	0.0%	61
	Total	95.8%

🤖 Increase coverage with AI coding...

In the `grade-by-student-location-display` branch, add test coverage for this new code:

- `src/assets/wise5/services/classroomStatusService.ts` -- Line 61

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.