Я создаю веб-сайт и хочу показать изображение на основе последовательности белка, которую вводит пользователь. Я использую Genentech Pviz GitHub, чтобы помочь мне создать графику и скопировал пример с их сайта. Он работает совершенно нормально и показывает правильное изображение и графику, когда я открываю его в PyCharm, но когда я открываю его как шаблон в views.py, это не так.
<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
У меня есть изображения, показывающие результаты, но я не знаю, как их отправить. В основном должен быть заголовок с графиком под ним, но вместо этого отображаются только заголовок и нижний колонтитул. В основном игнорирование графика, который на самом деле имеет значение.
Почему веб-страница меняется, когда я открываю ее как вызов, в представлениях по сравнению с тем, когда я открываю ее напрямую?
Как я уже говорил в другом вопросе. Я хотел бы создать тег для PVIZ, потому что я не могу найти много информации о переполнении стека, потому что нет общего тега для него. Ссылка на github:
https://github.com/Genentech/pviz