Extending PRSM

(The following is intended for developers who want to extend PRSM)

The program code is available on GitHub.

The javascript (ES6) code in sub-directory js is divided into several modules: those that handle the main network pane (prsm.js), the background painting functions (paint.js), editing the styles (styles.js) (the default styles are in samples.js), the initial tour (tutorial.js), trophic layout (trophic.js), clustering (cluster.js), the calculation of betweenness centrality (betweenness.js), file saving and reading (files.js), the data view (table.js) and shared utility functions (utils.js and merge.js). The HTML file that displays in the browser is in the html directory.

PRSM uses two important packages: yjs and vis-network. The former handles the sharing between participants' browsers and the latter draws the network. A few other packages are used for dealing with touch input (Hammer), vector graphics for the background (fabric.js), drawing emojis, and parsing XML file input.

These components are assembled using parcel and the bundled file is placed in the dist directory. So that users have an easy URL to access (i.e. not needing to include dist in the link), there is an .htaccess file that rewrites URLs from what the user puts into their browser to the correct location.

To install the code, use git to clone the repo to your local disk and change to the cloned directory. Then install the required packages with

npm install

and build the distribution with

npm run build

Documentation can be found in the doc directory including a jsdoc index of all functions and methods.

See package.json for other npm commands.