Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: calipho-sib/feature-viewer
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.1.36
Choose a base ref
...
head repository: calipho-sib/feature-viewer
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref

Commits on Apr 19, 2016

  1. Update README.md

    MatSchaeff committed Apr 19, 2016
    Copy the full SHA
    9f1d459 View commit details
  2. Update README.md

    MatSchaeff committed Apr 19, 2016
    Copy the full SHA
    48b5886 View commit details

Commits on May 18, 2016

  1. Added onZoom event

    fredludlow committed May 18, 2016
    Copy the full SHA
    246d40a View commit details
  2. Copy the full SHA
    1c2887d View commit details

Commits on May 19, 2016

  1. Merge pull request #5 from fredludlow/zoom-event

    Added onZoom event
    MatSchaeff committed May 19, 2016
    Copy the full SHA
    bcad198 View commit details

Commits on May 20, 2016

  1. Copy the full SHA
    563d9cf View commit details

Commits on May 23, 2016

  1. Merge pull request #6 from fredludlow/aa-code

    Add AA code to position text, e.g. 25Y
    MatSchaeff committed May 23, 2016
    Copy the full SHA
    fda2987 View commit details

Commits on May 24, 2016

  1. Copy the full SHA
    9bdb565 View commit details
  2. Release v0.1.37

    MatSchaeff committed May 24, 2016
    Copy the full SHA
    b05c277 View commit details
  3. add zoom event for biojs

    MatSchaeff committed May 24, 2016
    Copy the full SHA
    b85a7ac View commit details
  4. Release v0.1.38

    MatSchaeff committed May 24, 2016
    Copy the full SHA
    d032bcf View commit details

Commits on May 25, 2016

  1. Copy the full SHA
    bcdb6e9 View commit details
  2. Release v0.1.39

    MatSchaeff committed May 25, 2016
    Copy the full SHA
    b37a87b View commit details
  3. Copy the full SHA
    27e87c7 View commit details
  4. update build

    MatSchaeff committed May 25, 2016
    Copy the full SHA
    506dc6e View commit details
  5. Release v0.1.40

    MatSchaeff committed May 25, 2016
    Copy the full SHA
    a80516b View commit details
  6. Update README.md

    MatSchaeff committed May 25, 2016
    Copy the full SHA
    441d24e View commit details
  7. Update README.md

    MatSchaeff committed May 25, 2016
    Copy the full SHA
    813e662 View commit details

Commits on May 30, 2016

  1. Copy the full SHA
    978a0c5 View commit details
  2. Copy the full SHA
    66a314b View commit details
  3. update build

    MatSchaeff committed May 30, 2016
    Copy the full SHA
    3da4e36 View commit details
  4. Release v0.1.41

    MatSchaeff committed May 30, 2016
    Copy the full SHA
    4ceac14 View commit details

Commits on May 31, 2016

  1. Copy the full SHA
    8c0f158 View commit details
  2. update build

    MatSchaeff committed May 31, 2016
    Copy the full SHA
    2ec3bb4 View commit details
  3. Release v0.1.42

    MatSchaeff committed May 31, 2016
    Copy the full SHA
    113c12c View commit details

Commits on Jun 22, 2016

  1. Update README.md

    AmosBairoch authored Jun 22, 2016
    Copy the full SHA
    12611fc View commit details

Commits on Jun 24, 2016

  1. Update README.md

    ddtxra authored Jun 24, 2016
    Copy the full SHA
    9347e74 View commit details
  2. Update LICENSE

    ddtxra authored Jun 24, 2016
    Copy the full SHA
    a03a180 View commit details
  3. Update LICENSE

    ddtxra authored Jun 24, 2016
    Copy the full SHA
    ec25433 View commit details

Commits on Jun 27, 2016

  1. Copy the full SHA
    1fc3776 View commit details
  2. Release v0.1.43

    MatSchaeff committed Jun 27, 2016
    Copy the full SHA
    4612996 View commit details
  3. Update README.md

    MatSchaeff authored Jun 27, 2016
    Copy the full SHA
    9cd8c0d View commit details

Commits on Jul 6, 2016

  1. Copy the full SHA
    258946f View commit details
  2. Release v0.1.44

    MatSchaeff committed Jul 6, 2016
    Copy the full SHA
    f7f7b83 View commit details
  3. Update README.md

    MatSchaeff authored Jul 6, 2016
    Copy the full SHA
    3e815ee View commit details

Commits on Aug 17, 2016

  1. add config for sonar

    fnikitin committed Aug 17, 2016
    Copy the full SHA
    a106a30 View commit details

