From 91f31368ba1e40dba57ee793daa9a4ecf5ed582b Mon Sep 17 00:00:00 2001 From: Garrett Stevens Date: Wed, 24 Jan 2024 02:34:24 +0000 Subject: [PATCH] Adjust translation row, cleanup --- .../components/LinearApolloDisplay.tsx | 12 -- .../stateModel/mouseEvents.ts | 8 +- .../stateModel/rendering.ts | 178 +++++++++--------- 3 files changed, 95 insertions(+), 103 deletions(-) diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx index 97ea159be..168fa2667 100644 --- a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx +++ b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx @@ -83,17 +83,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay( width: lgv.dynamicBlocks.totalWidthPx, height: lgv.bpPerPx <= 1 ? 125 : 95, }} - onContextMenu={(event) => { - event.preventDefault() - if (contextMenuItems.length > 0) { - // There's already a context menu open, so close it - setContextMenuItems([]) - } else { - const coord: [number, number] = [event.clientX, event.clientY] - setContextCoord(coord) - setContextMenuItems(getContextMenuItems(coord)) - } - }} > { @@ -113,7 +102,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay( width={lgv.dynamicBlocks.totalWidthPx} height={lgv.bpPerPx <= 1 ? 125 : 95} className={classes.canvas} - style={{ cursor: cursor ?? 'default' }} data-testid="seqTrackOverlayCanvas" /> diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts index 9d79166f4..6d87f720c 100644 --- a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts +++ b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts @@ -52,10 +52,10 @@ function getMousePosition( function getSeqRow(feature: AnnotationFeatureI, bpPerPx: number) { const rowOffset = bpPerPx <= 1 ? 5 : 3 - if (feature.type === 'CDS' && feature.phase != undefined) { + if (feature.type === 'CDS' && feature.phase !== undefined) { return feature.strand === -1 - ? Math.abs(((feature.end - 1 - feature.phase) % 3) - 2) + rowOffset - : Math.abs(((feature.start - 1 - feature.phase) % 3) - 2) + ? ((feature.end - feature.phase) % 3) + rowOffset + : Math.abs(((feature.start + feature.phase) % 3) - 2) } if (bpPerPx <= 1) { @@ -73,7 +73,7 @@ function highlightSeq( row: number | undefined, widthPx: number, ) { - if (row != undefined) { + if (row !== undefined) { seqTrackOverlayctx.fillStyle = theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)' seqTrackOverlayctx.fillRect( diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts index 24b0f193a..cebdf7360 100644 --- a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts +++ b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts @@ -224,6 +224,9 @@ export function sequenceRenderingModelFactory( if (!self.lgv.initialized || self.regionCannotBeRendered()) { return } + if (self.lgv.bpPerPx > 3) { + return + } const seqTrackctx = self.seqTrackCanvas?.getContext('2d') if (!seqTrackctx) { return @@ -246,108 +249,109 @@ export function sequenceRenderingModelFactory( } const { seq } = await driver.getSequence(region) - if (seq) { - for (const [i, letter] of [...seq].entries()) { - const trnslXOffset = + if (!seq) { + return + } + for (const [i, letter] of [...seq].entries()) { + const trnslXOffset = + (self.lgv.bpToPx({ + refName: region.refName, + coord: region.start + i, + regionNumber: idx, + })?.offsetPx ?? 0) - self.lgv.offsetPx + const trnslWidthPx = 3 / self.lgv.bpPerPx + const trnslStartPx = self.displayedRegions[idx].reversed + ? trnslXOffset - trnslWidthPx + : trnslXOffset + + // Draw translation forward + for (let j = 2; j >= 0; j--) { + if ((region.start + i) % 3 === j) { + drawTranslation( + seqTrackctx, + self.lgv.bpPerPx, + trnslStartPx, + self.sequenceRowHeight * (2 - j), + trnslWidthPx, + self.sequenceRowHeight, + seq, + i, + false, + ) + } + } + + if (self.lgv.bpPerPx <= 1) { + const xOffset = (self.lgv.bpToPx({ refName: region.refName, coord: region.start + i, regionNumber: idx, })?.offsetPx ?? 0) - self.lgv.offsetPx - const trnslWidthPx = 3 / self.lgv.bpPerPx - const trnslStartPx = self.displayedRegions[idx].reversed - ? trnslXOffset - trnslWidthPx - : trnslXOffset + const widthPx = 1 / self.lgv.bpPerPx + const startPx = self.displayedRegions[idx].reversed + ? xOffset - widthPx + : xOffset - // Draw translation forward - for (let j = 2; j >= 0; j--) { - if ((region.start + i) % 3 === j) { - drawTranslation( - seqTrackctx, - self.lgv.bpPerPx, - trnslStartPx, - self.sequenceRowHeight * (2 - j), - trnslWidthPx, - self.sequenceRowHeight, - seq, - i, - false, - ) - } - } - - if (self.lgv.bpPerPx <= 1) { - const xOffset = - (self.lgv.bpToPx({ - refName: region.refName, - coord: region.start + i, - regionNumber: idx, - })?.offsetPx ?? 0) - self.lgv.offsetPx - const widthPx = 1 / self.lgv.bpPerPx - const startPx = self.displayedRegions[idx].reversed - ? xOffset - widthPx - : xOffset - - // Draw forward - seqTrackctx.beginPath() - seqTrackctx.fillStyle = colorCode(letter, self.theme) - seqTrackctx.rect( + // Draw forward + seqTrackctx.beginPath() + seqTrackctx.fillStyle = colorCode(letter, self.theme) + seqTrackctx.rect( + startPx, + self.sequenceRowHeight * 3, + widthPx, + self.sequenceRowHeight, + ) + seqTrackctx.fill() + if (self.lgv.bpPerPx <= 0.1) { + seqTrackctx.stroke() + drawLetter( + seqTrackctx, startPx, - self.sequenceRowHeight * 3, widthPx, - self.sequenceRowHeight, + letter, + self.sequenceRowHeight * 3, ) - seqTrackctx.fill() - if (self.lgv.bpPerPx <= 0.1) { - seqTrackctx.stroke() - drawLetter( - seqTrackctx, - startPx, - widthPx, - letter, - self.sequenceRowHeight * 3, - ) - } + } - // Draw reverse - const revLetter = revcom(letter) - seqTrackctx.beginPath() - seqTrackctx.fillStyle = colorCode(revLetter, self.theme) - seqTrackctx.rect( + // Draw reverse + const revLetter = revcom(letter) + seqTrackctx.beginPath() + seqTrackctx.fillStyle = colorCode(revLetter, self.theme) + seqTrackctx.rect( + startPx, + self.sequenceRowHeight * 4, + widthPx, + self.sequenceRowHeight, + ) + seqTrackctx.fill() + if (self.lgv.bpPerPx <= 0.1) { + seqTrackctx.stroke() + drawLetter( + seqTrackctx, startPx, - self.sequenceRowHeight * 4, widthPx, - self.sequenceRowHeight, + revLetter, + self.sequenceRowHeight * 4, ) - seqTrackctx.fill() - if (self.lgv.bpPerPx <= 0.1) { - seqTrackctx.stroke() - drawLetter( - seqTrackctx, - startPx, - widthPx, - revLetter, - self.sequenceRowHeight * 4, - ) - } } + } - // Draw translation reverse - for (let k = 0; k <= 2; k++) { - const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3 - if ((region.start + i) % 3 === k) { - drawTranslation( - seqTrackctx, - self.lgv.bpPerPx, - trnslStartPx, - self.sequenceRowHeight * (rowOffset + k), - trnslWidthPx, - self.sequenceRowHeight, - seq, - i, - true, - ) - } + // Draw translation reverse + for (let k = 0; k <= 2; k++) { + const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3 + if ((region.start + i) % 3 === k) { + drawTranslation( + seqTrackctx, + self.lgv.bpPerPx, + trnslStartPx, + self.sequenceRowHeight * (rowOffset + k), + trnslWidthPx, + self.sequenceRowHeight, + seq, + i, + true, + ) } } }