react-msaview 5.0.13 → 5.1.0

package/src/fetchUtils.ts

@@ -20,6 +20,20 @@ export async function jsonfetch<T>(url: string, args?: RequestInit) {
   return response.json() as T
 }
 
-export function timeout(time: number) {
-  return new Promise(res => setTimeout(res, time))
+export function timeout(time: number, signal?: AbortSignal) {
+  return new Promise<void>((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException('Aborted', 'AbortError'))
+    } else {
+      const id = setTimeout(resolve, time)
+      signal?.addEventListener('abort', () => {
+        clearTimeout(id)
+        reject(new DOMException('Aborted', 'AbortError'))
+      })
+    }
+  })
+}
+
+export function isAbortError(e: unknown) {
+  return e instanceof DOMException && e.name === 'AbortError'
 }

package/src/hierarchy.ts

@@ -10,6 +10,7 @@ export interface HierarchyNode<T = NodeWithIds> {
   x?: number
   y?: number
   len?: number
+  depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
 }
 
@@ -203,6 +204,33 @@ export function collapse<T>(node: HierarchyNode<T>) {
   }
 }
 
+// Cladogram positioning based on ape's plot.phylo: uses topological depth (max
+// steps to a tip) instead of branch length so all leaves align at the rightmost
+// x. Memoizes onto node.depthToLeaf since the layout walks the tree repeatedly.
+// See https://github.com/emmanuelparadis/ape/blob/master/R/plot.phylo.R
+export function calcDepthToLeaf(node: HierarchyNode): number {
+  if (node.depthToLeaf === undefined) {
+    let maxDepth = 0
+    if (node.children) {
+      for (const child of node.children) {
+        maxDepth = Math.max(maxDepth, 1 + calcDepthToLeaf(child))
+      }
+    }
+    node.depthToLeaf = maxDepth
+  }
+  return node.depthToLeaf
+}
+
+export function findMaxBranchLen(node: HierarchyNode): number {
+  let maxLen = node.len || 0
+  if (node.children) {
+    for (const child of node.children) {
+      maxLen = Math.max(maxLen, findMaxBranchLen(child))
+    }
+  }
+  return maxLen
+}
+
 export function maxLength(d: HierarchyNode): number {
   return (
     (d.data.length || 0) +

package/src/launchInterProScan.ts

@@ -1,6 +1,6 @@
 import { getSession } from '@jbrowse/core/util'
 
-import { jsonfetch, textfetch, timeout } from './fetchUtils.ts'
+import { isAbortError, jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
 import type { MsaViewModel } from './model.ts'
 
@@ -29,12 +29,14 @@ async function runInterProScan({
   onJobId,
   programs,
   model,
+  signal,
 }: {
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
   onJobId?: (arg: string) => void
   model: MsaViewModel
+  signal?: AbortSignal
 }) {
   const jobId = await textfetch(`${base}/iprscan5/run`, {
     method: 'POST',
@@ -43,37 +45,42 @@ async function runInterProScan({
       sequence: seq,
       programs: programs.join(','),
     }),
+    signal,
   })
   onJobId?.(jobId)
   await wait({
     jobId,
     onProgress,
+    signal,
   })
-  await loadInterProScanResultsWithStatus({ jobId, model })
+  await loadInterProScanResultsWithStatus({ jobId, model, onProgress, signal })
 }
 
-function loadInterProScanResults(jobId: string) {
+function loadInterProScanResults(jobId: string, signal?: AbortSignal) {
   return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
+    { signal },
   )
 }
 
 async function wait({
   onProgress,
   jobId,
+  signal,
 }: {
   jobId: string
   onProgress: (arg?: { msg: string; url?: string }) => void
+  signal?: AbortSignal
 }) {
   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)
+        await timeout(1000, signal)
         onProgress({ msg: `Checking status ${10 - i}`, url })
       }
-      const result = await textfetch(url)
+      const result = await textfetch(url, { signal })
       if (result.includes('FINISHED')) {
         break
       }
@@ -93,6 +100,7 @@ export async function launchInterProScan({
   onJobId,
   onProgress,
   model,
+  signal,
 }: {
   algorithm: string
   seq: string
@@ -100,6 +108,7 @@ export async function launchInterProScan({
   onProgress: (arg?: { msg: string; url?: string }) => void
   onJobId?: (arg: string) => void
   model: MsaViewModel
+  signal?: AbortSignal
 }) {
   try {
     onProgress({ msg: `Launching ${algorithm} MSA` })
@@ -110,10 +119,17 @@ export async function launchInterProScan({
         onProgress,
         programs,
         model,
+        signal,
       })
     } else {
       throw new Error('unknown algorithm')
     }
+  } catch (e) {
+    if (isAbortError(e)) {
+      getSession(model).notify('Cancelled InterProScan query', 'info')
+    } else {
+      throw e
+    }
   } finally {
     onProgress()
   }
@@ -122,25 +138,33 @@ export async function launchInterProScan({
 async function loadInterProScanResultsWithStatus({
   jobId,
   model,
+  onProgress,
+  signal,
 }: {
   jobId: string
   model: MsaViewModel
+  onProgress: (arg?: { msg: string; url?: string }) => void
+  signal?: AbortSignal
 }) {
   try {
-    model.setStatus({
+    onProgress({
       msg: `Downloading results of ${jobId} (for larger sequences this can be slow, click status to download and upload in the manual tab)`,
       url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
     })
-    const ret = await loadInterProScanResults(jobId)
+    const ret = await loadInterProScanResults(jobId, signal)
     model.setInterProAnnotations(
       Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
     )
     model.setShowDomains(true)
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
   } catch (e) {
-    console.error(e)
-    getSession(model).notifyError(`${e}`, e)
+    if (isAbortError(e)) {
+      getSession(model).notify('Cancelled InterProScan query', 'info')
+    } else {
+      console.error(e)
+      getSession(model).notifyError(`${e}`, e)
+    }
   } finally {
-    model.setStatus()
+    onProgress()
   }
 }

package/src/model.ts

@@ -20,6 +20,7 @@ import {
 } from 'msa-parsers'
 
 import { blocksX, blocksY } from './calculateBlocks.ts'
+import { clustalXColumnColors } from './clustalX.ts'
 import colorSchemes from './colorSchemes.ts'
 import ConservationTrack from './components/ConservationTrack.tsx'
 import TextTrack from './components/TextTrack.tsx'
@@ -48,9 +49,11 @@ import {
 import { createPaletteMap } from './createPaletteMap.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
+  calcDepthToLeaf,
   clusterLayout,
   collapse,
   find,
+  findMaxBranchLen,
   hierarchy,
   leaves,
   links,
@@ -90,9 +93,9 @@ import type { Theme } from '@mui/material'
 /**
  * #stateModel MsaView
  * extends
- * - DialogQueueSessionMixin
- * - MSAModel
- * - Tree
+ * - [DialogQueueSessionMixin](../dialogqueuesessionmixin)
+ * - [MSAModel](../msamodel)
+ * - [Tree](../tree)
  */
 function stateModelFactory() {
   return types
@@ -242,7 +245,9 @@ function stateModelFactory() {
       /**
        * #volatile
        */
-      status: undefined as { msg: string; url?: string } | undefined,
+      status: undefined as
+        | { msg: string; url?: string; onCancel?: () => void }
+        | undefined,
       /**
        * #volatile
        * high resolution scale factor, helps make canvas look better on hi-dpi
@@ -337,6 +342,7 @@ function stateModelFactory() {
       /**
        * #volatile
        */
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       error: undefined as unknown,
 
       /**
@@ -921,13 +927,9 @@ function stateModelFactory() {
         const columns = this.columns2d
         for (const column of columns) {
           for (let j = 0; j < column.length; j++) {
-            const l = r[j] || {}
+            const l = (r[j] ??= {})
             const cj = column[j]!
-            if (!l[cj]) {
-              l[cj] = 0
-            }
-            l[cj]++
-            r[j] = l
+            l[cj] = (l[cj] ?? 0) + 1
           }
         }
         return r
@@ -1005,136 +1007,9 @@ function stateModelFactory() {
        */
       get colClustalX() {
         const { colStats, colStatsSums } = this
-        return colStats.map((stats, i) => {
-          const total = colStatsSums[i]!
-          const colors: Record<string, string> = {}
-
-          const W = stats.W ?? 0
-          const L = stats.L ?? 0
-          const V = stats.V ?? 0
-          const I = stats.I ?? 0
-          const M = stats.M ?? 0
-          const A = stats.A ?? 0
-          const F = stats.F ?? 0
-          const C = stats.C ?? 0
-          const H = stats.H ?? 0
-          const P = stats.P ?? 0
-          const R = stats.R ?? 0
-          const K = stats.K ?? 0
-          const Q = stats.Q ?? 0
-          const E = stats.E ?? 0
-          const D = stats.D ?? 0
-          const T = stats.T ?? 0
-          const S = stats.S ?? 0
-          const G = stats.G ?? 0
-          const Y = stats.Y ?? 0
-          const N = stats.N ?? 0
-
-          const WLVIMAFCHPY = W + L + V + I + M + A + F + C + H + P + Y
-          const KR = K + R
-          const QE = Q + E
-          const ED = E + D
-          const TS = T + S
-
-          if (WLVIMAFCHPY / total > 0.6) {
-            colors.W = 'rgb(128,179,230)'
-            colors.L = 'rgb(128,179,230)'
-            colors.V = 'rgb(128,179,230)'
-            colors.A = 'rgb(128,179,230)'
-            colors.I = 'rgb(128,179,230)'
-            colors.M = 'rgb(128,179,230)'
-            colors.F = 'rgb(128,179,230)'
-            colors.C = 'rgb(128,179,230)'
-          }
-
-          if (
-            KR / total > 0.6 ||
-            K / total > 0.8 ||
-            R / total > 0.8 ||
-            Q / total > 0.8
-          ) {
-            colors.K = '#d88'
-            colors.R = '#d88'
-          }
-
-          if (
-            KR / total > 0.6 ||
-            QE / total > 0.5 ||
-            E / total > 0.8 ||
-            Q / total > 0.8 ||
-            D / total > 0.8
-          ) {
-            colors.E = 'rgb(192, 72, 192)'
-          }
-
-          if (
-            KR / total > 0.6 ||
-            ED / total > 0.5 ||
-            K / total > 0.8 ||
-            R / total > 0.8 ||
-            Q / total > 0.8
-          ) {
-            colors.D = 'rgb(204, 77, 204)'
-          }
-
-          if (N / total > 0.5 || Y / total > 0.85) {
-            colors.N = '#8f8'
-          }
-
-          if (
-            KR / total > 0.6 ||
-            QE / total > 0.6 ||
-            Q / total > 0.85 ||
-            E / total > 0.85 ||
-            K / total > 0.85 ||
-            R / total > 0.85
-          ) {
-            colors.Q = '#8f8'
-          }
-
-          if (
-            WLVIMAFCHPY / total > 0.6 ||
-            TS / total > 0.5 ||
-            S / total > 0.85 ||
-            T / total > 0.85
-          ) {
-            colors.S = 'rgb(26,204,26)'
-            colors.T = 'rgb(26,204,26)'
-          }
-
-          if (C / total > 0.85) {
-            colors.C = 'rgb(240, 128, 128)'
-          }
-
-          if (G / total > 0) {
-            colors.G = 'rgb(240, 144, 72)'
-          }
-
-          if (P / total > 0) {
-            colors.P = 'rgb(204, 204, 0)'
-          }
-
-          if (
-            WLVIMAFCHPY / total > 0.6 ||
-            W / total > 0.85 ||
-            Y / total > 0.85 ||
-            A / total > 0.85 ||
-            C / total > 0.85 ||
-            P / total > 0.85 ||
-            Q / total > 0.85 ||
-            F / total > 0.85 ||
-            H / total > 0.85 ||
-            I / total > 0.85 ||
-            L / total > 0.85 ||
-            M / total > 0.85 ||
-            V / total > 0.85
-          ) {
-            colors.H = 'rgb(26, 179, 179)'
-            colors.Y = 'rgb(26, 179, 179)'
-          }
-
-          return colors
-        })
+        return colStats.map((stats, i) =>
+          clustalXColumnColors(stats, colStatsSums[i]!),
+        )
       },
 
       /**
@@ -1208,6 +1083,22 @@ function stateModelFactory() {
         return leaves(this.hierarchy)
       },
 
+      /**
+       * #getter
+       * max branch length across the tree, used to scale phylogram x-positions
+       */
+      get maxBranchLength() {
+        return findMaxBranchLen(this.hierarchy)
+      },
+
+      /**
+       * #getter
+       * max topological depth to a tip, used to scale cladogram x-positions
+       */
+      get maxDepthToLeaf() {
+        return calcDepthToLeaf(this.hierarchy)
+      },
+
       /**
        * #getter
        */
@@ -1419,7 +1310,7 @@ function stateModelFactory() {
       /**
        * #action
        */
-      setStatus(status?: { msg: string; url?: string }) {
+      setStatus(status?: { msg: string; url?: string; onCancel?: () => void }) {
         self.status = status
       },
     }))
@@ -1785,8 +1676,7 @@ function stateModelFactory() {
       },
 
       initFilter(arg: string) {
-        const ret = self.featureFilters.get(arg)
-        if (ret === undefined) {
+        if (!self.featureFilters.has(arg)) {
           self.featureFilters.set(arg, true)
         }
       },

package/src/useColorContrast.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+
+import { useTheme } from '@mui/material'
+
+import { colorContrast } from './util.ts'
+
+/**
+ * Resolves the current theme and a memoized contrast-color scheme for a given
+ * color scheme. Shared by the MSA and text-track canvas blocks.
+ */
+export function useColorContrast(colorScheme: Record<string, string>) {
+  const theme = useTheme()
+  const contrastScheme = useMemo(
+    () => colorContrast(colorScheme, theme),
+    [colorScheme, theme],
+  )
+  return { theme, contrastScheme }
+}

package/src/useDragScroll.ts

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Tracks a mouse drag along a single axis and reports the scroll delta on each
+ * animation frame. Shared by the horizontal Minimap and the VerticalScrollbar.
+ *
+ * `onScroll` is invoked with the pixel delta since drag start and the scroll
+ * offset captured when the drag began. Memoize it (useCallback) so the document
+ * listeners are not re-attached on every render.
+ */
+export function useDragScroll(
+  axis: 'x' | 'y',
+  onScroll: (delta: number, startScroll: number) => void,
+) {
+  const scheduled = useRef(false)
+  const [mouseDown, setMouseDown] = useState<{
+    client: number
+    startScroll: number
+  }>()
+
+  useEffect(() => {
+    if (mouseDown !== undefined) {
+      const { client: startClient, startScroll } = mouseDown
+      function onMove(event: MouseEvent) {
+        if (!scheduled.current) {
+          scheduled.current = true
+          requestAnimationFrame(() => {
+            const client = axis === 'x' ? event.clientX : event.clientY
+            onScroll(client - startClient, startScroll)
+            scheduled.current = false
+          })
+        }
+      }
+      function onUp() {
+        setMouseDown(undefined)
+      }
+      document.addEventListener('mousemove', onMove)
+      document.addEventListener('mouseup', onUp)
+      return () => {
+        document.removeEventListener('mousemove', onMove)
+        document.removeEventListener('mouseup', onUp)
+      }
+    }
+  }, [axis, onScroll, mouseDown])
+
+  return {
+    dragging: mouseDown !== undefined,
+    startDrag: (event: React.MouseEvent, startScroll: number) => {
+      setMouseDown({
+        client: axis === 'x' ? event.clientX : event.clientY,
+        startScroll,
+      })
+    },
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.0.13'
+export const version = '5.1.0'