From 4d36ec8d0276fb20dc801bb167a8a9e2cfb1f9b4 Mon Sep 17 00:00:00 2001
From: Bram Kreulen <boazkreulen.main@gmail.com>
Date: Mon, 18 Nov 2024 22:11:39 +0100
Subject: [PATCH 1/5] better graph row + SimpleModal + bugfixes

---
 src/lib/components/ListRow.svelte             |  35 -----
 .../scripts/controllers/CourseController.ts   |   4 +-
 .../scripts/controllers/DomainController.ts   |   1 -
 .../scripts/controllers/LectureController.ts  |   1 -
 src/lib/scripts/modals.ts                     |  35 ++++-
 .../course/[course]/overview/GraphCard.svelte |   4 +-
 .../course/[course]/overview/GraphRow.svelte  | 132 ++++++++++--------
 .../course/[course]/overview/LinkRow.svelte   |  25 ++--
 .../course/[course]/overview/LinkURL.svelte   |   4 +-
 .../[course]/settings/GeneralCard.svelte      |  23 ++-
 .../[course]/settings/MemberCard.svelte       |  10 +-
 .../[course]/settings/ProgramCard.svelte      |   6 +-
 .../[course]/settings/ProgramRow.svelte       |  64 ++++++---
 .../graph/[graph]/editor/DomainHeader.svelte  |   4 +-
 .../app/graph/[graph]/editor/DomainRow.svelte |  29 ++--
 .../app/graph/[graph]/editor/DomainTab.svelte |   4 +-
 .../graph/[graph]/editor/LectureHeader.svelte |   4 +-
 .../graph/[graph]/editor/LectureRow.svelte    |  37 +++--
 .../graph/[graph]/editor/LectureTab.svelte    |   4 +-
 .../graph/[graph]/editor/RelationRow.svelte   |  29 ++--
 .../graph/[graph]/editor/SubjectHeader.svelte |   4 +-
 .../graph/[graph]/editor/SubjectRow.svelte    |  29 ++--
 .../graph/[graph]/editor/SubjectTab.svelte    |   4 +-
 src/routes/app/home/+page.svelte              |   8 +-
 .../[program]/settings/CourseRow.svelte       |  70 ++++++----
 .../[program]/settings/CoursesCard.svelte     |  10 +-
 .../[program]/settings/MemberCard.svelte      |   8 +-
 27 files changed, 361 insertions(+), 227 deletions(-)
 delete mode 100644 src/lib/components/ListRow.svelte

diff --git a/src/lib/components/ListRow.svelte b/src/lib/components/ListRow.svelte
deleted file mode 100644
index 364399df..00000000
--- a/src/lib/components/ListRow.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-
-<span class="list-row">
-	<slot />
-</span>
-
-<style lang="sass">
-
-	@use "$styles/variables.sass" as *
-	@use "$styles/palette.sass" as *
-
-	.list-row
-		align-content: center
-		justify-content: center
-
-		box-sizing: content-box
-		height: $list-row-height
-		padding: $input-thin-padding $input-thick-padding
-
-		color: $dark-gray
-		border-bottom: 1px solid $gray
-
-		&:hover
-			background: $light-gray
-
-		&:first-of-type
-			margin-top: -$input-thin-padding
-			border-top-left-radius: $border-radius
-			border-top-right-radius: $border-radius
-
-		&:last-of-type
-			border-bottom: none
-			margin-bottom: -$input-thin-padding
-			border-bottom-left-radius: $border-radius
-			border-bottom-right-radius: $border-radius
-</style>
\ No newline at end of file
diff --git a/src/lib/scripts/controllers/CourseController.ts b/src/lib/scripts/controllers/CourseController.ts
index 11870127..beefd444 100644
--- a/src/lib/scripts/controllers/CourseController.ts
+++ b/src/lib/scripts/controllers/CourseController.ts
@@ -526,8 +526,8 @@ class CourseController {
 
 		const course = CourseController.revive(cache, data)
 		if (program !== undefined) {
-			course.assignToProgram(program)
-		}
+			program.assignCourse(course, false)
+		}	
 
 		return course
 	}
diff --git a/src/lib/scripts/controllers/DomainController.ts b/src/lib/scripts/controllers/DomainController.ts
index 6ca4d162..66160aa4 100644
--- a/src/lib/scripts/controllers/DomainController.ts
+++ b/src/lib/scripts/controllers/DomainController.ts
@@ -64,7 +64,6 @@ class DomainController extends NodeController<DomainController> {
 
 	set order(value: number) {
 		this._order = value
-		this._unchanged = false
 		this._unsaved = true
 	}
 
diff --git a/src/lib/scripts/controllers/LectureController.ts b/src/lib/scripts/controllers/LectureController.ts
index c1173091..4149e4d1 100644
--- a/src/lib/scripts/controllers/LectureController.ts
+++ b/src/lib/scripts/controllers/LectureController.ts
@@ -75,7 +75,6 @@ class LectureController {
 
 	set order(value: number) {
 		this._order = value
-		this._unchanged = false
 		this._unsaved = true
 	}
 
diff --git a/src/lib/scripts/modals.ts b/src/lib/scripts/modals.ts
index 69cfc095..12f3d4a3 100644
--- a/src/lib/scripts/modals.ts
+++ b/src/lib/scripts/modals.ts
@@ -2,15 +2,42 @@
 // External imports
 import type Modal from '$components/Modal.svelte'
 
+// Internal imports
+import { Validation, Severity } from './validation'
+
 
 // --------------------> Classes
 
+export abstract class SimpleModal {
+	disabled: boolean = false
+	modal?: Modal
+
+	show() {
+		this.modal?.show()
+	}
+
+	hide() {
+		this.modal?.hide()
+		this.disabled = false
+	}
+
+	abstract submit(): Promise<void>
+}
 
 export abstract class FormModal {
 	private defaults: { [key: string]: any } = {}
 	private changed: { [key: string]: boolean } = {}
+	private _disabled: boolean = false
 	private _modal?: Modal
 
+	get disabled() {
+		return this._disabled || this.validate().severity === Severity.error
+	}
+
+	set disabled(disabled: boolean) {
+		this._disabled = disabled
+	}
+
 	get modal() {
 		return this._modal
 	}
@@ -30,6 +57,7 @@ export abstract class FormModal {
 	}
 
 	protected reset() {
+		this.disabled = false
 		for (const property in this) {
 			if (this.isField(property)) {
 				this[property] = this.defaults[property]
@@ -54,7 +82,10 @@ export abstract class FormModal {
 	}
 
 	private isField(property: string): boolean {
-		return property !== '_modal' && property !== 'modal' && property !== 'defaults' && property !== 'changed'
+		return property !== '_modal' && property !== 'modal' 
+			&& property !== '_disabled' && property !== 'disabled'
+			&& property !== 'defaults' 
+			&& property !== 'changed' 
 	}
 
 	show() {
@@ -64,4 +95,6 @@ export abstract class FormModal {
 	hide() {
 		this.modal?.hide()
 	}
+
+	abstract validate(): Validation
 }
\ No newline at end of file
diff --git a/src/routes/app/course/[course]/overview/GraphCard.svelte b/src/routes/app/course/[course]/overview/GraphCard.svelte
index 42124d13..4172ecb5 100644
--- a/src/routes/app/course/[course]/overview/GraphCard.svelte
+++ b/src/routes/app/course/[course]/overview/GraphCard.svelte
@@ -71,6 +71,8 @@
 			}
 
 			// Create graph
+			this.disabled = true
+			graph_modal = graph_modal // Trigger reactivity
 			await GraphController.create($course.cache, $course, this.trimmed_name)
 			$course = $course // Trigger reactivity
 			graph_modal.hide()
@@ -94,7 +96,7 @@
 
 		<footer>
 			<Button
-				disabled={graph_modal.validate().severity === Severity.error}
+				disabled={graph_modal.disabled}
 				on:click={() => graph_modal.submit()}
 			> Create </Button>
 			<Feedback data={graph_modal.validate()} />
diff --git a/src/routes/app/course/[course]/overview/GraphRow.svelte b/src/routes/app/course/[course]/overview/GraphRow.svelte
index 2c843d17..77ccf9e8 100644
--- a/src/routes/app/course/[course]/overview/GraphRow.svelte
+++ b/src/routes/app/course/[course]/overview/GraphRow.svelte
@@ -3,7 +3,7 @@
 
 	// Internal dependencies
 	import { course } from './stores'
-	import { FormModal } from '$scripts/modals'
+	import { FormModal, SimpleModal } from '$scripts/modals'
 	import { Validation, Severity } from '$scripts/validation'
 
 	import type {
@@ -16,7 +16,6 @@
 	import LinkButton from '$components/LinkButton.svelte'
 	import Dropdown from '$components/Dropdown.svelte'
 	import Feedback from '$components/Feedback.svelte'
-	import ListRow from '$components/ListRow.svelte'
 	import Button from '$components/Button.svelte'
 	import Modal from '$components/Modal.svelte'
 
@@ -57,6 +56,8 @@
 			}
 
 			// Copy graph
+			this.disabled = true
+			copy_modal = copy_modal // Trigger reactivity
 			const copied_graph = await graph.copy(this.course!)
 			await Promise.all([
 				copied_graph.save(),
@@ -64,7 +65,17 @@
 				copied_graph.subjects.map(subject => subject.save()),
 				copied_graph.lectures.map(lecture => lecture.save())
 			])
+			
+			$course = $course
+			this.hide()
+		}
+	}
 
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await graph.delete()
 			$course = $course
 			this.hide()
 		}
@@ -74,7 +85,7 @@
 	export let graph: GraphController
 
 	// Modals
-	let delete_modal: Modal
+	let delete_modal = new DeleteModal()
 	let copy_modal = new CopyModal()
 
 </script>
@@ -97,7 +108,7 @@
 
 		<footer>
 			<Button
-				disabled={copy_modal.validate().severity === Severity.error}
+				disabled={copy_modal.disabled}
 				on:click={() => copy_modal.submit()}
 			> Copy </Button>
 			<Feedback data={copy_modal.validate()} />
@@ -105,61 +116,54 @@
 	</form>
 </Modal>
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Graph </h3>
 	Are you sure you want to delete this graph? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await graph.delete()
-			$course = $course
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
-<ListRow>
-	<div class="grid">
-		<img
-			src={link_icon}
-			alt="Link icon"
-			class="link-icon"
-			style:visibility={graph.link_ids.length > 0 ? 'visible' : 'hidden'}
-		/>
-	
-		<span>
-			{#if graph.name}
-				{graph.name}
-			{:else}
-				<i> Unnamed graph </i>
-			{/if}
-		</span>
-	
-		<IconButton scale
-			src={open_eye_icon}
-			description="View Graph"
-		/>
-	
-		<IconButton scale
-			src={pencil_icon}
-			description="Edit Graph"
-			href="/app/graph/{graph.id}/editor"
-		/>
-	
-		<IconButton scale
-			src={copy_icon}
-			description="Copy Graph"
-			on:click={() => copy_modal.show()}
-		/>
-	
-		<IconButton scale
-			src={trash_icon}
-			description="Delete Graph"
-			on:click={() => delete_modal.show()}
-		/>
-	</div>
-</ListRow>
+<span class="graph-row">
+	<IconButton scale
+		src={trash_icon}
+		description="Delete Graph"
+		on:click={() => delete_modal.show()}
+	/>
+	<IconButton scale
+		src={copy_icon}
+		description="Copy Graph"
+		on:click={() => copy_modal.show()}
+	/>
+	<IconButton scale
+		src={pencil_icon}
+		description="Edit Graph"
+		href="/app/graph/{graph.id}/editor"
+	/>
+	<IconButton scale
+		src={open_eye_icon}
+		description="Preview Graph"
+	/>
+
+	<span>
+		{#if graph.name}
+			{graph.name}
+		{:else}
+			<i> Unnamed graph </i>
+		{/if}
+	</span>
+
+	<img
+		src={link_icon}
+		alt="Link icon"
+		style:visibility={graph.link_ids.length > 0 ? 'visible' : 'hidden'}
+	/>
+</span>
 
 
 <!-- Styles -->
@@ -170,17 +174,31 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.grid
+	.graph-row
 		display: grid
-		grid-template: "link name view edit copy delete" auto / $total-icon-size 1fr $input-icon-size $input-icon-size $input-icon-size $input-icon-size
+		grid-template: "delete copy edit view name link" auto / $input-icon-size $input-icon-size $input-icon-size $input-icon-size 1fr max-content
 		grid-gap: $form-small-gap
-		place-items: center center
+		place-items: center start
+
+		box-sizing: content-box
+		height: $list-row-height
+		padding: $input-thin-padding $input-thick-padding
+
+		color: $dark-gray
+		border-bottom: 1px solid $gray
+
+		&:first-of-type
+			margin-top: -$input-thin-padding
+
+		&:last-of-type
+			border-bottom: none
+			margin-bottom: -$input-thin-padding
 
 		span
-			width: 100%
+			padding: $input-thin-padding $input-thick-padding
 
-		.link-icon
-			width: 0.9rem
+		img					
+			width: $input-icon-size
 			filter: $dark-purple-filter
 
 </style>
\ No newline at end of file
diff --git a/src/routes/app/course/[course]/overview/LinkRow.svelte b/src/routes/app/course/[course]/overview/LinkRow.svelte
index af7d0fc7..148c7d41 100644
--- a/src/routes/app/course/[course]/overview/LinkRow.svelte
+++ b/src/routes/app/course/[course]/overview/LinkRow.svelte
@@ -6,7 +6,7 @@
 	// Internal dependencies
 	import { course } from './stores'
 	import { Validation, Severity } from '$scripts/validation'
-	import { FormModal } from '$scripts/modals'
+	import { FormModal, SimpleModal } from '$scripts/modals'
 
 	import type { LectureController, LinkController } from '$scripts/controllers'
 	import type { EditorView } from '$scripts/types'
@@ -67,12 +67,22 @@
 		}
 	}
 
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await link.delete()
+			$course = $course // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let link: LinkController
 
 	// Modal
 	let embed_modal = new EmbedModal()
-	let delete_modal: Modal
+	let delete_modal = new DeleteModal()
 
 	// Options
 	let view_options = [
@@ -118,17 +128,16 @@
 	</form>
 </Modal>
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Link </h3>
 	Are you sure you want to delete this link? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await link.delete()
-			$course = $course
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
diff --git a/src/routes/app/course/[course]/overview/LinkURL.svelte b/src/routes/app/course/[course]/overview/LinkURL.svelte
index 041459c2..fdb9d970 100644
--- a/src/routes/app/course/[course]/overview/LinkURL.svelte
+++ b/src/routes/app/course/[course]/overview/LinkURL.svelte
@@ -17,7 +17,7 @@
 
 
 
-<div class="textfield" class:disabled={url === ''}>
+<div class="link-url" class:disabled={url === ''}>
 	<input
 		type="url"
 		disabled={true}
@@ -51,7 +51,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.textfield
+	.link-url
 		width: 100%
 		position: relative
 
diff --git a/src/routes/app/course/[course]/settings/GeneralCard.svelte b/src/routes/app/course/[course]/settings/GeneralCard.svelte
index d90c86e7..0dd9fa36 100644
--- a/src/routes/app/course/[course]/settings/GeneralCard.svelte
+++ b/src/routes/app/course/[course]/settings/GeneralCard.svelte
@@ -7,6 +7,7 @@
 	// Internal dependencies
 	import { course } from './stores'
 	import { Severity } from '$scripts/validation'
+	import { SimpleModal } from '$scripts/modals'
 
 	// Components
 	import Feedback from '$components/Feedback.svelte'
@@ -19,25 +20,35 @@
 	// Assets
 	import trash_icon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class ArchiveModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			archive_modal = archive_modal // Trigger reactivity
+			await $course.delete() // TODO this should archive, not delete
+			goto('/app/home')
+		}
+	}
+
 	// Variables
-	let archive_modal: Modal
+	let archive_modal = new ArchiveModal()
 
 </script>
 
 
 <!-- Markup -->
 
-<Modal bind:this={archive_modal}>
+<Modal bind:this={archive_modal.modal}>
 	<h3 slot="header"> Archive Course </h3>
 	Are you certain you want to archive this course?
 	When you archive a course, it, and all associated graphs and links will no longer be visible to anyone except program administrators. Only they can restore them.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => archive_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await $course.delete() // TODO this should archive, not delete
-			goto('/app/home')
-		}}> Archive </Button>
+		<Button 
+			disabled={archive_modal.disabled}
+			on:click={async () => await archive_modal.submit()}
+		> Archive </Button>
 	</svelte:fragment>
 </Modal>
 
diff --git a/src/routes/app/course/[course]/settings/MemberCard.svelte b/src/routes/app/course/[course]/settings/MemberCard.svelte
index c8b7b100..aa3a8f2c 100644
--- a/src/routes/app/course/[course]/settings/MemberCard.svelte
+++ b/src/routes/app/course/[course]/settings/MemberCard.svelte
@@ -64,12 +64,14 @@
                 return
             }
 
+            this.disabled = true
+            member_modal = member_modal // Trigger reactivity
             if (this.permission === 'EDITOR') {
-                $course.addEditor(this.user!)
+                $course.assignEditor(this.user!)
             } else {
-                $course.addAdmin(this.user!)
+                $course.assignAdmin(this.user!)
             }
-
+            
             await $course.save()
             $course = $course // Trigger reactivity
             this.hide()
@@ -121,7 +123,7 @@
 
 		<footer>
 			<Button
-				disabled={member_modal.validate().severity === Severity.error}
+				disabled={member_modal.disabled}
 				on:click={async () => await member_modal.submit()}
 			> Assign </Button>
 			<Feedback data={member_modal.validate()} />
diff --git a/src/routes/app/course/[course]/settings/ProgramCard.svelte b/src/routes/app/course/[course]/settings/ProgramCard.svelte
index 7a863661..110d5ee0 100644
--- a/src/routes/app/course/[course]/settings/ProgramCard.svelte
+++ b/src/routes/app/course/[course]/settings/ProgramCard.svelte
@@ -53,7 +53,9 @@
 				return
 			}
 
-			$course.addProgram(this.program!)
+			this.disabled = true
+			program_modal = program_modal // Trigger reactivity
+			$course.assignToProgram(this.program!)
 			await $course.save()
 			$course = $course // Trigger reactivity
 			this.hide()
@@ -86,7 +88,7 @@
 
 		<footer>
 			<Button
-				disabled={program_modal.validate().severity === Severity.error}
+				disabled={program_modal.disabled}
 				on:click={async () => await program_modal.submit()}
 			> Assign </Button>
 			<Feedback data={program_modal.validate()} />
diff --git a/src/routes/app/course/[course]/settings/ProgramRow.svelte b/src/routes/app/course/[course]/settings/ProgramRow.svelte
index c99c0640..337ea622 100644
--- a/src/routes/app/course/[course]/settings/ProgramRow.svelte
+++ b/src/routes/app/course/[course]/settings/ProgramRow.svelte
@@ -4,59 +4,67 @@
 
 	// Internal dependencies
 	import { course } from './stores'
+	import { SimpleModal } from '$scripts/modals'
 	import type { ProgramController } from '$scripts/controllers'
 
 	// Components
 	import LinkButton from '$components/LinkButton.svelte'
 	import IconButton from '$components/IconButton.svelte'
-	import ListRow from '$components/ListRow.svelte'
 	import Button from '$components/Button.svelte'
 	import Modal from '$components/Modal.svelte'
 
 	// Assets
 	import trashIcon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class UnassignModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			unassign_modal = unassign_modal // Trigger reactivity
+			$course.unassignFromProgram(program)
+			await $course.save()
+			$course = $course // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let program: ProgramController
 
 	// Variables
-	let remove_modal: Modal
+	let unassign_modal = new UnassignModal()
 
 </script>
 
 
 <!-- Markup -->
 
-<Modal bind:this={remove_modal}>
+<Modal bind:this={unassign_modal.modal}>
 	<h3 slot="header"> Unnassign from program </h3>
 	Are you certain you want to unnassign this course from "{program.name}"?
 
 	<svelte:fragment slot="footer">
-		<LinkButton on:click={() => remove_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			$course.removeProgram(program)
-			await $course.save()
-			$course = $course // Trigger reactivity
-			remove_modal.hide()
-		}}> Archive </Button>
+		<LinkButton on:click={() => unassign_modal.hide()}> Cancel </LinkButton>
+		<Button
+			disabled={unassign_modal.disabled}
+			on:click={async () => await unassign_modal.submit()}
+		> Archive </Button>
 	</svelte:fragment>
 </Modal>
 
