feat: improve type search sorting with relevance-based ordering (#7540)

Co-authored-by: Rick Bijkerk <rickbijkerk@bol.com>
Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

Author: 3 people

.changeset/cold-jars-hear.md

@@ -0,0 +1,9 @@
+---
+'hive': minor
+---
+
+Improve type sorting within the schema explorer. The changes are now sorted by relevance.
+
+- Exact matches appear first (e.g., `Product` when searching `product`)
+- Prefix matches appear second (e.g., `ProductInfo` when searching `prod`)
+- Contains matches appear last, sorted alphabetically

packages/web/app/src/components/target/explorer/filter.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useMemo } from 'react';
+import React, { ChangeEvent, useCallback, useDeferredValue, useMemo, useState } from 'react';
 import { FilterIcon } from 'lucide-react';
 import { useQuery } from 'urql';
 import { Button } from '@/components/ui/button';
@@ -94,6 +94,8 @@ export function TypeFilter(props: {
   };
 }) {
   const router = useRouter();
+  const [inputValue, setInputValue] = useState('');
+  const deferredInputValue = useDeferredValue(inputValue);
   const [query] = useQuery({
     query: TypeFilter_AllTypes,
     variables: {
@@ -115,6 +117,29 @@ export function TypeFilter(props: {
     [allNamedTypes],
   );
 
+  const sortedTypes = useMemo(() => {
+    if (!deferredInputValue) return types;
+
+    const search = deferredInputValue.toLowerCase();
+    return [...types].sort((a, b) => {
+      const aName = a.label.toLowerCase();
+      const bName = b.label.toLowerCase();
+
+      // Exact match gets highest priority
+      const aExact = aName === search;
+      const bExact = bName === search;
+      if (aExact !== bExact) return aExact ? -1 : 1;
+
+      // Prefix match gets second priority
+      const aPrefix = aName.startsWith(search);
+      const bPrefix = bName.startsWith(search);
+      if (aPrefix !== bPrefix) return aPrefix ? -1 : 1;
+
+      // Alphabetical within same relevance
+      return aName.localeCompare(bName);
+    });
+  }, [types, deferredInputValue]);
+
   const onChange = useCallback(
     (option: SelectOption | null) => {
       void router.navigate({
@@ -140,8 +165,9 @@ export function TypeFilter(props: {
       className="min-w-[200px] grow cursor-text"
       placeholder="Search for a type"
       defaultValue={defaultValue}
-      options={types}
+      options={sortedTypes}
       onChange={onChange}
+      onInputChange={setInputValue}
       loading={query.fetching}
     />
   );

packages/web/app/src/components/v2/autocomplete.tsx

@@ -108,6 +108,7 @@ export function Autocomplete(props: {
   disabled?: boolean;
   loading?: boolean;
   className?: string;
+  onInputChange?: (value: string) => void;
 }): ReactElement {
   return (
     <Select
@@ -125,6 +126,11 @@ export function Autocomplete(props: {
       isClearable
       closeMenuOnSelect
       onChange={option => props.onChange(option as SelectOption)}
+      onInputChange={(value, { action }) => {
+        if (action === 'input-change') {
+          props.onInputChange?.(value);
+        }
+      }}
       isDisabled={props.disabled}
       isLoading={props.loading}
       placeholder={props.placeholder}