fix(dblm-ext): tables distance fixed

Author: herzadinata

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

@@ -172,6 +172,9 @@ const Search = ({ tables }: SearchProps) => {
                 className="w-full px-4 py-2 text-left text-sm focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-600 focus:bg-gray-100 dark:focus:bg-gray-600 flex flex-col items-start"
               >
                 <div className="flex space-x-2 w-full items-start">
+                  <span className="text-xs mt-[3px]">
+                    {result.type === "table" ? "📋" : "🔤"}
+                  </span>
                   <span className="font-medium break-all text-gray-700 dark:text-gray-200">
                     {result.name}
                   </span>

packages/json-table-schema-visualizer/src/utils/tablePositioning/computeTablesPositions.ts

@@ -11,8 +11,6 @@ const computeTablesPositions = (
   tables: JSONTableTable[],
   refs: JSONTableRef[],
 ): Map<string, XYPosition> => {
-  const tablesPositions = new Map<string, XYPosition>();
-
   const graph = new dagre.graphlib.Graph();
   graph.setGraph({
     nodesep: TABLES_GAP_X * 3,
@@ -34,10 +32,36 @@ const computeTablesPositions = (
 
   dagre.layout(graph);
 
+  const rawPositions: Array<{ name: string; x: number; y: number }> = [];
+
   graph.nodes().forEach((node) => {
-    const { x, y } = graph.node(node);
-    tablesPositions.set(node, { x, y });
+    const nodeData = graph.node(node);
+    if (nodeData == null) return;
+    const width = !isNaN(nodeData.width) ? nodeData.width : 0;
+    const height = !isNaN(nodeData.height) ? nodeData.height : 0;
+    const topLeftX = nodeData.x - width / 2;
+    const topLeftY = nodeData.y - height / 2;
+    rawPositions.push({ name: node, x: topLeftX, y: topLeftY });
+  });
+
+  if (rawPositions.length === 0) {
+    return new Map<string, XYPosition>();
+  }
+
+  const minX = Math.min(...rawPositions.map((pos) => pos.x));
+  const minY = Math.min(...rawPositions.map((pos) => pos.y));
+
+  const paddingX = TABLES_GAP_X;
+  const paddingY = TABLES_GAP_Y;
+
+  const tablesPositions = new Map<string, XYPosition>();
+  rawPositions.forEach((pos) => {
+    tablesPositions.set(pos.name, {
+      x: pos.x - minX + paddingX,
+      y: pos.y - minY + paddingY,
+    });
   });
+
   return tablesPositions;
 };
 

packages/json-table-schema-visualizer/src/utils/tablePositioning/tests/computeTablesPositions.test.ts

@@ -1,58 +1,68 @@
 import computeTablesPositions from "../computeTablesPositions";
 import { getColsNumber } from "../getColsNumber";
 
-import {
-  COLUMN_HEIGHT,
-  TABLE_HEADER_HEIGHT,
-  TABLE_DEFAULT_MIN_WIDTH,
-  TABLES_GAP_X,
-  TABLES_GAP_Y,
-} from "@/constants/sizing";
+import { TABLES_GAP_Y } from "@/constants/sizing";
 import { createBookingsTableClone, exampleData } from "@/fake/fakeJsonTables";
 
 jest.mock("../getColsNumber", () => ({
   getColsNumber: jest.fn(),
 }));
 
-const TABLE_WIDTH_WITH_GAP = TABLE_DEFAULT_MIN_WIDTH + TABLES_GAP_X;
+jest.mock("../../computeTableDimension", () => ({
+  computeTableDimension: () => ({
+    width: 200,
+    height: 150,
+  }),
+}));
 
-describe("compute tables positions", () => {
-  test("less than 6 tables positions", () => {
-    (getColsNumber as jest.Mock).mockReturnValue(3);
+describe("compute tables positions (dagre)", () => {
+  test("keeps coordinates non-negative and unique per table", () => {
+    const map = computeTablesPositions(exampleData.tables, []);
 
-    const tablesPositions = computeTablesPositions([
-      ...exampleData.tables,
-      createBookingsTableClone("1"),
-    ]);
-
-    expect(tablesPositions).toEqual(
-      new Map<string, [number, number]>([
-        ["follows", [0, 0]],
-        ["users", [TABLE_WIDTH_WITH_GAP, 0]],
-        ["bookings", [TABLE_WIDTH_WITH_GAP * 2, 0]],
-        [
-          "bookings_1",
-          [0, TABLE_HEADER_HEIGHT + COLUMN_HEIGHT * 5 + TABLES_GAP_Y],
-        ],
-      ]),
-    );
+    expect(map.size).toBe(exampleData.tables.length);
+
+    const coords = Array.from(map.values());
+    coords.forEach(({ x, y }) => {
+      expect(x).toBeGreaterThanOrEqual(0);
+      expect(y).toBeGreaterThanOrEqual(0);
+    });
+
+    const uniqueKeys = new Set(coords.map(({ x, y }) => `${x}-${y}`));
+    expect(uniqueKeys.size).toBe(coords.length);
   });
 
-  test("more than 6 tables positions", () => {
-    (getColsNumber as jest.Mock).mockReturnValue(4);
-
-    const tablesPositions = computeTablesPositions([
-      ...exampleData.tables,
-      createBookingsTableClone("1"),
-    ]);
-
-    expect(tablesPositions).toEqual(
-      new Map<string, [number, number]>([
-        ["follows", [0, 0]],
-        ["users", [TABLE_WIDTH_WITH_GAP, 0]],
-        ["bookings", [TABLE_WIDTH_WITH_GAP * 2, 0]],
-        ["bookings_1", [TABLE_WIDTH_WITH_GAP * 3, 0]],
-      ]),
+  test("orders tables consistently when column count changes", () => {
+    (getColsNumber as jest.Mock).mockReturnValueOnce(3);
+    const gridThree = computeTablesPositions(
+      [...exampleData.tables, createBookingsTableClone("1")],
+      [],
+    );
+
+    (getColsNumber as jest.Mock).mockReturnValueOnce(4);
+    const gridFour = computeTablesPositions(
+      [...exampleData.tables, createBookingsTableClone("1")],
+      [],
     );
+
+    const usersThree = gridThree.get("users");
+    const bookingsThree = gridThree.get("bookings_1");
+    expect(usersThree?.x ?? 0).toBeLessThanOrEqual(bookingsThree?.x ?? 0);
+
+    const usersFour = gridFour.get("users");
+    const bookingsFour = gridFour.get("bookings_1");
+    expect(usersFour?.x ?? 0).toBeLessThanOrEqual(bookingsFour?.x ?? 0);
+  });
+
+  test("vertical spacing respects TABLES_GAP_Y between rows", () => {
+    (getColsNumber as jest.Mock).mockReturnValue(3);
+
+    const positions = computeTablesPositions(exampleData.tables, []);
+    const sorted = Array.from(positions.values())
+      .sort((a, b) => a.y - b.y)
+      .map(({ y }) => y);
+
+    for (let i = 1; i < sorted.length; i++) {
+      expect(sorted[i] - sorted[i - 1]).toBeGreaterThanOrEqual(TABLES_GAP_Y);
+    }
   });
 });

packages/json-table-schema-visualizer/src/utils/tests/computeColIndexes.test.ts

@@ -1,10 +1,13 @@
 import { computeColIndexes } from "../computeColIndexes";
 
 import { exampleData } from "@/fake/fakeJsonTables";
+import { TableDetailLevel } from "@/types/tableDetailLevel";
 
 describe("compute cols index map", () => {
   test("compute cols index map", () => {
-    expect(computeColIndexes(exampleData.tables)).toEqual({
+    expect(
+      computeColIndexes(exampleData.tables, TableDetailLevel.FullDetails),
+    ).toEqual({
       "users.id": 0,
       "users.email": 1,
       "bookings.booking_date": 2,

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

@@ -4,13 +4,24 @@ import { exampleData } from "@/fake/fakeJsonTables";
 import {
   TABLE_HEADER_HEIGHT,
   TABLE_DEFAULT_MIN_WIDTH,
+  COLUMN_HEIGHT,
 } from "@/constants/sizing";
 
+jest.mock("../computeTextSize", () => ({
+  computeTextSize: jest.fn((text: string) => ({
+    width: text.length,
+    height: 10,
+  })),
+}));
+
 describe("compute table dimension", () => {
   test("compute table dimension", () => {
-    expect(computeTableDimension(exampleData.tables[0])).toEqual({
+    const table = exampleData.tables[0];
+    const expectedHeight =
+      TABLE_HEADER_HEIGHT + COLUMN_HEIGHT * table.fields.length;
+    expect(computeTableDimension(table)).toEqual({
       width: TABLE_DEFAULT_MIN_WIDTH,
-      height: TABLE_HEADER_HEIGHT * 5,
+      height: expectedHeight,
     });
   });
 });

packages/json-table-schema-visualizer/src/utils/tests/computeTextsMaxWidth.test.ts

@@ -1,10 +1,17 @@
 import { computeTextSize } from "../computeTextSize";
 import { computeTextsMaxWidth } from "../computeTextsMaxWidth";
 
+jest.mock("../computeTextSize", () => ({
+  computeTextSize: jest.fn((text: string) => ({
+    width: text.length,
+    height: 10,
+  })),
+}));
+
 describe("get the more longer text width", () => {
   test("get the more longer text width", () => {
     expect(computeTextsMaxWidth(["simple", "more longer"])).toBe(
-      computeTextSize("more longer"),
+      computeTextSize("more longer").width,
     );
   });
 });