eslint9

eslint.config.mjs

@@ -65,13 +65,21 @@ export default [
     },
 
     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': ['warn'],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+          caughtErrors: 'none',
+        },
+      ],
       '@typescript-eslint/no-floating-promises': 'error',
       '@typescript-eslint/restrict-template-expressions': 'off',
       '@typescript-eslint/restrict-plus-operands': 'off',

lib/src/components/dialogs/SettingsDialog.tsx

@@ -115,8 +115,14 @@ const MSASettings = observer(function MSASettings({
   model: MsaViewModel
 }) {
   const { classes } = useStyles()
-  const { bgColor, colWidth, drawMsaLetters, colorSchemeName, rowHeight } =
-    model
+  const {
+    bgColor,
+    contrastLettering,
+    colWidth,
+    drawMsaLetters,
+    colorSchemeName,
+    rowHeight,
+  } = model
 
   return (
     <div>
@@ -152,7 +158,11 @@ const MSASettings = observer(function MSASettings({
           onChange={(_, val) => model.setRowHeight(val as number)}
         />
       </div>
-
+      <Checkbox2
+        checked={contrastLettering}
+        onChange={() => model.setContrastLettering(!contrastLettering)}
+        label="Use contrast lettering"
+      />
       <TextField
         select
         label="Color scheme"

lib/src/components/header/ZoomControls.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
+import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // locals
-import type { MsaViewModel } from '../../model'
+import { MsaViewModel } from '../../model'
 
 // icons
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import { MoreVert } from '@mui/icons-material'
 
 const ZoomControls = observer(function ZoomControls({
   model,
@@ -16,41 +18,36 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
+      <IconButton onClick={() => model.zoomIn()}>
+        <ZoomIn />
+      </IconButton>
+      <IconButton onClick={() => model.zoomOut()}>
+        <ZoomOut />
+      </IconButton>
       <CascadingMenuButton
         menuItems={[
-          {
-            label: 'Zoom in horizontal+vertical',
-            onClick: () => model.zoomIn(),
-          },
           {
             label: 'Zoom in horizontal',
             onClick: () => model.zoomInHorizontal(),
           },
-          { label: 'Zoom in vertical', onClick: () => model.zoomInVertical() },
-        ]}
-      >
-        <ZoomIn />
-      </CascadingMenuButton>
-      <CascadingMenuButton
-        menuItems={[
           {
-            label: 'Zoom out horizontal+vertical',
-            onClick: () => model.zoomOut(),
+            label: 'Zoom in vertical',
+            onClick: () => model.zoomInVertical(),
           },
           {
             label: 'Zoom out horizontal',
             onClick: () => model.zoomOutHorizontal(),
           },
+
           {
             label: 'Zoom out vertical',
             onClick: () => model.zoomOutVertical(),
           },
         ]}
       >
-        <ZoomOut />
+        <MoreVert />
       </CascadingMenuButton>
     </>
   )
 })
-
 export default ZoomControls

lib/src/components/msa/renderMSABlock.ts

@@ -159,6 +159,7 @@ function drawText({
     colorScheme,
     columns,
     colWidth,
+    contrastLettering,
     rowHeight,
   } = model
   if (showMsaLetters) {
@@ -171,7 +172,9 @@ function drawText({
       for (let i = 0; i < str?.length; i++) {
         const letter = str[i]
         const color = colorScheme[letter.toUpperCase()]
-        const contrast = contrastScheme[letter.toUpperCase()] || 'black'
+        const contrast = contrastLettering
+          ? contrastScheme[letter.toUpperCase()] || 'black'
+          : 'black'
         const x = i * colWidth + offsetX - (offsetX % colWidth)
 
         // note: -rowHeight/4 matches +rowHeight/4 in tree

lib/src/components/tree/TreeCanvas.tsx

@@ -7,7 +7,7 @@ import type { MsaViewModel } from '../../model'
 import TreeCanvasBlock from './TreeCanvasBlock'
 import { padding } from './renderTreeCanvas'
 
-const TreeCanvas = observer(({ model }: { model: MsaViewModel }) => {
+const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
   const scheduled = useRef(false)
   const deltaY = useRef(0)

lib/src/components/tree/TreePanel.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model'
 import TreeCanvas from './TreeCanvas'
 
-const TreePanel = observer(({ model }: { model: MsaViewModel }) => {
+const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
   const { treeAreaWidth } = model
   return (
     <div style={{ overflow: 'hidden', flexShrink: 0, width: treeAreaWidth }}>

lib/src/components/tree/renderTreeCanvas.ts

@@ -141,6 +141,8 @@ export function renderTreeLabels({
     treeAreaWidthMinusMargin,
     marginLeft,
     noTree,
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
   } = model
   const by = blockSizeYOverride || blockSize
   if (labelsAlignRight) {

lib/src/model.ts

@@ -103,6 +103,10 @@ function stateModelFactory() {
          * #property
          */
         showDomains: false,
+        /**
+         * #property
+         */
+        contrastLettering: true,
 
         /**
          * #property
@@ -316,6 +320,12 @@ function stateModelFactory() {
         | Record<string, InterProScanResults>,
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setContrastLettering(arg: boolean) {
+        self.contrastLettering = arg
+      },
       /**
        * #action
        */
@@ -1000,13 +1010,6 @@ function stateModelFactory() {
         return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
       },
 
-      /**
-       * #getter
-       */
-      get showVerticalScrollbar() {
-        return self.height < self.totalHeight
-      },
-
       /**
        * #getter
        */
@@ -1135,6 +1138,14 @@ function stateModelFactory() {
         return groupBy(this.tidyFilteredAnnotations, r => r.id)
       },
     }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get showVerticalScrollbar() {
+        return self.msaAreaHeight < self.totalHeight
+      },
+    }))
     .views(self => ({
       /**
        * #getter
@@ -1179,15 +1190,13 @@ function stateModelFactory() {
        * #action
        */
       reset() {
-        transaction(() => {
-          self.setData({ tree: '', msa: '' })
-          self.setError(undefined)
-          self.setScrollY(0)
-          self.setScrollX(0)
-          self.setCurrentAlignment(0)
-          self.setTreeFilehandle(undefined)
-          self.setMSAFilehandle(undefined)
-        })
+        self.setData({ tree: '', msa: '' })
+        self.setError(undefined)
+        self.setScrollY(0)
+        self.setScrollX(0)
+        self.setCurrentAlignment(0)
+        self.setTreeFilehandle(undefined)
+        self.setMSAFilehandle(undefined)
       },
       /**
        * #action