https://github.com/yochannah/mi-sbgn

SBGN viewer for PSI-MI protein complexes
https://github.com/yochannah/mi-sbgn

proteomics

Last synced: about 2 months ago
JSON representation

SBGN viewer for PSI-MI protein complexes

• Host: GitHub
• URL: https://github.com/yochannah/mi-sbgn
• Owner: yochannah
• License: mit
• Created: 2017-05-19T09:16:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-30T17:34:50.000Z (about 7 years ago)
• Last Synced: 2024-10-03T19:28:48.739Z (3 months ago)
• Topics: proteomics
• Language: JavaScript
• Homepage: https://yochannah.github.io/mi-sbgn/
• Size: 809 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.html
  • License: LICENSE

Awesome Lists containing this project

README

        
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



Clone this repo

cd mi-sbgn

npm install

cd node_modules/webcola & npm install - g grunt - cli & npm install & grunt



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.