Improve graph label search functionality and UI behavior

- Display a drop down list box when user input is empty
- Ensure graph is available before searching
This commit is contained in:
yangdx
2025-03-13 01:48:40 +08:00
parent dc74c889b0
commit 06bff7e836
2 changed files with 14 additions and 3 deletions

View File

@@ -85,7 +85,18 @@ export const GraphSearchInput = ({
const loadOptions = useCallback(
async (query?: string): Promise<OptionItem[]> => {
if (onFocus) onFocus(null)
if (!query || !searchEngine) return []
if (!graph || !searchEngine) return []
// If no query, return first searchResultLimit nodes
if (!query) {
const nodeIds = graph.nodes().slice(0, searchResultLimit)
return nodeIds.map(id => ({
id,
type: 'nodes'
}))
}
// If has query, search nodes
const result: OptionItem[] = searchEngine.search(query).map((r: { id: string }) => ({
id: r.id,
type: 'nodes'
@@ -103,7 +114,7 @@ export const GraphSearchInput = ({
}
]
},
[searchEngine, onFocus, t]
[graph, searchEngine, onFocus, t]
)
return (

View File

@@ -193,7 +193,7 @@ export function AsyncSearch<T>({
</div>
)}
</div>
<CommandList hidden={!open || debouncedSearchTerm.length === 0}>
<CommandList hidden={!open}>
{error && <div className="text-destructive p-4 text-center">{error}</div>}
{loading && options.length === 0 && (loadingSkeleton || <DefaultLoadingSkeleton />)}
{!loading &&