domain-gfx v0.2.0
Domain graphics library
in development
A live example is available to play with at https://proteinswebteam.github.io/domain-gfx/
Installation:
This library is available on npm, to install it run:
npm install --save domain-gfx
Otherwise, you can use it directly from the unpkg CDN at https://unpkg.com/domain-gfx
Usage:
Using ES modules, or a module bundler
recommended way
This library is available as a plain ES module, you can use it directly by importing it into your code like this:
import DomainGfx from 'domain-gfx';
legacy browsers support (including Internet Explorer)
To support IE, or other legacy browsers, you can use the legacy
bundle which
includes a set of needed polyfills. It has only been tested back to IE10, and it
will probably break on previous versions of IE.
Using a global
you can insert the script in your page, synchronously or not. It will add the
global DomainGfx
.
If you are loading it asynchronously, you can listen for the 'domainGfxReady'
event on the document
, containing the DomainGfx class. e.g.:
document.addEventListener('domainGfxReady', event => {
const DomainGfx = event.detail;
// Use the DomainGfx class...
// ...
});
From the dist
folder, use the domain_gfx.es5.js
file, for ES5 support, or
domain_gfx.es2015.js
, for ES2015 support.
API:
Syntax
new DomainGfx(userParameters);
Parameters
userParameters,
object
: contains information to render the graphicparent,
Element
: container element for the graphicdata, optional
object
: data describing the content of the graphicparams, optional
object
: extra parameters, modifying the rendering (not used at the moment) like the scale of the image, or default sizes
Return value
A new instance of DomainGfx
Properties
DomainGfx.prototype.data getter data(): returns the internal data stored in the instance
DomainGfx.prototype.data setter data(value): sanitize value, and sets the result as internal data and returns it
Methods
- DomainGfx.prototype.delete(): clean-up logic, removes event listeners and gets rid of pointers to DOM nodes to be able to GC them
Examples:
// DOM container
const parent = document.querySelector('.container');
// Domain graphics data object (see data syntax section)
const data = {
length: 100,// sequence of length 400
regions: [// array of sequence objects
{
text: 'domain name',
start: 2,
end: 40,
aliStart: 5,// >= start
aliEnd: 30,// <= end
display: true,
startStyle: 'jagged',
endStyle: 'curved',
color: 'blue'
metadata: {// information for tooltip
database: 'pfam',
description: 'text about the domain',
accession: 'PF00000',
identifier: 'domain X',
},
},
],
markups: [// array of markup objects
{
lineColour: '#0ff0f0',
colour: '#bb5b55',
display: true,
vAlign: 'top',
type: 'Pfam predicted active site',
start: 5,
headStyle: 'diamond',
metadata: {
database: 'pfam',
description: 'S Pfam predicted active site',
},
},
],
motifs: [// array of motif objects
{
colour: '#00a500',
metadata: true,
database: 'Phobius',
type: 'sig_p',
display: true,
end: 50,
start: 30
},
],
};
const dg = new DomainGfx({data, parent});
Gotchas and changes from earlier versions:
As compared to pre-existing older libraries such as PfamGraphics
new way to create a graphic
instead of passing as different parameters, first a node or a string to select a node, then an object with all the data, this now expects an object with a
parent
, and optionaldata
andparams
keys.instead of calling the render method afterwards on the DomainGfx object, the render is done automatically when instantiating the object, and also everytime different data is assigned to the object.
differences in the data object
Old data objects should still be able to be used, as this library still accounts for the old formats. If it is not able to use the data please upgrade the data object to a newer version.
Should be used:
- American spelling. e.g.
colour
->color
- Keys in camelCase. e.g.
v_align
->vAlign
- Correct type where need be. e.g.
start
: integer,display
: boolean
Todo:
- Add more documentation
- shape of
data
- details for developers
- shape of
- Add more unit tests
- Handle parameters (entity/text sizes, x/y scale, etc)