temp changes

Author: YannicEl

packages/app/src/routes/app/(canvas)/+page.svelte

@@ -38,23 +38,23 @@
 
 	onMount(async () => {
 		const graph = await loadGraph(selectedGraph);
-		const spanner = await loadSpanner(selectedGraph);
 
 		// console.time('greedy');
 		// const greedySpanner = new GreedySpanner({ graph, device, maxDistortion });
 		// const greedySpannerGraph = await greedySpanner.compute();
 		// console.timeEnd('greedy');
 
-		console.time('theta');
-		const thetaSpanner = new ThetaSpanner({ graph, device, k: 100 });
-		const thetaSpannerGraph = await thetaSpanner.compute();
-		console.timeEnd('theta');
+		// console.time('theta');
+		// const thetaSpanner = new ThetaSpanner({ graph, device, k: 100 });
+		// const thetaSpannerGraph = await thetaSpanner.compute();
+		// console.timeEnd('theta');
 
 		epb = new EdgePathBundlingGPUFloydWarshall({
+			device,
 			graph,
-			maxDistortion,
+			maxDistortion: 128,
 			edgeWeightFactor,
-			device,
+			spannerAlgorithm: ThetaSpanner,
 		});
 
 		runGPU();

packages/app/src/routes/app/(canvas)/spanner/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { drawGraphAndBundledEdges } from '$lib/_canvas';
 	import { getCanvasState } from '$lib/state/canvas';
 	import { getWebGPUState } from '$lib/state/webGPU';
 	import ControlPanel from '$lib/components/ControlPanel.svelte';
@@ -26,21 +25,29 @@
 
 	canvas.onResize = () => runGPU();
 
+	$effect(() => {
+		console.log(maxDistortion);
+		if (!theta) return;
+
+		theta.maxDistortion = maxDistortion;
+		runGPU();
+	});
+
 	onMount(async () => {
 		const graph = await loadGraph(selectedGraph);
 
 		greedy = new GreedySpanner({ graph, device, maxDistortion: 2 });
-		theta = new ThetaSpanner({ graph, device, k: 1000 });
+		theta = new ThetaSpanner({ graph, device, maxDistortion: 3 });
 
 		runGPU();
 	});
 
 	async function runGPU() {
 		if (!greedy || !theta) return;
 
-		console.time('greedy');
-		const greedySpanner = await greedy.compute();
-		console.timeEnd('greedy');
+		// console.time('greedy');
+		// const greedySpanner = await greedy.compute();
+		// console.timeEnd('greedy');
 
 		console.time('theta');
 		const thetaSpanner = await theta.compute();

packages/app/src/routes/app/metrics/+page.svelte

@@ -1,16 +1,8 @@
-import type { EdgePathBundling } from '..';
 import type { Edge } from '../../AdjacencyList';
 import { Graph } from '../../AdjacencyList';
 import { FloydWarshall } from '../../shortest-path/floyd-warshall/FloydWarshall';
 import type { Spanner } from '../../spanner';
-import { ThetaSpanner } from '../../spanner/theta/gpu';
-
-export type EdgePathBundlingGPUFloydWarshallParams = {
-	graph: Graph;
-	maxDistortion?: number;
-	edgeWeightFactor?: number;
-	device: GPUDevice;
-};
+import type { EdgePathBundling, EdgePathBundlingParams } from '../index';
 
 export class EdgePathBundlingGPUFloydWarshall implements EdgePathBundling {
 	#device: GPUDevice;
@@ -19,40 +11,45 @@ export class EdgePathBundlingGPUFloydWarshall implements EdgePathBundling {
 	#maxDistortion: number;
 	#edgeWeightFactor: number;
 
-	#spanner?: Spanner;
+	#spanner: Spanner;
 	#floydWarshall?: FloydWarshall;
 
 	constructor({
 		device,
 		graph,
-		maxDistortion = 2,
-		edgeWeightFactor = 1,
-	}: EdgePathBundlingGPUFloydWarshallParams) {
+		maxDistortion,
+		edgeWeightFactor,
+		spannerAlgorithm,
+	}: EdgePathBundlingParams) {
 		this.#device = device;
 
 		this.#graph = graph;
 
 		this.#maxDistortion = maxDistortion;
 		this.#edgeWeightFactor = edgeWeightFactor;
+
+		this.#spanner = new spannerAlgorithm({
+			device: this.#device,
+			graph: this.#graph,
+			maxDistortion: this.#maxDistortion,
+		});
 	}
 
 	async bundle() {
-		if (!this.#spanner) {
-			// this.#spanner = new GreedySpanner({
-			// 	graph: this.#graph,
-			// 	device: this.#device,
-			// 	maxDistortion: this.#maxDistortion,
-			// });
-
-			this.#spanner = new ThetaSpanner({
-				graph: this.#graph,
-				device: this.#device,
-				k: 100,
-			});
+		if (!this.#spanner?.graph) {
+			await this.#spanner.compute();
+		}
 
+		if (this.#edgeWeightFactor !== this.#spanner.maxDistortion) {
+			console.log('Max distortion changed. Recomputing Spanner');
+			this.#spanner.maxDistortion = this.#edgeWeightFactor;
 			await this.#spanner.compute();
 		}
 
+		if (!this.#spanner.graph) {
+			throw new Error('Spanner graph not found');
+		}
+
 		if (!this.#floydWarshall) {
 			this.#floydWarshall = new FloydWarshall({
 				graph: this.#spanner.graph,
@@ -71,11 +68,13 @@ export class EdgePathBundlingGPUFloydWarshall implements EdgePathBundling {
 
 		const difference: Edge[] = [];
 		this.#graph.edges.forEach((edge, key) => {
-			if (!this.#spanner!.graph.edges.has(key)) {
+			if (!this.#spanner.graph!.edges.has(key)) {
 				difference.push(edge);
 			}
 		});
 
+		console.log('difference', difference.length);
+
 		const shortestPaths = await this.#floydWarshall.shortestPaths(difference);
 
 		const bundeledEdges: {

packages/core/src/edge-path-bundling/floyd-warshall/gpu.ts

@@ -1,10 +1,19 @@
-import type { Edge } from '../AdjacencyList';
+import type { Edge, Graph } from '../AdjacencyList';
+import type { Spanner, SpannerParams } from '../spanner';
 
 export type BundledEdge = {
 	edge: Edge;
 	controlPoints: { x: number; y: number }[];
 };
 
+export type EdgePathBundlingParams = {
+	device: GPUDevice;
+	graph: Graph;
+	spannerAlgorithm: new (params: SpannerParams) => Spanner;
+	maxDistortion: number;
+	edgeWeightFactor: number;
+};
+
 export abstract class EdgePathBundling {
 	abstract bundle(): Promise<BundledEdge[]> | BundledEdge[];
 }

packages/core/src/edge-path-bundling/index.ts

@@ -1,8 +1,8 @@
-import type { Spanner } from '..';
 import { Graph } from '../../AdjacencyList';
 import { AdjacencyMatrix } from '../../AdjacencyMatrix';
 import { BufferData } from '../../BufferData';
 import { createGPUBuffer, writeGPUBuffer } from '../../GPUBuffer';
+import type { Spanner } from '../index';
 import shader from './shader.wgsl?raw';
 
 export type GreedySpannerParams = {

packages/core/src/spanner/greedy/gpu.ts

@@ -31,14 +31,14 @@ fn compute(
   let edge = edges[uniforms.k];
 
   if(distance_matrix_get(x, y) > edge.weight * uniforms.max_distortion) {
+    var value = min(distance_matrix_get(x, y), distance_matrix_get(x, edge.start) + edge.weight + distance_matrix_get(edge.end, y));
+    value = min(value, distance_matrix_get(x, edge.end) + edge.weight + distance_matrix_get(edge.start, y));
+
+    distance_matrix_set(x, y, value);
+  } else {
     skipped += 1;
     return;
   }
-
-  var value = min(distance_matrix_get(x, y), distance_matrix_get(x, edge.start) + edge.weight + distance_matrix_get(edge.end, y));
-  value = min(value, distance_matrix_get(x, edge.end) + edge.weight + distance_matrix_get(edge.start, y));
-
-  distance_matrix_set(x, y, value);
 }
 
 // Matrix getters and setters

packages/core/src/spanner/greedy/shader.wgsl

@@ -1,7 +1,16 @@
 import type { Graph } from '../AdjacencyList';
 
+export type SpannerParams = {
+	device: GPUDevice;
+	graph: Graph;
+	maxDistortion: number;
+};
+
 export abstract class Spanner {
 	abstract compute(): Promise<Graph> | Graph;
 
-	abstract get graph(): Graph;
+	abstract get graph(): Graph | undefined;
+
+	abstract set maxDistortion(value: number);
+	abstract get maxDistortion(): number;
 }