✨ Data catalog client

[ikesau]

Staging
Figma

Changes

• Removes the /charts page
• Adds a redirect from /charts to /data
• Adds a DataCatalog page and DataCatalog component
• Increases the owid.css bundlewatch limit to 250KB
• Adds new analytics events for datacatalog navigation and result selection
• Adds a useFocusTrap hook

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-data-catalog-algolia-client

• Site-screenshots: https://github.com/owid/site-screenshots/compare/data-catalog-algolia-client
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/data-catalog-algolia-client

SVG tester:

Number of differences (default views): 4523 (f7dd60) ❌
Number of differences (all views): 1622 (93acd2) ❌

Edited: 2024-09-17 23:09:56 UTC
Execution time: 1.24 seconds

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[rakyi]

http://staging-site-data-catalog-algolia-client/data gets redirected to http://staging-site-data-catalog-algolia-client/#entries

[ikesau]

Oh, weird! Maybe because the bake failed? Lemme try again..

[rakyi]

Great job! I don't see any major problems, but I left a few comments for possible small improvements we might still do.

Also, could you add docs on how to run the catalog locally?

Areas of possible improvements/potential follow-ups (some of which we already discussed) for the future:

• Handling out-of-order/slow requests and request cancellation when fetching data - I'm mostly worried about this, but I'm not sure if it's gonna really be a problem in practice
• Ordering query params when creating the cache key, so their order won't matter, and they'd use a single cache key
• Reusing existing checkbox component
• Storing search state in the URL only, instead of syncing between URL and React state

Possible 3rd party solutions to some of these problems:

• React Router hooks to use URL for state and relatedly avoid handling mutable global history state + global event listeners
• react-query for data fetching, cache, request cancellation etc.

[rakyi]

This made me smile 😄