@jbrowse/plugin-linear-genome-view 1.5.8 → 1.6.2

package/src/LinearGenomeView/components/Header.tsx

@@ -1,16 +1,13 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
 import {
   Button,
   FormGroup,
   Typography,
   makeStyles,
-  useTheme,
   alpha,
 } from '@material-ui/core'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
+import SearchBox from './SearchBox'
 
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
@@ -18,15 +15,16 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
 import ArrowBackIcon from '@material-ui/icons/ArrowBack'
 
 // locals
-import { LinearGenomeViewModel, HEADER_BAR_HEIGHT } from '..'
-import RefNameAutocomplete from './RefNameAutocomplete'
+import {
+  LinearGenomeViewModel,
+  SPACING,
+  WIDGET_HEIGHT,
+  HEADER_BAR_HEIGHT,
+} from '..'
 import OverviewScaleBar from './OverviewScaleBar'
 import ZoomControls from './ZoomControls'
-import { dedupe } from './util'
-
-const WIDGET_HEIGHT = 32
-const SPACING = 7
 
+type LGV = LinearGenomeViewModel
 const useStyles = makeStyles(theme => ({
   headerBar: {
     height: HEADER_BAR_HEIGHT,
@@ -39,10 +37,7 @@ const useStyles = makeStyles(theme => ({
   spacer: {
     flexGrow: 1,
   },
-  input: {},
-  headerRefName: {
-    minWidth: 100,
-  },
+
   panButton: {
     background: alpha(theme.palette.background.paper, 0.8),
     height: WIDGET_HEIGHT,
@@ -63,7 +58,7 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const Controls = observer(({ model }: { model: LinearGenomeViewModel }) => {
+const HeaderButtons = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   return (
     <Button
@@ -78,7 +73,7 @@ const Controls = observer(({ model }: { model: LinearGenomeViewModel }) => {
   )
 })
 
-function PanControls({ model }: { model: LinearGenomeViewModel }) {
+function PanControls({ model }: { model: LGV }) {
   const classes = useStyles()
   return (
     <>
@@ -100,118 +95,41 @@ function PanControls({ model }: { model: LinearGenomeViewModel }) {
   )
 }
 
-const RegionWidth = observer(({ model }: { model: LinearGenomeViewModel }) => {
+const RegionWidth = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const { coarseTotalBp } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {`${Math.round(coarseTotalBp).toLocaleString('en-US')} bp`}
+      {Math.round(coarseTotalBp).toLocaleString('en-US')} bp
     </Typography>
   )
 })
 
-const LinearGenomeViewHeader = observer(
-  ({ model }: { model: LinearGenomeViewModel }) => {
-    const classes = useStyles()
-    const theme = useTheme()
-    const session = getSession(model)
-
-    const { textSearchManager, assemblyManager } = session
-    const { assemblyNames, rankSearchResults } = model
-    const assemblyName = assemblyNames[0]
-    const assembly = assemblyManager.get(assemblyName)
-    const searchScope = model.searchScope(assemblyName)
-
-    async function fetchResults(query: string, searchType?: SearchType) {
-      if (!textSearchManager) {
-        console.warn('No text search manager')
-      }
-
-      const textSearchResults = await textSearchManager?.search(
-        {
-          queryString: query,
-          searchType,
-        },
-        searchScope,
-        rankSearchResults,
-      )
-
-      const refNameResults = assembly?.allRefNames
-        ?.filter(refName => refName.startsWith(query))
-        .map(r => new BaseResult({ label: r }))
-        .slice(0, 10)
-
-      return dedupe(
-        [...(refNameResults || []), ...(textSearchResults || [])],
-        elt => elt.getId(),
-      )
-    }
-
-    async function handleSelectedRegion(option: BaseResult) {
-      let trackId = option.getTrackId()
-      let location = option.getLocation()
-      const label = option.getLabel()
-      try {
-        if (assembly?.allRefNames?.includes(location)) {
-          model.navToLocString(location)
-        } else {
-          const results = await fetchResults(label, 'exact')
-          if (results && results.length > 1) {
-            model.setSearchResults(results, label.toLowerCase())
-            return
-          } else if (results?.length === 1) {
-            location = results[0].getLocation()
-            trackId = results[0].getTrackId()
-          }
-
-          model.navToLocString(location, assemblyName)
-          if (trackId) {
-            model.showTrack(trackId)
-          }
-        }
-      } catch (e) {
-        console.error(e)
-        session.notify(`${e}`, 'warning')
-      }
-    }
-
-    const controls = (
-      <div className={classes.headerBar}>
-        <Controls model={model} />
-        <div className={classes.spacer} />
-        <FormGroup row className={classes.headerForm}>
-          <PanControls model={model} />
-          <RefNameAutocomplete
-            onSelect={handleSelectedRegion}
-            assemblyName={assemblyName}
-            fetchResults={fetchResults}
-            model={model}
-            TextFieldProps={{
-              variant: 'outlined',
-              className: classes.headerRefName,
-              style: { margin: SPACING, minWidth: '175px' },
-              InputProps: {
-                style: {
-                  padding: 0,
-                  height: WIDGET_HEIGHT,
-                  background: alpha(theme.palette.background.paper, 0.8),
-                },
-              },
-            }}
-          />
-        </FormGroup>
-        <RegionWidth model={model} />
-        <ZoomControls model={model} />
-        <div className={classes.spacer} />
-      </div>
-    )
-
-    if (model.hideHeaderOverview) {
-      return controls
-    }
+const Controls = ({ model }: { model: LGV }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.headerBar}>
+      <HeaderButtons model={model} />
+      <div className={classes.spacer} />
+      <FormGroup row className={classes.headerForm}>
+        <PanControls model={model} />
+        <SearchBox model={model} />
+      </FormGroup>
+      <RegionWidth model={model} />
+      <ZoomControls model={model} />
+      <div className={classes.spacer} />
+    </div>
+  )
+}
 
-    return <OverviewScaleBar model={model}>{controls}</OverviewScaleBar>
-  },
-)
+const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
+  return model.hideHeaderOverview ? (
+    <Controls model={model} />
+  ) : (
+    <OverviewScaleBar model={model}>
+      <Controls model={model} />
+    </OverviewScaleBar>
+  )
+})
 
 export default LinearGenomeViewHeader

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -9,9 +9,9 @@ import {
   makeStyles,
 } from '@material-ui/core'
 import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
 import CloseIcon from '@material-ui/icons/Close'
 
 // locals

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

@@ -1,12 +1,10 @@
 import React from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import sizeMe from 'react-sizeme'
 import 'requestidlecallback-polyfill'
 import LinearGenomeView from './LinearGenomeView'
 
-sizeMe.noPlaceholders = true
-
 const assemblyConf = {
   name: 'volMyt1',
   sequence: {
@@ -142,9 +140,13 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, findByText } = render(<LinearGenomeView model={model} />)
+    const { container, findByText, findAllByTestId } = render(
+      <LinearGenomeView model={model} />,
+    )
     await findByText('Foo Track')
     await findByText('798 bp')
+    await findAllByTestId('svgfeatures')
+
     expect(container.firstChild).toMatchSnapshot()
   })
 })

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -66,6 +66,7 @@ const MyPopper = function (
 
 function RefNameAutocomplete({
   model,
+  showHelp = true,
   onSelect,
   assemblyName,
   style,
@@ -81,6 +82,7 @@ function RefNameAutocomplete({
   fetchResults: (query: string) => Promise<BaseResult[]>
   style?: React.CSSProperties
   minWidth?: number
+  showHelp?: boolean
   TextFieldProps?: TFP
 }) {
   const session = getSession(model)
@@ -238,11 +240,13 @@ function RefNameAutocomplete({
                     ) : (
                       <InputAdornment position="end" style={{ marginRight: 7 }}>
                         <SearchIcon />
-                        <IconButton
-                          onClick={() => setHelpDialogDisplayed(true)}
-                        >
-                          <HelpIcon />
-                        </IconButton>
+                        {showHelp ? (
+                          <IconButton
+                            onClick={() => setHelpDialogDisplayed(true)}
+                          >
+                            <HelpIcon />
+                          </IconButton>
+                        ) : null}
                       </InputAdornment>
                     )}
                     {params.InputProps.endAdornment}

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles, useTheme, alpha } from '@material-ui/core'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import { getSession } from '@jbrowse/core/util'
+import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
+
+// locals
+import RefNameAutocomplete from './RefNameAutocomplete'
+import { dedupe } from './util'
+import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
+
+const useStyles = makeStyles(() => ({
+  headerRefName: {
+    minWidth: 100,
+  },
+}))
+
+function SearchBox({
+  model,
+  showHelp,
+}: {
+  showHelp?: boolean
+  model: LinearGenomeViewModel
+}) {
+  const classes = useStyles()
+  const theme = useTheme()
+  const session = getSession(model)
+
+  const { textSearchManager, assemblyManager } = session
+  const { assemblyNames, rankSearchResults } = model
+  const assemblyName = assemblyNames[0]
+  const assembly = assemblyManager.get(assemblyName)
+  const searchScope = model.searchScope(assemblyName)
+
+  async function fetchResults(query: string, searchType?: SearchType) {
+    if (!textSearchManager) {
+      console.warn('No text search manager')
+    }
+
+    const textSearchResults = await textSearchManager?.search(
+      {
+        queryString: query,
+        searchType,
+      },
+      searchScope,
+      rankSearchResults,
+    )
+
+    const refNameResults = assembly?.allRefNames
+      ?.filter(refName => refName.startsWith(query))
+      .map(r => new BaseResult({ label: r }))
+      .slice(0, 10)
+
+    return dedupe(
+      [...(refNameResults || []), ...(textSearchResults || [])],
+      elt => elt.getId(),
+    )
+  }
+
+  async function handleSelectedRegion(option: BaseResult) {
+    let trackId = option.getTrackId()
+    let location = option.getLocation()
+    const label = option.getLabel()
+    try {
+      if (assembly?.allRefNames?.includes(location)) {
+        model.navToLocString(location)
+      } else {
+        const results = await fetchResults(label, 'exact')
+        if (results && results.length > 1) {
+          model.setSearchResults(results, label.toLowerCase())
+          return
+        } else if (results?.length === 1) {
+          location = results[0].getLocation()
+          trackId = results[0].getTrackId()
+        }
+
+        model.navToLocString(location, assemblyName)
+        if (trackId) {
+          model.showTrack(trackId)
+        }
+      }
+    } catch (e) {
+      console.error(e)
+      session.notify(`${e}`, 'warning')
+    }
+  }
+  return (
+    <RefNameAutocomplete
+      showHelp={showHelp}
+      onSelect={handleSelectedRegion}
+      assemblyName={assemblyName}
+      fetchResults={fetchResults}
+      model={model}
+      TextFieldProps={{
+        variant: 'outlined',
+        className: classes.headerRefName,
+        style: { margin: SPACING, minWidth: '175px' },
+        InputProps: {
+          style: {
+            padding: 0,
+            height: WIDGET_HEIGHT,
+            background: alpha(theme.palette.background.paper, 0.8),
+          },
+        },
+      }}
+    />
+  )
+}
+
+export default observer(SearchBox)

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,12 +1,17 @@
+import React from 'react'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import IconButton from '@material-ui/core/IconButton'
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
-import { alpha } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
+import {
+  IconButton,
+  Paper,
+  Typography,
+  alpha,
+  makeStyles,
+} from '@material-ui/core'
+
+// icons
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import DragIcon from '@material-ui/icons/DragIndicator'
 import CloseIcon from '@material-ui/icons/Close'
@@ -14,7 +19,6 @@ import CloseIcon from '@material-ui/icons/Close'
 import clsx from 'clsx'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
-import React from 'react'
 import { LinearGenomeViewStateModel } from '..'
 
 const useStyles = makeStyles(theme => ({

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

@@ -255,7 +255,8 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         <p
           class="MuiTypography-root makeStyles-bp MuiTypography-body2 MuiTypography-colorTextSecondary"
         >
-          100 bp
+          100
+           bp
         </p>
         <div
           class="makeStyles-container"
@@ -555,15 +556,8 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                 style="width: 100px;"
               >
                 <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    height="100"
-                    style="display: block;"
-                    width="100"
-                  />
-                </div>
+                  style="display: flex;"
+                />
               </div>
               <div
                 class="makeStyles-boundaryPaddingBlock"
@@ -858,7 +852,8 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <p
           class="MuiTypography-root makeStyles-bp MuiTypography-body2 MuiTypography-colorTextSecondary"
         >
-          798 bp
+          798
+           bp
         </p>
         <div
           class="makeStyles-container"
@@ -1457,6 +1452,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 >
                   <svg
                     class="SvgFeatureRendering"
+                    data-testid="svgfeatures"
                     height="100"
                     style="display: block;"
                     width="100"
@@ -1476,6 +1472,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 >
                   <svg
                     class="SvgFeatureRendering"
+                    data-testid="svgfeatures"
                     height="100"
                     style="display: block;"
                     width="1000"
@@ -1609,6 +1606,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 >
                   <svg
                     class="SvgFeatureRendering"
+                    data-testid="svgfeatures"
                     height="100"
                     style="display: block;"
                     width="100"
@@ -1628,6 +1626,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 >
                   <svg
                     class="SvgFeatureRendering"
+                    data-testid="svgfeatures"
                     height="100"
                     style="display: block;"
                     width="1000"

package/src/LinearGenomeView/index.tsx

@@ -14,6 +14,7 @@ import {
   measureText,
   parseLocString,
   springAnimate,
+  viewBpToPx,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -50,6 +51,7 @@ import MenuOpenIcon from '@material-ui/icons/MenuOpen'
 // locals
 import { renderToSvg } from './components/LinearGenomeViewSvg'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
+import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
 import ReturnToImportFormDlg from './components/ReturnToImportFormDialog'
 
@@ -99,6 +101,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 function stateModelFactory(pluginManager: PluginManager) {
   return types
@@ -122,9 +126,18 @@ export function stateModelFactory(pluginManager: PluginManager) {
           types.enumeration(['hierarchical']),
           'hierarchical',
         ),
-        trackLabels: 'overlapping' as 'overlapping' | 'hidden' | 'offset',
-        showCenterLine: false,
-        showCytobandsSetting: true,
+        trackLabels: types.optional(
+          types.string,
+          () => localStorage.getItem('lgv-trackLabels') || 'overlapping',
+        ),
+        showCenterLine: types.optional(types.boolean, () => {
+          const setting = localStorage.getItem('lgv-showCenterLine')
+          return setting !== undefined ? !!setting : false
+        }),
+        showCytobandsSetting: types.optional(types.boolean, () => {
+          const setting = localStorage.getItem('lgv-showCytobands')
+          return setting !== undefined ? !!setting : true
+        }),
       }),
     )
     .volatile(() => ({
@@ -213,11 +226,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         )
       },
       get totalBp() {
-        let totalbp = 0
-        self.displayedRegions.forEach(region => {
-          totalbp += region.end - region.start
-        })
-        return totalbp
+        return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0)
       },
 
       get maxBpPerPx() {
@@ -288,47 +297,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         coord: number
         regionNumber?: number
       }) {
-        let offsetBp = 0
-
-        const interRegionPaddingBp = self.interRegionPaddingWidth * self.bpPerPx
-        const minimumBlockBp = self.minimumBlockWidth * self.bpPerPx
-        const index = self.displayedRegions.findIndex((region, idx) => {
-          const len = region.end - region.start
-          if (
-            refName === region.refName &&
-            coord >= region.start &&
-            coord <= region.end
-          ) {
-            if (regionNumber ? regionNumber === idx : true) {
-              offsetBp += region.reversed
-                ? region.end - coord
-                : coord - region.start
-              return true
-            }
-          }
-
-          // add the interRegionPaddingWidth if the boundary is in the screen
-          // e.g. offset>=0 && offset<width
-          if (
-            len > minimumBlockBp &&
-            offsetBp / self.bpPerPx >= 0 &&
-            offsetBp / self.bpPerPx < self.width
-          ) {
-            offsetBp += len + interRegionPaddingBp
-          } else {
-            offsetBp += len
-          }
-          return false
-        })
-        const foundRegion = self.displayedRegions[index]
-        if (foundRegion) {
-          return {
-            index,
-            offsetPx: Math.round(offsetBp / self.bpPerPx),
-          }
-        }
-
-        return undefined
+        return viewBpToPx({ refName, coord, regionNumber, self })
       },
       /**
        *
@@ -474,6 +443,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
     .actions(self => ({
       setShowCytobands(flag: boolean) {
         self.showCytobandsSetting = flag
+        localStorage.setItem('lgv-showCytobands', `${+flag}`)
       },
       setWidth(newWidth: number) {
         self.volatileWidth = newWidth
@@ -566,11 +536,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
           trackId,
         )
         if (!configuration) {
-          throw new Error(`Could not resolve identifier`)
+          throw new Error(`Could not resolve identifier "${trackId}"`)
         }
         const trackType = pluginManager.getTrackType(configuration?.type)
         if (!trackType) {
-          throw new Error(`unknown track type ${configuration.type}`)
+          throw new Error(`Unknown track type ${configuration.type}`)
         }
         const viewType = pluginManager.getViewType(self.type)
         const supportedDisplays = viewType.displayTypes.map(
@@ -581,7 +551,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         )
         if (!displayConf) {
           throw new Error(
-            `could not find a compatible display for view type ${self.type}`,
+            `Could not find a compatible display for view type ${self.type}`,
           )
         }
 
@@ -666,10 +636,12 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
       setTrackLabels(setting: 'overlapping' | 'offset' | 'hidden') {
         self.trackLabels = setting
+        localStorage.setItem('lgv-trackLabels', setting)
       },
 
       toggleCenterLine() {
         self.showCenterLine = !self.showCenterLine
+        localStorage.setItem('lgv-showCenterLine', `${+self.showCenterLine}`)
       },
 
       setDisplayedRegions(regions: Region[]) {
@@ -1456,7 +1428,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
     }))
 }
 
-export { renderToSvg, RefNameAutocomplete }
+export { renderToSvg, RefNameAutocomplete, SearchBox }
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>
 export { default as ReactComponent } from './components/LinearGenomeView'