enable WebGL acceleration gated behind "gpu" GET parameter

Author: KonradHoeffner

js/browser/graph.ts

@@ -1,5 +1,6 @@
 /** Provides graph operations such as initialization, wayfinding and highlighting.*/
 /*eslint no-unused-vars: ["warn", { "argsIgnorePattern": "^_" }]*/
+import { params } from "./params";
 import { coloredEdgeStyle, showPropertyStyle, style } from "./style";
 import { colorschemenight } from "./colorschemenight";
 import { colorschemeday } from "./colorschemeday";
@@ -37,10 +38,20 @@ export class Graph {
 		const initTimer = timer("graph-init");
 		this.container = container;
 		this.container.style.backgroundColor = "black"; // required to show background image
+		const renderer = {
+			name: "canvas",
+			webgl: true,
+			showFps: true,
+			webglDebug: true,
+		};
+		if (params.gpu) {
+			log.warn("'gpu' flag detected: Activating experimental WebGL hardware acceleration.");
+		}
 		this.cy = cytoscape({
 			container,
 			//@ts-expect-error concat type
 			style: style.style.concat(colorschemenight),
+			...(params.gpu && { renderer }),
 			wheelSensitivity: 2,
 			minZoom: 0.02,
 			maxZoom: 7,

js/browser/init.ts

@@ -1,4 +1,5 @@
 import { config } from "../config/config";
+import { params } from "./params";
 import { loadGraphFromSparql } from "../loadGraphFromSparql";
 import { loadGraphFromJsonFile, loadLayoutFromJsonObject } from "./load";
 import { Search } from "./search";
@@ -13,64 +14,15 @@ import { Graph } from "./graph";
 import type { LayoutJson } from "./save.ts";
 import { View } from "./view";
 
-interface Params {
-	empty: boolean;
-	benchmark: boolean;
-	instances: boolean;
-	virtual: boolean;
-	class: string;
-	json: string;
-	sparql: string;
-	graph: string;
-	sub: string;
-}
-
-/** A flag is a GET parameter with a boolean value.
-Allow setting a flag without a value, for example <https://www.snik.eu/graph?instances>.
-In this case the empty string is returned, see <https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get>.
-The alternative is <https://www.snik.eu/graph?instances=true> but all other values are treated as false.
-This is needed in case one wants to override a flag that is active by default through the configuration. */
-function parseFlag(f: string): boolean {
-	return f === "" || f === "true";
-}
-
-/** Parse browser URL GET parameters. */
-function parseParams(): Params {
-	const url = new URL(window.location.href);
-	const defaults = {
-		sparql: config.ontology.sparql.endpoint,
-		instances: config.ontology.sparql.instances,
-	};
-	// TypeScript interfaces don't exist on runtime, keep in sync with Params interface.
-	const paramKeys = new Set(["empty", "benchmark", "instances", "virtual", "class", "json", "sparql", "graph", "sub"]);
-	const unknown = new Set(Array.from(url.searchParams.keys())).difference(paramKeys);
-	if (unknown.size > 0) {
-		log.warn("Unknown GET parameters: " + Array.from(unknown).join(", "));
-	}
-	return Object.assign(defaults, {
-		empty: parseFlag(url.searchParams.get("empty")),
-		benchmark: parseFlag(url.searchParams.get("benchmark")),
-		// load and show instances when loading from endpoint, not only classes
-		...(url.searchParams.get("instances") && { instances: parseFlag(url.searchParams.get("instances")) }),
-		virtual: parseFlag(url.searchParams.get("virtual")), // create "virtual triples" to visualize connections like domain-range
-		class: url.searchParams.get("class"),
-		json: url.searchParams.get("json"),
-		...(url.searchParams.get("sparql") && { sparql: url.searchParams.get("sparql") }), // don't overwrite default with null
-		graph: url.searchParams.get("graph"),
-		sub: url.searchParams.get("sub"),
-	});
-}
-
 /**
  * Apply parameters and load graph.
 @param graph - the graph to apply the params to
 @param params - parameter object */
-async function applyParams(graph: Graph, params: Params): Promise<void> {
+async function applyParams(graph: Graph): Promise<void> {
 	try {
 		if (params.benchmark) {
 			addBenchmarkOverlay(graph.cy);
 		}
-
 		if (params.empty) {
 			log.info(`Parameter "empty" detected. Skip loading and display file load prompt.`);
 			const loadArea = document.getElementById("loadarea");
@@ -172,8 +124,7 @@ export async function fillInitialGraph(graph: Graph): Promise<void> {
 
 	// GET parameters
 	await progress(async () => {
-		const params = parseParams();
-		await applyParams(graph, params);
+		await applyParams(graph);
 		new Search(util.getElementById("search") as HTMLFormElement);
 		initHelp();
 	});

js/browser/params.ts

@@ -0,0 +1,55 @@
+/** Manages browser URL GET parameters.*/
+import { config } from "../config/config";
+import log from "loglevel";
+
+export interface Params {
+	empty: boolean;
+	benchmark: boolean;
+	instances: boolean;
+	gpu: boolean;
+	virtual: boolean;
+	class: string;
+	json: string;
+	sparql: string;
+	graph: string;
+	sub: string;
+}
+
+/** A flag is a GET parameter with a boolean value.
+Allow setting a flag without a value, for example <https://www.snik.eu/graph?instances>.
+In this case the empty string is returned, see <https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get>.
+The alternative is <https://www.snik.eu/graph?instances=true> but all other values are treated as false.
+This is needed in case one wants to override a flag that is active by default through the configuration. */
+function parseFlag(f: string): boolean {
+	return f === "" || f === "true";
+}
+
+/** Parse browser URL GET parameters. */
+function parseParams(): Params {
+	const url = new URL(window.location.href);
+	const defaults = {
+		sparql: config.ontology.sparql.endpoint,
+		instances: config.ontology.sparql.instances,
+	};
+	// TypeScript interfaces don't exist on runtime, keep in sync with Params interface.
+	const paramKeys = new Set(["empty", "benchmark", "instances", "virtual", "class", "json", "sparql", "graph", "sub", "gpu"]);
+	const unknown = new Set(Array.from(url.searchParams.keys())).difference(paramKeys);
+	if (unknown.size > 0) {
+		log.warn("Unknown GET parameters: " + Array.from(unknown).join(", "));
+	}
+	return Object.assign(defaults, {
+		empty: parseFlag(url.searchParams.get("empty")),
+		benchmark: parseFlag(url.searchParams.get("benchmark")),
+		// load and show instances when loading from endpoint, not only classes
+		...(url.searchParams.get("instances") && { instances: parseFlag(url.searchParams.get("instances")) }),
+		gpu: parseFlag(url.searchParams.get("gpu")),
+		virtual: parseFlag(url.searchParams.get("virtual")), // create "virtual triples" to visualize connections like domain-range
+		class: url.searchParams.get("class"),
+		json: url.searchParams.get("json"),
+		...(url.searchParams.get("sparql") && { sparql: url.searchParams.get("sparql") }), // don't overwrite default with null
+		graph: url.searchParams.get("graph"),
+		sub: url.searchParams.get("sub"),
+	});
+}
+
+export const params = parseParams();