{"_id":"@burkov/feature-viewer","_rev":"1-40c62072062cb1ac990fd12b80834d48","name":"@burkov/feature-viewer","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.1":{"name":"@burkov/feature-viewer","description":"A lightweight, generic and easy-to-use feature-viewer written in javascript with D3","version":"1.1.1","homepage":"https://github.com/calipho-sib/feature-viewer","authors":["Mathieu Schaeffer <mat.schaeff@gmail.com>","Calipho Team <ndu@isb-sib.ch>"],"repository":{"type":"git","url":"git+https://github.com/calipho-sib/feature-viewer.git"},"licenses":[{"type":"GNU GPL v2"}],"main":"lib/index.js","scripts":{"build":"mkdir -p build && browserify -r ./:feature-viewer -o build/viewer.js","build-browser":"npm run build","build-all":"npm run build","watch":"watchify -r ./:feature-viewer -v -o build/viewer.js","w":"prunner \"npm run sniper\" \"npm run watch\"","sniper":"sniper .","dist":"grunt && grunt concating && grunt serve"},"dependencies":{"biojs-events":"x.x.x","bootstrap":"x.x.x","bower":"x.x.x","d3":"3.5.6","grunt-cli":"x.x.x","jquery":"x.x.x","nextprot":"x.x.x"},"devDependencies":{"mkdirp":"^0.5.0","browserify":"6.x","sniper":"0.x","watchify":"^1.0.6","prunner":"1.x","grunt":"x.x.x","grunt-bump":"^0.3.0","grunt-connect":"^0.2.0","grunt-contrib-concat":"~0.3.0","grunt-contrib-connect":"~0.5.0","grunt-contrib-jshint":"~0.10.0","grunt-contrib-uglify":"~0.5.0","grunt-contrib-watch":"~0.5.3","grunt-serve":"^0.1.6","load-grunt-tasks":"^0.6.0"},"sniper":{"js":["/build/viewer.js"],"css":["/css/bootstrap.css","/css/style.css"],"snippets":["snippets"],"first":"example_1"},"keywords":["sib","isb","calipho","feature","protein","nextprot","uniprot","viewer","biojs"],"gitHead":"e485017ce546f3ac7e8e45c0a69f04aa0d70adb7","bugs":{"url":"https://github.com/calipho-sib/feature-viewer/issues"},"_id":"@burkov/feature-viewer@1.1.1","_npmVersion":"5.5.1","_nodeVersion":"9.1.0","_npmUser":{"name":"burkov","email":"vasjaforutube@gmail.com"},"dist":{"integrity":"sha512-O8DyCXmN1CQ+AIcnNEsBo9hTth6ECIYriP/jDZ4+YUYKlqaVtdmMZJ22DfuYSUUvmjnOBcvdAAjvJLpB0G8Akw==","shasum":"dbec55ed5c6451f0a983f67f21b7f90b277d6768","tarball":"https://registry.npmjs.org/@burkov/feature-viewer/-/feature-viewer-1.1.1.tgz","fileCount":45,"unpackedSize":3191116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6HKCCRA9TVsSAnZWagAAnrwQAIxgsXBe30QcRvWDuvVZ\n12QdygxEAVLfgXzNQGxDZWYrguEnglhkpYho2hzAuh8qHBVXAAJbXUTmMWkS\nujaEwBqAYKmWVfSGmGSJquhFkpKhq1yn4ivj3DkL8Lv4ljrYlhDi+s+ebsk9\nAtg0+SMRBtOGljYlsXVcDrm4orCnZ9PjPjqzryhbMCbEtGTfqDHznb7EVVHE\nequGK4R6ml+bd6UZCvY9KSBVwITzS+8KUIWEQjWIgD/M16Sq7lW4V17LCIaB\nf43RnuS9fUrGr9pflZkYnhIZBbN4Rngd4SrwyElbeeO2WQYgRkcOOdrI2ctD\npnHmoMxTePiKl+g7UAZ9VUr43nOFvyAQjWawv7hQSynf+vTLyLI4yx26itSc\nXDiU/l16fHKBkmgGDqoOe6KBIbKoLTHXd5fqL0LM3g34ToRtc8IepobhI/rK\nj6ENbDKtVATkGMtrKVJV1rQIFTo9Kt8bgdt8nfpV6X/MsiP+Ecfhz6LTbCrX\ntzOrAb7k02ILbziyZLMw4ZFNLuVZlXLfd5sj89liPJ2y5kWnUybxPyfmfl/l\nPYHAVBLntdst8wDFlmC4TSoT8s3s603Uxq8JubQOODZNxleH1xO8AkogJpsk\nDJCnHdNnWrHiI9qorD7NIHpsIsa1lej07f6YxMCcrzw4bCJgLT918msGD53A\nVKDT\r\n=qZui\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD5ZOKo5ZynebP8cMAj8FNAjlSvy9wZfRT12QquukUVwIgY/KfpG082qQHL58goiQuVDM4hJCX8bZplfxqdZCFSYI="}]},"maintainers":[{"name":"burkov","email":"vasjaforutube@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/feature-viewer_1.1.1_1525183105257_0.4320654347851476"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-01T13:58:25.204Z","1.1.1":"2018-05-01T13:58:25.454Z","modified":"2022-04-04T21:07:31.796Z"},"maintainers":[{"name":"burkov","email":"vasjaforutube@gmail.com"}],"description":"A lightweight, generic and easy-to-use feature-viewer written in javascript with D3","homepage":"https://github.com/calipho-sib/feature-viewer","keywords":["sib","isb","calipho","feature","protein","nextprot","uniprot","viewer","biojs"],"repository":{"type":"git","url":"git+https://github.com/calipho-sib/feature-viewer.git"},"bugs":{"url":"https://github.com/calipho-sib/feature-viewer/issues"},"readme":"# neXtProt - The knowledge resource on human proteins\n\nThis is a code repository for the SIB - Swiss Institute of Bioinformatics CALIPHO group neXtProt project\n\nSee: http://www.nextprot.org/\n\n# neXtProt feature viewer\n\n[![DOI](https://zenodo.org/badge/36719341.svg)](https://zenodo.org/badge/latestdoi/36719341)\n\n> The feature viewer is a super easy javascript library to use in order to draw the different features covering a sequence for a better visualization.\n\n![Feature viewer](/assets/FV_SCSHT.png)\n\n**Live demo** : https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/examples/index.html\n\n## Getting Started\n\n**1.** You can get the library in your project using bower or npm\n```\n//BOWER//\nbower install feature-viewer\n\n//NODE//\nnpm install feature-viewer\n```\n\nOr Include the feature-viewer **JS** and **CSS** from rawgit CDN in the header of your html\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/dist/feature-viewer.min.css\">\n\n<script src=\"https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/dist/feature-viewer.bundle.js\"></script>\n```\n\n**NOTE** : If you already got the dependencies (D3, Bootstrap & Jquery) in your project, use the simple minified version instead of the bundle :\n```html\n<script src=\"https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/dist/feature-viewer.min.js\"></script>\n```\n\n**2.** Specify a div in your html\n```\n<div id=\"fv1\"></div>\n```\n\n**3.** Create an instance of FeatureViewer in javascript with the sequence (or a length), the div in which it will be display and the rendering options of your choice.\n```javascript\n//For Node add before : var FeatureViewer = require(\"feature-viewer\");\n\nvar ft = new FeatureViewer('MALWMRLLPLLALLALWGPGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLE',\n                           '#fv1',\n                            {\n                                showAxis: true,\n                                showSequence: true,\n                                brushActive: true, //zoom\n                                toolbar:true, //current zoom & mouse position\n                                bubbleHelp:true, \n                                zoomMax:50 //define the maximum range of the zoom\n                            });\n                            \n//Instead of a sequence, you can also initialize the feature viewer with a length (integer) :\nvar ft = new FeatureViewer(213,'#fv1');\n```\n\n**4.** Finally, add the features\n   ```javascript\nft.addFeature({\n       data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],\n       name: \"test feature 1\",\n       className: \"test1\", //can be used for styling\n       color: \"#0F8292\",\n       type: \"rect\" // ['rect', 'path', 'line']\n   });\n   ```\n   \n**5.** Et voila!\n\n![Feature viewer](/assets/feature-viewer.png)\n\n\n## Functionalities\n\n* Zoom into the Feature-viewer by selecting a part of the sequence with your mouse. Zoom out with a right-click.    \nYou can also zoom programmatically with the methods **```zoom(start,end)```** and **```resetZoom()```**\n\n\n* A tooltip appears when the mouse is over a feature, giving its exact positions, and optionally, a description.\n \n \n* beside the positions for each element, you can also give a description & an ID, allowing you to link click event on the feature to the rest of your project.\n\n## Options\n\n* Show axis\n* Show sequence\n* Brush active (zoom)\n* Toolbar (current zoom & position)\n* Bubble help \n* Zoom max\n* Features height\n* Offset\n\n## ClearInstance()\n\nYou may sometimes want to reload your feature-viewer with new parameters. To avoid memory leaks, the method **```clearInstance()```** will clear each element & listener for you before you delete the feature-viewer instance.\n\n\n## Documentation\n\nCheck out this page for a better understanding of how to use the feature viewer and its possibilities :\n* https://cdn.rawgit.com/calipho-sib/feature-viewer/v1.0.0/examples/index.html\n\n## Use it with NeXtProt API\n\n<img src=\"/assets/FVDemo.png\" width=\"100%\" />\n\nIt is possible to fill the feature viewer with protein features from [NeXtProt](https://search.nextprot.org/), the human protein database.   \n\n- First, find your protein of interest in NeXtProt and get the neXtProt accession (NX_...). (You can find your protein by entering an accession number of another database, like UniProt or Ensembl)   \n- Then, check the type of feature in the [NeXtProt API](https://api.nextprot.org/) that you would like to add to your viewer. For example, \"propeptide\" or \"mature-protein\".\n- Include the feature viewer bundle with nextprot to your html  : feature-viewer.nextprot.js\n- Finally, create your feature-viewer like this :\n\n```javascript\n//initalize nextprot Client\nvar applicationName = 'demo app'; //please provide a name for your application\nvar clientInfo='calipho group at sib'; //please provide some information about you\nvar nx = new Nextprot.Client(applicationName, clientInfo);\n        \n//var entry = \"NX_P01308\";\nvar isoform = \"NX_P01308-1\";\n\n// feature viewer options\nvar options = {showAxis: true, showSequence: true,\nbrushActive: true, toolbar:true,\nbubbleHelp: true, zoomMax:20 };\n\n// Create nextprot feature viewer\nnxFeatureViewer(nx, isoform, \"#div2\", options).then(function(ff){\n// Add first custom feature\nff.addFeature({\n    data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],\n    name: \"test feature 1\",\n    className: \"test1\",\n    color: \"#0F8292\",\n    type: \"rect\",\n    filter: \"type1\"\n});\n// Add second feature from nextprot\nvar styles = [\n    {name: \"Propeptide\",className: \"pro\",color: \"#B3B3B3\",type: \"rect\",filter:\"Processing\"}, \n    {name: \"Mature protein\",className: \"mat\",color: \"#B3B3C2\",type: \"rect\",filter:\"Processing\"}\n ]; \nff.addNxFeature([\"propeptide\",\"mature-protein\"], styles);\n\n```\n\n## Examples \n\nhttps://search.nextprot.org/entry/NX_P01308/view/proteomics\n\n## Support\n\nIf you have any problem or suggestion please open an issue [here](https://github.com/calipho-sib/feature-viewer/issues).\n\n## Development\n\n`git clone https://github.com/calipho-sib/feature-viewer.git` \n\n`npm install`  (will install the development dependencies)\n\n`bower install`  (will install the browser dependencies)\n\n...make your changes and modifications...\n\n`npm run dist` (will create the min & bundle versions in dist/)\n\n`npm run build` (will create the bundle js & css in build/ for node)\n\n`grunt bump` (will push and add a new release)\n\n`npm publish` (will publish in npm)\n\n\n\n## License \n\nCopyright (c) 2015, SIB Swiss Institute of Bioinformatics\n\nThis 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.\n","readmeFilename":"README.md"}