@apollo-annotation/jbrowse-plugin-apollo 0.3.7 → 0.3.9

package/src/ChangeManager.ts

@@ -30,6 +30,7 @@ export class ChangeManager {
   constructor(private dataStore: ClientDataStore & IAnyStateTreeNode) {}
 
   recentChanges: Change[] = []
+  undoneChanges: Change[] = []
 
   async submit(change: Change, opts: SubmitOpts = {}) {
     const {
@@ -41,10 +42,15 @@ export class ChangeManager {
     const session = getSession(this.dataStore)
     const controller = new AbortController()
 
-    const { jobsManager } = getSession(
+    const { jobsManager, isLocked } = getSession(
       this.dataStore,
     ) as unknown as ApolloSessionModel
 
+    if (isLocked) {
+      session.notify('Cannot submit changes in locked mode')
+      return
+    }
+
     const job = {
       name: change.typeName,
       statusMessage: 'Pre-validating',
@@ -90,7 +96,7 @@ export class ChangeManager {
     )
     if (!results2.ok) {
       // notify of invalid change and revert
-      await this.revert(change)
+      await this.undo(change)
     }
 
     if (submitToBackend) {
@@ -100,7 +106,9 @@ export class ChangeManager {
       // submit to driver
       const { collaborationServerDriver, getBackendDriver } = this.dataStore
       const backendDriver = isAssemblySpecificChange(change)
-        ? getBackendDriver(change.assembly)
+        ? // for assembly-specific change, fall back in case it's an
+          // add-assembly change, since that won't exist in the driver yet
+          getBackendDriver(change.assembly) ?? collaborationServerDriver
         : collaborationServerDriver
       let backendResult: ValidationResultSet
       try {
@@ -111,7 +119,7 @@ export class ChangeManager {
         }
         console.error(error)
         session.notify(String(error), 'error')
-        await this.revert(change, false)
+        await this.undo(change, false)
         return
       }
       if (!backendResult.ok) {
@@ -120,15 +128,15 @@ export class ChangeManager {
           jobsManager.abortJob(job.name, msg)
         }
         session.notify(msg, 'error')
-        await this.revert(change, false)
+        await this.undo(change, false)
         return
       }
       if (change.notification) {
         session.notify(change.notification, 'success')
       }
       if (addToRecents) {
-        // Push the change into array
         this.recentChanges.push(change)
+        this.undoneChanges = []
       }
     }
 
@@ -137,22 +145,36 @@ export class ChangeManager {
     }
   }
 
-  async revert(change: Change, submitToBackend = true) {
+  async undo(change: Change, submitToBackend = true) {
     const inverseChange = change.getInverse()
     const opts = { submitToBackend, addToRecents: false }
     return this.submit(inverseChange, opts)
   }
 
-  /**
-   * Undo the last change
-   */
-  async revertLastChange() {
+  async redo(change: Change, submitToBackend = true) {
+    const opts = { submitToBackend, addToRecents: false }
+    return this.submit(change, opts)
+  }
+
+  async undoLastChange() {
+    const session = getSession(this.dataStore)
     const lastChange = this.recentChanges.pop()
     if (!lastChange) {
-      const session = getSession(this.dataStore)
-      session.notify('No changes to undo!', 'warning')
+      session.notify('No changes to undo!', 'info')
+      return
+    }
+    this.undoneChanges.push(lastChange)
+    return this.undo(lastChange)
+  }
+
+  async redoLastChange() {
+    const session = getSession(this.dataStore)
+    const lastChange = this.undoneChanges.pop()
+    if (!lastChange) {
+      session.notify('No changes to redo!', 'info')
       return
     }
-    return this.revert(lastChange)
+    this.recentChanges.push(lastChange)
+    return this.redo(lastChange)
   }
 }

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -58,7 +58,7 @@ export const ApolloTranscriptDetailsWidget = observer(
     model: ApolloTranscriptDetailsWidgetState
   }) {
     const { classes } = useStyles()
-    const DEFAULT_PANELS = ['summary', 'location', 'attrs']
+    const DEFAULT_PANELS = ['summary', 'location']
     const [panelState, setPanelState] = useState<string[]>(DEFAULT_PANELS)
 
     const { model } = props
@@ -106,10 +106,53 @@ export const ApolloTranscriptDetailsWidget = observer(
       }
     }
 
-    const CustomComponent = pluginManager.evaluateExtensionPoint(
-      'Apollo-TranscriptDetailsCustomComponent',
+    const CustomComponentInsideSummary = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideSummary',
       NoOpCustomComponent,
-      props,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterSummary = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterSummary',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideLocation = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideLocation',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterLocation = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterLocation',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideAttributes =
+      pluginManager.evaluateExtensionPoint(
+        'Apollo-TranscriptDetailsCustomComponent-InsideAttributes',
+        NoOpCustomComponent,
+        { feature, session },
+      ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterAttributes = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterAttributes',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideSequence = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideSequence',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterSequence = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterSequence',
+      NoOpCustomComponent,
+      { feature, session },
     ) as React.ElementType<CustomComponentProps>
 
     return (
@@ -131,9 +174,10 @@ export const ApolloTranscriptDetailsWidget = observer(
           </StyledAccordionSummary>
           <AccordionDetails>
             <TranscriptWidgetSummary feature={feature} refName={refName} />
+            <CustomComponentInsideSummary session={session} feature={feature} />
           </AccordionDetails>
         </Accordion>
-        <CustomComponent session={session} feature={feature} />
+        <CustomComponentAfterSummary session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('location')}
@@ -157,8 +201,13 @@ export const ApolloTranscriptDetailsWidget = observer(
               session={apolloSession}
               assembly={currentAssembly._id || ''}
             />
+            <CustomComponentInsideLocation
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterLocation session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('attrs')}
@@ -189,8 +238,13 @@ export const ApolloTranscriptDetailsWidget = observer(
               assembly={currentAssembly._id || ''}
               editable={editable}
             />
+            <CustomComponentInsideAttributes
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterAttributes session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('sequence')}
@@ -216,8 +270,13 @@ export const ApolloTranscriptDetailsWidget = observer(
                 refName={refName}
               />
             )}
+            <CustomComponentInsideSequence
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterSequence feature={feature} session={session} />
       </div>
     )
   },

package/src/FeatureDetailsWidget/BasicInformation.tsx

@@ -66,7 +66,7 @@ export const BasicInformation = observer(function BasicInformation({
     return changeManager.submit(change)
   }
 
-  function handleStartChange(newStart: number) {
+  function handleStartChange(newStart: number): boolean {
     newStart--
     const change = new LocationStartChange({
       typeName: 'LocationStartChange',
@@ -76,10 +76,11 @@ export const BasicInformation = observer(function BasicInformation({
       newStart,
       assembly,
     })
-    return changeManager.submit(change)
+    void changeManager.submit(change)
+    return true
   }
 
-  function handleEndChange(newEnd: number) {
+  function handleEndChange(newEnd: number): boolean {
     const change = new LocationEndChange({
       typeName: 'LocationEndChange',
       changedIds: [_id],
@@ -88,7 +89,8 @@ export const BasicInformation = observer(function BasicInformation({
       newEnd,
       assembly,
     })
-    return changeManager.submit(change)
+    void changeManager.submit(change)
+    return true
   }
 
   async function fetchValidTerms(

package/src/FeatureDetailsWidget/NumberTextField.tsx

@@ -15,7 +15,7 @@ interface NumberTextFieldProps
     | 'error'
     | 'helperText'
   > {
-  onChangeCommitted(newValue: number): void
+  onChangeCommitted(newValue: number): boolean
   value: unknown
 }
 
@@ -65,7 +65,10 @@ export const NumberTextField = observer(function NumberTextField({
           if (Number.isNaN(valueAsNumber)) {
             setValue(String(initialValue))
           } else {
-            onChangeCommitted(valueAsNumber)
+            const success = onChangeCommitted(valueAsNumber)
+            if (!success) {
+              setValue(String(initialValue))
+            }
           }
         }
       }}

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -28,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,
@@ -57,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 }],
           })
         }
@@ -113,17 +90,14 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        wholeSequence += getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          locSeq = revcom(locSeq)
+        }
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
-      if (strand === -1) {
-        wholeSequence = revcom(wholeSequence)
-      }
-      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,20 +105,20 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        wholeSequence += getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          locSeq = revcom(locSeq)
+        }
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
-      if (strand === -1) {
-        wholeSequence = revcom(wholeSequence)
-      }
       let protein = ''
       for (let i = 0; i < wholeSequence.length; i += 3) {
         const codonSeq: string = wholeSequence.slice(i, i + 3).toUpperCase()
         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
     }
   }
@@ -282,6 +256,43 @@ export const TranscriptSequence = observer(function TranscriptSequence({
     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 (
     <>
       <Select
@@ -289,9 +300,14 @@ 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>
         ))}
@@ -320,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>
     </>
   )