@jbrowse/plugin-linear-genome-view 2.1.4 → 2.1.6

package/esm/index.js

@@ -10,7 +10,7 @@ import { isAbstractMenuManager } from '@jbrowse/core/util';
 import LineStyleIcon from '@mui/icons-material/LineStyle';
 import { BaseLinearDisplay, BaseLinearDisplayComponent, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
 import { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModelFactory as LinearBareDisplayStateModelFactory, } from './LinearBareDisplay';
-import { stateModelFactory as linearGenomeViewStateModelFactory, renderToSvg, RefNameAutocomplete, SearchBox, } from './LinearGenomeView';
+import { stateModelFactory as linearGenomeViewStateModelFactory, renderToSvg, RefNameAutocomplete, SearchBox, ZoomControls, LinearGenomeView, } from './LinearGenomeView';
 import { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
 export default class LinearGenomeViewPlugin extends Plugin {
     constructor() {
@@ -20,6 +20,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             BaseLinearDisplayComponent,
             BaseLinearDisplay,
             baseLinearDisplayConfigSchema,
+            SearchBox,
+            ZoomControls,
+            LinearGenomeView,
         };
     }
     install(pluginManager) {

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -58,11 +58,12 @@
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
+    "react-error-boundary": "^3.0.0",
     "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "8f53e016dd83b01a1beea0fc61c33964f5b6c809"
+  "gitHead": "df810d2a4f057adcd8f5345d54972508fba007a7"
 }

package/src/BaseLinearDisplay/components/BlockMsg.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Tooltip, Button, Alert, AlertColor } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  ellipses: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+})
+
+export default function BlockMsg({
+  message,
+  severity,
+  buttonText,
+  icon,
+  action,
+}: {
+  message: string
+  severity?: AlertColor
+  buttonText?: string
+  icon?: React.ReactNode
+  action?: () => void
+}) {
+  const { classes } = useStyles()
+  const button = action ? (
+    <Button data-testid="reload_button" onClick={action} startIcon={icon}>
+      {buttonText}
+    </Button>
+  ) : null
+  return (
+    <Tooltip title={message}>
+      <Alert
+        severity={severity}
+        action={button}
+        classes={{ message: classes.ellipses }}
+      >
+        {message}
+      </Alert>
+    </Tooltip>
+  )
+}

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { Typography, Button } from '@mui/material'
+import { Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
-import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import RefreshIcon from '@mui/icons-material/Refresh'
 
+import BlockMsg from './BlockMsg'
+
 const useStyles = makeStyles()(theme => ({
   loading: {
     paddingLeft: '0.6em',
@@ -17,26 +18,6 @@ const useStyles = makeStyles()(theme => ({
     pointerEvents: 'none',
     textAlign: 'center',
   },
-  blockMessage: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    padding: theme.spacing(2),
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-  blockError: {
-    padding: theme.spacing(2),
-    width: '100%',
-    whiteSpace: 'normal',
-    color: theme.palette.error.main,
-    overflowY: 'auto',
-  },
-  blockReactNodeMessage: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    padding: theme.spacing(2),
-    textAlign: 'center',
-  },
   dots: {
     '&::after': {
       display: 'inline-block',
@@ -59,15 +40,6 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function Repeater({ children }: { children: React.ReactNode }) {
-  return (
-    <div style={{ display: 'flex' }}>
-      {children}
-      {children}
-    </div>
-  )
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingMessage = observer(({ model }: { model: any }) => {
   // only show the loading message after 300ms to prevent excessive flickering
@@ -103,50 +75,6 @@ const LoadingMessage = observer(({ model }: { model: any }) => {
   )
 })
 
-function BlockMessage({
-  messageContent,
-}: {
-  messageContent: string | React.ReactNode
-}) {
-  const { classes } = useStyles()
-
-  return React.isValidElement(messageContent) ? (
-    <div className={classes.blockReactNodeMessage}>{messageContent}</div>
-  ) : (
-    <Typography variant="body2" className={classes.blockMessage}>
-      {messageContent}
-    </Typography>
-  )
-}
-
-function BlockError({
-  error,
-  reload,
-  displayHeight,
-}: {
-  error: Error
-  reload: () => void
-  displayHeight: number
-}) {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.blockError} style={{ height: displayHeight }}>
-      {reload ? (
-        <Button
-          data-testid="reload_button"
-          onClick={reload}
-          startIcon={<RefreshIcon />}
-        >
-          Reload
-        </Button>
-      ) : null}
-      <Typography color="error" variant="body2" display="inline">
-        {`${error}`}
-      </Typography>
-    </div>
-  )
-}
-
 const ServerSideRenderedBlockContent = observer(
   ({
     model,
@@ -156,28 +84,25 @@ const ServerSideRenderedBlockContent = observer(
   }) => {
     if (model.error) {
       return (
-        <Repeater>
-          <BlockError
-            error={model.error}
-            reload={model.reload}
-            displayHeight={getParentRenderProps(model).displayModel.height}
-          />
-        </Repeater>
+        <BlockMsg
+          message={`${model.error}`}
+          severity="error"
+          buttonText="reload"
+          icon={<RefreshIcon />}
+          action={model.reload}
+        />
       )
     }
     if (model.message) {
-      return (
-        <Repeater>
-          <BlockMessage messageContent={model.message} />
-        </Repeater>
+      // the message can be a fully rendered react component, e.g. the region too large message
+      return React.isValidElement(model.message) ? (
+        model.message
+      ) : (
+        <BlockMsg message={`${model.message}`} severity="info" />
       )
     }
     if (!model.filled) {
-      return (
-        <Repeater>
-          <LoadingMessage model={model} />
-        </Repeater>
-      )
+      return <LoadingMessage model={model} />
     }
     return model.reactElement
   },

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
-import { Button, Typography } from '@mui/material'
+import TooLargeMessage from './TooLargeMessage'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
@@ -498,36 +498,8 @@ export const BaseLinearDisplay = types
      *  react node allows user to force load at current setting
      */
     regionCannotBeRendered(_region: Region) {
-      const { regionTooLarge, regionTooLargeReason } = self
-
-      if (regionTooLarge) {
-        return (
-          <>
-            <Typography component="span" variant="body2">
-              {regionTooLargeReason ? regionTooLargeReason + '. ' : ''}
-              Zoom in to see features or{' '}
-            </Typography>
-            <Button
-              data-testid="force_reload_button"
-              onClick={() => {
-                if (!self.estimatedRegionStats) {
-                  console.error('No global stats?')
-                } else {
-                  self.updateStatsLimit(self.estimatedRegionStats)
-                  self.reload()
-                }
-              }}
-              variant="outlined"
-            >
-              Force Load
-            </Button>
-            <Typography component="span" variant="body2">
-              (force load may be slow)
-            </Typography>
-          </>
-        )
-      }
-      return undefined
+      const { regionTooLarge } = self
+      return regionTooLarge ? <TooLargeMessage model={self} /> : null
     },
 
     trackMenuItems(): MenuItem[] {

package/src/BaseLinearDisplay/models/TooLargeMessage.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import BlockMsg from '../components/BlockMsg'
+import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
+
+function TooLargeMessage({
+  model,
+}: {
+  model: {
+    regionTooLargeReason: string
+    estimatedRegionStats?: Stats
+    updateStatsLimit: (s: Stats) => void
+    reload: () => void
+  }
+}) {
+  const { regionTooLargeReason } = model
+  return (
+    <BlockMsg
+      severity="warning"
+      action={() => {
+        if (!model.estimatedRegionStats) {
+          console.error('No global stats?')
+        } else {
+          model.updateStatsLimit(model.estimatedRegionStats)
+          model.reload()
+        }
+      }}
+      buttonText="Force load"
+      message={`${regionTooLargeReason ? regionTooLargeReason + '. ' : ''}
+      Zoom in to see features or force load (may be slow).`}
+    />
+  )
+}
+
+export default TooLargeMessage

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -196,7 +196,7 @@ export type BlockModel = Instance<BlockStateModel>
 // calls the render worker to render the block content not using a flow for
 // this, because the flow doesn't work with autorun
 export function renderBlockData(
-  self: Instance<BlockStateModel>,
+  self: BlockModel,
   optDisplay?: AbstractDisplayModel,
 ) {
   try {
@@ -269,7 +269,7 @@ interface ErrorProps {
 async function renderBlockEffect(
   props: RenderProps | ErrorProps,
   signal: AbortSignal,
-  self: Instance<BlockStateModel>,
+  self: BlockModel,
 ) {
   const {
     rendererType,

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material'
 import { ErrorMessage } from '@jbrowse/core/ui'
 import CloseIcon from '@mui/icons-material/Close'
-import { LinearGenomeViewModel as LGV } from '..'
+import { ExportSvgOptions } from '..'
 
 const useStyles = makeStyles()(theme => ({
   closeButton: {
@@ -39,7 +39,7 @@ export default function ExportSvgDlg({
   model,
   handleClose,
 }: {
-  model: LGV
+  model: { exportSvg(opts: ExportSvgOptions): void }
   handleClose: () => void
 }) {
   // @ts-ignore

package/src/LinearGenomeView/components/Header.tsx

@@ -119,13 +119,15 @@ const Controls = ({ model }: { model: LGV }) => {
 }
 
 const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
-  return model.hideHeaderOverview ? (
-    <Controls model={model} />
-  ) : (
-    <OverviewScaleBar model={model}>
+  return !model.hideHeader ? (
+    model.hideHeaderOverview ? (
       <Controls model={model} />
-    </OverviewScaleBar>
-  )
+    ) : (
+      <OverviewScaleBar model={model}>
+        <Controls model={model} />
+      </OverviewScaleBar>
+    )
+  ) : null
 })
 
 export default LinearGenomeViewHeader

package/src/LinearGenomeView/components/{LinearGenomeView.test.js → LinearGenomeView.test.tsx}

@@ -1,9 +1,13 @@
 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 '@testing-library/jest-dom/extend-expect'
 import 'requestidlecallback-polyfill'
+
+// locals
 import LinearGenomeView from './LinearGenomeView'
+
+// mock
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 const assemblyConf = {
@@ -38,7 +42,9 @@ describe('<LinearGenomeView />', () => {
     const elt = await findByText('Open')
     await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
     fireEvent.click(elt)
-    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), 15000)
+    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), {
+      timeout: 15000,
+    })
   }, 15000)
 
   it('renders one track, one region', async () => {
@@ -76,7 +82,7 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, getByPlaceholderText, findByText } = render(
+    const { container, queryByText, getByPlaceholderText, findByText } = render(
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
@@ -85,10 +91,11 @@ describe('<LinearGenomeView />', () => {
     await findByText('100bp')
 
     await waitFor(() => {
-      expect(getByPlaceholderText('Search for location').value).toEqual(
-        'ctgA:1..100',
-      )
+      expect(
+        (getByPlaceholderText('Search for location') as HTMLInputElement).value,
+      ).toEqual('ctgA:1..100')
     })
+    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
     expect(container.firstChild).toMatchSnapshot()
   })
 
@@ -102,6 +109,7 @@ describe('<LinearGenomeView />', () => {
       type: 'BasicTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
+
     session.addTrackConf({
       trackId: 'testConfig2',
       name: 'Bar Track',
@@ -151,12 +159,13 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, findByText, findAllByTestId } = render(
+    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())
 
     expect(container.firstChild).toMatchSnapshot()
   })

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
+import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+import { ErrorMessage } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
 import { LinearGenomeViewModel } from '..'
-import Header from './Header'
 import TrackContainer from './TrackContainer'
 import TracksContainer from './TracksContainer'
 import ImportForm from './ImportForm'
-import MiniControls from './MiniControls'
 import GetSequenceDialog from './GetSequenceDialog'
 import SearchResultsDialog from './SearchResultsDialog'
 
@@ -45,7 +45,7 @@ const useStyles = makeStyles()(theme => ({
 }))
 
 const LinearGenomeView = observer(({ model }: { model: LGV }) => {
-  const { tracks, error, hideHeader, initialized, hasDisplayedRegions } = model
+  const { tracks, error, initialized, hasDisplayedRegions } = model
   const { classes } = useStyles()
 
   if (!initialized && !error) {
@@ -59,6 +59,9 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
     return <ImportForm model={model} />
   }
 
+  const MiniControlsComponent = model.MiniControlsComponent()
+  const HeaderComponent = model.HeaderComponent()
+
   return (
     <div style={{ position: 'relative' }}>
       {model.seqDialogDisplayed ? (
@@ -73,19 +76,8 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           handleClose={() => model.setSearchResults(undefined, undefined)}
         />
       ) : null}
-      {!hideHeader ? (
-        <Header model={model} />
-      ) : (
-        <div
-          style={{
-            position: 'absolute',
-            right: 0,
-            zIndex: 1001,
-          }}
-        >
-          <MiniControls model={model} />
-        </div>
-      )}
+      <HeaderComponent model={model} />
+      <MiniControlsComponent model={model} />
       <TracksContainer model={model}>
         {!tracks.length ? (
           <Paper variant="outlined" className={classes.note}>
@@ -108,7 +100,12 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           </Paper>
         ) : (
           tracks.map(track => (
-            <TrackContainer key={track.id} model={model} track={track} />
+            <ErrorBoundary
+              key={track.id}
+              FallbackComponent={({ error }) => <ErrorMessage error={error} />}
+            >
+              <TrackContainer model={model} track={track} />
+            </ErrorBoundary>
           ))
         )}
       </TracksContainer>

package/src/LinearGenomeView/components/MiniControls.tsx

@@ -9,46 +9,48 @@ import { LinearGenomeViewModel } from '..'
 
 const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
   const { model } = props
-  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor } = model
+  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
   const [anchorEl, setAnchorEl] = useState<HTMLElement>()
 
-  return (
-    <Paper style={{ background: '#aaa7' }}>
-      <IconButton
-        color="secondary"
-        onClick={event => setAnchorEl(event.currentTarget)}
-      >
-        <ArrowDown fontSize="small" />
-      </IconButton>
+  return hideHeader ? (
+    <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
+      <Paper style={{ background: '#aaa7' }}>
+        <IconButton
+          color="secondary"
+          onClick={event => setAnchorEl(event.currentTarget)}
+        >
+          <ArrowDown fontSize="small" />
+        </IconButton>
 
-      <IconButton
-        data-testid="zoom_out"
-        onClick={() => model.zoom(bpPerPx * 2)}
-        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        color="secondary"
-      >
-        <ZoomOut fontSize="small" />
-      </IconButton>
-      <IconButton
-        data-testid="zoom_in"
-        onClick={() => model.zoom(model.bpPerPx / 2)}
-        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        color="secondary"
-      >
-        <ZoomIn fontSize="small" />
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onMenuItemClick={(_, callback) => {
-          callback()
-          setAnchorEl(undefined)
-        }}
-        onClose={() => setAnchorEl(undefined)}
-        menuItems={model.menuItems()}
-      />
-    </Paper>
-  )
+        <IconButton
+          data-testid="zoom_out"
+          onClick={() => model.zoom(bpPerPx * 2)}
+          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
+          color="secondary"
+        >
+          <ZoomOut fontSize="small" />
+        </IconButton>
+        <IconButton
+          data-testid="zoom_in"
+          onClick={() => model.zoom(model.bpPerPx / 2)}
+          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
+          color="secondary"
+        >
+          <ZoomIn fontSize="small" />
+        </IconButton>
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onMenuItemClick={(_, callback) => {
+            callback()
+            setAnchorEl(undefined)
+          }}
+          onClose={() => setAnchorEl(undefined)}
+          menuItems={model.menuItems()}
+        />
+      </Paper>
+    </div>
+  ) : null
 })
 
 export default MiniControls

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Typography, useTheme, alpha } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
 import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
@@ -79,7 +78,7 @@ const Polygon = observer(
     useOffset = true,
   }: {
     model: LGV
-    overview: Instance<Base1DViewModel>
+    overview: Base1DViewModel
     useOffset?: boolean
   }) => {
     const theme = useTheme()
@@ -305,7 +304,7 @@ const OverviewBox = observer(
     overview: Base1DViewModel
   }) => {
     const { classes, cx } = useStyles()
-    const { cytobandOffset, bpPerPx, showCytobands } = model
+    const { cytobandOffset, showCytobands } = model
     const { start, end, reversed, refName, assemblyName } = block
     const { majorPitch } = chooseGridPitch(scale, 120, 15)
     const { assemblyManager } = getSession(model)
@@ -361,7 +360,7 @@ const OverviewBox = observer(
                     color: refNameColor,
                   }}
                 >
-                  {getTickDisplayStr(tickLabel, bpPerPx)}
+                  {getTickDisplayStr(tickLabel, overview.bpPerPx)}
                 </Typography>
               ))
             : null}