Coder Social home page Coder Social logo

zakandrewking / escher Goto Github PK

View Code? Open in Web Editor NEW
210.0 15.0 78.0 29.2 MB

Build, share, and embed visualizations of metabolic pathways.

Home Page: https://escher.github.io

License: Other

JavaScript 89.63% Python 6.58% CSS 3.40% HTML 0.37% Shell 0.03%
javascript escher visualization biology bioinfomatics d3js python

escher's Introduction

PyPi NPM Gitter.im Documentation Status Travis Coverage Status MIT

Escher

Escher is a web-based tool to build, view, share, and embed metabolic maps. The easiest way to use Escher is to browse or build maps on the Escher website.

Visit the documentation to get started with Escher and explore the API.

Check out the developer docs, the Gitter chat room, and the Development Roadmap for information on Escher development. Feel free to submit bugs and feature requests as Issues, or, better yet, Pull Requests.

Follow @zakandrewking for Escher updates.

You can help support Escher by citing our publication when you use Escher or EscherConverter:

Zachary A. King, Andreas Dräger, Ali Ebrahim, Nikolaus Sonnenschein, Nathan E. Lewis, and Bernhard O. Palsson (2015) Escher: A web application for building, sharing, and embedding data-rich visualizations of biological pathways, PLOS Computational Biology 11(8): e1004321. doi:10.1371/journal.pcbi.1004321

Escher was developed at SBRG. Funding was provided by The National Science Foundation Graduate Research Fellowship under Grant no. DGE-1144086, The European Commission as part of a Marie Curie International Outgoing Fellowship within the EU 7th Framework Program for Research and Technological Development (EU project AMBiCon, 332020), and The Novo Nordisk Foundation through The Center for Biosustainability at the Technical University of Denmark (NNF10CC1016517)

Building and testing Escher

JavaScript

First, install dependencies with npm (or you can use yarn):

npm install

Escher uses webpack to manage the build process. To run typical build steps, just run:

npm run build

You can run a development server with:

npm run start
# or for live updates when the source code changes:
npm run watch

To test the JavaScript files, run:

npm run test

Python

Escher has a Python package for generating Escher visualizations from within a Python data anlaysis session. To learn more about using the features of the Python package, check out the documentation:

https://escher.readthedocs.io/en/latest/escher-python.html

You can install it with pip:

pip install escher

Jupyter extensions

When you pip install escher, the Jupyter notebook extension should be installed automatically. If that doesn't work, try:

# The notebook extenstion should install automatically. You can check by running:
jupyter nbextension list
# Make sure you have version >=5 of the `notebook` package
pip install "notebook>=5"
# To manually install the extension
jupyter nbextension install --py escher
jupyter nbextension enable --py escher
# depending on you environment, you might need the `--sysprefix` flag with those commands

To install the Jupyter lab extension, simply install Escher with pip install escher then install the extension:

jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension install escher

Python/Jupyter Development

For development of the Python package, first build the JavaScript package and copy it over to the py directory with these commands in the Escher root:

npm install
npm run build
npm run copy

Then in the py directory, install the Python package:

cd py
pip install -e . # installs escher in develop mode and dependencies

For Python testing, run this in the py directory:

cd py
pytest

To develop the Jupyter notebook and Jupyter Lab extensions, you will need install them with symlinks.

First, install the Python package for development as described above.

For the Jupyter notebooks, run:

cd py
jupyter nbextension install --py --symlink escher
jupyter nbextension enable --py escher

If you are using virtualenv or conda, you can add the --sys-prefix flag to those commands to keep your environment isolated and reproducible.

When you make changes, you will need to yarn build && yarn copy and refresh notebook browser tab.

For Jupyter Lab, run (in the root directory):

yarn watch # keep this running as a separate process
jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension link
jupyter lab --watch

If you don't see changes when you edit the code, try refreshing or restarting jupyter lab --watch.

Docs

Build and run the docs::

cd docs
./build_docs
cd _build/html
python -m SimpleHTTPServer # python 2
python -m http.server # python 3

escher's People

Contributors

aebrahim avatar elliotgordonrowe avatar matyasfodor avatar midnighter avatar npmcdn-to-unpkg-bot avatar zakandrewking avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

escher's Issues

Wacky IPython Notebook behavior

  1. Map extends beyond container.
  2. Detecting scroll events is conflicting with notebook scroll.
  3. Need to include the buttons in the notebook, but not the menu.
  4. Should ignore key events.

consolidate files

Ideally the python module would use other locations instead of its own "static" directory to avoid duplication and needing to update code in 2 places.

Should it also place things in the appropriate directories i.e. its templates in the template directory?

@zakandrewking If you think this is a good idea I can make a PR to tweak the install script and that all that jazz.

