[FLOW-23] Enable Professor Reviews to Select From All Professors #189
Conversation
This file contains 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
2. Rebuilt dropdown widget to use virtualized view + fuzzy sort - Removed custom scrollbars in favour of react-window to support viewing 3k+ prof entries
edwinzhng
approved these changes
Nov 27, 2024
Comment on lines
-42
to
+43
| width = 'fit-content', | ||
| width = 150, |
There was a problem hiding this comment.
Could this break other dropdowns? Should we keep width fit-content and just set minWidth in addition?
There was a problem hiding this comment.
Yeah, this was really sad - I had to manually check each of the dropdown since for some reason react-window doesn't support the min-width attribute which is such a random shortcoming. I'll see if I can override the CSS manually, but odds are we might have to go with this one
| @@ -80,6 +80,7 @@ const ProfileDropdown = () => { | |||
| </Query> | |||
| <DropdownList | |||
| selectedIndex={-1} | |||
| width={130} | |||
There was a problem hiding this comment.
May not need this if we keep fit-content and set minWidth instead for the other dropdowns?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
demo.mp4
Funny enough, this was far less trivial of a change than I anticipated. Basically, after loading all professors into the original dropdown widget, I would get this insane lag that would render the course review essentially unusable.
With the profiler, one character key-input would take 270% longer after loading the ~3,000 professor names in the dropdown, shown below. To fix this, I rewrote the
src/components/input/DropdownList.tsxcomponent to use a virtualized view usingreact-windowplus using our existingfuzzy-sortlibrary which made it much smoother.This pull request includes multiple changes to the
package.jsonfile and various components to improve the functionality and performance of the application. The most important changes include updating dependencies, modifying theCourseReviewBoxcomponent to handle a new query, and enhancing theDropdownListcomponent.Dependency Updates:
@types/react-windowandreact-windowdependencies topackage.json. [1] [2]react-custom-scrollbarsand its types frompackage.json. [1] [2]CourseReviewBox Component Enhancements:
ONLY_PROF_QUERYinCourseReviewBox.tsxto fetch all professors.allProfsprop toCourseReviewBoxContentand utilized it for professor selection. [1] [2] [3]DropdownListoptions to include all professors and adjusted the selection logic. [1] [2]CourseReviewBoxcomponent. [1] [2]DropdownList Component Enhancements:
react-custom-scrollbarswithreact-windowfor better performance inDropdownList.tsx.DropdownListto use a fixed width and improved the filtering and rendering of options. [1] [2] [3] [4] [5] [6]ProfileDropdown Component:
DropdownListinProfileDropdown.tsx.GraphQL Query Updates:
ONLY_PROF_QUERYto fetch all professors inProf.tsx.