@jbrowse/plugin-linear-genome-view 2.2.1 → 2.3.0

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -1,45 +1,19 @@
 import React from 'react'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { Button, DialogActions, DialogContent, Divider } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 
 export default function HelpDialog({
   handleClose,
 }: {
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   return (
-    <Dialog open maxWidth="xl" onClose={handleClose}>
-      <DialogTitle>
-        Using the search box
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => handleClose()}
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
+    <Dialog
+      open
+      maxWidth="xl"
+      onClose={handleClose}
+      title="Using the search box"
+    >
       <DialogContent>
         <h3>Searching</h3>
         <ul>

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -62,11 +62,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     setValue(r0)
   }, [r0, selectedAsm])
 
-  function navToOption(option: BaseResult) {
+  async function navToOption(option: BaseResult) {
     const location = option.getLocation()
     const trackId = option.getTrackId()
     if (location) {
-      model.navToLocString(location, selectedAsm)
+      await model.navToLocString(location, selectedAsm)
       if (trackId) {
         model.showTrack(trackId)
       }
@@ -81,7 +81,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   async function handleSelectedRegion(input: string) {
     try {
       if (option?.getDisplayString() === input && option.hasLocation()) {
-        navToOption(option)
+        await navToOption(option)
+      } else if (option?.results?.length) {
+        model.setSearchResults(option.results, option.getLabel())
       } else {
         const [ref, rest] = splitLast(input, ':')
         const allRefs = assembly?.allRefNamesWithLowerCase || []
@@ -89,7 +91,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
           allRefs.includes(input) ||
           (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
         ) {
-          model.navToLocString(input, selectedAsm)
+          await model.navToLocString(input, selectedAsm)
         } else {
           const results = await fetchResults({
             queryString: input,
@@ -103,9 +105,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
           if (results.length > 1) {
             model.setSearchResults(results, input.toLowerCase())
           } else if (results.length === 1) {
-            navToOption(results[0])
+            await navToOption(results[0])
           } else {
-            model.navToLocString(input, selectedAsm)
+            await model.navToLocString(input, selectedAsm)
           }
         }
       }
@@ -122,11 +124,12 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
       {displayError ? <ErrorMessage error={displayError} /> : null}
       <Container className={classes.importFormContainer}>
         <form
-          onSubmit={event => {
+          onSubmit={async event => {
             event.preventDefault()
             model.setError(undefined)
             if (value) {
-              handleSelectedRegion(value)
+              // has it's own error handling
+              await handleSelectedRegion(value)
             }
           }}
         >
@@ -143,6 +146,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                     setSelectedAsm(val)
                     setValue('')
                   }}
+                  localStorageKey="lgv"
                   session={session}
                   selected={selectedAsm}
                 />
@@ -167,7 +171,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                       model={model}
                       assemblyName={assemblyError ? undefined : selectedAsm}
                       value={value}
-                      // note: minWidth 270 accomodates full width of helperText
+                      // note: minWidth 270 accommodates full width of helperText
                       minWidth={270}
                       onChange={str => setValue(str)}
                       onSelect={val => setOption(val)}

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

@@ -30,143 +30,141 @@ const assemblyConf = {
   },
 }
 
-describe('<LinearGenomeView />', () => {
-  it('renders setup wizard', async () => {
-    const session = createTestSession()
-    session.addAssemblyConf(assemblyConf)
-    session.addView('LinearGenomeView', { id: 'lgv' })
-    const model = session.views[0]
-    model.setWidth(800)
-    const { findByText } = render(<LinearGenomeView model={model} />)
-    expect(model.displayedRegions.length).toEqual(0)
-    const elt = await findByText('Open')
-    await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
-    fireEvent.click(elt)
-    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), {
-      timeout: 15000,
-    })
-  }, 15000)
-
-  it('renders one track, one region', async () => {
-    const session = createTestSession()
-    session.addAssemblyConf(assemblyConf)
-    session.addTrackConf({
-      trackId: 'testConfig',
-      assemblyNames: ['volMyt1'],
-      name: 'Foo Track',
-      type: 'BasicTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    session.addView('LinearGenomeView', {
-      type: 'LinearGenomeView',
-      id: 'lgv',
-      offsetPx: 0,
-      bpPerPx: 1,
-      tracks: [
-        {
-          id: 'foo',
-          type: 'BasicTrack',
-          height: 20,
-          configuration: 'testConfig',
-          displays: [
-            {
-              type: 'LinearBareDisplay',
-              configuration: 'testConfig-LinearBareDisplay',
-            },
-          ],
-        },
-      ],
-      displayedRegions: [
-        { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
-      ],
-    })
-    const model = session.views[0]
-    model.setWidth(800)
-    const { container, queryByText, 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
-    await findByText('100bp')
+test('renders setup wizard', async () => {
+  const session = createTestSession()
+  session.addAssemblyConf(assemblyConf)
+  session.addView('LinearGenomeView', { id: 'lgv' })
+  const model = session.views[0]
+  model.setWidth(800)
+  const { findByText } = render(<LinearGenomeView model={model} />)
+  expect(model.displayedRegions.length).toEqual(0)
+  const elt = await findByText('Open')
+  await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
+  fireEvent.click(elt)
+  await waitFor(() => expect(model.displayedRegions.length).toEqual(1), {
+    timeout: 15000,
+  })
+}, 15000)
 
-    await waitFor(() => {
-      expect(
-        (getByPlaceholderText('Search for location') as HTMLInputElement).value,
-      ).toEqual('ctgA:1..100')
-    })
-    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
-    expect(container.firstChild).toMatchSnapshot()
+test('renders one track, one region', async () => {
+  const session = createTestSession()
+  session.addAssemblyConf(assemblyConf)
+  session.addTrackConf({
+    trackId: 'testConfig',
+    assemblyNames: ['volMyt1'],
+    name: 'Foo Track',
+    type: 'BasicTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
   })
+  session.addView('LinearGenomeView', {
+    type: 'LinearGenomeView',
+    id: 'lgv',
+    offsetPx: 0,
+    bpPerPx: 1,
+    tracks: [
+      {
+        id: 'foo',
+        type: 'BasicTrack',
+        height: 20,
+        configuration: 'testConfig',
+        displays: [
+          {
+            type: 'LinearBareDisplay',
+            configuration: 'testConfig-LinearBareDisplay',
+          },
+        ],
+      },
+    ],
+    displayedRegions: [
+      { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
+    ],
+  })
+  const model = session.views[0]
+  model.setWidth(800)
+  const { container, queryByText, 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
+  await findByText('100bp')
 
-  it('renders two tracks, two regions', async () => {
-    const session = createTestSession()
-    session.addAssemblyConf(assemblyConf)
-    session.addTrackConf({
-      trackId: 'testConfig',
-      name: 'Foo Track',
-      assemblyNames: ['volMyt1'],
-      type: 'BasicTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
+  await waitFor(() => {
+    expect(
+      (getByPlaceholderText('Search for location') as HTMLInputElement).value,
+    ).toEqual('ctgA:1..100')
+  })
+  await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
+  expect(container.firstChild).toMatchSnapshot()
+})
 
-    session.addTrackConf({
-      trackId: 'testConfig2',
-      name: 'Bar Track',
-      assemblyNames: ['volMyt1'],
-      type: 'BasicTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    session.addView('LinearGenomeView', {
-      id: 'lgv',
-      offsetPx: 0,
-      bpPerPx: 1,
-      displayedRegions: [
-        { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
-        {
-          assemblyName: 'volMyt1',
-          refName: 'ctgB',
-          start: 1000,
-          end: 2000,
-        },
-      ],
-      tracks: [
-        {
-          id: 'foo',
-          type: 'BasicTrack',
-          height: 20,
-          configuration: 'testConfig',
-          displays: [
-            {
-              type: 'LinearBareDisplay',
-              configuration: 'testConfig-LinearBareDisplay',
-            },
-          ],
-        },
-        {
-          id: 'bar',
-          type: 'BasicTrack',
-          height: 20,
-          configuration: 'testConfig2',
-          displays: [
-            {
-              type: 'LinearBareDisplay',
-              configuration: 'testConfig2-LinearBareDisplay',
-            },
-          ],
-        },
-      ],
-    })
-    const model = session.views[0]
-    model.setWidth(800)
-    const { container, findByText, queryByText, findAllByTestId } = render(
-      <LinearGenomeView model={model} />,
-    )
-    await findByText('Foo Track')
-    await findByText('798bp')
-    await findAllByTestId('svgfeatures')
-    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
+test('renders two tracks, two regions', async () => {
+  const session = createTestSession()
+  session.addAssemblyConf(assemblyConf)
+  session.addTrackConf({
+    trackId: 'testConfig',
+    name: 'Foo Track',
+    assemblyNames: ['volMyt1'],
+    type: 'BasicTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
+  })
 
-    expect(container.firstChild).toMatchSnapshot()
+  session.addTrackConf({
+    trackId: 'testConfig2',
+    name: 'Bar Track',
+    assemblyNames: ['volMyt1'],
+    type: 'BasicTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
   })
-})
+  session.addView('LinearGenomeView', {
+    id: 'lgv',
+    offsetPx: 0,
+    bpPerPx: 1,
+    displayedRegions: [
+      { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
+      {
+        assemblyName: 'volMyt1',
+        refName: 'ctgB',
+        start: 1000,
+        end: 2000,
+      },
+    ],
+    tracks: [
+      {
+        id: 'foo',
+        type: 'BasicTrack',
+        height: 20,
+        configuration: 'testConfig',
+        displays: [
+          {
+            type: 'LinearBareDisplay',
+            configuration: 'testConfig-LinearBareDisplay',
+          },
+        ],
+      },
+      {
+        id: 'bar',
+        type: 'BasicTrack',
+        height: 20,
+        configuration: 'testConfig2',
+        displays: [
+          {
+            type: 'LinearBareDisplay',
+            configuration: 'testConfig2-LinearBareDisplay',
+          },
+        ],
+      },
+    ],
+  })
+  const model = session.views[0]
+  model.setWidth(800)
+  const { container, findByText, queryByText, findAllByTestId } = 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()
+}, 15000)

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -14,11 +14,11 @@ import {
   ExportSvgOptions,
   HEADER_OVERVIEW_HEIGHT,
 } from '..'
-import { Polygon, Cytobands } from './OverviewScaleBar'
+import { Polygon, Cytobands } from './OverviewScalebar'
 
 type LGV = LinearGenomeViewModel
 
-function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
+function Scalebar({ model, fontSize }: { model: LGV; fontSize: number }) {
   const {
     offsetPx,
     dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp },
@@ -178,7 +178,7 @@ const SVGHeader = ({ model }: { model: LGV }) => {
       ) : null}
 
       <g transform={`translate(0 ${fontSize + cytobandHeight})`}>
-        <ScaleBar model={model} fontSize={fontSize} />
+        <Scalebar model={model} fontSize={fontSize} />
       </g>
       <g transform={`translate(0 ${rulerHeight + cytobandHeight})`}>
         <SVGRuler model={model} fontSize={fontSize} width={width} />
@@ -276,8 +276,7 @@ export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
     tracks.map(async track => {
       const display = track.displays[0]
       await when(() => (display.ready !== undefined ? display.ready : true))
-      const result = await display.renderSvg(opts)
-      return { track, result }
+      return { track, result: await display.renderSvg(opts) }
     }),
   )
 

package/src/LinearGenomeView/components/{OverviewRubberBand.tsx → OverviewRubberband.tsx}

@@ -1,51 +1,28 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Popover, Tooltip, Typography, alpha } from '@mui/material'
+import { Tooltip } from '@mui/material'
 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'
-import { LinearGenomeViewModel, HEADER_OVERVIEW_HEIGHT } from '..'
+import { LinearGenomeViewModel } from '..'
+import RubberbandSpan from './RubberbandSpan'
+import { getRelativeX } from './util'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => {
-  const { tertiary, primary } = theme.palette
-  const background = tertiary
-    ? alpha(tertiary.main, 0.7)
-    : alpha(primary.main, 0.7)
-  return {
-    rubberBand: {
-      height: '100%',
-      background,
-      position: 'absolute',
-      zIndex: 10,
-      textAlign: 'center',
-      overflow: 'hidden',
-    },
-    rubberBandControl: {
-      cursor: 'crosshair',
-      width: '100%',
-      minHeight: 8,
-    },
-    rubberBandText: {
-      color: tertiary ? tertiary.contrastText : primary.contrastText,
-    },
-    popover: {
-      mouseEvents: 'none',
-      cursor: 'crosshair',
-    },
-    paper: {
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(1),
-    },
-    guide: {
-      pointerEvents: 'none',
-      height: '100%',
-      width: 1,
-      position: 'absolute',
-      zIndex: 10,
-    },
-  }
+const useStyles = makeStyles()({
+  rubberbandControl: {
+    cursor: 'crosshair',
+    width: '100%',
+    minHeight: 8,
+  },
+  guide: {
+    pointerEvents: 'none',
+    height: '100%',
+    width: 1,
+    position: 'absolute',
+    zIndex: 10,
+  },
 })
 
 const HoverTooltip = observer(
@@ -91,7 +68,7 @@ const HoverTooltip = observer(
   },
 )
 
-function OverviewRubberBand({
+function OverviewRubberband({
   model,
   overview,
   ControlComponent = <div />,
@@ -105,7 +82,6 @@ function OverviewRubberBand({
   const [currentX, setCurrentX] = useState<number>()
   const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
-  const rubberBandRef = useRef<HTMLDivElement>(null)
   const { classes } = useStyles()
   const mouseDragging = startX !== undefined
 
@@ -113,8 +89,7 @@ function OverviewRubberBand({
     function globalMouseMove(event: MouseEvent) {
       const ref = controlsRef.current
       if (ref && mouseDragging) {
-        const relativeX = event.clientX - ref.getBoundingClientRect().left
-        setCurrentX(relativeX)
+        setCurrentX(getRelativeX(event, ref))
       }
     }
 
@@ -172,19 +147,11 @@ function OverviewRubberBand({
   function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault()
     event.stopPropagation()
-    if (controlsRef.current) {
-      setStartX(
-        event.clientX - controlsRef.current.getBoundingClientRect().left,
-      )
-    }
+    setStartX(getRelativeX(event, controlsRef.current))
   }
 
   function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
-    if (controlsRef.current) {
-      setGuideX(
-        event.clientX - controlsRef.current.getBoundingClientRect().left,
-      )
-    }
+    setGuideX(getRelativeX(event, controlsRef.current))
   }
 
   function mouseOut() {
@@ -203,7 +170,7 @@ function OverviewRubberBand({
           />
         ) : null}
         <div
-          className={classes.rubberBandControl}
+          className={classes.rubberbandControl}
           role="presentation"
           ref={controlsRef}
           onMouseDown={mouseDown}
@@ -235,66 +202,17 @@ function OverviewRubberBand({
 
   return (
     <div style={{ position: 'relative' }}>
-      {rubberBandRef.current ? (
-        <>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'left',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>
-              {leftBpOffset ? stringify(leftBpOffset) : ''}
-            </Typography>
-          </Popover>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'left',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>
-              {rightBpOffset ? stringify(rightBpOffset) : ''}
-            </Typography>
-          </Popover>
-        </>
+      {leftBpOffset && rightBpOffset ? (
+        <RubberbandSpan
+          leftBpOffset={leftBpOffset}
+          rightBpOffset={rightBpOffset}
+          width={width}
+          left={left}
+        />
       ) : null}
       <div
-        ref={rubberBandRef}
-        className={classes.rubberBand}
-        style={{
-          left,
-          width: Math.abs(width),
-          height: HEADER_OVERVIEW_HEIGHT,
-        }}
-      />
-      <div
-        data-testid="rubberBand_controls"
-        className={classes.rubberBandControl}
+        data-testid="rubberband_controls"
+        className={classes.rubberbandControl}
         role="presentation"
         ref={controlsRef}
         onMouseDown={mouseDown}
@@ -307,4 +225,4 @@ function OverviewRubberBand({
   )
 }
 
-export default observer(OverviewRubberBand)
+export default observer(OverviewRubberband)