-<ListRow>
-	<div class="grid">
-		<IconButton 
+<span class="program-row">
+	<IconButton 
 		src={trashIcon}
 		description="Unassign from program"
-		on:click={() => remove_modal.show()}
-		/>
+		on:click={() => unassign_modal.show()}
+	/>
 
-		{program.name}
+	{program.name}
 
-		<LinkButton href="/app/program/{program.id}/settings">
+	<LinkButton href="/app/program/{program.id}/settings">
 		Program Settings
-		</LinkButton>
-	</div>
-</ListRow>
+	</LinkButton>
+</span>
 
 
 <!-- Styles -->
@@ -67,12 +75,26 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.grid
+	.program-row
 		display: grid
 		grid-template: "trash name settings" auto / $total-icon-size 1fr max-content
 		grid-gap: $form-small-gap
 		place-items: center start
 
+		box-sizing: content-box
+		height: $list-row-height
+		padding: $input-thin-padding $input-thick-padding
+
+		color: $dark-gray
+		border-bottom: 1px solid $gray
+
+		&:first-of-type
+			margin-top: -$input-thin-padding
+
+		&:last-of-type
+			border-bottom: none
+			margin-bottom: -$input-thin-padding
+
 		:global(.link-button)
 			justify-self: end
 
diff --git a/src/routes/app/graph/[graph]/editor/DomainHeader.svelte b/src/routes/app/graph/[graph]/editor/DomainHeader.svelte
index 69998ebb..1cbbd95e 100644
--- a/src/routes/app/graph/[graph]/editor/DomainHeader.svelte
+++ b/src/routes/app/graph/[graph]/editor/DomainHeader.svelte
@@ -60,7 +60,7 @@
 
 <svelte:document on:scroll={event => throttleEventCall(event, onScroll)} />
 
-<div class="header" >
+<div class="domain-header" >
 
 	{#if above_scroll_boundry}
 		<h2> Domains </h2>
@@ -87,7 +87,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.header
+	.domain-header
 		display: flex
 		flex-flow: row nowrap
 		align-content: center
diff --git a/src/routes/app/graph/[graph]/editor/DomainRow.svelte b/src/routes/app/graph/[graph]/editor/DomainRow.svelte
index c9c1c5e7..cd0cf6de 100644
--- a/src/routes/app/graph/[graph]/editor/DomainRow.svelte
+++ b/src/routes/app/graph/[graph]/editor/DomainRow.svelte
@@ -3,6 +3,7 @@
 
 	// Internal dependencies
 	import { graph } from './stores'
+	import { SimpleModal } from '$scripts/modals'
 	import type { DomainController } from '$scripts/controllers'
 
 	// Components
@@ -16,32 +17,42 @@
 	// Assets
 	import trash_icon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await domain.delete()
+			$graph = $graph // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let domain: DomainController
 
 	// Modal
-	let delete_modal: Modal
+	let delete_modal = new DeleteModal()
 
 </script>
 
 
 <!-- Markup -->
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Domain </h3>
 	Are you sure you want to delete this domain? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await domain.delete()
-			$graph = $graph
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
-<div class="row">
+<div class="domain-row">
 	<IconButton scale
 		src={trash_icon}
 		description="Delete Domain"
@@ -86,7 +97,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.row
+	.domain-row
 		display: grid
 		grid-template: "delete name style preview" auto / $total-icon-size 1fr 1fr $total-icon-size
 		grid-gap: $form-small-gap
diff --git a/src/routes/app/graph/[graph]/editor/DomainTab.svelte b/src/routes/app/graph/[graph]/editor/DomainTab.svelte
index 8d43bb67..d645b297 100644
--- a/src/routes/app/graph/[graph]/editor/DomainTab.svelte
+++ b/src/routes/app/graph/[graph]/editor/DomainTab.svelte
@@ -26,7 +26,7 @@
 
 </script>
 
-<div class="tab">
+<div class="domain-tab">
 
 	<!-- Domains -->
 	{#if filtered_domains.length === 0}
@@ -80,7 +80,7 @@
 	$left-gutter: $total-icon-size * 3 + $form-small-gap * 3
 	$right-gutter: $total-icon-size + $form-small-gap
 
-	.tab
+	.domain-tab
 		display: flex
 		flex-flow: column nowrap
 		gap: $form-small-gap
diff --git a/src/routes/app/graph/[graph]/editor/LectureHeader.svelte b/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
index e6b597f3..e2260568 100644
--- a/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
@@ -9,7 +9,7 @@
 
 </script>
 
-<div class="header" >
+<div class="lecture-header" >
 	<h2> Lectures </h2>
 
 	<div class="flex-spacer" />
@@ -22,7 +22,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.header
+	.lecture-header
 		display: flex
 		flex-flow: row nowrap
 		align-content: center
diff --git a/src/routes/app/graph/[graph]/editor/LectureRow.svelte b/src/routes/app/graph/[graph]/editor/LectureRow.svelte
index ecb2ad26..d04b6860 100644
--- a/src/routes/app/graph/[graph]/editor/LectureRow.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureRow.svelte
@@ -3,7 +3,7 @@
 
 	// Internal dependencies
 	import { graph } from './stores'
-	import { FormModal } from '$scripts/modals'
+	import { FormModal, SimpleModal } from '$scripts/modals'
 	import { Validation, Severity } from '$scripts/validation'
 
 	import type { 
@@ -57,6 +57,8 @@
 			}
 
 			// Assign subject
+			this.disabled = true
+			assign_subject_modal = assign_subject_modal // Trigger reactivity
 			lecture.assignSubject(this.subject!)
 			await lecture.save()
 			$graph = $graph
@@ -64,9 +66,19 @@
 		}
 	}
 
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await lecture.delete()
+			$graph = $graph
+			this.hide()
+		}
+	}
+
 	// Modal
-	let delete_modal: Modal
-	let assign_subject_modal: AssignSubjectModal = new AssignSubjectModal()
+	let delete_modal = new DeleteModal()
+	let assign_subject_modal = new AssignSubjectModal()
 
 </script>
 
@@ -85,29 +97,28 @@
 
 		<footer>
 			<Button
-				disabled={assign_subject_modal.validate().severity === Severity.error}
-				on:click={() => assign_subject_modal.submit()}
+				disabled={assign_subject_modal.disabled}
+				on:click={async () => await assign_subject_modal.submit()}
 			> Copy </Button>
 			<Feedback data={assign_subject_modal.validate()} />
 		</footer>
 	</form>
 </Modal>
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Lecture </h3>
 	Are you sure you want to delete this lecture? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await lecture.delete()
-			$graph = $graph
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
-<div class="row">
+<div class="lecture-row">
 	<IconButton scale
 	  src={trash_icon}
 		description="Delete Domain"
@@ -161,7 +172,7 @@
 
 	$right-gutter: $total-icon-size + $form-small-gap
 
-	.row
+	.lecture-row
 		display: grid
 		grid-template: "delete title assign" auto "subjects subjects subjects" auto / $total-icon-size 1fr max-content
 		align-items: center
diff --git a/src/routes/app/graph/[graph]/editor/LectureTab.svelte b/src/routes/app/graph/[graph]/editor/LectureTab.svelte
index 5ac37f2e..5becf2d1 100644
--- a/src/routes/app/graph/[graph]/editor/LectureTab.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureTab.svelte
@@ -19,7 +19,7 @@
 
 </script>
 
-<div class="tab">
+<div class="lecture-tab">
 
 	<!-- Domains -->
 	{#if filtered_lectures.length == 0}
@@ -49,7 +49,7 @@
 	$left-gutter: $total-icon-size * 3 + $form-small-gap * 3
 	$right-gutter: $total-icon-size + $form-small-gap
 
-	.tab
+	.lecture-tab
 		display: flex
 		flex-flow: column nowrap
 		gap: $form-small-gap
diff --git a/src/routes/app/graph/[graph]/editor/RelationRow.svelte b/src/routes/app/graph/[graph]/editor/RelationRow.svelte
index 0d1350b0..73aa2aa4 100644
--- a/src/routes/app/graph/[graph]/editor/RelationRow.svelte
+++ b/src/routes/app/graph/[graph]/editor/RelationRow.svelte
@@ -3,6 +3,7 @@
 
 	// Internal dependencies
 	import { graph } from './stores'
+	import { SimpleModal } from '$scripts/modals'
 
 	import type { 
 		RelationController, 
@@ -20,11 +21,22 @@
 	// Assets
 	import trash_icon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await relation.delete()
+			$graph = $graph // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let relation: RelationController<DomainController | SubjectController>
 
 	// Modal
-	let delete_modal: Modal
+	let delete_modal = new DeleteModal()
 
 </script>
 
@@ -32,21 +44,20 @@
 <!-- Markup -->
 
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Relation </h3>
 	Are you sure you want to delete this relation? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await relation.delete()
-			$graph = $graph // Trigger reactivity
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
-<div class="row">
+<div class="relation-row">
 	<IconButton scale
 		src={trash_icon}
 		description="Delete Relation"
@@ -96,7 +107,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.row
+	.relation-row
 		display: grid
 		grid-template: "delete parent parent-preview child child-preview" auto / $total-icon-size 1fr $total-icon-size 1fr $total-icon-size
 		grid-gap: $form-small-gap
diff --git a/src/routes/app/graph/[graph]/editor/SubjectHeader.svelte b/src/routes/app/graph/[graph]/editor/SubjectHeader.svelte
index d37b431b..b503bc09 100644
--- a/src/routes/app/graph/[graph]/editor/SubjectHeader.svelte
+++ b/src/routes/app/graph/[graph]/editor/SubjectHeader.svelte
@@ -60,7 +60,7 @@
 
 <svelte:document on:scroll={event => throttleEventCall(event, onScroll)} />
 
-<div class="header" >
+<div class="subject-header" >
 
 	{#if above_scroll_boundry}
 		<h2> Subjects </h2>
@@ -87,7 +87,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.header
+	.subject-header
 		display: flex
 		flex-flow: row nowrap
 		align-content: center
diff --git a/src/routes/app/graph/[graph]/editor/SubjectRow.svelte b/src/routes/app/graph/[graph]/editor/SubjectRow.svelte
index 759278cd..ea64f66b 100644
--- a/src/routes/app/graph/[graph]/editor/SubjectRow.svelte
+++ b/src/routes/app/graph/[graph]/editor/SubjectRow.svelte
@@ -3,6 +3,7 @@
 
 	// Internal dependencies
 	import { graph } from './stores'
+	import { SimpleModal } from '$scripts/modals'
 	import type { SubjectController } from '$scripts/controllers'
 
 	// Components
@@ -16,32 +17,42 @@
 	// Assets
 	import trash_icon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class DeleteModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			delete_modal = delete_modal // Trigger reactivity
+			await subject.delete()
+			$graph = $graph // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let subject: SubjectController
 
 	// Modal
-	let delete_modal: Modal
+	let delete_modal = new DeleteModal()
 
 </script>
 
 
 <!-- Markup -->
 
-<Modal bind:this={delete_modal}>
+<Modal bind:this={delete_modal.modal}>
 	<h3 slot="header"> Delete Subject </h3>
 	Are you sure you want to delete this subject? This action cannot be undone.
 
 	<svelte:fragment slot="footer">
 		<LinkButton on:click={() => delete_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			await subject.delete()
-			$graph = $graph
-			delete_modal.hide()
-		}}> Delete </Button>
+		<Button
+			disabled={delete_modal.disabled}
+			on:click={async () => await delete_modal.submit()}
+		> Delete </Button>
 	</svelte:fragment>
 </Modal>
 
-<div class="row">
+<div class="subject-row">
 	<IconButton scale
 		src={trash_icon}
 		description="Delete Subject"
@@ -86,7 +97,7 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.row
+	.subject-row
 		display: grid
 		grid-template: "delete name style preview" auto / $total-icon-size 1fr 1fr $total-icon-size
 		grid-gap: $form-small-gap
diff --git a/src/routes/app/graph/[graph]/editor/SubjectTab.svelte b/src/routes/app/graph/[graph]/editor/SubjectTab.svelte
index fc6c80db..6ce65163 100644
--- a/src/routes/app/graph/[graph]/editor/SubjectTab.svelte
+++ b/src/routes/app/graph/[graph]/editor/SubjectTab.svelte
@@ -25,7 +25,7 @@
 
 </script>
 
-<div class="tab">
+<div class="subject-tab">
 
 	<!-- Subjects -->
 	{#if filtered_subjects.length === 0}
@@ -79,7 +79,7 @@
 	$left-gutter: $total-icon-size * 3 + $form-small-gap * 3
 	$right-gutter: $total-icon-size + $form-small-gap
 
-	.tab
+	.subject-tab
 		display: flex
 		flex-flow: column nowrap
 		gap: $form-small-gap
diff --git a/src/routes/app/home/+page.svelte b/src/routes/app/home/+page.svelte
index 3404a370..01f29219 100644
--- a/src/routes/app/home/+page.svelte
+++ b/src/routes/app/home/+page.svelte
@@ -82,9 +82,9 @@
 			}
 
 			// Create program
-			const program = await ProgramController.create(cache, this.trimmed_name)
-			$programs = [...$programs, program] // Trigger reactivity
+			const program = ProgramController.create(cache, this.trimmed_name)
 			this.hide()
+			$programs = [...$programs, await program] // Trigger reactivity
 		}
 	}
 
@@ -164,9 +164,9 @@
 			}
 
 			// Create course
-			const course = await CourseController.create(cache, this.trimmed_code, this.trimmed_name)
-			$courses = [...$courses, course] // Trigger reactivity
+			const course = CourseController.create(cache, this.trimmed_code, this.trimmed_name)
 			this.hide()
+			$courses = [...$courses, await course] // Trigger reactivity
 		}
 	}
 
diff --git a/src/routes/app/program/[program]/settings/CourseRow.svelte b/src/routes/app/program/[program]/settings/CourseRow.svelte
index 0dd8d9d9..3eb2b365 100644
--- a/src/routes/app/program/[program]/settings/CourseRow.svelte
+++ b/src/routes/app/program/[program]/settings/CourseRow.svelte
@@ -4,59 +4,67 @@
 
 	// Internal dependencies
 	import { program } from './stores'
+	import { SimpleModal } from '$scripts/modals'
 	import type { CourseController } from '$scripts/controllers'
 
 	// Components
 	import LinkButton from '$components/LinkButton.svelte'
 	import IconButton from '$components/IconButton.svelte'
-	import ListRow from '$components/ListRow.svelte'
 	import Button from '$components/Button.svelte'
 	import Modal from '$components/Modal.svelte'
 
 	// Assets
 	import trashIcon from '$assets/trash-icon.svg'
 
+	// Helpers
+	class UnassignModal extends SimpleModal {
+		async submit() {
+			this.disabled = true
+			unassign_modal = unassign_modal // Trigger reactivity
+			$program.unassignCourse(course)
+			await $program.save()
+			$program = $program // Trigger reactivity
+			this.hide()
+		}
+	}
+
 	// Exports
 	export let course: CourseController
 
 	// Variables
-	let remove_modal: Modal
+	let unassign_modal = new UnassignModal()
 
 </script>
 
 
 <!-- Markup -->
 
-<Modal bind:this={remove_modal}>
+<Modal bind:this={unassign_modal.modal}>
 	<h3 slot="header"> Unnassign Course </h3>
 	Are you certain you want to unnassign {course.code} {course.name} from this program?
 
 	<svelte:fragment slot="footer">
-		<LinkButton on:click={() => remove_modal.hide()}> Cancel </LinkButton>
-		<Button on:click={async () => {
-			$program.removeCourse(course)
-			await $program.save()
-			$program = $program // Trigger reactivity
-			remove_modal.hide()
-		}}> Unassign </Button>
+		<LinkButton on:click={() => unassign_modal.hide()}> Cancel </LinkButton>
+		<Button
+			disabled={unassign_modal.disabled}
+			on:click={async () => await unassign_modal.submit()}
+		> Unassign </Button>
 	</svelte:fragment>
 </Modal>
 
-<ListRow>
-	<div class="grid">
-		<IconButton 
-			src={trashIcon}
-			description="Unassign course"
-			on:click={() => remove_modal.show()}
-		/>
+<span class="course-row">
+	<IconButton 
+		src={trashIcon}
+		description="Unassign course"
+		on:click={() => unassign_modal.show()}
+	/>
 
-		{course.code} {course.name}
+	{course.code} {course.name}
 
-		<LinkButton href="/app/course/{course.id}/settings">
-			Course Settings
-		</LinkButton>
-	</div>
-</ListRow>
+	<LinkButton href="/app/course/{course.id}/settings">
+		Course Settings
+	</LinkButton>
+</span>
 
 
 <!-- Styles -->
@@ -67,12 +75,26 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
-	.grid
+	.course-row
 		display: grid
 		grid-template: "trash name settings" auto / $total-icon-size 1fr max-content
 		grid-gap: $form-small-gap
 		place-items: center start
 
+		box-sizing: content-box
+		height: $list-row-height
+		padding: $input-thin-padding $input-thick-padding
+
+		color: $dark-gray
+		border-bottom: 1px solid $gray
+
+		&:first-of-type
+			margin-top: -$input-thin-padding
+
+		&:last-of-type
+			border-bottom: none
+			margin-bottom: -$input-thin-padding
+
 		:global(.link-button)
 			justify-self: end
 
diff --git a/src/routes/app/program/[program]/settings/CoursesCard.svelte b/src/routes/app/program/[program]/settings/CoursesCard.svelte
index 3d5fc9d5..47c12ad7 100644
--- a/src/routes/app/program/[program]/settings/CoursesCard.svelte
+++ b/src/routes/app/program/[program]/settings/CoursesCard.svelte
@@ -55,7 +55,9 @@
 				return
 			}
 
-			$program.addCourse(this.course!)
+			this.disabled = true
+			assign_course_modal = assign_course_modal // Trigger reactivity
+			$program.assignCourse(this.course!)
 			await $program.save()
 			$program = $program // Trigger reactivity
 			this.hide()
@@ -138,6 +140,8 @@
 			}
 
 			// Create course
+			this.disabled = true
+			new_course_modal = new_course_modal // Trigger reactivity
 			const course = await CourseController.create($program.cache, this.trimmed_code, this.trimmed_name, $program)
 			$courses = [...$courses, course] // Trigger reactivity
 			$program = $program
@@ -167,7 +171,7 @@
 
 		<footer>
 			<Button
-				disabled={new_course_modal.validate().severity === Severity.error}
+				disabled={new_course_modal.disabled}
 				on:click={async () => await new_course_modal.submit()}
 			> Create </Button>
 			<Feedback data={new_course_modal.validate()} />
@@ -191,7 +195,7 @@
 
 		<footer>
 			<Button
-				disabled={assign_course_modal.validate().severity === Severity.error}
+				disabled={assign_course_modal.disabled}
 				on:click={async () => await assign_course_modal.submit()}
 			> Assign </Button>
 			<Feedback data={assign_course_modal.validate()} />
diff --git a/src/routes/app/program/[program]/settings/MemberCard.svelte b/src/routes/app/program/[program]/settings/MemberCard.svelte
index 26ffa68e..fc7790c9 100644
--- a/src/routes/app/program/[program]/settings/MemberCard.svelte
+++ b/src/routes/app/program/[program]/settings/MemberCard.svelte
@@ -64,10 +64,12 @@
                 return
             }
 
+            this.disabled = true
+            member_modal = member_modal // Trigger reactivity
             if (this.permission === 'EDITOR') {
-                $program.addEditor(this.user!)
+                $program.assignEditor(this.user!)
             } else {
-                $program.addAdmin(this.user!)
+                $program.assignAdmin(this.user!)
             }
 
             await $program.save()
@@ -121,7 +123,7 @@
 
 		<footer>
 			<Button
-				disabled={member_modal.validate().severity === Severity.error}
+				disabled={member_modal.disabled}
 				on:click={async () => await member_modal.submit()}
 			> Assign </Button>
 			<Feedback data={member_modal.validate()} />

From f90d8ac5836b8d4017a7c584aa1fd950713b7446 Mon Sep 17 00:00:00 2001
From: Bram Kreulen <boazkreulen.main@gmail.com>
Date: Tue, 19 Nov 2024 19:35:36 +0100
Subject: [PATCH 2/5] layout editor

