Add filters to node map

[philon-]

Description

Added some filtering options to the node map. Now users can filter by text (longName/shortName/num), number of hops, channel & air utilization and battery level.

The filtering logic is abstracted into util/hooks/useNodeFilters.ts for possible future implementation into the node list page.

Extra children/objects can be added onto the UI popover if there is a need to extend with other map UI elements (re PR #457)

Changes Made

• Created util/hooks/useNodeFilters.ts which handles filtering logic, including definition and criteria.
• New UI object Slider from radix-ui/react-slider
• Map view is extended with FilterControl object which uses a popover object to show input/form elements based on filters defined in the hook.
• Minor change to components/UI/Checkbox/index.tsx in order to make sure that setIsChecked state updates when filters are reset.

Testing Done

Tested in Safari/Chrome/Firefox on macOS.
Checkbox element still passes tests after changes
Linting with deno lint passes (for changed/added files)

I didn't have any MQTT-nodes so that filter is currently untested.

Screenshots (if applicable)

Checklist

• Code follows project style guidelines
• Documentation has been updated or added
• Tests have been added or updated
• All CI checks pass
• Dependent changes have been merged

Additional Notes

My react/typescript knowledge is pretty rusty so I'm open for any feedback on this 😉

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web-test	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2025 2:41pm

[danditomaso]

Nice change, looking forward to using it. Overall its a lot of good work, but I'd like to see some improvements made to the type casting (prefer type assertion functions instead), array index key usage, and ! operator in cfg.bounds.

[danditomaso]

This doesn't need to change, but in the future you could have done return [shortName, longName, nodeNum, nodeNumHex].some(s => s.includes(search). It helps avoid the all of the OR statements.

[danditomaso]

Overall I really like this feature. The one improvement I would suggest we make before merging is adding some way of indicating you've applied a filter. Either by changing the icon filter icon (swapping to a filled icon if any filters are configured), or adding a shadow or text to indicate filters are active. What do you think @philon- ?

[philon-]

Overall I really like this feature. The one improvement I would suggest we make before merging is adding some way of indicating you've applied a filter. Either by changing the icon filter icon (swapping to a filled icon if any filters are configured), or adding a shadow or text to indicate filters are active. What do you think @philon- ?

Good suggestion! Maybe something like this?
Icon returns to original white/slate when no filters are applied.