Contents

Using Biographer

Creating SBGN visualisations

Manually

To create a SBGN visualization from scratch first select the SBGN language you want to use in the menu on the left. The options are
  • PD
    - Process Description
  • ER
    - Entity Relation
  • AF
    - Activity Flow
If you are on a touch device click on the language to change it.

Creating Nodes

Click on one of the different node types in the left menu and click onto the canvas to create the node at that position. A window will appear where you can enter the node label and change other node properties.

Creating Edges

You can draw Edges by using the edge tool
. Click on the tool and then click on two nodes you want to connect with an edge. Once two nodes are clicked you can choose the edge type in the right menu.
To add point on the edge use
ctrl + click
on a unselected edge. You can move to points on an edge to change the path of the edge.
Removing points on an edge is currently not possible. We plan to implemented it with
ctrl + click
on the node that should be removed
To make edges curved select an edge and click the option "is spline". Now you will see edge handles that you can drag around.

Importing

Biographer can import SBGN graphs (with and without layout) from different sources. Use the import icon
or
ctrl + i
or
ctrl + o
to open up the import modal popup. There you can either upload your personal docuemtns in one of the following formats:
  • jSBGN
    Is Biographers native JSON based format (described here). It can contain only topological information or may also include proper layout information for all glyps in the graph.
  • SBGN-ML
    Is an XML based format. Always contains layout information, though they may be set to arbitrary values that do not reflect a proper layout.
  • SBML
    Only contains topological information, therefore you are required to layout the graph after importing it. The more MIRIAM annotations the document contains (especially: chEBI, PubChem, Uniprot) the better the import will work, since glyph types (nodes) can then be detected.

Layout

Selecting Nodes

You can select single nodes by
click
ing on them. To select multiple nodes use
shift + click
or choose the
tool and
click + drag
a selection rectangle around several nodes.
To select all nodes use the select all tool
or
doubleclick
on a empty space on the canvas. To deselect all nodes you can use the
tool or draw and empty selection rectagle.
If you are in a compartment trying to draw a selection rectangle be carefult that you do not move the compartment while drawing the selection rectangle. You can prevent this by deselecting all nodes and then drawing a selection rectangle with
shift + drag
.
Selected nodes have blue dashed borders.

Deleting Nodes

To delete nodes, select them and press
Del
on your keyboard
or use the delete tool
in the right menu.

Moving Nodes

To move a single node use
click + drag
. To move several nodes at once fist select the nodes and then move them clicking on one of them.

Automatic Layout

To help you laying out your SBGN graphs, biographer currtenly provides three automatic layout algorithms.
  • biographer.flow
    Respects compartments
  • biographer.grid
    Respects compartments (but the compartments have to be layed out manually)
    If you click once only one iteration of optimization for each node is executed. For better results apply this layout multiple times. Once the layout is stuck in a local minmum you can manually move some nodes and apply the layout again. You will see that this greatly improves the layout.
    Holding down the
    ctrl
    key while clicking the grid layout button will only place each node on the cosest empty grid space. This can be used to quickly create great looking layouts manually.
  • D3 force directed layout
    Compartments are not supported
    Uses the fantastic D3 library for a force based layout

Align and Distribute

The Align functions always align to the first selected node.

Navigation

Zooming

Since ctrl + scroll is already taken by the default zoom function in many browsers (like FireFox and Opera) biographer uses
alt + scroll
for zooming.
If you are using a touch enabled device you can use the
pinch gesture
(move two fingers towards each other or away from each other) to zoom.
You can also zoom by using the zoom buttons.
to zoom in
to zoom out
to get the original size

Panning

this tool can be used to pan the canvas using
click + drag
. Additionally you can pan the canvas with your mouse
scroll
vertically and hoizontally with
shift + scroll
.

Exporting

 Clicking on
