feat: improve type search sorting with relevance-based ordering

[rickbijkerk]

Background:

When searching for types in the Explorer type search dropdown, results weren't sorted by relevance. For example, searching for "Product" would show "CreatorProduct" before "Product" because the dropdown displayed results in their original order without considering match quality. This made it harder for users to find the exact type they were looking for.

Description:

Improved the type search sorting in the Explorer page to prioritize matches by relevance:

1. Exact matches appear first (e.g., "Product" when searching "product")
2. Prefix matches appear second (e.g., "ProductInfo" when searching "prod")
3. Contains matches appear last, sorted alphabetically

Files changed:

• packages/web/app/src/components/v2/autocomplete.tsx - Added onInputChange prop to expose search input to parent components
• packages/web/app/src/components/target/explorer/filter.tsx - Added relevance-based sorting to the TypeFilter component

Checklist:

• Input validation
• Testing

[gemini-code-assist]

Summary of Changes

Hello @rickbijkerk, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience within the Explorer's type search functionality. By introducing a relevance-based sorting algorithm, users can now find desired types more efficiently, as search results are intelligently ordered to prioritize exact and prefix matches, making type discovery intuitive and quick.

Highlights

• Improved Type Search Sorting: Implemented a relevance-based sorting algorithm for type search results in the Explorer page to enhance user experience.
• Relevance Prioritization: Search results are now prioritized with exact matches appearing first, followed by prefix matches, and then alphabetically sorted 'contains' matches.
• Autocomplete Component Enhancement: The Autocomplete component was updated to expose a new onInputChange prop, allowing parent components to track the search input value.
• TypeFilter Integration: The TypeFilter component now utilizes the new onInputChange prop and applies the relevance-based sorting logic to its displayed type options.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces relevance-based sorting for the type search in the Explorer, which is a great improvement for user experience. The implementation is solid. I've suggested a performance optimization using useDeferredValue to ensure the UI remains responsive even with large schemas, which aligns with the repository's style guide.

[n1ru4l]

@rickbijkerk Seems like it might make sense to use useDeferredValue as suggested by the AI review. I assume this can become a bit more expensive for bigger schemas?

[rickbijkerk]

Good point, changed it and re-pushed