Browse Source

nacitani uloh do grafu z tasks.json

mj-deploy
Vašek Šraier 4 years ago
parent
commit
18b62bd2b2
  1. 23
      frontend/src/Graph.svelte
  2. 38
      frontend/src/task-loader.ts

23
frontend/src/Graph.svelte

@ -1,6 +1,7 @@
<script type="ts"> <script type="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import * as d3 from "d3"; import * as d3 from "d3";
import * as tasksLoader from "./task-loader";
// Svelte automatically fills this with a reference // Svelte automatically fills this with a reference
let container: HTMLElement; let container: HTMLElement;
@ -17,17 +18,18 @@
.append("svg") .append("svg")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .attr("height", height + margin.top + margin.bottom)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.append("g") .append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const data = await d3.json( const tasks = await tasksLoader.loadTasks();
"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json" let nodes = tasks.tasks;
); let edges = tasksLoader.createLinksFromTaskMap(tasks);
// Initialize the links // Initialize the links
var link = svg var link = svg
.selectAll("line") .selectAll("line")
.data(data.links) .data(edges)
.enter() .enter()
.append("line") .append("line")
.style("stroke", "#aaa"); .style("stroke", "#aaa");
@ -35,7 +37,7 @@
// Initialize the nodes // Initialize the nodes
var node = svg var node = svg
.selectAll("circle") .selectAll("circle")
.data(data.nodes) .data(nodes)
.enter() .enter()
.append("circle") .append("circle")
.attr("r", 20) .attr("r", 20)
@ -43,7 +45,7 @@
// Let's list the force we wanna apply on the network // Let's list the force we wanna apply on the network
var simulation = d3 var simulation = d3
.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes .forceSimulation(nodes) // Force algorithm is applied to data.nodes
.force( .force(
"link", "link",
d3 d3
@ -51,10 +53,11 @@
.id(function (d) { .id(function (d) {
return d.id; return d.id;
}) // This provide the id of a node }) // This provide the id of a node
.links(data.links) // and this the list of links .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("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
.force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area .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("tick", ticked)
.on("end", ticked); .on("end", ticked);
@ -87,8 +90,8 @@
<style> <style>
div { div {
height: 80vh; height: 75vh;
width: 80vh; width: 100%;
} }
</style> </style>

38
frontend/src/task-loader.ts

@ -10,7 +10,45 @@ export type TasksFile = {
clusters: { [name: string]: string[] } clusters: { [name: string]: string[] }
} }
export type TaskMap = Map<string, TaskDescriptor>;
export type Link<T> = {
source: T,
target: T
}
export async function loadTasks(): Promise<TasksFile> { export async function loadTasks(): Promise<TasksFile> {
const r = await fetch("/tasks.json") const r = await fetch("/tasks.json")
return await r.json() return await r.json()
} }
export function createTaskMap(tasks: TasksFile): TaskMap {
let m = new Map<string, TaskDescriptor>();
for (let task of tasks.tasks) {
if (task.id in m) throw 'duplicate IDs in tasks.json';
m.set(task.id, task);
}
return m;
}
export function createLinksFromTaskMap(tasks: TasksFile): Link<TaskDescriptor>[] {
let links: Link<TaskDescriptor>[] = [];
const taskMap = createTaskMap(tasks);
for (const task of tasks.tasks) {
for (const id of task.requires) {
const t = taskMap.get(id);
if (t === undefined) throw `missing task with id ${id}`;
const l: Link<TaskDescriptor> = {source: t, target: task};
links.push(l);
}
}
return links;
}