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

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -3,10 +3,11 @@ import { IconButton, Paper, Typography, alpha } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { SanitizedHTML } from '@jbrowse/core/ui'
+import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 
 import {
   bindTrigger,
@@ -41,7 +42,6 @@ const useStyles = makeStyles()(theme => ({
   },
   dragHandle: {
     cursor: 'grab',
-    color: '#135560',
   },
   dragHandleIcon: {
     display: 'inline-block',
@@ -107,7 +107,6 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
           onClick={() => view.hideTrack(trackId)}
           className={classes.iconButton}
           title="close this track"
-          color="secondary"
         >
           <CloseIcon fontSize="small" />
         </IconButton>
@@ -117,12 +116,11 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
           component="span"
           className={classes.trackName}
         >
-          {trackName + (minimized ? ' (minimized)' : '')}
+          <SanitizedHTML html={trackName + (minimized ? ' (minimized)' : '')} />
         </Typography>
         <IconButton
           {...bindTrigger(popupState)}
           className={classes.iconButton}
-          color="secondary"
           data-testid="track_menu_icon"
           disabled={!items.length}
         >

package/src/LinearGenomeView/components/ZoomControls.tsx

@@ -6,7 +6,7 @@ import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -14,8 +14,9 @@ const useStyles = makeStyles()({
   },
   slider: {
     width: 70,
+    color: theme.palette.text.secondary,
   },
-})
+}))
 
 function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
   const { classes } = useStyles()
@@ -31,7 +32,6 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
         data-testid="zoom_out"
         onClick={() => model.zoom(bpPerPx * 2)}
         disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        color="secondary"
         size="large"
       >
         <ZoomOut />
@@ -51,7 +51,6 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
         data-testid="zoom_in"
         onClick={() => model.zoom(model.bpPerPx / 2)}
         disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        color="secondary"
         size="large"
       >
         <ZoomIn />