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

package/src/LinearGenomeView/components/ZoomControls.tsx

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { observer } from 'mobx-react'
-import IconButton from '@material-ui/core/IconButton'
-import Slider from '@material-ui/core/Slider'
-import { makeStyles } from '@material-ui/core/styles'
-import ZoomIn from '@material-ui/icons/ZoomIn'
-import ZoomOut from '@material-ui/icons/ZoomOut'
+import { Slider, IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -19,26 +18,27 @@ const useStyles = makeStyles({
 })
 
 function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model
   const [value, setValue] = useState(-Math.log2(bpPerPx) * 100)
   useEffect(() => {
     setValue(-Math.log2(bpPerPx) * 100)
   }, [setValue, bpPerPx])
+
   return (
     <div className={classes.container}>
       <IconButton
         data-testid="zoom_out"
-        onClick={() => {
-          model.zoom(bpPerPx * 2)
-        }}
+        onClick={() => model.zoom(bpPerPx * 2)}
         disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
         color="secondary"
+        size="large"
       >
         <ZoomOut />
       </IconButton>
 
       <Slider
+        size="small"
         className={classes.slider}
         value={value}
         min={-Math.log2(maxBpPerPx) * 100}
@@ -49,11 +49,10 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
       />
       <IconButton
         data-testid="zoom_in"
-        onClick={() => {
-          model.zoom(model.bpPerPx / 2)
-        }}
+        onClick={() => model.zoom(model.bpPerPx / 2)}
         disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
         color="secondary"
+        size="large"
       >
         <ZoomIn />
       </IconButton>