forked from yochannah/mi-sbgn
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
86 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <h1 id="mi-sbgn">mi-sbgn</h1> | ||
| <p>SBGN viewer for PSI-MI protein complexes from <a href="http://www.ebi.ac.uk/complexportal/home">http://www.ebi.ac.uk/complexportal/home</a></p> | ||
| <p><a href="https://yochannah.github.io/mi-sbgn/">Demo</a></p> | ||
| <h2 id="initialising-the-mi-sbgn-viewer-on-an-html-page">Initialising the mi-sbgn viewer on an html page</h2> | ||
| <p>This repository requires <a href="https://docs.npmjs.com/getting-started/installing-node">npm</a> to manage dependencies. Once npm is installed, to install mi-sbgn, run:</p> | ||
| <pre><code class="lang-bash">npm install --save mi-sbgn | ||
| </code></pre> | ||
| <p>Assuming you now have a folder in your project root called <code>mi-sbgn</code>, add the bundles and css to your page:</p> | ||
| <pre><code class="lang-html"> <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> | ||
| </code></pre> | ||
| <p>Somewhere in the body of your HTML, add tags that look like this:</p> | ||
| <pre><code class="lang-html"> <div class="svgcontainer"> | ||
| <svg id="mi-sbgn" xmlns="http://www.w3.org/2000/svg" height="100" width="100"> | ||
| </svg> | ||
| </div> | ||
| </code></pre> | ||
| <p>The main.bundle.js file will initialise the component with id <code>mi-sbgn</code> automatically</p> | ||
| <p>Optionally, add an xml export download button:</p> | ||
| <pre><code class="lang-html"> <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> | ||
| </code></pre> | ||
| <p>To initialise a specific protein complex, run <code>initViewer("EBI-SOMECOMPLEXHERE")</code>, e.g.</p> | ||
| <pre><code class="lang-html"> <script> | ||
| initViewer("EBI-10828997"); | ||
| </script> | ||
| </code></pre> | ||
| <h2 id="building-from-source">building from source</h2> | ||
| <h3 id="prereqs">prereqs</h3> | ||
| <p>This repository requires <a href="https://docs.npmjs.com/getting-started/installing-node">npm</a> to manage dependencies. Once npm is installed:</p> | ||
| <h3 id="set-up-dependencies">set up dependencies</h3> | ||
| <ol> | ||
| <li>Clone this repo</li> | ||
| <li><code>cd mi-sbgn</code></li> | ||
| <li><code>npm install</code></li> | ||
| <li><code>cd node_modules/webcola & npm install - g grunt - cli & npm install & grunt</code></li> | ||
| </ol> | ||
| <p>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.</p> | ||
| <p>Step 4 is required because the npm module from webcola doesn't include a built js version of the script.</p> | ||
| <h3 id="build-the-scripts">build the scripts</h3> | ||
| <p>We use webpack to build the js into two bundles</p> | ||
| <p>To automatically build files while editing them, run this from the mi-sbgn directory root:</p> | ||
| <pre><code class="lang-bash">./node_modules/.bin/webpack --config webpack.config.js --watch | ||
| </code></pre> | ||
| <h3 id="other-notes">Other notes</h3> | ||
| <p>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.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <h1 id="architecture-notes-">Architecture notes:</h1> | ||
| <p>Dependencies: This repo uses </p> | ||
| <ul> | ||
| <li>d3 to create visual components, </li> | ||
| <li>webcola to lay them out, </li> | ||
| <li>MI-Model to create a common data model for any other potential views of the same protein complex on the same page.</li> | ||
| <li>jstoxml to convert the js layout into an SBGN-ML file.</li> | ||
| </ul> | ||
| <h2 id="design">Design</h2> | ||
| <p>This repo has been designed to enable semi-automated layouts of protein complexes in SBGN-ML. </p> | ||
| <p>SBGN-ML is the XML representation of Systems Biology Graphical Notation (SBGN), a visual language to represent biochemical interactions.</p> | ||
| <p>Original paper describing SBGN: <a href="http://www.nature.com/nbt/journal/v27/n8/full/nbt.1558.html">http://www.nature.com/nbt/journal/v27/n8/full/nbt.1558.html</a> Original paper describing SBGN-ML: <a href="https://academic.oup.com/bioinformatics/article/28/15/2016/236089/Software-support-for-SBGN-maps-SBGN-ML-and-LibSBGN">https://academic.oup.com/bioinformatics/article/28/15/2016/236089/Software-support-for-SBGN-maps-SBGN-ML-and-LibSBGN</a> - It says laying out SBGN is a 'hard problem'.</p> | ||
| <p>SBGN has three sub-languages:</p> | ||
| <ul> | ||
| <li>Process Diagram, depicting entities over time</li> | ||
| <li>Entity Relationship</li> | ||
| <li>Activity Flow, used for scenarios in which broad details are conveyed without necessarily depicting specific entities.</li> | ||
| </ul> | ||
| <p>Entity Relationship seems to be most pertinent to depicting the protein complexes shown in the complex viewer.</p> | ||
| <p>Specification for SBGN Entity Relationship (ER) Version 2 (August 2015): <a href="http://journal.imbio.de/article.php?aid=264">http://journal.imbio.de/article.php?aid=264</a> pages 16, 17 have info about interactions.</p> | ||
| <h3 id="notes-about-the-layout">Notes about the layout</h3> | ||
| <p>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. </p> | ||
| <h2 id="installation">installation</h2> | ||
| <p>Please see <a href="../README.md">the main README</a> for installation info.</p> |