Sequence-viewer-typescript NPM

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).

comment: <> (demo image) comment: <> ( Sequence Viewer (https://github.com/mb925/sequence-viewer-typescript/blob/master/src/assets/sqvDemo.png))

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

Typescript

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.

@infinitebrahmanuniverse/nolb-seq @everything-registry/sub-chunk-2734

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago