refactor: cleanup and remove unnecessary exports

src/components/gui/query-explain.tsx → src/components/gui/query-explanation.tsx

@@ -2,19 +2,19 @@ import { DatabaseResultSet } from "@/drivers/base-driver";
 import { useMemo } from "react";
 import { z } from "zod";
 
-export interface QueryExplanationProps {
+interface QueryExplanationProps {
   data: DatabaseResultSet;
 }
 
-export interface ExplainRow {
+interface ExplanationRow {
   id: number;
   parent: number;
   notused: number;
   detail: string;
 }
 
-export type ExplainRowWithChildren = ExplainRow & {
-  children?: ExplainRowWithChildren[];
+type ExplanationRowWithChildren = ExplanationRow & {
+  children: ExplanationRowWithChildren[];
 };
 
 const queryExplanationRowSchema = z.object({
@@ -28,9 +28,9 @@ export function isExplainQueryPlan(sql: string) {
   return sql.toLowerCase().startsWith("explain query plan");
 }
 
-function buildQueryExplanationTree(nodes: ExplainRow[]) {
-  const map: Record<number, ExplainRow & { children: ExplainRow[] }> = {};
-  const tree: ExplainRowWithChildren[] = [];
+function buildQueryExplanationTree(nodes: ExplanationRow[]) {
+  const map: Record<number, ExplanationRowWithChildren> = {};
+  const tree: ExplanationRowWithChildren[] = [];
 
   nodes.forEach((node) => {
     map[node.id] = { ...node, children: [] };
@@ -63,16 +63,6 @@ export function QueryExplanation(props: QueryExplanationProps) {
     };
   }, [props.data]);
 
-  const treeDom = useMemo(() => {
-    if (tree._tag === "ERROR") return null;
-
-    return tree.value.map((node) => (
-      <li key={`query-explanation-p-${node.parent}-${node.id}`}>
-        <RenderQueryExplanationItem item={node} />
-      </li>
-    ));
-  }, [tree]);
-
   if (tree._tag === "ERROR") {
     // The row structure doesn't match the explanation structure
     return (
@@ -86,26 +76,34 @@ export function QueryExplanation(props: QueryExplanationProps) {
 
   return (
     <div className="p-5 font-mono h-full overflow-y-auto">
-      <ul>{treeDom}</ul>
+      <ul>
+        {tree.value.map((node) => (
+          <li key={`query-explanation-p-${node.parent}-${node.id}`}>
+            <RenderQueryExplanationItem item={node} />
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
 
-function RenderQueryExplanationItem(props: { item: ExplainRowWithChildren }) {
+function RenderQueryExplanationItem(props: {
+  item: ExplanationRowWithChildren;
+}) {
   return (
     <div key={props.item.id} className="[--circle-width:16px]">
       <div className="py-1 flex items-center gap-x-4">
         <span className="size-[--circle-width] bg-gray-200 rounded-full" />
         <p className="py-1.5">{props.item.detail}</p>
       </div>
 
-      {props.item.children && (
+      {props.item.children.length > 0 && (
         <ul className="ml-7">
           {props.item.children.map((child) => {
             return (
               <li
                 className="relative"
-                key={`query-explanation-p-${child.parent}- ${child.id}`}
+                key={`query-explanation-p-${child.parent}-${child.id}`}
               >
                 <span className="absolute left-[calc(var(--circle-width)/2)] -translate-x-1/2 z-[-1] h-full border-l-2 border-gray-200" />
                 <RenderQueryExplanationItem key={child.id} item={child} />

src/components/gui/query-result.tsx

@@ -5,7 +5,7 @@ import ResultTable from "./query-result-table";
 import ResultStats from "./result-stat";
 import { useMemo } from "react";
 import OptimizeTableState from "./table-optimized/OptimizeTableState";
-import { QueryExplanation, isExplainQueryPlan } from "./query-explain";
+import { QueryExplanation, isExplainQueryPlan } from "./query-explanation";
 
 export default function QueryResult({
   result,