Repository navigation
Conversation
multiple graders
bmcutler
pushed a commit
to Submitty/Submitty
that referenced
this pull request
Oct 19, 2026
### Why is this Change Important & Necessary? Partially addresses #13156. When more than one grader annotates the same submitted image, the student only ever sees one grader's annotations, whichever entry happens to come first. Everything any other grader drew is dropped from the student's "View Popup" and "Download" of the annotated image, so feedback that a TA or instructor wrote never reaches the student. The previous code marked this as a temporary implementation. Annotations from different graders can also overlap, so students need to be able to view and download each grader's annotations separately, not only combined. This PR fixes the core problem described in the issue. The follow-up enhancements listed in the issue are not included here and are left for future PRs. ### What is the New Behavior? When a student opens "View Popup" or "Download" for an annotated image on their results page, they can now see the annotations from every grader who annotated it, either one grader at a time or all graders combined. - **View Popup** shows a button for each grader (**Grader 1**, **Grader 2**, ...) and an **All Graders** button that layers every grader's annotations onto one image. The combined view shows a warning that annotations from different graders may overlap and be illegible. - **Download** opens a dialog asking which annotations to download: a single grader's, or **All Graders Combined**. Each is saved as its own file (e.g. `photo_annotated_grader1.jpg`, `photo_annotated_all.jpg`). - If only one grader annotated the image, both buttons work as before: View Popup shows just the image, and Download saves it directly. - Graders are numbered in a consistent order (sorted by grader ID), so the numbering and the combined image look the same every time they are opened. - Each grader's annotations are rendered separately, because markers are positioned relative to the image size recorded when that grader annotated it. - If one grader's saved annotations are empty or cannot be parsed, they are skipped (with a console warning) but the remaining graders' annotations are still shown. Previously, if the first grader's entry was empty or unreadable, the student got an error even when other graders had valid annotations. Most of the change is in `site/ts/ImageAnnotationEmbedded.ts`. Other changes: - `site/public/css/image/image_annotation.css`: the popup's styles moved here from an inline `<style>` block, using `colors.css` variables instead of hex colors. The popup window links this stylesheet and `colors.css` from the page. - `site/app/views/AutoGradingView.php`: loads `image_annotation.css` on the student results page so the popup can link it. The download dialog reuses the existing `Popup.twig` classes, so it needs no new CSS. There are no database or grader-side UI changes. **Image annotations made by Instructor:** **Pg 1 Annotations** <img width="2410" height="1888" alt="INSTRUCTOR_ANNOTATION_PG1" src="https://github.com/user-attachments/assets/ce355ff7-d4bc-4cf9-b623-6254bb1ab09d" /> **Pg 10 Annotations** <img width="2410" height="1888" alt="INSTRUCTOR_ANNOTATION_PG10" src="https://github.com/user-attachments/assets/fa35d8e1-ba4b-4e73-b6eb-37672b7c22e7" /> **Image annotations made by TA:** **Pg 1 Annotations** <img width="2410" height="1888" alt="TA_ANNOTATION_PG1" src="https://github.com/user-attachments/assets/4d82a9c7-343a-40c3-87f2-189791d56479" /> **Pg 10 Annotations** <img width="2410" height="1888" alt="TA_ANNOTATION_PG10" src="https://github.com/user-attachments/assets/47377a4c-83da-41d3-9bb7-417f90ec9c5a" /> **Student View Before: Note that the before view may differ based on which grader submitted annotations first** **Pg 1 Annotations** <img width="1598" height="1360" alt="BEFORE_VIEW_PG1" src="https://github.com/user-attachments/assets/ae04a47a-8c04-4c34-a2dc-0810e5fccfed" /> **Pg 10 Annotations** <img width="1598" height="1360" alt="BEFORE_VIEW_PG10" src="https://github.com/user-attachments/assets/f775509d-1ae8-4914-9b29-89c4c4461108" /> **Student View After:** **Pg 1 Annotations** <img width="1598" height="1360" alt="STUDENT_INSTRUCTOR_PG1" src="https://github.com/user-attachments/assets/0a147e1a-9a5c-485c-8e51-8c069377b334" /> <img width="1598" height="1360" alt="STUDENT_TA_PG1" src="https://github.com/user-attachments/assets/ad074307-93d7-4d1f-88a6-92d83eea4f3d" /> <img width="1598" height="1360" alt="STUDENT_COMBINED_PG1" src="https://github.com/user-attachments/assets/490511bc-0d25-4ce5-9725-7094415a5625" /> **Pg 10 Annotations** <img width="1598" height="1360" alt="STUDENT_INSTRUCTOR_PG10" src="https://github.com/user-attachments/assets/526e7f66-5431-4044-af95-65cda2c43e6f" /> <img width="1598" height="1360" alt="STUDENT_TA_PG10" src="https://github.com/user-attachments/assets/dfcf39bb-cf77-43a2-a833-af564ce886b5" /> <img width="1598" height="1360" alt="STUDENT_COMBINED_PG10" src="https://github.com/user-attachments/assets/603ad3b0-8613-4fd7-9c51-476597bf9b48" /> **Student Download View After:** <img width="2410" height="1888" alt="STUDENT_DOWNLOAD_PG1" src="https://github.com/user-attachments/assets/8e966028-7488-418f-b27b-a410301890e1" /> <img width="2410" height="1888" alt="STUDENT_DOWNLOAD_PG10" src="https://github.com/user-attachments/assets/8cb86c43-2f7e-41bc-8dc8-69317746097f" /> ### What steps should a reviewer take to reproduce or test the bug or new feature? **Note:** Image annotation currently only works on images Submitty generates automatically from a submission, such as the single-page JPGs created by a bulk upload. Directly submitted image files can't be annotated currently. This is a known limitation, so please test these changes with a bulk upload gradeable (e.g. Bulk Upload Scanned Exam). Related: #13122, Submitty/submitty.github.io#780 1. Use a bulk upload gradeable with TA grading so the submission is split into pages. 2. As `ta`, open that submission in TA grading, open one of the page images, add some annotations, and save. 3. As `instructor`, open the same image and add different annotations in another area, then save. 4. Release grades for the gradeable or set the grade release date to the past. 5. As the student, open the gradeable's results page. Under **Annotated Feedback**, click **View Popup**. 6. On `main`, only one grader's annotations appear. On this branch, use the buttons at the top of the popup to switch between **Grader 1**, **Grader 2**, and **All Graders**. Each grader's view shows only their annotations, and **All Graders** shows both with an overlap warning. The popup has no download option. 7. Close the popup and click **Download**. A dialog asks which annotations to download. **Grader 1**, **Grader 2**, and **All Graders Combined** each download a separate file. ### Automated Testing & Documentation There are no existing unit or end-to-end tests for image annotations, and this PR does not add one. Test coverage for image annotation is tracked in #13155. Once this PR is merged, I'll suggest adding multi-grader cases there. Testing run locally: - `npx cypress run --component`: all 221 tests passed - `npx cypress run --e2e` for `Cypress-TAGrading/**` and `Cypress-Feature/files_panel.spec.js`: all 18 specs passed after `recreate_sample_courses` - `npm run eslint` and the TypeScript typecheck pass on the changed file - `npx stylelint` and `npx prettier --check` pass on `site/public/css/image/image_annotation.css` Documentation changes tracked in Submitty/submitty.github.io#801 ### Other information - Not a breaking change. - No migrations. - No security concerns: the change only affects how annotation data the student is already allowed to fetch is rendered in their browser.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why is this Change Important & Necessary?
Documentation change for Submitty/Submitty#13460.
Previously, when more than one grader annotated the same image, students only saw one grader's annotations. That PR lets students view and download annotations from every grader, so the Image Annotation page needs to describe this.
What is the New Behavior?
Adds a short Viewing Annotations from Multiple Graders section to the Image Annotation page, explaining that:
Two new screenshots were added to
images/ta_grading/:rubric_grading_image_annotation_all_graders.pngrubric_grading_image_annotation_download.pngWhat steps should a reviewer take to reproduce or test the bug or new feature?
docker compose up.Automated Testing & Documentation
jekyll buildandhtmlproofer(the same link check run in CI) pass locally.Other information
Related: Submitty/Submitty#13156, Submitty/Submitty#13460