<commit_before># sbgn-renderer
A JavaSript library that renders biological networks using cytoscape.js and the System Biology Graphical Notation language

## Purpose
The purpose of this library is to take json that represents biological networks i.e graphs, and display them in the browser using
System Biology Graphical Notation.  A standard notation for describing and visually representing biological processes.

## Requirements
The renderer expects cytoscape graph JSON.  To get cytoscape graph JSON, you need the following:
* SBGN-ML files: xml files that represent biological networks.
* A way to convert these files into graph JSON.  This is a nice [package](https://github.com/PathwayCommons/sbgnml-to-cytoscape) that does the job

## Installation
There are two ways to install this module

1. npm:
```
npm install sbgn-renderer
```
OR
2. Copy the pre-built library from the [dist](https://github.com/d2fong/sbgn-renderer/blob/master/dist/sbgnRenderer.js) folder and link it in your html file
```
<html>
...
<script src="sbgn-renderer.js"></script>
...
</html>
```

## Usage

```js
var SbgnRenderer = require('sbgn-renderer');
var convertSbgnml = require('sbgnml-to-cytoscape');

var myFileText = ... // some text that represents sbgnml
var myGraph = convertSbgnml(myFileText);

var myContainer = document.getElementById('#my-container');
var renderer = new SbgnRenderer({container: myContainer});

renderer.renderGraph(myGraph);

```
## API

### SbgnRenderer

Creates new renderer instances

#### Initialization
```js
var renderer = new SbgnRenderer({
  container: document.getElementById('#myContainer')
});
```
#### Options

```container```: A HTML DOM element in which the graph should be rendered


### SbgnRenderer.renderGraph(cytoscapeGraphJson)

Renders the given graph

#### input
```cytoscapeGraphJson```: JSON representing your biological network.  

Please look at the requirements for more information on how to acquire valid input 

### SbgnRenderer.cy

A cytoscape instance.  Through this property, you can use the cytoscape.js API to

Select elements in the graph, style the graph, etc.

To learn more, please read the cytoscape [documentation](http://js.cytoscape.org/)


## Running the Demo:
Clone this repository
```
git clone https://github.com/d2fong/sbgn-renderer
```

Change directory to the newly cloned folder
```
cd sbgn-renderer
```

Run a local server (any one will do)
```
node http-server -p <PORT>
```

Open your browser and type the following address:
```
localhost:<PORT>/demo/with-plainjs.html
```

## Building the Library

The following npm scripts are available.  To run a script, type:

```
npm run <command>
```

```build```: Builds the sbgn-renderer library; Places it in the dist folder

```build-demo```: Builds the browserify version of the demo app; Viewable in the demo folder

<commit_msg>readme credits and historical context<commit_after># sbgn-renderer
A JavaSript library that renders biological networks using cytoscape.js and the System Biology Graphical Notation language

## Purpose
The purpose of this library is to take json that represents biological networks i.e graphs, and display them in the browser using
System Biology Graphical Notation.  A standard notation for describing and visually representing biological processes.

## Requirements
The renderer expects cytoscape graph JSON.  To get cytoscape graph JSON, you need the following:
* SBGN-ML files: xml files that represent biological networks.
* A way to convert these files into graph JSON.  This is a nice [package](https://github.com/PathwayCommons/sbgnml-to-cytoscape) that does the job

## Installation
There are two ways to install this module

1. npm:
```
npm install sbgn-renderer
```
OR
2. Copy the pre-built library from the [dist](https://github.com/d2fong/sbgn-renderer/blob/master/dist/sbgnRenderer.js) folder and link it in your html file
```
<html>
...
<script src="sbgn-renderer.js"></script>
...
</html>
```

## Usage

```js
var SbgnRenderer = require('sbgn-renderer');
var convertSbgnml = require('sbgnml-to-cytoscape');

var myFileText = ... // some text that represents sbgnml
var myGraph = convertSbgnml(myFileText);

var myContainer = document.getElementById('#my-container');
var renderer = new SbgnRenderer({container: myContainer});

renderer.renderGraph(myGraph);

```
## API

### SbgnRenderer

Creates new renderer instances

#### Initialization
```js
var renderer = new SbgnRenderer({
  container: document.getElementById('#myContainer')
});
```
#### Options

```container```: A HTML DOM element in which the graph should be rendered


### SbgnRenderer.renderGraph(cytoscapeGraphJson)

Renders the given graph

#### input
```cytoscapeGraphJson```: JSON representing your biological network.  

Please look at the requirements for more information on how to acquire valid input 

### SbgnRenderer.cy

A cytoscape instance.  Through this property, you can use the cytoscape.js API to

Select elements in the graph, style the graph, etc.

To learn more, please read the cytoscape [documentation](http://js.cytoscape.org/)


## Running the Demo:
Clone this repository
```
git clone https://github.com/d2fong/sbgn-renderer
```

Change directory to the newly cloned folder
```
cd sbgn-renderer
```

Run a local server (any one will do)
```
node http-server -p <PORT>
```

Open your browser and type the following address:
```
localhost:<PORT>/demo/with-plainjs.html
```

## Building the Library

The following npm scripts are available.  To run a script, type:

```
npm run <command>
```

```build```: Builds the sbgn-renderer library; Places it in the dist folder

```build-demo```: Builds the browserify version of the demo app; Viewable in the demo folder

## Credits

This repository borrows heavily from the code in [sbgnviz.js](https://github.com/iVis-at-Bilkent/sbgnviz.js).
Therefore, credit and recognition must be given to the team at Bilkent University, Turkey.

#### Bilkent team members:

* <NAME>, <NAME>, <NAME>, <NAME> of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis).

While the code is similar, PathwayCommons and i-Vis at Bilkent have different needs and different goals.  The code had to be repurposed to pivot PathwayCommons into a position that more closely aligns with these needs and goals.

{'fraction_non_alphanumeric': 0.10504536049657807, 'fraction_numerical': 0.001273277096928219, 'mean_word_length': 4.7598533455545375, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 7, 'lorem ipsum': 0, 'www.': 1, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '545118', 'n_tokens_mistral': 1896, 'n_tokens_neox': 1799, 'n_words': 725}