Bug: Query results not cleared when query string is empty

[coderabbitai]

Description

When the query string is empty, the previous search results still remain displayed in the panel. This happens because in startQuery() function, we return early when the query string equals the default empty string, without clearing the previous results first.

Current Behavior

Currently in src/stores/queryStore/createQueryControllerSlice.ts:

startQuery: () => {
    const {
        clearQueryResults,
        queryString,
        queryIsCaseSensitive,
        queryIsRegex,
    } = get();
    const {logFileManagerProxy} = useLogFileManagerStore.getState();
    const {postPopUp} = useContextStore.getState();

    if (QUERY_CONFIG_DEFAULT.queryString === queryString) {
        return;
    }

    clearQueryResults();
    // ...
}

When the query string is empty or matches the default value, the function returns early without clearing previous results, causing them to remain visible.

Expected Behavior

The clearQueryResults() function should be called before the early return to ensure that previous results are cleared when the query string is empty:

startQuery: () => {
    const {
        clearQueryResults,
        queryString,
        queryIsCaseSensitive,
        queryIsRegex,
    } = get();
    const {logFileManagerProxy} = useLogFileManagerStore.getState();
    const {postPopUp} = useContextStore.getState();

    clearQueryResults();  // Clear results regardless of query string value

    if (QUERY_CONFIG_DEFAULT.queryString === queryString) {
        return;
    }

    // ...
}

References

• Identified in PR: refactor: Replace StateContextProvider with Zustand for state management (resolves #168, resolves #211). #224
• Comment: refactor: Replace StateContextProvider with Zustand for state management (resolves #168, resolves #211). #224 (comment)

Screenshots

[junhaoliao]

@coderabbitai also, it was found that the query in the backend is not cancelled after the query input box is cleared by the user. we need a more proper fix. create an issue to track this

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, let's find files related to query handling in the frontend
echo "Files related to query input:"
rg -l "query input" --type-not=binary

# Now find files related to query handling and backend communication
echo "Files related to query handling and backend communication:"
rg -l "query.*backend|backend.*query" --type-not=binary

# Find components/files related to search or query functionality
echo "Files containing search or query components:"
rg -l "Search|search|Query|query" --type-not=binary | grep -v "node_modules" | head -15

Length of output: 573

---

🏁 Script executed:

#!/bin/bash
# First, let's examine the structure of the repository to get a better understanding
echo "Repository structure:"
find . -type d -not -path "*/node_modules/*" -not -path "*/\.*" | sort | head -20

# Look for JavaScript/TypeScript files related to querying or searching
echo "Frontend files related to query/search:"
find . -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | grep -i "query\|search" | grep -v "node_modules"

# Look for backend files (Python, Go, etc.) related to queries
echo "Backend files related to query/search:"
find . -name "*.py" -o -name "*.go" -o -name "*.rs" | grep -i "query\|search" | grep -v "node_modules"

# Look for API endpoints or services
echo "API/Service files:"
find . -type f | grep -i "api\|service\|endpoint" | grep -v "node_modules" | head -15

Length of output: 2517

---

🏁 Script executed:

#!/bin/bash
# Let's examine the key files related to query store and the query input component
echo "Examining Query Controller Slice:"
cat ./src/stores/queryStore/createQueryControllerSlice.ts

echo -e "\n\nExamining Query Input Box Component:"
cat ./src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.tsx

echo -e "\n\nExamining Search Tab Panel index:"
cat ./src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx

echo -e "\n\nExamining Query Store Types:"
cat ./src/stores/queryStore/types.ts

Length of output: 10264

---

🏁 Script executed:

#!/bin/bash
# Let's examine the LogFileManagerProxy implementation that handles backend queries
echo "Examining LogFileManagerProxy implementation:"
cat ./src/services/LogFileManagerProxy.ts

# Also check types related to query 
echo -e "\n\nExamining Query Types:"
cat ./src/typings/query.ts

# Check if there are any cancel methods in the backend
echo -e "\n\nLooking for cancel query methods:"
grep -r "cancelQuery\|cancel.*query\|abort.*query" --include="*.ts" --include="*.tsx" .

Length of output: 3565

---

🏁 Script executed:

#!/bin/bash
# Look for the default query string to confirm it matches the empty query case
echo "Checking query config defaults:"
grep -A 5 "QUERY_CONFIG_DEFAULT" ./src/stores/queryStore/queryConfigSlice.ts

# Check for any existing implementation of LogFileManager to see if it has a query cancellation method
echo -e "\n\nExamining LogFileManager implementation:"
cat ./src/services/LogFileManager/index.ts | grep -A 10 "startQuery"

# Check if there are existing issues about query cancellation
echo -e "\n\nChecking for existing issues about query cancellation:"
gh issue list --repo y-scope/yscope-log-viewer --search "cancel query" --limit 5

Length of output: 1570

---

🏁 Script executed:

#!/bin/bash
# Create an issue to track the bug with the query cancellation
gh issue create \
  --repo y-scope/yscope-log-viewer \
  --title "Bug: Backend query is not cancelled when query input box is cleared" \
  --body "## Description

When a user clears the search query input box, the ongoing query in the backend is not properly cancelled. This can lead to unnecessary resource usage and potential UI/performance issues.

## Current Behavior

Currently, when a user types a query in the search box, a query is started in the backend via the \`startQuery()\` method. However, when the user clears the query input box, while new queries are not started (due to checks for empty query strings), any ongoing query continues to run in the backend.

## Technical Details

- In the \`QueryInputBox.tsx\` component, the \`handleQueryInputChange\` function calls \`startQuery()\` whenever the input changes, including when it's cleared.
- In \`createQueryControllerSlice.ts\`, there's a check to prevent starting a query if the query string is empty, but no mechanism to cancel an ongoing query.
- The \`LogFileManager\` implementation has logic to not start a query for empty strings, but lacks a \`cancelQuery\` method to stop ongoing queries.

## Expected Behavior

When a user clears the query input box, any ongoing backend query should be immediately cancelled to:
1. Save system resources
2. Prevent potential UI lag or performance issues 
3. Ensure a consistent user experience

## Suggested Solution

1. Implement a \`cancelQuery\` method in the \`LogFileManager\` class to stop ongoing queries
2. Modify the \`startQuery\` method in \`createQueryControllerSlice.ts\` to first cancel any ongoing query before starting a new one
3. Ensure the \`cancelQuery\` method is called when the query string is cleared

## Related Components

- \`src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.tsx\`
- \`src/stores/queryStore/createQueryControllerSlice.ts\`
- \`src/services/LogFileManager/index.ts\`
- \`src/services/LogFileManagerProxy.ts\`"

Length of output: 2016

---

@junhaoliao I've created an issue to track this bug: #278

After analyzing the codebase, I found that while there are checks to prevent starting new queries with empty strings, there's no mechanism to cancel an ongoing query when the user clears the input box. The issue includes detailed technical information and a suggested solution that involves implementing a cancelQuery method in the LogFileManager class.