1637596 - Speed up fuzzy add new jobs finder

Status: NEW

(Tree Management :: Treeherder: Frontend, enhancement)

Description

[Chris AtLee [:catlee]]

I love the "Add New Jobs (Search)" interface, but it's really slow.

After hitting <Enter>, it can take 5-10s on my system to populate the filter.

Comment 1

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: Performance profile for filtering on the word "mochitest"

Every time you do a search, you re-render the list of search results as <option> elements from scratch. For very specific queries, that doesn't take long, but for more generic things like "mochitest", it's rendering 13000+ results.

Dunno if it will help, but here's a performance profile of me filtering on "mochitest". Looks like lots of time spent in garbage collection?

Comment 2

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Wonder if maybe it's redrawing each individual option element, and there's maybe someway to get this to do a batch update more efficiently? I'm not super experienced with how react's state gets updated or how it interacts with these options being generated from an array stored in the app's state. Maybe camd has some ideas?

Comment 3

[Cameron Dawson [:camd]]

Yeah, I think React Virtualized may be a good way to go here: https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3/

https://github.com/bvaughn/react-virtualized

Comment 4

[Cameron Dawson [:camd]]

Wes, are you able to work on things like this? Or should we prioritize it and see if we can find someone else to work on it. We have a GSoC intern (Suyash) that might be interested in this.

Comment 5

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

I don't know that I'd have time to do this.

Things to note for whoever does work on this:

Right now, you can do multiselect operations by click-dragging through the list or using shift/ctrl/cmd modifiers while clicking or navigating by arrowkeys. You'd need to make sure this still works correctly when scrolling through the virtualized version of this. (So if you select something near the top of the list and then scroll way down and ctrl/cmd-click something else in the list, then click the "add selected" button, do both items get added to the "selected" list?)

Right now, it's rendering as a <select> element with the multiple attribute set to allow the user to select multiple jobs from the list and each job is rendered as an <option> tag inside of that <select> element. This gives us easy ways to select individual items from the list as well as ranges of items in the list or multiple of either individual items or ranges of items with all of the accessibility support built into the <select> element in browsers. Does react-virtualized work with <select> and/or <option> elements? If it doesn't, you'd probably need to be switch this to using react-virtualized's List component and then adding multiselect support with keyboard+mouse events yourself, which sounds like a big headache. Hopefully it Just Works™ with <select> and/or <option>.

Remember that there are two separate <select> elements in the Fuzzy modal window: The searchable list of jobs to be added AND the list of already selected jobs ready to be submitted. The items in the already-selected list are displayed specially in the searchable job list (the bullet point in front of the job name) to help identify the ones you've already added. This is probably important to maintain when you switch to react-virtualized. It's also probably important to convert both lists to react-virtualized, since you could theoretically add every single job to the already-selected list, which would then have the same rendering lag as the full searchable list.

Comment 6

[Tin La]

Can I try this one?

Comment 7

[Cameron Dawson [:camd]]

Tin: Sorry for the slow response. Yes, if you would like to attempt this one, that would be great. :)