@jbrowse/plugin-linear-genome-view 2.3.4 → 2.4.1

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -6,10 +6,14 @@ import {
   DialogActions,
   DialogContent,
   FormControlLabel,
+  MenuItem,
   TextField,
   Typography,
 } from '@mui/material'
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+import { getSession, useLocalStorage } from '@jbrowse/core/util'
+
+// locals
 import { ExportSvgOptions } from '..'
 
 function LoadingMessage() {
@@ -21,19 +25,28 @@ function LoadingMessage() {
   )
 }
 
+function useSvgLocal<T>(key: string, val: T) {
+  return useLocalStorage('svg-' + key, val)
+}
+
 export default function ExportSvgDlg({
   model,
   handleClose,
 }: {
-  model: { exportSvg(opts: ExportSvgOptions): void }
+  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
   handleClose: () => void
 }) {
-  // @ts-ignore
+  const session = getSession(model)
   const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
   const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
-  const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
+  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
+  const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset')
+  const [themeName, setThemeName] = useSvgLocal(
+    'theme',
+    session.themeName || 'default',
+  )
   return (
     <Dialog open onClose={handleClose} title="Export SVG">
       <DialogContent>
@@ -47,6 +60,40 @@ export default function ExportSvgDlg({
           value={filename}
           onChange={event => setFilename(event.target.value)}
         />
+        <br />
+        <TextField
+          select
+          label="Track label positioning"
+          variant="outlined"
+          style={{ width: 150 }}
+          value={trackLabels}
+          onChange={event => setTrackLabels(event.target.value)}
+        >
+          <MenuItem value="offset">Offset</MenuItem>
+          <MenuItem value="overlay">Overlay</MenuItem>
+          <MenuItem value="left">Left</MenuItem>
+          <MenuItem value="none">None</MenuItem>
+        </TextField>
+        <br />
+        {session.allThemes ? (
+          <TextField
+            select
+            label="Theme"
+            variant="outlined"
+            value={themeName}
+            onChange={event => setThemeName(event.target.value)}
+          >
+            {Object.entries(session.allThemes()).map(([key, val]) => (
+              <MenuItem key={key} value={key}>
+                {
+                  // @ts-expect-error
+                  val.name || '(Unknown name)'
+                }
+              </MenuItem>
+            ))}
+          </TextField>
+        ) : null}
+
         {offscreenCanvas ? (
           <FormControlLabel
             control={
@@ -80,7 +127,12 @@ export default function ExportSvgDlg({
             setLoading(true)
             setError(undefined)
             try {
-              await model.exportSvg({ rasterizeLayers, filename })
+              await model.exportSvg({
+                rasterizeLayers,
+                filename,
+                trackLabels,
+                themeName,
+              })
               handleClose()
             } catch (e) {
               console.error(e)

package/src/LinearGenomeView/components/Gridlines.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles()(theme => ({
     width: 1,
   },
   majorTick: {
-    background: theme.palette.text.secondary,
+    background: theme.palette.action.disabled,
   },
   minorTick: {
     background: theme.palette.divider,

package/src/LinearGenomeView/components/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { Button, FormGroup, Typography, alpha } from '@mui/material'
+import { Button, IconButton, FormGroup, Typography, alpha } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { getBpDisplayStr } from '@jbrowse/core/util'
 
@@ -10,12 +10,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
 // locals
-import {
-  LinearGenomeViewModel,
-  WIDGET_HEIGHT,
-  SPACING,
-  HEADER_BAR_HEIGHT,
-} from '..'
+import { LinearGenomeViewModel, SPACING } from '..'
 import OverviewScalebar from './OverviewScalebar'
 import ZoomControls from './ZoomControls'
 import SearchBox from './SearchBox'
@@ -23,7 +18,6 @@ import SearchBox from './SearchBox'
 type LGV = LinearGenomeViewModel
 const useStyles = makeStyles()(theme => ({
   headerBar: {
-    height: HEADER_BAR_HEIGHT,
     display: 'flex',
   },
   headerForm: {
@@ -36,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
 
   panButton: {
     background: alpha(theme.palette.background.paper, 0.8),
-    height: WIDGET_HEIGHT,
+    color: theme.palette.text.primary,
     margin: SPACING,
   },
   bp: {
@@ -47,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
   toggleButton: {
     height: 44,
     border: 'none',
-    margin: theme.spacing(0.5),
+    marginLeft: theme.spacing(4),
   },
   buttonSpacer: {
     marginRight: theme.spacing(2),
@@ -57,15 +51,14 @@ const useStyles = makeStyles()(theme => ({
 const HeaderButtons = observer(({ model }: { model: LGV }) => {
   const { classes } = useStyles()
   return (
-    <Button
+    <IconButton
       onClick={model.activateTrackSelector}
       className={classes.toggleButton}
       title="Open track selector"
       value="track_select"
-      color="secondary"
     >
       <TrackSelectorIcon className={classes.buttonSpacer} />
-    </Button>
+    </IconButton>
   )
 })
 

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -4,10 +4,10 @@ import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
 import {
   Button,
-  CircularProgress,
   FormControl,
   Container,
   Grid,
+  CircularProgress,
 } from '@mui/material'
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
@@ -19,6 +19,8 @@ import CloseIcon from '@mui/icons-material/Close'
 import RefNameAutocomplete from './RefNameAutocomplete'
 import { fetchResults, splitLast } from './util'
 import { LinearGenomeViewModel } from '..'
+
+// lazies
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles()(theme => ({
@@ -35,29 +37,29 @@ const useStyles = makeStyles()(theme => ({
 
 type LGV = LinearGenomeViewModel
 
-const ImportForm = observer(({ model }: { model: LGV }) => {
+export default observer(function ({ model }: { model: LGV }) {
   const { classes } = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
   const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
   const [option, setOption] = useState<BaseResult>()
-
   const searchScope = model.searchScope(selectedAsm)
-
   const assembly = assemblyManager.get(selectedAsm)
   const assemblyError = assemblyNames.length
     ? assembly?.error
     : 'No configured assemblies'
-  const regions = assembly?.regions || []
   const displayError = assemblyError || error
   const [value, setValue] = useState('')
-  const r0 = regions[0]?.refName
+  const regions = assembly?.regions
+  const assemblyLoaded = !!regions
+  const r0 = regions ? regions[0]?.refName : ''
 
-  // useEffect resets to an "initial state" of displaying first region from assembly
-  // after assembly change. needs to react to selectedAsm as well as r0 because changing
-  // assembly will run setValue('') and then r0 may not change if assembly names are the
-  // same across assemblies, but it still needs to be reset
+  // useEffect resets to an "initial state" of displaying first region from
+  // assembly after assembly change. needs to react to selectedAsm as well as
+  // r0 because changing assembly will run setValue('') and then r0 may not
+  // change if assembly names are the same across assemblies, but it still
+  // needs to be reset
   useEffect(() => {
     setValue(r0)
   }, [r0, selectedAsm])
@@ -89,7 +91,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
         const allRefs = assembly?.allRefNamesWithLowerCase || []
         if (
           allRefs.includes(input) ||
-          (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
+          (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))
         ) {
           await model.navToLocString(input, selectedAsm)
         } else {
@@ -142,10 +144,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <FormControl>
                 <AssemblySelector
-                  onChange={val => {
-                    setSelectedAsm(val)
-                    setValue('')
-                  }}
+                  onChange={val => setSelectedAsm(val)}
                   localStorageKey="lgv"
                   session={session}
                   selected={selectedAsm}
@@ -156,7 +155,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               {selectedAsm ? (
                 assemblyError ? (
                   <CloseIcon style={{ color: 'red' }} />
-                ) : value ? (
+                ) : assemblyLoaded ? (
                   <FormControl>
                     <RefNameAutocomplete
                       fetchResults={queryString =>
@@ -169,9 +168,8 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                         })
                       }
                       model={model}
-                      assemblyName={assemblyError ? undefined : selectedAsm}
+                      assemblyName={selectedAsm}
                       value={value}
-                      // note: minWidth 270 accommodates full width of helperText
                       minWidth={270}
                       onChange={str => setValue(str)}
                       onSelect={val => setOption(val)}
@@ -179,16 +177,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                         variant: 'outlined',
                         helperText:
                           'Enter sequence name, feature name, or location',
-                        style: { minWidth: '175px' },
                       }}
                     />
                   </FormControl>
                 ) : (
-                  <CircularProgress
-                    role="progressbar"
-                    size={20}
-                    disableShrink
-                  />
+                  <CircularProgress size={20} disableShrink />
                 )
               ) : null}
             </Grid>
@@ -232,5 +225,3 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     </div>
   )
 })
-
-export default ImportForm

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import '@testing-library/jest-dom/extend-expect'
 import 'requestidlecallback-polyfill'
 
 // locals
@@ -81,9 +80,8 @@ test('renders one track, one region', async () => {
   })
   const model = session.views[0]
   model.setWidth(800)
-  const { container, queryByText, getByPlaceholderText, findByText } = render(
-    <LinearGenomeView model={model} />,
-  )
+  const { container, queryAllByTestId, getByPlaceholderText, findByText } =
+    render(<LinearGenomeView model={model} />)
   await findByText('Foo Track')
   // test needs to wait until it's updated to display 100 bp in the header to
   // make snapshot pass
@@ -94,8 +92,9 @@ test('renders one track, one region', async () => {
       (getByPlaceholderText('Search for location') as HTMLInputElement).value,
     ).toEqual('ctgA:1..100')
   })
-  await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
-  expect(container.firstChild).toMatchSnapshot()
+  await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(1))
+  // snapshot has no features rendered
+  expect(container).toMatchSnapshot()
 })
 
 test('renders two tracks, two regions', async () => {
@@ -158,13 +157,11 @@ test('renders two tracks, two regions', async () => {
   })
   const model = session.views[0]
   model.setWidth(800)
-  const { container, findByText, queryByText, findAllByTestId } = render(
+  const { container, findByText, queryAllByTestId } = render(
     <LinearGenomeView model={model} />,
   )
   await findByText('Foo Track')
   await findByText('798bp')
-  await findAllByTestId('svgfeatures', {}, { timeout: 10000 })
-  await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
-
-  expect(container.firstChild).toMatchSnapshot()
+  await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(4))
+  expect(container).toMatchSnapshot()
 }, 15000)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -28,7 +28,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const { classes } = useStyles()
 
   if (!initialized && !error) {
-    return <LoadingEllipses variant="h5" />
+    return <LoadingEllipses variant="h6" />
   }
   if (!hasDisplayedRegions || error) {
     return <ImportForm model={model} />

package/src/LinearGenomeView/components/MiniControls.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { IconButton, Paper } from '@mui/material'
+import Menu from '@jbrowse/core/ui/Menu'
+
+// icons
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown'
-import Menu from '@jbrowse/core/ui/Menu'
+
+// locals
 import { LinearGenomeViewModel } from '..'
 
 const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
@@ -15,10 +19,7 @@ const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
   return hideHeader ? (
     <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
       <Paper style={{ background: '#aaa7' }}>
-        <IconButton
-          color="secondary"
-          onClick={event => setAnchorEl(event.currentTarget)}
-        >
+        <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
           <ArrowDown fontSize="small" />
         </IconButton>
 
@@ -26,7 +27,6 @@ const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
           data-testid="zoom_out"
           onClick={() => model.zoom(bpPerPx * 2)}
           disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-          color="secondary"
         >
           <ZoomOut fontSize="small" />
         </IconButton>
@@ -34,7 +34,6 @@ const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
           data-testid="zoom_in"
           onClick={() => model.zoom(model.bpPerPx / 2)}
           disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-          color="secondary"
         >
           <ZoomIn fontSize="small" />
         </IconButton>

package/src/LinearGenomeView/components/OverviewRubberband.tsx

@@ -4,6 +4,8 @@ import { makeStyles } from 'tss-react/mui'
 import { getSession, stringify } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
+
+// locals
 import { LinearGenomeViewModel } from '..'
 import RubberbandSpan from './RubberbandSpan'
 import { getRelativeX } from './util'
@@ -25,50 +27,43 @@ const useStyles = makeStyles()({
   },
 })
 
-const HoverTooltip = observer(
-  ({
-    model,
-    open,
-    guideX,
-    overview,
-  }: {
-    model: LGV
-    open: boolean
-    guideX: number
-    overview: Base1DViewModel
-  }) => {
-    const { classes } = useStyles()
-    const { cytobandOffset } = model
-    const { assemblyManager } = getSession(model)
-
-    const px = overview.pxToBp(guideX - cytobandOffset)
-    const assembly = assemblyManager.get(px.assemblyName)
-    const cytoband = assembly?.cytobands?.find(
-      f =>
-        px.coord > f.get('start') &&
-        px.coord < f.get('end') &&
-        px.refName === assembly.getCanonicalRefName(f.get('refName')),
-    )
+const HoverTooltip = observer(function ({
+  model,
+  open,
+  guideX,
+  overview,
+}: {
+  model: LGV
+  open: boolean
+  guideX: number
+  overview: Base1DViewModel
+}) {
+  const { classes } = useStyles()
+  const { cytobandOffset } = model
+  const { assemblyManager } = getSession(model)
+
+  const px = overview.pxToBp(guideX - cytobandOffset)
+  const assembly = assemblyManager.get(px.assemblyName)
+  const cytoband = assembly?.cytobands?.find(
+    f =>
+      px.coord > f.get('start') &&
+      px.coord < f.get('end') &&
+      px.refName === assembly.getCanonicalRefName(f.get('refName')),
+  )
 
-    return (
-      <Tooltip
-        open={open}
-        placement="top"
-        title={[stringify(px), cytoband?.get('name')].join(' ')}
-        arrow
-      >
-        <div
-          className={classes.guide}
-          style={{
-            left: guideX,
-          }}
-        />
-      </Tooltip>
-    )
-  },
-)
+  return (
+    <Tooltip
+      open={open}
+      placement="top"
+      title={[stringify(px), cytoband?.get('name')].join(' ')}
+      arrow
+    >
+      <div className={classes.guide} style={{ left: guideX }} />
+    </Tooltip>
+  )
+})
 
-function OverviewRubberband({
+export default observer(function OverviewRubberband({
   model,
   overview,
   ControlComponent = <div />,
@@ -171,7 +166,6 @@ function OverviewRubberband({
         ) : null}
         <div
           className={classes.rubberbandControl}
-          role="presentation"
           ref={controlsRef}
           onMouseDown={mouseDown}
           onMouseOut={mouseOut}
@@ -195,7 +189,7 @@ function OverviewRubberband({
   if (startX) {
     leftBpOffset = overview.pxToBp(startX - cytobandOffset)
     rightBpOffset = overview.pxToBp(startX + width - cytobandOffset)
-    if (currentX && currentX < startX) {
+    if (currentX !== undefined && currentX < startX) {
       ;[leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset]
     }
   }
@@ -206,14 +200,13 @@ function OverviewRubberband({
         <RubberbandSpan
           leftBpOffset={leftBpOffset}
           rightBpOffset={rightBpOffset}
-          width={width}
+          width={Math.abs(width)}
           left={left}
         />
       ) : null}
       <div
         data-testid="rubberband_controls"
         className={classes.rubberbandControl}
-        role="presentation"
         ref={controlsRef}
         onMouseDown={mouseDown}
         onMouseOut={mouseOut}
@@ -223,6 +216,4 @@ function OverviewRubberband({
       </div>
     </div>
   )
-}
-
-export default observer(OverviewRubberband)
+})