forked from yochannah/mi-sbgn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.html
51 lines (51 loc) · 3.68 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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>