Toggleable left to right prerequisites trees

[zehata]

Context

Fixes #3202 Prerequisite tree right-to-left progression is confusing

Implementation

This PR extends PR #3840's implementation and adds a toggle for the user to choose whether they prefer the prerequisite to appear on the left or the right. Setting defaults to prerequisites on the left, which is the requested specifications for #3202. Please note that this branch diverges from the branch in PR #3840 and cannot both be merged.

While Issue #3203 specifications does not ask for ability to toggle, some users like myself may have already gotten used to prerequisites on the right. However, I do agree that the prerequisites on the right seems to be more intuitive.

I also took the chance to fix some confusing naming in the code, like the trees having class names that were opposite of what they contained. The fix for the truncation bug in PR #3840 is also carried over.

Credits to @sciffany for copywriting and initial implementation, to @li-kai for implementation feedback and to @alvynben for implementation and test cases.

UI tests

Settings toggle:

Single prerequisite/dependents:

Left

Right, i.e. original layout (unchanged)

Complex prerequisite/dependents with uneven layers and uneven letters in module codes

Left

Prefixed prerequisites

Side effect fixes:

This also fixes misaligned module trees as a side effect

Other Information

Any questions you may have

Is there a tele group specific for development?

Letting us know that you're new to this (so we know how much to help out)

Again, been almost 3 years since I touched any web dev. Sorry in advance if I had missed out anything.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nusmods-export	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 10:53am

[vercel[bot]]

@zehata is attempting to deploy a commit to the modsbot's projects Team on Vercel.

A member of the Team first needs to authorize it.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 95.45455% with 1 line in your changes missing coverage. Please review.

Project coverage is 54.81%. Comparing base (988c6fd) to head (e7d61a7). Report is 26 commits behind head on master.

Files with missing lines	Patch %	Lines
website/src/views/settings/SettingsContainer.tsx	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3842      +/-   ##
==========================================
+ Coverage   54.52%   54.81%   +0.28%     
==========================================
  Files         274      276       +2     
  Lines        6076     6132      +56     
  Branches     1455     1470      +15     
==========================================
+ Hits         3313     3361      +48     
- Misses       2763     2771       +8     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[zehata]

~I have noted the codecov report and will work on those. However, it should not impact the implementation.~ Fixed by 9be978c and bd7c8aa

[zehata]

bd7c8aa is technically outside the scope of this PR, but if it makes codecov happy then so be it.

[ravern]

Hi @zehata, thank you for your contribution!

I think that for backwards compatibility, we would definitely want the toggle. Can I check that means you intend for #3842 to be reviewed and to eventually just close #3840?

Let me know here and I'll review accordingly.

[zehata]

I think that for backwards compatibility, we would definitely want the toggle. Can I check that means you intend for #3842 to be reviewed and to eventually just close #3840?

@ravern yup! I think it would be nice to give the user a choice

[zehata]

@zwliew MB, sorry about that, I was not paying attention to the PR because I thought it was exam seasons 😅

GH also didn't ping me on your comments, so I would have to sort out my notifs.

[zwliew]

@zwliew MB, sorry about that, I was not paying attention to the PR because I thought it was exam seasons 😅

GH also didn't ping me on your comments, so I would have to sort out my notifs.

It's all good!

[zwliew]

@zehata Oh also -- do join the NUSMods Telegram group that's listed on TeleNUS if you'd like to discuss development in the future :)

[zehata]

@zehata Oh also -- do join the NUSMods Telegram group that's listed on TeleNUS if you'd like to discuss development in the future :)

Thanks! I have already joined haha