diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5eda7e6..ddf91be 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,4 +1,5 @@ module.exports = { + root: true, env: { browser: true, es2021: true, diff --git a/package.json b/package.json index abdbf27..f545848 100644 --- a/package.json +++ b/package.json @@ -33,25 +33,25 @@ "@jbrowse/plugin-linear-genome-view": "^2.4.2", "@mui/material": "^5.12.0", "@mui/system": "^5.12.0", - "@mui/x-data-grid": "^6.16.1", + "@mui/x-data-grid": "^7.3.0", "@types/jest": "^29.5.12", "@types/node": "^20.11.16", "@types/pako": "^2.0.0", "@types/react": "^18.2.54", "@typescript-eslint/eslint-plugin": "^7.0.1", "@typescript-eslint/parser": "^7.0.1", - "esbuild": "^0.20.0", + "esbuild": "^0.21.4", "eslint": "^8.38.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8", "eslint-plugin-react-refresh": "^0.4.3", - "eslint-plugin-unicorn": "^51.0.0", + "eslint-plugin-unicorn": "^53.0.0", "jest": "^29.7.0", "mobx": "^6.0.0", "mobx-react": "^9.0.1", - "mobx-state-tree": "5.4.1", + "mobx-state-tree": "5.4.2", "npm-run-all": "^4.1.5", "prettier": "^3.2.5", "pretty-bytes": "^6.1.1", diff --git a/src/ProteinView/components/Header.tsx b/src/ProteinView/components/Header.tsx index b46c299..7914940 100644 --- a/src/ProteinView/components/Header.tsx +++ b/src/ProteinView/components/Header.tsx @@ -1,61 +1,82 @@ -import React, { useState } from 'react' +import React from 'react' import { observer } from 'mobx-react' import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' // icons import MenuIcon from '@mui/icons-material/Menu' +import Visibility from '@mui/icons-material/Visibility' // locals import { JBrowsePluginProteinViewModel } from '../model' import ProteinAlignment from './ProteinAlignment' -import { Visibility } from '@mui/icons-material' +import { LoadingEllipses } from '@jbrowse/core/ui' const ProteinViewHeader = observer(function ({ model, }: { model: JBrowsePluginProteinViewModel }) { - const { clickString, hoverString, showHighlight, zoomToBaseLevel } = model - const [show, setShow] = useState(true) + const { alignment, showAlignment } = model return (