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

fix(web): center markers in sequence views #709

Merged
merged 1 commit into from
Jan 31, 2022
Merged

fix(web): center markers in sequence views #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/PeptideMarkerFrameShift.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ function PeptideMarkerFrameShiftDisconnected({
const nucLength = nucAbs.end - nucAbs.begin
const codonLength = codon.end - codon.begin

const x = codon.begin * pixelsPerAa - pixelsPerAa / 2
let width = codonLength * pixelsPerAa
width = Math.max(width, BASE_MIN_WIDTH_PX)
const halfAa = Math.max(pixelsPerAa, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first AA
const x = codon.begin * pixelsPerAa - halfAa

const codonRangeStr = formatRange(codon.begin, codon.end)
const nucRangeStr = formatRange(nucAbs.begin, nucAbs.end)
Expand Down
5 changes: 3 additions & 2 deletions packages/web/src/components/SequenceView/PeptideMarkerUnknown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { SVGProps, useState } from 'react'

import { useTranslation } from 'react-i18next'
import { AMINOACID_UNKNOWN, AA_MIN_WIDTH_PX } from 'src/constants'
import { AMINOACID_UNKNOWN, AA_MIN_WIDTH_PX, BASE_MIN_WIDTH_PX } from 'src/constants'

import type { AminoacidRange } from 'src/algorithms/types'
import { TableSlim } from 'src/components/Common/TableSlim'
Expand All @@ -25,9 +25,10 @@ export function PeptideMarkerUnknownUnmemoed({ seqName, range, pixelsPerAa, ...r
const { begin, end } = range // prettier-ignore

const id = getSafeId('unknown-marker', { seqName, ...range })
const x = begin * pixelsPerAa - pixelsPerAa / 2
let width = (end - begin) * pixelsPerAa
width = Math.max(width, AA_MIN_WIDTH_PX)
const halfAa = Math.max(pixelsPerAa, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first AA
const x = begin * pixelsPerAa - halfAa

const rangeStr = formatRange(begin, end)
const length = end - begin
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/SequenceMarkerFrameShift.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ function SequenceMarkerFrameShiftDisconnected({
const nucLength = nucAbs.end - nucAbs.begin
const codonLength = codon.end - codon.begin

const x = nucAbs.begin * pixelsPerBase - pixelsPerBase / 2
let width = nucLength * pixelsPerBase
width = Math.max(width, BASE_MIN_WIDTH_PX)
const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
const x = nucAbs.begin * pixelsPerBase - halfNuc

const codonRangeStr = formatRange(codon.begin, codon.end)
const nucRangeStr = formatRange(nucAbs.begin, nucAbs.end)
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/SequenceMarkerGap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,10 @@ function SequenceMarkerGapDisconnected({ seqName, deletion, pixelsPerBase, geneM

const id = getSafeId('gap-marker', { seqName, ...deletion })

const x = begin * pixelsPerBase - pixelsPerBase / 2
let width = (end - begin) * pixelsPerBase
width = Math.max(width, BASE_MIN_WIDTH_PX)
const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
const x = begin * pixelsPerBase - halfNuc

const rangeStr = formatRange(begin, end)

Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/SequenceMarkerMissing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ export function SequenceMarkerMissingUnmemoed({ seqName, missing, pixelsPerBase,
const { begin, end } = missing // prettier-ignore

const id = getSafeId('missing-marker', { seqName, ...missing })
const x = begin * pixelsPerBase - pixelsPerBase / 2
let width = (end - begin) * pixelsPerBase
width = Math.max(width, BASE_MIN_WIDTH_PX)
const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
const x = begin * pixelsPerBase - halfNuc
Comment on lines -27 to +30
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's take the missing range (N nucs) as an example.

I take a max of "pixels per nuc" and "min nuc width", which gives the width of a single nuc for this particular marker in pixels.

Then I take half of this number, which gives a half of a nuc.

I subtract this half-nuc-width from the x position of the rectangle representing the range.

Elements in SVG are anchored on their left edges by default. So subtracting half a nuc shifts the rectangle by half a nuc to the left. This way it looks as if it is anchored at the center of the first nuc in the range.


const rangeStr = formatRange(begin, end)

Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/SequenceMarkerMutation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ function SequenceMarkerMutationDisconnected({

const fill = getNucleotideColor(queryNuc)
const width = Math.max(BASE_MIN_WIDTH_PX, pixelsPerBase)
const x = pos * pixelsPerBase - width / 2
const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
const x = pos * pixelsPerBase - halfNuc
Comment on lines -59 to +60
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only non-range marker changed: the nuc substitution marker.

Similarly, I shift it to the left by half a nuc. Note it was already shifted before by (width / 2). But because width is always 1 nuc, I find it more explicit to subtract the half a nuc. Gives the same result, but looks more in line with the rest of markers.


const totalAaChanges = aaSubstitutions.length + aaDeletions.length

Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/SequenceView/SequenceMarkerUnsequenced.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ export const SequenceMarker = memo(function SequenceMarkerImpl({
}: PropsWithChildren<SequenceMarkerProps>) {
const [showTooltip, setShowTooltip] = useState(false)

const x = begin * pixelsPerBase - pixelsPerBase / 2
let width = (end - begin) * pixelsPerBase
width = Math.max(width, BASE_MIN_WIDTH_PX)
const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
const x = begin * pixelsPerBase - halfNuc

if (begin >= end) {
console.warn(
Expand Down