I am creating a website and want to show a image based on the protein sequence that a user inputs. I am using the genentech Pviz GitHub to help me create the graphic and have copied an example from their website. It work completely fine and shows the correct image and graphic when I open it within PyCharm but when I open it as a template in views.py it does not.
<html>
<head>
<title>pViz.js different track heights</title>
<link rel="stylesheet" type="text/css" href="deps/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="deps/pviz-core.css">
<script src="deps/pviz-bundle.min.js"></script>
<!-- just a few lines of javscript to decorate the page -->
<script src="examples-utils.js"></script>
<style type="text/css" media="screen" class='example'>
g.feature rect.coverage_bar.psm_coverage {
fill: blue;
fill-opacity: 0.4;
}
g.feature rect.coverage_bar.psm_no_coverage {
fill: red;
fill-opacity: 0.4;
}
</style>
</head>
<body class="container">
<div class="row">
<h2>pViz with different track heights example</h2>
</div>
<div id="main" class="row"></div>
<div class="row">
<h3>Comments</h3>
</div>
<script class="example">
var pviz = this.pviz;
var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNAS';
var seqEntry = new pviz.SeqEntry({
sequence : seq
});
/**
* attach a track height ratio to the category (1 is the default)
*/
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms = 0.2;
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms_coverage = 3;
pviz.FeatureDisplayer.setStrikeoutCategory('oups');
new pviz.SeqEntryAnnotInteractiveView({
model : seqEntry,
el : '#main'
}).render();
pviz.FeatureDisplayer.setCustomHandler(['psm_coverage', 'psm_no_coverage'], {
appender : function(viewport, svgGroup, features, type) {
var sel = svgGroup.selectAll("g.feature.internal.data." + type).data(features).enter().append("g").attr("class", "feature internal data " + type)
sel.append("rect").attr('class', function(ft) {
return 'coverage_bar ' + ft.type
})
return sel;
},
positioner : function(viewport, d3selection) {
// d3selection.attr('transform', function(ft, i) {
// return 'translate(' + + ',' + viewport.scales.y(ft.displayTrack) + ')';
// });
var w1 = viewport.scales.x(10) - viewport.scales.x(9);
var hMax = viewport.scales.y(1) * pviz.FeatureDisplayer.heightFactor('psms_coverage');
d3selection.selectAll("rect.coverage_bar.psm_coverage").attr('height', function(ft) {
return ft.coverage * hMax;
})
d3selection.selectAll("rect.coverage_bar.psm_no_coverage").attr('height', hMax);
d3selection.selectAll("rect.coverage_bar").attr('x', function(ft) {
return viewport.scales.x(ft.start - 0.5);
}).attr('width', function(ft) {
return viewport.scales.x(ft.start + 0.5) - viewport.scales.x(ft.start - 0.5);
});
return d3selection
}
});
var fts = [[0, 30], [3, 15], [10, 16], [2, 8], [35, 50], [60, 69], [60, 65], [60, 62], [61, 62], [4, 15], [7, 15], [62, 69], [40, 50], [9, 15]];
seqEntry.addFeatures(fts.map(function(ft) {
return {
//we could also use te categoryType property, for height purpose, but not grouping purpose
category : 'psms',
type : 'psm',
start : ft[0],
end : ft[1],
text : ''
}
}));
/*
* now we just compute the coverage by counting how many psms cover each amino acid
*/
var coverage = []
for ( i = 0; i < seqEntry.length(); i++) {
coverage[i] = 0;
}
var max = 0;
fts.forEach(function(ft) {
for ( i = ft[0]; i <= ft[1]; i++) {
coverage[i]++;
max = Math.max(coverage[i], max)
}
});
/*
* and ad new features for that
*/
seqEntry.addFeatures(coverage.map(function(c, i) {
return {
category : 'psms_coverage',
type : (c == 0) ? 'psm_no_coverage' : 'psm_coverage',
start : i,
end : i,
text : c,
coverage : c / max
}
}));
seqEntry.addFeatures({
category : 'oups',
type : 'oups',
start : 10,
end : 40,
text : 'oups'
});
</script>
</body>
</html>
[25/Jun/2019 15:34:10] "GET /protein/examples-utils.js HTTP/1.1" 404 2873
[25/Jun/2019 15:34:54] "POST /protein/ HTTP/1.1" 200 5136
Not Found: /protein/deps/pviz-bundle.min.js
[25/Jun/2019 15:34:54] "GET /protein/deps/pviz-bundle.min.js HTTP/1.1" 404 2891
Not Found: /protein/deps/bootstrap.min.css
[25/Jun/2019 15:34:54] "GET /protein/deps/bootstrap.min.css HTTP/1.1" 404 2888
Not Found: /protein/examples-utils.js
[25/Jun/2019 15:34:54] "GET /protein/examples-utils.js HTTP/1.1" 404 2873
Not Found: /protein/deps/pviz-core.css
[25/Jun/2019 15:34:54] "GET /protein/deps/pviz-core.css HTTP/1.1" 404 2876
Not Found: /protein/examples-utils.js
[25/Jun/2019 15:34:54] "GET /protein/examples-utils.js HTTP/1.1" 404 2873
I have images showing the results but I do not know how to submit those. Basically there should be a title with a graph underneath it and but instead only the title and footer show up. Basically ignoring the graph that actually matters.
Why does the webpage change when I open it as a call it in views vs when I open it directly?
Like I have stated in another question. I would like to create a tag for PVIZ because I cannot find much information on stack overflow because there is not general tag for it. The github link is : https://github.com/Genentech/pviz
