@jbrowse/plugin-linear-genome-view 1.7.9 → 2.0.0

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { Typography, makeStyles, useTheme, alpha } from '@material-ui/core'
+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 clsx from 'clsx'
 
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
 import { ContentBlock } from '@jbrowse/core/util/blockTypes'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 
@@ -20,60 +20,57 @@ import OverviewRubberBand from './OverviewRubberBand'
 
 const wholeSeqSpacer = 2
 
-const useStyles = makeStyles(theme => {
-  return {
-    scaleBar: {
-      height: HEADER_OVERVIEW_HEIGHT,
-    },
-    scaleBarBorder: {
-      border: '1px solid',
-    },
-    scaleBarContig: {
-      backgroundColor: theme.palette.background.default,
-      position: 'absolute',
-      top: 0,
-      height: HEADER_OVERVIEW_HEIGHT,
-    },
-    scaleBarContigForward: {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
-      backgroundRepeat: 'repeat',
-    },
-    scaleBarContigReverse: {
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
-      backgroundRepeat: 'repeat',
-    },
-
-    scaleBarRefName: {
-      position: 'absolute',
-      fontWeight: 'bold',
-      pointerEvents: 'none',
-      zIndex: 100,
-    },
-    scaleBarLabel: {
-      height: HEADER_OVERVIEW_HEIGHT,
-      width: 1,
-      position: 'absolute',
-      display: 'flex',
-      justifyContent: 'center',
-      pointerEvents: 'none',
-    },
-    scaleBarVisibleRegion: {
-      position: 'absolute',
-      height: HEADER_OVERVIEW_HEIGHT,
-      pointerEvents: 'none',
-      zIndex: 100,
-      border: '1px solid',
-    },
-    overview: {
-      height: HEADER_BAR_HEIGHT,
-      position: 'relative',
-    },
-    overviewSvg: {
-      width: '100%',
-      position: 'absolute',
-    },
-  }
-})
+const useStyles = makeStyles()(theme => ({
+  scaleBar: {
+    height: HEADER_OVERVIEW_HEIGHT,
+  },
+  scaleBarBorder: {
+    border: '1px solid',
+  },
+  scaleBarContig: {
+    backgroundColor: theme.palette.background.default,
+    position: 'absolute',
+    top: 0,
+    height: HEADER_OVERVIEW_HEIGHT,
+  },
+  scaleBarContigForward: {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'repeat',
+  },
+  scaleBarContigReverse: {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'repeat',
+  },
+
+  scaleBarRefName: {
+    position: 'absolute',
+    fontWeight: 'bold',
+    pointerEvents: 'none',
+    zIndex: 100,
+  },
+  scaleBarLabel: {
+    height: HEADER_OVERVIEW_HEIGHT,
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+  scaleBarVisibleRegion: {
+    position: 'absolute',
+    height: HEADER_OVERVIEW_HEIGHT,
+    pointerEvents: 'none',
+    zIndex: 100,
+    border: '1px solid',
+  },
+  overview: {
+    height: HEADER_BAR_HEIGHT,
+    position: 'relative',
+  },
+  overviewSvg: {
+    width: '100%',
+    position: 'absolute',
+  },
+}))
 
 const Polygon = observer(
   ({
@@ -90,6 +87,8 @@ const Polygon = observer(
     const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } =
       model
     const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks
+
+    // @ts-ignore
     const { tertiary, primary } = theme.palette
     const polygonColor = tertiary ? tertiary.light : primary.light
 
@@ -171,6 +170,19 @@ const colorMap: { [key: string]: string | undefined } = {
   acen: '#800',
 }
 
+function getCytobands(assembly: Assembly | undefined, refName: string) {
+  return (
+    assembly?.cytobands
+      ?.map(f => ({
+        refName: assembly.getCanonicalRefName(f.get('refName')),
+        start: f.get('start'),
+        end: f.get('end'),
+        type: f.get('type'),
+      }))
+      .filter(f => f.refName === refName) || []
+  )
+}
+
 const Cytobands = observer(
   ({
     overview,
@@ -182,37 +194,30 @@ const Cytobands = observer(
     block: ContentBlock
   }) => {
     const { offsetPx, reversed } = block
-    const cytobands = assembly?.cytobands
-      ?.map(f => ({
-        refName: assembly.getCanonicalRefName(f.get('refName')),
-        start: f.get('start'),
-        end: f.get('end'),
-        type: f.get('type'),
-      }))
-      .filter(f => f.refName === block.refName)
-      .map(f => {
-        const { refName, start, end, type } = f
-        return [
-          overview.bpToPx({
-            refName,
-            coord: start,
-          }),
-          overview.bpToPx({
-            refName,
-            coord: end,
-          }),
-          type,
-        ]
-      })
+    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 cytobands ? (
+    return (
       <g transform={`translate(-${offsetPx})`}>
-        {cytobands.map(([start, end, type], index) => {
+        {coords.map(([start, end, type], index) => {
           const key = `${start}-${end}-${type}`
           if (type === 'acen' && firstCent) {
             firstCent = false
@@ -284,7 +289,7 @@ const Cytobands = observer(
           }
         })}
       </g>
-    ) : null
+    )
   },
 )
 
@@ -300,8 +305,8 @@ const OverviewBox = observer(
     block: ContentBlock
     overview: Base1DViewModel
   }) => {
-    const classes = useStyles()
-    const { cytobandOffset, showCytobands } = model
+    const { classes, cx } = useStyles()
+    const { cytobandOffset, bpPerPx, showCytobands } = model
     const { start, end, reversed, refName, assemblyName } = block
     const { majorPitch } = chooseGridPitch(scale, 120, 15)
     const { assemblyManager } = getSession(model)
@@ -314,27 +319,30 @@ const OverviewBox = observer(
       tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel)
     }
 
+    const canDisplayCytobands =
+      showCytobands && getCytobands(assembly, block.refName).length
+
     return (
       <div>
         {/* name of sequence */}
         <Typography
           style={{
             left: block.offsetPx + 3,
-            color: showCytobands ? 'black' : refNameColor,
+            color: canDisplayCytobands ? 'black' : refNameColor,
           }}
           className={classes.scaleBarRefName}
         >
           {refName}
         </Typography>
         <div
-          className={clsx(
+          className={cx(
             classes.scaleBarContig,
-            showCytobands
+            canDisplayCytobands
               ? undefined
               : reversed
               ? classes.scaleBarContigReverse
               : classes.scaleBarContigForward,
-            !showCytobands ? classes.scaleBarBorder : undefined,
+            !canDisplayCytobands ? classes.scaleBarBorder : undefined,
           )}
           style={{
             left: block.offsetPx + cytobandOffset,
@@ -342,7 +350,7 @@ const OverviewBox = observer(
             borderColor: refNameColor,
           }}
         >
-          {!showCytobands
+          {!canDisplayCytobands
             ? tickLabels.map((tickLabel, labelIdx) => (
                 <Typography
                   key={`${JSON.stringify(block)}-${tickLabel}-${labelIdx}`}
@@ -354,12 +362,12 @@ const OverviewBox = observer(
                     color: refNameColor,
                   }}
                 >
-                  {tickLabel.toLocaleString('en-US')}
+                  {getTickDisplayStr(tickLabel, bpPerPx)}
                 </Typography>
               ))
             : null}
 
-          {showCytobands ? (
+          {canDisplayCytobands ? (
             <svg style={{ width: '100%' }}>
               <Cytobands
                 overview={overview}
@@ -384,11 +392,13 @@ const ScaleBar = observer(
     overview: Base1DViewModel
     scale: number
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const theme = useTheme()
     const { dynamicBlocks, showCytobands, cytobandOffset } = model
     const visibleRegions = dynamicBlocks.contentBlocks
     const overviewVisibleRegions = overview.dynamicBlocks
+
+    // @ts-ignore
     const { tertiary, primary } = theme.palette
     const scaleBarColor = tertiary ? tertiary.light : primary.light
 
@@ -459,7 +469,7 @@ function OverviewScaleBar({
   model: LGV
   children: React.ReactNode
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { totalBp, width, cytobandOffset, displayedRegions } = model
 
   const overview = Base1DView.create({

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -5,20 +5,17 @@ import BaseResult, {
   RefSequenceResult,
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
+  Autocomplete,
   CircularProgress,
   IconButton,
   InputAdornment,
-  Popper,
-  PopperProps,
   TextField,
   TextFieldProps as TFP,
-  Typography,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // icons
-import SearchIcon from '@material-ui/icons/Search'
-import Autocomplete from '@material-ui/lab/Autocomplete'
-import HelpIcon from '@material-ui/icons/Help'
+import SearchIcon from '@mui/icons-material/Search'
+import HelpIcon from '@mui/icons-material/Help'
 
 // locals
 import { LinearGenomeViewModel } from '..'
@@ -45,25 +42,6 @@ function filterOptions(options: Option[], searchQuery: string) {
   })
 }
 
-// MyPopper used to expand search results box wider if needed
-// xref https://stackoverflow.com/a/63583835/2129219
-const MyPopper = function (
-  props: PopperProps & { style?: { width?: unknown } },
-) {
-  const { style } = props
-  return (
-    <Popper
-      {...props}
-      style={{
-        width: 'fit-content',
-        minWidth: Math.min(+(style?.width || 0), 200),
-        background: 'white',
-      }}
-      placement="bottom-start"
-    />
-  )
-}
-
 function RefNameAutocomplete({
   model,
   onSelect,
@@ -164,7 +142,6 @@ function RefNameAutocomplete({
         data-testid="autocomplete"
         disableListWrap
         disableClearable
-        PopperComponent={MyPopper}
         disabled={!assemblyName}
         freeSolo
         includeInputInList
@@ -226,11 +203,11 @@ function RefNameAutocomplete({
           const { helperText, InputProps = {} } = TextFieldProps
           return (
             <TextField
-              onBlur={() => {
+              onBlur={() =>
                 // this is used to restore a refName or the non-user-typed input
                 // to the box on blurring
                 setInputValue(inputBoxVal)
-              }}
+              }
               {...params}
               {...TextFieldProps}
               helperText={helperText}
@@ -244,12 +221,13 @@ function RefNameAutocomplete({
                       <CircularProgress color="inherit" size={20} />
                     ) : (
                       <InputAdornment position="end" style={{ marginRight: 7 }}>
-                        <SearchIcon />
+                        <SearchIcon fontSize="small" />
                         {showHelp ? (
                           <IconButton
                             onClick={() => setHelpDialogDisplayed(true)}
+                            size="small"
                           >
-                            <HelpIcon />
+                            <HelpIcon fontSize="small" />
                           </IconButton>
                         ) : null}
                       </InputAdornment>
@@ -259,23 +237,14 @@ function RefNameAutocomplete({
                 ),
               }}
               placeholder="Search for location"
-              onChange={e => {
-                setCurrentSearch(e.target.value)
-              }}
+              onChange={e => setCurrentSearch(e.target.value)}
             />
           )
         }}
-        renderOption={option => {
-          const { result } = option
-          const component = result.getRenderingComponent()
-          if (component && React.isValidElement(component)) {
-            return component
-          }
-
-          return <Typography noWrap>{result.getDisplayString()}</Typography>
-        }}
         getOptionLabel={option =>
-          (typeof option === 'string' ? option : option.result.getLabel()) || ''
+          (typeof option === 'string'
+            ? option
+            : option.result.getDisplayString()) || ''
         }
       />
       {isHelpDialogDisplayed ? (

package/src/LinearGenomeView/components/RubberBand.tsx

@@ -1,22 +1,19 @@
 import React, { useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
-import {
-  Popover,
-  Tooltip,
-  Typography,
-  makeStyles,
-  alpha,
-} from '@material-ui/core'
+import { Popover, Tooltip, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { stringify } from '@jbrowse/core/util'
 import { Menu } from '@jbrowse/core/ui'
 import { LinearGenomeViewModel } from '..'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => {
-  const background = theme.palette.tertiary
-    ? alpha(theme.palette.tertiary.main, 0.7)
-    : alpha(theme.palette.primary.main, 0.7)
+const useStyles = makeStyles()(theme => {
+  // @ts-ignore
+  const { primary, tertiary } = theme.palette
+  const background = tertiary
+    ? alpha(tertiary.main, 0.7)
+    : alpha(primary.main, 0.7)
   return {
     rubberBand: {
       height: '100%',
@@ -32,9 +29,7 @@ const useStyles = makeStyles(theme => {
       minHeight: 8,
     },
     rubberBandText: {
-      color: theme.palette.tertiary
-        ? theme.palette.tertiary.contrastText
-        : theme.palette.primary.contrastText,
+      color: tertiary ? tertiary.contrastText : primary.contrastText,
     },
     popover: {
       mouseEvents: 'none',
@@ -56,7 +51,7 @@ const useStyles = makeStyles(theme => {
 
 const VerticalGuide = observer(
   ({ model, coordX }: { model: LGV; coordX: number }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     return (
       <Tooltip
         open
@@ -93,10 +88,10 @@ function RubberBand({
     clientX: number
     clientY: number
   }>()
-  const [guideX, setGuideX] = useState<number | undefined>()
+  const [guideX, setGuideX] = useState<number>()
   const controlsRef = useRef<HTMLDivElement>(null)
   const rubberBandRef = useRef(null)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const mouseDragging = startX !== undefined && anchorPosition === undefined
 
   const { setOffsets, pxToBp } = model

package/src/LinearGenomeView/components/Ruler.tsx

@@ -1,17 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import ReactPropTypes from 'prop-types'
 import React from 'react'
 import { makeTicks } from '../util'
+import { getTickDisplayStr } from '@jbrowse/core/util'
 
-function mathPower(num: number): string {
-  if (num < 999) {
-    return String(num)
-  }
-  return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.substr(-3, 3)}`
-}
-
-const useStyles = makeStyles((/* theme */) => ({
+const useStyles = makeStyles()((/* theme */) => ({
   majorTickLabel: {
     fontSize: '11px',
     // fill: theme.palette.text.primary,
@@ -41,7 +35,7 @@ function Ruler({
   major: boolean
   minor: boolean
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const ticks = makeTicks(start, end, bpPerPx, major, minor)
   return (
     <>
@@ -75,7 +69,7 @@ function Ruler({
               style={{ fontSize: '11px' }}
               className={classes.majorTickLabel}
             >
-              {mathPower(tick.base + 1)}
+              {getTickDisplayStr(tick.base + 1, bpPerPx)}
             </text>
           )
         })}

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -1,10 +1,10 @@
-import { Paper, Typography, makeStyles } from '@material-ui/core'
+import { Paper, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import {
   ContentBlock,
   ElidedBlock,
   InterRegionPaddingBlock,
 } from '@jbrowse/core/util/blockTypes'
-import clsx from 'clsx'
 import { observer } from 'mobx-react'
 import React from 'react'
 import { LinearGenomeViewModel } from '..'
@@ -14,10 +14,11 @@ import {
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
+import { getTickDisplayStr } from '@jbrowse/core/util'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   scaleBarContainer: {
     overflow: 'hidden',
     position: 'relative',
@@ -59,7 +60,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   // find the block that needs pinning to the left side for context
   let lastLeftBlock = 0
@@ -94,29 +95,23 @@ const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
 })
 
 const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
+  const { bpPerPx, staticBlocks } = model
 
   return (
     <>
-      {model.staticBlocks.map((block, index) => {
+      {staticBlocks.map((block, index) => {
+        const { reversed, start, end, key, widthPx } = block
         if (block instanceof ContentBlock) {
-          const ticks = makeTicks(
-            block.start,
-            block.end,
-            model.bpPerPx,
-            true,
-            false,
-          )
+          const ticks = makeTicks(start, end, bpPerPx, true, false)
 
           return (
-            <ContentBlockComponent key={`${block.key}-${index}`} block={block}>
+            <ContentBlockComponent key={`${key}-${index}`} block={block}>
               {ticks.map(tick => {
                 if (tick.type === 'major') {
                   const x =
-                    (block.reversed
-                      ? block.end - tick.base
-                      : tick.base - block.start) / model.bpPerPx
-                  const baseNumber = (tick.base + 1).toLocaleString('en-US')
+                    (reversed ? end - tick.base : tick.base - start) / bpPerPx
+                  const baseNumber = tick.base + 1
                   return (
                     <div
                       key={tick.base}
@@ -125,7 +120,7 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
                     >
                       {baseNumber ? (
                         <Typography className={classes.majorTickLabel}>
-                          {baseNumber}
+                          {getTickDisplayStr(baseNumber, bpPerPx)}
                         </Typography>
                       ) : null}
                     </div>
@@ -137,13 +132,13 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
           )
         }
         if (block instanceof ElidedBlock) {
-          return <ElidedBlockComponent key={block.key} width={block.widthPx} />
+          return <ElidedBlockComponent key={key} width={widthPx} />
         }
         if (block instanceof InterRegionPaddingBlock) {
           return (
             <InterRegionPaddingBlockComponent
-              key={block.key}
-              width={block.widthPx}
+              key={key}
+              width={widthPx}
               style={{ background: 'none' }}
               boundary={block.variant === 'boundary'}
             />
@@ -155,23 +150,21 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
   )
 })
 
-const ScaleBar = React.forwardRef(
-  (
-    {
-      model,
-      style,
-      className,
-      ...other
-    }: { model: LGV; style?: React.CSSProperties; className?: string },
-    ref,
-  ) => {
-    const classes = useStyles()
+interface ScaleBarProps {
+  model: LGV
+  style?: React.CSSProperties
+  className?: string
+}
+
+const ScaleBar = React.forwardRef<HTMLDivElement, ScaleBarProps>(
+  ({ model, style, className, ...other }, ref) => {
+    const { classes, cx } = useStyles()
 
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx
     return (
       <Paper
         data-resizer="true" // used to avoid click-and-drag scrolls on trackscontainer
-        className={clsx(classes.scaleBarContainer, className)}
+        className={cx(classes.scaleBarContainer, className)}
         variant="outlined"
         ref={ref}
         style={style}