@jbrowse/plugin-linear-genome-view 1.6.9 → 1.7.0

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -16,7 +16,7 @@ import CloseIcon from '@material-ui/icons/Close'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { LinearGenomeViewModel } from '..'
+import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles(theme => ({
@@ -26,6 +26,9 @@ const useStyles = makeStyles(theme => ({
   button: {
     margin: theme.spacing(2),
   },
+  container: {
+    padding: theme.spacing(4),
+  },
 }))
 
 type LGV = LinearGenomeViewModel
@@ -119,10 +122,12 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
   }
 
+  const height = WIDGET_HEIGHT + 5
+
   // implementation notes:
   // having this wrapped in a form allows intuitive use of enter key to submit
   return (
-    <div>
+    <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
       <Container className={classes.importFormContainer}>
         <form onSubmit={event => event.preventDefault()}>
@@ -140,6 +145,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 }}
                 session={session}
                 selected={selectedAsm}
+                InputProps={{ style: { height } }}
               />
             </Grid>
             <Grid item>
@@ -156,10 +162,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                     minWidth={270}
                     onSelect={option => setOption(option)}
                     TextFieldProps={{
-                      margin: 'normal',
                       variant: 'outlined',
                       helperText:
                         'Enter sequence name, feature name, or location',
+                      style: { minWidth: '175px' },
+                      InputProps: { style: { height } },
                     }}
                   />
                 ) : (
@@ -171,7 +178,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 )
               ) : null}
             </Grid>
-            <Grid item></Grid>
             <Grid item>
               <Button
                 type="submit"

