# dlwr-feature-viewer-typescript > This is a code repository for the BioComputingUP Feature Viewer project. Full documentation at: https://biocomputingup.github.io/FeatureViewerTypeScript-documentation/. Latest version **2.3.17** (published 2022-11-02) · ISC license · 0 weekly downloads ## Install ```sh npm install dlwr-feature-viewer-typescript pnpm add dlwr-feature-viewer-typescript yarn add dlwr-feature-viewer-typescript bun add dlwr-feature-viewer-typescript ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.3.17 | | Published | 2022-11-02 | | First published | 2022-11-02 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 16 | | Unpacked size | 545.6 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Lisanna Paladin | | Maintainers | remimestdagh | ## Links - npm: https://www.npmjs.com/package/dlwr-feature-viewer-typescript - npm.io page: https://npm.io/package/dlwr-feature-viewer-typescript ## Dependencies (16) - [npx](https://npm.io/package/npx.md) ^10.2.2 - [sass](https://npm.io/package/sass.md) ^1.49.9 - [byots](https://npm.io/package/byots.md) 4.1.0-dev.20200804.14.47 - [d3-axis](https://npm.io/package/d3-axis.md) ^1.0.12 - [d3-brush](https://npm.io/package/d3-brush.md) ^1.0.6 - [d3-scale](https://npm.io/package/d3-scale.md) 2.2.2 - [d3-shape](https://npm.io/package/d3-shape.md) 1.3.5 - [@types/d3](https://npm.io/package/@types/d3.md) 5.7.2 - [css-to-ts](https://npm.io/package/css-to-ts.md) ^1.0.1 - [codemirror](https://npm.io/package/codemirror.md) 5.46.0 - [downloadjs](https://npm.io/package/downloadjs.md) ^1.4.7 - [underscore](https://npm.io/package/underscore.md) ^1.9.1 - [d3-selection](https://npm.io/package/d3-selection.md) 1.4.0 - [html-to-image](https://npm.io/package/html-to-image.md) ^0.1.1 - [@types/underscore](https://npm.io/package/@types/underscore.md) 1.8.16 - [typed-css-modules](https://npm.io/package/typed-css-modules.md) ^0.6.4 ## Recent versions - 2.3.17 (latest) — 2022-11-02 - 2.3.16 — 2022-11-02 - 2.3.15 — 2022-11-02 - 2.3.14 — 2022-11-02 ## README # TypeScript Feature Viewer This is a code repository for the BioComputingUP Feature Viewer project. Full documentation at: https://biocomputingup.github.io/FeatureViewerTypeScript-documentation/. The Feature-Viewer was published as: | [The Feature-Viewer: a visualization tool for positional annotations on a sequence](https://academic.oup.com/bioinformatics/article/36/10/3244/5716324) | | ------------- | | L. Paladin, M. Schaeffer *et al.*, Bioinformatics 2020 | 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: ''} ], }, { // 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 ![Feature Viewer](assets/fvDemo.png) ## Support If you have any problem or suggestion please open an issue. ## Developers Build with: npm run sass && webpack. To test: run test-index.html. ## 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. --- _Source: https://npm.io/package/dlwr-feature-viewer-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._