---
 src/lib/components/Graph.svelte               |   72 ++
 src/lib/components/GraphSVG.svelte            |  153 ---
 src/lib/components/Infobox.svelte             |   55 -
 src/lib/components/LinkButton.svelte          |    1 +
 .../scripts/controllers/GraphController.ts    |    2 +-
 .../scripts/controllers/LectureController.ts  |  112 +-
 src/lib/scripts/controllers/NodeController.ts |    7 +-
 .../controllers/RelationControllers.ts        |    2 +-
 src/lib/scripts/settings.ts                   |   13 +-
 src/lib/scripts/svg/GraphSVG.ts               | 1025 +++++++++++++++++
 src/lib/scripts/svg/NodeSVG.ts                |  186 +++
 src/lib/scripts/svg/OverlaySVG.ts             |  110 ++
 src/lib/scripts/svg/RelationSVG.ts            |  103 ++
 src/lib/scripts/svg/index.ts                  |    5 +
 src/lib/scripts/types/editor.ts               |   12 +-
 src/lib/scripts/types/index.ts                |   11 +-
 .../course/[course]/overview/GraphRow.svelte  |    2 +-
 .../app/graph/[graph]/editor/+page.svelte     |  215 +++-
 .../graph/[graph]/editor/LectureHeader.svelte |    2 +-
 .../graph/[graph]/editor/LectureRow.svelte    |    4 +-
 20 files changed, 1799 insertions(+), 293 deletions(-)
 create mode 100644 src/lib/components/Graph.svelte
 delete mode 100644 src/lib/components/GraphSVG.svelte
 delete mode 100644 src/lib/components/Infobox.svelte
 create mode 100644 src/lib/scripts/svg/GraphSVG.ts
 create mode 100644 src/lib/scripts/svg/NodeSVG.ts
 create mode 100644 src/lib/scripts/svg/OverlaySVG.ts
 create mode 100644 src/lib/scripts/svg/RelationSVG.ts
 create mode 100644 src/lib/scripts/svg/index.ts

