complexviewer

A network visualisation that displays molecular interaction data, including detailed residue-level information such as binding sites. Used in EBI's Complex Portal and elsewhere.

Usage no npm install needed!

<script type="module">
  import complexviewer from 'https://cdn.skypack.dev/complexviewer';
</script>

README

ComplexViewer

Colin W Combe, Marine (Dumousseau) Sivade, Henning Hermjakob, Joshua Heimbach, Birgit H M Meldal, Gos Micklem, Sandra Orchard, Juri Rappsilber; ComplexViewer: visualization of curated macromolecular complexes, Bioinformatics, Volume 33, Issue 22, 15 November 2017, Pages 3673–3675, https://doi.org/10.1093/bioinformatics/btx497

Input data

The 'MI-JSON' data format consumed by the viewer is generated by the JAMI framework. https://github.com/MICommunity/psi-jami

JAMI is capable of converting between various MI data formats, it can convert the PSI-MI XML standard into the MI-JSON format.

Building on localhost

First install dependencies:

npm install

To create a production build:

npm run build-prod

To create a development build:

npm run build-dev

Usage

  1. Construct a new instance of the conplexviewer.App object, passing the target DIV as a parameter to the constructor:

            var targetDiv = document.getElementById('myDiv');
        var myComplexViewer = new complexviewer.App(targetDiv);

  2. Pass this the MI-JSON object:

            myComplexViewer.readMijson(data);

  3. Register a DIV to have a colour scheme key drawn into it

            var colorSchemeDiv = document.getElementById('myDiv');
        myComplexViewer.addColorSchemeKey(colorSchemeDiv);

  4. Choose how to annotate proteins (this will prob, because of https://github.com/MICommunity/ComplexViewer/issues/80):

            // todo doc - see index.html for example, old way of doing should still be working

  5. To change dataset without creating a new instance of the app, call the clear function, then call the readMijson() function with the new data:

            myComplexViewer.clear();
        myComplexViewer.readMijson(data2);