Run Cystoscape.js with Node.js

Published at

10/12/2023

Categories

4 categories in total

Why? If you need to generate an image on the server side.

At first, I thought it was impossible. There is cytosnap that uses Puppeteer (headless browser). Then, for fun, I rewrote it with Tauri.

But later, I though, what if it would be possible to run it with Node.js. And, indeed, it’s possible.

Solution

Add polyfils for the browser (it also includes canvas):

class XMLSerializer {
 serializeToString(node) {
 return serialize(node);
 }
}
global.XMLSerializer = XMLSerializer;

const dom = new JSDOM(`<!DOCTYPE html><div id="cy"></div>`);
global.window = dom.window;
global.document = dom.window.document;

Explicitly set bounding box

source.layout.boundingBox = {
 x1: 0,
 y1: 0,
 x2: source.width,
 y2: source.height,
};

Generate a graph the same way you would in the browser:

const container = dom.window.document.querySelector("#cy");
const cy = cytoscape({ container, ...defaults, ...source });
cy.layout(source.layout).run();

For now I was able to render it only as SVG:

await loadExtension("svg");
res = cy.svg({
 bg: source.background,
 full: true,
});

In order to not polute global scope with polyfills we can run this script as sub-process:

const executablePath = `bin/cyto-nodejs.js`;
const bin = spawn(executablePath, args, {
 windowsHide: true,
});

That’s it.

Source code

Source code is here: https://github.com/stereobooster/cyto-nodejs

dev-resources.site

Run Cystoscape.js with Node.js

Solution

Source code