search

DataBiosphere / data-explorer

BSD 3-Clause "New" or "Revised" License
10 stars 6 forks source link

After faceted search, rerender in one stage instead of two #256

Closed wnojopra closed 5 years ago

wnojopra commented 5 years ago

Fixes #63 . Before: https://screencast.googleplex.com/cast/NTE1MTQ1NjEyMjM3MjA5NnwwZTlhYjk1NS0zZg After: https://screencast.googleplex.com/cast/NTA3MDY0NjA0NDI2MjQwMHxhMzk4MzZmMC0zMw (The previous two screencasts include a 1 second sleep in the api to represent a slower query).

Previously, after doing a faceted search, the app would do two state changes. The first state change happens immediately after clicking, updating the selectedFacetValues. The second state change happens once we get a response from the api, updating the entire facetsMap. If there is a longish delay while waiting for the response, this results in a somewhat jarring ui effect.

The idea to fixing this: 1) Introduce a new state in App.js called 'awaitingApi'. This is a boolean meant to represent whether or not the app is waiting for a response from the API. 2) If awaitingApi is true, do not re-render. This is checked in shouldComponentUpdate, which is invoked before rendering when new states are being received. 3) Update FacetCard.js to update the summed facet values on re-render instead of on prop change. This is necessary because previously, the two render steps allowed for a prop change check to happen in between. I also like changing this because componentWillReceiveProps was deprecated earlier this year.

wnojopra commented 5 years ago

@melissachang I have deployed these UI changes to test-data-explorer and nhs-explorer. Please take a look. I will not merge until I hear back from you.

melissachang commented 5 years ago

They look great. Thanks, this is so much better.