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"
/>