This is a code repository for the BioComputingUP Feature Viewer project. Full documentation at: http://protein.bio.unipd.it/feature-viewer.
This project is based on the Javascript version calipho-sib/feature-viewer, Copyright (c) 2015, SIB Swiss Institute of Bioinformatics. This version is based on Typescript and compatible with Angular 2+ framework.
Represent biological data with the feature viewer library! Used in MobiDB, DisProt, RepeatsDB and PhytotypeDB.
1 Install the library using npm
npm install feature-viewer-typescript
2 Import the feature viewer in javascript or your angular component
import {FeatureViewer} from 'feature-viewer-typescript/lib';3 Optional: if you are installing the feature viewer in an Angular 2+ based App, you may need to load the feature viewer stylesheet in your angular.json "styles" to ensure the correct pioritization of stylesheets.
styles: [
"./node_modules/feature-viewer-typescript/assets/fv.scss"
]4 Place the feature viewer in your html
<div id="myfv"></div>5 Create an instance of the feature viewer in javascript and style it
const proteinsequence = 'MTKFTILLISLLFCIAHTCSASKWQHQQDSCRKQLQGVNLTPCEKHIMEKIQGRGDDDDDDDDDNHILRTMRGRINYIRRNEGKDEDEE'
const fv = new FeatureViewer(proteinsequence, '#myfv', {
showAxis: true,
showSequence: true,
toolbar: true,
toolbarPosition: 'left',
zoomMax: 10,
flagColor: '#DFD5F5'
});6 Add features and subfeatures
fv.addFeatures(
[
{ // simple rect
type: 'rect',
id: 'useUniqueId',
data: [ {
x: 50, y: 78,
tooltip: '<button class="myButton">Button</button>'} ],
},
{ // circles
type: 'circle',
id: 'mycircle',
label: 'Circle feature',
data: [{x: 10 , y: 100}, {x: 50, y: 70}, {x: 40, y: 60, color: '#00ac8f', tooltip: 'I have different color'}],
color: '#61795e'
},
{ // curve (height and yLim) with tooltip and subfeatures
type: 'curve',
id: 'mycurve',
label: 'Curve label',
data: [{x: 1, y: 0}, {x: 40, y: 102}, {x: 80, y: 5}, {x: 50, y: 184}, {x: 75, y: 4}],
height: 1,
yLim: 200,
color: '#00babd',
tooltip: '<b>Very</b> <span style="color: #C21F39">Stylable</span> <b><i><span style="color: #ffc520">Tooltip </span></i></b>',
subfeatures: [
{
type: 'rect',
data: [
{x: 20, y: 30},
{x: 15, y: 45},
{x: 70, y: 76, label: 'myRect', tooltip: 'myTooltip'}
],
id: 'aDifferentId',
label: 'I am a subfeature!'
}
]
}
]
)7 Output
If you have any problem or suggestion please open an issue.
To build: npm install && tsc.
To test locally: follow the "Getting started" section, but instead of installing the package through npm, download the feature-viewer-typescript-mobidb project from github. Create an angular project and in node modules add a symlink to the feature-viewer-typescript-mobidb folder (ln -s ../../local-folder feature-viewer-typescript). Keep following the instruction from point 2 "Import the feature viewer".
This repo is based on calipho-sib/feature-viewer, Copyright (c) 2015, SIB Swiss Institute of Bioinformatics.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.