TypeScript Sequence Viewer
Represent biological data with the sequence viewer library! Used in MobiDB, DisProt and RepeatsDB.
This is a code repository for the BioComputingUP Sequence Viewer project. Full documentation is available at: sequence-viewer-typescript.
This version is based on Typescript and compatible with Angular 2+ framework. A Javascript version of the package is also available (see the documentation at sequence-viewer-typescript for more info).
Getting started
Javascript installation
-
Download the sequence viewer stylesheet You can find the sqv.css file in the src/assets folder on this Github repo.
-
Download the library code You can find the sqv-bundle.js file in the dist folder on this Github repo.
-
In your index.html:
<head>
<link rel="stylesheet" type="text/css" href="sqv.css">
</head>
<body>
<div id="sqv"></div>
<script src="sqv-bundle.js"></script>
<script>
const seqs = [
{sequence: 'MVLSPADKVGAH--RMFLSFPTTKTYF--LS', id: 1, label: 'sp|P69905|HBA_HUMAN'}
];
// Create an instance of the sequence viewer in javascript
const sequenceviewer = new SequenceViewer('sqv');
sequenceviewer.draw(sequence);
</script>
</body>Angular installation
1 Install the library using npm
npm install sequence-viewer-typescript
2 Import the sequence viewer in javascript or your angular component
import {SequenceViewer} from 'sequence-viewer-typescript/dist';3 Load the feature viewer stylesheet in your angular.json "styles".
styles: [
"./node_modules/sequence-viewer-typescript/dist/assets/sqv.css"
]4 Place the sequence viewer in your html
<div id="sqv"></div>5 Create an instance of the sequence viewer in your component, add inputs and execute
const seqs = [
{sequence: 'MVLSPADKTNVGAH--RMFLSFPTTKTYF--LSHGG', id: 1, label: 'sp|P69905|HBA_HUMAN'}
];
const sequenceviewer = new SequenceViewer('sqv');
sequenceviewer.draw(sequence);Compiler
This package ECMAScript target version is: es2015.
Dependencies
Development
git clone https://github.com/BioComputingUP/sequence-viewer-typescript.git
npm install (will install the development dependencies)
...make your changes and modifications...
npm run build (will create the bundle js files)
npm run postbuild (will move assets files in dist/)
npm run wp (will create the sqv-bundle.js file in dist/)
npm run post wp (will edit the bundle file to make it work)
This commands can be found in package.json
Support
If you have any problem or suggestion please open an issue.
License
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.