From dde351dc2547001682f6227040fc70e692bb5955 Mon Sep 17 00:00:00 2001 From: Colin Date: Tue, 12 Sep 2023 10:18:37 -0400 Subject: [PATCH] Improve some dotplot rendering --- .../src/DotplotRenderer/DotplotRenderer.ts | 17 ++++++++++++++--- .../__image_snapshots__/dotplot_snapshot.svg | 2 +- .../tests/__snapshots__/ExportSvg.test.tsx.snap | 2 +- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/plugins/dotplot-view/src/DotplotRenderer/DotplotRenderer.ts b/plugins/dotplot-view/src/DotplotRenderer/DotplotRenderer.ts index ea238442dd..f2298485e0 100644 --- a/plugins/dotplot-view/src/DotplotRenderer/DotplotRenderer.ts +++ b/plugins/dotplot-view/src/DotplotRenderer/DotplotRenderer.ts @@ -181,7 +181,7 @@ export default class DotplotRenderer extends ComparativeRenderer { width: vview.width, } const t = createJBrowseTheme(theme) - hview.features?.forEach(feature => { + for (const feature of hview.features || []) { const strand = feature.get('strand') || 1 const start = strand === 1 ? feature.get('start') : feature.get('end') const end = strand === 1 ? feature.get('end') : feature.get('start') @@ -240,6 +240,8 @@ export default class DotplotRenderer extends ComparativeRenderer { ctx.beginPath() ctx.moveTo(currX, height - currY) + let lastDrawnX = currX + let lastDrawnY = currX for (let i = 0; i < cigarOps.length; i += 2) { const val = +cigarOps[i] const op = cigarOps[i + 1] @@ -253,7 +255,16 @@ export default class DotplotRenderer extends ComparativeRenderer { } currX = clampWithWarnX(currX, b1, b2, feature) currY = clampWithWarnY(currY, e1, e2, feature) - ctx.lineTo(currX, height - currY) + + // only draw a line segment if it is bigger than 0.5px + if ( + Math.abs(currX - lastDrawnX) > 0.5 || + Math.abs(currY - lastDrawnY) > 0.5 + ) { + ctx.lineTo(currX, height - currY) + lastDrawnX = currX + lastDrawnY = currY + } } ctx.stroke() @@ -279,7 +290,7 @@ export default class DotplotRenderer extends ComparativeRenderer { } } } - }) + } return { warnings } } diff --git a/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg b/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg index e59e223eb8..b52063bde8 100644 --- a/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg +++ b/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg @@ -1 +1 @@ -ctgA16,00018,00020,00022,00024,00026,00028,00030,00032,000volvoxctgA13,00014,00015,00016,00017,00018,00019,00020,00021,00022,00023,00024,00025,000volvox_random_inv \ No newline at end of file +ctgA16,00018,00020,00022,00024,00026,00028,00030,00032,000volvoxctgA13,00014,00015,00016,00017,00018,00019,00020,00021,00022,00023,00024,00025,000volvox_random_inv \ No newline at end of file diff --git a/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap b/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap index f5b70d2a12..c3d56cb410 100644 --- a/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap +++ b/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap @@ -9,7 +9,7 @@ exports[`export svg of circular 1`] = ` " `; -exports[`export svg of dotplot 1`] = `"ctgA16,00018,00020,00022,00024,00026,00028,00030,00032,000volvoxctgA13,00014,00015,00016,00017,00018,00019,00020,00021,00022,00023,00024,00025,000volvox_random_inv"`; +exports[`export svg of dotplot 1`] = `"ctgA16,00018,00020,00022,00024,00026,00028,00030,00032,000volvoxctgA13,00014,00015,00016,00017,00018,00019,00020,00021,00022,00023,00024,00025,000volvox_random_inv"`; exports[`export svg of lgv 1`] = `"volvox80bpctgA020406080001111GTACAGAGTGACGCTCAAAGCvolvox-sorted.bam (ctgA, canvas)"`;