Filters for integration page

[kknopper]

trafficstars

Proposed change

A rework of #24642 / #24500 / #18512 to add proper filtration to the integrations page. Also addresses https://github.com/home-assistant/home-assistant.io/issues/9944

Saw the new site changes, and finally came back to rework this PR. Merged in latest site changes, and updated code to remove jquery element selectors. Also added Brand Partners to category dropdown

used @ludeeus's notes from here as a guideline #16996 (comment)

• Better styling for filters. Thanks @ludeeus for the starting point
• added filtration of IoT Classes, and Quality Scale
• all filtration items have been moved into <select> dropdowns. (Category, Version, IoT, and Quality)
• It's now possible to combine filters (Search, IoT, Version, Category, and Quality)
• an easy way to reset filters (buttons get added to the dom that can be clicked to remove filters)
• complete rework of the applyFilter() function that allows for combining filters
• update is backwards compatible with old # urls
• on page load, if no filters are present in the url, the category is set to Featured like the production site
• integrations can now be searched for by their iot class and quality scale. You can also search for Featured integrations

Completely reworked the javascript for the integrations page. I opted to use the URLSearchParams browser API, over the hash method, as this api makes it easy to add and remove querys/filters to the url.

Created a buildQueryFromURL() function to build a query object of active filters any time the url gets updated. This object is then compared against the integrations array for filtration. Added more helper functions as well.

Functionality:

• Old # Urls still work as expected. Also allowed for new hash urls for IoT and Quality which look like so: .../integrations/#iot_class/local-polling and .../integrations/#quality_scale/internal

• If a # url is present, any change to a filter will convert the URL to use the URLSearchParams API format instead.

• On page load, or any change to the url, the current active filters (select dropdowns / search bar) will get updated to match the current active filters

• Filter removal buttons are dynamically added to the dom as well, and also update to match current active filters

• Filters can be removed by clicking these buttons, or setting a filter dropdown to its initial state

Caveats:

• URLSearchParams is not supported by IE
• this update contains a lot of ES6 javascript which is not supported by IE
• if IE needs to be supported, there are polyfills available for the - URLSearchParams api

This is a pretty large change, because of this, I tried to make my code as readable as possible with code comments for new functions.

Type of change

• [x] Spelling, grammar or other readability improvements (current branch).
• [ ] Adjusted missing or incorrect information in the current documentation (current branch).
• [ ] Added documentation for a new integration I'm adding to Home Assistant (next branch).
  • [ ] I've opened up a PR to add logos and icons in Brands repository.
• [ ] Added documentation for a new feature I'm adding to Home Assistant (next branch).
• [ ] Removed stale or deprecated documentation.

Additional information

• Link to parent pull request in the codebase:
• Link to parent pull request in the Brands repository:
• This PR fixes or closes issue: fixes #9944

Checklist

• [x] This PR uses the correct branch, based on one of the following:
  • I made a change to the existing documentation and used the current branch.
  • I made a change that is related to an upcoming version of Home Assistant and used the next branch.
• [x] The documentation follows the Home Assistant documentation standards.

Summary by CodeRabbit

• New Features

  • Enhanced component search with a minimum height and padding for better layout.
  • Improved integration filtering with new options based on categories, versions, IoT classes, and quality scales.
  • Added dynamic filtering and search functionality.
  • Introduced radio buttons and dropdowns for refined filter options.
  • Dynamic URL updates to reflect active filters.

• Style

  • Updated styles for various components including search inputs, filters, and alert messages to improve the visual appearance and usability.

[coderabbitai[bot]]

[!WARNING]

Rate limit exceeded

@silamon has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 47 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 3975f8edf54bafc436f5285a657e42e7d2493b48 and 226c4df54ea9d0f6df31959f7fc5b3d753cf7e25.

📒 Files selected for processing (1)

• source/integrations/index.html (5 hunks)

📝 Walkthrough

📝 Walkthrough

Walkthrough

The changes introduce significant additions to the _component_page.scss file, enhancing the styling of various components. New classes and styles are added for layout and user interface elements, including search components, grid filters, integration filters, and alert messages. The modifications also improve existing styles for responsive design and user interaction feedback across different screen sizes. Additionally, the index.html file is updated to implement new filtering options and enhance existing functionalities, including the introduction of new variables and a more dynamic filtering structure.

Changes

File	Change Summary
sass/.../_component_page.scss	Added styles for .component-search, .grid-filters, .integration-filter-radio, .filter-button, .integration-filter.integration-filter-select, .filter-title, .active-filter, and div.alert. Modified .option-card for hover effects and responsive design. Adjusted media queries for .category_select and .category_list.
source/.../index.html	Introduced new variables iot_classes and quality_scales. Replaced const allComponents with const integrations and updated filtering logic to accommodate new filters and enhance user interaction.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify[bot]]

✅ Deploy Preview for home-assistant-docs ready!

Name	Link
🔨 Latest commit	226c4df54ea9d0f6df31959f7fc5b3d753cf7e25
🔍 Latest deploy log	https://app.netlify.com/sites/home-assistant-docs/deploys/67d549f1d6923e0008ee08c2
😎 Deploy Preview	https://deploy-preview-33644--home-assistant-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[frenck]

@kknopper This is a good time to add this now!

I do think we need to fix one "big" issue, though, which is a path most users will walk:

https://github.com/home-assistant/home-assistant.io/assets/195327/e90d8b46-909e-45c7-915d-03abfb7eef0f

What happens in this case is you go to integration and search for what you are looking for, but it ain't clear for a regular visitor. Its search is limited to the featured filter.

