diff --git a/packages/core/ui/theme.ts b/packages/core/ui/theme.ts index ff2a9ba262..67a4ab5f8e 100644 --- a/packages/core/ui/theme.ts +++ b/packages/core/ui/theme.ts @@ -1,4 +1,4 @@ -import { blue, green, red, grey, amber } from '@mui/material/colors' +import { blue, green, red, grey, orange } from '@mui/material/colors' import { createTheme, ThemeOptions } from '@mui/material/styles' import type { PaletteAugmentColorOptions } from '@mui/material/styles/createPalette' import deepmerge from 'deepmerge' @@ -50,7 +50,7 @@ function stockTheme() { bases: { A: refTheme.palette.augmentColor({ color: green }), C: refTheme.palette.augmentColor({ color: blue }), - G: refTheme.palette.augmentColor({ color: amber }), + G: refTheme.palette.augmentColor({ color: orange }), T: refTheme.palette.augmentColor({ color: red }), }, }, @@ -98,7 +98,7 @@ function getDarkStockTheme() { bases: { A: refTheme.palette.augmentColor({ color: green }), C: refTheme.palette.augmentColor({ color: blue }), - G: refTheme.palette.augmentColor({ color: amber }), + G: refTheme.palette.augmentColor({ color: orange }), T: refTheme.palette.augmentColor({ color: red }), }, }, @@ -132,7 +132,7 @@ function getDarkMinimalTheme() { bases: { A: refTheme.palette.augmentColor({ color: green }), C: refTheme.palette.augmentColor({ color: blue }), - G: refTheme.palette.augmentColor({ color: amber }), + G: refTheme.palette.augmentColor({ color: orange }), T: refTheme.palette.augmentColor({ color: red }), }, }, @@ -152,7 +152,7 @@ function getMinimalTheme() { bases: { A: refTheme.palette.augmentColor({ color: green }), C: refTheme.palette.augmentColor({ color: blue }), - G: refTheme.palette.augmentColor({ color: amber }), + G: refTheme.palette.augmentColor({ color: orange }), T: refTheme.palette.augmentColor({ color: red }), }, }, diff --git a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts index 1447c6c24f..35d4fafa38 100644 --- a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts +++ b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts @@ -184,13 +184,10 @@ export default class PileupRenderer extends BoxRendererType { } } } + const s = feature.get('start') - expansionBefore + const e = feature.get('end') + expansionAfter - const [leftPx, rightPx] = bpSpanPx( - feature.get('start') - expansionBefore, - feature.get('end') + expansionAfter, - region, - bpPerPx, - ) + const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx) if (displayMode === 'compact') { heightPx /= 3 @@ -202,13 +199,7 @@ export default class PileupRenderer extends BoxRendererType { }`, ) } - const topPx = layout.addRect( - feature.id(), - feature.get('start') - expansionBefore, - feature.get('end') + expansionAfter, - heightPx, - feature, - ) + const topPx = layout.addRect(feature.id(), s, e, heightPx, feature) if (topPx === null) { return null } @@ -652,6 +643,7 @@ export default class PileupRenderer extends BoxRendererType { charWidth, charHeight, defaultColor, + theme, canvasWidth, }: { ctx: CanvasRenderingContext2D @@ -663,9 +655,9 @@ export default class PileupRenderer extends BoxRendererType { charHeight: number defaultColor: boolean canvasWidth: number + theme: Theme }) { const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs - const { tag = '', type: colorType = '' } = colorBy || {} const { feature } = feat const region = regions[0] @@ -741,7 +733,7 @@ export default class PileupRenderer extends BoxRendererType { default: { ctx.fillStyle = defaultColor - ? '#c8c8c8' + ? 'lightgrey' : readConfObject(config, 'color', { feature }) break } @@ -814,6 +806,7 @@ export default class PileupRenderer extends BoxRendererType { canvasWidth, drawSNPsMuted, drawIndels = true, + theme, }: { ctx: CanvasRenderingContext2D feat: LayoutFeature @@ -828,6 +821,7 @@ export default class PileupRenderer extends BoxRendererType { charWidth: number charHeight: number canvasWidth: number + theme: Theme }) { const { Color, bpPerPx, regions } = renderArgs const { heightPx, topPx, feature } = feat @@ -864,7 +858,7 @@ export default class PileupRenderer extends BoxRendererType { fillRect( ctx, - leftPx, + Math.round(leftPx), topPx, widthPx, heightPx, @@ -1155,6 +1149,7 @@ export default class PileupRenderer extends BoxRendererType { charWidth, charHeight, canvasWidth, + theme, }) this.drawMismatches({ ctx, @@ -1170,6 +1165,7 @@ export default class PileupRenderer extends BoxRendererType { colorForBase, contrastForBase, canvasWidth, + theme, }) if (showSoftClip) { this.drawSoftClipping({ diff --git a/plugins/alignments/src/PileupRenderer/configSchema.ts b/plugins/alignments/src/PileupRenderer/configSchema.ts index 38258d0d29..046922a7cd 100644 --- a/plugins/alignments/src/PileupRenderer/configSchema.ts +++ b/plugins/alignments/src/PileupRenderer/configSchema.ts @@ -50,7 +50,7 @@ const PileupRenderer = ConfigurationSchema( type: 'number', description: 'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1', - defaultValue: 0.7, + defaultValue: 1, }, /** * #slot diff --git a/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts b/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts index dfbf9dc6a1..37811f2bba 100644 --- a/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts +++ b/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts @@ -35,6 +35,8 @@ interface SNPInfo { total: number } +const fudgeFactor = 0.6 + export default class SNPCoverageRenderer extends WiggleBaseRenderer { // note: the snps are drawn on linear scale even if the data is drawn in log // scape hence the two different scales being used @@ -78,6 +80,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { scaleType: 'linear', }) const originY = getOrigin(scaleOpts.scaleType) + const originLinear = getOrigin('linear') const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold') const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts') @@ -87,11 +90,9 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { // get the y coordinate that we are plotting at, this can be log scale const toY = (n: number) => height - (viewScale(n) || 0) + offset const toHeight = (n: number) => toY(originY) - toY(n) - - const indicatorToY = (n: number) => - height - (indicatorViewScale(n) || 0) + offset - const indicatorToHeight = (n: number) => - indicatorToY(getOrigin('linear')) - indicatorToY(n) + // used specifically for indicator + const toY2 = (n: number) => height - (indicatorViewScale(n) || 0) + offset + const toHeight2 = (n: number) => toY2(originLinear) - toY2(n) const { bases } = theme.palette const colorForBase: { [key: string]: string } = { @@ -105,7 +106,6 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { hardclip: 'red', meth: 'red', unmeth: 'blue', - ref: 'lightgrey', } const feats = [...features.values()] @@ -118,7 +118,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { for (let i = 0; i < coverage.length; i++) { const feature = coverage[i] const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx) - const w = rightPx - leftPx + 0.3 + const w = rightPx - leftPx + fudgeFactor const score = feature.get('score') as number ctx.fillRect(leftPx, toY(score), w, toHeight(score)) } @@ -144,7 +144,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { const score = feature.get('score') as number const snpinfo = feature.get('snpinfo') as SNPInfo - const w = Math.max(rightPx - leftPx + 0.3, 1) + const w = Math.max(rightPx - leftPx + fudgeFactor, 1) const totalScore = snpinfo.total const keys = Object.keys(snpinfo.cov).sort() @@ -160,7 +160,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { const height = toHeight(score) const bottom = toY(score) + height ctx.fillRect( - leftPx, + Math.round(leftPx), bottom - ((total + curr) / score) * height, w, (total / score) * height, @@ -175,12 +175,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer { for (let i = 0; i < interbaseEvents.length; i++) { const base = interbaseEvents[i] const { total } = snpinfo.noncov[base] + const r = 0.6 ctx.fillStyle = colorForBase[base] ctx.fillRect( - leftPx - 0.6 + extraHorizontallyFlippedOffset, - indicatorHeight + indicatorToHeight(curr), - 1.2, - indicatorToHeight(total), + leftPx - r + extraHorizontallyFlippedOffset, + indicatorHeight + toHeight2(curr), + r * 2, + toHeight2(total), ) curr += total } diff --git a/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap b/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap index 7023e77453..3a8cc85a94 100644 --- a/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap +++ b/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap @@ -1571,7 +1571,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" id="mui-21" type="number" - value="0.7" + value="1" />