react-msaview 3.2.0 → 3.2.2

package/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 />

package/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',

package/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

package/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>

package/src/components/minimap/Minimap.tsx

@@ -2,13 +2,15 @@ import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model'
 
+interface ClickCoord {
+  clientX: number
+  scrollX: number
+}
+
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const [mouseDown, setMouseDown] = useState<{
-    clientX: number
-    scrollX: number
-  }>()
-  const scheduled = useRef(false)
+  const [mouseDown, setMouseDown] = useState<ClickCoord>()
   const [hovered, setHovered] = useState(false)
+  const scheduled = useRef(false)
   const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
   const unit = msaAreaWidth / numColumns / colWidth
   const left = -scrollX
@@ -48,11 +50,17 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const barHeight = 12
   const polygonHeight = minimapHeight - barHeight
   return (
-    <div style={{ position: 'relative', height: minimapHeight, width: '100%' }}>
+    <div
+      style={{
+        position: 'relative',
+        height: minimapHeight,
+        width: '100%',
+      }}
+    >
       <div
         style={{
-          boxSizing: 'border-box',
           height: barHeight,
+          boxSizing: 'border-box',
           border: '1px solid #555',
         }}
       />
@@ -67,8 +75,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,

package/src/components/msa/MSACanvasBlock.tsx

@@ -75,7 +75,7 @@ const MSACanvasBlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth) + 1
+        const x = Math.floor(mouseX / colWidth)
         const y = Math.floor(mouseY / rowHeight)
         model.setMousePos(x, y)
       }}
@@ -86,7 +86,7 @@ const MSACanvasBlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth) + 1
+        const x = Math.floor(mouseX / colWidth)
         const y = Math.floor(mouseY / rowHeight)
         if (x === mouseClickCol && y === mouseClickRow) {
           model.setMouseClickPos(undefined, undefined)
@@ -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={{

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -6,7 +6,11 @@ import { autorun } from 'mobx'
 import type { MsaViewModel } from '../../model'
 import { renderMouseover } from './renderMSAMouseover'
 
-const MSAMouseoverCanvas = observer(({ model }: { model: MsaViewModel }) => {
+const MSAMouseoverCanvas = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const ref = useRef<HTMLCanvasElement>(null)
   const { height, width } = model
   useEffect(() => {

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -55,7 +55,7 @@ function drawTiles({
     rowHeight,
     fillPalette,
     strokePalette,
-    tidyFilteredGatheredAnnotations,
+    tidyFilteredGatheredInterProAnnotations,
   } = model
 
   for (const node of visibleLeaves) {
@@ -65,7 +65,7 @@ function drawTiles({
     } = node
     const y = x!
 
-    const entry = tidyFilteredGatheredAnnotations?.[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)

package/src/components/msa/renderMSABlock.ts

@@ -111,34 +111,36 @@ function drawTiles({
     } = 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 color =
-        colorSchemeName === 'clustalx_protein_dynamic'
-          ? getClustalXColor(
-              colStats[xStart + i],
-              colStatsSums[xStart + i],
-              model,
-              name,
-              xStart + i,
-            )
-          : colorSchemeName === 'percent_identity_dynamic'
-            ? getPercentIdentityColor(
-                colStats[xStart + i],
-                colStatsSums[xStart + i],
+    if (str) {
+      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]!,
                 model,
                 name,
                 xStart + i,
               )
-            : colorScheme[letter.toUpperCase()]
-      if (bgColor) {
-        ctx.fillStyle = color || theme.palette.background.default
-        ctx.fillRect(
-          i * colWidth + offsetX - (offsetX % colWidth),
-          y - rowHeight,
-          colWidth,
-          rowHeight,
-        )
+            : colorSchemeName === 'percent_identity_dynamic'
+              ? getPercentIdentityColor(
+                  colStats[xStart + i]!,
+                  colStatsSums[xStart + i]!,
+                  model,
+                  name,
+                  xStart + i,
+                )
+              : colorScheme[letter.toUpperCase()]
+        if (bgColor) {
+          ctx.fillStyle = color || theme.palette.background.default
+          ctx.fillRect(
+            i * colWidth + offsetX - (offsetX % colWidth),
+            y - rowHeight,
+            colWidth,
+            rowHeight,
+          )
+        }
       }
     }
   }
@@ -179,21 +181,23 @@ function drawText({
       } = 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 color = colorScheme[letter.toUpperCase()]
-        const contrast = contrastLettering
-          ? contrastScheme[letter.toUpperCase()] || 'black'
-          : 'black'
-        const x = i * colWidth + offsetX - (offsetX % colWidth)
+      if (str) {
+        for (let i = 0; i < str.length; i++) {
+          const letter = str[i]!
+          const color = colorScheme[letter.toUpperCase()]
+          const contrast = contrastLettering
+            ? contrastScheme[letter.toUpperCase()] || 'black'
+            : 'black'
+          const x = i * colWidth + offsetX - (offsetX % colWidth)
 
-        // note: -rowHeight/4 matches +rowHeight/4 in tree
-        ctx.fillStyle = actuallyShowDomains
-          ? 'black'
-          : bgColor
-            ? contrast
-            : color || 'black'
-        ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
+          // note: -rowHeight/4 matches +rowHeight/4 in tree
+          ctx.fillStyle = actuallyShowDomains
+            ? 'black'
+            : bgColor
+              ? contrast
+              : color || 'black'
+          ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
+        }
       }
     }
   }

package/src/components/msa/renderMSAMouseover.ts

@@ -28,7 +28,7 @@ export function renderMouseover({
   ctx.clearRect(0, 0, width, height)
   if (mouseCol !== undefined) {
     ctx.fillStyle = hoverColor
-    ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseRow !== undefined) {
     ctx.fillStyle = hoverColor
@@ -36,7 +36,7 @@ export function renderMouseover({
   }
   if (mouseClickCol !== undefined) {
     ctx.fillStyle = highlightColor
-    ctx.fillRect((mouseClickCol - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseClickCol * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseClickRow !== undefined) {
     ctx.fillStyle = highlightColor
@@ -44,6 +44,6 @@ export function renderMouseover({
   }
   if (mouseCol2 !== undefined) {
     ctx.fillStyle = highlightColor
-    ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseCol2 * colWidth + scrollX, 0, colWidth, height)
   }
 }

package/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()
         }}
       >

package/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

package/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`)
             }