As a user, I can filter trials by registration date

[brunovegreville]

We want users to be able to find answers to questions like "What are the interventional trials from the last two weeks ?". We want them to be able to filter trials by registration date.
Steps to this are:

1. [To see with @inato/intelligence ] Expose a new attribute in trials in Algolia, registration_timestamp that is an unix timestamp version of the attribute date_registration3 as explained in this tutorial
2. Configure this new attribute as a filter in algolia
3. Expose a range component in the facets in the UI of anticovid, as explained in the specs

[wewelll]

Analaysis

• I will inject a new field in Algolia containing the timestamp of the registration date
• I will add a new filter on the front-end app

Dev breakdown

• in the AlgoliaIndexingService->serializer, add a new field registration_timestamp that contains the timestamp.
• Ask Julien to configure the new filter for this field (we have a limited number of algolia accounts)
• On the app, in src/pages/SearchPage/Facets.tsx, add a new filter on date using the RangeSlider component from react-instantsearch-dom

[wewelll]

Improvement areas

Product issues

• no easy to find the exact same slider

Engineering issues

• The react app will not render if there is a lint error or a type error in the code. It's very painful when you edit quickly and want to check changes, or just add a console.log

Engineering improvements

• make the app render even when there are lint or type errors

Potential operational risks

[gabsn]

Retro

• Was not able to always show the tooltip with rc-slider lib
• Got back to rheostat (airbnb lib used in algolia example) but got crazy errors I could not fix:
  • Uncaught TypeError: Cannot set property 'color' of undefined
  • Rheostat initialize creates a conflict with React-dates initialize (see issue)
  • Cannot read property 'createLTR' of undefined (see issue)

I finally fixed them by forcing use an oldest version of rheostat (v2 instead of v4).

• Not trivial to expand the clickable zone, made it using a pseudo element
• A lot of css based on hardcoded pixel based sizes, but I guess it's mandatory for complex components.
• I gave up on having a tooltip moving with the handle, otherwise it would add a few hours more to the budget...