@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 0.3.8

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -13,6 +13,7 @@ import { observer } from 'mobx-react'
 import React, { useEffect, useRef, useState } from 'react'
 
 import { type ApolloSessionModel } from '../session'
+import { copyToClipboard } from '../util/copyToClipboard'
 
 const SEQUENCE_WRAP_LENGTH = 60
 
@@ -27,10 +28,18 @@ type SegmentListType = 'CDS' | 'cDNA' | 'genomic' | 'protein'
 
 interface SequenceSegment {
   type: SegmentType
-  sequenceLines: string[]
+  sequence: string
   locs: { min: number; max: number }[]
 }
 
+function getSequenceLength(segments: SequenceSegment[]): number {
+  let length = 0
+  for (const segment of segments) {
+    length += segment.sequence.length
+  }
+  return length
+}
+
 function getSequenceSegments(
   segmentType: SegmentListType,
   feature: AnnotationFeature,
@@ -56,51 +65,20 @@ function getSequenceSegments(
             : loc.type
         const previousSegment = segments.at(-1)
         if (!previousSegment) {
-          const sequenceLines = splitStringIntoChunks(
-            sequence,
-            SEQUENCE_WRAP_LENGTH,
-          )
           segments.push({
             type,
-            sequenceLines,
+            sequence,
             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.sequence += sequence
           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],
+            sequence,
             locs: [{ min: loc.min, max: loc.max }],
           })
         }
@@ -112,18 +90,14 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        let sequence = getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
         if (strand === -1) {
-          sequence = revcom(sequence)
+          locSeq = revcom(locSeq)
         }
-        wholeSequence += sequence
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
-      const sequenceLines = splitStringIntoChunks(
-        wholeSequence,
-        SEQUENCE_WRAP_LENGTH,
-      )
-      segments.push({ type: 'CDS', sequenceLines, locs })
+      segments.push({ type: 'CDS', sequence: wholeSequence, locs })
       return segments
     }
     case 'protein': {
@@ -131,11 +105,11 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        let sequence = getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
         if (strand === -1) {
-          sequence = revcom(sequence)
+          locSeq = revcom(locSeq)
         }
-        wholeSequence += sequence
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
       let protein = ''
@@ -144,8 +118,7 @@ function getSequenceSegments(
         protein +=
           defaultCodonTable[codonSeq as keyof typeof defaultCodonTable] || '&'
       }
-      const sequenceLines = splitStringIntoChunks(protein, SEQUENCE_WRAP_LENGTH)
-      segments.push({ type: 'protein', sequenceLines, locs })
+      segments.push({ type: 'protein', sequence: protein, locs })
       return segments
     }
   }
@@ -275,19 +248,49 @@ export const TranscriptSequence = observer(function TranscriptSequence({
     setLocationIntervals(locIntervals)
   }
 
-  // Function to copy text to clipboard
-  const copyToClipboard = () => {
+  const onCopyClick = () => {
     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])
+    void copyToClipboard(seqDiv)
+  }
+
+  function wrapSequence(
+    sequenceSegments: SequenceSegment[],
+    sequenceWrapLength: number,
+  ): React.ReactNode[] {
+    const seqElements: React.ReactNode[] = []
+    let processedChars = 0
+    for (const [index, segment] of sequenceSegments.entries()) {
+      const lastLineLength = processedChars % sequenceWrapLength
+      const segmentLineBreak =
+        processedChars > 0 && lastLineLength === 0 ? '\n' : ''
+      processedChars += segment.sequence.length
+      const firstLine =
+        segmentLineBreak +
+        segment.sequence.slice(0, sequenceWrapLength - lastLineLength)
+      const remainingLines = splitStringIntoChunks(
+        segment.sequence.slice(firstLine.length),
+        sequenceWrapLength,
+      )
+      const printLines = [firstLine, ...remainingLines]
+
+      const span = (
+        <span
+          key={`${segment.type}-${index}`}
+          style={{
+            background: getSegmentColor(segment.type),
+            color: theme.palette.getContrastText(getSegmentColor(segment.type)),
+            whiteSpace: 'pre-line',
+          }}
+        >
+          {printLines.join('\n')}
+        </span>
+      )
+      seqElements.push(span)
+    }
+    return seqElements
   }
 
   return (
@@ -297,16 +300,21 @@ export const TranscriptSequence = observer(function TranscriptSequence({
         value={selectedOption}
         onChange={handleChangeSeqOption}
         size="small"
+        data-testid="sequenceOptionSelector"
       >
         {sequenceOptions.map((option) => (
-          <MenuItem key={option} value={option}>
+          <MenuItem
+            key={option}
+            value={option}
+            data-testid={`sequenceOption-${option}`}
+          >
             {option}
           </MenuItem>
         ))}
       </Select>
       <Button
         variant="contained"
-        onClick={copyToClipboard}
+        onClick={onCopyClick}
         style={{ marginLeft: 10 }}
         size="medium"
       >
@@ -328,29 +336,10 @@ export const TranscriptSequence = observer(function TranscriptSequence({
               : `${interval.max}-${interval.min + 1}`,
           )
           .join(';')}
-        ({feature.strand === 1 ? '+' : '-'})
+        (strand={feature.strand === 1 ? '+' : '-'};length=
+        {getSequenceLength(sequenceSegments)})
         <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>
-        ))}
+        {wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)}
       </Paper>
     </>
   )