healthyregions / SDOHPlace

Landing page and data discovery application for SDOH Place Project.
https://sdohplace.org
GNU General Public License v3.0
1 stars 0 forks source link

Add nuqs for filter (URL only) and transfer some search params to nuqs setting #259

Closed pengyin-shan closed 1 month ago

pengyin-shan commented 1 month ago

This PR reflects the nuqs upgrade that is part of #235. It demonstrates the control of filtering and searching via the URL only, without connecting the UI components to URL updates (a follow-up PR will address this). I removed much of the old code from discoveryArea.tsx to improve readability. The purpose of this PR is to establish a base for URL parameter updates, so that the new map component can adhere to this pattern.

Another change included in this PR is setting the filter behavior via the Solr API instead of performing on-page filtering. Currently, it uses fq for filtering, but this can be updated later. Not all filters have been implemented yet (see ParameterList.tsx for what's included in this PR). Additional filters can be added to the page in future updates.

How to Test

  1. Navigate to the search page. Note that without any filter or query parameters in the URL, there are 34 total data sources.

    Screenshot 2024-08-15 at 9 05 57 PM
  2. Attach?index_year=2010,2024 into the URL, then hit enter. You should see the data sources filtered down to 15. (The encoded URL for this is https://solr.sdohplace.org/solr/blacklight-core-dev/select?fq=gbl_indexYear_im:%222010%22%20AND%20gbl_indexYear_im:%222024%22&rows=1000.)

    Screenshot 2024-08-15 at 9 06 35 PM
  3. Copy this URL to another tab. The page should render as already filtered and show the same data in step 2.

  4. Type "social" in the search box, then hit enter or click the arrow button. You should see the results filtered down to 14. The corresponding endpoint on the backend is https://solr.sdohplace.org/solr/blacklight-core-dev/select?q=social&fq=gbl_indexYear_im:%222010%22%20AND%20gbl_indexYear_im:%222024%22&rows=1000.

Note that the URL for this page has been updated to search?index_year=2010%2C2024&query=social:

Screenshot 2024-08-15 at 9 07 09 PM

FYI: The suggestion endpoints seem to be malfunctioning, as they consistently return no suggestions now, e.g., https://solr.sdohplace.org/solr/blacklight-core-dev/suggest?q=social. Is there something wrong?

  1. Use the keyboard to remove 'social'. When the input box is empty, the page should reset. Since index_year=2010%2C2024 is still in the URL, you should see 15 results.

  2. Now try /search?resource_class=Websites&index_year=2018, and you should see only one result that includes both 2018 as the index year and resource class as Websites.

    Screenshot 2024-08-15 at 9 08 13 PM
  3. Remove index_year. More datasets should appear:

    Screenshot 2024-08-15 at 9 08 32 PM
  4. Add x=y to the URL and hit enter. The page should not encounter any loading issues. Instead, it will read all valid parameters defined in ParameterList.tsx and load correctly:

    Screenshot 2024-08-15 at 9 08 47 PM

@mradamcox, I hope this provides you with a solid foundation for using nuqs to update the map. You just need to add new parameters in ParameterList.tsx, then update the top-level code in discoveryArea.tsx (see line 83 as a starting point).

The fetchResult parameter in this file is the result list passed to child components, which the map component can leverage. I suggest always updating fatchResult when the URL changes (as is currently done with filters and queries), then run setFetchResult(newResult) to make the child components update with fetchResult. However, I'm open to other ways of handling this. Please let me know if this is what you need or any questions!

netlify[bot] commented 1 month ago

Deploy Preview for cheerful-treacle-913a24 ready!

Name Link
Latest commit 6e7c7d926e73aaa03072cf1c699d9b697866f7ce
Latest deploy log https://app.netlify.com/sites/cheerful-treacle-913a24/deploys/66bf6ba6d6a68d0008edd4fe
Deploy Preview https://deploy-preview-259--cheerful-treacle-913a24.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.