https://github.com/biocomputingup/feature-viewer-typescript-mobidb
https://github.com/biocomputingup/feature-viewer-typescript-mobidb
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/biocomputingup/feature-viewer-typescript-mobidb
- Owner: BioComputingUP
- License: other
- Created: 2021-09-21T13:37:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-02T11:10:28.000Z (over 4 years ago)
- Last Synced: 2025-04-02T03:35:03.354Z (about 1 year ago)
- Language: TypeScript
- Size: 198 KB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TypeScript Feature Viewer
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](https://github.com/calipho-sib/feature-viewer),
Copyright (c) 2015, SIB Swiss Institute of Bioinformatics. This version is based on [Typescript](https://www.typescriptlang.org/)
and compatible with [Angular 2+](https://angular.io/) framework.
Represent biological data with the feature viewer library! Used in [MobiDB](http://mobidb.bio.unipd.it/),
[DisProt](http://www.disprot.org/), [RepeatsDB](http://repeatsdb.bio.unipd.it/) and
[PhytotypeDB](http://phytotypedb.bio.unipd.it/).
## Dependencies
* [Typescript](https://www.typescriptlang.org/)
* [D3](https://d3js.org/)
* [html-to-image](https://www.npmjs.com/package/html-to-image)
## Getting started
1 Install the library using npm
```
npm install feature-viewer-typescript
```
2 Import the feature viewer in javascript or your angular component
```typescript
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.
```json
styles: [
"./node_modules/feature-viewer-typescript/assets/fv.scss"
]
```
4 Place the feature viewer in your html
```html
```
5 Create an instance of the feature viewer in javascript and style it
```typescript
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
```typescript
fv.addFeatures(
[
{ // simple rect
type: 'rect',
id: 'useUniqueId',
data: [ {
x: 50, y: 78,
tooltip: '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: 'Very Stylable Tooltip ',
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
## Support
If you have any problem or suggestion please open an issue.
## Developers
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".
## License
This repo is based on [calipho-sib/feature-viewer](https://github.com/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.