Allow setting sequenceType='pep' in ReferenceSequenceTrack configurat…

…ion (#4533)

plugins/sequence/src/DivSequenceRenderer/components/DivSequenceRendering.tsx

@@ -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: */
@@ -183,6 +191,7 @@ function SequenceSVG({
   showReverse = true,
   showForward = true,
   showTranslation = true,
+  sequenceType = 'dna',
   bpPerPx,
   rowHeight,
 }: {
@@ -193,6 +202,7 @@ function SequenceSVG({
   showReverse?: boolean
   showForward?: boolean
   showTranslation?: boolean
+  sequenceType?: string
   bpPerPx: number
   rowHeight: number
 }) {
@@ -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[] =
@@ -241,9 +251,10 @@ function SequenceSVG({
         />
       ))}
 
-      {showForward && showDNA ? (
-        <DNA
+      {showForward && showSequence ? (
+        <Sequence
           height={rowHeight}
+          sequenceType={sequenceType}
           y={(currY += rowHeight)}
           feature={feature}
           region={region}
@@ -253,9 +264,10 @@ function SequenceSVG({
         />
       ) : null}
 
-      {showReverse && showDNA ? (
-        <DNA
+      {showReverse && showSequence ? (
+        <Sequence
           height={rowHeight}
+          sequenceType={sequenceType}
           y={(currY += rowHeight)}
           feature={feature}
           region={region}

plugins/sequence/src/LinearReferenceSequenceDisplay/model.ts

@@ -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
@@ -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
       },
     }))
@@ -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,
           }
@@ -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()
+                  },
+                },
+              ]
+            : []),
         ]
       },
     }))

plugins/sequence/src/ReferenceSequenceTrack/configSchema.ts

@@ -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
        */

plugins/wiggle/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -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(':')