From 6062f7616df0eb7ff9e37c69875d1d5f76705d3b Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Wed, 30 Apr 2025 20:08:16 +0200
Subject: [PATCH] relationship modal and some profile edit fix

---
 apps/app/src/lib/graph/FamilyEdge.svelte      |   3 +-
 apps/app/src/lib/profile/ProfileHeader.svelte |  18 +-
 apps/app/src/lib/relationship/Modal.svelte    | 261 ++++++++++++++++++
 .../src/lib/relationship/ModalButtons.svelte  |  36 +++
 apps/app/src/lib/sidebar/hamburgerIcon.svelte |  85 +++---
 apps/app/src/routes/+page.svelte              | 115 +++++---
 6 files changed, 432 insertions(+), 86 deletions(-)
 create mode 100644 apps/app/src/lib/relationship/Modal.svelte
 create mode 100644 apps/app/src/lib/relationship/ModalButtons.svelte

diff --git a/apps/app/src/lib/graph/FamilyEdge.svelte b/apps/app/src/lib/graph/FamilyEdge.svelte
index bcfe913..75eede5 100644
--- a/apps/app/src/lib/graph/FamilyEdge.svelte
+++ b/apps/app/src/lib/graph/FamilyEdge.svelte
@@ -2,7 +2,7 @@
 	import type { components } from '$lib/api/api.gen.ts';
 	import { child, spouse, parent, sibling } from '$lib/paraglide/messages';
 	import { getBezierPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
-	
+
 	let {
 		sourceX,
 		sourceY,
@@ -21,7 +21,6 @@
 	let edgeType = (
 		data as components['schemas']['FamilyRelationship'] & { type: string }
 	).type.toLowerCase();
-	console.log('edgeType', edgeType);
 	let edgeLabel: string = $state(edgeType);
 	let edgeColor: string;
 	let srcPos;
diff --git a/apps/app/src/lib/profile/ProfileHeader.svelte b/apps/app/src/lib/profile/ProfileHeader.svelte
index acc3b97..88f37f4 100644
--- a/apps/app/src/lib/profile/ProfileHeader.svelte
+++ b/apps/app/src/lib/profile/ProfileHeader.svelte
@@ -73,7 +73,7 @@
 			class="h-48 w-48 rounded-lg object-cover shadow-md"
 		/>
 		{#if editorMode}
-			<button class="btn bg-neutral text-neutral-content btn-xs" on:click={() => {}}>
+			<button class="btn btn-neutral btn-soft btn-xs" onclick={() => {}}>
 				{change_profile_picture()}
 			</button>
 		{/if}
@@ -84,6 +84,7 @@
 				<strong>{first_name()}: </strong>
 				{#if editorMode}<input
 						bind:value={person.first_name}
+						onchange={() => onChange('first_name', person.first_name)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.first_name ?? '-'}{/if}
 			</p>
@@ -91,6 +92,7 @@
 				<strong>{last_name()}: </strong>
 				{#if editorMode}<input
 						bind:value={person.last_name}
+						onchange={() => onChange('last_name', person.last_name)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.last_name ?? '-'}{/if}
 			</p>
@@ -98,6 +100,7 @@
 				<strong>{middle_name()}:</strong>
 				{#if editorMode}<input
 						bind:value={person.middle_name}
+						onchange={() => onChange('middle_name', person.middle_name)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.middle_name ?? '-'}{/if}
 			</p>
@@ -108,8 +111,9 @@
 						class="pika-single w-full"
 						id="birth_date"
 						bind:this={birth_date}
-						bind:value={person.born}
-					/>
+						placeholder={person.born}
+						onchange={() => onChange('born', birth_date.value)}
+				/>
 				{:else}{person.born ?? '-'}{/if}
 			</p>
 			<p>
@@ -118,9 +122,9 @@
 						type="text"
 						class="pika-single w-full"
 						id="death_date"
-						placeholder={died()}
+						placeholder={person.died??died()}
 						bind:this={death_date}
-						bind:value={person.died}
+						onchange={() => onChange('died', death_date.value)}
 					/>{:else}{person.died ?? '-'}{/if}
 			</p>
 			<p>
@@ -131,6 +135,7 @@
 						class="select select-bordered select-sm w-full"
 						id="biological_sex"
 						bind:value={person.biological_sex}
+						onchange={() => onChange('biological_sex', person.biological_sex)}
 						placeholder={biological_sex()}
 					>
 						<option value="male">{male()} </option>
@@ -146,6 +151,7 @@
 				<strong>{email()}:</strong>
 				{#if editorMode}<input
 						bind:value={person.email}
+						onchange={() => onChange('email', person.email)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.email ?? '-'}{/if}
 			</p>
@@ -153,6 +159,7 @@
 				<strong>{mothers_first_name()}:</strong>
 				{#if editorMode}<input
 						bind:value={person.mothers_first_name}
+						onchange={() => onChange('mothers_first_name', person.mothers_first_name)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.mothers_first_name ?? '-'}{/if}
 			</p>
@@ -160,6 +167,7 @@
 				<strong>{mothers_last_name()}:</strong>
 				{#if editorMode}<input
 						bind:value={person.mothers_last_name}
+						onchange={() => onChange('mothers_last_name', person.mothers_last_name)}
 						class="input input-sm input-bordered w-full"
 					/>{:else}{person.mothers_last_name ?? '-'}{/if}
 			</p>
diff --git a/apps/app/src/lib/relationship/Modal.svelte b/apps/app/src/lib/relationship/Modal.svelte
new file mode 100644
index 0000000..6377e7c
--- /dev/null
+++ b/apps/app/src/lib/relationship/Modal.svelte
@@ -0,0 +1,261 @@
+<script lang="ts">
+	import { child, date, description, edit, file, from_time, media_title, notes, parent, relation_type, sibling, spouse, title, until, upload } from '$lib/paraglide/messages';
+	import type { Edge } from '@xyflow/svelte';
+	import ModalButtons from '$lib/relationship/ModalButtons.svelte';
+	import type { components, operations } from '$lib/api/api.gen';
+
+	let {
+		closeModal,
+		onCreation = (newEdges: Edge[]) => {},
+		editorMode = false,
+		createRelationship = false,
+		startNode = undefined,
+		endNode = undefined
+	} = $props<{
+		closeModal: () => void;
+		onCreation?: (newEdges: Edge[]) => void;
+		editorMode?: boolean;
+		createRelationship?: boolean;
+		startNode?: string;
+		endNode?: string;
+	}>();
+
+	let relationships: components['schemas']['dbtypeRelationship'][] = $state([]);
+	let newRelationship: components['schemas']['FamilyRelationship'] = $state({
+		verified: false,
+		notes: '',
+		from: '',
+		to: ''
+	});
+	let relationshiptype: 'sibling' | 'child' | 'parent' | 'spouse' | undefined = $state('sibling');
+
+	async function getRelationships(startId: string, endId :string) {
+		if (startId === undefined || endId === undefined) {
+			alert('');
+			return;
+		}
+
+		const response = await fetch(`/api/relationship/${startId}/${endId}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+
+		if (!response.ok) {
+			console.log('Cannot get relationships, status: ' + response.status);
+			return;
+		}
+
+		relationships.push((await response.json()) as components['schemas']['dbtypeRelationship']);
+	}
+
+	getRelationships(startNode,endNode);
+	getRelationships(startNode,endNode);
+
+	async function save() {
+		for (const r of relationships) {
+			const patchBody: components['schemas']['FamilyRelationship'] = r.Props ?? {};
+
+			const response = await fetch(`/api/relationship/${r.StartId}/${r.EndId}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(patchBody)
+			});
+
+			if (!response.ok) {
+				console.log(`Failed to save relationship ${r.StartId} → ${r.EndId}`);
+			}
+		}
+
+		closeModal();
+	}
+
+	async function createNewRelationship() {
+		if (relationships.length > 0) {
+			alert('Relationship already exists');
+			createRelationship = false;
+
+			return;
+		}
+
+		if (!startNode || !endNode) {
+			alert('Please select nodes');
+			return;
+		}
+
+		let body: operations['createRelationship']['requestBody']['content']['application/json'] = {
+			id1: startNode,
+			id2: endNode,
+			type: relationshiptype,
+			relationship: newRelationship
+		};
+
+		const response = await fetch(`/api/relationship`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		});
+
+		if (!response.ok) {
+			console.log('Cannot create relationship');
+			return;
+		}
+
+		const created = await response.json() as components['schemas']['dbtypeRelationship'][];
+		relationships.push(...created);
+
+		let newEdges: Edge[] = [];
+		for (const r of created) {
+			newEdges.push({
+				id: r.ElementId!,
+				source: r.StartElementId!,
+				target: r.EndElementId!,
+				type: 'relationship',
+				data: {...r.Props, type: r.Type},
+			});
+		}
+		onCreation(newEdges);
+	}
+</script>
+
+
+<div class="modal modal-open z-8">
+	<div class="modal-box w-full max-w-xl">
+		<div class="bg-base-100 sticky top-0 z-7">
+			<ModalButtons
+				{editorMode}
+				onCreate={createNewRelationship}
+				onClose={closeModal}
+				onSave={save}
+				onToggleEdit={() => {
+					editorMode = !editorMode;
+				}}
+			/>
+			<div class="divider"></div>
+		</div>
+		{#if createRelationship}
+			<!-- Relationship type selector -->
+			<div class="form-control mt-4">
+				<label for="relationshiptype" class="label">{relation_type()}</label>
+				<select id="relationshiptype" bind:value={relationshiptype} class="select select-bordered">
+					<option value="sibling">{sibling()}</option>
+					<option value="child">{child()}</option>
+					<option value="parent">{parent()}</option>
+					<option value="spouse">{spouse()}</option>
+				</select>
+			</div>
+		{/if}
+		{#if !createRelationship}
+			<!-- Editor mode: show all existing relationships -->
+			{#each relationships as r, index}
+				<div class="border-base-300 mt-4 rounded border p-4">
+					<div class="form-control">
+						{#if editorMode}
+							<label for={`relationshiptype-${index}`} class="label">{relation_type()}</label>
+							<select id={`relationshiptype-${index}`} bind:value={r.Type} class="select select-bordered">
+								<option value="sibling">{sibling()}</option>
+								<option value="child">{child()}</option>
+								<option value="parent">{parent()}</option>
+								<option value="spouse">{spouse()}</option>
+							</select>
+						{:else}
+							<p><strong>{relation_type()}:</strong> {r.Type}</p>
+						{/if}
+					</div>
+					<div class="form-control mt-2">
+						{#if editorMode}
+						<label for={`verified-${index}`} class="label">Verified</label>
+						<input
+							id={`verified-${index}`}
+							type="checkbox"
+							bind:value={r.Props!.verified}
+							class="checkbox"
+						/>
+						{:else}
+							<p><strong>Verified:</strong>{r.Props?.verified}</p>
+						{/if}
+					</div>
+					<div class="form-control mt-2">ú
+						{#if editorMode}
+						<label for={`notes-${index}`} class="label">{notes()}</label>
+						<textarea
+							id={`notes-${index}`}
+							bind:value={r.Props!.notes}
+							class="textarea textarea-bordered w-full"
+						>
+						</textarea>
+						{:else}
+							<p><strong>{notes()}:</strong> {r.Props?.notes}</p>
+						{/if}
+					</div>
+					<div class="form-control mt-2">
+						{#if editorMode}
+						<label for={`from-${index}`} class="label">{from_time()}</label>
+						<input
+							id={`from-${index}`}
+							type="date"
+							bind:value={r.Props!.from}
+							class="input input-bordered w-full"
+						/>
+						{:else}
+							<p><strong>{from_time()}:</strong> {r.Props?.from}</p>
+						{/if}
+					</div>
+					<div class="form-control mt-2">
+						{#if editorMode}
+						<label for={`to-${index}`} class="label">{until()}</label>
+						<input
+							id={`to-${index}`}
+							type="date"
+							bind:value={r.Props!.to}
+							class="input input-bordered w-full"
+						/>
+						{:else}
+							<p><strong>{until()}:</strong> {r.Props?.to}</p>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		{:else}
+			<!-- Creator mode: only one relationship -->
+			<div class="border-base-300 mt-4 rounded border p-4">
+				<div class="form-control">
+					<label for="verified" class="label">Verified</label>
+					<input
+						id="verified"
+						type="checkbox"
+						bind:checked={newRelationship.verified}
+						class="checkbox"
+					/>
+				</div>
+				<div class="form-control mt-2">
+					<label for="notes" class="label">{notes()}</label>
+					<textarea
+						id="notes"
+						bind:value={newRelationship.notes}
+						class="textarea textarea-bordered w-full"
+					></textarea>
+				</div>
+				<div class="form-control mt-2">
+					<label for="from" class="label">{from_time()}</label>
+					<input
+						id="from"
+						type="date"
+						bind:value={newRelationship.from}
+						class="input input-bordered w-full"
+					/>
+				</div>
+				<div class="form-control mt-2">
+					<label for="to" class="label">{until()}</label>
+					<input
+						id="to"
+						type="date"
+						bind:value={newRelationship.to}
+						class="input input-bordered w-full"
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/apps/app/src/lib/relationship/ModalButtons.svelte b/apps/app/src/lib/relationship/ModalButtons.svelte
new file mode 100644
index 0000000..5a6f869
--- /dev/null
+++ b/apps/app/src/lib/relationship/ModalButtons.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { add_relationship, back, biography, close, create, edit, save } from '$lib/paraglide/messages';
+
+	export let editorMode = false;
+	export let createMode = false;
+
+	export let onClose: () => void;
+	export let onToggleEdit: () => void;
+	export let onSave: () => void;
+	export let onCreate: () => void;
+</script>
+
+<div class="flex items-center justify-between p-2">
+	<h3 class="text-lg font-bold">{biography()}</h3>
+	<div class="space-x-2">
+		{#if !createMode}
+			<button class="btn btn-secondary btn-sm" on:click={onToggleEdit}>
+				{editorMode ? back() : edit()}
+			</button>
+		{/if}
+		{#if editorMode}
+			{#if createMode}
+				<button class="btn btn-accent btn-sm" on:click={onCreate}>
+					{add_relationship()}
+				</button>
+			{:else}
+				<button class="btn btn-accent btn-sm" on:click={onSave}>
+					{save()}
+				</button>
+			{/if}
+		{/if}
+		<button class="btn btn-error btn-sm" on:click={onClose}>
+			{close()}
+		</button>
+	</div>
+</div>
diff --git a/apps/app/src/lib/sidebar/hamburgerIcon.svelte b/apps/app/src/lib/sidebar/hamburgerIcon.svelte
index ccfe036..87a0e2d 100644
--- a/apps/app/src/lib/sidebar/hamburgerIcon.svelte
+++ b/apps/app/src/lib/sidebar/hamburgerIcon.svelte
@@ -1,45 +1,54 @@
 <script lang="ts">
-	import { managed_profiles } from "$lib/paraglide/messages";
+	import { managed_profiles } from '$lib/paraglide/messages';
 	let clicked = $state(false);
+	let {
+		open_admin_panel = () => {
+			console.log('admin panel opened');
+		}
+	}: { open_admin_panel: () => void } = $props();
 </script>
 
-	<div class="dropdown">
-		<button
-			tabindex="0"
-			class={'btn btn-circle swap swap-rotate' + (clicked ? ' swap-active' : '')}
-			onclick={() => (clicked = !clicked)}
+<div class="dropdown">
+	<button
+		tabindex="0"
+		class={'btn btn-circle swap swap-rotate' + (clicked ? ' swap-active' : '')}
+		onclick={() => (clicked = !clicked)}
+	>
+		<input type="checkbox" />
+		<!-- hamburger icon -->
+		<svg
+			class="swap-off fill-current"
+			xmlns="http://www.w3.org/2000/svg"
+			width="32"
+			height="32"
+			viewBox="0 0 512 512"
 		>
-			<input type="checkbox" />
-			<!-- hamburger icon -->
-			<svg
-				class="swap-off fill-current"
-				xmlns="http://www.w3.org/2000/svg"
-				width="32"
-				height="32"
-				viewBox="0 0 512 512"
-			>
-				<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-			</svg>
+			<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+		</svg>
 
-			<!-- close icon -->
-			<svg
-				class="swap-on fill-current"
-				xmlns="http://www.w3.org/2000/svg"
-				width="32"
-				height="32"
-				viewBox="0 0 512 512"
-			>
-				<polygon
-					points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
-				/>
-			</svg>
-		</button>
-		<ul
-			class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
+		<!-- close icon -->
+		<svg
+			class="swap-on fill-current"
+			xmlns="http://www.w3.org/2000/svg"
+			width="32"
+			height="32"
+			viewBox="0 0 512 512"
 		>
-			<li>
-				<button tabindex="0" class="btn btn-primary" aria-label="close sidebar">{managed_profiles()}</button>
-			</li>
-		</ul>
-	</div>
-
+			<polygon
+				points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
+			/>
+		</svg>
+	</button>
+	<ul class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+		<li>
+			<button
+				tabindex="0"
+				class="btn btn-primary"
+				aria-label="close sidebar"
+				onclick={open_admin_panel}
+			>
+				{managed_profiles()}
+			</button>
+		</li>
+	</ul>
+</div>
diff --git a/apps/app/src/routes/+page.svelte b/apps/app/src/routes/+page.svelte
index d386315..30d9074 100644
--- a/apps/app/src/routes/+page.svelte
+++ b/apps/app/src/routes/+page.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
+	import CreateRelationship from '$lib/relationship/Modal.svelte';
 	import { onMount } from 'svelte';
 	import { nodeTypes, edgeTypes } from '$lib/graph/model';
 	import { title, family_tree } from '$lib/paraglide/messages.js';
 
-	import {
-		SvelteFlowProvider,
-		SvelteFlow,
-		Controls,
-		MiniMap
-	} from '@xyflow/svelte';
+	import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 	import type { OnConnectEnd, Node, Edge, NodeEventWithPointer } from '@xyflow/svelte';
 
@@ -28,12 +24,15 @@
 
 	let { data }: { data: Layout & { id: string } } = $props();
 
-	let selectedPerson: components['schemas']['PersonProperties'] & { id: number | null } = $state({
-		id: null
-	});
+	let selectedPerson: components['schemas']['PersonProperties'] & { id: string | undefined } =
+		$state({
+			id: undefined
+		});
+	let selectedRelationship: Edge | undefined = $state(undefined);
 	let openPersonPanel = $state(false);
 	let openPersonMenu: NodeMenu | undefined = $state(undefined);
 	let with_out_spouse = $state(false);
+	let createRelationship = $state(false);
 
 	let familyTreeDAG = new FamilyTree();
 	let layout = familyTreeDAG.getLayoutedElements(
@@ -43,7 +42,6 @@
 		tailwindClassToPixels('h-40') || 160,
 		'TB'
 	);
-	console.log('layout', layout);
 	let nodes = $state.raw<Node[]>([] as Node[]);
 	let edges = $state.raw<Edge[]>([] as Edge[]);
 
@@ -52,6 +50,26 @@
 
 	let clientWidth: number | undefined = $state();
 	let clientHeight: number | undefined = $state();
+	let delete_profile = (id: any) => {
+		fetch('/api/person/' + id, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		})
+			.then((response) => {
+				if (response.ok) {
+					nodes = nodes.filter((n) => n.data.id !== id);
+					edges = edges.filter((e) => e.source !== 'person' + id && e.target !== 'person' + id);
+				} else {
+					alert('Error deleting person');
+				}
+			})
+			.catch((error) => {
+				console.error('Error:', error);
+			});
+	};
+
 	const handleContextMenu: NodeEventWithPointer<MouseEvent> = ({ event, node }) => {
 		event.preventDefault();
 
@@ -60,6 +78,10 @@
 			clientWidth = window.innerWidth;
 		}
 
+		if (openPersonMenu !== undefined) {
+			openPersonMenu.onClick();
+		}
+
 		openPersonMenu = {
 			XUserId: data.id,
 			onClick: () => {
@@ -69,26 +91,10 @@
 				if (Number(data.id) === Number(node.data.id)) {
 					relationshipStart = null;
 					openPersonMenu = undefined;
-
 					return;
 				}
-				fetch('/api/person/' + node.data.id, {
-					method: 'DELETE',
-					headers: {
-						'Content-Type': 'application/json'
-					}
-				})
-					.then((response) => {
-						if (response.ok) {
-							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');
-						}
-					})
-					.catch((error) => {
-						console.error('Error:', error);
-					});
+
+				delete_profile(node.data.id);
 				openPersonMenu = undefined;
 			},
 			createRelationshipAndNode: () => {
@@ -125,11 +131,6 @@
 			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,
@@ -144,11 +145,11 @@
 	let handleNodeClickFunc = handleNodeClick(
 		(
 			person: components['schemas']['PersonProperties'] & {
-				id: number;
+				id: number | undefined;
 			}
 		) => {
 			openPersonPanel = true;
-			selectedPerson = person;
+			selectedPerson = { ...person, id: String(person.id) };
 			fetch('/api/person/' + person.id, {
 				method: 'GET',
 				headers: {
@@ -166,9 +167,9 @@
 				.then((data) => {
 					if (data) {
 						selectedPerson = data.Props as components['schemas']['PersonProperties'] & {
-							id: number | null;
+							id: string | undefined;
 						};
-						selectedPerson.id = person.id;
+						selectedPerson.id = String(person.id);
 					}
 				});
 		}
@@ -180,15 +181,25 @@
 	};
 
 	const handleConnectEnd: OnConnectEnd = (event, connectionState) => {
-		if (connectionState.isValid) return;
+		
 		const sourceNodeId = connectionState.fromNode?.data.id;
 		if (sourceNodeId === undefined) return;
 		relationshipStart = Number(sourceNodeId);
+		if (connectionState.isValid) {
+			createRelationship = true;
+			selectedRelationship = {
+				id: 'relationship' + connectionState.toNode?.data.id,
+				source: String(relationshipStart),
+				target: String(connectionState.toNode?.data.id),
+			};
+			return;
+		}
+
 		createPerson = true;
 	};
 	onMount(() => {
 		nodes = [...layout.Nodes];
-		edges = [...layout.Edges]
+		edges = [...layout.Edges];
 	});
 </script>
 
@@ -198,9 +209,15 @@
 <div style="height:100vh;" class="!bg-base-200 flex flex-col">
 	<SvelteFlowProvider>
 		<SvelteFlow
-			bind:nodes={nodes}
-			bind:edges={edges}
+			bind:nodes
+			bind:edges
 			onconnectend={handleConnectEnd}
+			onedgeclick={({ edge, event }: {
+				edge: Edge;
+				event: MouseEvent;
+			})=> {
+				selectedRelationship = edge;
+			}}
 			onnodeclick={handleNodeClickFunc}
 			onnodecontextmenu={handleContextMenu}
 			onpaneclick={handlePaneClick}
@@ -232,6 +249,22 @@
 					relationshipStartID={relationshipStart}
 				></CreatePerson>
 			{/if}
+			{#if selectedRelationship}
+				<CreateRelationship
+					{createRelationship}
+					onCreation={(newEdges: Array<Edge>) => {
+						onCreation(null, newEdges);
+						createRelationship = false;
+					}}
+					closeModal={() => {
+						createRelationship = false;
+						selectedRelationship = undefined;
+						relationshipStart = null;
+					}}
+					startNode={String(relationshipStart)}
+					endNode={String(selectedRelationship.target)}
+				/>
+			{/if}
 			{#if openPersonMenu !== undefined}
 				<PersonMenu {...openPersonMenu!} />
 			{/if}