From 5cdaa03636b77a422086fde26386ed48d3e4b74c Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Wed, 30 Apr 2025 12:53:27 +0200
Subject: [PATCH] use a helper string as anode id and use data.id where it is
 required

---
 apps/app/src/lib/graph/FamilyEdge.svelte    |  6 +--
 apps/app/src/lib/graph/layout.ts            |  7 ++--
 apps/app/src/lib/graph/node_click.ts        |  1 -
 apps/app/src/lib/graph/parse_family_tree.ts |  8 ++--
 apps/app/src/routes/+page.svelte            | 43 +++++++++++++--------
 5 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/apps/app/src/lib/graph/FamilyEdge.svelte b/apps/app/src/lib/graph/FamilyEdge.svelte
index 525a82c..bcfe913 100644
--- a/apps/app/src/lib/graph/FamilyEdge.svelte
+++ b/apps/app/src/lib/graph/FamilyEdge.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { components } from '$lib/api/api.gen.ts';
 	import { child, spouse, parent, sibling } from '$lib/paraglide/messages';
-	import { getSmoothStepPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
-
+	import { getBezierPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
+	
 	let {
 		sourceX,
 		sourceY,
@@ -72,7 +72,7 @@
 	}
 
 	let  [path, labelX, labelY] = $derived(
-		getSmoothStepPath({
+		getBezierPath({
 			sourceX,
 			sourceY,
 			sourcePosition: srcPos,
diff --git a/apps/app/src/lib/graph/layout.ts b/apps/app/src/lib/graph/layout.ts
index 370d480..7b9e1b8 100644
--- a/apps/app/src/lib/graph/layout.ts
+++ b/apps/app/src/lib/graph/layout.ts
@@ -15,7 +15,6 @@ export class FamilyTree extends dagre.graphlib.Graph {
 		nodeHeight: number,
 		direction = 'TB'
 	): Layout {
-		const isHorizontal = direction === 'LR';
 		this.setGraph({ rankdir: direction });
 		this.setDefaultEdgeLabel(() => ({}));
 		nodes.forEach((node) => {
@@ -23,7 +22,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
 		});
 
 		edges.forEach((edge) => {
-			if (edge.data!.type === 'child') {
+			if (String(edge.data!.type).toLowerCase() === 'child') {
 				this.setEdge(edge.source, edge.target);
 			}
 		});
@@ -33,7 +32,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
 		let newEdges: Edge[] = [];
 		edges.forEach((edge) => {
 			let newEdge = { ...edge };
-			if (edge.data?.type === 'child') {
+			if (String(edge.data?.type).toLowerCase() === 'child') {
 				newEdge.sourceHandle = 'child';
 				newEdge.targetHandle = 'parent';
 			}
@@ -44,7 +43,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
 				return;
 			}
 
-			if (edge.data?.type === 'spouse') {
+			if (String(edge.data?.type).toLowerCase() === 'spouse') {
 				const padding = 50; // distance between spouse and source
 				const spouseWidth = nodeWidth;
 
diff --git a/apps/app/src/lib/graph/node_click.ts b/apps/app/src/lib/graph/node_click.ts
index 83e0b28..1fcf28b 100644
--- a/apps/app/src/lib/graph/node_click.ts
+++ b/apps/app/src/lib/graph/node_click.ts
@@ -6,7 +6,6 @@ export function handleNodeClick(
 ): NodeEventWithPointer<MouseEvent | TouchEvent> {
 	return ({ event, node }) => {
 		event.preventDefault();
-		node.data.id = Number(node.id);
 		set_panel_options(node.data as components['schemas']['PersonProperties'] & { id: number });
 	};
 }
diff --git a/apps/app/src/lib/graph/parse_family_tree.ts b/apps/app/src/lib/graph/parse_family_tree.ts
index a1a90a6..737a0d3 100644
--- a/apps/app/src/lib/graph/parse_family_tree.ts
+++ b/apps/app/src/lib/graph/parse_family_tree.ts
@@ -15,9 +15,9 @@ export function parseFamilyTree(data: components['schemas']['FamilyTree']): Layo
 	const nodes: Node[] = data.people.map((person) => {
 		let newNode = { data: { ...person } } as Node;
 		if (person.id !== null && person.id !== undefined) {
-			newNode.id = person.id.toString();
+			newNode.id = "help"+person.id.toString();
 		}
-
+		newNode.data.id = person.id;
 		return newNode;
 	});
 
@@ -27,10 +27,10 @@ export function parseFamilyTree(data: components['schemas']['FamilyTree']): Layo
 			const newEdge = { data: { ...relationship.Props } } as Edge;
 			newEdge.data!.type = relationship.Type?.toLowerCase();
 			if (relationship.StartElementId !== null && relationship.StartElementId !== undefined) {
-				newEdge.source = relationship.StartElementId;
+				newEdge.source = "help"+relationship.StartId!.toString();
 			}
 			if (relationship.EndElementId !== null && relationship.EndElementId !== undefined) {
-				newEdge.target = relationship.EndElementId;
+				newEdge.target = "help"+relationship.EndId!.toString();
 			}
 
 			return newEdge;
diff --git a/apps/app/src/routes/+page.svelte b/apps/app/src/routes/+page.svelte
index 26dbf58..d386315 100644
--- a/apps/app/src/routes/+page.svelte
+++ b/apps/app/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { nodeTypes, edgeTypes } from '$lib/graph/model';
 	import { title, family_tree } from '$lib/paraglide/messages.js';
 
@@ -6,8 +7,7 @@
 		SvelteFlowProvider,
 		SvelteFlow,
 		Controls,
-		MiniMap,
-		ConnectionLineType
+		MiniMap
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 	import type { OnConnectEnd, Node, Edge, NodeEventWithPointer } from '@xyflow/svelte';
@@ -44,8 +44,8 @@
 		'TB'
 	);
 	console.log('layout', layout);
-	let nodes = $state.raw<Node[]>(layout.Nodes);
-	let edges = $state.raw<Edge[]>(layout.Edges);
+	let nodes = $state.raw<Node[]>([] as Node[]);
+	let edges = $state.raw<Edge[]>([] as Edge[]);
 
 	let relationshipStart: number | null = $state(null);
 	let createPerson = $state(false);
@@ -66,13 +66,13 @@
 				openPersonMenu = undefined;
 			},
 			deleteNode: () => {
-				if (Number(data.id) === Number(node.id)) {
+				if (Number(data.id) === Number(node.data.id)) {
 					relationshipStart = null;
 					openPersonMenu = undefined;
 
 					return;
 				}
-				fetch('/api/person/' + node.id, {
+				fetch('/api/person/' + node.data.id, {
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json'
@@ -80,8 +80,8 @@
 				})
 					.then((response) => {
 						if (response.ok) {
-							nodes = nodes.filter((n) => n.id !== node.id);
-							edges = edges.filter((e) => e.source !== node.id && e.target !== node.id);
+							nodes = nodes.filter((n) => n.data.id !== node.data.id);
+							edges = edges.filter((e) => e.source !== "help"+node.data.id && e.target !== "help"+node.data.id);
 						} else {
 							alert('Error deleting person');
 						}
@@ -92,23 +92,23 @@
 				openPersonMenu = undefined;
 			},
 			createRelationshipAndNode: () => {
-				relationshipStart = Number(node.id);
+				relationshipStart = Number(node.data.id);
 				createPerson = true;
 				openPersonMenu = undefined;
 			},
 			addRelationship: () => {
-				relationshipStart = Number(node.id);
+				relationshipStart = Number(node.data.id);
 				openPersonMenu = undefined;
 			},
 			addAdmin: () => {
-				relationshipStart = Number(node.id);
+				relationshipStart = Number(node.data.id);
 				openPersonMenu = undefined;
 			},
 			addRecipe: () => {
-				relationshipStart = Number(node.id);
+				relationshipStart = Number(node.data.id);
 				openPersonMenu = undefined;
 			},
-			id: node.id,
+			id: String(node.data.id),
 			top: event.clientY < clientHeight - 200 ? event.clientY : undefined,
 			left: event.clientX < clientWidth - 200 ? event.clientX : undefined,
 			right: event.clientX >= clientWidth - 200 ? clientWidth - event.clientX : undefined,
@@ -125,6 +125,11 @@
 			edges = [...edges, ...newEdges];
 		}
 
+		console.log('newnodes', newNodes![0].id);
+		console.log('newedges', newEdges![0].id);
+		console.log('newnodes', newNodes);
+		console.log('newedges', newEdges);
+
 		let newLayout = familyTreeDAG.getLayoutedElements(
 			nodes,
 			edges,
@@ -132,8 +137,8 @@
 			tailwindClassToPixels('h-40') || 160,
 			'TB'
 		);
-		edges = newLayout.Edges;
-		nodes = newLayout.Nodes;
+		edges = [...newLayout.Edges];
+		nodes = [...newLayout.Nodes];
 	};
 
 	let handleNodeClickFunc = handleNodeClick(
@@ -176,17 +181,21 @@
 
 	const handleConnectEnd: OnConnectEnd = (event, connectionState) => {
 		if (connectionState.isValid) return;
-		const sourceNodeId = connectionState.fromNode?.id;
+		const sourceNodeId = connectionState.fromNode?.data.id;
 		if (sourceNodeId === undefined) return;
 		relationshipStart = Number(sourceNodeId);
 		createPerson = true;
 	};
+	onMount(() => {
+		nodes = [...layout.Nodes];
+		edges = [...layout.Edges]
+	});
 </script>
 
 <svelte:head>
 	<title>{title({ page: family_tree() })}</title>
 </svelte:head>
-<div style="height:100vh;" class="!bg-base-200 drawer-content flex flex-col">
+<div style="height:100vh;" class="!bg-base-200 flex flex-col">
 	<SvelteFlowProvider>
 		<SvelteFlow
 			bind:nodes={nodes}