diff --git a/app/src/App.tsx b/app/src/App.tsx
index 8ce26b50..94af6028 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -28,14 +28,16 @@ onSnapshot(mymodel, snap => {
 })
 
 // used in ViewContainer files to get the width
-export function useWidthSetter(view: { setWidth: (arg: number) => void }) {
+function useWidthSetter(view: { setWidth: (arg: number) => void }) {
   const [ref, { width }] = useMeasure()
   useEffect(() => {
     if (width && isAlive(view)) {
       // sets after a requestAnimationFrame
       // https://stackoverflow.com/a/58701523/2129219 avoids ResizeObserver
       // loop error being shown during development
-      requestAnimationFrame(() => view.setWidth(width))
+      requestAnimationFrame(() => {
+        view.setWidth(width)
+      })
     }
   }, [view, width])
   return ref
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e6ef596b..5a524b77 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,60 +1,26 @@
-import { fixupConfigRules } from '@eslint/compat'
-import globals from 'globals'
-import tsParser from '@typescript-eslint/parser'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
+import eslint from '@eslint/js'
+import eslintPluginReact from 'eslint-plugin-react'
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
+import eslintPluginReactRefresh from 'eslint-plugin-react-refresh'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import tseslint from 'typescript-eslint'
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
-
-export default [
+export default tseslint.config(
   {
     ignores: [
-      '**/coverage',
-      '**/node_modules/',
-      '**/dist/',
-      '**/bundle/',
-      '**/.eslintrc.js',
+      '**/build/**/*',
+      '**/dist/**/*',
+      '**/esm/**/*',
+      '**/public/**/*',
+      '**/bundle/**/*',
       'lib/output-version.js',
     ],
   },
-  ...fixupConfigRules(
-    compat.extends(
-      'eslint:recommended',
-      'plugin:@typescript-eslint/recommended',
-      'plugin:@typescript-eslint/recommended-type-checked',
-      'plugin:@typescript-eslint/stylistic-type-checked',
-      'plugin:unicorn/recommended',
-      'plugin:react/recommended',
-      'plugin:react-hooks/recommended',
-      'plugin:prettier/recommended',
-    ),
-  ),
   {
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.jest,
-      },
-
-      parser: tsParser,
-      ecmaVersion: 5,
-      sourceType: 'commonjs',
-
       parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-
-        project: './tsconfig.json',
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: import.meta.dirname,
       },
     },
 
@@ -63,38 +29,55 @@ export default [
         version: 'detect',
       },
     },
-
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.stylisticTypeChecked,
+  ...tseslint.configs.strictTypeChecked,
+  eslintPluginReact.configs.flat.recommended,
+  {
+    plugins: {
+      'react-hooks': eslintPluginReactHooks,
+    },
+    rules: eslintPluginReactHooks.configs.recommended.rules,
+  },
+  eslintPluginUnicorn.configs['flat/recommended'],
+  {
+    // in main config for TSX/JSX source files
+    plugins: {
+      'react-refresh': eslintPluginReactRefresh,
+    },
+    rules: {},
+  },
+  {
     rules: {
-      'no-redeclare': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-base-to-string': 'off',
-      '@typescript-eslint/prefer-nullish-coalescing': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-unused-vars': [
+      'no-empty': 'off',
+      'no-console': [
         'warn',
         {
-          argsIgnorePattern: '^_',
-          ignoreRestSiblings: true,
-          caughtErrors: 'none',
+          allow: ['error', 'warn'],
         },
       ],
-      '@typescript-eslint/no-floating-promises': 'error',
-      '@typescript-eslint/restrict-template-expressions': 'off',
-      '@typescript-eslint/restrict-plus-operands': 'off',
-      '@typescript-eslint/no-misused-promises': 'off',
-      '@typescript-eslint/require-await': 'off',
-      '@typescript-eslint/unbound-method': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unsafe-argument': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-call': 'off',
-      '@typescript-eslint/no-unsafe-return': 'off',
-      'no-unexpected-multiline': 'error',
+      'no-underscore-dangle': 'off',
+      curly: 'error',
+      semi: ['error', 'never'],
+      'spaced-comment': [
+        'error',
+        'always',
+        {
+          markers: ['/'],
+        },
+      ],
+
+      'react-refresh/only-export-components': 'warn',
+      'react/no-unescaped-entities': 'off',
+      'react/prop-types': 'off',
+
+      'unicorn/prefer-structured-clone': 'off',
       'unicorn/no-new-array': 'off',
+      'unicorn/no-empty-file': 'off',
       'unicorn/prefer-type-error': 'off',
+      'unicorn/prefer-modern-math-apis': 'off',
       'unicorn/prefer-node-protocol': 'off',
       'unicorn/no-unreadable-array-destructuring': 'off',
       'unicorn/no-abusive-eslint-disable': 'off',
@@ -123,39 +106,45 @@ export default [
       'unicorn/relative-url-style': 'off',
       'unicorn/prefer-math-trunc': 'off',
       'unicorn/prefer-query-selector': 'off',
+      'unicorn/no-negated-condition': 'off',
       'unicorn/switch-case-braces': 'off',
       'unicorn/prefer-switch': 'off',
       'unicorn/better-regex': 'off',
       'unicorn/no-for-loop': 'off',
       'unicorn/escape-case': 'off',
       'unicorn/prefer-number-properties': 'off',
-      curly: 'error',
-      'no-use-before-define': 'off',
-      'no-global-assign': 'warn',
+      'unicorn/no-process-exit': 'off',
+      'unicorn/prefer-at': 'off',
+      'unicorn/prefer-string-replace-all': 'off',
+      'unicorn/no-array-reduce': 'off',
 
-      'no-console': [
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-unnecessary-type-parameters': 'off',
+      '@typescript-eslint/no-base-to-string': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/restrict-plus-operands': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/prefer-nullish-coalescing': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-extraneous-class': 'off',
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      '@typescript-eslint/no-unused-vars': [
         'warn',
         {
-          allow: ['error', 'warn'],
-        },
-      ],
-
-      'no-debugger': 'warn',
-      'no-undef': 'error',
-      'react/no-danger': 'warn',
-      'react/prop-types': 'off',
-      'react/destructuring-assignment': 'error',
-      'react/no-unused-prop-types': 'error',
-      'react/no-unused-state': 'error',
-      'react/prefer-stateless-function': 'error',
-
-      'spaced-comment': [
-        'error',
-        'always',
-        {
-          markers: ['/'],
+          argsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+          caughtErrors: 'none',
         },
       ],
     },
   },
-]
+)
diff --git a/lib/docgen/generateStateModelDocs.ts b/lib/docgen/generateStateModelDocs.ts
index 030ed6c1..ee41d969 100644
--- a/lib/docgen/generateStateModelDocs.ts
+++ b/lib/docgen/generateStateModelDocs.ts
@@ -113,7 +113,7 @@ function generateStateModelDocs(files: string[]) {
       if (model) {
         const getterstr = `${getters.length ? `### ${model.name} - Getters` : ''}\n${getters
           .sort((a, b) => a.name.localeCompare(b.name))
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
           .map(({ name, docs, signature }: any) => {
             return `#### getter: ${name}
 
@@ -129,7 +129,7 @@ ${signature || ''}
 
         const methodstr = `${methods.length ? `### ${model.name} - Methods` : ''}\n${methods
           .sort((a, b) => a.name.localeCompare(b.name))
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
           .map(({ name, docs, signature }: any) => {
             return `#### method: ${name}
 
@@ -145,7 +145,7 @@ ${name}: ${signature || ''}
 
         const propertiesstr = `${properties.length ? `### ${model.name} - Properties` : ''}\n${properties
           .sort((a, b) => a.name.localeCompare(b.name))
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
           .map(({ name, docs, code, signature }: any) => {
             return `#### property: ${name}
 
@@ -163,7 +163,7 @@ ${code}
 
         const actionstr = `${actions.length ? `### ${model.name} - Actions` : ''}\n${actions
           .sort((a, b) => a.name.localeCompare(b.name))
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
           .map(({ name, docs, signature }: any) => {
             return `#### action: ${name}
 
diff --git a/lib/src/colorSchemes.ts b/lib/src/colorSchemes.ts
index 32d97b1d..e5d0fac3 100644
--- a/lib/src/colorSchemes.ts
+++ b/lib/src/colorSchemes.ts
@@ -357,7 +357,7 @@ export function getClustalXColor(
   row: string,
   col: number,
 ) {
-  const l = model.columns[row][col]
+  const l = model.columns[row]![col]!
   const {
     W = 0,
     L = 0,
@@ -504,7 +504,7 @@ export function getPercentIdentityColor(
   row: string,
   col: number,
 ) {
-  const l = model.columns[row][col]
+  const l = model.columns[row]![col]!
   const entries = Object.entries(stats)
   let ent = 0
   let letter = ''
diff --git a/lib/src/components/Loading.tsx b/lib/src/components/Loading.tsx
index 14c59970..953e4de7 100644
--- a/lib/src/components/Loading.tsx
+++ b/lib/src/components/Loading.tsx
@@ -19,7 +19,13 @@ const Reset = observer(function ({
   return (
     <div>
       <ErrorMessage error={error} />
-      <Button variant="contained" color="primary" onClick={() => model.reset()}>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => {
+          model.reset()
+        }}
+      >
         Return to import form
       </Button>
     </div>
diff --git a/lib/src/components/ResizeHandles.tsx b/lib/src/components/ResizeHandles.tsx
index 8e57712f..581ce083 100644
--- a/lib/src/components/ResizeHandles.tsx
+++ b/lib/src/components/ResizeHandles.tsx
@@ -57,7 +57,9 @@ export const VerticalResizeHandle = observer(function ({
   return (
     <div>
       <div
-        onMouseDown={() => setMouseDragging(true)}
+        onMouseDown={() => {
+          setMouseDragging(true)
+        }}
         style={{
           cursor: 'ew-resize',
           height: '100%',
@@ -123,7 +125,9 @@ export const HorizontalResizeHandle = observer(function ({
   return (
     <div>
       <div
-        onMouseDown={() => setMouseDragging(true)}
+        onMouseDown={() => {
+          setMouseDragging(true)
+        }}
         style={{
           cursor: 'ns-resize',
           width: '100%',
diff --git a/lib/src/components/SequenceTextArea.tsx b/lib/src/components/SequenceTextArea.tsx
index 3442d044..72735f99 100644
--- a/lib/src/components/SequenceTextArea.tsx
+++ b/lib/src/components/SequenceTextArea.tsx
@@ -25,7 +25,7 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const [showEmpty, setShowEmpty] = useState(false)
 
   const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')])
+    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')] as const)
     .filter(f => (showEmpty ? true : !!f[1]))
     .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : s2.replaceAll('-', '')}`)
     .join('\n')
@@ -37,7 +37,9 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
         onClick={() => {
           copy(disp)
           setCopied(true)
-          setTimeout(() => setCopied(false), 500)
+          setTimeout(() => {
+            setCopied(false)
+          }, 500)
         }}
       >
         {copied ? 'Copied!' : 'Copy to clipboard'}
@@ -45,12 +47,16 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
       <Checkbox2
         label="Show gaps"
         checked={showGaps}
-        onChange={() => setShowGaps(!showGaps)}
+        onChange={() => {
+          setShowGaps(!showGaps)
+        }}
       />
       <Checkbox2
         label="Show empty"
         checked={showEmpty}
-        onChange={() => setShowEmpty(!showEmpty)}
+        onChange={() => {
+          setShowEmpty(!showEmpty)
+        }}
       />
       <TextField
         variant="outlined"
diff --git a/lib/src/components/TextTrack.tsx b/lib/src/components/TextTrack.tsx
index 71501ce6..c9a70ef6 100644
--- a/lib/src/components/TextTrack.tsx
+++ b/lib/src/components/TextTrack.tsx
@@ -55,9 +55,9 @@ const AnnotationBlock = observer(function ({
 
     const xStart = Math.max(0, Math.floor(offsetX / colWidth))
     const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
-    const str = data?.slice(xStart, xEnd)
+    const str = data.slice(xStart, xEnd)
     for (let i = 0; str && i < str.length; i++) {
-      const letter = str[i]
+      const letter = str[i]!
       const color = colorScheme[letter.toUpperCase()]
       if (bgColor) {
         const x = i * colWidth + offsetX - (offsetX % colWidth)
diff --git a/lib/src/components/Track.tsx b/lib/src/components/Track.tsx
index db87ac93..52c11dc1 100644
--- a/lib/src/components/Track.tsx
+++ b/lib/src/components/Track.tsx
@@ -24,7 +24,7 @@ export const TrackLabel = observer(function ({
   track,
 }: {
   model: MsaViewModel
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   track: any
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
@@ -53,7 +53,9 @@ export const TrackLabel = observer(function ({
           width: trackLabelHeight,
           height: trackLabelHeight,
         }}
-        onClick={event => setAnchorEl(event.currentTarget)}
+        onClick={event => {
+          setAnchorEl(event.currentTarget)
+        }}
       >
         <ArrowDropDownIcon />
       </IconButton>
@@ -62,7 +64,9 @@ export const TrackLabel = observer(function ({
           anchorEl={anchorEl}
           transitionDuration={0}
           open
-          onClose={() => setAnchorEl(undefined)}
+          onClose={() => {
+            setAnchorEl(undefined)
+          }}
         >
           <MenuItem
             dense
@@ -96,7 +100,7 @@ const Track = observer(function ({
   track,
 }: {
   model: MsaViewModel
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   track: any
 }) {
   const { resizeHandleWidth } = model
diff --git a/lib/src/components/VerticalScrollbar.tsx b/lib/src/components/VerticalScrollbar.tsx
index 982cb4f8..13092fc4 100644
--- a/lib/src/components/VerticalScrollbar.tsx
+++ b/lib/src/components/VerticalScrollbar.tsx
@@ -70,8 +70,12 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
           height: Math.max(b - t, 20),
           zIndex: 100,
         }}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
+        onMouseOver={() => {
+          setHovered(true)
+        }}
+        onMouseOut={() => {
+          setHovered(false)
+        }}
         onMouseDown={event => {
           setMouseDown({
             clientY: event.clientY,
diff --git a/lib/src/components/dialogs/AboutDialog.tsx b/lib/src/components/dialogs/AboutDialog.tsx
index 00fe218c..e3fd3ee1 100644
--- a/lib/src/components/dialogs/AboutDialog.tsx
+++ b/lib/src/components/dialogs/AboutDialog.tsx
@@ -5,7 +5,13 @@ import { version } from '../../version'
 
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
-    <Dialog onClose={() => onClose()} open title="About this plugin">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="About this plugin"
+    >
       <DialogContent>
         <Typography>
           MSAView {version} (
diff --git a/lib/src/components/dialogs/AddTrackDialog.tsx b/lib/src/components/dialogs/AddTrackDialog.tsx
index 4390e631..d3a210f5 100644
--- a/lib/src/components/dialogs/AddTrackDialog.tsx
+++ b/lib/src/components/dialogs/AddTrackDialog.tsx
@@ -12,7 +12,7 @@ import type { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const AddTrackDialog = observer(function ({
   model,
   onClose,
   open,
@@ -26,7 +26,13 @@ export default observer(function ({
   const [currentOption, setCurrentOption] = useState('')
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open={open}
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -62,7 +68,9 @@ export default observer(function ({
           <Button
             color="secondary"
             variant="contained"
-            onClick={() => onClose()}
+            onClick={() => {
+              onClose()
+            }}
           >
             Cancel
           </Button>
@@ -71,3 +79,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default AddTrackDialog
diff --git a/lib/src/components/dialogs/DomainDialog.tsx b/lib/src/components/dialogs/DomainDialog.tsx
index 24b0da82..0ce628ca 100644
--- a/lib/src/components/dialogs/DomainDialog.tsx
+++ b/lib/src/components/dialogs/DomainDialog.tsx
@@ -20,10 +20,17 @@ export default function LaunchDomainViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
-      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+      <Tabs
+        value={choice}
+        onChange={(_, val) => {
+          setChoice(val)
+        }}
+      >
         <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
       </Tabs>
diff --git a/lib/src/components/dialogs/ExportSVGDialog.tsx b/lib/src/components/dialogs/ExportSVGDialog.tsx
index 126e08f0..4b0bc6e7 100644
--- a/lib/src/components/dialogs/ExportSVGDialog.tsx
+++ b/lib/src/components/dialogs/ExportSVGDialog.tsx
@@ -28,7 +28,13 @@ export default function ExportSVGDialog({
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
   return (
-    <Dialog onClose={() => onClose()} open title="Export SVG">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Export SVG"
+    >
       <DialogContent>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>Settings:</Typography>
@@ -36,14 +42,18 @@ export default function ExportSVGDialog({
           label="Include minimap?"
           disabled={exportType === 'entire'}
           checked={includeMinimap}
-          onChange={() => setIncludeMinimap(!includeMinimap)}
+          onChange={() => {
+            setIncludeMinimap(!includeMinimap)
+          }}
         />
         <div>
           <FormControl>
             <FormLabel>Export type</FormLabel>
             <RadioGroup
               value={exportType}
-              onChange={event => setExportType(event.target.value)}
+              onChange={event => {
+                setExportType(event.target.value)
+              }}
             >
               <FormControlLabel
                 value="entire"
@@ -63,24 +73,33 @@ export default function ExportSVGDialog({
         <Button
           variant="contained"
           color="primary"
-          onClick={async () => {
-            try {
-              await model.exportSVG({
-                theme,
-                includeMinimap:
-                  exportType === 'entire' ? false : includeMinimap,
-                exportType,
-              })
-            } catch (e) {
-              console.error(e)
-              setError(e)
-            }
-            onClose()
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                await model.exportSVG({
+                  theme,
+                  includeMinimap:
+                    exportType === 'entire' ? false : includeMinimap,
+                  exportType,
+                })
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              }
+              onClose()
+            })()
           }}
         >
           Submit
         </Button>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            onClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>
diff --git a/lib/src/components/dialogs/FeatureDialog.tsx b/lib/src/components/dialogs/FeatureDialog.tsx
index e16f7522..98f9ac96 100644
--- a/lib/src/components/dialogs/FeatureDialog.tsx
+++ b/lib/src/components/dialogs/FeatureDialog.tsx
@@ -57,12 +57,12 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
                 <input
                   type="checkbox"
                   checked={featureFilters.get(accession) ?? false}
-                  onChange={() =>
+                  onChange={() => {
                     model.setFilter(
                       accession,
                       !model.featureFilters.get(accession),
                     )
-                  }
+                  }}
                 />
               </td>
               <td>{accession}</td>
@@ -94,7 +94,9 @@ const FeatureTypeDialog = observer(function ({
 }) {
   return (
     <Dialog
-      onClose={() => onClose()}
+      onClose={() => {
+        onClose()
+      }}
       open
       title="Feature filters"
       maxWidth="xl"
diff --git a/lib/src/components/dialogs/InterProScanDialog.tsx b/lib/src/components/dialogs/InterProScanDialog.tsx
index 3b550ddd..d6ec0bea 100644
--- a/lib/src/components/dialogs/InterProScanDialog.tsx
+++ b/lib/src/components/dialogs/InterProScanDialog.tsx
@@ -151,7 +151,9 @@ const InterProScanDialog = observer(function ({
     <Dialog
       maxWidth="xl"
       title="Query InterProScan API for domains"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
       <DialogContent>
@@ -159,7 +161,11 @@ const InterProScanDialog = observer(function ({
           This will run InterProScan via the InterProScan API on all rows of the
           current MSA
         </Typography>
-        <Button onClick={() => setShow(!show)}>
+        <Button
+          onClick={() => {
+            setShow(!show)
+          }}
+        >
           {show ? 'Hide' : 'Show'} advanced options
         </Button>
         {show ? (
@@ -169,18 +175,18 @@ const InterProScanDialog = observer(function ({
               <Button
                 variant="contained"
                 color="secondary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: false })))
-                }
+                }}
               >
                 Select none
               </Button>
               <Button
                 variant="contained"
                 color="primary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: true })))
-                }
+                }}
               >
                 Select all
               </Button>
@@ -196,7 +202,7 @@ const InterProScanDialog = observer(function ({
                           type="checkbox"
                           key={name}
                           checked={checked}
-                          onChange={() =>
+                          onChange={() => {
                             setVals(
                               vals.map(e =>
                                 e.name === name
@@ -204,7 +210,7 @@ const InterProScanDialog = observer(function ({
                                   : e,
                               ),
                             )
-                          }
+                          }}
                         />
                       </td>
                       <td>{name}</td>
@@ -220,7 +226,9 @@ const InterProScanDialog = observer(function ({
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -245,7 +253,9 @@ const InterProScanDialog = observer(function ({
                     .filter(f => !!f[1])
                     .map(row => `>${row[0]}\n${row[1]}`)
                     .join('\n'),
-                  onProgress: arg => model.setStatus(arg),
+                  onProgress: arg => {
+                    model.setStatus(arg)
+                  },
                   model,
                 })
               } catch (e) {
diff --git a/lib/src/components/dialogs/MetadataDialog.tsx b/lib/src/components/dialogs/MetadataDialog.tsx
index 98fa582c..c987062b 100644
--- a/lib/src/components/dialogs/MetadataDialog.tsx
+++ b/lib/src/components/dialogs/MetadataDialog.tsx
@@ -21,7 +21,14 @@ const MetadataDialog = observer(function ({
   const { header } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Metadata" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Metadata"
+      maxWidth="xl"
+    >
       <DialogContent>
         <Attributes attributes={header} />
         <BaseCard title="sequence">
diff --git a/lib/src/components/dialogs/SettingsDialog.tsx b/lib/src/components/dialogs/SettingsDialog.tsx
index a2b1fdb1..a6a4b664 100644
--- a/lib/src/components/dialogs/SettingsDialog.tsx
+++ b/lib/src/components/dialogs/SettingsDialog.tsx
@@ -23,6 +23,9 @@ const useStyles = makeStyles()(theme => ({
   flex: {
     display: 'flex',
   },
+  minw: {
+    width: '80em',
+  },
 }))
 
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
@@ -56,39 +59,49 @@ const TreeSettings = observer(function TreeSettings({
       <h1>Tree options</h1>
       <Checkbox2
         checked={showBranchLen}
-        onChange={() => model.setShowBranchLen(!showBranchLen)}
+        onChange={() => {
+          model.setShowBranchLen(!showBranchLen)
+        }}
         label="Show branch length?"
       />
 
       <Checkbox2
         checked={drawNodeBubbles}
-        onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+        onChange={() => {
+          model.setDrawNodeBubbles(!drawNodeBubbles)
+        }}
         label="Draw clickable bubbles on tree branches?"
       />
       <Checkbox2
         checked={drawTree}
-        onChange={() => model.setDrawTree(!drawTree)}
+        onChange={() => {
+          model.setDrawTree(!drawTree)
+        }}
         label="Show tree?"
       />
 
       <Checkbox2
         checked={labelsAlignRight}
-        onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+        onChange={() => {
+          model.setLabelsAlignRight(!labelsAlignRight)
+        }}
         label="Tree labels align right?"
       />
 
       <Checkbox2
         checked={drawLabels}
-        onChange={() => model.setDrawLabels(!drawLabels)}
+        onChange={() => {
+          model.setDrawLabels(!drawLabels)
+        }}
         label="Draw labels"
       />
       {noTree ? null : (
         <div>
           <Checkbox2
             checked={treeWidthMatchesArea}
-            onChange={() =>
+            onChange={() => {
               model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-            }
+            }}
             label="Make tree width fit to tree area?"
           />
           {treeWidthMatchesArea ? null : (
@@ -99,7 +112,9 @@ const TreeSettings = observer(function TreeSettings({
                 min={50}
                 max={600}
                 value={treeWidth}
-                onChange={(_, val) => model.setTreeWidth(val as number)}
+                onChange={(_, val) => {
+                  model.setTreeWidth(val as number)
+                }}
               />
             </div>
           )}
@@ -131,25 +146,46 @@ const MSASettings = observer(function MSASettings({
       <h1>MSA options</h1>
       <Checkbox2
         checked={drawMsaLetters}
-        onChange={() => model.setDrawMsaLetters(!drawMsaLetters)}
+        onChange={() => {
+          model.setDrawMsaLetters(!drawMsaLetters)
+        }}
         label="Draw letters"
       />
       <Checkbox2
         checked={bgColor}
-        onChange={() => model.setBgColor(!bgColor)}
+        onChange={() => {
+          model.setBgColor(!bgColor)
+        }}
         label="Color background tiles of MSA?"
       />
       <Checkbox2
         checked={contrastLettering}
-        onChange={() => model.setContrastLettering(!contrastLettering)}
+        onChange={() => {
+          model.setContrastLettering(!contrastLettering)
+        }}
         label="Use contrast lettering"
       />
       <Checkbox2
         checked={hideGaps}
-        onChange={() => model.setHideGaps(!hideGaps)}
+        onChange={() => {
+          model.setHideGaps(!hideGaps)
+        }}
         label={`Hide columns that are ${100 - allowedGappyness}% gaps`}
       />
-
+      {hideGaps ? (
+        <div className={classes.flex}>
+          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
+          <Slider
+            className={classes.field}
+            min={1}
+            max={100}
+            value={allowedGappyness}
+            onChange={(_, val) => {
+              model.setAllowedGappyness(val as number)
+            }}
+          />
+        </div>
+      ) : null}
       <div className={classes.flex}>
         <Typography>Column width ({colWidth}px)</Typography>
         <Slider
@@ -157,7 +193,9 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={colWidth}
-          onChange={(_, val) => model.setColWidth(val as number)}
+          onChange={(_, val) => {
+            model.setColWidth(val as number)
+          }}
         />
       </div>
       <div className={classes.flex}>
@@ -167,27 +205,19 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={rowHeight}
-          onChange={(_, val) => model.setRowHeight(val as number)}
+          onChange={(_, val) => {
+            model.setRowHeight(val as number)
+          }}
         />
       </div>
-      {hideGaps ? (
-        <div className={classes.flex}>
-          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
-          <Slider
-            className={classes.field}
-            min={1}
-            max={100}
-            value={allowedGappyness}
-            onChange={(_, val) => model.setAllowedGappyness(val as number)}
-          />
-        </div>
-      ) : null}
 
       <TextField
         select
         label="Color scheme"
         value={colorSchemeName}
-        onChange={event => model.setColorSchemeName(event.target.value)}
+        onChange={event => {
+          model.setColorSchemeName(event.target.value)
+        }}
       >
         {Object.keys(colorSchemes).map(option => (
           <MenuItem key={option} value={option}>
@@ -206,12 +236,26 @@ const SettingsDialog = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
+  const { classes } = useStyles()
   return (
-    <Dialog open onClose={() => onClose()} title="Settings" maxWidth="xl">
-      <DialogContent style={{ width: '80em' }}>
+    <Dialog
+      open
+      onClose={() => {
+        onClose()
+      }}
+      title="Settings"
+      maxWidth="xl"
+    >
+      <DialogContent className={classes.minw}>
         <SettingsContent model={model} />
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Submit
           </Button>
         </DialogActions>
diff --git a/lib/src/components/dialogs/TracklistDialog.tsx b/lib/src/components/dialogs/TracklistDialog.tsx
index 926add09..c95cfc08 100644
--- a/lib/src/components/dialogs/TracklistDialog.tsx
+++ b/lib/src/components/dialogs/TracklistDialog.tsx
@@ -14,7 +14,7 @@ import { observer } from 'mobx-react'
 // locals
 import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const TracklistDialog = observer(function ({
   model,
   onClose,
 }: {
@@ -24,7 +24,13 @@ export default observer(function ({
   const { tracks } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -49,7 +55,13 @@ export default observer(function ({
           })}
         </FormGroup>
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Close
           </Button>
         </DialogActions>
@@ -57,3 +69,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TracklistDialog
diff --git a/lib/src/components/dialogs/UserProvidedDomainsDialog.tsx b/lib/src/components/dialogs/UserProvidedDomainsDialog.tsx
index da10d037..5cdb9ae3 100644
--- a/lib/src/components/dialogs/UserProvidedDomainsDialog.tsx
+++ b/lib/src/components/dialogs/UserProvidedDomainsDialog.tsx
@@ -34,7 +34,9 @@ const UserProvidedDomainsDialog = observer(function ({
     <Dialog
       maxWidth="xl"
       title="Open protein domains from file"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
       <DialogContent>
@@ -48,7 +50,9 @@ const UserProvidedDomainsDialog = observer(function ({
             <FormControl component="fieldset">
               <RadioGroup
                 value={choice}
-                onChange={event => setChoice(event.target.value)}
+                onChange={event => {
+                  setChoice(event.target.value)
+                }}
               >
                 <FormControlLabel value="url" control={<Radio />} label="URL" />
                 <FormControlLabel
@@ -66,7 +70,9 @@ const UserProvidedDomainsDialog = observer(function ({
                 <TextField
                   label="URL"
                   value={interProURL}
-                  onChange={event => setInterProURL(event.target.value)}
+                  onChange={event => {
+                    setInterProURL(event.target.value)
+                  }}
                 />
               </div>
             ) : null}
@@ -81,7 +87,7 @@ const UserProvidedDomainsDialog = observer(function ({
                     type="file"
                     hidden
                     onChange={({ target }) => {
-                      const file = target?.files?.[0]
+                      const file = target.files?.[0]
                       if (file) {
                         setFile(file)
                       }
@@ -106,7 +112,7 @@ const UserProvidedDomainsDialog = observer(function ({
                   : await jsonfetch(interProURL)
 
                 model.setInterProAnnotations(
-                  Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+                  Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
                 )
                 model.setShowDomains(true)
                 getSession(model).notify(
diff --git a/lib/src/components/header/Header.tsx b/lib/src/components/header/Header.tsx
index dd754602..e1f5b421 100644
--- a/lib/src/components/header/Header.tsx
+++ b/lib/src/components/header/Header.tsx
@@ -32,7 +32,9 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <Spacer />
       <HeaderStatusArea model={model} />
       <IconButton
-        onClick={() => model.queueDialog(onClose => [AboutDialog, { onClose }])}
+        onClick={() => {
+          model.queueDialog(onClose => [AboutDialog, { onClose }])
+        }}
       >
         <Help />
       </IconButton>
diff --git a/lib/src/components/header/HeaderMenu.tsx b/lib/src/components/header/HeaderMenu.tsx
index c8c4dd0c..cf8d071e 100644
--- a/lib/src/components/header/HeaderMenu.tsx
+++ b/lib/src/components/header/HeaderMenu.tsx
@@ -24,24 +24,29 @@ const HeaderMenu = observer(function ({ model }: { model: MsaViewModel }) {
         {
           label: 'Return to import form',
           icon: FolderOpen,
-          onClick: () => model.reset(),
+          onClick: () => {
+            model.reset()
+          },
         },
         {
           label: 'Settings',
-          onClick: () =>
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
+          },
           icon: Settings,
         },
         {
           label: 'Metadata',
-          onClick: () =>
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+          },
           icon: Assignment,
         },
         {
           label: 'Extra tracks',
-          onClick: () =>
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
+          },
           icon: List,
         },
       ]}
diff --git a/lib/src/components/header/HeaderMenuExtra.tsx b/lib/src/components/header/HeaderMenuExtra.tsx
index 35c6aa82..ca60170c 100644
--- a/lib/src/components/header/HeaderMenuExtra.tsx
+++ b/lib/src/components/header/HeaderMenuExtra.tsx
@@ -36,32 +36,38 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
         {
           label: 'Return to import form',
           icon: FolderOpen,
-          onClick: () => model.reset(),
+          onClick: () => {
+            model.reset()
+          },
         },
         {
           label: 'Settings',
-          onClick: () =>
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
+          },
           icon: Settings,
         },
         {
           label: 'Metadata',
-          onClick: () =>
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+          },
           icon: Assignment,
         },
         {
           label: 'Extra tracks',
-          onClick: () =>
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
+          },
           icon: List,
         },
 
         {
           label: 'Export SVG',
           icon: PhotoCamera,
-          onClick: () =>
-            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }]),
+          onClick: () => {
+            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }])
+          },
         },
         {
           label: 'Features/protein domains',
@@ -70,20 +76,22 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
             {
               label: 'Open domains...',
               icon: FolderOpen,
-              onClick: () =>
+              onClick: () => {
                 model.queueDialog(handleClose => [
                   UserProvidedDomainsDialog,
                   { handleClose, model },
-                ]),
+                ])
+              },
             },
             {
               label: 'Query InterProScan for domains...',
               icon: Search,
-              onClick: () =>
+              onClick: () => {
                 model.queueDialog(handleClose => [
                   InterProScanDialog,
                   { handleClose, model },
-                ]),
+                ])
+              },
             },
             {
               label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
@@ -91,7 +99,9 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               icon: Visibility,
               checked: actuallyShowDomains ? showDomains : false,
               type: 'checkbox',
-              onClick: () => model.setShowDomains(!showDomains),
+              onClick: () => {
+                model.setShowDomains(!showDomains)
+              },
             },
             {
               label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
@@ -99,7 +109,9 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               checked: actuallyShowDomains ? subFeatureRows : false,
               icon: Sort,
               type: 'checkbox',
-              onClick: () => model.setSubFeatureRows(!subFeatureRows),
+              onClick: () => {
+                model.setSubFeatureRows(!subFeatureRows)
+              },
             },
             {
               label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
@@ -114,7 +126,7 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
             },
           ],
         },
-        ...(model.extraViewMenuItems?.() || []),
+        ...model.extraViewMenuItems(),
       ]}
     >
       <MoreVert />
diff --git a/lib/src/components/header/ZoomControls.tsx b/lib/src/components/header/ZoomControls.tsx
index c9cc5bfd..bd412800 100644
--- a/lib/src/components/header/ZoomControls.tsx
+++ b/lib/src/components/header/ZoomControls.tsx
@@ -19,30 +19,46 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
-      <IconButton onClick={() => model.zoomIn()}>
+      <IconButton
+        onClick={() => {
+          model.zoomIn()
+        }}
+      >
         <ZoomIn />
       </IconButton>
-      <IconButton onClick={() => model.zoomOut()}>
+      <IconButton
+        onClick={() => {
+          model.zoomOut()
+        }}
+      >
         <ZoomOut />
       </IconButton>
       <CascadingMenuButton
         menuItems={[
           {
             label: 'Zoom in horizontal',
-            onClick: () => model.zoomInHorizontal(),
+            onClick: () => {
+              model.zoomInHorizontal()
+            },
           },
           {
             label: 'Zoom in vertical',
-            onClick: () => model.zoomInVertical(),
+            onClick: () => {
+              model.zoomInVertical()
+            },
           },
           {
             label: 'Zoom out horizontal',
-            onClick: () => model.zoomOutHorizontal(),
+            onClick: () => {
+              model.zoomOutHorizontal()
+            },
           },
 
           {
             label: 'Zoom out vertical',
-            onClick: () => model.zoomOutVertical(),
+            onClick: () => {
+              model.zoomOutVertical()
+            },
           },
           {
             label: 'Reset zoom to default',
diff --git a/lib/src/components/import/ImportForm.tsx b/lib/src/components/import/ImportForm.tsx
index 09793bec..9d8a53b5 100644
--- a/lib/src/components/import/ImportForm.tsx
+++ b/lib/src/components/import/ImportForm.tsx
@@ -9,7 +9,7 @@ import type { MsaViewModel } from '../../model'
 import { load } from './util'
 import ImportFormExamples from './ImportFormExamples'
 
-export default observer(function ({ model }: { model: MsaViewModel }) {
+const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
   const [treeFile, setTreeFile] = useState<FileLocation>()
   const { error } = model
@@ -44,7 +44,17 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
 
         <Grid item>
           <Button
-            onClick={() => load(model, msaFile, treeFile)}
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              ;(async () => {
+                try {
+                  await load(model, msaFile, treeFile)
+                } catch (e) {
+                  console.error(e)
+                  model.setError(e)
+                }
+              })()
+            }}
             variant="contained"
             color="primary"
             disabled={!msaFile && !treeFile}
@@ -61,3 +71,5 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
     </Container>
   )
 })
+
+export default ImportForm
diff --git a/lib/src/components/import/ImportFormExamples.tsx b/lib/src/components/import/ImportFormExamples.tsx
index c50ffb3e..57d09fc3 100644
--- a/lib/src/components/import/ImportFormExamples.tsx
+++ b/lib/src/components/import/ImportFormExamples.tsx
@@ -37,16 +37,41 @@ const ImportFormExamples = observer(function ({
 }: {
   model: MsaViewModel
 }) {
+  function l2(uri1?: string, uri2?: string) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        await load(
+          model,
+          uri1
+            ? {
+                uri: uri1,
+                locationType: 'UriLocation',
+              }
+            : undefined,
+          uri2
+            ? {
+                uri: uri2,
+                locationType: 'UriLocation',
+              }
+            : undefined,
+        )
+      } catch (e) {
+        console.error(e)
+        model.setError(e)
+      }
+    })()
+  }
   return (
     <ul>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, undefined, {
-            uri: 'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            undefined,
+            'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
+          )
+        }}
       >
         230k COVID-19 samples (tree only)
       </ListItem>
@@ -68,74 +93,60 @@ const ImportFormExamples = observer(function ({
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
+          )
+        }}
       >
         PFAM SARS-CoV2 multi-stockholm
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+          )
+        }}
       >
         Lysine stockholm file
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+          )
+        }}
       >
         PF01601 stockholm file (SARS-CoV2 spike protein)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
+          )
+        }}
       >
         Europe COVID full genomes (LR883044.1 and 199 other sequences)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(
-            model,
-            {
-              uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
-              locationType: 'UriLocation',
-            },
-            {
-              uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
-              locationType: 'UriLocation',
-            },
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
           )
-        }
+        }}
       >
         MAFFT+VeryFastTree(17.9k samples)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/demos/ttc39a.mfa',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2('https://jbrowse.org/demos/ttc39a.mfa')
+        }}
       >
         Human BLAST results mfa
       </ListItem>
diff --git a/lib/src/components/minimap/Minimap.tsx b/lib/src/components/minimap/Minimap.tsx
index 8f7a3843..2b5bb6fd 100644
--- a/lib/src/components/minimap/Minimap.tsx
+++ b/lib/src/components/minimap/Minimap.tsx
@@ -67,8 +67,12 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           width: w,
           zIndex: 100,
         }}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
+        onMouseOver={() => {
+          setHovered(true)
+        }}
+        onMouseOut={() => {
+          setHovered(false)
+        }}
         onMouseDown={event => {
           setMouseDown({
             clientX: event.clientX,
diff --git a/lib/src/components/msa/MSACanvasBlock.tsx b/lib/src/components/msa/MSACanvasBlock.tsx
index bca3d119..02d8aabe 100644
--- a/lib/src/components/msa/MSACanvasBlock.tsx
+++ b/lib/src/components/msa/MSACanvasBlock.tsx
@@ -94,7 +94,9 @@ const MSACanvasBlock = observer(function ({
           model.setMouseClickPos(x, y)
         }
       }}
-      onMouseLeave={() => model.setMousePos()}
+      onMouseLeave={() => {
+        model.setMousePos()
+      }}
       width={blockSize * highResScaleFactor}
       height={blockSize * highResScaleFactor}
       style={{
diff --git a/lib/src/components/msa/renderBoxFeatureCanvasBlock.ts b/lib/src/components/msa/renderBoxFeatureCanvasBlock.ts
index 23404845..94c080bd 100644
--- a/lib/src/components/msa/renderBoxFeatureCanvasBlock.ts
+++ b/lib/src/components/msa/renderBoxFeatureCanvasBlock.ts
@@ -65,7 +65,7 @@ function drawTiles({
     } = node
     const y = x!
 
-    const entry = tidyFilteredGatheredInterProAnnotations?.[name]
+    const entry = tidyFilteredGatheredInterProAnnotations[name]
 
     let j = 0
     if (entry) {
@@ -73,8 +73,8 @@ function drawTiles({
         const m1 = model.seqCoordToRowSpecificGlobalCoord(name, start - 1)
         const m2 = model.seqCoordToRowSpecificGlobalCoord(name, end)
         const x = m1 * colWidth
-        ctx.fillStyle = fillPalette[accession]
-        ctx.strokeStyle = strokePalette[accession]
+        ctx.fillStyle = fillPalette[accession]!
+        ctx.strokeStyle = strokePalette[accession]!
         const h = subFeatureRows ? 4 : rowHeight
         const t = y - rowHeight + (subFeatureRows ? j * h : 0)
         const lw = colWidth * (m2 - m1)
diff --git a/lib/src/components/msa/renderMSABlock.ts b/lib/src/components/msa/renderMSABlock.ts
index 82ef137f..8d3e8536 100644
--- a/lib/src/components/msa/renderMSABlock.ts
+++ b/lib/src/components/msa/renderMSABlock.ts
@@ -110,22 +110,22 @@ function drawTiles({
       data: { name },
     } = node
     const y = node.x!
-    const str = columns[name]?.slice(xStart, xEnd)
-    for (let i = 0; i < str?.length; i++) {
-      const letter = str[i]
+    const str = columns[name]!.slice(xStart, xEnd)
+    for (let i = 0; i < str.length; i++) {
+      const letter = str[i]!
       const color =
         colorSchemeName === 'clustalx_protein_dynamic'
           ? getClustalXColor(
-              colStats[xStart + i],
-              colStatsSums[xStart + i],
+              colStats[xStart + i]!,
+              colStatsSums[xStart + i]!,
               model,
               name,
               xStart + i,
             )
           : colorSchemeName === 'percent_identity_dynamic'
             ? getPercentIdentityColor(
-                colStats[xStart + i],
-                colStatsSums[xStart + i],
+                colStats[xStart + i]!,
+                colStatsSums[xStart + i]!,
                 model,
                 name,
                 xStart + i,
@@ -178,9 +178,9 @@ function drawText({
         data: { name },
       } = node
       const y = node.x!
-      const str = columns[name]?.slice(xStart, xEnd)
-      for (let i = 0; i < str?.length; i++) {
-        const letter = str[i]
+      const str = columns[name]!.slice(xStart, xEnd)
+      for (let i = 0; i < str.length; i++) {
+        const letter = str[i]!
         const color = colorScheme[letter.toUpperCase()]
         const contrast = contrastLettering
           ? contrastScheme[letter.toUpperCase()] || 'black'
diff --git a/lib/src/components/tree/TreeBranchMenu.tsx b/lib/src/components/tree/TreeBranchMenu.tsx
index 9df4927d..8c914434 100644
--- a/lib/src/components/tree/TreeBranchMenu.tsx
+++ b/lib/src/components/tree/TreeBranchMenu.tsx
@@ -50,9 +50,11 @@ const TreeBranchMenu = observer(function ({
       <MenuItem
         dense
         onClick={() => {
-          model.showOnly === node.id
-            ? model.setShowOnly(undefined)
-            : model.setShowOnly(node.id)
+          if (model.showOnly === node.id) {
+            model.setShowOnly(undefined)
+          } else {
+            model.setShowOnly(node.id)
+          }
           onClose()
         }}
       >
diff --git a/lib/src/components/tree/TreeCanvasBlock.tsx b/lib/src/components/tree/TreeCanvasBlock.tsx
index 0733ed2a..28c4c633 100644
--- a/lib/src/components/tree/TreeCanvasBlock.tsx
+++ b/lib/src/components/tree/TreeCanvasBlock.tsx
@@ -50,6 +50,7 @@ const TreeCanvasBlock = observer(function ({
   const w2 = width * highResScaleFactor
   const h2 = height * highResScaleFactor
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   const vref = useCallback(
     (arg: HTMLCanvasElement) => {
       model.incrementRef()
@@ -136,7 +137,9 @@ const TreeCanvasBlock = observer(function ({
         <TreeBranchMenu
           node={branchMenu}
           model={model}
-          onClose={() => setBranchMenu(undefined)}
+          onClose={() => {
+            setBranchMenu(undefined)
+          }}
         />
       ) : null}
 
@@ -144,7 +147,9 @@ const TreeCanvasBlock = observer(function ({
         <TreeNodeMenu
           node={toggleNodeMenu}
           model={model}
-          onClose={() => setToggleNodeMenu(undefined)}
+          onClose={() => {
+            setToggleNodeMenu(undefined)
+          }}
         />
       ) : null}
 
@@ -166,7 +171,7 @@ const TreeCanvasBlock = observer(function ({
 
           const data = hoverBranchClickMap(event)
           if (data?.id) {
-            setBranchMenu({ ...data, x, y })
+            setBranchMenu({ x, y, id: data.id, name: data.name })
           }
 
           const data2 = hoverNameClickMap(event)
@@ -174,7 +179,9 @@ const TreeCanvasBlock = observer(function ({
             setToggleNodeMenu({ ...data2, x, y })
           }
         }}
-        onMouseLeave={() => setHoverElt(undefined)}
+        onMouseLeave={() => {
+          setHoverElt(undefined)
+        }}
         ref={vref}
       />
       <canvas
diff --git a/lib/src/components/tree/TreeNodeMenu.tsx b/lib/src/components/tree/TreeNodeMenu.tsx
index 55f50d2f..18eec124 100644
--- a/lib/src/components/tree/TreeNodeMenu.tsx
+++ b/lib/src/components/tree/TreeNodeMenu.tsx
@@ -58,7 +58,7 @@ const TreeMenu = observer(function ({
             model.toggleCollapsed(node.id)
           } else {
             if (node.id.endsWith('-leafnode')) {
-              model.toggleCollapsed2(`${node.id}`)
+              model.toggleCollapsed2(node.id)
             } else {
               model.toggleCollapsed2(`${node.id}-leafnode`)
             }
diff --git a/lib/src/components/tree/dialogs/TreeNodeInfoDialog.tsx b/lib/src/components/tree/dialogs/TreeNodeInfoDialog.tsx
index c4da3e17..ed00d099 100644
--- a/lib/src/components/tree/dialogs/TreeNodeInfoDialog.tsx
+++ b/lib/src/components/tree/dialogs/TreeNodeInfoDialog.tsx
@@ -11,7 +11,7 @@ import {
 import type { MsaViewModel } from '../../../model'
 import SequenceTextArea from '../../SequenceTextArea'
 
-export default observer(function ({
+const TreeNodeInfoDialog = observer(function ({
   info,
   model,
   nodeName,
@@ -26,7 +26,14 @@ export default observer(function ({
   const metadata = treeMetadata[nodeName]
   const [name, sequence] = rows.find(f => f[0] === nodeName)!
   return (
-    <Dialog onClose={() => onClose()} open title="Tree node info" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Tree node info"
+      maxWidth="xl"
+    >
       <DialogContent>
         <BaseCard title="Attributes">
           <Attributes attributes={{ nodeName, ...info }} />
@@ -43,3 +50,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TreeNodeInfoDialog
diff --git a/lib/src/components/util.ts b/lib/src/components/util.ts
index 69f06b11..281c3d9b 100644
--- a/lib/src/components/util.ts
+++ b/lib/src/components/util.ts
@@ -11,7 +11,7 @@ export function chooseGridPitch(
   scale = Math.abs(scale)
   const minMajorPitchBp = minMajorPitchPx * scale
   const majorMagnitude = Number.parseInt(
-    Number(minMajorPitchBp).toExponential().split(/e/i)[1],
+    Number(minMajorPitchBp).toExponential().split(/e/i)[1]!,
     10,
   )
 
@@ -50,9 +50,6 @@ export function makeTicks(
 
   let minBase = start
   let maxBase = end
-  if (minBase === null || maxBase === null) {
-    return []
-  }
 
   if (bpPerPx < 0) {
     ;[minBase, maxBase] = [maxBase, minBase]
diff --git a/lib/src/ggplotPalettes.ts b/lib/src/ggplotPalettes.ts
index 1e651af0..fa06c856 100644
--- a/lib/src/ggplotPalettes.ts
+++ b/lib/src/ggplotPalettes.ts
@@ -19,7 +19,7 @@ const palettes = [
 ]
 
 export function getPalette(l: number) {
-  return palettes[Math.min(l, palettes.length - 1)]
+  return palettes[Math.min(l, palettes.length - 1)]!
 }
 
 export default palettes
diff --git a/lib/src/launchInterProScan.ts b/lib/src/launchInterProScan.ts
index c6d220b2..c15b58e1 100644
--- a/lib/src/launchInterProScan.ts
+++ b/lib/src/launchInterProScan.ts
@@ -38,7 +38,7 @@ async function runInterProScan({
     method: 'POST',
     body: new URLSearchParams({
       email: 'colin.diesh@gmail.com',
-      sequence: `${seq}`,
+      sequence: seq,
       programs: programs.join(','),
     }),
   })
@@ -47,7 +47,7 @@ async function runInterProScan({
     jobId,
     onProgress,
   })
-  return loadInterProScanResultsWithStatus({ jobId, model })
+  await loadInterProScanResultsWithStatus({ jobId, model })
 }
 
 export function loadInterProScanResults(jobId: string) {
@@ -65,6 +65,7 @@ async function wait({
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
   try {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     while (true) {
       for (let i = 0; i < 10; i++) {
         await timeout(1000)
@@ -101,14 +102,13 @@ export async function launchInterProScan({
   try {
     onProgress({ msg: `Launching ${algorithm} MSA` })
     if (algorithm === 'interproscan') {
-      const result = await runInterProScan({
+      await runInterProScan({
         seq,
         onJobId,
         onProgress,
         programs,
         model,
       })
-      return result
     }
     throw new Error('unknown algorithm')
   } finally {
@@ -130,7 +130,7 @@ export async function loadInterProScanResultsWithStatus({
     })
     const ret = await loadInterProScanResults(jobId)
     model.setInterProAnnotations(
-      Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+      Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
     )
     model.setShowDomains(true)
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
diff --git a/lib/src/model.ts b/lib/src/model.ts
index 47a0ad49..fc279827 100644
--- a/lib/src/model.ts
+++ b/lib/src/model.ts
@@ -72,7 +72,6 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 export interface ITextTrack {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
@@ -548,7 +547,7 @@ function stateModelFactory() {
        * #getter
        */
       get colorScheme() {
-        return colorSchemes[self.colorSchemeName]
+        return colorSchemes[self.colorSchemeName]!
       },
 
       /**
@@ -653,6 +652,8 @@ function stateModelFactory() {
        */
       get root() {
         let hier = hierarchy(this.tree, d => d.branchset)
+          // todo: investigate whether needed, typescript says branchset always true
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           .sum(d => (d.branchset ? 0 : 1))
           .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
 
@@ -666,7 +667,9 @@ function stateModelFactory() {
         ;[...self.collapsed, ...self.collapsedLeaves]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .filter(notEmpty)
-          .map(node => collapse(node))
+          .map(node => {
+            collapse(node)
+          })
 
         return hier
       },
@@ -695,15 +698,17 @@ function stateModelFactory() {
           .map(leaf => this.MSA?.getRow(leaf.data.name))
           .filter((item): item is string => !!item)
 
-        for (let i = 0; i < strs[0]?.length; i++) {
-          let counter = 0
-          for (const str of strs) {
-            if (str[i] === '-') {
-              counter++
+        if (strs.length) {
+          for (let i = 0; i < strs[0]!.length; i++) {
+            let counter = 0
+            for (const str of strs) {
+              if (str[i] === '-') {
+                counter++
+              }
+            }
+            if (counter / strs.length >= allowedGappyness / 100) {
+              blanks.push(i)
             }
-          }
-          if (counter / strs.length >= allowedGappyness / 100) {
-            blanks.push(i)
           }
         }
         return blanks
@@ -729,7 +734,7 @@ function stateModelFactory() {
       get columns() {
         return Object.fromEntries(
           this.rows.map(
-            (row, index) => [row[0], this.columns2d[index]] as const,
+            (row, index) => [row[0], this.columns2d[index]!] as const,
           ),
         )
       },
@@ -754,10 +759,11 @@ function stateModelFactory() {
         for (const column of columns) {
           for (let j = 0; j < column.length; j++) {
             const l = r[j] || {}
-            if (!l[column[j]]) {
-              l[column[j]] = 0
+            const cj = column[j]!
+            if (!l[cj]) {
+              l[cj] = 0
             }
-            l[column[j]]++
+            l[cj]++
             r[j] = l
           }
         }
@@ -849,7 +855,7 @@ function stateModelFactory() {
         const ret = []
         for (const by of self.blocksY) {
           for (const bx of self.blocksX) {
-            ret.push([bx, by])
+            ret.push([bx, by] as const)
           }
         }
         return ret
@@ -1019,7 +1025,7 @@ function stateModelFactory() {
        */
       get conservation() {
         if (self.columns2d.length) {
-          for (let i = 0; i < self.columns2d[0].length; i++) {
+          for (let i = 0; i < self.columns2d[0]!.length; i++) {
             const col = []
             for (const column of self.columns2d) {
               col.push(column[i])
@@ -1140,11 +1146,8 @@ function stateModelFactory() {
        */
       get tidyInterProAnnotationTypes() {
         const types = new Map<string, Accession>()
-        if (this.tidyInterProAnnotations) {
-          for (const { name, accession, description } of this
-            .tidyInterProAnnotations) {
-            types.set(accession, { name, accession, description })
-          }
+        for (const annot of this.tidyInterProAnnotations) {
+          types.set(annot.accession, annot)
         }
         return types
       },
@@ -1215,7 +1218,7 @@ function stateModelFactory() {
         const map = {} as Record<string, string>
         for (const key of arr) {
           const k = Math.min(arr.length - 1, palettes.length - 1)
-          map[key] = palettes[k][i]
+          map[key] = palettes[k]![i]!
           i++
         }
         return map
@@ -1374,8 +1377,11 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.colStats
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.colStatsSums
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.columns
           }),
         )
diff --git a/lib/src/model/DialogQueue.ts b/lib/src/model/DialogQueue.ts
index efc3de97..baf3ca5d 100644
--- a/lib/src/model/DialogQueue.ts
+++ b/lib/src/model/DialogQueue.ts
@@ -8,7 +8,6 @@ export function DialogQueueSessionMixin() {
   return types
     .model('DialogQueueSessionMixin', {})
     .volatile(() => ({
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       queueOfDialogs: [] as [DialogComponentType, any][],
     }))
     .views(self => ({
diff --git a/lib/src/parseGFF.ts b/lib/src/parseGFF.ts
index f116b307..80352cae 100644
--- a/lib/src/parseGFF.ts
+++ b/lib/src/parseGFF.ts
@@ -8,23 +8,25 @@ export function parseGFF(str?: string) {
         f.split('\t')
 
       return {
-        seq_id,
-        source,
-        type,
-        start: +start,
-        end: +end,
-        score: +score,
-        strand,
-        phase,
+        seq_id: seq_id!,
+        source: source!,
+        type: type!,
+        start: +start!,
+        end: +end!,
+        score: +score!,
+        strand: strand!,
+        phase: phase!,
         ...Object.fromEntries(
-          col9
+          col9!
             .split(';')
             .map(f => f.trim())
             .filter(f => !!f)
             .map(f => f.split('='))
             .map(([key, val]) => [
-              key.trim(),
-              decodeURIComponent(val).trim().split(',').join(' '),
+              key!.trim(),
+              val
+                ? decodeURIComponent(val).trim().split(',').join(' ')
+                : undefined,
             ]),
         ),
       }
diff --git a/lib/src/parseNewick.ts b/lib/src/parseNewick.ts
index b7b864cf..230b5c83 100644
--- a/lib/src/parseNewick.ts
+++ b/lib/src/parseNewick.ts
@@ -59,11 +59,11 @@
  */
 export default function parse(s: string) {
   const ancestors = []
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   let tree = {} as Record<string, any>
   const tokens = s.split(/\s*(;|\(|\)|,|:)\s*/)
   for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i]
+    const token = tokens[i]!
     const subtree = {}
     switch (token) {
       case '(': // new branchset
@@ -81,7 +81,7 @@ export default function parse(s: string) {
       case ':': // optional length next
         break
       default: {
-        const x = tokens[i - 1]
+        const x = tokens[i - 1]!
         if (x === ')' || x === '(' || x === ',') {
           tree.name = token
         } else if (x === ':') {
diff --git a/lib/src/parsers/ClustalMSA.ts b/lib/src/parsers/ClustalMSA.ts
index 079f9967..3f043691 100644
--- a/lib/src/parsers/ClustalMSA.ts
+++ b/lib/src/parsers/ClustalMSA.ts
@@ -16,7 +16,7 @@ export default class ClustalMSA {
   }
 
   getWidth() {
-    return this.MSA.alns[0].seq.length
+    return this.MSA.alns[0]!.seq.length
   }
 
   getRowData() {
diff --git a/lib/src/parsers/FastaMSA.ts b/lib/src/parsers/FastaMSA.ts
index 27fbeeae..92a1bb10 100644
--- a/lib/src/parsers/FastaMSA.ts
+++ b/lib/src/parsers/FastaMSA.ts
@@ -6,7 +6,7 @@ function parseSmallFasta(text: string) {
     .filter(t => /\S/.test(t))
     .map(entryText => {
       const [defLine, ...seqLines] = entryText.split('\n')
-      const [id, ...description] = defLine.split(' ')
+      const [id, ...description] = defLine!.split(' ')
       const descriptionStr = description.join(' ')
       const seqLinesStr = seqLines.join('')
       const sequence = seqLinesStr.replaceAll(/\s/g, '')
@@ -18,7 +18,7 @@ export default class FastaMSA {
   constructor(text: string) {
     this.MSA = {
       seqdata: Object.fromEntries(
-        parseSmallFasta(text).map(m => [`${m.id}`, m.sequence]),
+        parseSmallFasta(text).map(m => [m.id, m.sequence]),
       ),
     }
   }
@@ -36,11 +36,11 @@ export default class FastaMSA {
   }
 
   getRow(name: string) {
-    return this.MSA?.seqdata[name] || ''
+    return this.MSA.seqdata[name] || ''
   }
 
   getWidth() {
-    const name = Object.keys(this.MSA?.seqdata)[0]
+    const name = Object.keys(this.MSA.seqdata)[0]!
     return this.getRow(name).length
   }
 
diff --git a/lib/src/parsers/StockholmMSA.ts b/lib/src/parsers/StockholmMSA.ts
index 080aee48..abd9cff7 100644
--- a/lib/src/parsers/StockholmMSA.ts
+++ b/lib/src/parsers/StockholmMSA.ts
@@ -7,9 +7,9 @@ interface StockholmEntry {
     DE?: string[]
     NH?: string[]
   }
-  gs: {
+  gs?: {
     AC: Record<string, string>
-    DR: Record<string, string>
+    DR?: Record<string, string>
   }
   gc?: {
     SS_cons?: string
@@ -33,11 +33,11 @@ export default class StockholmMSA {
   }
 
   getRow(name: string) {
-    return this.MSA?.seqdata[name] || ''
+    return this.MSA.seqdata[name] || ''
   }
 
   getWidth() {
-    const name = Object.keys(this.MSA?.seqdata)[0]
+    const name = Object.keys(this.MSA.seqdata)[0]!
     return this.getRow(name).length
   }
 
@@ -56,7 +56,7 @@ export default class StockholmMSA {
   getRowData(rowName: string) {
     return {
       name: rowName,
-      accession: this.MSA.gs?.AC?.[rowName],
+      accession: this.MSA.gs?.AC[rowName],
       dbxref: this.MSA.gs?.DR?.[rowName],
     }
   }
@@ -74,10 +74,10 @@ export default class StockholmMSA {
       .map(([id, dr]) => [id, pdbRegex.exec(dr)] as const)
       .filter((item): item is [string, RegExpExecArray] => !!item[1])
       .map(([id, match]) => {
-        const pdb = match[1].toLowerCase()
-        const chain = match[2]
-        const startPos = +match[3]
-        const endPos = +match[4]
+        const pdb = match[1]!.toLowerCase()
+        const chain = match[2]!
+        const startPos = +match[3]!
+        const endPos = +match[4]!
         return { id, pdb, chain, startPos, endPos }
       })
 
@@ -93,7 +93,7 @@ export default class StockholmMSA {
   }
 
   getTree(): NodeWithIds {
-    const tree = this.MSA?.gf?.NH?.[0]
+    const tree = this.MSA.gf.NH?.[0]
     return tree
       ? generateNodeIds(parseNewick(tree))
       : {
diff --git a/lib/src/renderToSvg.tsx b/lib/src/renderToSvg.tsx
index c0004031..59ba16f4 100644
--- a/lib/src/renderToSvg.tsx
+++ b/lib/src/renderToSvg.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { when } from 'mobx'
@@ -153,13 +154,11 @@ function CoreRendering({
 
       <g
         clipPath={`url(#${clipId1})`}
-        /* eslint-disable-next-line react/no-danger */
         dangerouslySetInnerHTML={{ __html: ctx1.getSvg().innerHTML }}
       />
       <g
         clipPath={`url(#${clipId2})`}
         transform={`translate(${treeAreaWidth} 0)`}
-        /* eslint-disable-next-line react/no-danger */
         dangerouslySetInnerHTML={{ __html: ctx2.getSvg().innerHTML }}
       />
     </>
diff --git a/package.json b/package.json
index 2527785b..304d7902 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "app"
   ],
   "scripts": {
-    "lint": "eslint --report-unused-disable-directives --max-warnings 0 ."
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@emotion/react": "^11.13.0",
@@ -37,7 +38,8 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "next",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-unicorn": "^55.0.0",
     "globals": "^15.9.0",
     "mobx": "^6.13.1",
@@ -54,6 +56,7 @@
     "tss-react": "^4.9.12",
     "tsx": "^4.17.0",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^8.0.1",
     "vite": "^5.0.10"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 97d2803a..9a4ab4b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
+    "noUncheckedIndexedAccess": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
diff --git a/yarn.lock b/yarn.lock
index 4b14c30d..0916b636 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1317,7 +1317,7 @@
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
-"@typescript-eslint/eslint-plugin@^8.0.0":
+"@typescript-eslint/eslint-plugin@8.0.1", "@typescript-eslint/eslint-plugin@^8.0.0":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.1.tgz#5dbd1b498fdea83a16d292322d27d293ce156f94"
   integrity sha512-5g3Y7GDFsJAnY4Yhvk8sZtFfV6YNF2caLzjrRPUBzewjPCaj0yokePB4LJSobyCzGMzjZZYFbwuzbfDHlimXbQ==
@@ -1332,7 +1332,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@^8.0.0":
+"@typescript-eslint/parser@8.0.1", "@typescript-eslint/parser@^8.0.0":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.0.1.tgz#eb0728147a3a79edf43dde84c797f117213bbfdb"
   integrity sha512-5IgYJ9EO/12pOUwiBKFkpU7rS3IU21mtXzB81TNwq2xEybcmAZrE9qwDtsb5uQd9aVO9o0fdabFyAmKveXyujg==
@@ -2172,10 +2172,15 @@ eslint-plugin-prettier@^5.0.1:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.9.1"
 
-eslint-plugin-react-hooks@^4.6.0:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
-  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
+eslint-plugin-react-hooks@next:
+  version "5.1.0-rc-2d2cc042-20240809"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0-rc-2d2cc042-20240809.tgz#26e5f3b83fc3848ed808ad6fdafe0a8632b4d949"
+  integrity sha512-PEZ2M6eAd+DWlbrE561PumDgwHNYrLUPEcP4P/el+GjT5HnZh1lvr+UecKez547u49EtICPTEwd9VS2u66edTw==
+
+eslint-plugin-react-refresh@^0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.9.tgz#bf870372b353b12e1e6fb7fc41b282d9cbc8d93d"
+  integrity sha512-QK49YrBAo5CLNLseZ7sZgvgTy21E6NEw22eZqc4teZfH8pxV3yXc9XXOYfUI6JNpw7mfHNkAeWtBxrTyykB6HA==
 
 eslint-plugin-react@^7.32.2:
   version "7.35.0"
@@ -4253,6 +4258,15 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typescript-eslint@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.0.1.tgz#e812ce16e9332c6c81cfa2f17aecf99b74473da7"
+  integrity sha512-V3Y+MdfhawxEjE16dWpb7/IOgeXnLwAEEkS7v8oDqNcR1oYlqWhGH/iHqHdKVdpWme1VPZ0SoywXAkCqawj2eQ==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "8.0.1"
+    "@typescript-eslint/parser" "8.0.1"
+    "@typescript-eslint/utils" "8.0.1"
+
 typescript@^5.3.3:
   version "5.5.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"