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/nextprot-js/v0.0.25/dist/nextprot.min.js"></script>
<script src="https://cdn.rawgit.com/calipho-sib/feature-viewer/v0.0.8/dist/feature-viewer.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 nx = new Nextprot.Client(appName, clientInfo);
                         
var entry = "NX_P46976";
                             
Promise.all([nx.getProteinSequence(entry), nx.getMatureProtein(entry)]).then(function (arrayResult) {
        
    var isoSequences = arrayResult[0];
    var matureProteinMappings = arrayResult[1];
    
    var sequenceForIso1 = NXUtils.getSequenceForIsoform(isoSequences, 1);
    var peptidesByIsoformMap = NXUtils.convertMappingsToIsoformMap(matureProteinMappings);    
    
    //feature viewer
    var peptidesForViewer = NXViewerUtils.convertNXAnnotations(peptidesByIsoformMap["NX_P46976-1"], "mature-protein");
    
    var ft = new FeatureViewer(sequenceForIso1,"#test", {showAxis: true, showSequence: true, brushActive: true, verticalLine:false});
    ft.addFeature({
        data: peptidesForViewer,
        name: "test feature 0",
        className: "test0",
        color: "#0F8292",
        type: "multipleRect"
    });
            
});