Code Diff Viewer, version switching on Autograder Output

[damianhxy]

Description

• Add a code diff viewer tab to golden layout
• All submissions now display an "Autograder Output" file for uniformity
• Added version switching for Autograder Output
• "Run Autograder" button added when autograder defined and viewing autograding output
• Fix check for detecting if announcements exist
• Tweak heights to ensure that speedgrader is usable with and without announcements
• Remove dead bootstrap tooltip code
• Add titles to access code buttons
• Refactor submissions controller

Motivation and Context

Closes #2090 Closes #1743

How Has This Been Tested?

Version switching on autograder output

Now able to switch between versions when viewing autograder output. Will always go to the immediate next / previous version, with a message if the output does not exist.

Output exists (and autograder exists) Note the "Run Autograder" button

Output does not exist, autograder exists Note the message, and the "Run Autograder" button

Output does not exist, autograder does not exist Note the message, and NO "Run Autograder" button

Code Diff Viewer

Text file - changes exist

Text file - no changes

Version 1 of a file

Other error, e.g. viewing a PDF or Binary file

Autograder Output

Large files

Height tweaks

• In normal use, there is no longer any extraneous scrollbar at the side. Content of all panels (e.g. code viewer, diff viewer) are fully accessible through scrolling if necessary.
• In the presence of announcements, the speedgrader is made "shorter" accordingly, but all content is still accessible through scrolling if necessary.

Before (CMU prod)

After

With announcements

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] I have run rubocop and erblint for style check. If you haven't, run overcommit --install && overcommit --sign to use pre-commit hook for linting
• [ ] My change requires a change to the documentation, which is located at Autolab Docs
• [ ] I have updated the documentation accordingly, included in this PR

[coderabbitai[bot]]

Walkthrough

## Walkthrough The recent updates introduce a diff viewer for comparing submission versions and enhance autograding output versioning. Cosmetic changes improve code readability and UI adjustments for better user experience. The integration of the `diffy` gem and `diff2html` library powers the diff viewer functionality, while controller and view updates support version switching and better file handling for submissions. ## Changes | Files | Change Summary | |-------|----------------| | `Gemfile`, `.../application_helper.rb`, `.../submissions/view.html.erb` | Added `diffy` gem and `diff2html` library for diff viewing capabilities. | | `.../javascripts/annotations.js`, `.../javascripts/diff_viewer.js`, `.../javascripts/app-level.js`, `.../submissions/_annotations_js.html.erb`, `.../submissions/view.js.erb` | Enhanced and introduced JavaScript logic for diff viewer and UI adjustments. | | `.../stylesheets/annotations.scss`, `.../submissions/_diff_viewer.html.erb` | Styling adjustments for diff viewer and elements' heights. | | `app/controllers/submissions_controller.rb` | Updated file handling and version navigation for submissions. | | `app/views/...` excluding `.../submissions/_diff_viewer.html.erb` and `.../submissions/view.html.erb` | Minor UI and functionality changes, including tooltip adjustments and condition refinements. | | `.../submissions/_golden-layout.html.erb` | Introduced "diff_viewer" component in the layout. | ## Assessment against linked issues | Objective | Addressed | Explanation | |-----------|-----------|-------------| | Allow version switching on autograding output (#2090) | ✅ | | | Ability to view differences between 2 submissions side-by-side (#1743) | ✅ | | The code changes effectively address the objectives laid out in the linked issues. The addition of a diff viewer for submission versions aligns with the requirements of issue #1743, providing a side-by-side comparison feature. Similarly, the updates to the submissions controller and related views support version switching for autograding output, meeting the needs of issue #2090.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

---

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.

[KesterTan]

I think it would be better if the whole line is new, to just remove the highlighting and have the line highlighted light green.

For eg, in this case, maybe just the light green highlight without the dark green.

Actually, maybe something like, if there are more than a percentage difference between two functions, just use light highlighting to show the entire function as a difference (if that makes sense).

Not sure if this is possible or not, but I think you can specify configurations of lines/words and the maximum number of configurations so that might fix this.

[KesterTan]

Also, I am a little confused about the selective strong highlighting. If these are 2 extremely different files so shouldn't everything be light green?

[KesterTan]

Personally prefer non-synchronized scrolling on both files, especially if file sizes are pretty different.

[damianhxy]

I think it would be better if the whole line is new, to just remove the highlighting and have the line highlighted light green.

Seems to be a limitation of the library, as I don't see a way to specify a "line similarity score threshold".

In general, there is no semantic info associated with a diff, so the library can and will match stuff like whitespace, brackets, and parenthesis.

Personally prefer non-synchronized scrolling on both files, especially if file sizes are pretty different.

Discussed offline as a won't change, since it would make comparisons more tedious in general and doesn't really bring any benefit.