Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gradebook UIUX #2123

Merged
merged 13 commits into from Apr 28, 2024
Merged

Gradebook UIUX #2123

merged 13 commits into from Apr 28, 2024

Conversation

KesterTan
Copy link
Contributor

@KesterTan KesterTan commented Mar 18, 2024

Addresses #2034.

  • Double click on resize to autosize and fit all column headers
  • Removed unintuitive column picker
  • Hover dropdown for hide/unhide columns and force fit
  • Hover name for version is now appended with assessment name to minimize confusion
  • Columns that are hidden are saved in local storage and are now sticky

How Has This Been Tested?

  • Check that double clicking the border of a column header resizes the columns and expands them
Screenshot 2024-04-22 at 1 14 07 PM
  • Hover over versions and check that full name appears
Screenshot 2024-04-22 at 1 14 52 PM
  • Hide Columns work as expected by hiding a column
  • Hide Columns are sticky even after refresh
  • Unhide columns works as expected by unhiding all columns that were previously hidden and refreshes local storage

Types of changes

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

Checklist:

  • 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

@damianhxy damianhxy linked an issue Mar 24, 2024 that may be closed by this pull request
@KesterTan KesterTan marked this pull request as ready for review April 15, 2024 20:58
Copy link
Contributor

coderabbitai bot commented Apr 15, 2024

Warning

Rate Limit Exceeded

@KesterTan has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 23 minutes and 15 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits Files that changed from the base of the PR and between bb24787 and 94036bb.

Walkthrough

The recent updates aim to enhance the Gradebook's user experience in SlickGrid by introducing auto column sizing and a customizable header menu, refining column management features, and improving styles. These changes streamline interactions, boost readability, and enhance functionality within the gradebook interface.

Changes

Files Changes
app/assets/config/manifest.js, app/views/gradebooks/view.html.erb Added slick.autocolumnsize and transitioned to slick.headermenu from slick.columnpicker.
app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js, app/assets/javascripts/SlickGrid/2.02/plugins/slick.headermenu.js Introduced auto column sizing and a customizable header menu functionality.
app/assets/javascripts/gradebook.js Enhanced grid features: disabled column reordering, improved tooltips, resizing, and hiding functionality.
app/assets/stylesheets/SlickGrid/2.02/plugins/slick.headermenu.css, app/assets/stylesheets/instructor_gradebook.scss Updated styles for the header menu and adjusted text alignments in the gradebook.
app/helpers/gradebook_helper.rb Adjusted column widths, modified status handling, and refactored code for better readability in the gradebook.

Possibly related issues

  • Issue Improve Gradebook UI/UX #2034: These changes address the need for improved column management, including the ability to delete or hide columns and enhance column format controls as outlined in the issue.

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
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 <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • 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 testing code 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 and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @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.
  • Please see the configuration documentation for more information.
  • 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/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

@20wildmanj 20wildmanj requested review from a team and evanyeyeye and removed request for a team April 15, 2024 21:42
@20wildmanj
Copy link
Contributor

Could you add some images / videos of the UI?

Copy link
Member

@evanyeyeye evanyeyeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. A few comments:

  • It might not be clear that double-clicking to resize columns is a feature unless somehow specified.
  • Does the security report from CodeQL need to be addressed?

@KesterTan
Copy link
Contributor Author

Added pictures in PR documentation and also added documentation about double click.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

docs/instructors.md Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Out of diff range and nitpick comments (2)
docs/instructors.md (2)

Line range hint 159-165: Consistent list item markers should be used. Replace dashes with asterisks for unordered list items.

- -   Provides an interface for manually entering problem scores (and problem feedback) for the most recent submission from each student.
- -   Provides an interface for viewing and annotating the submitted code.
- -   Displays the problem scores for the most recent submission for each student, summarizes any late penalties, and computes the total score.
- -   Provides a link to each student's handin history.
+ *   Provides an interface for manually entering problem scores (and problem feedback) for the most recent submission from each student.
+ *   Provides an interface for viewing and annotating the submitted code.
+ *   Displays the problem scores for the most recent submission for each student, summarizes any late penalties, and computes the total score.
+ *   Provides a link to each student's handin history.

Line range hint 183-183: Ensure the file ends with a single newline character.

docs/instructors.md Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Out of diff range and nitpick comments (3)
app/helpers/gradebook_helper.rb (3)

18-18: Ensure consistency in column definitions.

Consider adding headerCssClass for the "Course №" column to maintain consistency with other columns.


24-24: Ensure consistency in column definitions.

Consider adding headerCssClass for the "Grace Days" column to maintain consistency with other columns.


26-26: Ensure consistency in column definitions.

Consider adding headerCssClass for the "Penalty Late Days" column to maintain consistency with other columns.

app/helpers/gradebook_helper.rb Show resolved Hide resolved
@KesterTan KesterTan added this pull request to the merge queue Apr 28, 2024
Merged via the queue into master with commit f554808 Apr 28, 2024
5 checks passed
@KesterTan KesterTan deleted the gradebook_uiux branch April 28, 2024 22:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Gradebook UI/UX
3 participants