diff --git a/src/lib/components/Graph.svelte b/src/lib/components/Graph.svelte
new file mode 100644
index 00000000..9dfe510a
--- /dev/null
+++ b/src/lib/components/Graph.svelte
@@ -0,0 +1,72 @@
+
+<script lang="ts">
+
+	// Internal dependencies
+	import type { GraphSVG } from '$scripts/svg'
+
+	// Assets
+	import zoom_out_icon from '$assets/zoom-out-icon.svg'
+	import zoom_in_icon from '$assets/zoom-in-icon.svg'
+
+	// Exports
+	export let graphSVG: GraphSVG
+
+</script>
+
+<!-- Markup -->
+
+<div class="graph">
+	<svg use:graphSVG.attach />
+
+	{#if graphSVG.interactive}
+		<div class="zoom">
+			<button on:click={() => graphSVG.zoomIn()}><img src={zoom_in_icon} alt="Zoom in"></button>
+			<button on:click={() => graphSVG.zoomOut()}><img src={zoom_out_icon} alt="Zoom out"></button>
+		</div>
+	{/if}
+</div>
+
+<!-- Styles -->
+
+<style lang="sass">
+
+	@use "$styles/variables.sass" as *
+	@use "$styles/palette.sass" as *
+
+	.graph
+		position: relative
+		width: 100%
+		height: 650px
+
+		svg
+			width: 100%
+			height: 100%
+
+		.zoom
+			position: absolute
+			bottom: 0
+			right: 0
+
+			display: flex
+			flex-flow: column nowrap
+			padding: $card-thin-padding
+
+			button
+				box-sizing: content-box
+
+				width: 1.75rem
+				height: 1.75rem
+				padding: $input-icon-padding
+
+				cursor: pointer
+
+				img
+					width: 100%
+					height: 100%
+
+					transform-origin: center
+					pointer-events: none
+
+				&:hover img
+					scale: $scale-on-hover
+</style>
diff --git a/src/lib/components/GraphSVG.svelte b/src/lib/components/GraphSVG.svelte
deleted file mode 100644
index b4daebd2..00000000
--- a/src/lib/components/GraphSVG.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-
-<script lang="ts">
-
-
-	// Internal imports
-	import { GraphSVG, View } from '$scripts/d3'
-	import { graph } from '$stores'
-	
-	// Components
-	import Dropdown from './Dropdown.svelte'
-
-	// Assets
-	import zoomInIcon from '$assets/zoom-in-icon.svg'
-	import zoomOutIcon from '$assets/zoom-out-icon.svg'
-
-	// Exports
-	export let interactive = true
-	export const controller = new GraphSVG($graph, interactive)
-
-</script>
-
-
-<!-- Markup -->
-
-
-<div class="tabular">
-    <div class="tabs">
-        <button
-			class="tab first"
-            class:active={controller.view === View.domains}
-            on:click={() => controller.view = View.domains}
-        > Domains </button>
-
-        <button
-			class="tab"
-            class:active={controller.view === View.subjects}
-            on:click={() => controller.view = View.subjects}
-        > Subjects </button>
-
-        <button
-			class="tab last"
-            class:active={controller.view === View.lectures}
-            on:click={() => controller.view = View.lectures}
-        > Lectures </button>
-
-		<Dropdown id=lecture" placeholder="Choose a Lecture" options={$graph.lecture_options} bind:value={controller.lecture} />
-    </div>
-
-	<svg use:controller.attach />
-
-	{#if interactive}
-		<div class="controls">
-			<button on:click={() => controller.zoomIn()}><img src={zoomInIcon} alt=""></button>
-			<button on:click={() => controller.zoomOut()}><img src={zoomOutIcon} alt=""></button>
-		</div>
-	{/if}
-</div>
-
-
-<!-- Styles -->
-
-
-<style lang="sass">
-
-	@use "$styles/variables.sass" as *
-	@use "$styles/palette.sass" as *
-
-	.tabular
-		display: flex
-		flex-flow: column nowrap
-		position: relative
-
-		height: 100%
-
-		border-radius: $border-radius
-		border: 1px solid $gray
-
-		svg
-			width: 100%
-			height: 100%
-
-		.controls
-			position: absolute
-			bottom: 0
-			right: 0
-
-			display: flex
-			flex-flow: column nowrap
-			padding: $card-thin-padding
-
-			button
-				box-sizing: content-box
-
-				width: 1.75rem
-				height: 1.75rem
-				padding: $input-icon-padding
-
-				cursor: pointer
-
-				img
-					width: 100%
-					height: 100%
-
-					transform-origin: center
-					pointer-events: none
-
-				&:hover img
-					scale: $scale-on-hover
-		
-		.tabs
-			display: flex
-			flex-flow: row nowrap
-			align-items: center
-
-			position: relative
-
-			background: $light-gray
-			border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
-			border-bottom: 1px solid $gray
-
-			.tab
-				position: relative
-
-				padding: $card-thin-padding $card-thick-padding
-
-				border-color: $gray
-				border-style: solid
-				border-width: 0 0 0 1px
-				border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
-
-				text-align: left
-
-				&.active
-					margin-bottom: -1px
-
-					background: $white
-					border-bottom-color: $white
-					border-width: 0 1px 1px 1px
-
-					& ~ .tab
-						border-width: 0 1px 0 0
-
-				&.first
-					border-left: none !important
-				
-				&.last
-					margin-right: auto
-
-			:global(.dropdown)	
-				max-width: 20rem
-				margin: 0 $card-thick-padding 0 $card-thick-padding
-
-</style>
\ No newline at end of file
diff --git a/src/lib/components/Infobox.svelte b/src/lib/components/Infobox.svelte
deleted file mode 100644
index 50a9a7a6..00000000
--- a/src/lib/components/Infobox.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-
-<script lang="ts">
-
-    import infoIcon from '$assets/info-icon.svg'
-
-</script>
-
-<!-- Markdown -->
-
-
-<div class="infobox">
-    <div class="sidebar">
-        <img src={infoIcon} alt="">
-    </div>
-    <div class="content">
-        <slot />
-    </div>
-</div>
-
-
-<!-- Styles -->
-
-
-<style lang="sass">
-
-    @use "$styles/variables.sass" as *
-    @use "$styles/palette.sass" as *
-
-    .infobox
-        display: flex
-        flex-flow: row nowrap
-
-        margin: $card-thin-padding $card-thick-padding
-
-        border: 1px solid $purple
-        border-radius: $border-radius
-        background-color: rgba($purple, 0.1)
-
-        .sidebar
-            display: flex
-            align-items: center
-
-            padding: $input-icon-padding
-            background-color: $purple
-
-            img
-                width: 1.5rem
-                height: 1.5rem
-                filter: $white-filter
-        
-        .content
-            padding: $card-thin-padding
-            color: $dark-purple
-
-</style>
\ No newline at end of file
diff --git a/src/lib/components/LinkButton.svelte b/src/lib/components/LinkButton.svelte
index b3571e15..2f9f1b1f 100644
--- a/src/lib/components/LinkButton.svelte
+++ b/src/lib/components/LinkButton.svelte
@@ -61,6 +61,7 @@
 		padding: $input-thin-padding
 
 		color: $purple
+		white-space: nowrap
 		border: 1px solid transparent
 
 		cursor: pointer
diff --git a/src/lib/scripts/controllers/GraphController.ts b/src/lib/scripts/controllers/GraphController.ts
index 0256baf3..1c4d0608 100644
--- a/src/lib/scripts/controllers/GraphController.ts
+++ b/src/lib/scripts/controllers/GraphController.ts
@@ -720,7 +720,7 @@ class GraphController {
 			const copied_lecture = await lecture.copy(copied_graph)
 
 			// Assign copied subjects
-			for (const subject of lecture.subjects) {
+			for (const subject of lecture.present_subjects) {
 				const copied_subject = subject_map.get(subject.id)
 				if (copied_subject === undefined) {
 					throw new Error(`GraphError: Subject incorrectly copied`)
diff --git a/src/lib/scripts/controllers/LectureController.ts b/src/lib/scripts/controllers/LectureController.ts
index 4149e4d1..2a1d5e93 100644
--- a/src/lib/scripts/controllers/LectureController.ts
+++ b/src/lib/scripts/controllers/LectureController.ts
@@ -10,7 +10,8 @@ import { Validation, Severity } from '$scripts/validation'
 import {
 	ControllerCache,
 	GraphController,
-	SubjectController
+	SubjectController,
+	SubjectRelationController
 } from '$scripts/controllers'
 
 import { validSerializedLecture } from '$scripts/types'
@@ -32,7 +33,7 @@ class LectureController {
 
 	private _unsaved: boolean = false
 	private _graph?: GraphController
-	private _subjects?: SubjectController[]
+	private _present_subjects?: SubjectController[]
 
 	private constructor(
 		public cache: ControllerCache,
@@ -41,7 +42,7 @@ class LectureController {
 		private _name: string,
 		private _order: number,
 		private _graph_id?: number,
-		private _subject_ids?: number[]
+		private _present_subject_ids?: number[]
 	) {
 		this.cache.add(this)
 	}
@@ -96,34 +97,34 @@ class LectureController {
 		return this._graph
 	}
 
-	// Subject properties
-	get subject_ids(): number[] {
-		if (this._subject_ids === undefined)
+	// Present subject properties
+	get present_subject_ids(): number[] {
+		if (this._present_subject_ids === undefined)
 			throw new Error('LectureError: Subject data unknown')
-		return Array.from(this._subject_ids)
+		return Array.from(this._present_subject_ids)
 	}
 
-	get subjects(): SubjectController[] {
-		if (this._subject_ids === undefined)
+	get present_subjects(): SubjectController[] {
+		if (this._present_subject_ids === undefined)
 			throw new Error('LectureError: Subject data unknown')
-		if (this._subjects !== undefined)
-			return Array.from(this._subjects)
+		if (this._present_subjects !== undefined)
+			return Array.from(this._present_subjects)
 
 		// Fetch subjects from cache
-		this._subjects = this._subject_ids.map(id => this.cache.findOrThrow(SubjectController, id))
-		return Array.from(this._subjects)
+		this._present_subjects = this._present_subject_ids.map(id => this.cache.findOrThrow(SubjectController, id))
+		return Array.from(this._present_subjects)
 	}
 
 	get subject_options(): DropdownOption<SubjectController>[] {
 		return this.graph.subjects.map(subject => {
 			const validation = new Validation()
 
-			if (this.subject_ids.includes(subject.id)) {
+			if (this.present_subject_ids.includes(subject.id)) {
 				validation.add({
 					severity: Severity.error,
 					short: 'Already assigned here'
 				})
-			} else if (this.graph.lectures.find(lecture => lecture.subject_ids.includes(subject.id))) {
+			} else if (this.graph.lectures.find(lecture => lecture.present_subject_ids.includes(subject.id))) {
 				validation.add({
 					severity: Severity.warning,
 					short: 'Already assigned elsewhere'
@@ -138,14 +139,59 @@ class LectureController {
 		})
 	}
 
+	// Past subject properties
+	get past_subjects(): SubjectController[] {
+		const result: SubjectController[] = []
+		for (const subject of this.present_subjects) {
+			for (const parent of subject.parents) {
+				if (!result.includes(parent) && !this.present_subjects.includes(parent))
+					result.push(parent)
+			}
+		}
+
+		return result
+	}
+
+	// Future subject properties
+	get future_subjects(): SubjectController[] {
+		const result: SubjectController[] = []
+		for (const subject of this.present_subjects) {
+			for (const child of subject.children) {
+				if (!result.includes(child) && !this.present_subjects.includes(child))
+					result.push(child)
+			}
+		}
+
+		return result
+	}
+
+	// Subject properties
+	get subjects(): SubjectController[] {
+		return this.present_subjects
+			.concat(this.past_subjects)
+			.concat(this.future_subjects)
+	}
+
+	// Relation properties
+	get relations(): SubjectRelationController[] {
+		return this.graph.subject_relations
+			.filter(relation => relation.parent !== null && relation.child !== null)
+			.filter(relation => this.present_subjects.includes(relation.parent!) || this.present_subjects.includes(relation.child!))
+	}
+
+	// Height properties
+	get max_height(): number {
+		return Math.max(this.present_subjects.length, this.past_subjects.length, this.future_subjects.length)
+	}
+
 	// --------------------> Assignments
 
 	assignSubject(subject: SubjectController, mirror: boolean = true) {
-		if (this._subject_ids !== undefined) {
-			if (this._subject_ids.includes(subject.id))
+		if (this._present_subject_ids !== undefined) {
+			if (this._present_subject_ids.includes(subject.id))
 				throw new Error(`LectureError: Subject with ID ${subject.id} already assigned to lecture with ID ${this.id}`)
-			this._subject_ids.push(subject.id)
-			this._subjects?.push(subject)
+			this._present_subject_ids.push(subject.id)
+			this._present_subjects?.push(subject)
 			this._unchanged = false
 			this._unsaved = true
 		}
@@ -156,11 +202,11 @@ class LectureController {
 	}	
 
 	unassignSubject(subject: SubjectController, mirror: boolean = true) {
-		if (this._subject_ids !== undefined) {
-			if (!this._subject_ids.includes(subject.id))
+		if (this._present_subject_ids !== undefined) {
+			if (!this._present_subject_ids.includes(subject.id))
 				throw new Error(`LectureError: Subject with ID ${subject.id} not assigned to lecture with ID ${this.id}`)
-			this._subject_ids = this._subject_ids.filter(id => id !== subject.id)
-			this._subjects = this._subjects?.filter(s => s.id !== subject.id)
+			this._present_subject_ids = this._present_subject_ids.filter(id => id !== subject.id)
+			this._present_subjects = this._present_subjects?.filter(s => s.id !== subject.id)
 			this._unchanged = false
 			this._unsaved = true
 		}
@@ -209,7 +255,7 @@ class LectureController {
 		const validation = new Validation()
 		if (!strict && this._unchanged) return validation
 
-		if (this.subject_ids.length === 0) {
+		if (this.present_subject_ids.length === 0) {
 			validation.add({
 				severity: Severity.warning,
 				short: 'Lecture has no subjects',
@@ -218,8 +264,8 @@ class LectureController {
 			})
 		} else if (this.graph.lectures
 			.find(lecture => 
-				lecture.id !== this.id && lecture.subject_ids.find(
-					id => this.subject_ids.includes(id)
+				lecture.id !== this.id && lecture.present_subject_ids.find(
+					id => this.present_subject_ids.includes(id)
 				)
 			)
 		) {
@@ -282,8 +328,8 @@ class LectureController {
 			// Update lecture where necessary
 			if (lecture._graph_id === undefined)
 				lecture._graph_id = data.graph_id
-			if (lecture._subject_ids === undefined)
-				lecture._subject_ids = data.subject_ids
+			if (lecture._present_subject_ids === undefined)
+				lecture._present_subject_ids = data.subject_ids
 
 			return lecture
 		}
@@ -305,7 +351,7 @@ class LectureController {
 			&& this.trimmed_name === data.name
 			&& this.order === data.order
 			&& (this._graph_id === undefined    || data.graph_id === undefined    || this._graph_id === data.graph_id)
-			&& (this._subject_ids === undefined || data.subject_ids === undefined || compareArrays(this._subject_ids, data.subject_ids))
+			&& (this._present_subject_ids === undefined || data.subject_ids === undefined || compareArrays(this._present_subject_ids, data.subject_ids))
 	}
 
 	reduce(): SerializedLecture {
@@ -315,7 +361,7 @@ class LectureController {
 			name: this.trimmed_name,
 			order: this.order,
 			graph_id: this._graph_id,
-			subject_ids: this._subject_ids
+			subject_ids: this._present_subject_ids
 		}
 	}
 
@@ -342,8 +388,8 @@ class LectureController {
 		// Unassign graph and subjects
 		if (this._graph_id !== undefined)
 			this.graph.unassignLecture(this)
-		if (this._subject_ids !== undefined)
-			for (const subject of this.subjects)
+		if (this._present_subject_ids !== undefined)
+			for (const subject of this.present_subjects)
 				subject.unassignFromLecture(this, false)
 		
 		// Call the API to delete the lecture
@@ -371,7 +417,7 @@ class LectureController {
 	matchesQuery(query: string): boolean {
 		const lower_query = query.toLowerCase()
 		const lower_name = this.trimmed_name.toLowerCase()
-		const lower_subjects = this.subjects.map(subject => subject.trimmed_name.toLowerCase())
+		const lower_subjects = this.present_subjects.map(subject => subject.trimmed_name.toLowerCase())
 
 		return lower_name.includes(lower_query) || lower_subjects.some(subject => subject.includes(lower_query))
 	}
diff --git a/src/lib/scripts/controllers/NodeController.ts b/src/lib/scripts/controllers/NodeController.ts
index 307cb62b..e8277eea 100644
--- a/src/lib/scripts/controllers/NodeController.ts
+++ b/src/lib/scripts/controllers/NodeController.ts
@@ -24,6 +24,8 @@ export { NodeController }
 
 abstract class NodeController<T extends DomainController | SubjectController> {
 	public uuid: string = uuid.v4()
+	public fx?: number
+	public fy?: number
 
 	protected _unsaved: boolean = false
 	protected _graph?: GraphController
@@ -40,7 +42,10 @@ abstract class NodeController<T extends DomainController | SubjectController> {
 		protected _graph_id?: number,
 		protected _parent_ids?: number[],
 		protected _child_ids?: number[]
-	) { }
+	) {
+		this.fx = this._x
+		this.fy = this._y
+	}
 
 	// --------------------> Getters & Setters
 
diff --git a/src/lib/scripts/controllers/RelationControllers.ts b/src/lib/scripts/controllers/RelationControllers.ts
index 62bcaaef..46c236c4 100644
--- a/src/lib/scripts/controllers/RelationControllers.ts
+++ b/src/lib/scripts/controllers/RelationControllers.ts
@@ -22,7 +22,7 @@ export { RelationController, DomainRelationController, SubjectRelationController
 abstract class RelationController<T extends DomainController | SubjectController> {
 	uuid: string = uuid.v4()
 
-	protected _unchanged: boolean = false
+	protected _unchanged: boolean = true
 	protected _parent: T | null = null
 	protected _child: T | null = null
 
diff --git a/src/lib/scripts/settings.ts b/src/lib/scripts/settings.ts
index faee5e71..0911744d 100644
--- a/src/lib/scripts/settings.ts
+++ b/src/lib/scripts/settings.ts
@@ -25,15 +25,16 @@ export const FEEDBACK_FADE_DURATION: Milliseconds = 500
 // -------------------> Editor settings
 
 // Grid settings
-export const GRID_COLOR = '#a4a4a4'
+export const GRID_PADDING: GridUnits = 5
 export const GRID_UNIT: Scalar = 10
+export const GRID_COLOR = '#a4a4a4'
 
 // Zoom settings
 export const MIN_ZOOM: Scalar = 0
 export const MAX_ZOOM: Scalar = 1.5
 export const ZOOM_STEP: Scalar = 1.5
 
-// Field settings
+// Node settings
 export const NODE_WIDTH: GridUnits  = 16
 export const NODE_HEIGHT: GridUnits = 8
 export const NODE_MARGIN: GridUnits = 1.5
@@ -61,8 +62,12 @@ export const OVERLAY_SMALL_FONT: Pixels = 20
 export const OVERLAY_FADE_OUT: Milliseconds = 500
 export const OVERLAY_LINGER: Milliseconds = 1500
 
+// Simulation settings
+export const CENTER_FORCE: Scalar = 0.05
+export const CHARGE_FORCE: Scalar = -15
+
 // Animation settings
-export const FADE_DURATION: Milliseconds = 0
+export const FADE_DURATION: Milliseconds = 200
 export const ANIMATION_DURATION: Milliseconds = 1000
 export const SHAKE = {
 	delay: 150,
@@ -81,7 +86,7 @@ export const SHAKE = {
 	}
 }
 
-// Node style constants
+// Node style settings
 const top = STROKE_WIDTH / 2
 const right = NODE_WIDTH * GRID_UNIT - STROKE_WIDTH / 2
 const bottom = NODE_HEIGHT * GRID_UNIT - STROKE_WIDTH / 2
diff --git a/src/lib/scripts/svg/GraphSVG.ts b/src/lib/scripts/svg/GraphSVG.ts
new file mode 100644
index 00000000..79b0a782
--- /dev/null
+++ b/src/lib/scripts/svg/GraphSVG.ts
@@ -0,0 +1,1025 @@
+
+// External imports
+import * as d3 from 'd3'
+
+// Internal imports
+import * as settings from '$scripts/settings'
+import { Severity } from '$scripts/validation'
+
+import {
+	NodeSVG,
+	RelationSVG,
+	OverlaySVG
+} from '$scripts/svg'
+
+import {
+	GraphController,
+	DomainController,
+	SubjectController,
+	RelationController,
+	LectureController,
+	NodeController
+} from '$scripts/controllers'
+
+import type {
+	EditorView
+} from '$scripts/types'
+
+// Exports
+export { GraphSVG, SVGState }
+
+
+// --------------------> Classes
+
+
+const ANIMATE = () => {}
+
+enum SVGState {
+	hidden,		// When the graph is not displayed
+	static,		// When the graph cannot be interacted with
+	dynamic,	// When the graph can be interacted with
+	animating,	// When the graph is in the process of transitioning
+	lecture,	// When the graph is displaying a lecture 
+	broken		// When the current view is broken
+}
+
+class GraphSVG {
+	private _graph: GraphController
+	private _interactive: boolean
+	private _view: EditorView = 'domains'
+	private _state: SVGState = SVGState.hidden
+	private _lecture: LectureController | null = null
+
+	private svg?: SVGSVGElement
+	private zoom?: d3.ZoomBehavior<SVGSVGElement, unknown>
+	private simulation?: d3.Simulation<d3.SimulationNodeDatum, undefined>
+
+	private keys: { [key: string]: boolean } = {}
+
+	public shift_zoom: boolean = true
+
+	constructor(graph: GraphController, interactive: boolean = true) {
+		this._interactive = interactive
+		this._graph = graph
+	}
+
+	// -----------------> Getters & Setters
+
+	get graph() {
+		return this._graph
+	}
+
+	get interactive() {
+		return this._interactive
+	}
+
+	get view() {
+		return this._view
+	}
+
+	set view(view: EditorView) {
+		if (this.view === view || this.state === SVGState.animating)
+			return
+
+		// If hidden, save view for later
+		if (this.state === SVGState.hidden) {
+			this._view = view
+			return
+		}
+
+		// Validate view
+		if (!this.validateView(view)) {
+			this.state = SVGState.broken
+			this._view = view
+			return
+		}
+
+		// Transition to new view
+		switch (this.view) {
+			case 'domains':
+				switch (view) {
+					case 'subjects':
+						this.domainToSubject()
+						break
+					case 'lectures':
+						this.domainToLecture()
+						break
+				} break
+			case 'subjects':
+				switch (view) {
+					case 'domains':
+						this.subjectToDomain()
+						break
+					case 'lectures':
+						this.subjectToLecture()
+						break
+				} break
+			case 'lectures':
+				switch (view) {
+					case 'domains':
+						this.lectureToDomain()
+						break
+					case 'subjects':
+						this.lectureToSubject()
+						break
+				} break
+		}
+
+		this._view = view
+	}
+
+	get state() {
+		return this._state
+	}
+
+	private set state(state: SVGState) {
+		if (this.state === state)
+			return
+		if (this.svg === undefined || this.simulation === undefined)
+			throw new Error('Failed to set state: GraphSVG not attached to DOM')
+
+		// If moving out of dynamic state:
+		//  - Disable pointer events
+		//  - Fix all nodes
+		//  - Save all nodes
+		//  - Stop simulation
+		if (this.state === SVGState.dynamic) {
+			d3.select(this.svg)
+				.attr('pointer-events', 'none')
+				.select('#content')
+					.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+						.call(NodeSVG.setFixed, true)
+						.each(async node => await node.save())
+
+			this.simulation.stop()
+		}
+
+		// If moving out of broken state:
+		//  - Reset overlay
+		else if (this.state === SVGState.broken) {
+			d3.select<SVGGElement, unknown>('#overlay')
+				.call(OverlaySVG.reset)
+		}
+
+		// If moving out of hidden state:
+		//  - Set initial view
+		else if (this.state === SVGState.hidden) {
+			switch (this.view) {
+				case 'domains':
+					this.DomainsView()
+					break
+				case 'subjects':
+					this.SubjectsView()
+					break
+				case 'lectures':
+					this.LecturesView()
+					break
+			}
+		}
+
+		this._state = state // NEW STATE
+
+		// If moving into dynamic state:
+		//  - Enable pointer events
+		if (state === SVGState.dynamic) {
+			d3.select(this.svg)
+				.attr('pointer-events', 'all')
+		}
+
+		// If moving into broken state:
+		//  - Set overlay to broken
+		else if (state === SVGState.broken) {
+			d3.select<SVGGElement, unknown>('#overlay')
+				.call(OverlaySVG.broken)
+		}
+
+		// If moving into hidden state:
+		//  - Clear background
+		//  - Clear content
+		else if (state === SVGState.hidden) {
+			this.clearBackground()
+			this.clearContent()
+		}
+	}
+
+	get lecture() {
+		return this._lecture
+	}
+
+	set lecture(lecture: LectureController | null) {
+		if (this.svg === undefined)
+			throw new Error('Failed to set lecture: GraphSVG not attached to DOM')
+		if (this.lecture === lecture || this.state === SVGState.animating)
+			return
+
+		this._lecture = lecture
+
+		// Validate lecture
+		if (!this.validateView(this.view)) {
+			this.state = SVGState.broken
+			return
+		}
+
+		// Update content
+		if (this.view === 'lectures') {
+			this.setBackground('lectures')
+			this.moveCamera(0, 0, 1)
+
+			if (this.lecture === null) {
+				this.clearContent()
+			} else {
+				this.setContent(this.lecture.subjects, this.lecture.relations)
+				this.moveContent(this.lecture.subjects, this.lectureTransform(0, 0))
+			}
+		}
+
+		// Update highlights
+		d3.select(this.svg)
+			.select('#content')
+				.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+					.call(NodeSVG.updateHighlight, this.lecture)
+	}
+
+	get autolayout_enabled() {
+		return d3.select('#content')
+			.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node:not(.fixed)')
+				.size() > 0
+	}
+
+	// -----------------> Public Methods
+
+	attach(element: SVGSVGElement) {
+
+		// SVG setup
+		this.svg = element
+		const svg = d3.select<SVGSVGElement, unknown>(this.svg)
+			.attr('pointer-events', this.state === SVGState.dynamic ? 'all' : 'none')
+
+		const definitions = svg.append('defs')
+		svg.append('g').attr('id', 'background')
+		svg.append('g').attr('id', 'content')
+		svg.append('g').attr('id', 'overlay')
+
+		// Arrowhead pattern
+		definitions.append('marker')
+			.attr('id', 'arrowhead')
+			.attr('viewBox', '0 0 10 10')
+			.attr('refX', 5)
+			.attr('refY', 5)
+			.attr('markerWidth', 6)
+			.attr('markerHeight', 6)
+			.attr('orient', 'auto-start-reverse')
+			.append('path')
+				.attr('fill', 'context-fill')
+				.attr('d', `M 0 0 L 10 5 L 0 10 Z`)
+
+		// Grid pattern
+		const grid = definitions.append('pattern')
+			.attr('id', 'grid')
+			.attr('width', settings.GRID_UNIT)
+			.attr('height', settings.GRID_UNIT)
+			.attr('patternUnits', 'userSpaceOnUse')
+
+		grid.append('line')
+			.attr('x1', 0)
+			.attr('y1', 0)
+			.attr('x2', settings.GRID_UNIT * settings.MAX_ZOOM)
+			.attr('y2', 0)
+			.attr('stroke', settings.GRID_COLOR)
+
+		grid.append('line')
+			.attr('x1', 0)
+			.attr('y1', 0)
+			.attr('x2', 0)
+			.attr('y2', settings.GRID_UNIT * settings.MAX_ZOOM)
+			.attr('stroke', settings.GRID_COLOR)
+
+		// Highlight filter
+		definitions.append('filter')
+			.attr('id', 'highlight')
+			.append('feDropShadow')
+				.attr('dx', 0)
+				.attr('dy', 0)
+				.attr('stdDeviation', settings.NODE_HIGHLIGHT_DEVIATION)
+				.attr('flood-opacity', settings.NODE_HIGHLIGHT_OPACITY)
+				.attr('flood-color', settings.NODE_HIGHLIGHT_COLOR)
+
+		// Zoom warning
+		svg.on('wheel', () => {
+			if (!this.shift_zoom || this.keys.Shift) return
+			d3.select<SVGGElement, unknown>('#overlay')
+				.call(OverlaySVG.shiftWarning, this)
+		})
+
+		// Keylogging
+		d3.select('body')
+			.on('keydown', event => {
+				this.keys[event.key] = true
+			})
+			.on('keyup', event => {
+				this.keys[event.key] = false
+			})
+
+		// Zoom & pan
+		this.zoom = d3.zoom<SVGSVGElement, unknown>()
+			.scaleExtent([settings.MIN_ZOOM, settings.MAX_ZOOM])
+			.filter((event) => !this.shift_zoom || this.keys.Shift || event.type === 'mousedown')
+			.on('zoom', event => {
+
+				// Update content
+				svg.select('#content')
+					.attr('transform', event.transform)
+
+				// Update grid
+				svg.select('#grid')
+					.attr('x', event.transform.x)
+					.attr('y', event.transform.y)
+					.attr('width', settings.GRID_UNIT * event.transform.k)
+					.attr('height', settings.GRID_UNIT * event.transform.k)
+					.selectAll('line')
+						.style('opacity', Math.min(1, event.transform.k))
+			})
+
+		svg
+			.call(this.zoom)
+			.on('dblclick.zoom', null)
+
+		// Simulation
+		this.simulation = d3.forceSimulation<d3.SimulationNodeDatum>()
+			.force('x', d3.forceX(0).strength(settings.CENTER_FORCE))
+			.force('y', d3.forceY(0).strength(settings.CENTER_FORCE))
+			.force('charge', d3.forceManyBody().strength(settings.CHARGE_FORCE))
+			.on('tick', () => {
+				d3.select('#content')
+					.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+						.call(NodeSVG.updatePosition)
+			})
+
+		// Exit hidden state
+		this.simulation.stop() // Stop simulation to prevent node movement on first render
+		this.state = this.view === 'lectures' ? SVGState.lecture : this.interactive ? SVGState.dynamic : SVGState.static
+
+		return {
+			destroy: () => this.detach()
+		}
+	}
+
+	detach() {
+		if (this.svg === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		// Exit current state
+		this.state = SVGState.hidden
+
+		// Clear SVG
+		d3.select(this.svg)
+			.selectAll('*')
+				.remove()
+
+		// Reset properties
+		this.svg = undefined
+		this.zoom = undefined
+		this.simulation = undefined
+		this.keys = {}
+	}
+
+	zoomIn() {
+		if (this.svg === undefined || this.zoom === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+		if (this.state !== SVGState.dynamic)
+			return
+
+		d3.select<SVGSVGElement, unknown>(this.svg)
+			.transition()
+				.duration(settings.ANIMATION_DURATION)
+				.ease(d3.easeSinInOut)
+			.call(this.zoom.scaleBy, settings.ZOOM_STEP)
+	}
+
+	zoomOut() {
+		if (this.svg === undefined || this.zoom === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+		if (this.state !== SVGState.dynamic)
+			return
+
+		d3.select<SVGSVGElement, unknown>(this.svg)
+			.transition()
+				.duration(settings.ANIMATION_DURATION)
+				.ease(d3.easeSinInOut)
+			.call(this.zoom.scaleBy, 1 / settings.ZOOM_STEP)
+	}
+
+	findGraph() {
+		if (this.state !== SVGState.dynamic) return
+
+		this.state = SVGState.animating
+		const bbx = this.boundingBox(this.view === 'domains' ? this.graph.domains : this.graph.subjects)
+		this.moveCamera(bbx.x, bbx.y, bbx.k, () => {
+			this.state = SVGState.dynamic
+		})
+	}
+
+	toggleAutolayout() {
+		if (this.simulation === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+		if (this.state !== SVGState.dynamic)
+			return
+
+		const autolayout_enabled = this.autolayout_enabled
+		d3.select('#content')
+			.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+				.call(NodeSVG.setFixed, autolayout_enabled)
+				.each(async node => { if (autolayout_enabled) await node.save() })
+
+		if (autolayout_enabled) {
+			this.simulation.stop()
+		} else {
+			this.microwaveSimulation()
+		}
+	}
+
+	microwaveSimulation() {
+		if (this.simulation === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+		this.simulation
+			.alpha(1)
+			.restart()
+	}
+
+	// -----------------> Private Methods
+
+	private validateView(view: EditorView) {
+		switch (view) {
+			case 'domains':
+				return this.graph.domains.every(domain => domain.validate().severity !== Severity.error)
+
+			case 'subjects':
+				return this.graph.subjects.every(subject => subject.validate().severity !== Severity.error)
+
+			case 'lectures':
+				return (
+					this.lecture === null ||
+					this.lecture.validate().severity !== Severity.error &&
+					this.lecture.present_subjects.every(subject => subject.validate().severity !== Severity.error)
+				)
+		}
+	}
+
+	private boundingBox(nodes: NodeController<DomainController | SubjectController>[]) {
+		if (this.svg === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		let min_x = Infinity
+		let min_y = Infinity
+		let max_x = -Infinity
+		let max_y = -Infinity
+
+		// Find most outer nodes
+		for (const node of nodes) {
+			min_x = Math.min(min_x, node.x - settings.NODE_MARGIN)
+			min_y = Math.min(min_y, node.y - settings.NODE_MARGIN)
+			max_x = Math.max(max_x, node.x + settings.NODE_WIDTH + settings.NODE_MARGIN)
+			max_y = Math.max(max_y, node.y + settings.NODE_HEIGHT + settings.NODE_MARGIN)
+		}
+
+		// Apply grid padding
+		min_x -= settings.GRID_PADDING
+		min_y -= settings.GRID_PADDING
+		max_x += settings.GRID_PADDING
+		max_y += settings.GRID_PADDING
+
+		// Find center and zoom
+		return {
+			x: (max_x + min_x) / 2,
+			y: (max_y + min_y) / 2,
+			k: Math.max(
+				settings.MIN_ZOOM,
+				Math.min(
+					settings.MAX_ZOOM,
+					this.svg.clientWidth / ((max_x - min_x) * settings.GRID_UNIT),
+					this.svg.clientHeight / ((max_y - min_y) * settings.GRID_UNIT)
+				)
+			)
+		}
+	}
+
+	private moveCamera(x: number, y: number, k: number, callback?: () => void) {
+		if (this.svg === undefined || this.zoom === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		// Call zoom with custom transform
+		d3.select<SVGSVGElement, unknown>(this.svg)
+			.transition()
+				.duration(callback !== undefined ? settings.ANIMATION_DURATION : 0)
+				.ease(d3.easeSinInOut)
+			.call(
+				this.zoom.transform,
+				d3.zoomIdentity
+					.translate(
+						this.svg.clientWidth / 2 - k * x * settings.GRID_UNIT,
+						this.svg.clientHeight / 2 - k * y * settings.GRID_UNIT
+					)
+					.scale(k)
+			)
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.ANIMATION_DURATION)
+		}
+	}
+
+	private panCamera(x: number, y: number, callback?: () => void) {
+		if (this.svg === undefined || this.zoom === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		// Call zoom with custom transform
+		d3.select<SVGSVGElement, unknown>(this.svg)
+			.transition()
+				.duration(callback !== undefined ? settings.ANIMATION_DURATION : 0)
+				.ease(d3.easeSinInOut)
+			.call(
+				this.zoom.translateTo,
+				x * settings.GRID_UNIT,
+				y * settings.GRID_UNIT
+			)
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.ANIMATION_DURATION)
+		}
+	}
+
+	private zoomCamera(k: number, callback?: () => void) {
+		if (this.svg === undefined || this.zoom === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		// Call zoom with custom transform
+		d3.select<SVGSVGElement, unknown>(this.svg)
+			.transition()
+				.duration(callback !== undefined ? settings.ANIMATION_DURATION : 0)
+				.ease(d3.easeSinInOut)
+			.call(this.zoom.scaleTo, k)
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.ANIMATION_DURATION)
+		}
+	}
+
+	private setBackground(view: EditorView) {
+		if (this.svg === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+		const background = d3.select<SVGGElement, unknown>('#background')
+
+		// Remove old background
+		this.clearBackground()
+
+		// Lecture background
+		if (view === 'lectures') {
+			const size = this.lecture?.max_height || 0
+			const dx = (this.svg.clientWidth - 3 * settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT) / 2
+			const dy = (this.svg.clientHeight - (size * settings.NODE_HEIGHT + (size + 1) * settings.LECTURE_PADDING + settings.LECTURE_HEADER_HEIGHT) * settings.GRID_UNIT) / 2
+
+			// Past subject colunm
+			background.append('rect')
+				.attr('x', dx + settings.STROKE_WIDTH / 2)
+				.attr('y', dy + settings.STROKE_WIDTH / 2 + settings.LECTURE_HEADER_HEIGHT * settings.GRID_UNIT)
+				.attr('width', settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT)
+				.attr('height', (size * settings.NODE_HEIGHT + (size + 1) * settings.LECTURE_PADDING) * settings.GRID_UNIT)
+				.attr('stroke-width', settings.STROKE_WIDTH)
+				.attr('fill', 'transparent')
+				.attr('stroke', 'black')
+
+			background.append('text')
+				.attr('x', dx + (settings.STROKE_WIDTH + settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT) / 2)
+				.attr('y', dy)
+				.text('Past Topics')
+				.attr('text-anchor', 'middle')
+				.attr('dominant-baseline', 'hanging')
+				.style('font-size', settings.LECTURE_FONT_SIZE)
+
+			// Present subject column
+			background.append('rect')
+				.attr('x', dx + settings.STROKE_WIDTH / 2 + settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT)
+				.attr('y', dy + settings.STROKE_WIDTH / 2 + settings.LECTURE_HEADER_HEIGHT * settings.GRID_UNIT)
+				.attr('width', settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT)
+				.attr('height', (size * settings.NODE_HEIGHT + (size + 1) * settings.LECTURE_PADDING) * settings.GRID_UNIT)
+				.attr('stroke-width', settings.STROKE_WIDTH)
+				.attr('fill', 'transparent')
+				.attr('stroke', 'black')
+
+			background.append('text')
+				.attr('x', dx + (settings.STROKE_WIDTH + 3 * settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT) / 2)
+				.attr('y', dy)
+				.text('This Lecture')
+				.attr('text-anchor', 'middle')
+				.attr('dominant-baseline', 'hanging')
+				.style('font-size', settings.LECTURE_FONT_SIZE)
+
+			// Future subject column
+			background.append('rect')
+				.attr('x', dx + settings.STROKE_WIDTH / 2 + 2 * settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT)
+				.attr('y', dy + settings.STROKE_WIDTH / 2 + settings.LECTURE_HEADER_HEIGHT * settings.GRID_UNIT)
+				.attr('width', settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT)
+				.attr('height', (size * settings.NODE_HEIGHT + (size + 1) * settings.LECTURE_PADDING) * settings.GRID_UNIT)
+				.attr('stroke-width', settings.STROKE_WIDTH)
+				.attr('fill', 'transparent')
+				.attr('stroke', 'black')
+
+			background.append('text')
+				.attr('x', dx + (settings.STROKE_WIDTH + 5 * settings.LECTURE_COLUMN_WIDTH * settings.GRID_UNIT) / 2)
+				.attr('y', dy)
+				.text('Future Topics')
+				.attr('text-anchor', 'middle')
+				.attr('dominant-baseline', 'hanging')
+				.style('font-size', settings.LECTURE_FONT_SIZE)
+		}
+
+		// Grid background
+		else {
+			background.append('rect')
+				.attr('fill', 'url(#grid)')
+				.attr('width', '100%')
+				.attr('height', '100%')
+		}
+	}
+
+	private clearBackground() {
+		d3.select<SVGGElement, unknown>('#background')
+			.selectAll('*')
+				.remove()
+	}
+
+	private setContent(nodes: NodeController<DomainController | SubjectController>[], relations: RelationController<DomainController | SubjectController>[], callback?: () => void) {
+		if (this.simulation === undefined)
+			throw new Error('GraphSVG not attached to DOM')
+
+		const content = d3.select<SVGGElement, unknown>('#content')
+		const lecture = this.lecture
+		const graphSVG = this
+
+		// Update Nodes
+		content.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+			.data(nodes, node => node.uuid)
+			.join(
+				function(enter) {
+					return enter
+						.append('g')
+							.call(NodeSVG.create, graphSVG)
+							.call(NodeSVG.updateHighlight, lecture)
+							.style('opacity', 0)
+				},
+
+				function(update) {
+					return update
+						.call(NodeSVG.updateHighlight, lecture)
+				},
+
+				function(exit) {
+					return exit
+						.transition()
+							.duration(callback !== undefined ? settings.FADE_DURATION : 0)
+							.on('end', function() { d3.select(this).remove() }) // Use this instead of .remove() to circumvent pending transitions
+						.style('opacity', 0)
+				}
+			)
+			.transition()
+				.duration(callback !== undefined ? settings.FADE_DURATION : 0)
+			.style('opacity', 1)
+
+		// Update relations
+		content.selectAll<SVGLineElement, RelationController<DomainController | SubjectController>>('.relation')
+			.data(relations, relation => relation.uuid)
+			.join(
+				function(enter) {
+					return enter
+						.append('line')
+							.call(RelationSVG.create)
+							.style('opacity', 0)
+				},
+
+				function(update) {
+					return update
+				},
+
+				function(exit) {
+					return exit
+						.transition()
+							.duration(callback !== undefined ? settings.FADE_DURATION : 0)
+							.on('end', function() { d3.select(this).remove() }) // Use this instead of .remove() to circumvent pending transitions
+						.style('opacity', 0)
+				}
+			)
+			.transition()
+				.duration(callback !== undefined ? settings.FADE_DURATION : 0)
+			.style('opacity', 1)
+
+		// Update simulation
+		const links = relations.map(relation => ({ source: relation.parent!, target: relation.child!  }))
+		this.simulation
+			.nodes(nodes)
+			.force('link', d3.forceLink(links))
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.FADE_DURATION)
+		}
+	}
+
+	private moveContent(nodes: SubjectController[], transform: (node: SubjectController) => void, callback?: () => void) {
+
+		// Buffer node positions
+		const buffers = nodes.map(node => ({ node, x: node.x, y: node.y }))
+
+		// Set node positions
+		nodes.forEach(transform)
+
+		// Update nodes
+		d3.select<SVGGElement, unknown>('#content')
+			.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+				.call(NodeSVG.updatePosition, callback !== undefined)
+
+		// Restore node positions
+		for (const buffer of buffers) {
+			buffer.node.x = buffer.x
+			buffer.node.y = buffer.y
+		}
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.ANIMATION_DURATION)
+		}
+	}
+
+	private restoreContent(callback?: () => void) {
+
+		// Update nodes
+		d3.select<SVGGElement, unknown>('#content')
+			.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
+				.call(NodeSVG.updatePosition, callback !== undefined)
+
+		// Post-transition
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.ANIMATION_DURATION)
+		}
+	}
+
+	private clearContent(callback?: () => void) {
+		d3.select<SVGGElement, unknown>('#content')
+			.selectAll('*')
+				.transition()
+					.duration(callback !== undefined ? settings.FADE_DURATION : 0)
+					.ease(d3.easeSinInOut)
+					.on('end', function() { d3.select(this).remove() }) // Use this instead of .remove() to circumvent pending transitions
+				.style('opacity', 0)
+
+		if (callback) {
+			setTimeout(() => {
+				callback()
+			}, settings.FADE_DURATION)
+		}
+	}
+
+	private DomainsView() {
+		const bbx = this.boundingBox(this.graph.domains)
+		this.moveCamera(bbx.x, bbx.y, bbx.k)
+		this.setBackground('domains')
+		this.setContent(this.graph.domains, this.graph.domain_relations)
+	}
+
+	private SubjectsView() {
+		const bbx = this.boundingBox(this.graph.subjects)
+		this.moveCamera(bbx.x, bbx.y, bbx.k)
+		this.setBackground('subjects')
+		this.setContent(this.graph.subjects, this.graph.subject_relations)
+	}
+
+	private LecturesView() {
+		this.setBackground('lectures')
+		this.moveCamera(0, 0, 1)
+
+		if (this.lecture !== null) {
+			this.setContent(this.lecture.subjects, this.lecture.relations)
+			this.moveContent(this.lecture.subjects, this.lectureTransform(0, 0))
+		}
+	}
+
+	private domainToSubject() {
+		const bbx = this.boundingBox(this.graph.subjects)
+
+		if (this.state === SVGState.broken) {
+			this.state = SVGState.animating
+			this.moveCamera(bbx.x, bbx.y, bbx.k)
+			this.setContent(this.graph.subjects, this.graph.subject_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		this.setContent(this.graph.subjects, this.graph.subject_relations)
+		this.moveContent(this.graph.subjects, this.domainTransform)
+
+		this.moveCamera(bbx.x, bbx.y, bbx.k, ANIMATE)
+		this.restoreContent(() => {
+			this.state = this.interactive ? SVGState.dynamic : SVGState.static
+		})
+	}
+
+	private domainToLecture() {
+		if (this.lecture === null) {
+			this.setBackground('lectures')
+			this.clearContent()
+			this.state = SVGState.lecture
+
+			return
+		}
+
+		if (this.state === SVGState.broken) {
+			this.moveCamera(0, 0, 1)
+			this.setBackground('lectures')
+			this.setContent(this.lecture.subjects, this.lecture.relations)
+			this.moveContent(this.lecture.subjects, this.lectureTransform(0, 0))
+			this.state = SVGState.lecture
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		const bbx = this.boundingBox(this.graph.domains)
+		this.moveCamera(bbx.x, bbx.y, 1, ANIMATE)
+		this.setContent(this.lecture.subjects, this.lecture.relations)
+		this.moveContent(this.lecture.subjects, this.domainTransform)
+		this.moveContent(this.lecture.subjects, this.lectureTransform(bbx.x, bbx.y), () => {
+			this.setBackground('lectures')
+			this.state = SVGState.lecture
+		})
+	}
+
+	private subjectToDomain() {
+		const bbx = this.boundingBox(this.graph.domains)
+
+		if (this.state === SVGState.broken) {
+			this.state = SVGState.animating
+			this.moveCamera(bbx.x, bbx.y, bbx.k)
+			this.setContent(this.graph.domains, this.graph.domain_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		this.moveCamera(bbx.x, bbx.y, bbx.k, ANIMATE)
+		this.moveContent(this.graph.subjects, this.domainTransform, () => {
+			this.setContent(this.graph.domains, this.graph.domain_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+		})
+	}
+
+	private subjectToLecture() {
+		if (this.lecture === null) {
+			this.setBackground('lectures')
+			this.clearContent()
+			this.state = SVGState.lecture
+
+			return
+		}
+
+		if (this.state === SVGState.broken) {
+			this.moveCamera(0, 0, 1)
+			this.setBackground('lectures')
+			this.setContent(this.lecture.subjects, this.lecture.relations)
+			this.moveContent(this.lecture.subjects, this.lectureTransform(0, 0))
+			this.state = SVGState.lecture
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		const bbx = this.boundingBox(this.graph.subjects)
+		this.moveCamera(bbx.x, bbx.y, 1, ANIMATE)
+		this.setContent(this.lecture.subjects, this.lecture.relations, () => {
+			this.moveContent(this.lecture!.subjects, this.lectureTransform(bbx.x, bbx.y), () => {
+				this.setBackground('lectures')
+				this.state = SVGState.lecture
+			})
+		})
+	}
+
+	private lectureToDomain() {
+		const bbx = this.boundingBox(this.graph.domains)
+
+		if (this.state === SVGState.broken || this.lecture === null) {
+			this.state = SVGState.animating
+			this.setBackground('domains')
+			this.moveCamera(bbx.x, bbx.y, bbx.k)
+			this.setContent(this.graph.domains, this.graph.domain_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		this.panCamera(bbx.x, bbx.y)
+		this.setBackground('domains')
+		this.moveContent(this.lecture.subjects, this.lectureTransform(bbx.x, bbx.y))
+
+		this.zoomCamera(bbx.k, ANIMATE)
+		this.moveContent(this.lecture.subjects, this.domainTransform, () => {
+			this.setContent(this.graph.domains, this.graph.domain_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+		})
+	}
+
+	private lectureToSubject() {
+		const bbx = this.boundingBox(this.graph.subjects)
+
+		if (this.state === SVGState.broken || this.lecture === null) {
+			this.state = SVGState.animating
+			this.setBackground('subjects')
+			this.moveCamera(bbx.x, bbx.y, bbx.k)
+			this.setContent(this.graph.subjects, this.graph.subject_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+
+			return
+		}
+
+		this.state = SVGState.animating
+
+		this.panCamera(bbx.x, bbx.y)
+		this.setBackground('subjects')
+		this.moveContent(this.lecture.subjects, this.lectureTransform(bbx.x, bbx.y))
+
+		this.zoomCamera(bbx.k, ANIMATE)
+		this.restoreContent(() => {
+			this.setContent(this.graph.subjects, this.graph.subject_relations, () => {
+				this.state = this.interactive ? SVGState.dynamic : SVGState.static
+			})
+		})
+	}
+
+	private domainTransform(subject: SubjectController) {
+		subject.x = subject.domain!.x
+		subject.y = subject.domain!.y
+	}
+
+	private lectureTransform(x: number, y: number) {
+		const height = this.lecture?.max_height || 0
+		const past = this.lecture?.past_subjects
+		const present = this.lecture?.present_subjects
+		const future = this.lecture?.future_subjects
+
+		const dx = x - 3 * settings.LECTURE_COLUMN_WIDTH / 2
+		const dy = y - (settings.LECTURE_HEADER_HEIGHT + height * settings.NODE_HEIGHT + (height + 1) * settings.LECTURE_PADDING) / 2
+
+		return (subject: SubjectController) => {
+
+			// Set past subject positions to the right column
+			if (past?.includes(subject)) {
+				const index = past.indexOf(subject)
+				subject.x = dx + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + settings.LECTURE_PADDING
+				subject.y = dy + settings.LECTURE_HEADER_HEIGHT + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + (index + 1) * settings.LECTURE_PADDING + index * settings.NODE_HEIGHT
+				return
+			}
+
+			// Set present subject positions to the middle column
+			if (present?.includes(subject)) {
+				const index = present.indexOf(subject)
+				subject.x = dx + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + settings.LECTURE_COLUMN_WIDTH + settings.LECTURE_PADDING
+				subject.y = dy + settings.LECTURE_HEADER_HEIGHT + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + (index + 1) * settings.LECTURE_PADDING + index * settings.NODE_HEIGHT
+				return
+			}
+
+			// Set future subject positions to the left column
+			if (future?.includes(subject)) {
+				const index = future.indexOf(subject)
+				subject.x = dx + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + 2 * settings.LECTURE_COLUMN_WIDTH + settings.LECTURE_PADDING
+				subject.y = dy + settings.LECTURE_HEADER_HEIGHT + settings.STROKE_WIDTH / (2 * settings.GRID_UNIT) + (index + 1) * settings.LECTURE_PADDING + index * settings.NODE_HEIGHT
+				return
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/lib/scripts/svg/NodeSVG.ts b/src/lib/scripts/svg/NodeSVG.ts
new file mode 100644
index 00000000..cc0ab54f
--- /dev/null
+++ b/src/lib/scripts/svg/NodeSVG.ts
@@ -0,0 +1,186 @@
+
+// External imports
+import * as d3 from 'd3'
+
+// Internal imports
+import * as settings from '$scripts/settings'
+import { NODE_STYLES } from '$scripts/settings'
+
+import {
+	GraphSVG,
+	RelationSVG
+} from '$scripts/svg'
+
+import {
+	NodeController,
+	DomainController,
+	SubjectController,
+	RelationController,
+	LectureController
+} from '$scripts/controllers'
+
+// Exports
+export { NodeSVG }
+
+
+// --------------------> Classes
+
+type NodeSelection = d3.Selection<SVGGElement, NodeController<DomainController | SubjectController>, d3.BaseType, unknown>
+
+class NodeSVG {
+	static create(selection: NodeSelection, graphSVG: GraphSVG) {
+
+		// Node attributes
+		selection
+			.attr('id', node => node.uuid)
+			.attr('class', 'node fixed')
+			.attr('transform', node => `translate(
+				${node.x * settings.GRID_UNIT},
+				${node.y * settings.GRID_UNIT}
+			)`)
+
+		// Node outline
+		selection.append('path')
+			.attr('stroke-width', settings.STROKE_WIDTH)
+			.attr('stroke', node => NODE_STYLES[node.style!].stroke)
+			.attr('fill', node => NODE_STYLES[node.style!].fill)
+			.attr('d', node => NODE_STYLES[node.style!].path)
+
+		// Node text
+		selection.append('text')
+			.text(node => node.name!)
+			.style('text-anchor', 'middle')
+			.style('dominant-baseline', 'middle')
+			.style('font-size', settings.NODE_FONT_SIZE)
+
+		// Wrap text
+		selection
+			.selectAll('text')
+				.each(function() {
+					const max_width = (settings.NODE_WIDTH - 2 * settings.NODE_PADDING) * settings.GRID_UNIT
+					const middle_height = settings.NODE_HEIGHT / 2 * settings.GRID_UNIT
+					const middle_width = settings.NODE_WIDTH / 2 * settings.GRID_UNIT
+
+					// Select elements
+					const element = d3.select(this)
+					const text = element.text()
+					const words = text.split(/\s+/)
+					element.text(null)
+
+					// Make tspan
+					let tspan = element
+						.append('tspan')
+						.attr('x', middle_width)
+
+					// Get longest word
+					const longest = words.reduce((a, b) => a.length > b.length ? a : b)
+					tspan.text(longest)
+
+					// Scale font size
+					const scale = Math.min(1, max_width / tspan.node()!.getComputedTextLength())
+					const font_size = settings.NODE_FONT_SIZE * scale
+					element.attr('font-size', font_size)
+
+					// Wrap text
+					let line_count = 0
+					let line: string[] = []
+					for (const word of words) {
+						line.push(word)
+						tspan.text(line.join(' '))
+						if (tspan.node()!.getComputedTextLength() > max_width) {
+							line.pop()
+							tspan.text(line.join(' '))
+							line = [word]
+							tspan = element.append('tspan')
+								.attr('x', middle_width)
+								.attr('y', 0)
+								.attr('dy', ++line_count * 1.1 + 'em')
+								.text(word)
+						}
+					}
+
+					// Center vertically
+					element.selectAll('tspan')
+						.attr('y', middle_height - font_size * line_count * 1.1 / 2)
+				})
+
+		// Drag behaviour
+		selection.call(
+			d3.drag<SVGGElement, NodeController<DomainController | SubjectController>>()
+				.on('start', function() {
+					const selection = d3.select<SVGGElement, NodeController<DomainController | SubjectController>>(this)
+					selection.call(NodeSVG.setFixed, true)
+				})
+				.on('drag', function(event, node) {
+					const selection = d3.select<SVGGElement, NodeController<DomainController | SubjectController>>(this)
+					node.x = node.x + event.dx / settings.GRID_UNIT
+					node.y = node.y + event.dy / settings.GRID_UNIT
+					node.fx = node.x
+					node.fy = node.y
+
+					NodeSVG.updatePosition(selection)
+					graphSVG.microwaveSimulation()
+				})
+				.on('end', async function(_ ,node) {
+					const selection = d3.select<SVGGElement, NodeController<DomainController | SubjectController>>(this)
+					node.x = Math.round(node.x)
+					node.y = Math.round(node.y)
+					node.fx = node.x
+					node.fy = node.y
+
+					NodeSVG.updatePosition(selection)
+					await node.save()
+				})
+		)
+	}
+
+	static updatePosition(selection: NodeSelection, animated: boolean = false) {
+		const content = d3.select<SVGGElement, unknown>('g#content')
+
+		// Raise nodes
+		selection.raise()
+
+		// Update node position
+		selection
+			.transition()
+				.duration(animated ? settings.ANIMATION_DURATION : 0)
+				.ease(d3.easeSinInOut)
+			.attr('transform', node => `translate(
+				${node.x * settings.GRID_UNIT},
+				${node.y * settings.GRID_UNIT}
+			)`)
+
+		// Update relations
+		selection.each(function(node) {
+			content.selectAll<SVGLineElement, RelationController<DomainController | SubjectController>>('.relation')
+				.filter(relation => relation.parent === node || relation.child === node)
+				.call(RelationSVG.update, animated)
+		})
+	}
+
+	static updateHighlight(selection: NodeSelection, lecture: LectureController | null) {
+		selection
+			.each(function(node) {
+				const highlight =
+					node instanceof DomainController  && lecture?.present_subjects.some(subject => subject.domain === node) ||
+					node instanceof SubjectController && lecture?.present_subjects.includes(node)
+
+				d3.select(this)
+					.attr('filter', highlight ? 'url(#highlight)' : null)
+			})
+	}
+
+	static setFixed(selection: NodeSelection, fixed: boolean) {
+		selection
+			.classed('fixed', fixed)
+			.attr('stroke-dasharray', fixed ? null : settings.STROKE_DASHARRAY)
+			.each(node => {
+				node.x = fixed ? Math.round(node.x) : node.x
+				node.y = fixed ? Math.round(node.y) : node.y
+				node.fx = fixed ? node.x : undefined
+				node.fy = fixed ? node.y : undefined
+			})
+
+		NodeSVG.updatePosition(selection)
+	}
+}
diff --git a/src/lib/scripts/svg/OverlaySVG.ts b/src/lib/scripts/svg/OverlaySVG.ts
new file mode 100644
index 00000000..614248b6
--- /dev/null
+++ b/src/lib/scripts/svg/OverlaySVG.ts
@@ -0,0 +1,110 @@
+
+// Internal imports
+import * as settings from '$scripts/settings'
+import { GraphSVG } from '$scripts/svg'
+
+// Exports
+export { OverlaySVG }
+
+
+// --------------------> Classes
+
+type OverlaySelection = d3.Selection<SVGGElement, unknown, HTMLElement, any>
+
+class OverlaySVG {
+	static reset(selection: OverlaySelection) {
+		selection
+			.interrupt()
+			.attr('class', null)
+			.style('opacity', 1)
+			.style('pointer-events', 'none')
+			.selectAll('*')
+				.remove()
+	}
+
+	static broken(selection: OverlaySelection) {
+		if (selection.classed('broken')) return
+		OverlaySVG.reset(selection)
+
+		selection
+			.attr('class', 'broken')
+
+		selection.append('rect')
+			.attr('width', '100%')
+			.attr('height', '100%')
+			.attr('fill', 'white')			
+
+		const text = selection.append('text')
+		text.append('tspan')
+			.text('Oops!')
+			.attr('x', '50%')
+			.attr('y', '50%')
+			.attr('font-size', settings.OVERLAY_BIG_FONT)
+			.attr('dominant-baseline', 'middle')
+			.attr('text-anchor', 'middle')
+			.attr('fill', 'black')
+
+		text.append('tspan')
+			.text('There are outstanding errors in this graph')
+			.attr('x', '50%')
+			.attr('y', '50%')
+			.attr('dy', settings.OVERLAY_BIG_FONT)
+			.attr('font-size', settings.OVERLAY_SMALL_FONT)
+			.attr('dominant-baseline', 'middle')
+			.attr('text-anchor', 'middle')
+			.attr('fill', 'black')
+	}
+
+	static shiftWarning(selection: OverlaySelection, graphSVG: GraphSVG) {
+		if (!selection.classed('shift-scroll')) {
+			OverlaySVG.reset(selection)
+
+			selection
+                .attr('class', 'shift-scroll')
+            
+		    selection.append('rect')
+		    	.attr('width', '100%')
+		    	.attr('height', '100%')
+		    	.attr('background-color', 'black')
+		    	.style('opacity', settings.OVERLAY_OPACITY)
+
+		    const text = selection.append('text')
+		    text.append('tspan')
+		    	.text('Shift + Scroll to zoom')
+                .attr('x', '50%')
+		    	.attr('y', '50%')
+		    	.attr('font-size', settings.OVERLAY_BIG_FONT)
+		    	.attr('dominant-baseline', 'middle')
+                .attr('text-anchor', 'middle')
+		    	.attr('fill', 'white')
+
+		    text.append('tspan')
+		    	.text('disable this')
+                .attr('x', '50%')
+		    	.attr('y', '50%')
+		    	.attr('dy', settings.OVERLAY_BIG_FONT)
+		    	.attr('font-size', settings.OVERLAY_SMALL_FONT)
+		    	.attr('text-decoration', 'underline')
+		    	.attr('dominant-baseline', 'middle')
+		    	.attr('text-anchor', 'middle')
+		    	.style('cursor', 'pointer')
+		    	.attr('fill', 'white')
+				.on('click', () => {
+					graphSVG.shift_zoom = false
+					OverlaySVG.reset(selection)
+				})
+		}
+
+		selection
+			.interrupt()
+			.style('opacity', 1)
+			.style('pointer-events', 'all')
+			.transition()
+				.duration(settings.OVERLAY_FADE_OUT)
+				.delay(settings.OVERLAY_LINGER)
+			.style('opacity', 0)
+			.on('end', () => {
+				OverlaySVG.reset(selection)
+			})
+	}
+}
\ No newline at end of file
diff --git a/src/lib/scripts/svg/RelationSVG.ts b/src/lib/scripts/svg/RelationSVG.ts
new file mode 100644
index 00000000..06ccc7da
--- /dev/null
+++ b/src/lib/scripts/svg/RelationSVG.ts
@@ -0,0 +1,103 @@
+
+// External imports
+import * as d3 from 'd3'
+
+// Internal imports
+import * as settings from '$scripts/settings'
+import { NODE_STYLES } from '$scripts/settings'
+
+import {
+	DomainController, 
+	SubjectController, 
+	RelationController 
+} from '$scripts/controllers'
+
+// Exports
+export { RelationSVG }
+
+
+// --------------------> Classes
+
+type RelationSelection = d3.Selection<SVGLineElement, RelationController<DomainController | SubjectController>, d3.BaseType, unknown>
+
+class RelationSVG {
+	static create(selection: RelationSelection) {
+		selection
+			.attr('id', relation => relation.uuid)
+			.attr('class', 'relation')
+			.attr('stroke-width', settings.STROKE_WIDTH)
+			.attr('stroke', relation => NODE_STYLES[relation.parent!.style!].stroke)
+			.attr('fill', relation => NODE_STYLES[relation.parent!.style!].stroke)
+			.attr('marker-end', 'url(#arrowhead)')
+			.call(RelationSVG.update)
+	}
+
+	static update(selection: RelationSelection, animated: boolean = false) {
+
+		// Lower relations
+		selection.lower()
+
+		// Update relations
+		selection.each(function(relation) {
+			const line = d3.select(this)
+
+			/* We are calculating the line connecting two nodes.
+			 * It should start at the center of the start node and end at the BOUNDS of the end node.
+			 * We first find some properties of the nodes: their size, center, and the difference between them.
+			 * As the calculation of the line depends on the placement of the start node relative to the end node,
+			 * we split the plane in 4 quadrants, originating from the start node, following its diagonals.
+			 * We then use simple geometry, based on the quadrant the end node resides in, to calculate the bounds of the end node.
+			 * The final line is a line from the center of the start node to the calculated bounds of the end node.
+			 */
+
+			// Half the width and height of the nodes
+			const halfWidth  = settings.NODE_WIDTH / 2 + settings.NODE_MARGIN
+			const halfHeight = settings.NODE_HEIGHT / 2 + settings.NODE_MARGIN
+
+			// Center of the nodes
+			const cxStart = relation.parent!.x - settings.NODE_MARGIN + halfWidth
+			const cyStart = relation.parent!.y - settings.NODE_MARGIN + halfHeight
+			const cxEnd = relation.child!.x - settings.NODE_MARGIN + halfWidth
+			const cyEnd = relation.child!.y - settings.NODE_MARGIN + halfHeight
+
+			// Difference between the centers
+			const dx = cxEnd - cxStart
+			const dy = cyEnd - cyStart
+
+			// Check for overlap
+			if (Math.abs(dx) < halfWidth && Math.abs(dy) < halfHeight) {
+				line.transition()
+						.duration(animated ? settings.ANIMATION_DURATION : 0)
+						.ease(d3.easeSinInOut)
+					.attr('x1', cxStart * settings.GRID_UNIT)
+					.attr('y1', cyStart * settings.GRID_UNIT)
+					.attr('x2', cxEnd * settings.GRID_UNIT)
+					.attr('y2', cyEnd * settings.GRID_UNIT)
+
+				return
+			}
+
+			// Bounds
+			const ratio = halfHeight / halfWidth
+			const posBound =  ratio * dx + cyStart
+			const negBound = -ratio * dx + cyStart
+
+			const sign = cyEnd > negBound ? -1 : 1
+			const vertQuad = (cyEnd > posBound) == (cyEnd > negBound)
+
+			// Final line
+			const x1 = cxStart
+			const y1 = cyStart
+			const x2 = cxEnd + sign * (vertQuad ? halfHeight * dx / dy : halfWidth)
+			const y2 = cyEnd + sign * (vertQuad ? halfHeight : halfWidth * dy / dx)
+
+			line.transition()
+					.duration(animated ? settings.ANIMATION_DURATION : 0)
+					.ease(d3.easeSinInOut)
+				.attr('x1', x1 * settings.GRID_UNIT)
+				.attr('y1', y1 * settings.GRID_UNIT)
+				.attr('x2', x2 * settings.GRID_UNIT)
+				.attr('y2', y2 * settings.GRID_UNIT)
+		})
+	}
+}
diff --git a/src/lib/scripts/svg/index.ts b/src/lib/scripts/svg/index.ts
new file mode 100644
index 00000000..1f113e5c
--- /dev/null
+++ b/src/lib/scripts/svg/index.ts
@@ -0,0 +1,5 @@
+
+export { GraphSVG, SVGState } from './GraphSVG'
+export { NodeSVG } from './NodeSVG'
+export { RelationSVG } from './RelationSVG'
+export { OverlaySVG } from './OverlaySVG'
\ No newline at end of file
diff --git a/src/lib/scripts/types/editor.ts b/src/lib/scripts/types/editor.ts
index 6db7b5e9..9410cd68 100644
--- a/src/lib/scripts/types/editor.ts
+++ b/src/lib/scripts/types/editor.ts
@@ -1,2 +1,12 @@
 
-export type EditorView = 'domains' | 'subjects' | 'lectures'
\ No newline at end of file
+export type EditorType = 'nodes' | 'layout'
+
+export function validEditorType(type: any): type is EditorType {
+    return type === 'nodes' || type === 'layout'
+}
+
+export type EditorView = 'domains' | 'subjects' | 'lectures'
+
+export function validEditorView(view: any): view is EditorView {
+    return view === 'domains' || view === 'subjects' || view === 'lectures'
+}
\ No newline at end of file
diff --git a/src/lib/scripts/types/index.ts b/src/lib/scripts/types/index.ts
index 0fed3872..69fe8d85 100644
--- a/src/lib/scripts/types/index.ts
+++ b/src/lib/scripts/types/index.ts
@@ -15,6 +15,11 @@ export {
 	validPermission
 } from './permissions'
 
+export {
+	validEditorType,
+	validEditorView
+} from './editor'
+
 export { validDomainStyle } from './styles'
 
 export type {
@@ -44,6 +49,10 @@ export type {
 	Permission
 } from './permissions'
 
+export type {
+	EditorView,
+	EditorType
+} from './editor'
+
 export type { DropdownOption } from './dropdown'
 export type { DomainStyle } from './styles'
-export type { EditorView } from './editor'
diff --git a/src/routes/app/course/[course]/overview/GraphRow.svelte b/src/routes/app/course/[course]/overview/GraphRow.svelte
index 77ccf9e8..1f6fdae6 100644
--- a/src/routes/app/course/[course]/overview/GraphRow.svelte
+++ b/src/routes/app/course/[course]/overview/GraphRow.svelte
@@ -176,7 +176,7 @@
 
 	.graph-row
 		display: grid
-		grid-template: "delete copy edit view name link" auto / $input-icon-size $input-icon-size $input-icon-size $input-icon-size 1fr max-content
+		grid-template: "delete copy edit view name link" auto / $input-icon-size $input-icon-size calc($input-icon-size - 2.5px) $input-icon-size 1fr max-content
 		grid-gap: $form-small-gap
 		place-items: center start
 
diff --git a/src/routes/app/graph/[graph]/editor/+page.svelte b/src/routes/app/graph/[graph]/editor/+page.svelte
index 7b4bd24e..0abf47d4 100644
--- a/src/routes/app/graph/[graph]/editor/+page.svelte
+++ b/src/routes/app/graph/[graph]/editor/+page.svelte
@@ -3,14 +3,14 @@
 <script lang="ts">
 
 	// External dependencies
-	import { onMount } from 'svelte'
-	import { page } from '$app/stores'
 	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
 
 	import type { PageData } from './$types'
 
 	// Internal dependencies
 	import { graph } from './stores'
+	import { GraphSVG, SVGState } from '$scripts/svg'
 
 	import {
 		ControllerCache,
@@ -21,6 +21,16 @@
 		LectureController
 	} from '$scripts/controllers'
 
+	import {
+		validEditorType,
+		validEditorView
+	} from '$scripts/types'
+
+	import type {
+		EditorType,
+		EditorView
+	} from '$scripts/types'
+
 	// Components
 	import GeneralCard from './GeneralCard.svelte'
 	import DomainTab from './DomainTab.svelte'
@@ -30,9 +40,17 @@
 	import LectureTab from './LectureTab.svelte'
 	import LectureHeader from './LectureHeader.svelte'
 
+	import LinkButton from '$components/LinkButton.svelte'
+	import Dropdown from '$components/Dropdown.svelte'
 	import Loading from '$components/Loading.svelte'
+	import Button from '$components/Button.svelte'
 	import Layout from '$components/Layout.svelte'
 	import Navbar from '$components/Navbar.svelte'
+	import Modal from '$components/Modal.svelte'
+	import Graph from '$components/Graph.svelte'
+
+	// Assets
+	import info_icon from '$assets/info-icon.svg'
 
 	// Functions
 	async function revive() {
@@ -60,27 +78,41 @@
 		awaited_domains.forEach(domain => DomainController.revive(cache, domain))
 		awaited_subjects.forEach(subject => SubjectController.revive(cache, subject))
 		awaited_lectures.forEach(lecture => LectureController.revive(cache, lecture))
+
+		// Initialize SVG
+		graphSVG = new GraphSVG($graph)
+
+		// Initialize editor
+		navigateEditor(
+			validEditorType(editor_type) ? editor_type : 'nodes',
+			validEditorView(editor_view) ? editor_view : 'domains'
+		)
 	}
 
-	function setActiveTab(tab: string) {
-		active_tab = tab
-		search_params.set('tab', tab)
+	function navigateEditor(type: EditorType, view: EditorView) {
+		if (graphSVG.state === SVGState.animating) return
+
+		editor_view = view
+		editor_type = type
+
+		search_params.set('type', editor_type)
+		search_params.set('view', editor_view)
 		goto(`?${search_params.toString()}`, { replaceState: true })
+
+		graphSVG.view = view
 	}
 
 	// Initialization
 	export let data: PageData
 
-	const search_params = $page.url.searchParams
 	const cache = new ControllerCache()
+	let graphSVG: GraphSVG
 
-	let active_tab = search_params.get('tab')
+	const search_params = $page.url.searchParams
+	let editor_type = search_params.get('type') as EditorType
+	let editor_view = search_params.get('view') as EditorView
 
-	onMount(() => {
-		if (active_tab !== 'domains' && active_tab !== 'subjects' && active_tab !== 'lectures') {
-			setActiveTab('domains')
-		}
-	})
+	let autolayout_modal: Modal
 
 </script>
 
@@ -88,6 +120,29 @@
 <!-- Markup -->
 
 
+<Modal bind:this={autolayout_modal}>
+	<h3 slot="header"> Autolayout </h3>
+	Are you certain you want to start the autolayout process? This will irreversibly rearrange all nodes and relations in the graph.
+
+	<div class="infobox">
+		<div class="sidebar">
+			<img src={info_icon} alt="">
+		</div>
+		<div class="content">
+			During autolayout, your graph will become <b>force directed</b>. This means that nodes will be <b>attracted</b> to their parents and children, and <b>repelled</b> by other nodes.
+			<b>Unlocked</b> nodes are subject to these forces, and have a dashed outline. Click or drag a node to <b>lock</b> it in place.
+		</div>
+	</div>
+
+	<svelte:fragment slot="footer">
+		<LinkButton on:click={() => autolayout_modal.hide()}> Cancel </LinkButton>
+		<Button on:click={() => {
+			graphSVG.toggleAutolayout()
+			autolayout_modal.hide()
+		}}> Start Autolayout </Button>
+	</svelte:fragment>
+</Modal>
+
 {#await revive()}
 	<Loading />
 {:then}
@@ -117,42 +172,77 @@
 				<div class="tabs">
 					<button
 						class="tab"
-						class:active={active_tab === 'domains'}
-						on:click={() => setActiveTab('domains')}
+						class:active={editor_view === 'domains'}
+						on:click={() => navigateEditor(editor_type, 'domains')}
 					> Domains </button>
 
 					<button
 						class="tab"
-						class:active={active_tab === 'subjects'}
-						on:click={() => setActiveTab('subjects')}
+						class:active={editor_view === 'subjects'}
+						on:click={() => navigateEditor(editor_type, 'subjects')}
 					> Subjects </button>
 
 					<button
 						class="tab"
-						class:active={active_tab === 'lectures'}
-						on:click={() => setActiveTab('lectures')}
+						class:active={editor_view === 'lectures'}
+						on:click={() => navigateEditor(editor_type, 'lectures')}
 					> Lectures </button>
-				
-					<div class="dynamic-border" />
-				</div>
-			
-				<div class="header">
-					{#if active_tab === 'domains'}
-						<DomainHeader />
-					{:else if active_tab === 'subjects'}
-						<SubjectHeader />
-					{:else if active_tab === 'lectures'}
-						<LectureHeader />
-					{/if}
+
+					<div class="toolbar">
+						{#if editor_type === 'nodes'}
+							<LinkButton on:click={() => navigateEditor('layout', editor_view)}>
+								Edit Layout
+							</LinkButton>
+						{:else}
+							<LinkButton on:click={() => navigateEditor('nodes', editor_view)}>
+								Edit Nodes & Relations
+							</LinkButton>
+
+							<Dropdown
+								id="lecture"
+								placeholder="Select lecture"
+								bind:value={graphSVG.lecture}
+								options={graphSVG.graph.lecture_options}
+							/>
+
+							<Button on:click={() => graphSVG.findGraph()}>
+								Find Graph
+							</Button>
+
+							<Button on:click={() => {
+								if (graphSVG.autolayout_enabled) {
+									graphSVG.toggleAutolayout()
+								} else {
+									autolayout_modal.show()
+								}
+							}}>
+								Toggle Autolayout
+							</Button>
+						{/if}
+					</div>
 				</div>
+
+				{#if editor_type === 'nodes'}
+					<div class="header">
+						{#if editor_view === 'domains'}
+							<DomainHeader />
+						{:else if editor_view === 'subjects'}
+							<SubjectHeader />
+						{:else if editor_view === 'lectures'}
+							<LectureHeader />
+						{/if}
+					</div>
+				{/if}
 			</div>
-		
+
 			<div class="content">
-				{#if active_tab === 'domains'}
+				{#if editor_type === 'layout'}
+					<Graph {graphSVG} />
+				{:else if editor_view === 'domains'}
 					<DomainTab />
-				{:else if active_tab === 'subjects'}
+				{:else if editor_view === 'subjects'}
 					<SubjectTab />
-				{:else if active_tab === 'lectures'}
+				{:else if editor_view === 'lectures'}
 					<LectureTab />
 				{/if}
 			</div>
@@ -169,6 +259,32 @@
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
+	.infobox
+		display: flex
+		flex-flow: row nowrap
+
+		margin: $card-thin-padding $card-thick-padding
+
+		border: 1px solid $purple
+		border-radius: $border-radius
+		background-color: rgba($purple, 0.1)
+
+		.sidebar
+			display: flex
+			align-items: center
+
+			padding: $input-icon-padding
+			background-color: $purple
+
+			img
+				width: 1.5rem
+				height: 1.5rem
+				filter: $white-filter
+
+		.content
+			padding: $card-thin-padding
+			color: $dark-purple
+
 	.tabular
 		.sticky
 			position: sticky
@@ -182,13 +298,14 @@
 
 			.tabs
 				display: flex
+
 				background: $light-gray
 				border: 1px solid $gray
 				border-bottom: none
 				border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
 
 				.tab
-					padding: $card-thin-padding $card-thick-padding
+					padding: ($card-thin-padding + $input-thin-padding) $card-thick-padding
 
 					border-color: $gray
 					border-style: solid
@@ -206,17 +323,37 @@
 					&:first-child
 						border-left: none !important
 
-				.dynamic-border
-					border-bottom: 1px solid $gray
+				.toolbar
+					display: flex
+					flex-flow: row nowrap
+					align-items: center
+					justify-content: flex-end
+					gap: $form-small-gap
+
 					flex: 1
-			
+					padding: 0 $card-thick-padding
+					border-bottom: 1px solid $gray
+
+					:global(.dropdown)
+						max-width: 20rem
+						margin-left: $form-medium-gap
+
+
 			.header
 				border: 1px solid $gray
 				border-width: 0 1px
-		
+
 		.content
 			border: 1px solid $gray
 			border-top: none
 			border-radius: 0 0 $border-radius $border-radius
 
+			svg
+				display: block
+				width: 100%
+				height: 600px
+
+				&:empty
+					display: none
+
 </style>
\ No newline at end of file
diff --git a/src/routes/app/graph/[graph]/editor/LectureHeader.svelte b/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
index e2260568..955817ae 100644
--- a/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureHeader.svelte
@@ -14,7 +14,7 @@
 
 	<div class="flex-spacer" />
 
-	<Searchbar placeholder="Search domains and relations" bind:value={$lecture_query} />
+	<Searchbar placeholder="Search lectures" bind:value={$lecture_query} />
 </div>
 
 <style lang="sass">
diff --git a/src/routes/app/graph/[graph]/editor/LectureRow.svelte b/src/routes/app/graph/[graph]/editor/LectureRow.svelte
index d04b6860..d982fa80 100644
--- a/src/routes/app/graph/[graph]/editor/LectureRow.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureRow.svelte
@@ -99,7 +99,7 @@
 			<Button
 				disabled={assign_subject_modal.disabled}
 				on:click={async () => await assign_subject_modal.submit()}
-			> Copy </Button>
+			> Assign </Button>
 			<Feedback data={assign_subject_modal.validate()} />
 		</footer>
 	</form>
@@ -145,7 +145,7 @@
 	</Button>
 
 	<div class="subjects">
-		{#each lecture.subjects as subject}
+		{#each lecture.present_subjects as subject}
 			<div class="subject">
 				{subject.trimmed_name}
 

From 0ff2afe775c32d7a27d8b78932c721808a0a58bb Mon Sep 17 00:00:00 2001
From: Bram Kreulen <boazkreulen.main@gmail.com>
Date: Tue, 19 Nov 2024 21:56:36 +0100
Subject: [PATCH 3/5] graph preview

---
 src/lib/components/GraphPreview.svelte        | 181 ++++++++++++++++++
 src/lib/scripts/svg/GraphSVG.ts               |  31 +--
 src/lib/scripts/svg/NodeSVG.ts                |   4 +-
 .../course/[course]/overview/+page.server.ts  |   6 +-
 .../course/[course]/overview/GraphRow.svelte  |  10 +-
 .../app/graph/[graph]/editor/+page.svelte     |   8 -
 6 files changed, 206 insertions(+), 34 deletions(-)
 create mode 100644 src/lib/components/GraphPreview.svelte

diff --git a/src/lib/components/GraphPreview.svelte b/src/lib/components/GraphPreview.svelte
new file mode 100644
index 00000000..53a7f440
--- /dev/null
+++ b/src/lib/components/GraphPreview.svelte
@@ -0,0 +1,181 @@
+
+<script lang="ts">
+
+	// Internal dependencies
+	import { GraphSVG } from '$scripts/svg'
+	import type { GraphController } from '$scripts/controllers'
+
+	// Components
+	import Dropdown from '$components/Dropdown.svelte'
+	import Button from '$components/Button.svelte'
+	import Graph from '$components/Graph.svelte'
+
+	// Assets
+	import plus_icon from '$assets/plus-icon.svg'
+
+	// Exports
+	export let graph: GraphController
+	export let exit_button: boolean
+
+	// Functions
+	export function show() {
+		graphSVG.view = 'domains'
+		visible = true
+	}
+
+	export function hide() {
+		visible = false
+	}
+
+	// Variables
+	const graphSVG = new GraphSVG(graph, false)
+	let visible = false
+
+</script>
+
+
+<!-- Markup -->
+
+
+{#if visible}
+	<div class="background" />
+	<div class="tabular">
+		<div class="tabs">
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'domains'}
+				on:click={() => graphSVG.view = 'domains'}
+			> Domains </button>
+
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'subjects'}
+				on:click={() => graphSVG.view = 'subjects'}
+			> Subjects </button>
+
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'lectures'}
+				on:click={() => graphSVG.view = 'lectures'}
+			> Lectures </button>
+
+			<div class="toolbar">
+				<Dropdown
+					id="lecture"
+					placeholder="Select lecture"
+					bind:value={graphSVG.lecture}
+					options={graph.lecture_options}
+				/>
+
+				<Button on:click={() => graphSVG.findGraph()}>
+					Find Graph
+				</Button>
+
+				<button class="exit" on:click={hide}>
+					<img src={plus_icon} alt="Exit icon" class="icon" />
+				</button>
+			</div>
+		</div>
+
+		 <Graph {graphSVG} />
+	</div>
+{/if}
+
+
+<!-- Styles -->
+
+
+<style lang="sass">
+
+	@use "$styles/variables.sass" as *
+	@use "$styles/palette.sass" as *
+
+	.background
+		position: fixed
+		z-index: 999
+		top: 0
+		left: 0
+
+		width: 100vw
+		height: 100vh
+
+		opacity: 0.25
+		background-color: black
+
+	.tabular
+		position: fixed
+		translate: 0 -50%
+		z-index: 1000
+		top: 50%
+		left: 0
+
+		width: calc( 100% - 2 * $tudelft-logo-width )
+		max-width: $big-column
+		margin: 0 $tudelft-logo-width
+		box-sizing: content-box
+
+		background: $white
+		border: 1px solid $gray
+		border-radius: $border-radius
+		box-shadow: $shadow
+
+		.tabs
+			display: flex
+
+			background: $light-gray
+			border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
+
+			.tab
+				padding: ($card-thin-padding + $input-thin-padding) $card-thick-padding
+
+				border-color: $gray
+				border-style: solid
+				border-width: 0 0 1px 1px
+				border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
+
+				&.active
+					background: $white
+					border-width: 0 1px 0 1px
+
+					& ~ .tab
+						border-width: 0 1px 1px 0
+
+
+				&:first-child
+					border-left: none !important
+
+			.toolbar
+				display: flex
+				flex-flow: row nowrap
+				align-items: center
+				justify-content: flex-end
+				gap: $form-small-gap
+
+				flex: 1
+				padding: 0 $card-thick-padding
+				border-bottom: 1px solid $gray
+
+				.exit
+					display: flex
+					align-items: center
+					justify-content: center
+
+					margin-left: 1rem
+					overflow: hidden
+
+					.icon
+						width: $input-icon-size
+						rotate: 45deg
+
+						cursor: pointer
+						filter: $purple-filter
+
+					&:focus, .icon:hover
+						scale: $scale-on-hover
+						filter: $dark-purple-filter
+
+				:global(.dropdown)
+					max-width: 20rem
+					margin-left: $form-medium-gap
+
+</style>
\ No newline at end of file
diff --git a/src/lib/scripts/svg/GraphSVG.ts b/src/lib/scripts/svg/GraphSVG.ts
index 79b0a782..3a688023 100644
--- a/src/lib/scripts/svg/GraphSVG.ts
+++ b/src/lib/scripts/svg/GraphSVG.ts
@@ -35,7 +35,7 @@ export { GraphSVG, SVGState }
 const ANIMATE = () => {}
 
 enum SVGState {
-	hidden,		// When the graph is not displayed
+	detached,	// When the graph is detached from the DOM
 	static,		// When the graph cannot be interacted with
 	dynamic,	// When the graph can be interacted with
 	animating,	// When the graph is in the process of transitioning
@@ -47,7 +47,7 @@ class GraphSVG {
 	private _graph: GraphController
 	private _interactive: boolean
 	private _view: EditorView = 'domains'
-	private _state: SVGState = SVGState.hidden
+	private _state: SVGState = SVGState.detached
 	private _lecture: LectureController | null = null
 
 	private svg?: SVGSVGElement
@@ -82,7 +82,7 @@ class GraphSVG {
 			return
 
 		// If hidden, save view for later
-		if (this.state === SVGState.hidden) {
+		if (this.state === SVGState.detached) {
 			this._view = view
 			return
 		}
@@ -139,13 +139,11 @@ class GraphSVG {
 			throw new Error('Failed to set state: GraphSVG not attached to DOM')
 
 		// If moving out of dynamic state:
-		//  - Disable pointer events
 		//  - Fix all nodes
 		//  - Save all nodes
 		//  - Stop simulation
 		if (this.state === SVGState.dynamic) {
 			d3.select(this.svg)
-				.attr('pointer-events', 'none')
 				.select('#content')
 					.selectAll<SVGGElement, NodeController<DomainController | SubjectController>>('.node')
 						.call(NodeSVG.setFixed, true)
@@ -161,9 +159,9 @@ class GraphSVG {
 				.call(OverlaySVG.reset)
 		}
 
-		// If moving out of hidden state:
+		// If moving out of detached state:
 		//  - Set initial view
-		else if (this.state === SVGState.hidden) {
+		else if (this.state === SVGState.detached) {
 			switch (this.view) {
 				case 'domains':
 					this.DomainsView()
@@ -179,24 +177,17 @@ class GraphSVG {
 
 		this._state = state // NEW STATE
 
-		// If moving into dynamic state:
-		//  - Enable pointer events
-		if (state === SVGState.dynamic) {
-			d3.select(this.svg)
-				.attr('pointer-events', 'all')
-		}
-
 		// If moving into broken state:
 		//  - Set overlay to broken
-		else if (state === SVGState.broken) {
+		if (state === SVGState.broken) {
 			d3.select<SVGGElement, unknown>('#overlay')
 				.call(OverlaySVG.broken)
 		}
 
-		// If moving into hidden state:
+		// If moving into detached state:
 		//  - Clear background
 		//  - Clear content
-		else if (state === SVGState.hidden) {
+		else if (state === SVGState.detached) {
 			this.clearBackground()
 			this.clearContent()
 		}
@@ -253,8 +244,6 @@ class GraphSVG {
 		// SVG setup
 		this.svg = element
 		const svg = d3.select<SVGSVGElement, unknown>(this.svg)
-			.attr('pointer-events', this.state === SVGState.dynamic ? 'all' : 'none')
-
 		const definitions = svg.append('defs')
 		svg.append('g').attr('id', 'background')
 		svg.append('g').attr('id', 'content')
@@ -369,7 +358,7 @@ class GraphSVG {
 			throw new Error('GraphSVG not attached to DOM')
 
 		// Exit current state
-		this.state = SVGState.hidden
+		this.state = SVGState.detached
 
 		// Clear SVG
 		d3.select(this.svg)
@@ -410,7 +399,7 @@ class GraphSVG {
 	}
 
 	findGraph() {
-		if (this.state !== SVGState.dynamic) return
+		if (this.state !== SVGState.dynamic && this.state !== SVGState.static) return
 
 		this.state = SVGState.animating
 		const bbx = this.boundingBox(this.view === 'domains' ? this.graph.domains : this.graph.subjects)
diff --git a/src/lib/scripts/svg/NodeSVG.ts b/src/lib/scripts/svg/NodeSVG.ts
index cc0ab54f..48d62446 100644
--- a/src/lib/scripts/svg/NodeSVG.ts
+++ b/src/lib/scripts/svg/NodeSVG.ts
@@ -8,7 +8,8 @@ import { NODE_STYLES } from '$scripts/settings'
 
 import {
 	GraphSVG,
-	RelationSVG
+	RelationSVG,
+	SVGState
 } from '$scripts/svg'
 
 import {
@@ -107,6 +108,7 @@ class NodeSVG {
 		// Drag behaviour
 		selection.call(
 			d3.drag<SVGGElement, NodeController<DomainController | SubjectController>>()
+				.filter(event => graphSVG.state === SVGState.dynamic)
 				.on('start', function() {
 					const selection = d3.select<SVGGElement, NodeController<DomainController | SubjectController>>(this)
 					selection.call(NodeSVG.setFixed, true)
diff --git a/src/routes/app/course/[course]/overview/+page.server.ts b/src/routes/app/course/[course]/overview/+page.server.ts
index 156f1280..93ed3d26 100644
--- a/src/routes/app/course/[course]/overview/+page.server.ts
+++ b/src/routes/app/course/[course]/overview/+page.server.ts
@@ -20,11 +20,11 @@ export const load: PageServerLoad = async ({ params }) => {
 		.catch(error => { throw new Error(error) })
 	const links = CourseHelper.getLinks(course_id, 'course', 'graph')
 		.catch(error => { throw new Error(error) })
-	const domains = asyncFlatmap(graphs, graph => GraphHelper.getDomains(graph.id, 'parents', 'children'))
+	const domains = asyncFlatmap(graphs, graph => GraphHelper.getDomains(graph.id, 'graph', 'parents', 'children', 'subjects'))
 		.catch(error => { throw new Error(error) })
-	const subjects = asyncFlatmap(graphs, graph => GraphHelper.getSubjects(graph.id, 'parents', 'children', 'domain'))
+	const subjects = asyncFlatmap(graphs, graph => GraphHelper.getSubjects(graph.id, 'graph', 'parents', 'children', 'domain', 'lectures'))
 		.catch(error => { throw new Error(error) })
-	const lectures = asyncFlatmap(graphs, graph => GraphHelper.getLectures(graph.id, 'subjects'))
+	const lectures = asyncFlatmap(graphs, graph => GraphHelper.getLectures(graph.id, 'graph', 'subjects'))
 		.catch(error => { throw new Error(error) })
 	const courses = asyncConcat(course, CourseHelper.getAll())
 		.catch(error => { throw new Error(error) })
diff --git a/src/routes/app/course/[course]/overview/GraphRow.svelte b/src/routes/app/course/[course]/overview/GraphRow.svelte
index 1f6fdae6..b0acfea6 100644
--- a/src/routes/app/course/[course]/overview/GraphRow.svelte
+++ b/src/routes/app/course/[course]/overview/GraphRow.svelte
@@ -3,6 +3,7 @@
 
 	// Internal dependencies
 	import { course } from './stores'
+	import { GraphSVG } from '$scripts/svg'
 	import { FormModal, SimpleModal } from '$scripts/modals'
 	import { Validation, Severity } from '$scripts/validation'
 
@@ -12,6 +13,7 @@
 	} from '$scripts/controllers'
 
 	// Components
+	import GraphPreview from '$components/GraphPreview.svelte'
 	import IconButton from '$components/IconButton.svelte'
 	import LinkButton from '$components/LinkButton.svelte'
 	import Dropdown from '$components/Dropdown.svelte'
@@ -84,15 +86,20 @@
 	// Exports
 	export let graph: GraphController
 
-	// Modals
+	// Variables
+	const graphSVG = new GraphSVG(graph, false)
+
 	let delete_modal = new DeleteModal()
 	let copy_modal = new CopyModal()
+	let preview_modal: GraphPreview
 
 </script>
 
 
 <!-- Markup -->
 
+<GraphPreview {graph} bind:this={preview_modal} />
+
 <Modal bind:this={copy_modal.modal}>
 	<h3 slot="header"> Copy Graph </h3>
 	Copy this graph to another course. This will create a new graph with the same content in the selected course.
@@ -148,6 +155,7 @@
 	<IconButton scale
 		src={open_eye_icon}
 		description="Preview Graph"
+		on:click={() => preview_modal.show()}
 	/>
 
 	<span>
diff --git a/src/routes/app/graph/[graph]/editor/+page.svelte b/src/routes/app/graph/[graph]/editor/+page.svelte
index 0abf47d4..dea248cd 100644
--- a/src/routes/app/graph/[graph]/editor/+page.svelte
+++ b/src/routes/app/graph/[graph]/editor/+page.svelte
@@ -348,12 +348,4 @@
 			border-top: none
 			border-radius: 0 0 $border-radius $border-radius
 
-			svg
-				display: block
-				width: 100%
-				height: 600px
-
-				&:empty
-					display: none
-
 </style>
\ No newline at end of file

From edbfe07391ea2ffbb3f75b3ec973e88f753c832b Mon Sep 17 00:00:00 2001
From: Bram Kreulen <boazkreulen.main@gmail.com>
Date: Wed, 20 Nov 2024 00:09:30 +0100
Subject: [PATCH 4/5] links

---
 src/lib/components/Graph.svelte               |   5 +-
 src/lib/components/GraphPreview.svelte        |   4 +-
 .../scripts/controllers/DomainController.ts   |  13 +-
 src/lib/scripts/controllers/LinkController.ts |   2 +-
 src/lib/scripts/helpers/LinkHelper.ts         |  22 +++
 src/lib/scripts/settings.ts                   |   2 +
 src/lib/scripts/svg/GraphSVG.ts               |  28 +--
 .../course/[course]/[link]/+page.server.ts    |  28 +++
 .../app/course/[course]/[link]/+page@.svelte  | 180 ++++++++++++++++++
 .../course/[course]/overview/GraphRow.svelte  |   3 -
 .../course/[course]/overview/LinkRow.svelte   |   8 +-
 .../app/graph/[graph]/editor/+page.svelte     |   3 +
 12 files changed, 270 insertions(+), 28 deletions(-)
 create mode 100644 src/routes/app/course/[course]/[link]/+page.server.ts
 create mode 100644 src/routes/app/course/[course]/[link]/+page@.svelte

diff --git a/src/lib/components/Graph.svelte b/src/lib/components/Graph.svelte
index 9dfe510a..d9aa4d23 100644
--- a/src/lib/components/Graph.svelte
+++ b/src/lib/components/Graph.svelte
@@ -36,11 +36,12 @@
 	.graph
 		position: relative
 		width: 100%
-		height: 650px
+		height: 100%
 
 		svg
-			width: 100%
+			display: block
 			height: 100%
+			width: 100%
 
 		.zoom
 			position: absolute
diff --git a/src/lib/components/GraphPreview.svelte b/src/lib/components/GraphPreview.svelte
index 53a7f440..55dbaeaf 100644
--- a/src/lib/components/GraphPreview.svelte
+++ b/src/lib/components/GraphPreview.svelte
@@ -15,7 +15,6 @@
 
 	// Exports
 	export let graph: GraphController
-	export let exit_button: boolean
 
 	// Functions
 	export function show() {
@@ -119,6 +118,9 @@
 		border-radius: $border-radius
 		box-shadow: $shadow
 
+		:global(.graph)
+			height: 750px
+
 		.tabs
 			display: flex
 
diff --git a/src/lib/scripts/controllers/DomainController.ts b/src/lib/scripts/controllers/DomainController.ts
index 66160aa4..060ba1d9 100644
--- a/src/lib/scripts/controllers/DomainController.ts
+++ b/src/lib/scripts/controllers/DomainController.ts
@@ -431,15 +431,16 @@ class DomainController extends NodeController<DomainController> {
 		// Unassign graph, parents, children, and subjects
 		if (this._graph_id !== undefined)
 			this.graph.unassignDomain(this)
-		if (this._parent_ids !== undefined)
-			for (const parent of this.parents)
-				parent.unassignChild(this, false)
-		if (this._child_ids !== undefined)
-			for (const child of this.children)
-				child.unassignParent(this, false)
 		if (this._subject_ids !== undefined)
 			for (const subject of this.subjects)
 				subject.unassignDomain(this, false)
+		for (const relation of this.graph.domain_relations) {
+			if (relation.parent === this)
+				relation.parent = null
+			else if (relation.child === this)
+				relation.child = null
+		}
+				
 
 		// Fix order of remaining domains
 		if (reorder_graph) {
diff --git a/src/lib/scripts/controllers/LinkController.ts b/src/lib/scripts/controllers/LinkController.ts
index b42203ab..7ef53f12 100644
--- a/src/lib/scripts/controllers/LinkController.ts
+++ b/src/lib/scripts/controllers/LinkController.ts
@@ -111,7 +111,7 @@ class LinkController {
 	get url(): string {
 		if (this.validate().severity === Severity.error)
 			return ''
-		return `/app/course/${this.course.code}/${this.name}`
+		return `${settings.ROOT_URL}/app/course/${this.course.code}/${this.name}`
 	}
 
 	// --------------------> Assignments
diff --git a/src/lib/scripts/helpers/LinkHelper.ts b/src/lib/scripts/helpers/LinkHelper.ts
index ad921125..4602d240 100644
--- a/src/lib/scripts/helpers/LinkHelper.ts
+++ b/src/lib/scripts/helpers/LinkHelper.ts
@@ -158,4 +158,26 @@ export async function getGraph(id: number, ...relations: GraphRelation[]): Promi
 	if (data.graph !== null)
 		return await GraphHelper.reduce(data.graph, ...relations)
 	return null
+}
+
+export async function getGraphFromCourseAndName(course_code: string, link_name: string, ...relations: GraphRelation[]): Promise<SerializedGraph> {
+	try {
+		var data = await prisma.link.findFirstOrThrow({
+			where: {
+				course: {
+					code: course_code
+				},
+				name: link_name
+			},
+			select: {
+				graph: true
+			}
+		})
+	} catch (error) {
+		return Promise.reject(error)
+	}
+
+	if (data.graph !== null)
+		return await GraphHelper.reduce(data.graph, ...relations)
+	return Promise.reject('No graph associated with this link')
 }
\ No newline at end of file
diff --git a/src/lib/scripts/settings.ts b/src/lib/scripts/settings.ts
index 0911744d..5275a4dd 100644
--- a/src/lib/scripts/settings.ts
+++ b/src/lib/scripts/settings.ts
@@ -6,6 +6,8 @@ type Milliseconds = number
 
 // -------------------> General settings
 
+export const ROOT_URL = 'localhost:5173'
+
 export const MAX_PROGRAM_NAME_LENGTH: Scalar = 50
 
 export const COURSE_CODE_REGEX: RegExp = /^[A-Za-z0-9]*$/
diff --git a/src/lib/scripts/svg/GraphSVG.ts b/src/lib/scripts/svg/GraphSVG.ts
index 3a688023..590b2301 100644
--- a/src/lib/scripts/svg/GraphSVG.ts
+++ b/src/lib/scripts/svg/GraphSVG.ts
@@ -198,13 +198,16 @@ class GraphSVG {
 	}
 
 	set lecture(lecture: LectureController | null) {
-		if (this.svg === undefined)
-			throw new Error('Failed to set lecture: GraphSVG not attached to DOM')
 		if (this.lecture === lecture || this.state === SVGState.animating)
 			return
 
 		this._lecture = lecture
 
+		if (this.state === SVGState.detached)
+			return
+		if (this.svg === undefined)
+			throw new Error('Failed to set lecture: GraphSVG not attached to DOM')
+
 		// Validate lecture
 		if (!this.validateView(this.view)) {
 			this.state = SVGState.broken
@@ -224,6 +227,8 @@ class GraphSVG {
 			}
 		}
 
+		this.state = SVGState.lecture
+
 		// Update highlights
 		d3.select(this.svg)
 			.select('#content')
@@ -811,9 +816,10 @@ class GraphSVG {
 		if (this.state === SVGState.broken) {
 			this.state = SVGState.animating
 			this.moveCamera(bbx.x, bbx.y, bbx.k)
-			this.setContent(this.graph.subjects, this.graph.subject_relations, () => {
-				this.state = this.interactive ? SVGState.dynamic : SVGState.static
-			})
+			this.setBackground('subjects')
+			this.setContent(this.graph.subjects, this.graph.subject_relations)
+			this.restoreContent()
+			this.state = this.interactive ? SVGState.dynamic : SVGState.static
 
 			return
 		}
@@ -921,9 +927,9 @@ class GraphSVG {
 			this.state = SVGState.animating
 			this.setBackground('domains')
 			this.moveCamera(bbx.x, bbx.y, bbx.k)
-			this.setContent(this.graph.domains, this.graph.domain_relations, () => {
-				this.state = this.interactive ? SVGState.dynamic : SVGState.static
-			})
+			this.setContent(this.graph.domains, this.graph.domain_relations)
+			this.restoreContent()
+			this.state = this.interactive ? SVGState.dynamic : SVGState.static
 
 			return
 		}
@@ -949,9 +955,9 @@ class GraphSVG {
 			this.state = SVGState.animating
 			this.setBackground('subjects')
 			this.moveCamera(bbx.x, bbx.y, bbx.k)
-			this.setContent(this.graph.subjects, this.graph.subject_relations, () => {
-				this.state = this.interactive ? SVGState.dynamic : SVGState.static
-			})
+			this.setContent(this.graph.subjects, this.graph.subject_relations)
+			this.restoreContent()
+			this.state = this.interactive ? SVGState.dynamic : SVGState.static
 
 			return
 		}
diff --git a/src/routes/app/course/[course]/[link]/+page.server.ts b/src/routes/app/course/[course]/[link]/+page.server.ts
new file mode 100644
index 00000000..295dd85b
--- /dev/null
+++ b/src/routes/app/course/[course]/[link]/+page.server.ts
@@ -0,0 +1,28 @@
+
+// External dependencies
+import type { PageServerLoad } from './$types'
+
+// Internal dependencies
+import {
+	GraphHelper,
+	LinkHelper
+} from '$scripts/helpers'
+
+// Load
+export const load: PageServerLoad = async ({ params }) => {
+	const course_code = params.course
+	const link_name = params.link
+
+	// Get data from the database
+	const graph = await LinkHelper.getGraphFromCourseAndName(course_code, link_name, 'domains', 'subjects', 'lectures')
+
+	// Start data streams
+	const domains = GraphHelper.getDomains(graph.id, 'graph', 'parents', 'children', 'subjects')
+		.catch(error => { throw new Error(error) })
+	const subjects = GraphHelper.getSubjects(graph.id, 'graph', 'parents', 'children', 'domain', 'lectures')
+		.catch(error => { throw new Error(error) })
+	const lectures = GraphHelper.getLectures(graph.id, 'graph', 'subjects')
+		.catch(error => { throw new Error(error) })
+
+	return { graph, domains, subjects, lectures }
+}
diff --git a/src/routes/app/course/[course]/[link]/+page@.svelte b/src/routes/app/course/[course]/[link]/+page@.svelte
new file mode 100644
index 00000000..6698b6f0
--- /dev/null
+++ b/src/routes/app/course/[course]/[link]/+page@.svelte
@@ -0,0 +1,180 @@
+
+<script lang="ts">
+
+	// External dependencies
+	import type { PageData } from './$types'
+	import { page } from '$app/stores'
+
+	// Internal dependencies
+	import { GraphSVG } from '$scripts/svg'
+	import { validEditorView } from '$scripts/types'
+
+	import {
+		ControllerCache,
+		GraphController,
+		DomainController,
+		SubjectController,
+		LectureController
+	} from '$scripts/controllers'
+
+	// Components
+	import Dropdown from '$components/Dropdown.svelte'
+	import Loading from '$components/Loading.svelte'
+	import Button from '$components/Button.svelte'
+	import Graph from '$components/Graph.svelte'
+
+	// Functions
+	async function revive() {
+
+		// Await all promises
+		const [
+			awaited_graph,
+			awaited_domains,
+			awaited_subjects,
+			awaited_lectures
+		] = await Promise.all([
+			data.graph,
+			data.domains,
+			data.subjects,
+			data.lectures
+		])
+
+		// Revive graph
+		graph = GraphController.revive(cache, awaited_graph)
+
+		// Revive controllers into cache
+		awaited_domains.forEach(domain => DomainController.revive(cache, domain))
+		awaited_subjects.forEach(subject => SubjectController.revive(cache, subject))
+		awaited_lectures.forEach(lecture => LectureController.revive(cache, lecture))
+
+		// Create graphSVG
+		graphSVG = new GraphSVG(graph, false)
+
+		const lecture = cache.find(LectureController, editor_lecture)
+		if (lecture !== undefined)
+			graphSVG.lecture = lecture
+		if (validEditorView(editor_view)) {
+			graphSVG.view = editor_view
+		}
+	}
+
+	// Initialization
+	export let data: PageData
+	const cache = new ControllerCache()
+
+	let graph: GraphController
+	let graphSVG: GraphSVG
+
+	const search_params = $page.url.searchParams
+	let editor_view = search_params.get('view')
+	let editor_lecture = Number(search_params.get('lecture'))
+
+</script>
+
+
+<!-- Markup -->
+
+
+{#await revive()}
+	<Loading />
+{:then}
+	<div class="tabular">
+		<div class="tabs">
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'domains'}
+				on:click={() => graphSVG.view = 'domains'}
+			> Domains </button>
+
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'subjects'}
+				on:click={() => graphSVG.view = 'subjects'}
+			> Subjects </button>
+
+			<button
+				class="tab"
+				class:active={graphSVG.view === 'lectures'}
+				on:click={() => graphSVG.view = 'lectures'}
+			> Lectures </button>
+
+			<div class="toolbar">
+				<Dropdown
+					id="lecture"
+					placeholder="Select lecture"
+					bind:value={graphSVG.lecture}
+					options={graph.lecture_options}
+				/>
+
+				<Button on:click={() => graphSVG.findGraph()}>
+					Find Graph
+				</Button>
+			</div>
+		</div>
+
+		<Graph {graphSVG} />
+	</div>
+{/await}
+
+
+<!-- Styles -->
+
+
+<style lang="sass">
+
+	@use "$styles/variables.sass" as *
+	@use "$styles/palette.sass" as *
+
+	.tabular
+		position: relative
+		
+		width: 100vw
+		height: 100vh
+		background: $white
+
+		.tabs
+			position: absolute
+			z-index: 1
+			top: 0
+
+			display: flex
+			width: 100%
+
+			background: $light-gray
+			border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
+
+			.tab
+				padding: ($card-thin-padding + $input-thin-padding) $card-thick-padding
+
+				border-color: $gray
+				border-style: solid
+				border-width: 0 0 1px 1px
+				border-radius: calc($border-radius - 1px) calc($border-radius - 1px) 0 0
+
+				&.active
+					background: $white
+					border-width: 0 1px 0 1px
+
+					& ~ .tab
+						border-width: 0 1px 1px 0
+
+
+				&:first-child
+					border-left: none !important
+
+			.toolbar
+				display: flex
+				flex-flow: row nowrap
+				align-items: center
+				justify-content: flex-end
+				gap: $form-small-gap
+
+				flex: 1
+				padding: 0 $card-thick-padding
+				border-bottom: 1px solid $gray
+
+				:global(.dropdown)
+					max-width: 20rem
+					margin-left: $form-medium-gap
+
+</style>
\ No newline at end of file
diff --git a/src/routes/app/course/[course]/overview/GraphRow.svelte b/src/routes/app/course/[course]/overview/GraphRow.svelte
index b0acfea6..dccdd39f 100644
--- a/src/routes/app/course/[course]/overview/GraphRow.svelte
+++ b/src/routes/app/course/[course]/overview/GraphRow.svelte
@@ -3,7 +3,6 @@
 
 	// Internal dependencies
 	import { course } from './stores'
-	import { GraphSVG } from '$scripts/svg'
 	import { FormModal, SimpleModal } from '$scripts/modals'
 	import { Validation, Severity } from '$scripts/validation'
 
@@ -87,8 +86,6 @@
 	export let graph: GraphController
 
 	// Variables
-	const graphSVG = new GraphSVG(graph, false)
-
 	let delete_modal = new DeleteModal()
 	let copy_modal = new CopyModal()
 	let preview_modal: GraphPreview
diff --git a/src/routes/app/course/[course]/overview/LinkRow.svelte b/src/routes/app/course/[course]/overview/LinkRow.svelte
index 148c7d41..975ec233 100644
--- a/src/routes/app/course/[course]/overview/LinkRow.svelte
+++ b/src/routes/app/course/[course]/overview/LinkRow.svelte
@@ -1,9 +1,9 @@
 
 <script lang="ts">
 
-	const ROOT_URL = 'localhost:5173/app'
-
 	// Internal dependencies
+	import * as settings from '$scripts/settings'
+
 	import { course } from './stores'
 	import { Validation, Severity } from '$scripts/validation'
 	import { FormModal, SimpleModal } from '$scripts/modals'
@@ -39,7 +39,7 @@
 
 		get embed() {
 			if (this.validate().severity === Severity.error) return ''
-			let embed = `<iframe src="${ROOT_URL}/graph/${$course.code}/${link.name}?view=${this.view}`
+			let embed = `<iframe src="${settings.ROOT_URL}/app/course/${$course.code}/${link.name}?view=${this.view}`
 			if (this.lecture) embed += `&lecture=${this.lecture.id}`
 			embed += `" style="width: 100%!important; height: ${this.height}px" allow="fullscreen" allowfullscreen></iframe>`
 
@@ -142,7 +142,7 @@
 </Modal>
 
 <div class="link-row">
-	<Feedback compact data={link.validate(false)} />
+	<Feedback compact data={link.validate(false)} animate={false} />
 
 	<IconButton scale
 		src={trash_icon}
diff --git a/src/routes/app/graph/[graph]/editor/+page.svelte b/src/routes/app/graph/[graph]/editor/+page.svelte
index dea248cd..7fd7134c 100644
--- a/src/routes/app/graph/[graph]/editor/+page.svelte
+++ b/src/routes/app/graph/[graph]/editor/+page.svelte
@@ -348,4 +348,7 @@
 			border-top: none
 			border-radius: 0 0 $border-radius $border-radius
 
+			:global(.graph)
+				height: 650px
+
 </style>
\ No newline at end of file

From d798dafcc95c497ff59e13dd7d8a44aaed10aa13 Mon Sep 17 00:00:00 2001
From: Bram Kreulen <boazkreulen.main@gmail.com>
Date: Wed, 20 Nov 2024 00:25:13 +0100
Subject: [PATCH 5/5] lecture bugfixes

---
 .../scripts/controllers/DomainController.ts   |  2 +-
 .../scripts/controllers/GraphController.ts    | 38 +++++++++++++++++--
 .../scripts/controllers/LectureController.ts  |  7 +++-
 src/lib/scripts/helpers/GraphHelper.ts        | 21 +++++++++-
 .../[id]/reorder/{ => domains}/+server.ts     |  2 +-
 .../graph/[id]/reorder/lectures/+server.ts    | 25 ++++++++++++
 .../app/graph/[graph]/editor/DomainTab.svelte |  2 +-
 .../graph/[graph]/editor/LectureTab.svelte    |  2 +-
 8 files changed, 89 insertions(+), 10 deletions(-)
 rename src/routes/api/graph/[id]/reorder/{ => domains}/+server.ts (89%)
 create mode 100644 src/routes/api/graph/[id]/reorder/lectures/+server.ts

diff --git a/src/lib/scripts/controllers/DomainController.ts b/src/lib/scripts/controllers/DomainController.ts
index 060ba1d9..ff73ad4a 100644
--- a/src/lib/scripts/controllers/DomainController.ts
+++ b/src/lib/scripts/controllers/DomainController.ts
@@ -444,7 +444,7 @@ class DomainController extends NodeController<DomainController> {
 
 		// Fix order of remaining domains
 		if (reorder_graph) {
-			await this.graph.reorder()
+			await this.graph.reorderDomains()
 		}
 
 		// Call the API to delete the domain
diff --git a/src/lib/scripts/controllers/GraphController.ts b/src/lib/scripts/controllers/GraphController.ts
index 1c4d0608..1d0dd34e 100644
--- a/src/lib/scripts/controllers/GraphController.ts
+++ b/src/lib/scripts/controllers/GraphController.ts
@@ -189,6 +189,8 @@ class GraphController {
 
 		// Fetch lectures from the cache
 		this._lectures = this._lecture_ids.map(id => this.cache.findOrThrow(LectureController, id))
+		this._lectures.sort((a, b) => a.order - b.order)
+
 		return Array.from(this._lectures)
 	}
 
@@ -577,7 +579,7 @@ class GraphController {
 		if (this._subject_ids !== undefined)
 			promises.push(...this.subjects.map(async subject => await subject.delete()))
 		if (this._lecture_ids !== undefined)
-			promises.push(...this.lectures.map(async lecture => await lecture.delete()))
+			promises.push(...this.lectures.map(async lecture => await lecture.delete(false)))
 		await Promise.all(promises)
 
 		// Call the API to delete the graph
@@ -592,7 +594,7 @@ class GraphController {
 		this.cache.remove(this)
 	}
 
-	async reorder(domains?: DomainController[]) {
+	async reorderDomains(domains?: DomainController[]) {
 
 		// Update the graph
 		if (domains !== undefined) {
@@ -608,7 +610,7 @@ class GraphController {
 		}
 		
 		// Call the API to reorder the graph
-		const response = await fetch(`/api/graph/${this.id}/reorder`, {
+		const response = await fetch(`/api/graph/${this.id}/reorder/domains`, {
 			method: 'PUT',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ domain_ids: this.domain_ids })
@@ -616,7 +618,35 @@ class GraphController {
 
 		// Throw an error if the API request fails
 		if (!response.ok) {
-			throw new Error(`APIError (/api/graph/${this.id}/reorder PUT): ${response.status} ${response.statusText}`)
+			throw new Error(`APIError (/api/graph/${this.id}/reorder/domains PUT): ${response.status} ${response.statusText}`)
+		}
+	}
+
+	async reorderLectures(lectures?: LectureController[]) {
+
+		// Update the graph
+		if (lectures !== undefined) {
+			this._lecture_ids = lectures.map(lecture => lecture.id)
+			this._lectures = lectures
+			this._unchanged = false
+			this._unsaved = true
+		}
+
+		// Update lectures
+		for (const [index, lecture] of this.lectures.entries()) {
+			lecture.order = index
+		}
+		
+		// Call the API to reorder the graph
+		const response = await fetch(`/api/graph/${this.id}/reorder/lectures`, {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ lecture_ids: this.lecture_ids })
+		})
+
+		// Throw an error if the API request fails
+		if (!response.ok) {
+			throw new Error(`APIError (/api/graph/${this.id}/reorder/lectures PUT): ${response.status} ${response.statusText}`)
 		}
 	}
 
diff --git a/src/lib/scripts/controllers/LectureController.ts b/src/lib/scripts/controllers/LectureController.ts
index 2a1d5e93..3c97aacd 100644
--- a/src/lib/scripts/controllers/LectureController.ts
+++ b/src/lib/scripts/controllers/LectureController.ts
@@ -383,7 +383,7 @@ class LectureController {
 		this._unsaved = false
 	}
 
-	async delete() {
+	async delete(reorder_graph: boolean = true) {
 
 		// Unassign graph and subjects
 		if (this._graph_id !== undefined)
@@ -391,6 +391,11 @@ class LectureController {
 		if (this._present_subject_ids !== undefined)
 			for (const subject of this.present_subjects)
 				subject.unassignFromLecture(this, false)
+
+		// Fix order of remaining lectures
+		if (reorder_graph) {
+			await this.graph.reorderLectures()
+		}
 		
 		// Call the API to delete the lecture
 		const response = await fetch(`/api/lecture/${this.id}`, { method: 'DELETE' })
diff --git a/src/lib/scripts/helpers/GraphHelper.ts b/src/lib/scripts/helpers/GraphHelper.ts
index 8b238575..820f8932 100644
--- a/src/lib/scripts/helpers/GraphHelper.ts
+++ b/src/lib/scripts/helpers/GraphHelper.ts
@@ -149,7 +149,7 @@ export async function update(data: SerializedGraph) {
 	}
 }
 
-export async function reorder(domain_ids: number[]) {
+export async function reorderDomains(domain_ids: number[]) {
 	return await Promise.all(
 		domain_ids.map(async (domain_id, order) => {
 			try {
@@ -168,6 +168,25 @@ export async function reorder(domain_ids: number[]) {
 	)
 }
 
+export async function reorderLectures(lecture_ids: number[]) {
+	return await Promise.all(
+		lecture_ids.map(async (lecture_id, order) => {
+			try {
+				return prisma.lecture.update({
+					where: {
+						id: lecture_id
+					},
+					data: {
+						order: order
+					}
+				})
+			} catch (error) {
+				return Promise.reject(error)
+			}
+		})
+	)
+}
+
 export async function remove(id: number) {
 	try {
 		await prisma.graph.delete({
diff --git a/src/routes/api/graph/[id]/reorder/+server.ts b/src/routes/api/graph/[id]/reorder/domains/+server.ts
similarity index 89%
rename from src/routes/api/graph/[id]/reorder/+server.ts
rename to src/routes/api/graph/[id]/reorder/domains/+server.ts
index 2d43a2d3..7fce3d61 100644
--- a/src/routes/api/graph/[id]/reorder/+server.ts
+++ b/src/routes/api/graph/[id]/reorder/domains/+server.ts
@@ -17,7 +17,7 @@ async function PUT({ request }) {
 	}
 
 	// Reorder data
-	return await GraphHelper.reorder(domain_ids)
+	return await GraphHelper.reorderDomains(domain_ids)
 		.then(
 			() => new Response(null, { status: 200 }),
 			error => new Response(error, { status: 400 })
diff --git a/src/routes/api/graph/[id]/reorder/lectures/+server.ts b/src/routes/api/graph/[id]/reorder/lectures/+server.ts
new file mode 100644
index 00000000..01f55877
--- /dev/null
+++ b/src/routes/api/graph/[id]/reorder/lectures/+server.ts
@@ -0,0 +1,25 @@
+
+// Internal dependencies
+import { GraphHelper } from '$scripts/helpers'
+
+// Exports
+export { PUT }
+
+
+// --------------------> API Endpoints
+
+async function PUT({ request }) {
+
+	// Retrieve data
+	const { lecture_ids } = await request.json()
+	if (!lecture_ids) {
+		return new Response('Missing data', { status: 400 })
+	}
+
+	// Reorder data
+	return await GraphHelper.reorderLectures(lecture_ids)
+		.then(
+			() => new Response(null, { status: 200 }),
+			error => new Response(error, { status: 400 })
+		)
+}
diff --git a/src/routes/app/graph/[graph]/editor/DomainTab.svelte b/src/routes/app/graph/[graph]/editor/DomainTab.svelte
index d645b297..fa6834c7 100644
--- a/src/routes/app/graph/[graph]/editor/DomainTab.svelte
+++ b/src/routes/app/graph/[graph]/editor/DomainTab.svelte
@@ -32,7 +32,7 @@
 	{#if filtered_domains.length === 0}
 		<p class="grayed"> There's nothing here </p>
 	{:else}
-		<SortableList let:item list={filtered_domains} on:rearrange={async event => await $graph.reorder(event.detail)}>
+		<SortableList let:item list={filtered_domains} on:rearrange={async event => await $graph.reorderDomains(event.detail)}>
 			<DomainRow domain={item} />
 		</SortableList>
 	{/if}
diff --git a/src/routes/app/graph/[graph]/editor/LectureTab.svelte b/src/routes/app/graph/[graph]/editor/LectureTab.svelte
index 5becf2d1..be952a61 100644
--- a/src/routes/app/graph/[graph]/editor/LectureTab.svelte
+++ b/src/routes/app/graph/[graph]/editor/LectureTab.svelte
@@ -25,7 +25,7 @@
 	{#if filtered_lectures.length == 0}
 		<p class="grayed"> There's nothing here </p>
 	{:else}
-		<SortableList let:item list={filtered_lectures} >
+		<SortableList let:item list={filtered_lectures} on:rearrange={async event => await $graph.reorderLectures(event.detail)} >
 			<LectureRow lecture={item} />
 		</SortableList>
 	{/if}