Implement features 3 and 4 using Cursor

src/components/EditorHeader/ControlPanel.jsx

@@ -85,6 +85,7 @@ import { getTableHeight } from "../../utils/utils";
 import { deleteFromCache, STORAGE_KEY } from "../../utils/cache";
 import { useLiveQuery } from "dexie-react-hooks";
 import { DateTime } from "luxon";
+import { arrangeTables } from "../../utils/arrangeTables";
 
 export default function ControlPanel({ title, setTitle, lastSaved }) {
   const { id: diagramId } = useParams();
@@ -510,6 +511,53 @@ export default function ControlPanel({ title, setTitle, lastSaved }) {
   };
   const resetView = () =>
     setTransform((prev) => ({ ...prev, zoom: 1, pan: { x: 0, y: 0 } }));
+  const autoArrange = () => {
+    if (layout.readOnly || tables.length === 0) return;
+
+    const diagram = {
+      tables: tables.map((t) => ({ ...t })),
+      relationships: relationships.map((r) => ({ ...r })),
+    };
+
+    arrangeTables(diagram, { tableWidth: settings.tableWidth });
+
+    const movedElements = [];
+    const nextTables = tables.map((table) => {
+      const updated = diagram.tables.find((t) => t.id === table.id);
+      if (!updated) return table;
+
+      if (updated.x === table.x && updated.y === table.y) {
+        return table;
+      }
+
+      movedElements.push({
+        id: table.id,
+        type: ObjectType.TABLE,
+        undo: { x: table.x, y: table.y },
+        redo: { x: updated.x, y: updated.y },
+      });
+
+      return { ...table, x: updated.x, y: updated.y };
+    });
+
+    if (movedElements.length === 0) {
+      Toast.info(t("no_changes_to_record"));
+      return;
+    }
+
+    setTables(nextTables);
+    setUndoStack((prev) => [
+      ...prev,
+      {
+        action: Action.MOVE,
+        bulk: true,
+        message: t("auto_arrange"),
+        elements: movedElements,
+      },
+    ]);
+    setRedoStack([]);
+    setSaveState(State.SAVING);
+  };
   const fitWindow = () => {
     const canvas = document.getElementById("canvas").getBoundingClientRect();
 
@@ -1686,6 +1734,15 @@ export default function ControlPanel({ title, setTitle, lastSaved }) {
               <i className="fa-solid fa-magnifying-glass-plus" />
             </button>
           </Tooltip>
+          <Tooltip content={t("auto_arrange")} position="bottom">
+            <button
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
+              onClick={autoArrange}
+              disabled={layout.readOnly || tables.length === 0}
+            >
+              <i className="fa-solid fa-wand-magic-sparkles" />
+            </button>
+          </Tooltip>
           <Divider layout="vertical" margin="8px" />
           <Tooltip content={t("undo")} position="bottom">
             <button

src/components/StatsBox.jsx

@@ -0,0 +1,117 @@
+import { useMemo } from "react";
+import { useDiagram } from "../hooks";
+import { useTranslation } from "react-i18next";
+
+function computeGraphStats(tables, relationships) {
+  const numTables = tables.length;
+  const numRelationships = relationships.length;
+
+  if (numTables === 0) {
+    return {
+      numTables: 0,
+      numRelationships: 0,
+      maxDepth: 0,
+      isolatedTables: 0,
+      avgDegree: 0,
+    };
+  }
+
+  const idSet = new Set(tables.map((t) => t.id));
+  const adjacency = new Map();
+
+  idSet.forEach((id) => {
+    adjacency.set(id, new Set());
+  });
+
+  relationships.forEach((r) => {
+    const start = r.startTableId;
+    const end = r.endTableId;
+    if (!idSet.has(start) || !idSet.has(end) || start === end) return;
+    adjacency.get(start).add(end);
+    adjacency.get(end).add(start);
+  });
+
+  let isolatedTables = 0;
+  adjacency.forEach((neighbors) => {
+    if (neighbors.size === 0) isolatedTables += 1;
+  });
+
+  let maxDepth = 0;
+  const ids = Array.from(idSet);
+
+  // Compute graph "depth" as the maximum shortest-path distance between
+  // any two connected tables in the (undirected) relationship graph.
+  for (const sourceId of ids) {
+    const visited = new Set([sourceId]);
+    const queue = [[sourceId, 0]];
+
+    while (queue.length) {
+      const [current, dist] = queue.shift();
+      if (dist > maxDepth) {
+        maxDepth = dist;
+      }
+      const neighbors = adjacency.get(current);
+      if (!neighbors) continue;
+      neighbors.forEach((n) => {
+        if (!visited.has(n)) {
+          visited.add(n);
+          queue.push([n, dist + 1]);
+        }
+      });
+    }
+  }
+
+  const avgDegree =
+    numTables === 0 ? 0 : (numRelationships * 2) / numTables || 0;
+
+  return {
+    numTables,
+    numRelationships,
+    maxDepth,
+    isolatedTables,
+    avgDegree,
+  };
+}
+
+export default function StatsBox() {
+  const { tables, relationships } = useDiagram();
+  const { t } = useTranslation();
+
+  const stats = useMemo(
+    () => computeGraphStats(tables ?? [], relationships ?? []),
+    [tables, relationships],
+  );
+
+  if (!stats.numTables && !stats.numRelationships) return null;
+
+  return (
+    <div className="absolute left-4 bottom-4 z-10">
+      <div className="px-3 py-2 rounded-md shadow-md border border-zinc-600 bg-zinc-900/80 text-xs sm:text-sm text-zinc-100 backdrop-blur-sm space-y-1">
+        <div className="font-semibold text-[0.7rem] tracking-wide uppercase">
+          {t("stats")}
+        </div>
+        <div className="flex flex-wrap gap-x-4 gap-y-0.5">
+          <div>
+            <span className="font-medium">{t("tables")}:</span>{" "}
+            <span>{stats.numTables}</span>
+          </div>
+          <div>
+            <span className="font-medium">{t("relationships")}:</span>{" "}
+            <span>{stats.numRelationships}</span>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-x-4 gap-y-0.5">
+          <div>
+            <span className="font-medium">{t("max_depth")}:</span>{" "}
+            <span>{stats.maxDepth}</span>
+          </div>
+          <div>
+            <span className="font-medium">{t("isolated_tables")}:</span>{" "}
+            <span>{stats.isolatedTables}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/components/Workspace.jsx

@@ -18,6 +18,7 @@ import {
   useEnums,
 } from "../hooks";
 import FloatingControls from "./FloatingControls";
+import StatsBox from "./StatsBox";
 import { Button, Modal, Tag } from "@douyinfe/semi-ui";
 import { IconAlertTriangle } from "@douyinfe/semi-icons";
 import { useTranslation } from "react-i18next";
@@ -491,6 +492,7 @@ export default function WorkSpace() {
           <CanvasContextProvider className="h-full w-full">
             <Canvas saveState={saveState} setSaveState={setSaveState} />
           </CanvasContextProvider>
+          <StatsBox />
           {version && (
             <div className="absolute right-8 top-2 space-x-2">
               <Button

src/i18n/locales/en.js

@@ -91,6 +91,10 @@ const en = {
     failed_to_save: "Failed to save",
     fit_window_reset: "Fit window / Reset",
     zoom: "Zoom",
+    auto_arrange: "Auto arrange",
+    stats: "Stats",
+    max_depth: "Max depth",
+    isolated_tables: "Isolated tables",
     add_table: "Add table",
     add_area: "Add area",
     add_note: "Add note",