Add sorting and filter functionality in PEPhub search.

[khoroshevskyi]

It will be useful to add filter and sort to PEPhub. This functionality can include:

• Filter and sort by update/submission date
• Filter and sort by number of samples
• ...

[nsheff]

Related to #99

[nleroy917]

Are we envisioning client-side or server-side filtering?

[khoroshevskyi]

Sorting functionality is added to pepdbagent. Now we can add it to pephub

[nleroy917]

I'm not positive that the pepdbagent sorting is working. I think there are two issues:

1. The sort order seems incorrect for dates, and
2. pagination exhibits weird behavior

An example for 1: Sort by last update (newest). I want most recently updated projects to show up:
The UI makes this call to the server: /projects?order_by=update_date&order_desc=true
And projects updated in April are showing before projects updated within the last day.

An example for 2: Sort by name (A-Z). I want projects that start with "A" to come before projects that start with "Z":
The UI makes this call to the server: /projects?order_by=name&order_desc=false

Everything seems ok from the get-go. My forked GSE's come before projects like scATAC-atlas and my-project. However, when I page over, I get projects with "B" in them (basic). I would expect that as I page over, I'd get things closer to Z.

Let me know if I am using things incorrectly. For specificity, here is the select I am using to make this request:

        <select
          value={`${orderBy}+${order}`}
          onChange={(e) => {
            const [orderBy, order] = e.target.value.split('+');
            setOrderBy(orderBy);
            setOrder(order);
          }}
          className="form-control form-select"
        >
          <option value={'name+asc'}>Name (A-Z)</option>
          <option value={'name+desc'}>Name (Z-A)</option>
          <option value={'update_date+desc'}>Last update (newest)</option>
          <option value={'update_date+asc'}>Last update (oldest)</option>
          <option value={'submission_date+desc'}>Submission date (newest)</option>
          <option value={'submission_date+asc'}>Submission date (oldest)</option>
        </select>

Then in the actual typescript to call the endpoint:

export const getNamespaceProjects = (
  namespace: string,
  token: string | null = null,
  { search, offset, limit, orderBy, order }: PaginationParams,
) => {
  // construct query based on search, offset, and limit
  const query = new URLSearchParams();
  if (search) {
    query.set('q', search);
  }
  if (offset) {
    query.set('offset', offset.toString());
  }
  if (limit) {
    query.set('limit', limit.toString());
  }
  if (orderBy) {
    query.set('order_by', orderBy);
  }
  if (order) {
    if (order === 'asc') {
      query.set('order_desc', 'false');
    } else {
      query.set('order_desc', 'true');
    }
  }
  const url = `${API_BASE}/namespaces/${namespace}/projects?${query.toString()}`;
  if (!token) {
    return axios.get<NamespaceProjectsResponse>(url).then((res) => res.data);
  } else {
    return axios
      .get<NamespaceProjectsResponse>(url, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data);
  }
};

[nleroy917]

The latest pepdbagent updates seem to have fixed all this and I think it is working now.