From eef1fa68a46439c3b6509567c9c1daf80a0f4a5e Mon Sep 17 00:00:00 2001
From: Vasek Sraier <git@vakabus.cz>
Date: Sat, 26 Sep 2020 18:16:32 +0200
Subject: [PATCH] experimental graph with sigma

---
 frontend/src/App.svelte   |  5 +++-
 frontend/src/Graph.svelte | 58 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/Graph.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index b95e066..0dfbfad 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	export let name: string;
+
+	import Graph from "./Graph.svelte";
 </script>
 
 <main>
 	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+	<Graph />
 </main>
 
 <style>
@@ -27,4 +30,4 @@
 			max-width: none;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte
new file mode 100644
index 0000000..84838c2
--- /dev/null
+++ b/frontend/src/Graph.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { sigma } from "sigma";
+  import { onMount } from "svelte";
+
+  /**
+   * This is a basic example on how to instantiate sigma. A random graph is
+   * generated and stored in the "graph" variable, and then sigma is instantiated
+   * directly with the graph.
+   *
+   * The simple instance of sigma is enough to make it render the graph on the on
+   * the screen, since the graph is given directly to the constructor.
+   */
+  var i,
+    s,
+    N = 100,
+    E = 500,
+    g = {
+      nodes: [],
+      edges: [],
+    };
+
+  // Generate a random graph:
+  for (i = 0; i < N; i++)
+    g.nodes.push({
+      id: "n" + i,
+      label: "Node " + i,
+      x: Math.random(),
+      y: Math.random(),
+      size: Math.random(),
+      color: "#666",
+    });
+
+  for (i = 0; i < E; i++)
+    g.edges.push({
+      id: "e" + i,
+      source: "n" + ((Math.random() * N) | 0),
+      target: "n" + ((Math.random() * N) | 0),
+      size: Math.random(),
+      color: "#ccc",
+    });
+
+  // Instantiate sigma:
+  onMount(() => {
+    s = new sigma({
+      graph: g,
+      container: "c",
+    });
+  });
+</script>
+
+<div id="c" />
+
+<style>
+  div {
+    height: 500px;
+    width: 80%;
+  }
+</style>