@jbrowse/plugin-linear-genome-view 2.3.1 → 2.3.3

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -1,6 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
-import { types, getParent, isAlive, cast, Instance } from 'mobx-state-tree'
+import {
+  types,
+  getParent,
+  isAlive,
+  cast,
+  Instance,
+  getSnapshot,
+} from 'mobx-state-tree'
 import { readConfObject } from '@jbrowse/core/configuration'
 import {
   assembleLocString,
@@ -238,7 +245,7 @@ export function renderBlockData(
           }
         },
         assemblyName: self.region.assemblyName,
-        regions: [self.region],
+        regions: [getSnapshot(self.region)],
         adapterConfig,
         rendererType: rendererType.name,
         sessionId,

package/src/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -2,10 +2,13 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import {
   Button,
+  Checkbox,
   CircularProgress,
   Container,
   DialogActions,
   DialogContent,
+  FormGroup,
+  FormControlLabel,
   TextField,
   Typography,
 } from '@mui/material'
@@ -14,7 +17,13 @@ import { saveAs } from 'file-saver'
 import { getConf } from '@jbrowse/core/configuration'
 import copy from 'copy-to-clipboard'
 import { Dialog } from '@jbrowse/core/ui'
-import { getSession, Feature, Region } from '@jbrowse/core/util'
+import {
+  getSession,
+  reverse,
+  complement,
+  Feature,
+  Region,
+} from '@jbrowse/core/util'
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
 
 // icons
@@ -80,9 +89,12 @@ function SequenceDialog({
   const { classes } = useStyles()
   const session = getSession(model)
   const [error, setError] = useState<unknown>()
-  const [sequence, setSequence] = useState<string>()
-  const loading = Boolean(sequence === undefined)
+  const [sequenceChunks, setSequenceChunks] = useState<Feature[]>()
+  const [rev, setReverse] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [comp, setComplement] = useState(false)
   const { leftOffset, rightOffset } = model
+  const loading = Boolean(sequenceChunks === undefined)
 
   // avoid infinite looping of useEffect
   // random note: the current selected region can't be a computed because it
@@ -106,27 +118,7 @@ function SequenceDialog({
             controller.signal,
           )
           if (active) {
-            setSequence(
-              formatSeqFasta(
-                chunks
-                  .filter(f => !!f)
-                  .map(chunk => {
-                    const chunkSeq = chunk.get('seq')
-                    const chunkRefName = chunk.get('refName')
-                    const chunkStart = chunk.get('start') + 1
-                    const chunkEnd = chunk.get('end')
-                    const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
-                    if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
-                      throw new Error(
-                        `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
-                          chunkEnd - chunkStart
-                        ).toLocaleString()}`,
-                      )
-                    }
-                    return { header: chunkLocstring, seq: chunkSeq }
-                  }),
-              ),
-            )
+            setSequenceChunks(chunks)
           }
         } else {
           throw new Error('Selected region is out of bounds')
@@ -143,7 +135,36 @@ function SequenceDialog({
       controller.abort()
       active = false
     }
-  }, [model, session, regionsSelected, setSequence])
+  }, [model, session, regionsSelected])
+
+  const sequence = sequenceChunks
+    ? formatSeqFasta(
+        sequenceChunks
+          .filter(f => !!f)
+          .map(chunk => {
+            let chunkSeq = chunk.get('seq')
+            const chunkRefName = chunk.get('refName')
+            const chunkStart = chunk.get('start') + 1
+            const chunkEnd = chunk.get('end')
+            const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
+            if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
+              throw new Error(
+                `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
+                  chunkEnd - chunkStart
+                ).toLocaleString()}`,
+              )
+            }
+
+            if (rev) {
+              chunkSeq = reverse(chunkSeq)
+            }
+            if (comp) {
+              chunkSeq = complement(chunkSeq)
+            }
+            return { header: chunkLocstring, seq: chunkSeq }
+          }),
+      )
+    : ''
 
   const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
 
