search

healthyregions / SDOHPlace

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

#234, #235: filter UI with nuqs backend and API update #266

Closed pengyin-shan closed 2 months ago

pengyin-shan commented 3 months ago

This PR addresses issues #234 and #235. Note that the filter panel will be adjusted to the new design again based on the August 21st meeting, which includes a redesigned index_year slider and the removal of all filters except index_year (see https://www.notion.so/Design-Discussion-needed-90bc093f4b36420ab53468e0ae894c27 for details). There will be follow-up issues and PRs to implement these changes. This PR includes the filter functionality and a non-customized UI for the filter and sort features.

How to Test

  1. Navigate to the search page.

  2. Click "Sort & Filter". The filter panel should appear with "Relevance" as the default sort setting (i.e., following the default ranking by Solr). The URL should be updated with showFilter=on:

    Screenshot 2024-08-26 at 10 27 34 AM

  3. Click the "Close" button on the filter panel or the "Sort & Filter" icon. The panel should close, and the URL should be updated to remove the showFilter parameter

  4. Repeat step 2, then click "Recent first" or "Oldest first". The order of the result items should change accordingly, now ranked by the modified attribute. Currently, the selected sorting method is indicated by an underline decoration, but we can change this later:

    Screenshot 2024-08-26 at 10 28 02 AM

  5. Click "Maps" under "resource_class". You should now see that all items have Resource values including "Maps". Then click "Web services"; you should see more items added that have Resource values including "Web services":

    Screenshot 2024-08-26 at 10 28 33 AM

  6. Move the slider to "2020-2024" by dragging the left marker to the right. You should see that the result items are now filtered to those where: a. Resource value includes "Maps" OR "Web services" (inherited operation from the last step) AND b. Index_year value includes "2020" OR "2021" OR "2022" OR "2023", OR "2024":

    Screenshot 2024-08-26 at 10 28 53 AM

  7. Remove the Resource filter selection. You should now see more results where the Index_year value includes "2021", "2022", "2023", OR "2024":

    Screenshot 2024-08-26 at 10 29 36 AM

  8. Repeat step 4. You should see that the sort function still works with the filter applied.

  9. Type "smart" in the search box and search. The filter settings should still be maintained for the query results:

    Screenshot 2024-08-26 at 10 29 58 AM

  10. Clear the search box. The result list should reset to the state described in step 8:

Screenshot 2024-08-26 at 10 31 04 AM
  1. Experiment with the filters to combine the operations described above.
netlify[bot] commented 3 months ago

Deploy Preview for cheerful-treacle-913a24 failed.

Name Link
Latest commit b8ef9fa58e4e76125167097d258118bceda46432
Latest deploy log https://app.netlify.com/sites/cheerful-treacle-913a24/deploys/66c379e81945ce0008c8bb73
netlify[bot] commented 3 months ago

Deploy Preview for cheerful-treacle-913a24 ready!

Name Link
Latest commit 79413d2f4d56b17dbb1d7a2c43c3624a860816ca
Latest deploy log https://app.netlify.com/sites/cheerful-treacle-913a24/deploys/66c626c972d2740008da302c
Deploy Preview https://deploy-preview-266--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.