Fix trackhub registry failing to load in 2.x.y versions of jbrowse (#…

…3214)
GMOD · Sep 30, 2022 · 36887ff · 36887ff
1 parent 5e0c177
commit 36887ff
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/plugins/trackhub-registry/package.json b/plugins/trackhub-registry/package.json
@@ -48,7 +48,8 @@
     "mobx-react": "^7.0.0",
     "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "tss-react": "^3.0.0"
   },
   "private": true,
   "distModule": "esm/index.js",

diff --git a/plugins/trackhub-registry/src/trackhub-registry/SelectBox.js b/plugins/trackhub-registry/src/trackhub-registry/SelectBox.js
@@ -3,11 +3,11 @@ import FormHelperText from '@mui/material/FormHelperText'
 import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from 'tss-react/mui'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   formControl: {
     minWidth: 192,
     marginLeft: theme.spacing(2),
@@ -22,7 +22,7 @@ function SelectBox({
   label,
   helpText,
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <FormControl className={classes.formControl}>
       <InputLabel>{label}</InputLabel>

diff --git a/plugins/trackhub-registry/src/trackhub-registry/TrackHubRegistrySelect.js b/plugins/trackhub-registry/src/trackhub-registry/TrackHubRegistrySelect.js
@@ -9,8 +9,8 @@ import {
   RadioGroup,
   Tooltip,
   Typography,
-  makeStyles,
 } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { isAbortException } from '@jbrowse/core/util'
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
 import PropTypes from 'prop-types'
@@ -37,7 +37,7 @@ function Wire({ children, ...props }) {
   return children(props)
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   hubList: {
     maxHeight: 400,
     overflowY: 'auto',
@@ -55,7 +55,7 @@ function TrackHubRegistrySelect({ model, setModelReady }) {
   const [hubs, setHubs] = useState(new Map())
   const [allHubsRetrieved, setAllHubsRetrieved] = useState(false)
   const [selectedHub, setSelectedHub] = useState('')
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   useEffect(() => {
     if (selectedHub) {
@@ -262,9 +262,7 @@ function TrackHubRegistrySelect({ model, setModelReady }) {
     return <div>{renderItems}</div>
   }
 
-  const speciesList = Object.keys(assemblies)
-    .sort()
-    .filter(item => item.toLowerCase().includes('sapiens'))
+  const speciesList = Object.keys(assemblies).sort()
 
   renderItems.push(
     <SelectBox