React 19

app/package.json

@@ -11,18 +11,22 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.8",
+    "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.10.8",
     "@jbrowse/core": "^2.13.1",
+    "@mui/icons-material": "^6.0.2",
     "@mui/material": "^6.0.2",
+    "@mui/system": "^6.0.2",
     "@mui/x-data-grid": "^7.12.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "buffer": "^6.0.3",
+    "eslint": "^9.8.0",
     "gh-pages": "^6.0.0",
     "mobx": "^6.9.0",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "5.4.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-msaview": "^4.0.0",
     "rxjs": "^7.8.1",
     "tss-react": "^4.9.12"

lib/src/components/dialogs/AboutDialog.tsx

@@ -6,19 +6,16 @@ import { version } from '../../version'
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
     <Dialog
+      open
+      title="About"
       onClose={() => {
         onClose()
       }}
-      open
-      title="About this plugin"
     >
       <DialogContent>
         <Typography>
           MSAView {version} (
-          <Link href="https://github.com/gmod/jbrowse-plugin-msaview">
-            Github
-          </Link>
-          )
+          <Link href="https://github.com/gmod/react-msaview">Github</Link>)
         </Typography>
 
         <ul>

lib/src/components/dialogs/SettingsDialog.tsx

@@ -174,9 +174,7 @@ const MSASettings = observer(function MSASettings({
       />
       {hideGaps ? (
         <div className={classes.flex}>
-          <Typography>
-            Hide columns with more than {allowedGappyness}% gaps
-          </Typography>
+          <Typography>Hide columns w/ &gt;{allowedGappyness}% gaps</Typography>
           <Slider
             className={classes.field}
             min={1}

lib/src/components/tree/TreeCanvasBlock.tsx

@@ -36,7 +36,7 @@ const TreeCanvasBlock = observer(function ({
   offsetY: number
 }) {
   const theme = useTheme()
-  const ref = useRef<HTMLCanvasElement>()
+  const ref = useRef<HTMLCanvasElement>(null)
   const clickMap = useRef(new RBush<ClickEntry>())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()

package.json

@@ -18,7 +18,7 @@
     "@mui/system": "^6.0.2",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "^12.1.1",
@@ -28,8 +28,8 @@
     "@types/normalize-wheel": "^1.0.2",
     "@types/pako": "^2.0.3",
     "@types/rbush": "^3.0.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.0",
@@ -42,8 +42,8 @@
     "mobx-react": "^9.1.1",
     "mobx-state-tree": "^5.0.1",
     "prettier": "^3.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.19.2",
     "rollup-plugin-polyfill-node": "^0.13.0",
@@ -53,7 +53,7 @@
     "tsx": "^4.17.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.6",
+    "vite": "^6.0.0",
     "vitest": "^2.0.5"
   }
 }