Update

Author: cmdcolin

src/LinearMafDisplay/components/GetSequenceDialog/index.tsx

@@ -1,20 +1,29 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import { getSession } from '@jbrowse/core/util'
-import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import { fetchSequences } from '../../../util/fetchSequences'
+import { useSequences } from '../../../util/useSequences'
+
 import type { LinearMafDisplayModel } from '../../stateModel'
 
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
   textAreaInput: {
-    fontFamily: 'Courier New',
+    fontFamily: 'monospace',
     whiteSpace: 'pre',
     overflowX: 'auto',
   },
@@ -23,7 +32,7 @@ const useStyles = makeStyles()({
   },
 })
 
-const SequenceDialog = observer(function ({
+const GetSequenceDialog = observer(function ({
   onClose,
   model,
   selectionCoords,
@@ -35,37 +44,40 @@ const SequenceDialog = observer(function ({
     dragEndX: number
   }
 }) {
-  const [sequence, setSequence] = useState<string>('')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<unknown>()
-  const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
+  const [showAllLetters, setShowAllLetters] = useState(true)
   const { classes } = useStyles()
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      if (!selectionCoords) {
-        setLoading(false)
-        return
-      }
-
-      try {
-        setLoading(true)
-        setError(undefined)
-
-        setSequence(await fetchSequences({ model, selectionCoords }))
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      } finally {
-        setLoading(false)
-      }
-    })()
-  }, [model, selectionCoords])
+  const { sequence, loading, error } = useSequences({
+    model,
+    selectionCoords,
+    showAllLetters,
+  })
+  const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
 
   return (
     <Dialog open onClose={onClose} title="Subsequence Data" maxWidth="xl">
       <DialogContent>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '16px',
+          }}
+        >
+          <ToggleButtonGroup
+            value={showAllLetters}
+            exclusive
+            size="small"
+            onChange={(_event, newDisplayMode) => {
+              if (newDisplayMode !== null) {
+                setShowAllLetters(newDisplayMode)
+              }
+            }}
+          >
+            <ToggleButton value={true}>Show All Letters</ToggleButton>
+            <ToggleButton value={false}>Show Only Differences</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+
         {error ? (
           <ErrorMessage error={error} />
         ) : (
@@ -156,4 +168,4 @@ const SequenceDialog = observer(function ({
   )
 })
 
-export default SequenceDialog
+export default GetSequenceDialog

src/MafGetSequences/MafGetSequences.ts

@@ -20,15 +20,16 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       sessionId: string
       headers?: Record<string, string>
       regions: Region[]
-      bpPerPx: number
+      showAllLetters: boolean
     },
     rpcDriverClassName: string,
   ) {
     const deserializedArgs = await this.deserializeArguments(
       args,
       rpcDriverClassName,
     )
-    const { samples, regions, adapterConfig, sessionId } = deserializedArgs
+    const { samples, regions, adapterConfig, sessionId, showAllLetters } =
+      deserializedArgs
     const { dataAdapter } = await getAdapter(
       this.pluginManager,
       sessionId,
@@ -38,7 +39,8 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       throw new Error('No regions selected')
     }
 
-    // Get features from the adapter
+    console.log({ showAllLetters })
+
     const featuresObservable = (
       dataAdapter as BaseFeatureDataAdapter
     ).getFeatures(regions[0]!, deserializedArgs)
@@ -47,6 +49,7 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       features: new Map(features.map(f => [f.id(), f])),
       samples,
       regions,
+      showAllLetters,
     })
   }
 }

src/util/fastaUtils.test.ts

