Migrate annotation_usage_panel.jsx to react table v8

[mrafie1]

Proposed Changes

(Describe your changes here. Also describe the motivation for your changes: what problem do they solve, or how do they improve the application or codebase? If this pull request fixes an open issue, use a keyword to link this pull request to the issue.)

annotation_usage_panel.test.jsx

• Edited "becomes case-sensitive when the toggle is checked" test to correctly use new case_sensitive_search_filter.jsx component

table.jsx

• Edited component to now include pivoting/aggregation functionality
  • Imported getGroupedRowModel
  • Added grouping useState
  • Edited arguments to useReactTable to include pivoting/aggregation
• Updated Jul 3
  • Pass in isGrouped prop to TableRow in order to handle rendering. Specifically, making sure renderSubComponent doesn't activate when rendering expanded group rows
  • Add expanderColumn when enderSubRow is passed in. This allows the user to press the 'dropdown arrows' and expand columns

table_row.jsx

• Edited component to allow for re-rendering when filtering causes the aggregation count of some rows to change by checking if subRows have changed
• Updated Jul 3
• Takes in isGrouped as a prop
• Passes in isExpanded to TableCell component in order to consistently re-render the 'dropdown' arrows when expansion is toggled on and off. Before, it was really inconsistent with the rendering.
• Used !isGrouped to prevent the rendering of a not-present ' subComponent ' when grouped cells are expanded.

annotation_usage_panel.jsx

• Updated Jul 3
• Migrated columns to React Table v8
• Passed in renderSubRows prop as true to enable 'expansion'

Screenshots of your changes (if applicable)

Associated documentation repository pull request (if applicable)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)	x
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.

After opening your pull request:

• I have updated the project Changelog (this is required for all changes).
• I have verified that the pre-commit.ci checks have passed.
• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

1. I noticed when working on this task that filtering would always cause the table to re-render, but the re-render would sometimes not change the aggregation counts. For example, typing in the letter 'r' caused rows to 'change'. However, typing in other letters such as 'c' did not cause any changes, even though the table did re-render, the filtered rows did change, and the subrow count decreased. I'm wondering why filtering alone did not solve this issue. Of course, checking if the subrows have changed would solve this problem, but I expected that each re-render would cause an update to what rows were being passed in to be aggregated when filtering.
2. Am I good to try working on that bug I found in https://github.com/MarkUsProject/Markus/pull/7985 ? I'm a little keen on trying to work with some back-end/things relating to routing.

[coveralls]

Coverage Report for CI Build 28804930016

Coverage increased (+0.01%) to 90.285%

Details

• Coverage increased (+0.01%) from the base build.
• Patch coverage: 1 uncovered change across 1 file (17 of 18 lines covered, 94.44%).
• 1 coverage regression across 1 file.

Uncovered Changes

File	Changed	Covered	%
app/javascript/Components/annotation_usage_panel.jsx	16	15	93.75%
Total (2 files)	18	17	94.44%

Coverage Regressions

1 previously-covered line in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
app/javascript/Components/annotation_usage_panel.jsx	1	77.36%

---

Coverage Stats

Relevant Lines:	51022
Covered Lines:	47078
Line Coverage:	92.27%
Relevant Branches:	2444
Covered Branches:	1194
Branch Coverage:	48.85%
Branches in Coverage %:	Yes
Coverage Strength:	127.14 hits per line

---

💛 - Coveralls

[david-yz-liu]

Hi @mrafie1, I did a quick review but I don't think this is PR is complete, as it doesn't seem like you added any changes for table_row.jsx (which is where I would assume the rendering logic has been added).

In response to your questions:

1. Please upload a video demonstrating the exact problem you are encountering.
2. Please make an issue to describe the bug (again, an accompanying video would be helpful) and then I'll review it and get back to you. I certainly appreciate you being proactive in bringing this up! 👍

[mrafie1]

Hi David,

For table_row.jsx, are you referring to these changes?

1. Here's a screen recording of the column aggregation while filtering. This is without checking if the previous subRows were different from the new subRows.

Screen.Recording.2026-06-30.at.04.50.17.mov

For some filter inputs, a re-render will change the aggregation values from the total of 11 to 2. For other inputs, a re-render will keep the aggregation values as 11, even though there are only 8 users who have the letter 'c', and even only 2 users who have the characters 'c5' in the data given.

2. I'll get to writing the issue 👍

[david-yz-liu]

Hi @mrafie1, thanks for the clarification in the video.

This reveals that actually you haven't completed the full refactoring that's required for this task: in addition to the aggregation information, we need to be able to expand the row to display the subrows. (This is the change I was looking for in table_row.jsx.) Switch back to the master branch and look at this panel; you should see a little "down arrow" that enables this expansion.

My recommendation is to work in implementing this first, as that will hopefully also help debug the filtering issue you've reported. As a tip, take another look at the example I shared with you on Slack, as that should help with the HTML creation.

I'll message you separately about the issue you created.

[mrafie1]

Oh, that's my bad, I wasn't sure what you were referring to. I'll get it done ASAP.

[mrafie1]

Video of current changes:

Screen.Recording.2026-07-03.at.12.43.54.mov

PR description is updated.

A note/question. I decided not to add Fa-icons directly to the side of the instructor names because we had an 'expanderColumn' in the Table file that does the same functionality and looks much cleaner. In the code, it should be on the left of the instructor names, but for some reason, it is directly in the middle/to the right. This also looks very good UI-wise, but let me know if it looks good to you; If you want the arrows to be on the left, I'll research some way to do that.

[david-yz-liu]

Great work, @mrafie1. Regarding your last comment, using the expander column is good, but the column should appear as the leftmost column in the table. I suspect the library is putting the grouped column ("used by") as the leftmost column, so you'll need to find a way to work around this. Possibly by setting the column order explicitly (look at the documentation about this).

Other than that, the PR looks good to me. Are you still encountering a bug related to filtering and the aggregation counts?

[mrafie1]

The filtering and aggregation count bugs are gone, even after removing 'subRow' checking in our useMemo. I'm not too sure why this is the case; I suspect it has to do with cells being 'visible' when expanded, allowing tableCells to be rerendered consistently => aggregation count is updated

[david-yz-liu]

Nice work, @mrafie1!