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:

let targetDiv = document.getElementById('myDiv');
let myComplexViewer = new complexviewer.App(targetDiv, {maxCountInitiallyExpanded: 4, initialAnnotations: ["MI Features"]});

Additional options can be provided

• maxCountInitiallyExpanded: The number of participants until which all participants are expanded by default. If above that limit, all participants are collapsed.
• initialAnnotations: Which annotations will be displayed by default, is a list containing any of the following values:
  • "Interactor"
  • "MI Features"
  • "UniprotKB"
  • "DisProt"
  • "AlphaFold"
  • "ELM"
  • "InterPro"

2. Pass this the MI-JSON object:

myComplexViewer.readMijson(data);

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

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

4. Choose how to annotate proteins (this will prob, because of #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);