black boxes in svg

When you do an svg export of a metabolic map (I used simpheny-maps/ijo-central.svg), there are black boxes in the background (as in a previous bug, though the black boxes do not appear in the browser from which the svg is exported).

visualisation

I am trying to make a visualization of a metabolic network using COBRApy and escher (as they suggest in the COBRApy manual). I have an sbml file with all the reactions in my organism.

I already generated my own escher HTML file using following code:

model = cobra.io.read_sbml_model('E:/e.coli.sbml')
modeljson = cobra.io.json.to_json(model)
b = Builder(map_json=modeljson)
b.save_html('E:/e.coli.html')
Opening the html file in my browser(s) just results in an empty screen, although the file itself is not empty.

Does anyone have an idea how I could solve this, or get to the bottom of the problem?

The b.display_in_browser(), also does not work (gives a grey empty screen)

Thanks,

Bart

svg export from python

Is it possible to export the map made by escher directly from python?
I mean something like this:

b = escher.Builder (...)
b.export_svg (...)

It would be usefull to integrate escher in other web apps.

Arrows no longer show reaction direction (when data is loaded)

Hi!

I'm using Escher-1.0.0b2. A few weeks ago, when I started using this version, arrows would show the direction of the flux for reversible reactions:
image
However the behaviour now (I haven't updated anything nor touched the code) is no longer there. For example:
image

The only thing that I could think of is of an update in the browser, but then I tried a different browser and arrows still showed the same behaviour (not indicating the flux direction). Any ideas of why this might not be working anymore?

Thanks!
Pablo

save svg

What is the best way to save a map produced with escher & cobrapy as svg?

When I use escher.Builder(map_name=map).display_in_browser() to get the builder with the map, I can save it as svg but there are guides in it (circles which are used in the builder to move the reaction) and even the arrow indicating the direction of a further reaction.
How can I avoid them?

Bidirectional arrows with flux map

The map makes it difficult to tell which direction flux is flowing for reversible reactions.

I'm not sure if this is implemented and not working, or if this is a feature request.

arrows

pushing b

typing b when selecting a reaction name activates "show control points (b)" instead of just allowing user to type b as in "FBP"

feature suggestion

would be great if you could use the map builder w/o having to specify a simpheny map to start with. maybe just a cobrapy structure if all that is needed?

merged metabolites lose track of their connected segments

From an email:

I ran into something strange that didn't happen before:

  • Fusing the same metabolite isn't working right.
  • One of the 'fused' metabolites can be movable around the map and have no effect on the connecting lines
  • Deleting this floating metabolite, however, results in the disappearance of the connector lines
  • The remaining metabolite that used to be connected by the lines can no longer be deleted. Undoing is also impossible.

Rotate then undo is broken

Error:

Uncaught TypeError: undefined is not a function escher.1.0.dev.js:2794

Seen after selecting a large section of the map (Ubiquinone reduction/oxidation) and rotating, and trying to undo.

CSS loads slowly

This effect all plots that load css then update svg without waiting for the css to be ready, including bar.js, histogram.js, box-and-whiskers.js.

SVG export causes issues with Illustrator

The exported SVG from the builder displays incorrectly in Illustrator CS6, but works fine in Chrome.

Paths with markers only display the markers, and the paths are not created on import. Adding a duplicate path with no marker solves the problem, but it's not an ideal solution.

Minified file loads too slowly.

Is it loading asynchronously?

I need to take jquery out of the minified file anyway. And that will probably speed it up. If it is asynchronous, I should supply a callback to the global scope. For example:

window.visbio_loaded(function(visbio) {

});

Map id's use _ instead of -

Just a suggestion...

Using _ instead of - in id's will make future tab-completion in languages like python easier if that ever were to happen in the future, and these id's will likely be easier to change sooner instead of later.

usage cases to support

Installation:

  1. pip install escher
  2. python setup.py install
  3. escher.pth file in site packages, or add to PYTHONPATH

Running:

  1. Install with any method
  2. Run server with python -m escher.server
  • If installed with method 3, you will see development options
    1. Run in Python/IPython terminal
    2. Run in IPython notebook
  • Run quick server from the notebook
    1. View and edit maps at http://zakandrewking.github.io/escher
  • Same interface as the local server (not the development version)

Development:

  1. Install with escher.pth file, or add to PYTHONPATH
  2. Serve with python -m escher.server or python server.py
  • Escher DOES need to be installed for the server to run.

Testing:

  • Testing out-of-box with py.test and jasmine-py

Windows installation errors

The following two errors are seen with a Windows installation of Escher:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\***\Documents\GitHub\escher>C:\Python27\python setup.py ins
tall
Traceback (most recent call last):
 File "setup.py", line 13, in <module>
   version = __import__('escher').__version__
 File "C:\Users\***\Documents\GitHub\escher\escher\__init__.py", li
ne 3, in <module>
   from plots import (Builder, get_cache_dir, clear_cache, list_cached_maps,
 File "C:\Users\***\Documents\GitHub\escher\escher\plots.py", line
14, in <module>
   from jinja2 import Environment, PackageLoader, Template
 File "C:\Python27\lib\site-packages\jinja2\__init__.py", line 33, in <module>
   from jinja2.environment import Environment, Template
 File "C:\Python27\lib\site-packages\jinja2\environment.py", line 13, in <modul
e>
   from jinja2 import nodes
 File "C:\Python27\lib\site-packages\jinja2\nodes.py", line 18, in <module>
   from jinja2.utils import Markup
 File "C:\Python27\lib\site-packages\jinja2\utils.py", line 520, in <module>
   from markupsafe import Markup, escape, soft_unicode
ImportError: No module named markupsafe

C:\Users\***\Documents\GitHub\escher>C:\Python27\python setup.py tes
t
Traceback (most recent call last):
 File "setup.py", line 27, in <module>
   'out=escher/lib/%s'%escher, 'optimize=none'])
 File "C:\Python27\lib\subprocess.py", line 522, in call
   return Popen(*popenargs, **kwargs).wait()
 File "C:\Python27\lib\subprocess.py", line 709, in __init__
   errread, errwrite)
 File "C:\Python27\lib\subprocess.py", line 957, in _execute_child
   startupinfo)
