feat: header size based on the content of the result (#3)

* feat: header size based on the content of the result * fixing sonarqube complain
outerbase · Feb 8, 2024 · dc76dbb · dc76dbb
1 parent 2eababf
commit dc76dbb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/src/app/(components)/OptimizeTable/OptimizeTableState.tsx b/src/app/(components)/OptimizeTable/OptimizeTableState.tsx
@@ -1,5 +1,5 @@
 import { selectArrayFromIndexList } from "@/lib/export-helper";
-import { OptimizeTableHeaderProps } from ".";
+import { OptimizeTableHeaderProps, TableColumnDataType } from ".";
 import * as hrana from "@libsql/hrana-client";
 import { DatabaseTableSchema } from "@/drivers/DatabaseDriver";
 import { LucideKey } from "lucide-react";
@@ -33,11 +33,31 @@ export default class OptimizeTableState {
   ) {
     return new OptimizeTableState(
       dataResult.columnNames.map((headerName, idx) => {
+        let initialSize = 150;
+        const dataType = convertSqliteType(dataResult.columnDecltypes[idx]);
+
+        if (
+          dataType === TableColumnDataType.INTEGER ||
+          dataType === TableColumnDataType.REAL
+        ) {
+          initialSize = 100;
+        } else if (dataType === TableColumnDataType.TEXT) {
+          // Use 100 first rows to determine the good initial size
+          let maxSize = 0;
+          for (let i = 0; i < Math.min(dataResult.rows.length, 100); i++) {
+            maxSize = Math.max(
+              (dataResult.rows[i][headerName ?? ""]?.toString() ?? "").length
+            );
+          }
+
+          initialSize = Math.max(150, Math.min(500, maxSize * 8));
+        }
+
         return {
-          initialSize: 150,
+          initialSize,
           name: headerName ?? "",
           resizable: true,
-          dataType: convertSqliteType(dataResult.columnDecltypes[idx]),
+          dataType,
           icon: schemaResult?.pk.includes(headerName ?? "") ? (
             <LucideKey className="w-4 h-4 text-red-500" />
           ) : undefined,

diff --git a/src/app/(components)/OptimizeTable/TableHeaderResizeHandler.tsx b/src/app/(components)/OptimizeTable/TableHeaderResizeHandler.tsx
@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect } from 'react';
-import styles from './styles.module.css';
+import { useRef, useState, useEffect } from "react";
+import styles from "./styles.module.css";
 
 export default function TableHeaderResizeHandler({
   idx,
@@ -62,9 +62,9 @@ export default function TableHeaderResizeHandler({
             onResize(idx, width);
 
             if (table) {
-              const columns = table.style.gridTemplateColumns.split(' ');
-              columns[idx] = width + 'px';
-              table.style.gridTemplateColumns = columns.join(' ');
+              const columns = table.style.gridTemplateColumns.split(" ");
+              columns[idx] = width + "px";
+              table.style.gridTemplateColumns = columns.join(" ");
             }
 
             if (edgeResizing) {
@@ -76,12 +76,12 @@ export default function TableHeaderResizeHandler({
           setResizing(false);
         };
 
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
 
         return () => {
-          document.removeEventListener('mousemove', onMouseMove);
-          document.removeEventListener('mouseup', onMouseUp);
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
         };
       }
     }