diff --git a/src/JBrowse/View/FeatureGlyph/PairedAlignment.js b/src/JBrowse/View/FeatureGlyph/PairedAlignment.js index 00cabde31c..c1d2c682ad 100644 --- a/src/JBrowse/View/FeatureGlyph/PairedAlignment.js +++ b/src/JBrowse/View/FeatureGlyph/PairedAlignment.js @@ -49,56 +49,57 @@ renderFeature(context, fRect) { const block = fRect.viewInfo.block const l = block.bpToX(s1) const r = block.bpToX(s2) - context.fillStyle = this.getStyle(f, 'overlapColor') - context.strokeStyle = this.getStyle(f, 'overlapStroke') - context.rect( - l, // left - fRect.rect.t, - r-l, // width - fRect.rect.h - ) - context.fill(); - context.stroke() - context.strokeStyle = null - context.fillStyle = null - var m1 = this._getMismatches( f.read1 ); - var m2 = this._getMismatches( f.read2 ); - if(!m1 && !m2) { - return; - } else { - var mismatches = []; - for(var i = 0; i < m1.length; i++) { - let foundMatching = false; - for(var j = 0; j < m2.length; j++) { - if(x1+m1[i].start == y1+m2[j].start && s1 < x1+m1[i].start && s2 > x1+m1[i].start) { - foundMatching = true - mismatches.push({ start: m1[i].start, base1: m1[i].base, base2: m2[j].base, type: 'mismatch', length: 1 }); + if(r-l > 2) { + context.fillStyle = this.getStyle(f, 'overlapColor') + context.strokeStyle = this.getStyle(f, 'overlapStroke') + context.rect( + l, // left + fRect.rect.t, + r-l, // width + fRect.rect.h) + context.fill(); + context.stroke() + context.strokeStyle = null + context.fillStyle = null + var m1 = this._getMismatches( f.read1 ); + var m2 = this._getMismatches( f.read2 ); + if(!m1 && !m2) { + return; + } else { + var mismatches = []; + for(var i = 0; i < m1.length; i++) { + let foundMatching = false; + for(var j = 0; j < m2.length; j++) { + if(x1+m1[i].start == y1+m2[j].start && s1 < x1+m1[i].start && s2 > x1+m1[i].start) { + foundMatching = true + mismatches.push({ start: m1[i].start, base1: m1[i].base, base2: m2[j].base, type: 'mismatch', length: 1 }); + } + } + if(m1[i].type == 'mismatch' && s1 < x1+m1[i].start && s2 > x1+m1[i].start && !foundMatching ) { + mismatches.push({ start: m1[i].start, base1: m1[i].base, base2: '-', type: 'mismatch', length: 1 }); } } - if(m1[i].type == 'mismatch' && s1 < x1+m1[i].start && s2 > x1+m1[i].start && !foundMatching ) { - mismatches.push({ start: m1[i].start, base1: m1[i].base, base2: '-', type: 'mismatch', length: 1 }); + if(mismatches.length !== 0) { + this._drawOverlappingMismatches(context, fRect, mismatches, x1) } - } - if(mismatches.length !== 0) { - this._drawOverlappingMismatches(context, fRect, mismatches, x1) - } - mismatches = []; - for(var i = 0; i < m2.length; i++) { - let foundMatching = false; - for(var j = 0; j < m1.length; j++) { - if(x1+m1[j].start == y1+m2[i].start && s1 < y1+m2[i].start && s2 > y1+m2[i].start) { - // mismatches.push({ start: m2[i].start, base1: m2[i].base, base2: m1[j].base, type: 'mismatch', length: 1 }); - // would have been found in above loop also previous iteration - foundMatching = true + mismatches = []; + for(var i = 0; i < m2.length; i++) { + let foundMatching = false; + for(var j = 0; j < m1.length; j++) { + if(x1+m1[j].start == y1+m2[i].start && s1 < y1+m2[i].start && s2 > y1+m2[i].start) { + // mismatches.push({ start: m2[i].start, base1: m2[i].base, base2: m1[j].base, type: 'mismatch', length: 1 }); + // would have been found in above loop also previous iteration + foundMatching = true + } + } + if(m2[i].type == 'mismatch' && s1 < y1+m2[i].start && s2 > y1+m2[i].start && !foundMatching) { + mismatches.push({ start: m2[i].start, base1: m2[i].base, base2: '-', type: 'mismatch', length: 1 }); } } - if(m2[i].type == 'mismatch' && s1 < y1+m2[i].start && s2 > y1+m2[i].start && !foundMatching) { - mismatches.push({ start: m2[i].start, base1: m2[i].base, base2: '-', type: 'mismatch', length: 1 }); + if(mismatches.length !== 0) { + this._drawOverlappingMismatches(context, fRect, mismatches, y1) } } - if(mismatches.length !== 0) { - this._drawOverlappingMismatches(context, fRect, mismatches, y1) - } } } } else {