WindowsError: [Error 193] %1 is not a valid Win32 application

C:\Users\***\Documents\GitHub\escher>

Features for a functional builder

Goal: Build the E. coli core metabolic map in < 10 minutes.

  • Change the direction of a new reaction before adding it. (Arrow next to metabolite can be dragged to determine direction)
  • Undo with Ctrl-Z
  • Combine metabolites from different reactions
  • Export as SVG
  • Drag bezier points
  • Add new control points
  • Change the size of the map border
  • Add membranes
  • Show main products of a reaction (as a hint) in reaction input menu
  • Smart bezier displacement when a node gets dragged
  • Show flux on builder reactions
  • Snap to grid
  • Directional arrows to show (a) reversibility and (b) flux direction
  • Drag metabolite and reaction labels
  • Add new text labels

Anything else? @jlerman44?

how to create own map

i'm using visbio to visualize cobrapy results from the e. coli model what works fine thanks!
i'm wondering and i'm just a little confused how to bring it to work with other organisms?
i have created a model and have a sbml file. when running cobrapy & visbio only very few reactions were highlighted due to the fact that pathways and reaction names differ.
what is the easiest way to create my own map?
i have no simpheny. can i load sbml data into the builder?
thanks for helping

General maps

As I am working with a wide range of bacterial organisms (and not ecoli) I was wondering how to couple known informations such as enzymatic commission numbers to a visualisation perspective? Also I looked for simpheny maps but it seems a closed source private company?

reaction colors

How can I influence the colours shown in a map for active fluxes?

Currently when I open a map with flux data:

escher.Builder(map_name=map, reaction_data=flux)

all reactions are coloured even non existing or ones with zero fluxes.

Cannot load the same file multiple times in load_files

In this function, in js/vis/scaffold.js, trying to load the same file for multiple callbacks results in values of the callbacks object being overwritten.

    function load_files(files_to_load, final_callback) {
        // load multiple files asynchronously
        // Takes a list of objects: { file: a_filename.json, callback: a_callback_fn }
        var i = -1, remaining = files_to_load.length, callbacks = {};
        while (++i < files_to_load.length) {
            var this_file = files_to_load[i].file;
            callbacks[this_file] = files_to_load[i].callback;
            load_the_file(this_file,
                          function(e, d, file) {
                              callbacks[file](e, d);
                              if (!--remaining) final_callback();
                          },
                          files_to_load[i].value);
        }
    };

error building javascript

➜  escher git:(master) ✗ python setup.py build         

Tracing dependencies for: ../build/almond
Error: ENOENT, no such file or directory '/home/aebrahim/escher/escher/js/src/Input.js'
In module tree:
    main
      Builder

Error: Error: ENOENT, no such file or directory '/home/aebrahim/escher/escher/js/src/Input.js'
In module tree:
    main
      Builder

    at Object.fs.openSync (fs.js:427:18)


Tracing dependencies for: ../build/almond
Error: ENOENT, no such file or directory '/home/aebrahim/escher/escher/js/src/Input.js'
In module tree:
    main
      Builder

Error: Error: ENOENT, no such file or directory '/home/aebrahim/escher/escher/js/src/Input.js'
In module tree:
    main
      Builder

    at Object.fs.openSync (fs.js:427:18)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.