From 9dcbf2a356e0b4f807976cc665ce0b193487b562 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 15 Aug 2026 15:39:46 +0800
Subject: [PATCH] fix(grid): initialize filter state before preview watcher

---
 apps/desktop/src/components/grid/DataGrid.vue    |  8 ++++----
 .../DataGridInitializationOrder.spec.ts          | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 apps/desktop/src/components/grid/__tests__/DataGridInitializationOrder.spec.ts

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 5b684c6da0..efd82ab752 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -521,6 +521,10 @@ const columnTypeMap = computed(() => {
 });
 const resolvedConnectionConfig = computed(() => connectionStore.getConfig(props.connectionId ?? ""));
 const resolvedDatabaseType = computed(() => props.databaseType ?? effectiveDatabaseTypeForConnection(resolvedConnectionConfig.value));
+const isResultsContext = computed(() => props.context === "results");
+const canShowWhereSearch = computed(() => !!props.onExecuteSql && !isResultsContext.value && resolvedDatabaseType.value !== "victoriametrics");
+const canUseWhereSearch = computed(() => !!props.tableMeta && canShowWhereSearch.value);
+const canUseServerColumnFilter = computed(() => canUseWhereSearch.value && !!props.connectionId && !!props.tableMeta);
 const tableStructureCapabilities = computed(() => getTableStructureCapabilities(resolvedDatabaseType.value, resolvedConnectionConfig.value?.db_type));
 
 const columnCommentMap = computed(() => {
@@ -2780,7 +2784,6 @@ const manualTotalRowCount = ref<number | undefined>(undefined);
 const manualTotalRowCountLoading = ref(false);
 const showTruncationWarning = computed(() => props.result.truncated === true && typeof props.pageLimit !== "number" && props.result.has_more !== true);
 const truncationHintKey = computed(() => dataGridTruncationHintKey(resolvedDatabaseType.value));
-const isResultsContext = computed(() => props.context === "results");
 // affected_rows reported by the backend can be larger than the rows we
 // actually have in memory — e.g. ES auto-pages SELECT * on a big index and
 // reports the index's true match count. Surface that in the status bar so
@@ -2916,9 +2919,6 @@ watch(
 const showQueryEditReadOnlyBadge = computed(() => isResultsContext.value && hasData.value && !props.editable && !!props.queryEditabilityReason);
 const queryEditReadOnlyReason = computed(() => (props.queryEditabilityReason ? t(`grid.queryEditUnsupported.${props.queryEditabilityReason}`) : ""));
 const showKeylessEditWarning = computed(() => !!props.editable && !!props.tableMeta && canUseKeylessRowPredicate(props.databaseType, props.tableMeta.primaryKeys ?? []));
-const canShowWhereSearch = computed(() => !!props.onExecuteSql && !isResultsContext.value && resolvedDatabaseType.value !== "victoriametrics");
-const canUseWhereSearch = computed(() => !!props.tableMeta && canShowWhereSearch.value);
-const canUseServerColumnFilter = computed(() => canUseWhereSearch.value && !!props.connectionId && !!props.tableMeta);
 type DataGridTableMeta = NonNullable<typeof props.tableMeta>;
 const hiveTableTransactional = ref<boolean | undefined>(undefined);
 const resultSourceColumns = computed(() => props.result.columns.map((column, index) => props.sourceColumns?.[index] ?? column));
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridInitializationOrder.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridInitializationOrder.spec.ts
new file mode 100644
index 0000000000..cdb31cbb75
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/DataGridInitializationOrder.spec.ts
@@ -0,0 +1,16 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dataGridSource = readFileSync(new URL("../DataGrid.vue", import.meta.url), "utf8");
+
+describe("DataGrid setup initialization order", () => {
+  it("initializes where-search capability before the immediate filter preview watcher", () => {
+    const canUseWhereSearchDeclaration = dataGridSource.indexOf("const canUseWhereSearch = computed");
+    const filterPreviewDeclaration = dataGridSource.indexOf("const filterPreviewVisible = computed");
+    const filterPreviewWatcher = dataGridSource.indexOf("[filterPreviewVisible, structuredFilterRules]");
+
+    expect(canUseWhereSearchDeclaration).toBeGreaterThanOrEqual(0);
+    expect(filterPreviewDeclaration).toBeGreaterThan(canUseWhereSearchDeclaration);
+    expect(filterPreviewWatcher).toBeGreaterThan(filterPreviewDeclaration);
+  });
+});