Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix negative strand CIGAR renderings on linear synteny view #3082

Merged
merged 3 commits into from
Jul 11, 2022
Merged

Fix negative strand CIGAR renderings on linear synteny view #3082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03ab944
Fixes to negative strand CIGAR renderings
cmdcolin Jul 11, 2022
c4da8a4
Use specialized revCigar function, since regular read vs ref view wou…
cmdcolin Jul 11, 2022
c2ca98e
Fix cigar tooltips
cmdcolin Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions plugins/alignments/src/BamAdapter/MismatchParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export interface Mismatch {
}
const mdRegex = new RegExp(/(\d+|\^[a-z]+|[a-z])/gi)
const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
export function parseCigar(cigar: string) {
return (cigar || '').split(/([MIDNSHPX=])/)
export function parseCigar(cigar = '') {
return cigar.split(/([MIDNSHPX=])/).slice(0, -1)
}
export function cigarToMismatches(
ops: string[],
Expand Down
1 change: 1 addition & 0 deletions plugins/comparative-adapters/src/PAFAdapter/PAFAdapter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ export default class PAFAdapter extends BaseFeatureDataAdapter {
refName,
strand,
assemblyName,
revCigar: true,
syntenyId: i,
...(numMatches && blockLen
? { identity: numMatches / blockLen }
Expand Down
33 changes: 20 additions & 13 deletions ...s/linear-comparative-view/src/LinearSyntenyRenderer/components/LinearSyntenyRendering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ function LinearSyntenyRendering({
const [currX, setCurrX] = useState<number>()
const [currY, setCurrY] = useState<number>()
const { color, assemblyManager, parentView } = getResources(displayModel)
const hydratedFeatures = useMemo(
const es = useMemo(
() =>
features.map(level =>
level
Expand All @@ -262,19 +262,19 @@ function LinearSyntenyRendering({
[features],
)
const matches = useMemo(
() => layoutMatches(hydratedFeatures, assemblyManager),
[hydratedFeatures, assemblyManager],
() => layoutMatches(es, assemblyManager),
[es, assemblyManager],
)

const parsedCIGARs = useMemo(
() =>
new Map(
hydratedFeatures.flat().map(f => {
es.flat().map(f => {
const cigar = f.get('cg') || f.get('CIGAR')
return [f.id(), cigar ? MismatchParser.parseCigar(cigar) : undefined]
}),
),
[hydratedFeatures],
[es],
)
const drawCurves = parentView?.drawCurves
const views = parentView?.views
Expand Down Expand Up @@ -326,6 +326,9 @@ function LinearSyntenyRendering({
ctx1.fillStyle = colorMap.M
ctx1.strokeStyle = colorMap.M
ctx2.fillStyle = `rgb(${r},${g},${b})`

// too many click map false positives with colored stroked lines
// ctx2.strokeStyle = `rgb(${r},${g},${b})`
drawMatchSimple({
cb: ctx => ctx.fill(),
match: m,
Expand Down Expand Up @@ -400,6 +403,9 @@ function LinearSyntenyRendering({
let cx1 = x11
let cx2 = x21

// we have to read the CIGAR backwards when looking at negative strand features
const f1flipped = f1.get('revCigar') && f1.get('strand') === -1

// flip the direction of the CIGAR drawing in horizontally flipped
// modes
const rev1 = x11 < x12 ? 1 : -1
Expand All @@ -412,10 +418,12 @@ function LinearSyntenyRendering({
let continuingFlag = false
let px1 = 0
let px2 = 0
const unitMultiplier2 = Math.floor(
MAX_COLOR_RANGE / (cigar.length / 2),
)
for (let j = 0; j < cigar.length; j += 2) {
const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
for (
let j = f1flipped ? cigar.length - 2 : 0;
f1flipped ? j >= 0 : j < cigar.length;
j += f1flipped ? -2 : 2
) {
const idx = j * unitMultiplier2 + 1
const r = Math.floor(idx / (255 * 255)) % 255
const g = Math.floor(idx / 255) % 255
Expand Down Expand Up @@ -453,10 +461,11 @@ function LinearSyntenyRendering({
// if it is a small feature and not the last element of the
// CIGAR (which could skip rendering it entire if we did turn
// it on), then turn on continuing flag
const isNotLast = f1flipped ? j > 2 : j < cigar.length - 2
if (
Math.abs(cx1 - px1) < 1 &&
Math.abs(cx2 - px2) < 1 &&
j < cigar.length - 2
isNotLast
) {
continuingFlag = true
} else {
Expand Down Expand Up @@ -655,9 +664,7 @@ function LinearSyntenyRendering({
return
}
const cigar = parsedCIGARs.get(match1[0].feature.id()) || []
const unitMultiplier2 = Math.floor(
MAX_COLOR_RANGE / (cigar.length / 2),
)
const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
const cigarIdx = getId(r2, g2, b2, unitMultiplier2)
const f1 = match1[0].feature
const f2 = match1[1].feature
Expand Down