Enable WebGL renderer in Cytoscape

Author: LuiggiTenorioK

src/common/CyWorkflow.jsx

@@ -1,4 +1,4 @@
-import CytoscapeComponent from "react-cytoscapejs";
+import CytoscapeComponent from "./CytoscapeComponentWebGl";
 import Cytoscape from "cytoscape";
 import { useEffect, useRef, MutableRefObject } from "react";
 import { triggerDownload } from "../services/utils";
@@ -42,7 +42,8 @@ const GRAPH_STYLE = [
     style: {
       label: "data(id)",
       "text-valign": "top",
-      "border-style": "dashed",
+      "border-style": "solid",
+      "background-opacity": 0.5,
       "text-margin-y": -8,
       "text-opacity": 0.75,
       "font-style": "italic",

src/common/CytoscapeComponentWebGl.jsx

@@ -0,0 +1,47 @@
+import CytoscapeComponent from "react-cytoscapejs";
+import Cytoscape from "cytoscape";
+
+class CytoscapeComponentWebGl extends CytoscapeComponent {
+  componentDidMount() {
+    const container = this.containerRef.current;
+
+    const {
+      global,
+      headless,
+      styleEnabled,
+      hideEdgesOnViewport,
+      textureOnViewport,
+      motionBlur,
+      motionBlurOpacity,
+      wheelSensitivity,
+      pixelRatio,
+    } = this.props;
+
+    const cy = (this._cy = new Cytoscape({
+      container,
+      headless,
+      styleEnabled,
+      hideEdgesOnViewport,
+      textureOnViewport,
+      motionBlur,
+      motionBlurOpacity,
+      wheelSensitivity,
+      pixelRatio,
+      renderer: {
+        // Add WebGL renderer options
+        name: "canvas",
+        webgl: true, // turns on WebGL mode
+        showFps: true, // (optional) shows the current FPS at the top-left
+        webglDebug: true, // (optional) prints debug info to the browser console
+      },
+    }));
+
+    if (global) {
+      window[global] = cy;
+    }
+
+    this.updateCytoscape(null, this.props);
+  }
+}
+
+export default CytoscapeComponentWebGl;