react-msaview 9.0.0 → 9.1.1

package/src/treeDisplay.ts

@@ -0,0 +1,278 @@
+import { generateNodeIds, parseEmfTree, parseNewick } from 'msa-parsers'
+
+import { cladeHighlightAlpha, cladeHighlightColor } from './constants.ts'
+import { flatToTree } from './flatToTree.ts'
+import {
+  collapse,
+  find,
+  forEachDescendant,
+  hierarchy,
+  leafIndex,
+  leaves,
+  mrca,
+  sort,
+  sum as hierarchySum,
+} from './hierarchy.ts'
+import { parseAsn1 } from './parseAsn1.ts'
+import { midpointRoot, preorder, rerootTree } from './rerootTree.ts'
+import { withAlpha } from './util.ts'
+
+import type { HierarchyNode } from './hierarchy.ts'
+import type { TreeNode } from './rerootTree.ts'
+import type {
+  Clade,
+  CladeMark,
+  NodeWithIds,
+  ResolvedClade,
+  TreeOrder,
+  TreeRoot,
+} from './types.ts'
+
+export function parseTreeText(text: string) {
+  if (text.startsWith('BioTreeContainer')) {
+    return flatToTree(parseAsn1(text))
+  }
+  return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text)
+}
+
+// the marks that set tree state from a node rather than drawing
+const seedingMarks = new Set<CladeMark>(['collapse', 'focus', 'rotate'])
+
+/**
+ * Each tip of the full tree in the order the tree draws it, with the on-screen
+ * row that shows it: its own, or the row of the collapsed node standing for it
+ */
+function tipRows(root: HierarchyNode<NodeWithIds>) {
+  const rows = new Map<string, { order: number; row: number }>()
+  let row = 0
+  const pushReversed = (
+    stack: HierarchyNode<NodeWithIds>[],
+    nodes: HierarchyNode<NodeWithIds>[],
+  ) => {
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      stack.push(nodes[i]!)
+    }
+  }
+  const stack = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    if (node.children?.length) {
+      pushReversed(stack, node.children)
+    } else {
+      const hidden = [node]
+      while (hidden.length > 0) {
+        const tip = hidden.pop()!
+        const kids = tip.children ?? tip._children
+        if (kids?.length) {
+          pushReversed(hidden, kids)
+        } else {
+          rows.set(tip.data.name, { order: rows.size, row })
+        }
+      }
+      row++
+    }
+  }
+  return rows
+}
+
+/**
+ * The rows a clade covers and the node an `mrca` names, or undefined when the
+ * clade does not resolve: a tip name the tree does not have or has twice, or a
+ * leaf count `tips` disagrees with. A `range` counts its tips in the order
+ * `tips` gives them, so a collapsed clade inside it counts every leaf it
+ * stands for. `index` is the memoized leaf pass over the tree.
+ */
+function cladeRows(
+  clade: Clade,
+  root: HierarchyNode<NodeWithIds>,
+  index: Map<string, HierarchyNode<NodeWithIds> | undefined>,
+  tips: Map<string, { order: number; row: number }>,
+): { rows: [number, number]; nodeId?: string } | undefined {
+  if (clade.range) {
+    const [a, b] = clade.range.map(name =>
+      index.get(name) ? tips.get(name) : undefined,
+    )
+    if (a === undefined || b === undefined) {
+      return undefined
+    }
+    const [first, last] = a.order <= b.order ? [a, b] : [b, a]
+    return last.order - first.order + 1 === clade.tips
+      ? { rows: [first.row, last.row] }
+      : undefined
+  }
+  const node = clade.mrca ? mrca(root, clade.mrca, index) : undefined
+  if (!node) {
+    return undefined
+  }
+  const nodeTips = leaves(node)
+  if (nodeTips.length !== clade.tips) {
+    return undefined
+  }
+  let first = Infinity
+  let last = -Infinity
+  for (const tip of nodeTips) {
+    const row = tips.get(tip.data.name)?.row
+    if (row !== undefined) {
+      first = Math.min(first, row)
+      last = Math.max(last, row)
+    }
+  }
+  return first <= last
+    ? { rows: [first, last], nodeId: node.data.id }
+    : undefined
+}
+
+/**
+ * Every clade that resolves, with its fill color settled, against the rows of
+ * `displayed`, the tree as drawn. The tree panel resolves against the
+ * displayed rows and the overview against its own, so both take the tree they
+ * draw. A `range` record names no node, so the seeding marks, which need one,
+ * drop it.
+ */
+export function resolveClades(
+  clades: Clade[],
+  root: HierarchyNode<NodeWithIds>,
+  displayed: HierarchyNode<NodeWithIds>,
+): ResolvedClade[] {
+  const index = leafIndex(root)
+  const tips = tipRows(displayed)
+  return clades.flatMap(clade => {
+    const resolved = cladeRows(clade, root, index, tips)
+    const seeding = seedingMarks.has(clade.mark)
+    return resolved && !(seeding && resolved.nodeId === undefined)
+      ? [
+          {
+            ...resolved,
+            mark: clade.mark,
+            color: withAlpha(
+              clade.color ?? cladeHighlightColor,
+              cladeHighlightAlpha,
+            ),
+            markColor: clade.color,
+            label: clade.label,
+          },
+        ]
+      : []
+  })
+}
+
+const childOrders: Record<
+  TreeOrder,
+  ((a: HierarchyNode, b: HierarchyNode) => number) | undefined
+> = {
+  input: undefined,
+  branchLength: (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1),
+  ladderize: (a, b) => a.value! - b.value!,
+  ladderizeReverse: (a, b) => b.value! - a.value!,
+}
+
+/**
+ * The tree with the display transforms applied: leaf counts summed, children
+ * put in `order` and each `rotated` node's reversed, `showOnly` taken as the
+ * new root, and each `collapsed` clade folded. The overview builds the same
+ * tree without the focus, so it shows the focused subtree inside the whole.
+ */
+export function buildTreeRoot(
+  tree: NodeWithIds,
+  {
+    collapsed,
+    rotated,
+    order,
+    showOnly,
+  }: {
+    collapsed: readonly string[]
+    rotated: readonly string[]
+    order: TreeOrder
+    showOnly?: string
+  },
+) {
+  let hier = hierarchy(tree, d => d.children)
+  hierarchySum(hier, d => (d.children.length > 0 ? 0 : 1))
+  const compare = childOrders[order]
+  if (compare) {
+    sort(hier, compare)
+  }
+  if (rotated.length > 0) {
+    const flip = new Set(rotated)
+    forEachDescendant(hier, n => {
+      if (flip.has(n.data.id)) {
+        n.children?.reverse()
+      }
+    })
+  }
+
+  if (showOnly) {
+    const res = find(hier, n => n.data.id === showOnly)
+    if (res) {
+      hier = res
+    }
+  }
+
+  for (const collapsedId of collapsed) {
+    const node = find(hier, n => n.data.id === collapsedId)
+    if (node) {
+      if (node.children) {
+        collapse(node)
+      } else if (node.parent?.children) {
+        node.parent.children = node.parent.children.filter(
+          c => c.data.id !== collapsedId,
+        )
+      }
+    }
+  }
+
+  return hier
+}
+
+/**
+ * The node whose branch an outgroup roots the tree on: the outgroup's most
+ * recent common ancestor, or the rest of the tips' where that ancestor is the
+ * root, since the outgroup then straddles the root and the branch above the
+ * other side is the same branch of the unrooted tree.
+ */
+export function outgroupNode(root: HierarchyNode, outgroup: string[]) {
+  const index = leafIndex(root)
+  const node = mrca(root, outgroup, index)
+  if (node !== root) {
+    return node
+  }
+  const out = new Set(outgroup)
+  const rest = leaves(root)
+    .map(n => n.data.name)
+    .filter(name => !out.has(name))
+  const other = mrca(root, rest, index)
+  return other === root ? undefined : other
+}
+
+/**
+ * `tree` rerooted as `treeRoot` asks, with fresh path ids. The ids of the tree
+ * as written become names on unnamed nodes, and a rerooting would carry them
+ * along as labels, so they come off first.
+ */
+export function rootTree(tree: NodeWithIds, treeRoot: TreeRoot) {
+  const plain = new Map<NodeWithIds, TreeNode>()
+  for (const node of preorder(tree).reverse()) {
+    plain.set(node, {
+      name: node.name === node.id ? undefined : node.name,
+      length: node.length,
+      children: node.children.map(c => plain.get(c)!),
+    })
+  }
+  const input = plain.get(tree)!
+  if (treeRoot === 'midpoint') {
+    return generateNodeIds(midpointRoot(input))
+  }
+  const target = outgroupNode(
+    hierarchy(tree, d => d.children),
+    treeRoot.outgroup,
+  )
+  return target
+    ? generateNodeIds(rerootTree(input, plain.get(target.data)!))
+    : tree
+}
+
+// the inclusive tip indices a node covers, from its xMin/xMax in a layout one
+// row per tip
+export function tipRange(node: HierarchyNode): [number, number] {
+  return [Math.round(node.xMin! - 0.5), Math.round(node.xMax! - 0.5)]
+}