package/src/LinearGenomeView/components/LinearGenomeView.test.js

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import 'requestidlecallback-polyfill'
 import LinearGenomeView from './LinearGenomeView'
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 const assemblyConf = {
   name: 'volMyt1',

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -138,7 +138,7 @@ type LGV = LinearGenomeViewModel
 
 // rounded rect from https://stackoverflow.com/a/45889603/2129219
 // prettier-ignore
-function rightRoundedRect(x:number, y:number, width:number, height:number, radius:number) {
+function rightRoundedRect(x: number, y: number, width: number, height: number, radius: number) {
   return "M" + x + "," + y
        + "h" + (width - radius)
        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
@@ -149,7 +149,7 @@ function rightRoundedRect(x:number, y:number, width:number, height:number, radiu
 }
 
 // prettier-ignore
-function leftRoundedRect(x:number, y:number, width:number, height:number, radius:number ) {
+function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
   return "M" + (x + radius) + "," + y
        + "h" + (width - radius)
        + "v" + height

package/src/LinearGenomeView/components/RubberBand.tsx

@@ -1,18 +1,17 @@
 import React, { useRef, useEffect, useState } from 'react'
-import ReactPropTypes from 'prop-types'
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
-// material ui
-import { alpha } from '@material-ui/core/styles/colorManipulator'
-import { makeStyles } from '@material-ui/core/styles'
-import Popover from '@material-ui/core/Popover'
-import Tooltip from '@material-ui/core/Tooltip'
-import Typography from '@material-ui/core/Typography'
+import { observer } from 'mobx-react'
+import {
+  Popover,
+  Tooltip,
+  Typography,
+  makeStyles,
+  alpha,
+} from '@material-ui/core'
 import { stringify } from '@jbrowse/core/util'
 import { Menu } from '@jbrowse/core/ui'
-import { LinearGenomeViewStateModel, BpOffset } from '..'
+import { LinearGenomeViewModel } from '..'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles(theme => {
   const background = theme.palette.tertiary
@@ -139,11 +138,11 @@ function RubberBand({
           clientX,
           clientY,
         })
-        const { leftOffset, rightOffset } = computeOffsets(offsetX) as {
-          leftOffset: BpOffset
-          rightOffset: BpOffset
+        const args = computeOffsets(offsetX)
+        if (args) {
+          const { leftOffset, rightOffset } = args
+          setOffsets(leftOffset, rightOffset)
         }
-        setOffsets(leftOffset, rightOffset)
         setGuideX(undefined)
       }
     }
@@ -313,13 +312,4 @@ function RubberBand({
   )
 }
 
-RubberBand.propTypes = {
-  model: MobxPropTypes.objectOrObservableObject.isRequired,
-  ControlComponent: ReactPropTypes.node,
-}
-
-RubberBand.defaultProps = {
-  ControlComponent: <div />,
-}
-
 export default observer(RubberBand)

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

@@ -3,6 +3,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import ScaleBar from './ScaleBar'
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 describe('ScaleBar genome view component', () => {
   it('renders two regions', () => {

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -1,16 +1,13 @@
+import { Paper, Typography, makeStyles } from '@material-ui/core'
 import {
   ContentBlock,
   ElidedBlock,
   InterRegionPaddingBlock,
 } from '@jbrowse/core/util/blockTypes'
-import Paper from '@material-ui/core/Paper'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import clsx from 'clsx'
 import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 import React from 'react'
-import { LinearGenomeViewStateModel } from '..'
+import { LinearGenomeViewModel } from '..'
 import {
   ContentBlock as ContentBlockComponent,
   ElidedBlock as ElidedBlockComponent,
@@ -18,7 +15,7 @@ import {
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles(theme => ({
   scaleBarContainer: {

package/src/LinearGenomeView/components/SequenceDialog.tsx

@@ -213,7 +213,7 @@ function SequenceDialog({
           data-testid="rubberband-sequence"
           variant="outlined"
           multiline
-          rows={5}
+          minRows={5}
           disabled={sequenceTooLarge}
           className={classes.dialogContent}
           fullWidth

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -103,7 +103,7 @@ const TrackLabel = React.forwardRef(
     }
 
     const items = [
-      ...session.getTrackActionMenuItems?.(trackConf),
+      ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
     ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 

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

@@ -1444,7 +1444,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 style="width: 100px;"
               >
                 <svg
-                  class="SvgFeatureRendering"
                   data-testid="svgfeatures"
                   height="100"
                   width="100"
@@ -1459,7 +1458,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 style="width: 1000px;"
               >
                 <svg
-                  class="SvgFeatureRendering"
                   data-testid="svgfeatures"
                   height="100"
                   width="1000"
@@ -1589,7 +1587,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 style="width: 100px;"
               >
                 <svg
-                  class="SvgFeatureRendering"
                   data-testid="svgfeatures"
                   height="100"
                   width="100"
@@ -1604,7 +1601,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 style="width: 1000px;"
               >
                 <svg
-                  class="SvgFeatureRendering"
                   data-testid="svgfeatures"
                   height="100"
                   width="1000"

package/src/LinearGenomeView/index.tsx

@@ -2,7 +2,7 @@ import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { Region } from '@jbrowse/core/util/types'
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst'
-import { MenuItem } from '@jbrowse/core/ui'
+import { MenuItem, ReturnToImportFormDialog } from '@jbrowse/core/ui'
 import {
   assembleLocString,
   clamp,
@@ -52,7 +52,6 @@ import { renderToSvg } from './components/LinearGenomeViewSvg'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
 import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
-import { ReturnToImportFormDialog } from '@jbrowse/core/ui'
 
 export interface BpOffset {
   refName?: string
@@ -100,8 +99,8 @@ export const HEADER_OVERVIEW_HEIGHT = 20
 export const SCALE_BAR_HEIGHT = 17
 export const RESIZE_HANDLE_HEIGHT = 3
 export const INTER_REGION_PADDING_WIDTH = 2
-export const WIDGET_HEIGHT = 32
 export const SPACING = 7
+export const WIDGET_HEIGHT = 32
 
 function localStorageGetItem(item: string) {
   return typeof localStorage !== 'undefined'