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.

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

Allow setting sequenceType='pep' in ReferenceSequenceTrack configuration #4533

Merged
merged 2 commits into from
Aug 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -115,33 +115,41 @@ function Translation({
)
}

function DNA(props: {
function Sequence({
bpPerPx,
region,
feature,
sequenceType,
theme,
height,
seq,
y,
}: {
seq: string
theme: Theme
bpPerPx: number
sequenceType: string
height: number
region: Region
feature: Feature
y: number
}) {
const { bpPerPx, region, feature, theme, height, seq, y } = props
const render = 1 / bpPerPx >= 12

const [leftPx, rightPx] = bpSpanPx(
feature.get('start'),
feature.get('end'),
region,
bpPerPx,
)
const s = feature.get('start')
const e = feature.get('end')
const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
const reverse = region.reversed
const len = feature.get('end') - feature.get('start')
const len = e - s
const w = Math.max((rightPx - leftPx) / len, 0.8)

return (
<>
{seq.split('').map((letter, index) => {
// @ts-expect-error
const color = theme.palette.bases[letter.toUpperCase()]
const color =
sequenceType === 'dna'
? // @ts-expect-error
theme.palette.bases[letter.toUpperCase()]
: undefined
const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w
return (
/* biome-ignore lint/suspicious/noArrayIndexKey: */
Expand Down Expand Up @@ -183,6 +191,7 @@ function SequenceSVG({
showReverse = true,
showForward = true,
showTranslation = true,
sequenceType = 'dna',
bpPerPx,
rowHeight,
}: {
Expand All @@ -193,6 +202,7 @@ function SequenceSVG({
showReverse?: boolean
showForward?: boolean
showTranslation?: boolean
sequenceType?: string
bpPerPx: number
rowHeight: number
}) {
Expand All @@ -212,7 +222,7 @@ function SequenceSVG({
// (applies to both translation rows and dna rows)
let currY = -rowHeight

const showDNA = bpPerPx <= 1
const showSequence = bpPerPx <= 1

const forwardFrames: Frame[] = showTranslation && showForward ? [3, 2, 1] : []
const reverseFrames: Frame[] =
Expand Down Expand Up @@ -241,9 +251,10 @@ function SequenceSVG({
/>
))}

{showForward && showDNA ? (
<DNA
{showForward && showSequence ? (
<Sequence
height={rowHeight}
sequenceType={sequenceType}
y={(currY += rowHeight)}
feature={feature}
region={region}
Expand All @@ -253,9 +264,10 @@ function SequenceSVG({
/>
) : null}

{showReverse && showDNA ? (
<DNA
{showReverse && showSequence ? (
<Sequence
height={rowHeight}
sequenceType={sequenceType}
y={(currY += rowHeight)}
feature={feature}
region={region}
Expand Down
118 changes: 82 additions & 36 deletions plugins/sequence/src/LinearReferenceSequenceDisplay/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import {
import {
AnyConfigurationSchemaType,
ConfigurationReference,
getConf,
} from '@jbrowse/core/configuration'
import { getParentRenderProps } from '@jbrowse/core/util/tracks'
import { getContainingView } from '@jbrowse/core/util'
import { getContainingTrack, getContainingView } from '@jbrowse/core/util'
import { autorun } from 'mobx'

type LGV = LinearGenomeViewModel
Expand Down Expand Up @@ -51,17 +52,56 @@ export function modelFactory(configSchema: AnyConfigurationSchemaType) {
*/
rowHeight: 15,
}))
.views(self => ({
/**
* #getter
*/
get sequenceType() {
return getConf(getContainingTrack(self), 'sequenceType')
},

/**
* #getter
* showReverse setting, it is NOT disabled for non-dna sequences
*/
get showForwardActual() {
return self.showForward
},

/**
* #getter
* showReverse setting, is disabled for non-dna sequences
*/
get showReverseActual() {
return this.sequenceType === 'dna' ? self.showReverse : false
},

/**
* #getter
* showTranslation setting is disabled for non-dna sequences
*/
get showTranslationActual() {
return this.sequenceType === 'dna' ? self.showTranslation : false
},
}))
.views(self => ({
/**
* #getter
*/
get sequenceHeight() {
const { showTranslation, showReverse, showForward } = self
const r1 = showReverse && showTranslation ? self.rowHeight * 3 : 0
const r2 = showForward && showTranslation ? self.rowHeight * 3 : 0
const {
rowHeight,
showTranslationActual,
showReverseActual,
showForwardActual,
} = self
const r1 =
showReverseActual && showTranslationActual ? rowHeight * 3 : 0
const r2 =
showForwardActual && showTranslationActual ? rowHeight * 3 : 0
const t = r1 + r2
const r = showReverse ? self.rowHeight : 0
const s = showForward ? self.rowHeight : 0
const r = showReverseActual ? rowHeight : 0
const s = showForwardActual ? rowHeight : 0
return t + r + s
},
}))
Expand All @@ -73,21 +113,23 @@ export function modelFactory(configSchema: AnyConfigurationSchemaType) {
*/
renderProps() {
const {
showForward,
rpcDriverName,
showReverse,
showTranslation,
showForwardActual,
showReverseActual,
showTranslationActual,
rowHeight,
sequenceHeight,
sequenceType,
} = self
return {
...superRenderProps(),
...getParentRenderProps(self),
config: self.configuration.renderer,
rpcDriverName,
showForward,
showReverse,
showTranslation,
showForward: showForwardActual,
showReverse: showReverseActual,
showTranslation: showTranslationActual,
sequenceType,
rowHeight,
sequenceHeight,
}
Expand Down Expand Up @@ -148,30 +190,34 @@ export function modelFactory(configSchema: AnyConfigurationSchemaType) {
*/
trackMenuItems() {
return [
{
label: 'Show forward',
type: 'checkbox',
checked: self.showForward,
onClick: () => {
self.toggleShowForward()
},
},
{
label: 'Show reverse',
type: 'checkbox',
checked: self.showReverse,
onClick: () => {
self.toggleShowReverse()
},
},
{
label: 'Show translation',
type: 'checkbox',
checked: self.showTranslation,
onClick: () => {
self.toggleShowTranslation()
},
},
...(self.sequenceType === 'dna'
? [
{
label: 'Show forward',
type: 'checkbox',
checked: self.showForward,
onClick: () => {
self.toggleShowForward()
},
},
{
label: 'Show reverse',
type: 'checkbox',
checked: self.showReverse,
onClick: () => {
self.toggleShowReverse()
},
},
{
label: 'Show translation',
type: 'checkbox',
checked: self.showTranslation,
onClick: () => {
self.toggleShowTranslation()
},
},
]
: []),
]
},
}))
Expand Down
10 changes: 10 additions & 0 deletions plugins/sequence/src/ReferenceSequenceTrack/configSchema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,16 @@ export function createReferenceSeqTrackConfig(pluginManager: PluginManager) {
'optional track name, otherwise uses the "Reference sequence (assemblyName)"',
defaultValue: '',
},

/**
* #slot
*/
sequenceType: {
type: 'string',
description: 'either dna or pep',
defaultValue: 'dna',
},

/**
* #slot
*/
Expand Down
9 changes: 7 additions & 2 deletions plugins/wiggle/src/LinearWiggleDisplay/components/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,13 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
function TooltipContents2({ feature }, ref) {
const start = feature.get('start')
const end = feature.get('end')
const name = feature.get('refName')
const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
const refName = feature.get('refName')
const name = feature.get('name')
const loc = [
refName,
name,
start === end ? en(start) : `${en(start)}..${en(end)}`,
]
.filter(f => !!f)
.join(':')

Expand Down
Loading