Improve query result tab (#202)

* feat: always show query result footer

* feat:
- show rows and columns count
- show table name as tab result name if the query is from one table

* refactor: change rows and columns count

* feat: export query result as xlsx format

* refactor: put getSingleTableName in try

* lazy loading the xlsx library

---------

Co-authored-by: Visal .In <[email protected]>

package.json

@@ -100,6 +100,7 @@
     "sql-formatter": "^15.3.2",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "xlsx": "^0.18.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/components/gui/export/export-result-button.tsx

@@ -36,6 +36,8 @@ export default function ExportResultButton({
       content = handler();
     }
 
+    if (!content) return;
+
     const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -63,6 +65,7 @@ export default function ExportResultButton({
               <SelectItem value="csv">CSV</SelectItem>
               <SelectItem value="json">JSON</SelectItem>
               <SelectItem value="sql">SQL</SelectItem>
+              <SelectItem value="xlsx">EXCEL</SelectItem>
             </SelectContent>
           </Select>
         </div>

src/components/gui/sortable-tab.tsx

@@ -41,7 +41,7 @@ export const WindowTabItemButton = forwardRef<
   return (
     <button
       className={cn(
-        "relative h-[40px] border-x text-neutral-500 flex items-center text-left text-xs px-2 w-[170px] hover:dark:text-white hover:text-black",
+        "relative h-[40px] border-x text-neutral-500 flex items-center text-left text-xs px-2 min-w-[170px] max-w-[300px] hover:dark:text-white hover:text-black",
         isDragging && "z-20",
         selected
           ? "bg-neutral-50 dark:bg-neutral-950 text-primary"

src/components/gui/tabs/query-tab.tsx

@@ -196,7 +196,9 @@ export default function QueryWindow({
             ),
             key: "query_" + queryResult.order,
             identifier: "query_" + queryResult.order,
-            title: "Query " + (queryIdx + 1),
+            title:
+              `${getSingleTableName(queryResult.sql) ?? "Query " + (queryIdx + 1)}` +
+              ` (${queryResult.result.rows.length}x${queryResult.result.headers.length})`,
             icon: LucideGrid,
           })),
           ...(progress
@@ -357,3 +359,37 @@ export default function QueryWindow({
     </ResizablePanelGroup>
   );
 }
+
+function getSingleTableName(query: string): string | null {
+  try {
+    // Normalize query by removing extra spaces and converting to lowercase
+    const normalizedQuery = query.replace(/\s+/g, " ").trim().toLowerCase();
+
+    // Match the table names after "from" keyword
+    const fromMatch = normalizedQuery.match(/from\s+([^\s,;]+)/i);
+    const joinMatches = normalizedQuery.match(/join\s+([^\s,;]+)/gi);
+
+    // If there are JOINs, more than one table is referenced
+    if (joinMatches && joinMatches.length > 0) {
+      return null;
+    }
+
+    // Check if a single table is present
+    if (fromMatch) {
+      const tableName = fromMatch[1];
+
+      // Ensure no additional tables are mentioned
+      const additionalTablesMatch = normalizedQuery.match(/,\s*[^\s,;]+/);
+      if (additionalTablesMatch) {
+        return null;
+      }
+
+      return tableName;
+    }
+
+    // No table found
+    return null;
+  } catch (e) {
+    return null;
+  }
+}

src/components/lib/export-helper.ts

@@ -35,7 +35,8 @@ export function exportRowsToSqlInsert(
 function cellToExcelValue(value: unknown) {
   if (value === undefined) return "";
   if (value === null) return "NULL";
-  return value.toString();
+  const parsed = Number(value);
+  return isNaN(parsed) ? value : parsed;
 }
 
 export function exportRowsToExcel(records: unknown[][]) {
@@ -49,6 +50,31 @@ export function exportRowsToExcel(records: unknown[][]) {
   return result.join("\r\n");
 }
 
+export function exportToExcel(
+  records: unknown[][],
+  headers: string[],
+  tablename: string
+) {
+  const processedData = records.map((row) =>
+    row.map((cell) => {
+      return cellToExcelValue(cell);
+    })
+  );
+
+  const data = [headers, ...processedData];
+  console.log(data);
+
+  import("xlsx").then((module) => {
+    const XLSX = module;
+    const workbook = XLSX.utils.book_new();
+    const worksheet = XLSX.utils.aoa_to_sheet(data);
+    XLSX.utils.book_append_sheet(workbook, worksheet, "sheet1");
+    XLSX.writeFile(workbook, `${tablename}.xlsx`);
+  });
+
+  return "";
+}
+
 export function exportRowsToJson(
   headers: string[],
   records: unknown[][]
@@ -102,5 +128,6 @@ export function getFormatHandlers(
     csv: () => exportRowsToCsv(headers, records),
     json: () => exportRowsToJson(headers, records),
     sql: () => exportRowsToSqlInsert(tableName, headers, records),
+    xlsx: () => exportToExcel(records, headers, tableName),
   };
 }