or pressing
ctrl + e
opens the export dialog. Exporting images is supported for several document formats:
  • jSBGN
    Biographer's native exchange format is jSBGN (described here). This format ideal for transmission in the web and does only require topological information.
  • SVG
    Biographer natively renders the images in your browser in the SVG format. To export the SVG image click on "export current graph as SVG"
  • other formats
    With the help of an external Java based library biographer is also able to export to
    • png
    • pdf
    • tiff

Converting Document Formats

Try using our converter to convert between jSBGN, SBGN-ML and SBML using the libSBGN.js library. This is still under development and might not return what you expect.

Keyboard Shortcuts

 To see the keyboard shortcuts in the editor hold down
ctrl
for a bit longer.
ctrl + z
 undo last action
ctrl + y
 redo last undone action
ctrl + a
 select all
ctrl + i
ctrl + o
 open file / import
ctrl + e
 export current graph
ctrl + [1-3]
 activate a tool
del
 remove selected nodes
alt + scroll
 zoom in and out
ctrl + a
 select all
f4
 toggle site menu, opera:
ctrl + m
click
drag
mode: select a node
shift + click
shift + drag
mode: select multiple nodes

SBGN Support

Biographer is missing some details of the SBGN specification. Missing are:
PD
  • Text on clone marker
  • Cardinality flags on edges
ER
  • 3 way interaction circle
AF
  • Submap (use Enity and Tags)
  • Auxiliary Units
Node ports (the little ends on e.g. process nodes) have to be created manually unless you use the biographer.flow layout.

System Requirements

 Biographer currently works best with Chromium (Chrome) and Opera. While FireFox also works it is slower than the browsers mentioned before. Safari should also work. Internet Explorer and other browsers are not actively tested (Please do not use these browsers with biographer).

Problems and Support

 If you want to talk to us please contact us on our google group #biographer.
For technical issues and discurssion you can follow our development group #biographer-dev.
To directly request features or report bugs please use our issue tracker at google code.

Installation From Source

 Assuming you are using Linux or Mac OS, do the following:
  1. Create a local copy of the Biographer mercurial repository (http://code.google.com/p/biographer/source/checkout).
    The shell command should be something like: 
    $ hg clone https://code.google.com/p/biographer/
    or 
    $ hg clone https://my.googlename@code.google.com/p/biographer/
  2. The editor uses the web2py framework (which includes a http server). Download the latest stable web2py source release from:
    http://web2py.com/examples/default/download
    Extract the archive anywhere you want to.
    To start web2py comfortably create an alias in your .bashrc (or other rc file if you are using a different shell)
    alias web2py='python /path/to/web2py/web2py/web2py.py -p 8000 -a shortpassword'
  3. Now you can start web2py in the shell with:
    $ web2py
    Start it and check if you see the welcome page in you browser at:
    http://127.0.0.1:8000
  4. To make biographer work you need to create a softlink to the editor in the biographer applications directory. 
    $ ln -s /path/to/biographer/editor /path/to/web2py/applications/biographer
  5. Biographer needs some additional files that we need to prepare. Go to you local copy of the Biographer mercurial repository and call make 
    $ cd /path/to/biographer/
    $ make
    This will take a long time since it will compile the biographer flow layout and pull the latest biomodels release and reactome information. But don't worry it will only take long in the first run.
    ! If "make" returns error messages, most of these are related to the flow layout and will not affect the rest of the software. Flow layout will not work if not compiled correctly. !
  6. After make is finished try to visit biographer. If you created the softlink as described above you should be able to call:
    http://127.0.0.1:8000/biographer
    You will be asked to create a user account, you can enter anything you want to as long as you dont want to run biographer in the www.
If you get an error ticket, probably "make" ran into problems or is not ready yet and some files are missing. You can safely create the missing files (you can see the full path if you click on the error ticket) as empty files using "touch": 
$ touch /path/to/web2py/applications/biographer/views/default/biomodels_info_list.html
Touch just creates an empty file.
Now you should be ready.
If you change the bui code (bui/ folder in your local hg repository) all you need to do, to try out the changes, is to call make
$ make