lookit / lookit/lookit-api

Individual Responses page: use AJAX request to load response summary

Open
#1,549 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.