diff --git a/README.html b/README.html new file mode 100644 index 0000000..1e478bd --- /dev/null +++ b/README.html @@ -0,0 +1,51 @@ +

mi-sbgn

+

SBGN viewer for PSI-MI protein complexes from http://www.ebi.ac.uk/complexportal/home

+

Demo

+

Initialising the mi-sbgn viewer on an html page

+

This repository requires npm to manage dependencies. Once npm is installed, to install mi-sbgn, run:

+
npm install --save mi-sbgn
+
+

Assuming you now have a folder in your project root called mi-sbgn, add the bundles and css to your page:

+
    <link rel="stylesheet" href="node_modules/mi-sbgn/dist/styles.css" type="text/css">
+    <script src="node_modules/mi-sbgn/dist/mi-sbgn-dependencies.bundle.js"></script>
+    <script src="node_modules/mi_sbgn/dist/mi-sbgn-main.bundle.js"></script>
+
+

Somewhere in the body of your HTML, add tags that look like this:

+
        <div class="svgcontainer">
+            <svg id="mi-sbgn" xmlns="http://www.w3.org/2000/svg" height="100" width="100">
+            </svg>
+        </div>
+
+

The main.bundle.js file will initialise the component with id mi-sbgn automatically

+

Optionally, add an xml export download button:

+
            <button type="button" class="download-sbgn">
+                <svg id="icon-download" viewBox="0 0 32 32">
+                    <title>download</title>
+                    <path d="M23 14l-8 8-8-8h5v-12h6v12zM15 22h-15v8h30v-8h-15zM28 26h-4v-2h4v2z"></path>
+                </svg>
+                Export as SBGN-ML</button>
+
+

To initialise a specific protein complex, run initViewer("EBI-SOMECOMPLEXHERE"), e.g.

+
    <script>
+        initViewer("EBI-10828997");
+    </script>
+
+

building from source

+

prereqs

+

This repository requires npm to manage dependencies. Once npm is installed:

+

set up dependencies

+
    +
  1. Clone this repo
    2. +
  2. cd mi-sbgn
    3. +
  3. npm install
    4. +
  4. cd node_modules/webcola & npm install - g grunt - cli & npm install & grunt
    5. +
+

This should install all relevant dependencies, including the MI-model backbone-based application which helps us co-ordinate the protein complex data with other elements on the same page.

+

Step 4 is required because the npm module from webcola doesn't include a built js version of the script.

+

build the scripts

+

We use webpack to build the js into two bundles

+

To automatically build files while editing them, run this from the mi-sbgn directory root:

+
./node_modules/.bin/webpack --config webpack.config.js --watch
+
+

Other notes

+

The dependencies specified in js/denendencies.js are all availabloe on the window. If you already have a common dependency such as backbone or jquery on the window, you could remove the dependency from the bundle and re-bundle to save space by removing it from dependencies.js.

diff --git a/README.md b/README.md index b7a593b..5c47aad 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,32 @@ # mi-sbgn -SBGN viewer for PSI-MI protein complexes from http://www.ebi.ac.uk/complexportal/home +SBGN viewer for PSI-MI protein complexes from http://www.ebi.ac.uk/complexportal/home [Demo](https://yochannah.github.io/mi-sbgn/) ## Initialising the mi-sbgn viewer on an html page -Clone this repo. +This repository requires [npm](https://docs.npmjs.com/getting-started/installing-node) to manage dependencies. Once npm is installed, to install mi-sbgn, run: + +```bash +npm install --save mi-sbgn +``` Assuming you now have a folder in your project root called `mi-sbgn`, add the bundles and css to your page: ```html - - - + + + ``` -Somewhere in the body of your HTML, add tags that look like this: +Somewhere in the body of your HTML, add tags that look like this: ```html
-``` +``` The main.bundle.js file will initialise the component with id `mi-sbgn` automatically Optionally, add an xml export download button: diff --git a/docs/README.html b/docs/README.html new file mode 100644 index 0000000..0a55675 --- /dev/null +++ b/docs/README.html @@ -0,0 +1,24 @@ +

Architecture notes:

+

Dependencies: This repo uses

+ +

Design

+

This repo has been designed to enable semi-automated layouts of protein complexes in SBGN-ML.

+

SBGN-ML is the XML representation of Systems Biology Graphical Notation (SBGN), a visual language to represent biochemical interactions.

+

Original paper describing SBGN: http://www.nature.com/nbt/journal/v27/n8/full/nbt.1558.html Original paper describing SBGN-ML: https://academic.oup.com/bioinformatics/article/28/15/2016/236089/Software-support-for-SBGN-maps-SBGN-ML-and-LibSBGN - It says laying out SBGN is a 'hard problem'.

+

SBGN has three sub-languages:

+ +

Entity Relationship seems to be most pertinent to depicting the protein complexes shown in the complex viewer.

+

Specification for SBGN Entity Relationship (ER) Version 2 (August 2015): http://journal.imbio.de/article.php?aid=264 pages 16, 17 have info about interactions.

+

Notes about the layout

+

Given that the layout of SBGN in an automated fashion is considered a hard problem, this viewer allows users to drag and re-arrange automated views until they reach a more pleasing state visul state. Once this is reached they may then download the re-arranged view in a serialised SBGN-ML format, preserving their manual layouts. Skipping the preview/re-arrange step would likely result in messy graphs at this stage, without much more complex (and time-intensive) layout algorithms.

+

installation

+

Please see the main README for installation info.