@@ -16,13 +16,13 @@ const mockFeature = new SimpleFeature({
     assembly1: {
       chr: 'chr1',
       start: 100,
-      data: 'ACGTACGTAC',
+      seq: 'ACGTACGTAC',
       strand: 1,
     },
     assembly2: {
       chr: 'chr2',
       start: 200,
-      data: 'AC-TTCGTAC',
+      seq: 'AC-TTCGTAC',
       strand: 1,
     },
   },
@@ -71,13 +71,13 @@ test('gap in assembly1', () => {
       assembly1: {
         chr: 'chr1',
         start: 100,
-        data: 'AC-TACGTAC',
+        seq: 'AC-TACGTAC',
         strand: 1,
       },
       assembly2: {
         chr: 'chr2',
         start: 200,
-        data: 'ACGTTCGTAC',
+        seq: 'ACGTTCGTAC',
         strand: 1,
       },
     },

src/util/fastaUtils.ts

@@ -32,12 +32,12 @@ export function processFeaturesToFasta({
   const outputRows = samples.map(() => ' '.repeat(rlen))
   for (const feature of features.values()) {
     const leftCoord = feature.get('start')
-    const vals = feature.get('alignments') as Record<string, { data: string }>
+    const vals = feature.get('alignments') as Record<string, { seq: string }>
     const seq = feature.get('seq')
     console.log({ feature, seq })
     const r = Object.entries(vals)
     for (const [sample, val] of r) {
-      const origAlignment = val.data
+      const origAlignment = val.seq
       const alignment = origAlignment
 
       const row = sampleToRowMap.get(sample)

src/util/fetchSequences.ts

@@ -1,24 +1,30 @@
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
 import type { LinearMafDisplayModel } from '../LinearMafDisplay/stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+interface SelectionCoords {
+  dragStartX: number
+  dragEndX: number
+}
 
 /**
  * Fetch sequences for the given selection coordinates
  * @param model - The LinearMafDisplayModel
  * @param selectionCoords - The selection coordinates (dragStartX and dragEndX)
+ * @param showAllLetters - Whether to show all letters or just the differences
  * @returns Promise that resolves to the FASTA sequence
  */
 export async function fetchSequences({
   model,
   selectionCoords,
+  showAllLetters,
 }: {
   model: LinearMafDisplayModel
-  selectionCoords: {
-    dragStartX: number
-    dragEndX: number
-  }
-}): Promise<string> {
+  selectionCoords: SelectionCoords
+  showAllLetters: boolean
+}) {
   const { samples, adapterConfig } = model
   const { rpcManager } = getSession(model)
   const sessionId = getRpcSessionId(model)
@@ -30,19 +36,22 @@ export async function fetchSequences({
     Math.max(dragStartX, dragEndX),
   ]
 
-  const fastaSequence = await rpcManager.call(sessionId, 'MafGetSequences', {
+  const fastaSequence = (await rpcManager.call(sessionId, 'MafGetSequences', {
     sessionId,
     adapterConfig,
     samples,
+    showAllLetters,
     regions: [
       {
         refName,
-        start: view.pxToBp(s).coord,
+        start: view.pxToBp(s).coord - 1,
         end: view.pxToBp(e).coord,
         assemblyName,
       },
     ],
-  })
+  })) as string[]
 
-  return fastaSequence as string
+  return fastaSequence
+    .map((r, idx) => `>${samples![idx]!.label}\n${r}`)
+    .join('\n')
 }

src/util/useSequences.ts

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+
+import { getContainingView, getSession } from '@jbrowse/core/util'
+import { getRpcSessionId } from '@jbrowse/core/util/tracks'
+
+import type { LinearMafDisplayModel } from '../LinearMafDisplay/stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+interface SelectionCoords {
+  dragStartX: number
+  dragEndX: number
+}
+
+interface UseSequencesOptions {
+  model: LinearMafDisplayModel
+  selectionCoords?: SelectionCoords
+  showAllLetters: boolean
+}
+
+/**
+ * React hook to fetch sequences for the given selection coordinates
+ * @param options - The options for fetching sequences
+ * @returns An object containing the sequence, loading state, and error
+ */
+export function useSequences({
+  model,
+  selectionCoords,
+  showAllLetters,
+}: UseSequencesOptions) {
+  const [sequence, setSequence] = useState<string>('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<unknown>()
+
+  useEffect(() => {
+    // If no selection coordinates, no need to fetch
+    if (!selectionCoords) {
+      return
+    }
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        setLoading(true)
+        setError(undefined)
+
+        const { samples, adapterConfig } = model
+        const { rpcManager } = getSession(model)
+        const sessionId = getRpcSessionId(model)
+        const view = getContainingView(model) as LinearGenomeViewModel
+        const { refName, assemblyName } = view.displayedRegions[0]!
+        const { dragStartX, dragEndX } = selectionCoords
+        const [s, e] = [
+          Math.min(dragStartX, dragEndX),
+          Math.max(dragStartX, dragEndX),
+        ]
+
+        const fastaSequence = (await rpcManager.call(
+          sessionId,
+          'MafGetSequences',
+          {
+            sessionId,
+            adapterConfig,
+            samples,
+            showAllLetters,
+            regions: [
+              {
+                refName,
+                start: view.pxToBp(s).coord - 1,
+                end: view.pxToBp(e).coord,
+                assemblyName,
+              },
+            ],
+          },
+        )) as string[]
+
+        const formattedSequence = fastaSequence
+          .map((r, idx) => `>${samples![idx]!.label}\n${r}`)
+          .join('\n')
+
+        setSequence(formattedSequence)
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [model, selectionCoords, showAllLetters])
+
+  return { sequence, loading, error }
+}