Please increase the number of fields displayed in the search bar.

DataBiosphere / data-explorer

BSD 3-Clause "New" or "Revised" License

10 stars 6 forks source link

Please increase the number of fields displayed in the search bar. #292

Open mbookman opened 5 years ago

mbookman commented 5 years ago

In the AMP PD data explorer, when I click on the down arrow or in the search bar itself, a list of facet fields pops up.

These only appear to be for the sample-related tables, not the participants. It seems I need to know the participant fields to search on.

melissachang commented 5 years ago

Limit defined here, currently 100.

You can see the results at https://amp-pd-data-explorer.appspot.com/api/search

Matt asked what order the results are shown. We sort by BQ column name.

mbookman commented 5 years ago

IIRC, we currently have about 350 fields, so it would be great if we could test out increasing the number beyond 100.

Also - each table has a participant_id and GUID field. It would be great if the interface would display these fields only once instead of once per table.

melissachang commented 5 years ago

Previously when the limit was higher, large datasets (NHS, UKBB) would become laggy after a while.

We should look into using react-window with react-select. That might fix the lagginess. Encode uses react-virtualized, but react-window is better.

melissachang commented 5 years ago

FYI there is another problem that I think react-window will also fix. If you pull up CRAI facet at https://amp-pd-data-explorer.appspot.com, you get:

(Note that for some reason this problem is reproducible on my Linux desktop and not my Mac laptop.)

We are trying to display a facet with 1000 values -- 1000 divs. With react-window, instead of 1000 divs, we would only have ~10 (only the facets that are displayed).

So react-window on search box drop-down results + react-window on facets should help with slugginess with large datasets.

melissachang commented 4 years ago

Tried this with AMP PD. Reopening because there are issues when option is multiple lines (long text).

melissachang commented 4 years ago

react-window

I tried this suggestion. It works great when options are fixed height, but I couldn't get it to work when options are variable height. Depending on BQ column description length (and browser width), the option text may wrap and take 1-3 lines. Note that in order to figure out how high an option is, all the option rows would have to be rendered. One would have to prerender and store the offsets, before using react-window.
Can't use react-windowed-select because it appears to only support sync Select, whereas we are using async Select
Can't use react-virtualized-select because we are using react-select 2 and it supports 1
Also looked into react-window for the CRAI problem. This seems even more difficult as each bar is an svg path.

Some things AMP PD could do:

Try manually increasing this limit
Provide a notebook that lists all BQ column names and descriptions. (Baseline has such a notebook.)