@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-query-explain/index.tsx

@@ -0,0 +1,657 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Search,
+  ChevronDown,
+  ChevronRight,
+  AlertTriangle,
+  Zap,
+  Database,
+  Table2,
+  Filter,
+  ArrowDownUp,
+  Layers,
+  Clock,
+  Copy,
+  CheckCircle2,
+  Info,
+  TrendingUp,
+  BarChart3,
+} from "lucide-react"
+
+export type NodeType =
+  | "Seq Scan"
+  | "Index Scan"
+  | "Index Only Scan"
+  | "Bitmap Heap Scan"
+  | "Bitmap Index Scan"
+  | "Nested Loop"
+  | "Hash Join"
+  | "Merge Join"
+  | "Sort"
+  | "Aggregate"
+  | "Group"
+  | "Limit"
+  | "Hash"
+  | "Materialize"
+  | "Subquery Scan"
+  | "CTE Scan"
+  | "Result"
+  | "Append"
+  | "Unique"
+  | "WindowAgg"
+  | "Gather"
+  | "Gather Merge"
+
+export interface ExplainNode {
+  id: string
+  type: NodeType
+  relation?: string
+  alias?: string
+  indexName?: string
+  filter?: string
+  joinType?: string
+  sortKey?: string[]
+  startupCost: number
+  totalCost: number
+  rows: number
+  actualRows?: number
+  actualTime?: number
+  loops?: number
+  width?: number
+  children?: ExplainNode[]
+  warnings?: string[]
+  buffers?: {
+    sharedHit?: number
+    sharedRead?: number
+    sharedWritten?: number
+  }
+}
+
+export interface QueryPlan {
+  query: string
+  planningTime?: number
+  executionTime?: number
+  totalCost: number
+  rootNode: ExplainNode
+}
+
+export interface WakaQueryExplainProps {
+  /** Query plan to display */
+  plan: QueryPlan
+  /** Show actual vs estimated */
+  showActual?: boolean
+  /** Show buffers info */
+  showBuffers?: boolean
+  /** Callback when node is clicked */
+  onNodeClick?: (node: ExplainNode) => void
+  /** Title */
+  title?: string
+  /** Custom class name */
+  className?: string
+}
+
+const nodeTypeConfig: Record<NodeType, { icon: React.ElementType; color: string; description: string }> = {
+  "Seq Scan": { icon: Table2, color: "text-red-500", description: "Sequential scan (full table scan)" },
+  "Index Scan": { icon: Search, color: "text-green-500", description: "Index scan" },
+  "Index Only Scan": { icon: Search, color: "text-green-600", description: "Index only scan (no heap access)" },
+  "Bitmap Heap Scan": { icon: Table2, color: "text-yellow-500", description: "Bitmap heap scan" },
+  "Bitmap Index Scan": { icon: Search, color: "text-yellow-600", description: "Bitmap index scan" },
+  "Nested Loop": { icon: Layers, color: "text-blue-500", description: "Nested loop join" },
+  "Hash Join": { icon: Layers, color: "text-purple-500", description: "Hash join" },
+  "Merge Join": { icon: Layers, color: "text-indigo-500", description: "Merge join" },
+  "Sort": { icon: ArrowDownUp, color: "text-orange-500", description: "Sort operation" },
+  "Aggregate": { icon: BarChart3, color: "text-cyan-500", description: "Aggregate operation" },
+  "Group": { icon: BarChart3, color: "text-cyan-600", description: "Group operation" },
+  "Limit": { icon: Filter, color: "text-gray-500", description: "Limit rows" },
+  "Hash": { icon: Database, color: "text-purple-400", description: "Hash for join" },
+  "Materialize": { icon: Database, color: "text-gray-400", description: "Materialize subquery" },
+  "Subquery Scan": { icon: Search, color: "text-gray-500", description: "Subquery scan" },
+  "CTE Scan": { icon: Search, color: "text-blue-400", description: "CTE (Common Table Expression) scan" },
+  "Result": { icon: Database, color: "text-gray-400", description: "Result node" },
+  "Append": { icon: Layers, color: "text-gray-500", description: "Append results" },
+  "Unique": { icon: Filter, color: "text-gray-500", description: "Remove duplicates" },
+  "WindowAgg": { icon: BarChart3, color: "text-cyan-400", description: "Window function" },
+  "Gather": { icon: Layers, color: "text-green-400", description: "Parallel gather" },
+  "Gather Merge": { icon: Layers, color: "text-green-500", description: "Parallel gather merge" },
+}
+
+function formatCost(cost: number): string {
+  if (cost < 1000) return cost.toFixed(2)
+  if (cost < 1000000) return `${(cost / 1000).toFixed(1)}k`
+  return `${(cost / 1000000).toFixed(1)}M`
+}
+
+function formatRows(rows: number): string {
+  if (rows < 1000) return rows.toString()
+  if (rows < 1000000) return `${(rows / 1000).toFixed(1)}k`
+  return `${(rows / 1000000).toFixed(1)}M`
+}
+
+function formatTime(ms: number): string {
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`
+  if (ms < 1000) return `${ms.toFixed(2)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function getCostBarWidth(cost: number, maxCost: number): number {
+  return Math.max(5, (cost / maxCost) * 100)
+}
+
+function ExplainNodeRow({
+  node,
+  depth,
+  maxCost,
+  isExpanded,
+  onToggle,
+  onClick,
+  showActual,
+  showBuffers,
+}: {
+  node: ExplainNode
+  depth: number
+  maxCost: number
+  isExpanded: boolean
+  onToggle: () => void
+  onClick?: () => void
+  showActual?: boolean
+  showBuffers?: boolean
+}) {
+  const hasChildren = node.children && node.children.length > 0
+  const config = nodeTypeConfig[node.type] || { icon: Database, color: "text-gray-500", description: node.type }
+  const NodeIcon = config.icon
+  const costWidth = getCostBarWidth(node.totalCost, maxCost)
+
+  const rowEstimateDiff = node.actualRows !== undefined
+    ? ((node.actualRows - node.rows) / Math.max(node.rows, 1)) * 100
+    : 0
+
+  return (
+    <div
+      className={cn(
+        "border-b last:border-b-0 hover:bg-muted/30 transition-colors",
+        node.warnings && node.warnings.length > 0 && "bg-yellow-500/5"
+      )}
+    >
+      <div
+        className="flex items-center gap-2 p-2 cursor-pointer"
+        style={{ paddingLeft: `${depth * 20 + 8}px` }}
+        onClick={onClick}
+      >
+        {/* Expand button */}
+        <button
+          className="w-5 h-5 flex items-center justify-center text-muted-foreground shrink-0"
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggle()
+          }}
+          disabled={!hasChildren}
+        >
+          {hasChildren ? (
+            isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )
+          ) : (
+            <span className="w-4" />
+          )}
+        </button>
+
+        {/* Node type icon */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <NodeIcon className={cn("h-4 w-4 shrink-0", config.color)} />
+            </TooltipTrigger>
+            <TooltipContent>{config.description}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        {/* Node info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-medium text-sm">{node.type}</span>
+            {node.relation && (
+              <Badge variant="outline" className="text-xs">
+                {node.alias ? `${node.relation} as ${node.alias}` : node.relation}
+              </Badge>
+            )}
+            {node.indexName && (
+              <Badge variant="secondary" className="text-xs text-green-600">
+                {node.indexName}
+              </Badge>
+            )}
+            {node.joinType && (
+              <Badge variant="outline" className="text-xs">
+                {node.joinType}
+              </Badge>
+            )}
+            {node.warnings?.map((warning, i) => (
+              <TooltipProvider key={i}>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <AlertTriangle className="h-4 w-4 text-yellow-500" />
+                  </TooltipTrigger>
+                  <TooltipContent>{warning}</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ))}
+          </div>
+
+          {node.filter && (
+            <div className="text-xs text-muted-foreground mt-0.5 font-mono truncate">
+              Filter: {node.filter}
+            </div>
+          )}
+
+          {node.sortKey && node.sortKey.length > 0 && (
+            <div className="text-xs text-muted-foreground mt-0.5 font-mono truncate">
+              Sort: {node.sortKey.join(", ")}
+            </div>
+          )}
+        </div>
+
+        {/* Cost bar */}
+        <div className="w-24 shrink-0">
+          <div className="h-2 bg-muted rounded overflow-hidden">
+            <div
+              className={cn(
+                "h-full rounded",
+                node.type === "Seq Scan" ? "bg-red-500" : "bg-primary"
+              )}
+              style={{ width: `${costWidth}%` }}
+            />
+          </div>
+          <div className="text-xs text-muted-foreground text-center mt-0.5">
+            {formatCost(node.totalCost)}
+          </div>
+        </div>
+
+        {/* Rows */}
+        <div className="w-20 text-right shrink-0">
+          <div className="text-sm font-medium">{formatRows(node.rows)}</div>
+          {showActual && node.actualRows !== undefined && (
+            <div className={cn(
+              "text-xs",
+              Math.abs(rowEstimateDiff) > 100 ? "text-red-500" :
+              Math.abs(rowEstimateDiff) > 50 ? "text-yellow-500" :
+              "text-muted-foreground"
+            )}>
+              → {formatRows(node.actualRows)}
+            </div>
+          )}
+        </div>
+
+        {/* Time */}
+        {showActual && node.actualTime !== undefined && (
+          <div className="w-20 text-right shrink-0">
+            <div className="text-sm">{formatTime(node.actualTime)}</div>
+            {node.loops && node.loops > 1 && (
+              <div className="text-xs text-muted-foreground">
+                ×{node.loops}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Buffers */}
+        {showBuffers && node.buffers && (
+          <div className="w-24 text-right shrink-0 text-xs text-muted-foreground">
+            {node.buffers.sharedHit !== undefined && (
+              <div>Hit: {node.buffers.sharedHit}</div>
+            )}
+            {node.buffers.sharedRead !== undefined && (
+              <div className="text-yellow-500">Read: {node.buffers.sharedRead}</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ExplainTree({
+  node,
+  depth,
+  maxCost,
+  expandedIds,
+  onToggle,
+  onNodeClick,
+  showActual,
+  showBuffers,
+}: {
+  node: ExplainNode
+  depth: number
+  maxCost: number
+  expandedIds: Set<string>
+  onToggle: (id: string) => void
+  onNodeClick?: (node: ExplainNode) => void
+  showActual?: boolean
+  showBuffers?: boolean
+}) {
+  const isExpanded = expandedIds.has(node.id)
+
+  return (
+    <>
+      <ExplainNodeRow
+        node={node}
+        depth={depth}
+        maxCost={maxCost}
+        isExpanded={isExpanded}
+        onToggle={() => onToggle(node.id)}
+        onClick={() => onNodeClick?.(node)}
+        showActual={showActual}
+        showBuffers={showBuffers}
+      />
+      {isExpanded && node.children?.map((child) => (
+        <ExplainTree
+          key={child.id}
+          node={child}
+          depth={depth + 1}
+          maxCost={maxCost}
+          expandedIds={expandedIds}
+          onToggle={onToggle}
+          onNodeClick={onNodeClick}
+          showActual={showActual}
+          showBuffers={showBuffers}
+        />
+      ))}
+    </>
+  )
+}
+
+export function WakaQueryExplain({
+  plan,
+  showActual = true,
+  showBuffers = false,
+  onNodeClick,
+  title = "Query Plan",
+  className,
+}: WakaQueryExplainProps) {
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
+    // Expand all by default
+    const ids = new Set<string>()
+    const collectIds = (node: ExplainNode) => {
+      ids.add(node.id)
+      node.children?.forEach(collectIds)
+    }
+    collectIds(plan.rootNode)
+    return ids
+  })
+  const [copied, setCopied] = React.useState(false)
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const expandAll = () => {
+    const ids = new Set<string>()
+    const collectIds = (node: ExplainNode) => {
+      ids.add(node.id)
+      node.children?.forEach(collectIds)
+    }
+    collectIds(plan.rootNode)
+    setExpandedIds(ids)
+  }
+
+  const collapseAll = () => {
+    setExpandedIds(new Set())
+  }
+
+  const copyQuery = () => {
+    navigator.clipboard.writeText(plan.query)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  // Count warnings
+  const warningCount = React.useMemo(() => {
+    let count = 0
+    const countWarnings = (node: ExplainNode) => {
+      count += node.warnings?.length || 0
+      node.children?.forEach(countWarnings)
+    }
+    countWarnings(plan.rootNode)
+    return count
+  }, [plan.rootNode])
+
+  // Check for seq scans
+  const hasSeqScan = React.useMemo(() => {
+    const check = (node: ExplainNode): boolean => {
+      if (node.type === "Seq Scan") return true
+      return node.children?.some(check) || false
+    }
+    return check(plan.rootNode)
+  }, [plan.rootNode])
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <Zap className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {plan.planningTime !== undefined && (
+            <Badge variant="outline" className="text-xs">
+              <Clock className="h-3 w-3 mr-1" />
+              Plan: {formatTime(plan.planningTime)}
+            </Badge>
+          )}
+          {plan.executionTime !== undefined && (
+            <Badge variant="outline" className="text-xs">
+              <Clock className="h-3 w-3 mr-1" />
+              Exec: {formatTime(plan.executionTime)}
+            </Badge>
+          )}
+          {hasSeqScan && (
+            <Badge className="bg-red-500 text-xs">
+              <AlertTriangle className="h-3 w-3 mr-1" />
+              Seq Scan
+            </Badge>
+          )}
+          {warningCount > 0 && (
+            <Badge className="bg-yellow-500 text-xs">
+              {warningCount} warnings
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Query */}
+      <div className="p-3 border-b bg-muted/30">
+        <div className="flex items-start justify-between gap-2">
+          <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto flex-1">
+            {plan.query}
+          </pre>
+          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0" onClick={copyQuery}>
+            {copied ? (
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b">
+        <Button variant="ghost" size="sm" className="h-7" onClick={expandAll}>
+          Expand All
+        </Button>
+        <Button variant="ghost" size="sm" className="h-7" onClick={collapseAll}>
+          Collapse All
+        </Button>
+        <span className="text-xs text-muted-foreground ml-auto">
+          Total Cost: {formatCost(plan.totalCost)}
+        </span>
+      </div>
+
+      {/* Column headers */}
+      <div className="flex items-center gap-2 px-2 py-1.5 border-b bg-muted/50 text-xs font-medium text-muted-foreground">
+        <div className="flex-1 pl-7">Operation</div>
+        <div className="w-24 text-center">Cost</div>
+        <div className="w-20 text-right">Rows</div>
+        {showActual && <div className="w-20 text-right">Time</div>}
+        {showBuffers && <div className="w-24 text-right">Buffers</div>}
+      </div>
+
+      {/* Plan tree */}
+      <ScrollArea className="flex-1 max-h-[500px]">
+        <ExplainTree
+          node={plan.rootNode}
+          depth={0}
+          maxCost={plan.totalCost}
+          expandedIds={expandedIds}
+          onToggle={toggleExpand}
+          onNodeClick={onNodeClick}
+          showActual={showActual}
+          showBuffers={showBuffers}
+        />
+      </ScrollArea>
+
+      {/* Legend */}
+      <div className="p-2 border-t bg-muted/30 text-xs text-muted-foreground">
+        <div className="flex items-center gap-4 flex-wrap">
+          <span className="flex items-center gap-1">
+            <Search className="h-3 w-3 text-green-500" />
+            Index Scan (efficient)
+          </span>
+          <span className="flex items-center gap-1">
+            <Table2 className="h-3 w-3 text-red-500" />
+            Seq Scan (may need index)
+          </span>
+          <span className="flex items-center gap-1">
+            <Layers className="h-3 w-3 text-blue-500" />
+            Join
+          </span>
+          <span className="flex items-center gap-1">
+            <ArrowDownUp className="h-3 w-3 text-orange-500" />
+            Sort
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample query plan for demo
+export const defaultQueryPlan: QueryPlan = {
+  query: `SELECT u.name, COUNT(p.id) as post_count
+FROM users u
+LEFT JOIN posts p ON p.user_id = u.id
+WHERE u.created_at > '2024-01-01'
+GROUP BY u.id, u.name
+ORDER BY post_count DESC
+LIMIT 10;`,
+  planningTime: 0.125,
+  executionTime: 45.32,
+  totalCost: 1250.50,
+  rootNode: {
+    id: "1",
+    type: "Limit",
+    startupCost: 1250.50,
+    totalCost: 1250.50,
+    rows: 10,
+    actualRows: 10,
+    actualTime: 45.32,
+    children: [
+      {
+        id: "2",
+        type: "Sort",
+        startupCost: 1250.48,
+        totalCost: 1250.50,
+        rows: 100,
+        actualRows: 100,
+        actualTime: 45.28,
+        sortKey: ["post_count DESC"],
+        children: [
+          {
+            id: "3",
+            type: "Aggregate",
+            startupCost: 1150.00,
+            totalCost: 1240.00,
+            rows: 100,
+            actualRows: 100,
+            actualTime: 42.15,
+            children: [
+              {
+                id: "4",
+                type: "Hash Join",
+                joinType: "Left",
+                startupCost: 50.00,
+                totalCost: 1100.00,
+                rows: 5000,
+                actualRows: 4850,
+                actualTime: 38.50,
+                children: [
+                  {
+                    id: "5",
+                    type: "Seq Scan",
+                    relation: "users",
+                    alias: "u",
+                    filter: "created_at > '2024-01-01'",
+                    startupCost: 0,
+                    totalCost: 25.00,
+                    rows: 100,
+                    actualRows: 98,
+                    actualTime: 1.25,
+                    warnings: ["Consider adding an index on users(created_at)"],
+                  },
+                  {
+                    id: "6",
+                    type: "Hash",
+                    startupCost: 20.00,
+                    totalCost: 20.00,
+                    rows: 5000,
+                    actualRows: 5000,
+                    actualTime: 15.00,
+                    children: [
+                      {
+                        id: "7",
+                        type: "Seq Scan",
+                        relation: "posts",
+                        alias: "p",
+                        startupCost: 0,
+                        totalCost: 15.00,
+                        rows: 5000,
+                        actualRows: 5000,
+                        actualTime: 12.00,
+                        buffers: {
+                          sharedHit: 150,
+                          sharedRead: 25,
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

package/src/components/waka-quota-bar/index.tsx

@@ -53,10 +53,10 @@ export interface WakaQuotaBarProps {
 // ============================================================================
 
 const defaultColors: WakaQuotaBarColors = {
-  normal: "bg-green-500",
-  warning: "bg-yellow-500",
-  danger: "bg-red-500",
-  overflow: "bg-red-600",
+  normal: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  overflow: "bg-destructive",
 }
 
 // ============================================================================