package/src/types.ts

@@ -27,14 +27,11 @@ export type ColorScheme = string | Required<Pick<ScaleSpec, 'map'>>
 export interface BasicTrackModel {
   id: string
   name: string
-  associatedRowName?: string
   height: number
   kind: TrackKind
   // the model height this track's divider writes, shared with every track
   // carrying the same key. Absent on a track no divider resizes.
   heightKey?: string
-  // hidden until the user asks for it, unless they have already chosen
-  defaultOff?: boolean
 }
 
 export interface TextTrackModel extends BasicTrackModel {
@@ -64,7 +61,6 @@ export interface ArcTrackModel extends BasicTrackModel {
 }
 
 export interface BasicTrack {
-  ReactComponent: React.FC<any>
   model: TextTrackModel & BarTrackModel & ArcTrackModel
 }
 
@@ -210,6 +206,12 @@ export interface MappedStructure {
   id: string
   kind?: 'experimental' | 'predicted'
   asymId?: string
+  /**
+   * which id `asymId` is, the file's `label_asym_id` or the author's
+   * `auth_asym_id`. Unset reads as either, label first, which is right for the
+   * common entry whose two ids agree and wrong where they collide.
+   */
+  asymIdKind?: 'label' | 'auth'
   url?: string
 }
 

package/src/useWheelScroll.ts

@@ -1,30 +1,34 @@
 import { useEffect, useRef, useState } from 'react'
 
-import {
-  SCROLL_ZOOM_DIVISOR,
-  getZoomNormalizer,
-  normalizeWheelDelta,
-  zoomFactorFromAccum,
-} from './wheelZoom.ts'
+import { WheelZoomSmoother } from './wheelZoom.ts'
+
+const zoomSettleMs = 150
 
 export function useWheelScroll({
   ref,
   onScrollX,
   onScrollY,
   onZoom,
+  onZoomSettle,
+  onWheelScroll,
   scrollZoom,
 }: {
   ref: React.RefObject<HTMLDivElement | null>
   onScrollX?: (delta: number) => void
   onScrollY?: (delta: number) => void
   onZoom?: (scaleFactor: number, offsetX: number, offsetY: number) => void
+  onZoomSettle?: () => void
+  onWheelScroll?: (event: WheelEvent) => void
   scrollZoom?: boolean
 }) {
   const scheduled = useRef(false)
-  const zoomScheduled = useRef(false)
+  const zoomFrame = useRef<number | undefined>(undefined)
+  const zoomSettle = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  )
   const deltaX = useRef(0)
   const deltaY = useRef(0)
-  const zoomAccum = useRef(0)
+  const zoomSmoother = useRef(new WheelZoomSmoother())
   const zoomX = useRef(0)
   const zoomY = useRef(0)
   const lastZoomTime = useRef<number | null>(null)
@@ -47,28 +51,31 @@ export function useWheelScroll({
         !event.shiftKey &&
         Math.abs(event.deltaY) >= Math.abs(event.deltaX)
       if (onZoom && (isCtrlZoom || isScrollZoom)) {
+        const zoom = onZoom
         const rect = curr!.getBoundingClientRect()
-        // normalize away deltaMode (line/page), then divide by an adaptive
-        // factor so fine pinches and coarse notches feel consistent
-        const dY = normalizeWheelDelta(event.deltaY, event.deltaMode)
-        const divisor = isCtrlZoom ? getZoomNormalizer(dY) : SCROLL_ZOOM_DIVISOR
-        zoomAccum.current += dY / divisor
+        zoomSmoother.current.add(event.deltaY, event.deltaMode, isCtrlZoom)
         zoomX.current = event.clientX - rect.left
         zoomY.current = event.clientY - rect.top
-        if (!zoomScheduled.current) {
-          zoomScheduled.current = true
-          requestAnimationFrame(now => {
+        if (zoomFrame.current === undefined) {
+          lastZoomTime.current = null
+          const frame = (now: number) => {
             const elapsed =
               lastZoomTime.current === null ? 16.67 : now - lastZoomTime.current
             lastZoomTime.current = now
-            onZoom(
-              zoomFactorFromAccum(zoomAccum.current, Math.min(100, elapsed)),
+            zoom(
+              zoomSmoother.current.step(Math.min(100, elapsed)),
               zoomX.current,
               zoomY.current,
             )
-            zoomAccum.current = 0
-            zoomScheduled.current = false
-          })
+            clearTimeout(zoomSettle.current)
+            zoomSettle.current = setTimeout(() => {
+              onZoomSettle?.()
+            }, zoomSettleMs)
+            zoomFrame.current = zoomSmoother.current.idle
+              ? undefined
+              : requestAnimationFrame(frame)
+          }
+          zoomFrame.current = requestAnimationFrame(frame)
         }
         event.preventDefault()
         event.stopPropagation()
@@ -79,6 +86,7 @@ export function useWheelScroll({
       const consumeX = !!onScrollX && event.deltaX !== 0
       const consumeY = !!onScrollY && event.deltaY !== 0
       if (consumeX || consumeY) {
+        onWheelScroll?.(event)
         if (onScrollX) {
           deltaX.current += event.deltaX
         }
@@ -107,8 +115,21 @@ export function useWheelScroll({
     curr.addEventListener('wheel', onWheel, { passive: false })
     return () => {
       curr.removeEventListener('wheel', onWheel)
+      if (zoomFrame.current !== undefined) {
+        cancelAnimationFrame(zoomFrame.current)
+        zoomFrame.current = undefined
+      }
+      clearTimeout(zoomSettle.current)
     }
-  }, [ref, onScrollX, onScrollY, onZoom, scrollZoom])
+  }, [
+    ref,
+    onScrollX,
+    onScrollY,
+    onZoom,
+    onZoomSettle,
+    onWheelScroll,
+    scrollZoom,
+  ])
 
   useEffect(() => {
     if (!mouseDragging) {

package/src/util.ts

@@ -142,3 +142,6 @@ export function computeRowInsertions(blanks: number[], seq: string) {
 export function len(a: { end: number; start: number }) {
   return a.end - a.start
 }
+
+/** reads computeds so a reaction observes them, which keeps them cached */
+export function readComputed(..._values: unknown[]) {}

package/src/version.ts

@@ -1 +1 @@
-export const version = '9.0.0'
+export const version = '9.1.1'

package/src/viewerSnapshot.ts

@@ -0,0 +1,147 @@
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+
+import type { MSAViewerProps } from './components/MSAViewer.tsx'
+import type { ColorScheme, Highlight } from './types.ts'
+
+export function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
+  return typeof scheme === 'string'
+    ? { colorSchemeName: scheme }
+    : scheme
+      ? { customColorScheme: scheme.map }
+      : {}
+}
+
+/**
+ * The `highlightColumns` prop as `highlights`: one `{start, end}` per run of
+ * adjacent 1-based alignment columns
+ */
+export function columnHighlights(columns: number[] = []) {
+  const sorted = [...new Set(columns)].sort((a, b) => a - b)
+  const runs: { start: number; end: number }[] = []
+  for (const column of sorted) {
+    const last = runs.at(-1)
+    if (last?.end === column - 1) {
+      last.end = column
+    } else {
+      runs.push({ start: column, end: column })
+    }
+  }
+  return runs
+}
+
+export function viewerHighlights({
+  highlights = [],
+  highlightColumns,
+}: Pick<MSAViewerProps, 'highlights' | 'highlightColumns'>): Highlight[] {
+  return [...highlights, ...columnHighlights(highlightColumns)]
+}
+
+function urlLocation(uri: string | undefined) {
+  return uri ? { uri, locationType: 'UriLocation' as const } : undefined
+}
+
+/** each filehandle prop, or the URL prop standing in for it */
+export function fileLocations({
+  msaFilehandle,
+  treeFilehandle,
+  gffFilehandle,
+  msaUrl,
+  treeUrl,
+  gffUrl,
+}: MSAViewerProps) {
+  return {
+    msaFilehandle: msaFilehandle ?? urlLocation(msaUrl),
+    treeFilehandle: treeFilehandle ?? urlLocation(treeUrl),
+    gffFilehandle: gffFilehandle ?? urlLocation(gffUrl),
+  }
+}
+
+export function resolveTheme(theme: MSAViewerProps['theme']) {
+  return createJBrowseTheme(
+    theme === 'dark'
+      ? { palette: { mode: 'dark' } }
+      : typeof theme === 'object'
+        ? theme
+        : undefined,
+  )
+}
+
+/**
+ * The model snapshot `MSAViewer` creates from its props. The CLI's `--props`
+ * reads the same JSON the R and Python widgets send, so a figure exported
+ * headlessly draws what the widget drew.
+ */
+export function viewerSnapshot(props: MSAViewerProps) {
+  const {
+    msa,
+    tree,
+    gff,
+    rowData,
+    colorScheme,
+    height,
+    colWidth,
+    rowHeight,
+    allowedGappyness,
+    highlightColumns,
+    highlights,
+    features,
+    selection,
+    clades,
+    relativeTo,
+    columnTracks,
+    residueMappings,
+    encodings,
+    rowPanels,
+    drawTree,
+    treeAreaWidth,
+    showBranchLen,
+    treeOrder,
+    treeRoot,
+    region,
+    residueEncoding,
+  } = props
+  const { msaFilehandle, treeFilehandle, gffFilehandle } = fileLocations(props)
+  return {
+    type: 'MsaView' as const,
+    ...(msa || tree || gff || rowData
+      ? {
+          data: {
+            msa: msa ?? '',
+            tree: tree ?? '',
+            gff,
+            // the row table is stored as this JSON string, which is what a
+            // shared URL and the size limit already cover
+            ...(rowData ? { treeMetadata: JSON.stringify(rowData) } : {}),
+          },
+        }
+      : {}),
+    ...(msaFilehandle ? { msaFilehandle } : {}),
+    ...(treeFilehandle ? { treeFilehandle } : {}),
+    ...(gffFilehandle ? { gffFilehandle } : {}),
+    ...colorSchemeSnapshot(colorScheme),
+    ...(height ? { height } : {}),
+    ...(colWidth ? { colWidth } : {}),
+    ...(rowHeight ? { rowHeight } : {}),
+    ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
+    ...(highlights || highlightColumns
+      ? { highlights: viewerHighlights({ highlights, highlightColumns }) }
+      : {}),
+    ...(features ? { features } : {}),
+    ...(selection ? { selection } : {}),
+    ...(clades ? { clades } : {}),
+    ...(relativeTo ? { relativeTo } : {}),
+    ...(columnTracks ? { columnTracks } : {}),
+    ...(residueMappings ? { residueMappings } : {}),
+    ...(encodings ? { encodings } : {}),
+    ...(rowPanels ? { rowPanels } : {}),
+    ...(drawTree !== undefined ? { drawTree } : {}),
+    ...(treeAreaWidth ? { treeAreaWidth } : {}),
+    ...(showBranchLen !== undefined ? { showBranchLen } : {}),
+    ...(treeOrder ? { treeOrder } : {}),
+    ...(treeRoot ? { treeRoot } : {}),
+    ...(region ? { region } : {}),
+    ...(residueEncoding !== undefined
+      ? { bgColor: residueEncoding === 'fill' }
+      : {}),
+  }
+}

package/src/wheelZoom.ts

@@ -1,47 +1,69 @@
-// Wheel / trackpad-pinch delta handling, adapted from @jbrowse/core's
-// util/wheelZoom (not yet in our pinned @jbrowse/core). Turns raw wheel deltas
-// into a per-frame zoom factor that feels consistent across fine trackpad
-// pinches and coarse mouse notches.
+// Chrome and Firefox encode a trackpad pinch as ctrl+wheel with
+// deltaY = -100 * ln(scale), so dividing by 100 tracks the fingers 1:1
+const PINCH_PX_PER_LOG = 100
 
-// Fixed divisor for plain-wheel scroll-zoom mode, where deltas are big notches.
-export const SCROLL_ZOOM_DIVISOR = 500
+// a plain scroll covers more pixels than a pinch for the same intent
+const SCROLL_PX_PER_LOG = 400
 
-// Cap the zoom change per millisecond so a burst of momentum-scroll events
-// coalesced into one frame can't jump the zoom level (0.2 per ~60fps frame).
-const MAX_ZOOM_RATE_PER_MS = 0.2 / 16.67
+// a pixel delta at least this large counts as a wheel notch
+const NOTCH_MIN_PX = 40
+
+export const NOTCH_ZOOM = 1.25
+
+// the time constant a notch eases in over
+const NOTCH_TAU_MS = 60
+
+// a burst of continuous events coalesced into one frame applies at most 2x
+const MAX_FRAME_LOG = Math.log(2)
+
+// the queue holds at most four notches, which caps a fast spin
+const MAX_PENDING_LOG = 4 * Math.log(NOTCH_ZOOM)
 
-// Convert a wheel delta to pixels regardless of the browser's deltaMode; some
-// browsers/mice report lines or pages instead of pixels.
 export function normalizeWheelDelta(delta: number, mode: number) {
   if (mode === 1) {
-    return delta * 16 // DOM_DELTA_LINE
+    return delta * 16
   }
   if (mode === 2) {
-    return delta * 100 // DOM_DELTA_PAGE
+    return delta * 100
   }
-  return delta // DOM_DELTA_PIXEL
+  return delta
 }
 
-// Adaptive divisor: tiny pinch deltas zoom in larger steps, big mouse notches
-// in finer steps, so a trackpad pinch and a mouse wheel feel similar.
-export function getZoomNormalizer(deltaY: number) {
-  const abs = Math.abs(deltaY)
-  if (abs < 6) {
-    return 25
-  }
-  if (abs > 150) {
-    return 500
+const clampAbs = (x: number, max: number) => Math.max(-max, Math.min(max, x))
+
+// Positive log zooms in. Feed every wheel event to add() and call step() once
+// per animation frame with the time since the last frame; step() returns the
+// multiplier for colWidth/rowHeight.
+export class WheelZoomSmoother {
+  private continuous = 0
+  private pending = 0
+
+  add(deltaY: number, deltaMode: number, isPinch: boolean) {
+    const px = normalizeWheelDelta(deltaY, deltaMode)
+    if (deltaMode !== 0 || Math.abs(px) >= NOTCH_MIN_PX) {
+      const notches =
+        deltaMode !== 0 ? 1 : Math.min(Math.max(Math.abs(px) / 100, 1), 3)
+      this.pending = clampAbs(
+        this.pending - Math.sign(px) * notches * Math.log(NOTCH_ZOOM),
+        MAX_PENDING_LOG,
+      )
+    } else {
+      this.continuous -= px / (isPinch ? PINCH_PX_PER_LOG : SCROLL_PX_PER_LOG)
+    }
   }
-  if (abs > 30) {
-    return 150
+
+  get idle() {
+    return this.continuous === 0 && this.pending === 0
   }
-  return 75
-}
 
-// Turn accumulated, normalized zoom intent into a colWidth/rowHeight multiplier.
-// Positive accum (wheel toward user) zooms out (factor < 1); negative zooms in.
-export function zoomFactorFromAccum(zoomAccum: number, elapsedMs: number) {
-  const max = MAX_ZOOM_RATE_PER_MS * elapsedMs
-  const d = Math.max(-max, Math.min(max, zoomAccum))
-  return d > 0 ? 1 / (1 + d) : 1 - d
+  step(elapsedMs: number) {
+    let eased = this.pending * (1 - Math.exp(-elapsedMs / NOTCH_TAU_MS))
+    if (Math.abs(this.pending - eased) < 0.005) {
+      eased = this.pending
+    }
+    this.pending -= eased
+    const log = clampAbs(this.continuous + eased, MAX_FRAME_LOG)
+    this.continuous = 0
+    return Math.exp(log)
+  }
 }