feat(visualizer): avoid table name being truncated

Author: BOCOVO

packages/json-table-schema-visualizer/src/components/TableHeader.tsx

@@ -47,7 +47,7 @@ const TableHeader = ({ title }: TableHeaderProps) => {
         align="center"
         strokeWidth={PADDINGS.xs}
         padding={PADDINGS.xs}
-        fontSize={FONT_SIZES.lg}
+        fontSize={FONT_SIZES.tableTitle}
       />
     </Group>
   );

packages/json-table-schema-visualizer/src/constants/sizing.ts

@@ -23,6 +23,7 @@ export const TABLE_FIELD_TYPE_PADDING = PADDINGS.sm;
 export const FONT_SIZES = {
   md: 15,
   lg: 18,
+  tableTitle: 18,
 };
 
 export const FIELD_DETAILS_CARET = {

packages/json-table-schema-visualizer/src/hooks/table.ts

@@ -50,9 +50,9 @@ export const useTableDefaultPosition = (tableName: string): XYPosition => {
 };
 
 export const useGetTableMinWidth = (table: JSONTableTable): number => {
-  const tableLinesTexts = getTableLinesText(table.fields, table.name);
+  const tableLinesTexts = getTableLinesText(table.fields);
   const minWidth = useMemo(() => {
-    const minW = computeTablePreferredWidth(tableLinesTexts);
+    const minW = computeTablePreferredWidth(tableLinesTexts, table.name);
     tableWidthStore.setWidth(table.name, minW);
     return minW;
   }, [tableLinesTexts]);

packages/json-table-schema-visualizer/src/utils/computeTableDimension.ts

@@ -7,8 +7,8 @@ import { COLUMN_HEIGHT, TABLE_HEADER_HEIGHT } from "@/constants/sizing";
 import { type Dimension } from "@/types/dimension";
 
 export const computeTableDimension = (table: JSONTableTable): Dimension => {
-  const tableTexts = getTableLinesText(table.fields, table.name);
-  const width = computeTablePreferredWidth(tableTexts);
+  const tableTexts = getTableLinesText(table.fields);
+  const width = computeTablePreferredWidth(tableTexts, table.name);
   const height = TABLE_HEADER_HEIGHT + COLUMN_HEIGHT * table.fields.length;
 
   return { width, height };

packages/json-table-schema-visualizer/src/utils/tableWComputation/computeTablePreferredWidth.ts

@@ -1,12 +1,25 @@
+import { computeTextSize } from "../computeTextSize";
 import { computeTextsMaxWidth } from "../computeTextsMaxWidth";
 
 import {
+  FONT_SIZES,
   TABLE_DEFAULT_MIN_WIDTH,
   TABLE_FIELD_TYPE_PADDING,
 } from "@/constants/sizing";
 
-export const computeTablePreferredWidth = (tableTexts: string[]): number => {
-  const minW = computeTextsMaxWidth(tableTexts);
+export const computeTablePreferredWidth = (
+  tableTexts: string[],
+  tableName: string,
+): number => {
+  const minColsW = computeTextsMaxWidth(tableTexts);
+  const { width: tableNameW } = computeTextSize(tableName, {
+    fontSize: FONT_SIZES.tableTitle,
+  });
 
-  return Math.max(minW + TABLE_FIELD_TYPE_PADDING * 2, TABLE_DEFAULT_MIN_WIDTH);
+  const maxOnColsAndTableName = Math.max(minColsW, tableNameW);
+
+  return Math.max(
+    maxOnColsAndTableName + TABLE_FIELD_TYPE_PADDING * 2,
+    TABLE_DEFAULT_MIN_WIDTH,
+  );
 };

packages/json-table-schema-visualizer/src/utils/tableWComputation/getTableLinesText.ts

@@ -2,12 +2,10 @@ import { type JSONTableTable } from "shared/types/tableSchema";
 
 export const getTableLinesText = (
   fields: JSONTableTable["fields"],
-  name: string,
 ): string[] => {
   const stringColsNames = fields.map(
     (field) => `${field.name} ${field.type.type_name}`,
   );
-  const tableLinesTexts = [name, ...stringColsNames];
 
-  return tableLinesTexts;
+  return stringColsNames;
 };