@@ -158,14 +179,13 @@ function SequenceDialog({
       title="Reference sequence"
     >
       <DialogContent>
-        {error ? <Typography color="error">{`${error}`}</Typography> : null}
-        {loading && !error ? (
+        {error ? (
+          <Typography color="error">{`${error}`}</Typography>
+        ) : loading ? (
           <Container>
             Retrieving reference sequence...
             <CircularProgress
-              style={{
-                marginLeft: 10,
-              }}
+              style={{ marginLeft: 10 }}
               size={20}
               disableShrink
             />
@@ -176,6 +196,7 @@ function SequenceDialog({
           variant="outlined"
           multiline
           minRows={5}
+          maxRows={10}
           disabled={sequenceTooLarge}
           className={classes.dialogContent}
           fullWidth
@@ -191,25 +212,51 @@ function SequenceDialog({
             },
           }}
         />
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                value={rev}
+                onChange={event => setReverse(event.target.checked)}
+              />
+            }
+            label="Reverse sequence"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                value={comp}
+                onChange={event => setComplement(event.target.checked)}
+              />
+            }
+            label="Complement sequence"
+          />
+        </FormGroup>
+        <Typography style={{ margin: 10 }}>
+          Note: Check both boxes for the "reverse complement"
+        </Typography>
       </DialogContent>
       <DialogActions>
         <Button
           onClick={() => {
-            copy(sequence || '')
-            session.notify('Copied to clipboard', 'success')
+            copy(sequence)
+            setCopied(true)
+            setTimeout(() => setCopied(false), 500)
           }}
           disabled={loading || !!error || sequenceTooLarge}
           color="primary"
           startIcon={<ContentCopyIcon />}
         >
-          Copy to clipboard
+          {copied ? 'Copied' : 'Copy to clipboard'}
         </Button>
         <Button
           onClick={() => {
-            const seqFastaFile = new Blob([sequence || ''], {
-              type: 'text/x-fasta;charset=utf-8',
-            })
-            saveAs(seqFastaFile, 'jbrowse_ref_seq.fa')
+            saveAs(
+              new Blob([sequence || ''], {
+                type: 'text/x-fasta;charset=utf-8',
+              }),
+              'jbrowse_ref_seq.fa',
+            )
           }}
           disabled={loading || !!error}
           color="primary"

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -149,7 +149,7 @@ function RefNameAutocomplete({
   // heuristic, text width + icon width
   // + 45 accommodates help icon and search icon
   const width = Math.min(
-    Math.max(measureText(inputBoxVal, 16) + 45, minWidth),
+    Math.max(measureText(inputBoxVal, 16) + 50, minWidth),
     550,
   )
 

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap

@@ -718,7 +718,7 @@ exports[`renders two tracks, two regions 1`] = `
           <div
             class="MuiAutocomplete-root css-1qqsdnr-MuiAutocomplete-root"
             data-testid="autocomplete"
-            style="width: 255.27500000000003px;"
+            style="width: 260.27500000000003px;"
           >
             <div
               class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"

package/src/LinearGenomeView/model.ts

@@ -12,10 +12,11 @@ import {
   getSession,
   isViewContainer,
   isSessionModelWithWidgets,
+  isSessionWithAddTracks,
+  localStorageGetItem,
   measureText,
   parseLocString,
   springAnimate,
-  isSessionWithAddTracks,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -116,12 +117,6 @@ export const INTER_REGION_PADDING_WIDTH = 2
 export const SPACING = 7
 export const WIDGET_HEIGHT = 32
 
-function localStorageGetItem(item: string) {
-  return typeof localStorage !== 'undefined'
-    ? localStorage.getItem(item)
-    : undefined
-}
-
 /**
  * #stateModel LinearGenomeView
  */
@@ -137,9 +132,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         /**
          * #property
-         * this is a string instead of the const literal 'LinearGenomeView' to reduce some
-         * typescripting strictness, but you should pass the string 'LinearGenomeView' to
-         * the model explicitly
+         * this is a string instead of the const literal 'LinearGenomeView' to
+         * reduce some typescripting strictness, but you should pass the string
+         * 'LinearGenomeView' to the model explicitly
          */
         type: types.literal('LinearGenomeView') as unknown as string,
 
@@ -157,9 +152,10 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         /**
          * #property
-         * currently displayed regions, can be a single chromosome, arbitrary subsections,
-         * or the entire  set of chromosomes in the genome, but it not advised to use the
-         * entire set of chromosomes if your assembly is very fragmented
+         * currently displayed regions, can be a single chromosome, arbitrary
+         * subsections, or the entire  set of chromosomes in the genome, but it not
+         * advised to use the entire set of chromosomes if your assembly is very
+         * fragmented
          */
         displayedRegions: types.array(MUIRegion),
 
@@ -208,19 +204,17 @@ export function stateModelFactory(pluginManager: PluginManager) {
          * #property
          * show the "center line"
          */
-        showCenterLine: types.optional(types.boolean, () => {
-          const setting = localStorageGetItem('lgv-showCenterLine')
-          return setting !== undefined && setting !== null ? !!+setting : false
-        }),
+        showCenterLine: types.optional(types.boolean, () =>
+          JSON.parse(localStorageGetItem('lgv-showCenterLine') || 'false'),
+        ),
 
         /**
          * #property
          * show the "cytobands" in the overview scale bar
          */
-        showCytobandsSetting: types.optional(types.boolean, () => {
-          const setting = localStorageGetItem('lgv-showCytobands')
-          return setting !== undefined && setting !== null ? !!+setting : true
-        }),
+        showCytobandsSetting: types.optional(types.boolean, () =>
+          JSON.parse(localStorageGetItem('lgv-showCytobands') || 'true'),
+        ),
 
         /**
          * #property
@@ -529,7 +523,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       setShowCytobands(flag: boolean) {
         self.showCytobandsSetting = flag
-        localStorage.setItem('lgv-showCytobands', `${+flag}`)
       },
       /**
        * #action
@@ -757,7 +750,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       setTrackLabels(setting: 'overlapping' | 'offset' | 'hidden') {
         self.trackLabels = setting
-        localStorage.setItem('lgv-trackLabels', setting)
       },
 
       /**
@@ -765,7 +757,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       toggleCenterLine() {
         self.showCenterLine = !self.showCenterLine
-        localStorage.setItem('lgv-showCenterLine', `${+self.showCenterLine}`)
       },
 
       /**
@@ -1241,6 +1232,19 @@ export function stateModelFactory(pluginManager: PluginManager) {
             { delay: 150 },
           ),
         )
+
+        addDisposer(
+          self,
+          autorun(() => {
+            const s = (s: unknown) => JSON.stringify(s)
+            const { trackLabels, showCytobandsSetting, showCenterLine } = self
+            if (typeof localStorage !== 'undefined') {
+              localStorage.setItem('lgv-trackLabels', trackLabels)
+              localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting))
+              localStorage.setItem('lgv-showCenterLine', s(showCenterLine))
+            }
+          }),
+        )
       },
     }))
     .actions(self => ({