Commits on Sep 28, 2016

  1. offer second template for toolbar, add option "baseUrl" to showFilter…

    …edFeature to fix layout in iframes
    MatSchaeff committed Sep 28, 2016
    Copy the full SHA
    cfe82ef View commit details
  2. Release v0.1.45

    MatSchaeff committed Sep 28, 2016
    Copy the full SHA
    dfb499a View commit details

Commits on Sep 30, 2016

  1. change bubble help layout

    MatSchaeff committed Sep 30, 2016
    Copy the full SHA
    a52e415 View commit details
  2. Release v0.1.46

    MatSchaeff committed Sep 30, 2016
    Copy the full SHA
    b87ccb0 View commit details

Commits on Oct 3, 2016

  1. update help button

    MatSchaeff committed Oct 3, 2016
    Copy the full SHA
    c40a07d View commit details
  2. Release v0.1.47

    MatSchaeff committed Oct 3, 2016
    Copy the full SHA
    65a4b26 View commit details

Commits on Oct 5, 2016

  1. Copy the full SHA
    0e0ac2f View commit details
  2. Release v0.1.48

    MatSchaeff committed Oct 5, 2016
    Copy the full SHA
    b999a90 View commit details

Commits on Oct 7, 2016

  1. change tooltip layout

    MatSchaeff committed Oct 7, 2016
    Copy the full SHA
    d0e04a8 View commit details
  2. change tooltip layout

    MatSchaeff committed Oct 7, 2016
    Copy the full SHA
    c03db1d View commit details
  3. Release v0.1.49

    MatSchaeff committed Oct 7, 2016
    Copy the full SHA
    cbba293 View commit details

Commits on Jan 10, 2017

  1. css bug fix

    mdomagalski committed Jan 10, 2017
    Copy the full SHA
    4cafbde View commit details
  2. Release v0.1.50

    mdomagalski committed Jan 10, 2017
    Copy the full SHA
    63b181c View commit details

Commits on Feb 7, 2017

  1. Copy the full SHA
    d991cff View commit details
Showing with 1,953 additions and 57,272 deletions.
  1. +0 −89 Gruntfile.js
  2. +9 −1 LICENSE
  3. +66 −33 README.md
  4. +0 −32 bower.json
  5. +0 −13,700 build/bundle.css
  6. +0 −22,734 build/viewer.js
  7. +351 −46 css/style.css
  8. +14 −9,827 dist/feature-viewer.bundle.js
  9. +1 −2 dist/feature-viewer.min.js
  10. +0 −10,593 dist/feature-viewer.nextprot.js
  11. +95 −0 dist/index.html
  12. +3 −4 examples/genomics.html
  13. +7 −6 examples/histogram.html
  14. +163 −18 examples/index.html
  15. +4 −1 examples/nextprot.html
  16. +4 −1 examples/simple.html
  17. +22 −0 helpers/toast.js
  18. +14 −13 lib/index.js
  19. +21 −0 lib/index.min.js
  20. +16 −26 package.json
  21. +1 −1 snippets/example_1.js
  22. +6 −0 sonar-project.properties
  23. +921 −140 src/feature-viewer.js
  24. +10 −5 src/fv.nextprot.js
  25. +6 −0 utils/constants.js
  26. +24 −0 utils/data.js
  27. +129 −0 utils/icons.js
  28. +66 −0 webpack.config.js
89 changes: 0 additions & 89 deletions Gruntfile.js

This file was deleted.

10 changes: 9 additions & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
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.


GNU GENERAL PUBLIC LICENSE
Version 2, June 1991



Copyright (C) 1989, 1991 Free Software Foundation, Inc., <http://fsf.org/>
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies
99 changes: 66 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,51 @@
# Feature viewer
# neXtProt - The knowledge resource on human proteins

This is a code repository for the SIB - Swiss Institute of Bioinformatics CALIPHO group neXtProt project

See: https://www.nextprot.org/

# neXtProt feature viewer

