Programming exercises: Improve styling of feedback and manual assessment

[pzdr7]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.

Changes affecting Programming Exercises

• High priority: I tested all changes and their related features with all corresponding user types on a test server configured with the integrated lifecycle setup (LocalVC and LocalCI).

Motivation and Context

There are a few visual issues in the manual assessment of programming exercises and with feedback widgets in general:

• Poor contrast between build annotations and the highlighted lines (mentioned in Programming exercises: Allow tutors to assess submissions in the new code editor #8437)
• Build annotations "jumping" to the right when the assessment button is on the same line (Programming exercises: Warnings in the assessment editor trigger flickering #8731)
• Feedback widgets wasting a large amount of space for long text (Programming exercises: Assessment editor does not show many lines #8730)

Description

• Highlighted lines in the assessment view are now only highlighted in the line part; the margin is left for the build annotations
• The button to add feedback is now to the right of the line numbers (the line decorations), ensuring that it does not interfere with the line numbers (at the cost of some testability & flexibility). This replaces the old glyph margin hover button.
• Feedbacks are now allowed to be much wider. They render more text in fewer lines (given that there are no line breaks)
• Made the resize handles more prominent in light mode

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Programming exercise with
  • SCA enabled
  • Manual assessment enabled
  • 1 submission that has at least one SCA warning (if you enable all SCA categories, you can trigger a warning by forgetting whitespace after if, e.g. if(input.size() > 0))

1. Log in to Artemis
2. Go to your course > exercises > your programming exercise > scores
3. Open the assessment of the submission
4. Go to the file with the SCA warning and verify that the button does not clash with the build annotation (⚠️ icon)
5. Verify the changed lines are highlighted and that everything looks okay in light and dark mode
6. Add a long feedback without newlines
7. Verify that the feedback widget does not waste space when displaying the long feedback text

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Performance Review

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance
• I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
monaco-editor-line-decorations-hover-button.model.ts	91.17%	✅
monaco-editor.component.ts	97.87%	✅

Screenshots

Feedback widgets

Before

After

Feedback button / line highlights / build annotations

Before

After

Drag handles in the code editor grid

Before

After

Summary by CodeRabbit

• New Features

  • Introduced a new hover button for line decorations in the code editor.

• Bug Fixes

  • Removed an unused feedback button from the code editor.

• Refactor

  • Replaced MonacoEditorGlyphMarginHoverButton with MonacoEditorLineDecorationsHoverButton for improved interaction handling.

• Tests

  • Updated test cases to reflect changes in hover button functionality and ensure accurate line highlighting.

[egekurt123]

Code LGTM

[JohannesStoehr]

Reapprove

[b-fein]

Re-approve after small merge-conflict.

[Jan-Thurner]

reapprove

[BaumiCoder]

Re-approve after resolved merge conflicts