admin ui: fix data erd layout

app/src/ui/components/canvas/layouts/index.ts

@@ -25,12 +25,6 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
    const dagreGraph = new Dagre.graphlib.Graph();
    dagreGraph.setDefaultEdgeLabel(() => ({}));
    dagreGraph.setGraph(graph || {});
-   /*dagreGraph.setGraph({
-      rankdir: "LR",
-      align: "UR",
-      nodesep: NODE_SEP,
-      ranksep: RANK_SEP
-   });*/
 
    nodes.forEach((node) => {
       dagreGraph.setNode(node.id, {
@@ -48,7 +42,11 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
    return {
       nodes: nodes.map((node) => {
          const position = dagreGraph.node(node.id);
-         return { ...node, x: position.x, y: position.y };
+         return {
+            ...node,
+            x: position.x - (node.width ?? 0) / 2,
+            y: position.y - (node.height ?? 0) / 2
+         };
       }),
       edges
    };

app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx

@@ -69,15 +69,13 @@ export function DataSchemaCanvas() {
    const nodeLayout = layoutWithDagre({
       nodes: nodes.map((n) => ({
          id: n.id,
-         ...EntityTableNode.getSize(n)
+         ...EntityTableNode.getSize(n.data)
       })),
       edges,
       graph: {
          rankdir: "LR",
-         //align: "UR",
-         ranker: "network-simplex",
-         nodesep: 350,
-         ranksep: 50
+         marginx: 50,
+         marginy: 50
       }
    });
 
@@ -88,12 +86,6 @@ export function DataSchemaCanvas() {
       }
    });
 
-   /*const _edges = edges.map((e) => ({
-      ...e,
-      source: e.source + `-${e.target}_id`,
-      target: e.target + "-id"
-   }));*/
-
    return (
       <ReactFlowProvider>
          <Canvas