react-msaview 3.2.0 → 3.2.1

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

@@ -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'

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

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

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

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

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

package/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 => ({