@apollo-annotation/jbrowse-plugin-apollo 0.1.21 → 0.2.1

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -1,131 +1,149 @@
-import { AnnotationFeature, ApolloRefSeqI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
 import { revcom } from '@jbrowse/core/util'
 import {
   Button,
   MenuItem,
+  Paper,
   Select,
   SelectChangeEvent,
   Typography,
+  useTheme,
 } from '@mui/material'
 import { observer } from 'mobx-react'
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 
 import { ApolloSessionModel } from '../session'
 
-export interface CDSInfo {
-  id: string
-  type: string
-  strand: number
-  min: number
-  oldMin: number
-  max: number
-  oldMax: number
-  startSeq: string
-  endSeq: string
+const SEQUENCE_WRAP_LENGTH = 60
+
+type SegmentType = 'upOrDownstream' | 'UTR' | 'CDS' | 'intron' | 'protein'
+type SegmentListType = 'CDS' | 'cDNA' | 'genomic'
+
+interface SequenceSegment {
+  type: SegmentType
+  sequenceLines: string[]
+  locs: { min: number; max: number }[]
 }
 
-const getCDSInfo = (
+function getSequenceSegments(
+  segmentType: SegmentListType,
   feature: AnnotationFeature,
-  refData: ApolloRefSeqI,
-): CDSInfo[] => {
-  const CDSresult: CDSInfo[] = []
-  const traverse = (
-    currentFeature: AnnotationFeature,
-    isParentMRNA: boolean,
-  ) => {
-    if (
-      isParentMRNA &&
-      (currentFeature.type === 'CDS' ||
-        currentFeature.type === 'three_prime_UTR' ||
-        currentFeature.type === 'five_prime_UTR')
-    ) {
-      let startSeq = refData.getSequence(
-        Number(currentFeature.min) - 2,
-        Number(currentFeature.min),
-      )
-      let endSeq = refData.getSequence(
-        Number(currentFeature.max),
-        Number(currentFeature.max) + 2,
-      )
-
-      if (currentFeature.strand === -1 && startSeq && endSeq) {
-        startSeq = revcom(startSeq)
-        endSeq = revcom(endSeq)
-      }
-      const oneCDS: CDSInfo = {
-        id: currentFeature._id,
-        type: currentFeature.type,
-        strand: Number(currentFeature.strand),
-        min: currentFeature.min + 1,
-        max: currentFeature.max + 1,
-        oldMin: currentFeature.min + 1,
-        oldMax: currentFeature.max + 1,
-        startSeq: startSeq || '',
-        endSeq: endSeq || '',
+  getSequence: (min: number, max: number) => string,
+) {
+  const segments: SequenceSegment[] = []
+  const { cdsLocations, strand, transcriptParts } = feature
+  switch (segmentType) {
+    case 'genomic':
+    case 'cDNA': {
+      const [firstLocation] = transcriptParts
+      for (const loc of firstLocation) {
+        if (segmentType === 'cDNA' && loc.type === 'intron') {
+          continue
+        }
+        let sequence = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          sequence = revcom(sequence)
+        }
+        const type: SegmentType =
+          loc.type === 'fivePrimeUTR' || loc.type === 'threePrimeUTR'
+            ? 'UTR'
+            : loc.type
+        const previousSegment = segments.at(-1)
+        if (!previousSegment) {
+          const sequenceLines = splitStringIntoChunks(
+            sequence,
+            SEQUENCE_WRAP_LENGTH,
+          )
+          segments.push({
+            type,
+            sequenceLines,
+            locs: [{ min: loc.min, max: loc.max }],
+          })
+          continue
+        }
+        if (previousSegment.type === type) {
+          const [previousSegmentFirstLine, ...previousSegmentFollowingLines] =
+            previousSegment.sequenceLines
+          const newSequence = previousSegmentFollowingLines.join('') + sequence
+          previousSegment.sequenceLines = [
+            previousSegmentFirstLine,
+            ...splitStringIntoChunks(newSequence, SEQUENCE_WRAP_LENGTH),
+          ]
+          previousSegment.locs.push({ min: loc.min, max: loc.max })
+        } else {
+          const count = segments.reduce(
+            (accumulator, currentSegment) =>
+              accumulator +
+              currentSegment.sequenceLines.reduce(
+                (subAccumulator, currentLine) =>
+                  subAccumulator + currentLine.length,
+                0,
+              ),
+            0,
+          )
+          const previousLineLength = count % SEQUENCE_WRAP_LENGTH
+          const newSegmentFirstLineLength =
+            SEQUENCE_WRAP_LENGTH - previousLineLength
+          const newSegmentFirstLine = sequence.slice(
+            0,
+            newSegmentFirstLineLength,
+          )
+          const newSegmentRemainderLines = splitStringIntoChunks(
+            sequence.slice(newSegmentFirstLineLength),
+            SEQUENCE_WRAP_LENGTH,
+          )
+          segments.push({
+            type,
+            sequenceLines: [newSegmentFirstLine, ...newSegmentRemainderLines],
+            locs: [{ min: loc.min, max: loc.max }],
+          })
+        }
       }
-      CDSresult.push(oneCDS)
+      return segments
     }
-    if (currentFeature.children) {
-      for (const child of currentFeature.children) {
-        traverse(child[1], feature.type === 'mRNA')
+    case 'CDS': {
+      let wholeSequence = ''
+      const [firstLocation] = cdsLocations
+      const locs: { min: number; max: number }[] = []
+      for (const loc of firstLocation) {
+        let sequence = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          sequence = revcom(sequence)
+        }
+        wholeSequence += sequence
+        locs.push({ min: loc.min, max: loc.max })
       }
+      const sequenceLines = splitStringIntoChunks(
+        wholeSequence,
+        SEQUENCE_WRAP_LENGTH,
+      )
+      segments.push({ type: 'CDS', sequenceLines, locs })
+      return segments
     }
   }
-  traverse(feature, feature.type === 'mRNA')
-  CDSresult.sort((a, b) => {
-    return Number(a.min) - Number(b.min)
-  })
-  if (CDSresult.length > 0) {
-    CDSresult[0].startSeq = ''
-
-    // eslint-disable-next-line unicorn/prefer-at
-    CDSresult[CDSresult.length - 1].endSeq = ''
+}
 
-    // Loop through the array and clear "startSeq" or "endSeq" based on the conditions
-    for (let i = 0; i < CDSresult.length; i++) {
-      if (i > 0 && CDSresult[i].min === CDSresult[i - 1].max) {
-        // Clear "startSeq" if the current item's "start" is equal to the previous item's "end"
-        CDSresult[i].startSeq = ''
-      }
-      if (
-        i < CDSresult.length - 1 &&
-        CDSresult[i].max === CDSresult[i + 1].min
-      ) {
-        // Clear "endSeq" if the next item's "start" is equal to the current item's "end"
-        CDSresult[i].endSeq = ''
-      }
+function getSegmentColor(type: SegmentType) {
+  switch (type) {
+    case 'upOrDownstream': {
+      return 'rgb(255,255,255)'
+    }
+    case 'UTR': {
+      return 'rgb(194,106,119)'
+    }
+    case 'CDS': {
+      return 'rgb(93,168,153)'
+    }
+    case 'intron': {
+      return 'rgb(187,187,187)'
+    }
+    case 'protein': {
+      return 'rgb(148,203,236)'
     }
   }
-  return CDSresult
-}
-
-interface Props {
-  textSegments: { text: string; color: string }[]
 }
 
-function formatSequence(
-  seq: string,
-  refName: string,
-  start: number,
-  end: number,
-  wrap?: number,
-) {
-  const header = `>${refName}:${start + 1}–${end}\n`
-  const body =
-    wrap === undefined ? seq : splitStringIntoChunks(seq, wrap).join('\n')
-  return `${header}${body}`
-}
-
-export const intronColor = 'rgb(120,120,120)' // Slightly brighter gray
-export const utrColor = 'rgb(20,200,200)' // Slightly brighter cyan
-export const proteinColor = 'rgb(220,70,220)' // Slightly brighter magenta
-export const cdsColor = 'rgb(240,200,20)' // Slightly brighter yellow
-export const updownstreamColor = 'rgb(255,130,130)' // Slightly brighter red
-export const genomeColor = 'rgb(20,230,20)' // Slightly brighter green
-
-let textSegments = [{ text: '', color: '' }]
-
 export const TranscriptSequence = observer(function TranscriptSequence({
   assembly,
   feature,
@@ -140,7 +158,9 @@ export const TranscriptSequence = observer(function TranscriptSequence({
   const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
   const refData = currentAssembly?.getByRefName(refName)
   const [showSequence, setShowSequence] = useState(false)
-  const [selectedOption, setSelectedOption] = useState('Select')
+  const [selectedOption, setSelectedOption] = useState<SegmentListType>('CDS')
+  const theme = useTheme()
+  const seqRef = useRef<HTMLDivElement>(null)
 
   if (!(currentAssembly && refData)) {
     return null
@@ -149,215 +169,120 @@ export const TranscriptSequence = observer(function TranscriptSequence({
   if (!refSeq) {
     return null
   }
-  const transcriptItems = getCDSInfo(feature, refData)
-  const { max, min } = feature
-  let sequence = ''
-  if (showSequence) {
-    getSequenceAsString(min, max)
-  }
-
-  function getSequenceAsString(start: number, end: number): string {
-    sequence = refSeq?.getSequence(start, end) ?? ''
-    if (sequence === '') {
-      void session.apolloDataStore.loadRefSeq([
-        { assemblyName: assembly, refName, start, end },
-      ])
-    } else {
-      sequence = formatSequence(sequence, refName, start, end)
-    }
-    getSequenceAsTextSegment(selectedOption) // For color coded sequence
-    return sequence
+  if (feature.type !== 'mRNA') {
+    return null
   }
 
   const handleSeqButtonClick = () => {
     setShowSequence(!showSequence)
   }
 
-  function getSequenceAsTextSegment(option: string) {
-    let seqData = ''
-    textSegments = []
-    if (!refData) {
-      return
-    }
-    switch (option) {
-      case 'CDS': {
-        textSegments.push({ text: `>${refName} : CDS\n`, color: 'black' })
-        for (const item of transcriptItems) {
-          if (item.type === 'CDS') {
-            const refSeq: string = refData.getSequence(
-              Number(item.min + 1),
-              Number(item.max),
-            )
-            seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq
-            textSegments.push({ text: seqData, color: cdsColor })
-          }
-        }
-        break
-      }
-      case 'cDNA': {
-        textSegments.push({ text: `>${refName} : cDNA\n`, color: 'black' })
-        for (const item of transcriptItems) {
-          if (
-            item.type === 'CDS' ||
-            item.type === 'three_prime_UTR' ||
-            item.type === 'five_prime_UTR'
-          ) {
-            const refSeq: string = refData.getSequence(
-              Number(item.min + 1),
-              Number(item.max),
-            )
-            seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq
-            if (item.type === 'CDS') {
-              textSegments.push({ text: seqData, color: cdsColor })
-            } else {
-              textSegments.push({ text: seqData, color: utrColor })
-            }
-          }
-        }
-        break
-      }
-      case 'Full': {
-        textSegments.push({
-          text: `>${refName} : Full genomic\n`,
-          color: 'black',
-        })
-        let lastEnd = 0
-        let count = 0
-        for (const item of transcriptItems) {
-          count++
-          if (
-            lastEnd != 0 &&
-            lastEnd != Number(item.min) &&
-            count != transcriptItems.length
-          ) {
-            // Intron etc. between CDS/UTRs. No need to check this on very last item
-            const refSeq: string = refData.getSequence(
-              lastEnd + 1,
-              Number(item.min) - 1,
-            )
-            seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq
-            textSegments.push({ text: seqData, color: 'black' })
-          }
-          if (
-            item.type === 'CDS' ||
-            item.type === 'three_prime_UTR' ||
-            item.type === 'five_prime_UTR'
-          ) {
-            const refSeq: string = refData.getSequence(
-              Number(item.min + 1),
-              Number(item.max),
-            )
-            seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq
-            switch (item.type) {
-              case 'CDS': {
-                textSegments.push({ text: seqData, color: cdsColor })
-                break
-              }
-              case 'three_prime_UTR': {
-                textSegments.push({ text: seqData, color: utrColor })
-                break
-              }
-              case 'five_prime_UTR': {
-                textSegments.push({ text: seqData, color: utrColor })
-                break
-              }
-              default: {
-                textSegments.push({ text: seqData, color: 'black' })
-                break
-              }
-            }
-          }
-          lastEnd = Number(item.max)
-        }
-        break
-      }
-    }
-  }
-
   function handleChangeSeqOption(e: SelectChangeEvent) {
     const option = e.target.value
-    setSelectedOption(option)
-    getSequenceAsTextSegment(option)
+    setSelectedOption(option as SegmentListType)
   }
 
   // Function to copy text to clipboard
   const copyToClipboard = () => {
-    const textToCopy = textSegments.map((segment) => segment.text).join('')
-
-    if (textToCopy) {
-      navigator.clipboard
-        .writeText(textToCopy)
-        .then(() => {
-          // console.log('Text copied to clipboard!')
-        })
-        .catch((error: unknown) => {
-          console.error('Failed to copy text to clipboard', error)
-        })
+    const seqDiv = seqRef.current
+    if (!seqDiv) {
+      return
     }
+    const textBlob = new Blob([seqDiv.outerText], { type: 'text/plain' })
+    const htmlBlob = new Blob([seqDiv.outerHTML], { type: 'text/html' })
+    const clipboardItem = new ClipboardItem({
+      [textBlob.type]: textBlob,
+      [htmlBlob.type]: htmlBlob,
+    })
+    void navigator.clipboard.write([clipboardItem])
   }
 
-  const ColoredText: React.FC<Props> = ({ textSegments }) => {
-    return (
-      <div>
-        {textSegments.map((segment, index) => (
-          <span key={index} style={{ color: segment.color }}>
-            {splitStringIntoChunks(segment.text, 150).join('\n')}
-          </span>
-        ))}
-      </div>
-    )
+  const sequenceSegments = showSequence
+    ? getSequenceSegments(selectedOption, feature, (min: number, max: number) =>
+        refData.getSequence(min, max),
+      )
+    : []
+  const locationIntervals: { min: number; max: number }[] = []
+  if (showSequence) {
+    const allLocs = sequenceSegments.flatMap((segment) => segment.locs)
+    let [previous] = allLocs
+    for (let i = 1; i < allLocs.length; i++) {
+      if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
+        previous = {
+          min: Math.min(previous.min, allLocs[i].min),
+          max: Math.max(previous.max, allLocs[i].max),
+        }
+      } else {
+        locationIntervals.push(previous)
+        previous = allLocs[i]
+      }
+    }
+    locationIntervals.push(previous)
   }
 
   return (
     <>
-      <Typography
-        style={{ display: 'inline', marginLeft: '15px' }}
-        variant="h5"
-      >
-        Sequence
-      </Typography>
+      <Typography variant="h5">Sequence</Typography>
       <div>
-        <Button
-          variant="contained"
-          style={{ marginLeft: '15px' }}
-          onClick={handleSeqButtonClick}
-        >
+        <Button variant="contained" onClick={handleSeqButtonClick}>
           {showSequence ? 'Hide sequence' : 'Show sequence'}
         </Button>
       </div>
-      <div>
-        {showSequence && (
+      {showSequence && (
+        <>
           <Select
+            defaultValue="CDS"
             value={selectedOption}
             onChange={handleChangeSeqOption}
-            style={{ width: '150px', marginLeft: '15px', height: '25px' }}
           >
-            <MenuItem value={'Select'}>Select</MenuItem>
-            <MenuItem value={'CDS'}>CDS</MenuItem>
-            <MenuItem value={'cDNA'}>cDNA</MenuItem>
-            <MenuItem value={'Full'}>Full genomics</MenuItem>
+            <MenuItem value="CDS">CDS</MenuItem>
+            <MenuItem value="cDNA">cDNA</MenuItem>
+            <MenuItem value="genomic">Genomic</MenuItem>
           </Select>
-        )}
-      </div>
-      <div
-        style={{
-          width: '500px',
-          marginLeft: '15px',
-          height: '300px',
-          overflowY: 'auto',
-          border: '1px solid #ccc',
-        }}
-      >
-        {showSequence && <ColoredText textSegments={textSegments} />}
-      </div>
-      {showSequence && (
-        <Button
-          variant="contained"
-          style={{ marginLeft: '15px' }}
-          onClick={copyToClipboard}
-        >
-          Copy sequence
-        </Button>
+          <Paper
+            style={{
+              fontFamily: 'monospace',
+              padding: theme.spacing(),
+              overflowX: 'auto',
+            }}
+            ref={seqRef}
+          >
+            &gt;{refSeq.name}:
+            {locationIntervals
+              .map((interval) =>
+                feature.strand === 1
+                  ? `${interval.min + 1}-${interval.max}`
+                  : `${interval.max}-${interval.min + 1}`,
+              )
+              .join(';')}
+            ({feature.strand === 1 ? '+' : '-'})
+            <br />
+            {sequenceSegments.map((segment, index) => (
+              <span
+                key={`${segment.type}-${index}`}
+                style={{
+                  background: getSegmentColor(segment.type),
+                  color: theme.palette.getContrastText(
+                    getSegmentColor(segment.type),
+                  ),
+                }}
+              >
+                {segment.sequenceLines.map((sequenceLine, idx) => (
+                  <React.Fragment key={`${sequenceLine.slice(0, 5)}-${idx}`}>
+                    {sequenceLine}
+                    {idx === segment.sequenceLines.length - 1 &&
+                    sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (
+                      <br />
+                    )}
+                  </React.Fragment>
+                ))}
+              </span>
+            ))}
+          </Paper>
+          <Button variant="contained" onClick={copyToClipboard}>
+            Copy sequence
+          </Button>
+        </>
       )}
     </>
   )

package/src/FeatureDetailsWidget/model.ts

@@ -65,10 +65,10 @@ export const ApolloFeatureDetailsWidgetModel = types
 
 // eslint disables because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ApolloFeatureDetailsWidget
   extends Instance<typeof ApolloFeatureDetailsWidgetModel> {}
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ApolloFeatureDetailsWidgetSnapshot
   extends SnapshotIn<typeof ApolloFeatureDetailsWidgetModel> {}
 
@@ -126,9 +126,9 @@ export const ApolloTranscriptDetailsModel = types
 
 // eslint disables because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ApolloTranscriptDetailsWidget
   extends Instance<typeof ApolloTranscriptDetailsModel> {}
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ApolloTranscriptDetailsWidgetSnapshot
   extends SnapshotIn<typeof ApolloTranscriptDetailsModel> {}

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -2,7 +2,11 @@ import { AnnotationFeature } from '@apollo-annotation/mst'
 import { Theme, alpha } from '@mui/material'
 import { MenuItem } from '@jbrowse/core/ui'
 
-import { AbstractSessionModel, SessionWithWidgets } from '@jbrowse/core/util'
+import {
+  AbstractSessionModel,
+  isSessionModelWithWidgets,
+  SessionWithWidgets,
+} from '@jbrowse/core/util'
 
 import {
   AddChildFeature,
@@ -175,7 +179,7 @@ function drawTooltip(
   if (!position) {
     return
   }
-  const { layoutIndex, layoutRow } = position
+  const { featureRow, layoutIndex, layoutRow } = position
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[layoutIndex]
   const { refName, reversed } = displayedRegion
@@ -191,7 +195,7 @@ function drawTooltip(
       coord: reversed ? max : min,
       regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx
-  const top = layoutRow * apolloRowHeight
+  const top = (layoutRow + featureRow) * apolloRowHeight
   const widthPx = length / bpPerPx
 
   const featureType = `Type: ${feature.type}`
@@ -385,6 +389,24 @@ function getContextMenuItems(
       },
     },
   )
+  if (sourceFeature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+    menuItems.push({
+      label: 'Edit transcript details',
+      onClick: () => {
+        const apolloTranscriptWidget = session.addWidget(
+          'ApolloTranscriptDetails',
+          'apolloTranscriptDetails',
+          {
+            feature: sourceFeature,
+            assembly: currentAssemblyId,
+            changeManager,
+            refName: region.refName,
+          },
+        )
+        session.showWidget(apolloTranscriptWidget)
+      },
+    })
+  }
   return menuItems
 }