[breity]

Changes

Refactor the Classroom Monitor's <component-summary> dashboard to use a responsive masonry/grid layout with priority display ordering, adaptive sizing rules across container breakpoints, and visual refinements for individual summary cards.

• Extract shared applyMasonry() DOM utility for DiscussionStudent and ComponentSummaryComponent
• Consolidate component summary templates into a single responsive grid with priority ordering (order-1 through order-5) and size classes (.summary-lg, .summary-sm)
• Add adaptive CSS :has() and container query rules for various summary combinations
• Add header and empty-state notice to AiSummaryComponent
• Use responsive multi-column layout for TeacherReflectionComponent questions
• Hide redundant bar chart legend, disallow decimal y-axis ticks, and reduce chart height in SummaryDisplayComponent

The layout logic is rather complex! Here's a summary of all the changes if you'd like to review in detail: component_summary_masonry_layout_result.md.

Test

• Make sure all summary displays work as before.
• Test with a variety of component types and different combinations of all the summary displays (Scores, MC pie chart, Sort/Match, Ideas Summary, Discussion, AI summaries, Teacher Reflections).
• Make sure there aren't any egregious visual or layout bugs.

[qltysh]

❌ 2 blocking issues (2 total)

Tool	Category	Rule	Count
qlty	Structure	Function with many parameters (count = 8): constructor	1	❌
qlty	Structure	Function with many returns (count = 6): createChartConfig	1	❌

[qltysh]

Function with many parameters (count = 8): constructor [qlty:function-parameters]

[qltysh]

Coverage Impact

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

Modified Files with Diff Coverage (3)

Rating	File	% Diff	Uncovered Line #s
	src/assets/wise5/common/dom/dom.ts	78.6%	34, 47-48
	.../discussion/discussion-student/discussion-student.component.ts	0.0%	125
	...torComponents/component-summary/component-summary.component.ts	52.2%	77, 112-134
	Total	60.5%

🤖 Increase coverage with AI coding...

In the `component-summary-masonry-layout` branch, add test coverage for this new code:

- `src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts` -- Lines 77 and 112-134
- `src/assets/wise5/common/dom/dom.ts` -- Lines 34 and 47-48
- `src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts` -- Line 125

🚦 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.

[hirokiterashima]

LGTM

[hirokiterashima]

🎉 This PR is included in version 5.247.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