While we do want to show featured when entering the page, the search should search everything in this case (and thus ignore the featured filter).

Current behavior:

https://github.com/home-assistant/home-assistant.io/assets/195327/ea808223-2f5c-4d0d-86ae-af24b27f074b

So, I think we should mimic that behavior. Show featured when entering the page (not activating the filter). Once the search it touched, it goes into "all mode".

[frenck]

Last but not least, the "Partner brands" are now kinda hidden; which makes me wonder:

Should featured & partner brands be "hidden" in categories at all? Of should they should up as single click buttons?

[kknopper]

for the search bar - you're right, right now it works more as an additional "filter" than a standalone search. Would you like it to revert to the "all" filters only on the first use?

Also for the Featured / Partner brands - i can try making those different filters, separate from the category dropdown

[frenck]

for the search bar - you're right, right now it works more as an additional "filter" than a standalone search. Would you like it to revert to the "all" filters only on the first use?

Yeah I think that works. If the page is visited, without any filters or search terms, automatically only show featured ones (without marking the "featured" category), and just clear that to all once anything is used (search, other filters, and what not).

Also for the Featured / Partner brands - i can try making those different filters, separate from the category dropdown

Yeah sounds good. My main concern is partners, they have invested in our community to offer devices that are tested and work together with the project to ensure stuff works. We should reward them for that and make sure they stand out in a way (and not just hidden in a category menu).

../Frenck

[kknopper]

• Added a new Brands filter. I added 3 radio buttons above the select dropdowns, these buttons toggle the new filter, and All removes the filter. I opted to make these radio buttons so that the filter functionality would be similar to the select dropdowns (only 1 option can be selected at a time).

• The following urls .../integrations/#featured, .../integrations/#works-with-home-assistant now will toggle the radio buttons and work as expected. Changing the filter in the UI will update the url to the newer query string version.

• For the search bar, it is set to clear all filters on the first search, unless a query filter is detected in the url on page load.

• Also updated the .../intregrations/#all url so that it clears all filters (sets all filters to All)

[kknopper]

This PR is ready for another review

[SeanPM5]

I like this, makes it super easy to find local controlled integrations. A few small suggestions:

• I think "Quality Scale" select options should be sorted by quality rather than alphabetically. Platinum > Gold > Silver etc. Most using this filter are trying to find the highest quality integrations.
• Like above, I think "IoT Class" select options should also be sorted from best to worst instead of alphabetically. Local Push > Local Polling > Cloud Push > Cloud Polling > Assumed State.
• IMO, initially clicking on the "Featured" and "Partners" radio buttons should clear all existing filters so that users always see all 18 featured integrations and all 8 partner integrations.
• For the no results message, instead of it saying "Nothing found!" I think the wording could be tweaked to something a bit more informative like "No results matching this filter" or something along those lines.

[kknopper]

Ready for another review, feedback addressed:

• adjusted quality / iot dropdowns order

  • Note: this order had to be done manually (couldnt find a way to do a custom sort in liquid) - this means if filters are added in the future, they will need to be added manually to this page

• updated Nothing Found message to No results matching this filter and centered text

• updated functionality of radio buttons so that if you click Featured or Partners all other active filters get cleared

  • Note: right now, the filters dont reset for All, it will just removed the Brands filter

• updated search so that if the initial url is /#featured or ?brands=featured a search will clear all filters the first time

  • If a different filter is in the url on page load, the search will not clear all filters, and act as an additional filter
  • additional searches will act as an additional filter (not clearing other filters)

• Cleaned up codebase to make it easier to set custom filters in the code if needed in the future

  • (Previously it was setup to add / remove filters, but not completely overwrite filters with a new custom one)
  • Renamed some functions to make functionality more clear
  • Broke down some complex functions into smaller functions to make code more readable
  • updated some comments to better explain code functions

[github-actions[bot]]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days. Thank you for your contributions.

[kknopper]

@frenck Please let me know if there is any additional feedback, or design changes you'd like to see in this PR :)

[kisst]

Why is this isn't merged yet ? Anything pending or just needs the reviews ? ( my attempt to get some attention , and making sure it doesn't go stale again )

[kknopper]

Ready for another review!

Updated Quality Scale filter to match latest updates from the 2024.12 release (added bronze, and legacy options). Also added emoji icons to match the docs page. https://www.home-assistant.io/docs/quality_scale/

Note: did not add custom option as no official integrations get those labels, and did not add no scale since those integrations are simply not labeled with a scale

Observation: I also noticed some integrations that were previously labeled Platinum no longer seem to have that label. Not sure if all integrations are being re-evaluated to match the latest criteria? (WLED, Hue for example)

[kknopper]

Fixed a small bug where the search input was not being cleared when selecting Featured or Brands - clicking these remove all other filters, and should clear the search bar. This has been fixed.

I think this PR is in a pretty good place now and I have not been able to find any other issues with expected behavior

[github-actions[bot]]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days. Thank you for your contributions.

[ChadNedzlek]

Please do not close this. @kknopper can you consider merging this?

[kknopper]

• Cleaned up css for emoji rendering in Safari for select dropdown and active filter buttons.
• Merged in logic from #36844 to clean up search input.
  • lastSearchText prevents a new filter from applying if the search value doesnt change after debounce
  • also changed search input event listener from keyup to input to be safer. (text has to be entered to fire)

[kknopper]

@ChadNedzlek im just a contributor, a HA team member needs to help give a final review of my work

[ChadNedzlek]

Indeed. Just noticed it had a bunch of merge conflicts... how does one get the attention of a team member? Just wait and hope?

[ChadNedzlek]

(Also I needed to do something so the annoying bot didn't auto-close it)