From c8ebe3b92c171d501aaaf5eecfb396609879fbad Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Sat, 14 Dec 2024 09:55:36 +0700
Subject: [PATCH] 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 <invisal@gmail.com>
---
 package-lock.json                             | 95 +++++++++++++++++++
 package.json                                  |  1 +
 .../gui/export/export-result-button.tsx       |  3 +
 src/components/gui/sortable-tab.tsx           |  2 +-
 src/components/gui/tabs/query-tab.tsx         | 38 +++++++-
 src/components/lib/export-helper.ts           | 29 +++++-
 6 files changed, 165 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5f1d7c0..c84f2ada 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,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": {
@@ -7430,6 +7431,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -8157,6 +8166,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -8626,6 +8647,14 @@
         "@lezer/lr": "^1.3.10"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collapse-white-space": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
@@ -8729,6 +8758,17 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -10933,6 +10973,14 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -19077,6 +19125,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stack-utils": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -21461,6 +21520,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -21547,6 +21622,26 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/package.json b/package.json
index aecdad0b..1961708f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/gui/export/export-result-button.tsx b/src/components/gui/export/export-result-button.tsx
index f234c29a..1e3111ef 100644
--- a/src/components/gui/export/export-result-button.tsx
+++ b/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>
diff --git a/src/components/gui/sortable-tab.tsx b/src/components/gui/sortable-tab.tsx
index ef793428..9031caac 100644
--- a/src/components/gui/sortable-tab.tsx
+++ b/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"
diff --git a/src/components/gui/tabs/query-tab.tsx b/src/components/gui/tabs/query-tab.tsx
index b44929b5..5865cd01 100644
--- a/src/components/gui/tabs/query-tab.tsx
+++ b/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;
+  }
+}
diff --git a/src/components/lib/export-helper.ts b/src/components/lib/export-helper.ts
index 112b4264..06283ab3 100644
--- a/src/components/lib/export-helper.ts
+++ b/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),
   };
 }