From 85b6afd3c1782ed7fb8e274f04d0ca16dc92a4a7 Mon Sep 17 00:00:00 2001
From: onenewcode <lovestudy@qq.com>
Date: Fri, 24 Jul 2026 23:50:08 +0800
Subject: [PATCH] fix(explain): fix execution plan node detail overflow

---
 .../explain/ExplainPlanNodeTree.vue           | 104 ++++++++++++-----
 .../__tests__/ExplainPlanNodeTree.spec.ts     | 108 ++++++++++++++++++
 2 files changed, 185 insertions(+), 27 deletions(-)
 create mode 100644 apps/desktop/src/components/explain/__tests__/ExplainPlanNodeTree.spec.ts

diff --git a/apps/desktop/src/components/explain/ExplainPlanNodeTree.vue b/apps/desktop/src/components/explain/ExplainPlanNodeTree.vue
index b8cd76503..62e8dfb19 100644
--- a/apps/desktop/src/components/explain/ExplainPlanNodeTree.vue
+++ b/apps/desktop/src/components/explain/ExplainPlanNodeTree.vue
@@ -1,57 +1,107 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { ChevronRight, ChevronDown } from "@lucide/vue";
+import { computed, ref } from "vue";
+import { ChevronRight, ChevronDown, Info } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import type { ExplainPlanNode } from "@/lib/diagram/explainPlan";
 
 const props = defineProps<{
   node: ExplainPlanNode;
-  depth?: number;
 }>();
 
+const { t } = useI18n();
 const collapsed = ref(false);
+const hasChildren = computed(() => props.node.children.length > 0);
 
