Individual Responses page: use AJAX request to load response summary
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 12
- Forks
- 21
- Avg merge
- 5d 19h
- Merged PRs (30d)
- 5
Description
## TL;DR
The Individual Responses page loads slowly, and we are looking for ways to improve performance when there are a large number of responses. One way to do this is to take out all of the hidden "response summary" elements (one for each response) and instead use AJAX to update that section of the page when a response row is selected.
## Summary
The IR page loads very slowly with large numbers of responses. We would ideally like to keep the table portion as-is, which requires loading information about all responses on page load (rather than paginating and moving search/sort/filter to backend requests). So another way to reduce the initial load time is to take out all of the hidden response summary elements and instead fill in that info via a separate GET request when the response row is clicked.
This will move some of the wait time from page load to the row selection. We will need some UI indicators that the response is in progress (e.g. something spinning or grayed-out while the data is transferring). Importantly, these request durations will not scale with the total number of responses.
## Implementation notes
As part of this work, we should also fix the way that all of the response-dependent information is updated on the page in JavaScript. Right now, the JS is grabbing whatever response is in the first table row and updating the rest of the info based on that when the page first loads. That made sense when we were doing response ordering on the backend. But now datatables is (re-)ordering the rows, so we should make sure that the info updating happens _after_ the datatables has done any initial sort on the rows (`initComplete`?). When we've done that, we can also remove the `order_by("-date_created")` part of the queryset for this view (see comments on this PR: https://github.com/lookit/lookit-api/pull/1546).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Individual Responses page's JavaScript and DataTables initialization, then inspect the view queryset and the discussion in pull request 1546. The work is done when response summaries load through a row-triggered GET request with a progress indicator, the selected response remains correct after initial sorting, and the unnecessary queryset ordering is removed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, python
- Domain
- backend, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100