New Filterable data widget

[MattReimer]

We need a tool listing widget written in React that is integrated into the Gatsby Riverscapes theme.

Related to:

• What filters for tools listing? riverscapes-tools#972

Here's what we have right now:

• https://tools.riverscapes.net/

The Design:

Assumptions and guidance:

• Component should be made using MUI
• Data source will be a JSON file in the child site package (not in the Gatsby theme package)
• There is no central list of filter values. Filter values will populate from the JSON dynamically and appear alphabetically (for now). JSON will be located on the client site as a physical JSON file.
  • we have it passed in as an object now but that will need to move to a real file later and we'll need to figure out enough Gatsby routing to learn how to load it.
• Filters should be all checkboxes and must be multi-select
• Design for the card has not been completed yet so don't spend much time on that.
• Images will not be a field in the JSON. they will be a file with a regular name like <TOOLID>.jpg inside a folder at an easily findable path.

Out of scope:

• We do not need pagination for now
• We do not need any responsiveness for now
• Filters will not have numbers beside them and the filters will not grey-out or react to which values are selected (other than just being checked or unchecked.

Resources:

• Gatsby: https://www.gatsbyjs.com/
• Material UI: https://mui.com/material-ui
• Material UI Icons: https://mui.com/material-ui/material-icons

[MattReimer]

Couple of added things we talked about:

• what happens when the JSON isn't there?
• Maybe make the filter/content ratio 4:8 instead of 3:9 to allow longer filter names
• Links: use href and target="_blank" so we get a new tab. Swap <ListItem> with <ListItemButton> on table view. On card view make the image and the title clickable.
• Reset button: somewhere at the top of the page to reset all filters
• remove "Switch to" on button
• Visual pass: Remove red borders. Look into variant on any <Typography> elements
• Documentation: When you're done, write a markdown document somewhere with instructions about how to use it and where files go.

[philipbaileynar]

My first attempt to use this looks excellent. See graphic below.

Change Requests

1. Can we try 2 tools across the flex grid please? Three makes it a little crowded and most names are truncated with ellipses. If it's possible to shrink the width of the filters a TINY bit that would be great (but not so they start word wrapping).
2. Remove the header words "Explore Applications". Let the hosting page add a header.
3. Can we replace the "Purpose" filter with a "Tool Grade" filter. The JSON object key will be "grade".
4. Can we add a filter for "Extent". The JSON key will be extent.
5. Here's the big one... Some of the filters are ordinal not nominal. This is hard because the filter values come from the data themselves and so you don't know their intrinsic order... The best suggestion that I can provide is perhaps to have an initial ORDERED list of values in the component. Then tally occurrences of them as you read the data. Finally append at end any other occurrences found in the data but not the original initial list. The ordinal filters are "Tool Grade" and "Extent" and "Resolution".