-function toggle() {
-  if (props.node.children.length > 0) {
-    collapsed.value = !collapsed.value;
-  }
+interface ExplainPlanDetailEntry {
+  label?: string;
+  value: string;
 }
 
-function actualRowsFromDetails(): string | undefined {
-  for (const d of props.node.details) {
-    const m = d.match(/Actual Rows:\s*(\S+)/);
-    if (m) return m[1];
+const detailEntries = computed<ExplainPlanDetailEntry[]>(() =>
+  props.node.details
+    .map((detail): ExplainPlanDetailEntry => {
+      const separatorIndex = detail.indexOf(":");
+      if (separatorIndex === -1) return { value: detail.trim() };
+
+      const label = detail.slice(0, separatorIndex).trim();
+      return {
+        label: label || undefined,
+        value: detail.slice(separatorIndex + 1).trim(),
+      };
+    })
+    .filter((detail) => detail.label || detail.value),
+);
+
+const detailPreviewEntries = computed(() => detailEntries.value.filter((detail) => detail.label !== "Actual Rows").slice(0, 2));
+
+function toggleCollapsed() {
+  collapsed.value = !collapsed.value;
+}
+
+const actualRows = computed(() => {
+  for (const detail of props.node.details) {
+    const match = detail.match(/Actual Rows:\s*(\S+)/);
+    if (match) return match[1];
   }
   return undefined;
-}
+});
 
-const actualRows = actualRowsFromDetails();
-const hasActualStats = !!actualRows;
-const rowDiffers = hasActualStats && actualRows !== props.node.rows;
+const hasActualStats = computed(() => !!actualRows.value);
+const rowDiffers = computed(() => hasActualStats.value && actualRows.value !== props.node.rows);
 </script>
 
 <template>
   <div>
-    <!-- Single line: collapse icon + title + badges all in one row -->
-    <div class="flex cursor-pointer items-center gap-1 rounded border bg-background px-2 py-1 text-xs hover:bg-muted/30" :class="{ 'border-green-300 dark:border-green-700': hasActualStats }" @click="toggle">
-      <ChevronRight v-if="node.children.length > 0 && collapsed" class="h-3 w-3 shrink-0 text-muted-foreground" />
-      <ChevronDown v-else-if="node.children.length > 0" class="h-3 w-3 shrink-0 text-muted-foreground" />
+    <div class="flex min-w-0 items-center gap-1 rounded border bg-background px-2 py-1 text-xs">
+      <Button v-if="hasChildren" variant="ghost" size="icon-xs" class="-ml-1 h-5 w-5 shrink-0 text-foreground/80" :aria-label="node.title" :aria-expanded="!collapsed" @click="toggleCollapsed">
+        <ChevronRight v-if="collapsed" class="h-3 w-3" aria-hidden="true" />
+        <ChevronDown v-else class="h-3 w-3" aria-hidden="true" />
+      </Button>
+      <span v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
 
       <span class="shrink-0 rounded bg-muted px-1 py-0.5 font-medium">{{ node.nodeType }}</span>
-      <span v-if="node.relation" class="shrink-0 truncate max-w-[120px] text-blue-600 dark:text-blue-400">{{ node.relation }}</span>
-      <span v-if="node.index" class="shrink-0 text-emerald-600 dark:text-emerald-400">[{{ node.index }}]</span>
-      <span v-if="node.cost" class="shrink-0 tabular-nums text-muted-foreground">c:{{ node.cost }}</span>
-      <span v-if="node.rows" class="shrink-0 tabular-nums text-amber-600 dark:text-amber-400">e:{{ node.rows }}</span>
-      <span v-if="hasActualStats" class="shrink-0 tabular-nums font-semibold" :class="rowDiffers ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'"
+      <span v-if="node.relation" class="shrink-0 truncate max-w-[120px] text-foreground">{{ node.relation }}</span>
+      <span v-if="node.index" class="shrink-0 font-medium text-foreground/80">[{{ node.index }}]</span>
+      <span v-if="node.cost" class="shrink-0 tabular-nums text-foreground/80">c:{{ node.cost }}</span>
+      <span v-if="node.rows" class="shrink-0 tabular-nums text-foreground/80">e:{{ node.rows }}</span>
+      <span v-if="hasActualStats" class="shrink-0 tabular-nums font-semibold text-foreground"
         >a:{{ actualRows }}<span v-if="rowDiffers">({{ Math.round((Number(actualRows) / Number(node.rows)) * 100) }}%)</span></span
       >
 
-      <!-- Details collapsed into tooltip on hover -->
-      <span v-if="node.details.length" class="ml-auto shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground/40" :title="node.details.join('\n')">{{ node.details.join(" ") }}</span>
+      <div v-if="detailPreviewEntries.length" class="ml-1 flex min-w-0 flex-1 items-center gap-2 text-foreground/80">
+        <span v-for="(detail, index) in detailPreviewEntries" :key="index" class="min-w-0 flex-1 truncate">
+          <span v-if="detail.label" class="font-medium text-foreground">{{ detail.label }}:</span>
+          {{ detail.value }}
+        </span>
+      </div>
+
+      <Popover v-if="detailEntries.length">
+        <PopoverTrigger as-child>
+          <Button variant="outline" size="xs" class="ml-auto h-5 shrink-0 gap-1 px-1.5 text-[11px] font-normal text-foreground/80" :aria-label="t('explain.details')">
+            <Info class="h-3 w-3" aria-hidden="true" />
+            {{ t("explain.details") }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" class="w-[min(32rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden p-0" @click.stop>
+          <div data-native-clipboard class="max-h-[min(24rem,calc(100vh-8rem))] overflow-auto p-3">
+            <div v-for="(detail, index) in detailEntries" :key="index" class="space-y-1 border-b py-2 first:pt-0 last:border-b-0 last:pb-0">
+              <div v-if="detail.label" class="text-[11px] font-medium text-popover-foreground">
+                {{ detail.label }}
+              </div>
+              <div class="select-text whitespace-pre-wrap break-words text-xs leading-5">
+                {{ detail.value }}
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
     </div>
 
     <!-- Children (collapsible) -->
     <div v-if="node.children.length && !collapsed" class="ml-3 mt-px space-y-px border-l pl-2">
-      <ExplainPlanNodeTree v-for="child in node.children" :key="child.id" :node="child" :depth="(depth || 0) + 1" />
+      <ExplainPlanNodeTree v-for="child in node.children" :key="child.id" :node="child" />
     </div>
   </div>
 </template>
diff --git a/apps/desktop/src/components/explain/__tests__/ExplainPlanNodeTree.spec.ts b/apps/desktop/src/components/explain/__tests__/ExplainPlanNodeTree.spec.ts
new file mode 100644
index 000000000..6e3b36e35
--- /dev/null
+++ b/apps/desktop/src/components/explain/__tests__/ExplainPlanNodeTree.spec.ts
@@ -0,0 +1,108 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const nodeTreeSource = readFileSync(new URL("../ExplainPlanNodeTree.vue", import.meta.url), "utf8");
+const globalStyles = readFileSync(new URL("../../../styles/globals.css", import.meta.url), "utf8");
+
+type Rgb = [number, number, number];
+
+type ThemeColors = {
+  selector: string;
+  background: Rgb;
+  foreground: Rgb;
+  popover: Rgb;
+  popoverForeground: Rgb;
+};
+
+function parseRgb(value: string): Rgb {
+  const channels = value
+    .match(/\d+(?:\.\d+)?/g)
+    ?.slice(0, 3)
+    .map(Number);
+  if (!channels || channels.length !== 3) throw new Error(`Expected an opaque RGB color, received ${value}`);
+  return [channels[0], channels[1], channels[2]];
+}
+
+function tokenColor(block: string, token: string): Rgb | undefined {
+  const value = block.match(new RegExp(`--${token}:\\s*rgb\\(([^)]+)\\)`))?.[1];
+  return value ? parseRgb(value) : undefined;
+}
+
+const themeColors: ThemeColors[] = [...globalStyles.matchAll(/(?<selector>:root|\.dark|html\.theme-[\w-]+(?:\.dark)?)\s*\{(?<block>[^{}]*)\}/g)]
+  .map((match) => {
+    const block = match.groups?.block ?? "";
+    const background = tokenColor(block, "background");
+    const foreground = tokenColor(block, "foreground");
+    const popover = tokenColor(block, "popover");
+    const popoverForeground = tokenColor(block, "popover-foreground");
+    if (!background || !foreground || !popover || !popoverForeground) return undefined;
+
+    return { selector: match.groups?.selector ?? "", background, foreground, popover, popoverForeground };
+  })
+  .filter((theme): theme is ThemeColors => !!theme);
+
+function linearRgbChannel(channel: number): number {
+  const normalized = channel / 255;
+  return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance([red, green, blue]: Rgb): number {
+  return 0.2126 * linearRgbChannel(red) + 0.7152 * linearRgbChannel(green) + 0.0722 * linearRgbChannel(blue);
+}
+
+function contrastRatio(first: Rgb, second: Rgb): number {
+  const [lighter, darker] = [luminance(first), luminance(second)].sort((left, right) => right - left);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function blend(foreground: Rgb, background: Rgb, opacity: number): Rgb {
+  return foreground.map((channel, index) => Math.round(channel * opacity + background[index] * (1 - opacity))) as Rgb;
+}
+
+describe("ExplainPlanNodeTree interactions", () => {
+  it("keeps a concise preview of the most useful details in the tree row", () => {
+    expect(nodeTreeSource).toContain('const detailPreviewEntries = computed(() => detailEntries.value.filter((detail) => detail.label !== "Actual Rows").slice(0, 2))');
+    expect(nodeTreeSource).toContain('<div v-if="detailPreviewEntries.length"');
+    expect(nodeTreeSource).toContain('v-for="(detail, index) in detailPreviewEntries"');
+    expect(nodeTreeSource).toContain('class="min-w-0 flex-1 truncate"');
+    expect(nodeTreeSource).not.toContain("text-muted-foreground/40");
+  });
+
+  it("shows long details in a click-triggered, selectable popover", () => {
+    expect(nodeTreeSource).toContain('import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"');
+    expect(nodeTreeSource).toContain('<Popover v-if="detailEntries.length">');
+    expect(nodeTreeSource).toContain("<PopoverTrigger as-child>");
+    expect(nodeTreeSource).toContain('<PopoverContent align="end"');
+    expect(nodeTreeSource).toContain('data-native-clipboard class="max-h-');
+    expect(nodeTreeSource).toContain("select-text whitespace-pre-wrap break-words");
+    expect(nodeTreeSource).not.toContain("node.details.join");
+    expect(nodeTreeSource).not.toContain("{{ detailEntries.length }}");
+    expect(nodeTreeSource.match(/\{\{ t\("explain\.details"\) \}\}/g)).toHaveLength(1);
+  });
+
+  it("keeps detail fields distinct and tree disclosure on its own button", () => {
+    expect(nodeTreeSource).toContain('const separatorIndex = detail.indexOf(":")');
+    expect(nodeTreeSource).toContain('v-if="detail.label"');
+    expect(nodeTreeSource).toContain('<Button v-if="hasChildren"');
+    expect(nodeTreeSource).toContain(':aria-expanded="!collapsed"');
+    expect(nodeTreeSource).toContain('@click="toggleCollapsed"');
+    expect(nodeTreeSource).not.toContain("cursor-pointer");
+    expect(nodeTreeSource).not.toContain('@click="toggle"');
+  });
+
+  it("uses semantic foreground tokens instead of fixed status hues", () => {
+    expect(nodeTreeSource).toContain("text-foreground/80");
+    expect(nodeTreeSource).toContain("text-popover-foreground");
+    expect(nodeTreeSource).not.toMatch(/text-(?:blue|emerald|amber|green)-/);
+    expect(nodeTreeSource).not.toMatch(/border-(?:blue|emerald|amber|green)-/);
+  });
+
+  it("keeps foreground-based tree metadata readable in every application palette", () => {
+    expect(themeColors).toHaveLength(26);
+
+    for (const theme of themeColors) {
+      expect(contrastRatio(blend(theme.foreground, theme.background, 0.8), theme.background), theme.selector).toBeGreaterThanOrEqual(4.5);
+      expect(contrastRatio(theme.popoverForeground, theme.popover), theme.selector).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+});