Merge branch 'db-push-graphs'

package.json

@@ -40,7 +40,9 @@
 	"packageManager": "[email protected]",
 	"dependencies": {
 		"@types/d3": "^7.4.3",
+		"@types/uuid": "^10.0.0",
 		"d3": "^7.9.0",
-		"dotenv": "^16.4.5"
+		"dotenv": "^16.4.5",
+		"uuid": "^10.0.0"
 	}
 }

prisma/migrations/20240710131522_add_lectures/migration.sql

@@ -0,0 +1,53 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[code]` on the table `Course` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Subject" DROP CONSTRAINT "Subject_domainId_fkey";
+
+-- AlterTable
+ALTER TABLE "Domain" ALTER COLUMN "name" DROP NOT NULL,
+ALTER COLUMN "style" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "Subject" ALTER COLUMN "name" DROP NOT NULL,
+ALTER COLUMN "style" DROP NOT NULL,
+ALTER COLUMN "domainId" DROP NOT NULL;
+
+-- CreateTable
+CREATE TABLE "Lecture" (
+    "id" SERIAL NOT NULL,
+    "graphId" INTEGER NOT NULL,
+    "name" TEXT,
+
+    CONSTRAINT "Lecture_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_LectureToSubject" (
+    "A" INTEGER NOT NULL,
+    "B" INTEGER NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_LectureToSubject_AB_unique" ON "_LectureToSubject"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_LectureToSubject_B_index" ON "_LectureToSubject"("B");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Course_code_key" ON "Course"("code");
+
+-- AddForeignKey
+ALTER TABLE "Subject" ADD CONSTRAINT "Subject_domainId_fkey" FOREIGN KEY ("domainId") REFERENCES "Domain"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Lecture" ADD CONSTRAINT "Lecture_graphId_fkey" FOREIGN KEY ("graphId") REFERENCES "Graph"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_LectureToSubject" ADD CONSTRAINT "_LectureToSubject_A_fkey" FOREIGN KEY ("A") REFERENCES "Lecture"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_LectureToSubject" ADD CONSTRAINT "_LectureToSubject_B_fkey" FOREIGN KEY ("B") REFERENCES "Subject"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -109,7 +109,6 @@ model Lecture {
 	id				Int			@id @default(autoincrement())
 	graph			Graph		@relation(fields: [graphId], references: [id])
 	graphId			Int
-	index			Int
-	name			String
+	name			String?
 	subjects		Subject[]
 }

src/lib/components/Dropdown.svelte

@@ -1,11 +1,8 @@
 
 <script lang="ts">
 
-	// External imports
-	import { createEventDispatcher } from 'svelte'
-
 	// Internal imports
-	import { DropdownOption } from '$scripts/entities/DropdownOption'
+	import { ValidationData, Severity } from '$scripts/entities'
 	import { clickoutside } from '$scripts/clickoutside'
 
 	// Assets
@@ -14,27 +11,26 @@
 
 	// Types
 	type T = $$Generic
+	type Option = {
+		name: string
+		value: T
+		validation: ValidationData
+	}
 
 	// Exports
 	export let label: string
 	export let placeholder: string
 	export let value: T | undefined = undefined
-	export let options: DropdownOption<T>[]
+	export let options: Option[]
 
 	// Variables
-	const dispatch = createEventDispatcher()
-	const id = label.toLowerCase().replace(/\s/g, '_')
-
 	let visible: boolean = false
 
-	// Unset value if value not in options
+	$: id = label.toLowerCase().replace(/\s/g, '_')
 	$: choice = options.find(option => option.value === value)
-	$: set(choice?.value)
-
-	// Sort options so errors are at the bottom
 	$: options = options.sort((a, b) => {
-		if (a.validation.severity === 'error') return 1
-		if (b.validation.severity === 'error') return -1
+		if (a.validation.severity === Severity.error) return 1
+		if (b.validation.severity === Severity.error) return -1
 		return 0
 	})
 
@@ -51,13 +47,6 @@
 		visible = !visible
 	}
 
-	function set(next?: T) {
-		if (next === value)
-			return
-		value = next
-		dispatch('input', next)
-	}
-
 </script>
 
 
@@ -83,16 +72,16 @@
 			<button
 				type="button"
 				class="option"
-				disabled={option.validation.severity === 'error'}
-				on:click={() => { set(option.value) }}
+				disabled={option.validation.severity === Severity.error}
+				on:click={() => value = option.value}
 			>
 				{option.name}
 
-				{#if option.validation.severity === 'error'}
+				{#if option.validation.severity === Severity.error}
 					<span class="error">
 						<img src={errorIcon} alt="" /> {option.validation.errors[0].short}
 					</span>
-				{:else if option.validation.severity === 'warning'}
+				{:else if option.validation.severity === Severity.warning}
 					<span class="warning">
 						<img src={warningIcon} alt="" /> {option.validation.warnings[0].short}
 					</span>
@@ -108,7 +97,7 @@
 		{/if}
 
 		{#if value !== undefined}
-			<button type="button" class="option grayed" on:click={() => { set(undefined) }}>
+			<button type="button" class="option grayed" on:click={() => value = undefined}>
 				<i> Remove choice </i>
 			</button>
 		{/if}

src/lib/components/GraphInterface.svelte → src/lib/components/GraphSVG.svelte

@@ -2,9 +2,9 @@
 <script lang="ts">
 
 
-	// Lib imports
-    import { Graph } from '$scripts/entities'
+	// Internal imports
 	import { GraphSVG, View } from '$scripts/d3'
+	import { graph } from '$stores'
 	
 	// Components
 	import Dropdown from './Dropdown.svelte'
@@ -14,13 +14,13 @@
 	import zoomOutIcon from '$assets/zoom-out-icon.svg'
 
 	// Exports
-	export let graph: Graph
-	export let interactive: boolean = true
 	export function findGraph() { graphSVG.findGraph() }
-	export function unlockAllFields() { graphSVG.unlockAllFields() }
+	export function autolayout() { graphSVG.autolayout() }
 
 	// Variables
-	let graphSVG: GraphSVG = new GraphSVG(graph, interactive)
+	export let interactive: boolean = true
+
+	let graphSVG: GraphSVG = new GraphSVG($graph, interactive)
 
 </script>
 
@@ -48,7 +48,7 @@
             on:click={() => graphSVG.view = View.lectures}
         > Lectures </button>
 
-		<Dropdown label="Lecture" placeholder="Choose a Lecture" bind:value={graphSVG.lecture} options={graph.lecture_options} />
+		<Dropdown label="Lecture" placeholder="Choose a Lecture" options={$graph.lecture_options} bind:value={graphSVG.lecture} />
     </div>
 
 	<svg use:graphSVG.create />

src/lib/components/Infobox.svelte

@@ -0,0 +1,53 @@
+
+<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
+
+        border: 1px solid $purple
+        border-radius: $border-radius
+        background-color: rgba($purple, 0.15)
+
+        .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>