2

I maintain two R packages which depend on cytoscape.js (cyjShiny and RCyjs). I use webpack and npm to build a bundle, which I then combine with my relatively short R/Javascript wrapper.

My problem: I return maybe twice yearly to the packages, rerun webpack, see 1000 modules install, see cryptic error reports concerning deprecated modules. Then webpack runs - which I never really understood - and if problems occur, I scratch my head till I have hacked out a path through my cognitive jungle. Which is not to speak ill of either jungles or webpack!

The hoped for solution: that I can periodically download a single file, a complete cytoscape.js, with layout modules and all dependencies included, which uses a minimal module scheme (ES6, require, commonJS, ...) which I can learn enough about to establish some basic competence.

I am sure that webpack, npm and friends are sensible tools for those building big webapps in javascript. I am not so sure that all that machinery makes sense in my limited case.

Max - any advice? Do you (or could you) offer a complete & simple, minimal-assumptions, single file version of cytoscape.js?

paul shannon
  • 355
  • 5
  • 15

2 Answers2

1

max franz gave me the answer, simply pointing me to the proper section at https://js.cytoscape.org.

Which states that fully bundled, all dependencies included minified builds are routinely created in several js forms. See, for example, https://cdnjs.com/libraries/cytoscape

I downloaded cytoscape.min.js, sourced in a script tag, a simple demo works fine. No webpack. No npm. Just right for building a couple of R packages which use cytoscape.js

paul shannon
  • 355
  • 5
  • 15
  • 1
    This does not address including the dependencies, such as layout extension (eg. `cise` and required `avsdf-base, layout-base, cose-base` modules). Did you address resolve the dependencies issue as well? – Marek Sebera Jan 18 '21 at 19:16
  • Marek: at present I use no extensions, just to keep things as simple as possible. – paul shannon Jan 19 '21 at 20:10
  • Yesterday I actually got it working with cola,cise,dagre and klay layouts. Either Webpack (branch master) or ESBuild (branch esbuild) here https://github.com/smarek/cytoscape.bundle.js . Not a definitive solution in my opinion, but usable start – Marek Sebera Jan 20 '21 at 09:40
1

Since I've implemented the solution, i'll present it here. Finished bundle, containing cytoscape along with layouts (cise, dagre, cola and klay) can be found here https://github.com/smarek/cytoscape.bundle.js/tree/esbuild/dist

I've so far explored two ways (webpack and esbuild), more might be added later to linked repository, and since I consider the ESBuild solution faster and easier, i'll describe that

You'll need single file, call it eg. app.jsx

import cytoscape from 'cytoscape'
import cise from 'cytoscape-cise'
import dagre from 'cytoscape-dagre'
import cola from 'cytoscape-cola'
import klay from 'cytoscape-klay'

cytoscape.use(cise)
cytoscape.use(dagre)
cytoscape.use(cola)
cytoscape.use(klay)

globalThis.cytoscape = cytoscape

And few commands, preferably use clean/dedicated dir containing only app.jsx file

# you can use your favorite package manager, i'll use yarn
# important is that `node_modules` contains the cytoscape and dependencies required in the app.jsx
yarn add cytoscape cytoscape-klay cytoscape-cola cytoscape-cise cytoscape-dagre
# this will use jsx file to create the app and bundle it for browsers as listed
esbuild app.jsx --bundle --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=cytoscape.bundle.js

Result is cytoscape.bundle.js and cytoscape.bundle.js.map

I think it's pretty obvious, how to modify which layouts you want to have in the bundle, and how to remove/add some

Marek Sebera
  • 39,650
  • 37
  • 158
  • 244