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

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -29,6 +29,7 @@ import {
   getRpcSessionId,
 } from '@jbrowse/core/util/tracks'
 
+// locals
 import ServerSideRenderedBlockContent from '../components/ServerSideRenderedBlockContent'
 
 // the MST state of a single server-side-rendered block in a display
@@ -65,7 +66,7 @@ const blockState = types
         makeAbortableReaction(
           self as any,
           renderBlockData,
-          renderBlockEffect as any, // reaction doesn't expect async here
+          renderBlockEffect, // reaction doesn't expect async here
           {
             name: `${display.id}/${assembleLocString(self.region)} rendering`,
             delay: display.renderDelay,
@@ -140,7 +141,7 @@ const blockState = types
         self.renderProps = renderProps
         renderInProgress = undefined
       },
-      setError(error: Error | unknown) {
+      setError(error: unknown) {
         console.error(error)
         if (renderInProgress && !renderInProgress.signal.aborted) {
           renderInProgress.abort()
@@ -260,24 +261,14 @@ export function renderBlockData(
   }
 }
 
-interface RenderProps {
-  displayError: Error
-  rendererType: any
-  renderProps: { [key: string]: any }
-  rpcManager: { call: Function }
-  cannotBeRenderedReason: string
-  renderArgs: { [key: string]: any }
-}
-
-interface ErrorProps {
-  displayError: string
-}
-
 async function renderBlockEffect(
-  props: RenderProps | ErrorProps,
+  props: ReturnType<typeof renderBlockData> | undefined,
   signal: AbortSignal,
   self: BlockModel,
 ) {
+  if (!props) {
+    return
+  }
   const {
     rendererType,
     renderProps,
@@ -285,7 +276,7 @@ async function renderBlockEffect(
     renderArgs,
     cannotBeRenderedReason,
     displayError,
-  } = props as RenderProps
+  } = props
   if (!isAlive(self)) {
     return undefined
   }
@@ -315,5 +306,6 @@ async function renderBlockEffect(
     features,
     layout,
     maxHeightReached,
+    renderProps,
   }
 }

package/src/LinearGenomeView/components/CenterLine.tsx

@@ -5,13 +5,13 @@ import { LinearGenomeViewModel } from '..'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   centerLineContainer: {
     background: 'transparent',
     height: '100%',
     zIndex: 5, // above the track but under menu
     position: 'absolute',
-    border: '1px black dashed',
+    border: `1px ${theme.palette.action.active} dashed`,
     borderTop: 'none',
     borderBottom: 'none',
     pointerEvents: 'none',

package/src/LinearGenomeView/components/Cytobands.tsx

@@ -0,0 +1,154 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+// core
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
+import { ContentBlock } from '@jbrowse/core/util/blockTypes'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+
+// locals
+import { HEADER_OVERVIEW_HEIGHT } from '..'
+import { getCytobands } from './util'
+
+// rounded rect from https://stackoverflow.com/a/45889603/2129219
+// prettier-ignore
+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
+       + "v" + (height - 2 * radius)
+       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
+       + "h" + (radius - width)
+       + "z";
+}
+
+// prettier-ignore
+function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
+  return "M" + (x + radius) + "," + y
+       + "h" + (width - radius)
+       + "v" + height
+       + "h" + (radius - width)
+       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
+       + "v" + (2 * radius - height)
+       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
+       + "z";
+}
+
+const colorMap: { [key: string]: string | undefined } = {
+  gneg: 'rgb(227,227,227)',
+  gpos25: 'rgb(142,142,142)',
+  gpos50: 'rgb(85,85,85)',
+  gpos100: 'rgb(0,0,0)',
+  gpos75: 'rgb(57,57,57)',
+  gvar: 'rgb(0,0,0)',
+  stalk: 'rgb(127,127,127)',
+  acen: '#800',
+}
+
+export default observer(function Cytobands({
+  overview,
+  block,
+  assembly,
+}: {
+  overview: Base1DViewModel
+  assembly?: Assembly
+  block: ContentBlock
+}) {
+  const { offsetPx, reversed } = block
+  const cytobands = getCytobands(assembly, block.refName)
+  const coords = cytobands.map(f => {
+    const { refName, start, end, type } = f
+    return [
+      overview.bpToPx({
+        refName,
+        coord: start,
+      }),
+      overview.bpToPx({
+        refName,
+        coord: end,
+      }),
+      type,
+    ]
+  })
+
+  const arr = cytobands || []
+  const lcap = reversed ? arr.length - 1 : 0
+  const rcap = reversed ? 0 : arr.length - 1
+
+  let firstCent = true
+  return (
+    <g transform={`translate(-${offsetPx})`}>
+      {coords.map(([start, end, type], index) => {
+        const key = `${start}-${end}-${type}`
+        if (type === 'acen' && firstCent) {
+          firstCent = false
+          return (
+            <polygon
+              key={key}
+              points={[
+                [start, 0],
+                [end, HEADER_OVERVIEW_HEIGHT / 2],
+                [start, HEADER_OVERVIEW_HEIGHT],
+              ].toString()}
+              fill={colorMap[type]}
+            />
+          )
+        }
+        if (type === 'acen' && !firstCent) {
+          return (
+            <polygon
+              key={key}
+              points={[
+                [start, HEADER_OVERVIEW_HEIGHT / 2],
+                [end, 0],
+                [end, HEADER_OVERVIEW_HEIGHT],
+              ].toString()}
+              fill={colorMap[type]}
+            />
+          )
+        }
+
+        if (lcap === index) {
+          return (
+            <path
+              key={key}
+              d={leftRoundedRect(
+                Math.min(start, end),
+                0,
+                Math.abs(end - start),
+                HEADER_OVERVIEW_HEIGHT,
+                8,
+              )}
+              fill={colorMap[type]}
+            />
+          )
+        } else if (rcap === index) {
+          return (
+            <path
+              key={key}
+              d={rightRoundedRect(
+                Math.min(start, end),
+                0,
+                Math.abs(end - start) - 2,
+                HEADER_OVERVIEW_HEIGHT,
+                8,
+              )}
+              fill={colorMap[type]}
+            />
+          )
+        } else {
+          return (
+            <rect
+              key={key}
+              x={Math.min(start, end)}
+              y={0}
+              width={Math.abs(end - start)}
+              height={HEADER_OVERVIEW_HEIGHT}
+              fill={colorMap[type]}
+            />
+          )
+        }
+      })}
+    </g>
+  )
+})

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-ignore
+                  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/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>