Welcome to

Genome ARchitecture DNA Epigenome and Nucleome

-

Network Exploration Tool

Here you will be able to visualize chromosome conformation capture datasets as networks of interacting chromatin fragments. The published datasets available were generated with the Promoter Capture HiC technique, which returns contacts involving promoters.
Choose your organism and cell type from the drop-down menu to visualize the corresponding network (by chromosome or genome wide when showing only promoter-promoter contacts). A selection of epigenomic features that have been mapped to the chromatin fragments will be available from the drop-down menu on the right. Select one of them to visualize chromatin fragments that have that feature and to calculate statistics relating to this feature and the 3D network.

GARDEN-NET uses functionality provided by the ChAseR R package to compute chromatin assortativity (Pancaldi et al. 2016).
User submitted features can also be visualized on the networks and used for the network based calculations.

Table Of Content

Click to expand Table Of Content

• Table Of Content
• Backend
• Requirements
  • Packages
  • Dependencies
• Usage
• Development
  • Testing
  • Build
  • Serve
• Production
  • Bundler with excluded dependencies
• Dist

Deployment

Technologies

License

Contributors

Backend

The backend add to GARDEN-NET the search, neighborhood, and upload features files capacities provided by GARDEN-NET_backend

Requirements

Packages

• yarn

Dependencies

yarn install

Usage

1. Run yarn serve
2. Open public/index.html or public/production.html with any web browser, for example, Firefox

Development

Testing

yarn test

Build

yarn build

Serve

yarn serve

Production

React, React-DOM, Reactstrap and Cytoscape dependencies are excluded by default from the bundle a cause of their size

Use production.html which replaces the next lines from the index.html

<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../node_modules/tippy.js/themes/light-border.css">

<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/reactstrap/dist/reactstrap.full.js"></script>
<script src="../node_modules/cytoscape/dist/cytoscape.min.js"></script>
<script src="../node_modules/redux/dist/redux.js"></script>
<script src="../node_modules/react-redux/dist/react-redux.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/cytoscape-popper/cytoscape-popper.js"></script>
<script src="../node_modules/tippy.js/umd/index.js"></script>
<script src="../node_modules/react-router-dom/umd/react-router-dom.js"></script>

with CDN links for production (min versions)

<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js/themes/light-border.css">

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/reactstrap/dist/reactstrap.full.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/redux/dist/redux.min.js"></script>
<script src="https://unpkg.com/react-redux/dist/react-redux.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/cytoscape-popper/cytoscape-popper.js"></script>
<script src="https://unpkg.com/tippy.js/umd/index.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

Bundler with excluded dependencies

Comment/Remove the next lines from the webpack.config.js file (the bundle file will be increased a lot)

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "reactstrap": "Reactstrap",
  "cytoscape": "cytoscape",
  "redux": "Redux",
  "react-redux": "ReactRedux",
  "popper.js": "Popper",
  "cytoscape-popper": 'cytoscapePopper',
  "react-redux": "ReactRedux",
  "react-router-dom": "ReactRouterDOM"
}

and run Dist

Dist

yarn dist

Deployment

docker run --rm --interactive --tty --publish 8080:8080 --user "$(id -u):$(id -g)" --volume "$(pwd):/GARDEN-NET" --workdir /GARDEN-NET node:8-alpine sh -c 'yarn install && yarn build:no-watch && yarn dist && yarn serve'

or run

./docker.sh

Technologies

• Yarn
• Webpack
• TypeScript
• React
• Redux
  • react-redux
• Bootstrap
  • Reactstrap
• Cytoscape.js
  • Cytoscape.js-popper
• jest
• tippy.js

License

GNU AFFERO GENERAL PUBLIC LICENSE (see License.md)

Contributors

• Miguel Madrid Mencía (mimame) - creator, maintainer