JSFiddle - React, Tailwind, and code Playground

by ddtxra

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/calipho-sib/feature-viewer/v0.0.8/dist/feature-viewer.min.js"></script>
<script src="https://cdn.rawgit.com/calipho-sib/nextprot-js/v0.0.23/dist/nextprot.min.js"></script>
<body>
    <div id="test">
    </div>
</body>

CSS

.brush .extent{
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

.selected {
    fill: #afa2dc;
    stroke: #2f225d;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis {
    font: 10px sans-serif;
}

 /*Creates a small triangle extender for the tooltip */
.tooltip2:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: left;
  margin: -1px 0 0 0;
  top: 98%;
  left: 10px;
}

JavaScript

// Create an instance of nextprot client
var appName = "demo app for showing how to extract sequences"; //replace this with what your application is doing
var clientInfo = "calipho group at SIB"; //replace this with who you are
var nextprotClient = new Nextprot.Client(appName, clientInfo);

Promise.all([nextprotClient.getProteinSequence(), nextprotClient.getPeptideMapping()]
//Gets the protein overview
nextprotClient.getProteinSequence('NX_P01308').then(function(isoSequences){

    //Shows sequence of the isoform 1
    var seq1 = new Sequence(isoSequences[0].sequence);
    seq1.render('#seq1');
    
    
    var ft = new FeatureViewer("FDSJKLFJDSFKLJDFHKFL","#test", {
    	showAxis: true,
    	showSequence: true,
    	brushActive: true,
    	verticalLine:false
        });

    //Once the feature viewer is created, you can add the features
    //There are 4 types of features : rect, multipleRect, unique & path
    ft.addFeature({
        data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
        name: "test feature 0",
        className: "test0",
        color: "#0F8292"
    });
        

});