How pagination should work from the frontend perspective?

[alanwilter]

Why
http://localhost:8888/api/individual/PH00008258?limit=1000&offset=50 (API)

does work, but

http://localhost:8888/individual/PH00008258?limit=1000&offset=50

does not get args limit and offset?

The example above is only implemented in my WIP branch flex_uploader for the moment.

A bit of history here. @priesgo had started to implement pagination and I took it further but I realise now we never did anything else on the frontend side.

For example, in individual.py, we have this:

@application.route("/individual")
@requires_auth
def get_all_individuals():
    with session_scope() as db_session:
        try:
            limit, offset = _get_pagination_parameters()
            if limit > MAX_PAGE_SIZE:
                return (
                    jsonify(message="The maximum page size for individuals is {}".format(MAX_PAGE_SIZE)),
                    400,
                )
            individuals = _fetch_all_individuals(db_session=db_session, offset=offset, limit=limit)
...

but the route http://localhost:8888/individual (that should return all patients for a given user) is not implemented, so I can't really test http://localhost:8888/individual/?limit=1&offset=3 for example.

But I can test on the API side http://localhost:8888/api/individual/?limit=1&offset=3 and I know it's working (we have pytest for that).

So, what do we need to do to see args .../?limit=1&offset=3 processed from the frontend side? Or, what am I be missing here?

[alanwilter]

I've found how limit works for autocomple.py from frontend. I will try the approach seen there.

[alanwilter]

Nope, I can't really use it as an example by customising the limit argument in the url path. Besides, there's no technical difference in the backend implementation.

Definitions like query_type are given via frontend interface.

frontend/src/redux/service.js

function getSearchAutocomplete(param) {
  const limit = param.component === 'searchAutoComplete' ? '' : '&limit=1000';
  return axios.get(
    api.SEARCH_AUTOCOMPLETE + param.query + '?query_type=' + param.query_type + limit,
    {
      withCredentials: true,
    }
  );
}

As for the http://localhost:8888/individual route, I found this:

frontend/src/redux/api.js

  FETCH_ALL_INDIVIDUAL: API_URL + '/individual?limit=100000',

which implies a individual page would be developed but still not there yet.

[alanwilter]

I believe I understand it now. API is fine. It is the frontend now that needs to manage the pagination, like it does in the autocomplete page.

So for http://localhost:8888/individual/PH00008697, in my WIP branch, I'm limiting to 1000 rows. Somehow we need instructions in the JS to query next 1000 rows (updating offset) to show the data.

Nevertheless #388 still have it own issue that need some brainstorming.