graph now works (somehow)

frontend/src/App.svelte

@@ -1,30 +1,43 @@
 <script lang="ts">
-	import Graph from "./Graph.svelte";
-</script>
+  import Graph from "./Graph.svelte";
+  import GraphNode from "./GraphNode.svelte";
+  import { loadTasks } from "./task-loader";
+  import type { TasksFile } from "./task-loader";
+  import TasksLoader from "./TasksLoader.svelte";
 
-<main>
-	<h1>Cool graf</h1>
-	<Graph />
-</main>
+  const tasksPromise: Promise<TasksFile> = loadTasks();
+</script>
 
 <style>
-	main {
-		text-align: center;
-		padding: 1em;
-		max-width: 240px;
-		margin: 0 auto;
-	}
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
 
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
 
-	@media (min-width: 640px) {
-		main {
-			max-width: none;
-		}
-	}
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
 </style>
+
+<main>
+  <h1>Cool graf</h1>
+  <!--
+	<svg height=200 width=200>
+	<GraphNode task="null" />
+</svg>
+-->
+  <TasksLoader promise={tasksPromise} let:data={t}>
+    <Graph tasks={t} />
+  </TasksLoader>
+</main>

frontend/src/Graph.svelte

@@ -1,7 +1,13 @@
 <script type="ts">
+  import GraphNode from "./GraphNode.svelte";
   import { onMount } from "svelte";
   import * as d3 from "d3";
-  import *  as tasksLoader from "./task-loader";
+  import { createLinksFromTaskMap } from "./task-loader";
+  import type { TasksFile } from "./task-loader";
+
+  export let tasks: TasksFile;
+  let nodes = tasks.tasks;
+  let edges = createLinksFromTaskMap(tasks);
 
   // Svelte automatically fills this with a reference
   let container: HTMLElement;
@@ -12,20 +18,16 @@
       width = container.clientWidth - margin.left - margin.right,
       height = container.clientHeight - margin.top - margin.bottom;
 
-    // append the svg object to the body of the page
+    // resize the svg object
     var svg = d3
       .select(container)
-      .append("svg")
+      .select("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .attr("viewBox", [-width / 2, -height / 2, width, height])
-      .append("g")
+      .select("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-    const tasks =  await tasksLoader.loadTasks();
-    let nodes = tasks.tasks;
-    let edges = tasksLoader.createLinksFromTaskMap(tasks);
-
     // Initialize the links
     var link = svg
       .selectAll("line")
@@ -34,14 +36,13 @@
       .append("line")
       .style("stroke", "#aaa");
 
-    // Initialize the nodes
-    var node = svg
-      .selectAll("circle")
+    /*var node = svg
+      .selectAll("g")
       .data(nodes)
       .enter()
       .append("circle")
       .attr("r", 20)
-      .style("fill", "#69b3a2");
+      .style("fill", "#69b3a2");*/
 
     // Let's list the force we wanna apply on the network
     var simulation = d3
@@ -56,8 +57,8 @@
           .links(edges) // and this the list of links
       )
       .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
-      .force('x', d3.forceX()) // attracts elements to the zero X coord
-      .force('y', d3.forceY()) // attracts elements to the zero Y coord
+      .force("x", d3.forceX()) // attracts elements to the zero X coord
+      .force("y", d3.forceY()) // attracts elements to the zero Y coord
       .on("tick", ticked)
       .on("end", ticked);
 
@@ -77,13 +78,7 @@
           return d.target.y;
         });
 
-      node
-        .attr("cx", function (d) {
-          return d.x + 6;
-        })
-        .attr("cy", function (d) {
-          return d.y - 6;
-        });
+      nodes = nodes;
     }
   });
 </script>
@@ -95,4 +90,12 @@
   }
 </style>
 
-<div bind:this={container} />
+<div bind:this={container}>
+  <svg>
+    <g>
+      {#each nodes as task}
+        <GraphNode {task} />
+      {/each}
+    </g>
+  </svg>
+</div>

frontend/src/GraphNode.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { TaskDescriptor } from "./task-loader";
+  import Hoverable from "./Hoverable.svelte";
+
+  export let task: TaskDescriptor;
+
+  $: cx = task === undefined || task.x === undefined ? 0 : task.x + 6;
+  $: cy = task === undefined || task.y === undefined ? 0 : task.y - 6;
+</script>
+
+<Hoverable let:hovering={focused}>
+  {#if !focused}
+    <circle r="20" style="fill: #69b3a2" {cx} {cy} />
+  {:else}
+    <circle r="20" style="fill: #ffb3a2" {cx} {cy} />
+  {/if} -->
+  <text x={cx} y={cy}>{task.id}</text>
+</Hoverable>

frontend/src/Hoverable.svelte

@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+        hovering = true;
+	}
+
+	function leave() {
+        hovering = false;
+	}
+</script>
+
+<g on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</g>

frontend/src/TasksLoader.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { TasksFile } from "./task-loader";
+
+  export let promise: Promise<TasksFile>;
+
+
+  let data: TasksFile | null = null;
+  let err: any | null = null;
+    promise.then(
+        (d) => {
+            data = d;
+        },
+        (e) => {
+            err = e;
+        }
+    )
+  
+</script>
+
+{#if data == null && err == null}
+    <div>Loading...</div>
+{/if}
+
+{#if data != null }
+    <slot {data} />
+{/if}
+
+{#if err != null }
+    <div>Error - {err}</div>
+{/if}

frontend/src/task-loader.ts

@@ -1,8 +1,10 @@
+import type { SimulationNodeDatum, SimulationLinkDatum } from "d3"; 
+
 export type TaskDescriptor = {
     id: string
     requires: []
     comment?: string
-}
+} & SimulationNodeDatum
 
 
 export type TasksFile = {
@@ -12,11 +14,6 @@ export type TasksFile = {
 
 export type TaskMap = Map<string, TaskDescriptor>;
 
-export type Link<T> = {
-    source: T,
-    target: T
-}
-
 export async function loadTasks(): Promise<TasksFile> {
     const r = await fetch("/tasks.json")
     return await r.json()
@@ -34,8 +31,8 @@ export function createTaskMap(tasks: TasksFile): TaskMap {
     return m;
 }
 
-export function createLinksFromTaskMap(tasks: TasksFile): Link<TaskDescriptor>[] {
-    let links: Link<TaskDescriptor>[] = [];
+export function createLinksFromTaskMap(tasks: TasksFile): SimulationLinkDatum<TaskDescriptor>[] {
+    let links: SimulationLinkDatum<TaskDescriptor>[] = [];
 
     const taskMap = createTaskMap(tasks);
 
@@ -45,7 +42,7 @@ export function createLinksFromTaskMap(tasks: TasksFile): Link<TaskDescriptor>[]
 
             if (t === undefined) throw `missing task with id ${id}`;
 
-            const l: Link<TaskDescriptor> = {source: t, target: task};
+            const l: SimulationLinkDatum<TaskDescriptor> = {source: t, target: task};
             links.push(l);
         }
     }