From 74fea9cd8facd2f911f3cbd076eb2b1ea0227b1d Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Thu, 23 Apr 2026 22:53:28 +0530
Subject: [PATCH] fix: Issue 1538 autorun loading (#11428)

---
 .../common/FieldValuesPanel.spec.ts           | 67 +++++++++++--------
 .../components/common/FieldValuesPanel.vue    | 23 +++++--
 web/src/composables/useLogs.ts                |  3 +-
 web/src/composables/useLogs/useSearchBar.ts   |  1 +
 web/src/plugins/logs/Index.spec.ts            |  2 +
 web/src/plugins/logs/Index.vue                |  2 +
 web/src/plugins/logs/filterUtils.ts           |  5 +-
 7 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/web/src/components/common/FieldValuesPanel.spec.ts b/web/src/components/common/FieldValuesPanel.spec.ts
index 724c87ac82..04f7b1532c 100644
--- a/web/src/components/common/FieldValuesPanel.spec.ts
+++ b/web/src/components/common/FieldValuesPanel.spec.ts
@@ -311,34 +311,47 @@ describe("FieldValuesPanel.vue", () => {
       expect((wrapper.vm as any).selectedValues).toEqual([]);
     });
 
-    it("emits 'add-multiple-search-terms' with include when Include mode button clicked", async () => {
-      wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) });
-      // Set filterMode to 'exclude' while selectedValues is empty so no premature emit
-      (wrapper.vm as any).filterMode = "exclude";
-      await nextTick();
-      (wrapper.vm as any).selectedValues = ["value-1", "value-2"];
-      await nextTick();
-      const includeBtn = wrapper.find(
-        '[data-test="field-values-panel-include-mode-btn"]'
-      );
-      await includeBtn.trigger("click");
-      const emitted = wrapper.emitted("add-multiple-search-terms");
-      expect(emitted).toBeTruthy();
-      expect(emitted![0]).toEqual(["status", ["value-1", "value-2"], "include"]);
-    });
+    // Mode-switch emissions are debounced (300 ms) so fake timers are required
+    // to flush the debounce before asserting the emitted event.
+    describe("mode switch emits (debounced)", () => {
+      beforeEach(() => {
+        vi.useFakeTimers();
+      });
+      afterEach(() => {
+        vi.useRealTimers();
+      });
 
-    it("emits 'add-multiple-search-terms' with exclude when Exclude mode button clicked", async () => {
-      wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) });
-      // filterMode defaults to 'include'; set selectedValues then click exclude
-      (wrapper.vm as any).selectedValues = ["value-1"];
-      await nextTick();
-      const excludeBtn = wrapper.find(
-        '[data-test="field-values-panel-exclude-mode-btn"]'
-      );
-      await excludeBtn.trigger("click");
-      const emitted = wrapper.emitted("add-multiple-search-terms");
-      expect(emitted).toBeTruthy();
-      expect(emitted![0]).toEqual(["status", ["value-1"], "exclude"]);
+      it("emits 'add-multiple-search-terms' with include when Include mode button clicked", async () => {
+        wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) });
+        // Set filterMode to 'exclude' while selectedValues is empty so no premature emit
+        (wrapper.vm as any).filterMode = "exclude";
+        await nextTick();
+        (wrapper.vm as any).selectedValues = ["value-1", "value-2"];
+        await nextTick();
+        const includeBtn = wrapper.find(
+          '[data-test="field-values-panel-include-mode-btn"]'
+        );
+        await includeBtn.trigger("click");
+        vi.runAllTimers();
+        const emitted = wrapper.emitted("add-multiple-search-terms");
+        expect(emitted).toBeTruthy();
+        expect(emitted![0]).toEqual(["status", ["value-1", "value-2"], "include"]);
+      });
+
+      it("emits 'add-multiple-search-terms' with exclude when Exclude mode button clicked", async () => {
+        wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) });
+        // filterMode defaults to 'include'; set selectedValues then click exclude
+        (wrapper.vm as any).selectedValues = ["value-1"];
+        await nextTick();
+        const excludeBtn = wrapper.find(
+          '[data-test="field-values-panel-exclude-mode-btn"]'
+        );
+        await excludeBtn.trigger("click");
+        vi.runAllTimers();
+        const emitted = wrapper.emitted("add-multiple-search-terms");
+        expect(emitted).toBeTruthy();
+        expect(emitted![0]).toEqual(["status", ["value-1"], "exclude"]);
+      });
     });
 
     it("does NOT clear selectedValues after applying multi-select include", async () => {
diff --git a/web/src/components/common/FieldValuesPanel.vue b/web/src/components/common/FieldValuesPanel.vue
index 6e38ff0c8c..717417b06a 100644
--- a/web/src/components/common/FieldValuesPanel.vue
+++ b/web/src/components/common/FieldValuesPanel.vue
@@ -207,7 +207,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
-import { watchDebounced } from "@vueuse/core";
+import { useDebounceFn, watchDebounced } from "@vueuse/core";
 import EqualIcon from "@/components/icons/EqualIcon.vue";
 import NotEqualIcon from "@/components/icons/NotEqualIcon.vue";
 import { formatLargeNumber } from "@/utils/zincutils";
@@ -323,18 +323,29 @@ watchDebounced(
   { debounce: 300 },
 );
 
+/**
+ * Debounced emission for mode changes. The UI toggle updates immediately
+ * (instant feedback) but the API call is consolidated so that rapid
+ * include→exclude→include clicks only fire one search at the end, preventing
+ * a brief "no events found" flash (from an intermediate result set) that
+ * would reset the field-list scroll position.
+ */
+const debouncedEmitModeChange = useDebounceFn((mode: "include" | "exclude") => {
+  if (selectedValues.value.length > 0) {
+    emit("add-multiple-search-terms", props.fieldName, [...selectedValues.value], mode);
+  }
+}, 300);
+
 /**
  * Called when the user explicitly clicks the include/exclude toggle.
- * Sets filterMode and immediately re-applies the current selection under
- * the new mode so the query updates in real time.
+ * Updates filterMode immediately for instant visual feedback, then
+ * debounces the actual query emission to avoid rapid successive API calls.
  * This is the ONLY path that should emit add-multiple-search-terms for
  * a mode change — the prop-sync watcher below only updates the ref silently.
  */
 const setFilterMode = (mode: "include" | "exclude") => {
   filterMode.value = mode;
-  if (selectedValues.value.length > 0) {
-    emit("add-multiple-search-terms", props.fieldName, [...selectedValues.value], mode);
-  }
+  debouncedEmitModeChange(mode);
 };
 
 // Keep filterMode in sync with the external filter state.
diff --git a/web/src/composables/useLogs.ts b/web/src/composables/useLogs.ts
index 52a62b2ef4..ce1529252d 100644
--- a/web/src/composables/useLogs.ts
+++ b/web/src/composables/useLogs.ts
@@ -220,7 +220,8 @@ const useLogs = () => {
           if (
             searchObj.loading == false &&
             searchObj.loadingHistogram == false &&
-            searchObj.meta.logsVisualizeToggle == "logs"
+            searchObj.meta.logsVisualizeToggle == "logs" &&
+            searchObj.data.stream.selectedStream.length > 0
           ) {
             searchObj.loading = true;
             await getQueryData(false);
diff --git a/web/src/composables/useLogs/useSearchBar.ts b/web/src/composables/useLogs/useSearchBar.ts
index 727f78e36b..a0dd0f7031 100644
--- a/web/src/composables/useLogs/useSearchBar.ts
+++ b/web/src/composables/useLogs/useSearchBar.ts
@@ -326,6 +326,7 @@ export const useSearchBar = () => {
       //if empty then we are displaying no events found... message on the UI instead of throwing in an error format
       if (!allStreamFields.length) {
         // searchObj.data.errorMsg = t("search.noFieldFound");
+        searchObj.loading = false;
         return;
       }
 
diff --git a/web/src/plugins/logs/Index.spec.ts b/web/src/plugins/logs/Index.spec.ts
index f3550cc2ec..328a596ef4 100644
--- a/web/src/plugins/logs/Index.spec.ts
+++ b/web/src/plugins/logs/Index.spec.ts
@@ -639,6 +639,8 @@ describe("Logs Index", async () => {
   });
 
   it("Should execute runQueryFn and show job scheduler", async () => {
+    // runQueryFn guards against empty selectedStream, so a stream must be present.
+    wrapper.vm.searchObj.data.stream.selectedStream = ["stream1"];
     // do not rely on spying internal closures; assert state change
     await wrapper.vm.runQueryFn();
     expect(wrapper.vm.showJobScheduler).toBe(true);
diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue
index cd55b6d44d..88794afaca 100644
--- a/web/src/plugins/logs/Index.vue
+++ b/web/src/plugins/logs/Index.vue
@@ -980,6 +980,7 @@ export default defineComponent({
     const runQueryFn = async () => {
       // searchObj.data.resultGrid.currentPage = 0;
       // searchObj.runQuery = false;
+      if (!searchObj.data.stream.selectedStream.length) return;
       try {
         searchObj.loading = true;
         searchObj.meta.refreshHistogram = true;
@@ -2252,6 +2253,7 @@ export default defineComponent({
         store.state.zoConfig?.auto_query_enabled &&
         store.state.zoConfig?.query_on_stream_selection !== false &&
         searchObj.meta.logsVisualizeToggle === "logs" &&
+        searchObj.data.stream.selectedStream.length > 0 &&
         !searchObj.loading &&
         !searchObj.loadingHistogram
       ) {
diff --git a/web/src/plugins/logs/filterUtils.ts b/web/src/plugins/logs/filterUtils.ts
index 63c3dc4bfc..913a648f65 100644
--- a/web/src/plugins/logs/filterUtils.ts
+++ b/web/src/plugins/logs/filterUtils.ts
@@ -63,8 +63,9 @@ export const removeFieldCondition = (
   fieldName: string,
 ): string => {
   const esc = fieldName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const fieldPattern = new RegExp(`^"?${esc}"?\\s*[=!<>]`, "i");
-  const multiPattern = new RegExp(`^\\(\\s*"?${esc}"?\\s*[=!<>]`, "i");
+  // Match both comparison operators (=, !=, <, >) and IS / IS NOT (for null checks)
+  const fieldPattern = new RegExp(`^"?${esc}"?\\s*(?:[=!<>]|is\\s)`, "i");
+  const multiPattern = new RegExp(`^\\(\\s*"?${esc}"?\\s*(?:[=!<>]|is\\s)`, "i");
 
   const remaining = queryStr
     .trim()