[![DOI](https://zenodo.org/badge/36719341.svg)](https://zenodo.org/badge/latestdoi/36719341)

> 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.
![Feature viewer](/assets/FV_SCSHT.png)
**Full documentation and live demo** : http://calipho-sib.github.io/feature-viewer/examples/

Live demo: https://cdn.rawgit.com/calipho-sib/feature-viewer/v0.1.35/examples/index.html
This version is made in Javascript using the D3 library. For the TypeScript version, see : https://github.com/Lisanna/feature-viewer-typescript

![Feature viewer](/assets/FV_SCSHT.png)

## Getting Started

1) Include the library using bower or npm or simply by including the javascript feature-viewer.js
**1.** You can get the library in your project using NPM/Yarn
```
//BOWER//
bower install feature-viewer
//NODE//
//NPM//
npm install feature-viewer
//Yarn//
yarn add feature-viewer
```

Note: that if you choose the later approach (by just using the feature-viewer.js) you should also include the dependencies : jquery,d3 and bootstrap.js / bootstrap.min.css
Or Include the feature-viewer from jsDelivr CDN in the header of your html
```html
<script src="https://cdn.jsdelivr.net/gh/calipho-sib/feature-viewer@v1.1.0/dist/feature-viewer.bundle.js"></script>
```

**NOTE** : If you already got the dependencies (D3, Bootstrap & Jquery) in your project, use the simple minified version instead of the bundle :
```html
<script src="https://cdn.jsdelivr.net/gh/calipho-sib/feature-viewer@v1.1.0/dist/feature-viewer.min.js"></script>
```

2) Specify a div in your html
**2.** Specify a div in your html
```
<div id="fv1"></div>
```

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.
**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.
```javascript
//For Node add before : var FeatureViewer = require("feature-viewer");

var ft = new FeatureViewer('MALWMRLLPLLALLALWGPGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLE',
var ft = new FeatureViewer.createFeature('MALWMRLLPLLALLALWGPGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLE',
'#fv1',
{
showAxis: true,
@@ -40,10 +57,20 @@ var ft = new FeatureViewer('MALWMRLLPLLALLALWGPGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLY
});

//Instead of a sequence, you can also initialize the feature viewer with a length (integer) :
var ft = new FeatureViewer(213,'#fv1');
var ft = new FeatureViewer.createFeature(213,'#fv1');
```

To import Feature Viewer into an ES2015 application, you can import specific symbols from specific Feature Viewer modules:
```javascript
import { createFeature } from "feature-viewer";
```

In Node:
```javascript
const { createFeature } = require("feature-viewer");
```

4) Finally, add the features
**4.** Finally, add the features
```javascript
ft.addFeature({
data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
@@ -54,17 +81,20 @@ ft.addFeature({
});
```

5) Et voila!
**5.** Et voila!

![Feature viewer](/assets/feature-viewer.png)


## Functionalities

* Zoom into the Feature-viewer by selecting a part of the sequence with your mouse. Zoom out with a right-click.
* Zoom into the Feature-viewer by selecting a part of the sequence with your mouse. Zoom out with a right-click.
You can also zoom programmatically with the methods **```zoom(start,end)```** and **```resetZoom()```**


* A tooltip appears when the mouse is over a feature, giving its exact positions, and optionally, a description.


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

## Options
@@ -78,15 +108,21 @@ ft.addFeature({
* Features height
* Offset

## Examples
## ClearInstance()

https://search.nextprot.org/entry/NX_P01308/view/proteomics
You 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.


## Documentation

Check out this page for a better understanding of how to use the feature viewer and its possibilities :
* http://calipho-sib.github.io/feature-viewer/examples/

## Use it with NeXtProt API

![Feature viewer with neXtProt](/assets/FVDemo.png)
<img src="/assets/FVDemo.png" width="100%" />

It is possible to fill the feature viewer with protein features from [NeXtProt](https://search.nextprot.org/), the human protein database.
It is possible to fill the feature viewer with protein features from [NeXtProt](https://www.nextprot.org/), the human protein database.

- 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)
- 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".
@@ -97,6 +133,9 @@ It is possible to fill the feature viewer with protein features from [NeXtProt](
//initalize nextprot Client
var applicationName = 'demo app'; //please provide a name for your application
var clientInfo='calipho group at sib'; //please provide some information about you

const { nxFeatureViewer, Nextprot } = FeatureViewer;

var nx = new Nextprot.Client(applicationName, clientInfo);

//var entry = "NX_P01308";
@@ -126,10 +165,10 @@ var styles = [
ff.addNxFeature(["propeptide","mature-protein"], styles);

```
## Documentation
Check out this page for a better understanding of how to use the feature viewer and its possibilities :
* https://cdn.rawgit.com/calipho-sib/feature-viewer/v0.1.35/examples/index.html
## Examples
https://api.nextprot.org/entry/NX_P01308/proteomics
## Support
@@ -141,24 +180,18 @@ If you have any problem or suggestion please open an issue [here](https://github

`npm install` (will install the development dependencies)

`bower install` (will install the browser dependencies)
`npm start` (will start the development server on localhost:8080)

...make your changes and modifications...

`npm run dist` (will create the min & bundle versions in dist/)

`npm run build` (will create the bundle js & css in build/ for node)

`grunt bump` (will push and add a new release)
`npm run build` (will create the bundle js & css in build/)

`npm publish` (will publish in npm)



## License

This software is licensed under the GNU GPL v2 license, quoted below.

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.
32 changes: 0 additions & 32 deletions bower.json

This file was deleted.

Loading