react-msaview 9.1.1 → 9.3.0

package/src/components/tracks/drawTracks.ts

@@ -1,6 +1,7 @@
 import { columnLogoStack } from '../../sequenceLogo.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { contrastTextFn } from '../../util.ts'
+import { tileColorFn } from '../msa/tileColor.ts'
 import { visibleColRange } from '../msa/visibleColRange.ts'
 
 import type { ColumnCounts } from '../../columnCounts.ts'
@@ -106,7 +107,7 @@ function drawArcs({
 function drawTextTrackContent({
   ctx,
   data,
-  colorScheme,
+  colorAt,
   contrastText,
   bgColor,
   drawLetters,
@@ -117,7 +118,7 @@ function drawTextTrackContent({
 }: {
   ctx: RenderCtx
   data: string | undefined
-  colorScheme: Record<string, string>
+  colorAt: (col: number, letter: string) => string | undefined
   contrastText: (color: string | undefined) => string
   bgColor: boolean
   drawLetters: boolean
@@ -135,9 +136,9 @@ function drawTextTrackContent({
 
   for (let i = 0; str && i < str.length; i++) {
     const letter = str[i]!
-    const upper = letter.toUpperCase()
-    const fill = bgColor ? colorScheme[upper] : undefined
-    const x = (xStart + i) * colWidth
+    const col = xStart + i
+    const fill = bgColor ? colorAt(col, letter) : undefined
+    const x = col * colWidth
     if (fill) {
       ctx.fillStyle = fill
       ctx.fillRect(x, 0, colWidth, rowHeight)
@@ -402,15 +403,22 @@ export function drawTrackBlock({
       })
       break
     }
-    case 'text': {
+    case 'text':
+    case 'reference': {
       const { bgColor, fontSize, rowHeight, showMsaLetters } = model
+      const scheme = customColorScheme ?? model.colorScheme
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       setFontSize(ctx, fontSize)
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? model.colorScheme,
+        // the reference row takes its colors from the alignment's own
+        // scheme, per column under a dynamic one
+        colorAt:
+          kind === 'reference'
+            ? tileColorFn(model)
+            : (_col, letter) => scheme[letter.toUpperCase()],
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,

package/src/components/tree/TreeCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useRef } from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { observer } from 'mobx-react'
@@ -20,13 +20,11 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
     scrollY,
     highResScaleFactor,
   } = model
-  const onScrollY = useCallback(
-    (d: number) => {
-      model.doScrollY(d)
-    },
-    [model],
-  )
-  const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
+  const { onPointerDown, touchAction } = useWheelScroll({
+    ref,
+    model,
+    axes: 'y',
+  })
 
   const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
@@ -44,9 +42,9 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div
       ref={ref}
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
+      onPointerDown={onPointerDown}
       style={{
+        touchAction,
         height,
         position: 'relative',
         width: effectiveTreeAreaWidth,

package/src/constants.ts

@@ -4,6 +4,8 @@ import type { TreeOrder } from './types.ts'
 export const defaultRowHeight = 16
 export const defaultColWidth = 12
 export const defaultHeight = 550
+// the dividers' thickness, between the tree and the alignment and under the view
+export const resizeHandleWidth = 5
 export const defaultScrollX = 0
 export const defaultScrollY = 0
 export const defaultCurrentAlignment = 0

package/src/element.ts

@@ -1,5 +1,6 @@
 import { when } from 'mobx'
 
+import { defaultHeight, resizeHandleWidth } from './constants.ts'
 import { mount } from './mount.tsx'
 
 import type { MSAViewerProps } from './components/MSAViewer.tsx'
@@ -46,8 +47,13 @@ const ownAttributes = [
   'theme',
   'reference-row',
   'tree-area-width',
+  'loading',
 ] as const
 
+// how far outside the viewport a lazy element starts mounting, so the viewer
+// is drawing by the time the reader scrolls to it
+const lazyMargin = '200px'
+
 // the attributes a <nightingale-manager> writes on the elements it holds
 const nightingaleAttributes = ['display-start', 'display-end', 'highlight']
 
@@ -87,13 +93,17 @@ function residueRange(model: MsaViewModel, row: string, viewport: Viewport) {
 /**
  * Registers a custom element that renders MSAViewer, for pages with no React.
  * Attributes: msa-url, tree-url, gff-url, color-scheme, height, hide-header,
- * theme, tree-area-width and reference-row. Properties: msa, tree and gff text,
- * features, colorScheme, highlights, columnTracks, residueMappings and
- * selection. The
- * colorScheme property takes a `{map}` the color-scheme attribute cannot hold,
- * and wins over the attribute while set. Events: cell-hover, cell-click,
- * viewport-change and selection-change, each with the MSAViewer callback's
- * value as detail.
+ * theme, tree-area-width, reference-row and loading. Properties: msa, tree and
+ * gff text, features, colorScheme, highlights, columnTracks, residueMappings
+ * and selection. The colorScheme property takes a `{domain, range}` the
+ * color-scheme attribute cannot hold, and wins over the attribute while set. Events:
+ * cell-hover, cell-click, viewport-change and selection-change, each with the
+ * MSAViewer callback's value as detail.
+ *
+ * `loading="lazy"` mounts the viewer once the element comes within 200 pixels
+ * of the viewport, as `<img loading="lazy">` loads its image. Until then the
+ * element shows its own children, such as an `<img>` of the first frame, and
+ * reserves the viewer's height.
  *
  * Inside a <nightingale-manager>, the element registers with it and speaks its
  * protocol: it follows the display-start, display-end and highlight attributes
@@ -110,6 +120,7 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     static observedAttributes = [...ownAttributes, ...nightingaleAttributes]
 
     #viewer?: MountedViewer
+    #nearby?: IntersectionObserver
     #model?: MsaViewModel
     #manager?: NightingaleManager
     #cancelRange?: () => void
@@ -289,7 +300,22 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
       if (!this.style.display) {
         this.style.display = 'block'
       }
-      this.#viewer = mount(this, this.#props())
+      if (this.#lazy) {
+        const height =
+          numberAttribute(this.getAttribute('height')) ?? defaultHeight
+        this.style.minHeight = `${height + resizeHandleWidth}px`
+        this.#nearby = new IntersectionObserver(
+          entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+              this.#mount()
+            }
+          },
+          { rootMargin: lazyMargin },
+        )
+        this.#nearby.observe(this)
+      } else {
+        this.#mount()
+      }
       const manager = this.closest<NightingaleManager>('nightingale-manager')
       if (manager) {
         void customElements.whenDefined('nightingale-manager').then(() => {
@@ -301,7 +327,22 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
       }
     }
 
+    get #lazy() {
+      return (
+        this.getAttribute('loading') === 'lazy' &&
+        typeof IntersectionObserver !== 'undefined'
+      )
+    }
+
+    #mount() {
+      this.#nearby?.disconnect()
+      this.#nearby = undefined
+      this.#viewer ??= mount(this, this.#props())
+    }
+
     disconnectedCallback() {
+      this.#nearby?.disconnect()
+      this.#nearby = undefined
       this.#manager?.unregister(this)
       this.#manager = undefined
       this.#cancelRange?.()
@@ -323,6 +364,10 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
         }
       } else if (name === 'highlight') {
         this.#followHighlight()
+      } else if (name === 'loading') {
+        if (this.#nearby && !this.#lazy) {
+          this.#mount()
+        }
       } else {
         this.#viewer?.update(this.#props())
       }

package/src/featurePanels.ts

@@ -1,12 +1,8 @@
-import { notEmpty } from '@jbrowse/core/util'
-
 import { packDomainLanes } from './components/msa/packDomainLanes.ts'
 import { defaultFeaturePanelWidth } from './constants.ts'
 import { featureField } from './featureFields.ts'
-import { resolveScale } from './scales.ts'
 import { outlineColor } from './util.ts'
 
-import type { ScaleSpec } from './scales.ts'
 import type {
   Annotation,
   DomainBand,
@@ -16,7 +12,7 @@ import type {
 } from './types.ts'
 
 // the fill of a span under a scale that gives its value no color, such as a
-// gene a `map` over gene names leaves out
+// gene a `domain` of gene names leaves out
 const UNSCALED_FEATURE = '#d9d9d9'
 
 // the fraction of a span a following one may cover before it takes a lane of
@@ -247,23 +243,3 @@ export function featurePanelSpans({
     ]),
   )
 }
-
-// a scale over the values a field takes across every feature loaded, so hiding
-// a type in the filter dialog leaves the rest in their colors, and a legend of
-// the values the features drawn carry
-export function resolveFeatureScale(
-  field: string,
-  scale: ScaleSpec | undefined,
-  annotations: Annotation[],
-  drawn: Annotation[],
-) {
-  const valuesOf = (list: Annotation[]) =>
-    list.map(a => featureField(a, field)).filter(notEmpty)
-  const resolved = resolveScale(scale, valuesOf(annotations))
-  const shown = new Set(valuesOf(drawn))
-  return {
-    field,
-    ...resolved,
-    legend: resolved.legend.filter(entry => shown.has(entry.id)),
-  }
-}

package/src/ggplotPalettes.ts

@@ -72,10 +72,22 @@ export const namedPalettes: Record<string, readonly string[]> = {
   ],
 }
 
+// the spellings jbrowse-components' `paletteFromSpec` takes for two of them
+const aliases: Record<string, string> = {
+  okabeIto: 'okabeito',
+  tableau10: 'tableau',
+}
+
 /**
  * The colors a palette name asks for. `ggplot`, an unknown name, and no name at
  * all give undefined, which `createPaletteMap` answers with the hue ramp.
  */
 export function paletteNamed(name?: string) {
-  return name === undefined ? undefined : namedPalettes[name]
+  return name === undefined
+    ? undefined
+    : Object.hasOwn(namedPalettes, name)
+      ? namedPalettes[name]
+      : Object.hasOwn(aliases, name)
+        ? namedPalettes[aliases[name]!]
+        : undefined
 }

package/src/groupKeys.ts

@@ -0,0 +1,54 @@
+// copied from jbrowse-components packages/core/src/util/groupKeys.ts, which
+// @jbrowse/core 5.0.0-beta.9 ships but the hosts the plugin runs on do not
+
+const NUMERIC = /^-?\d+(\.\d+)?$/
+const DIGIT_RUNS = /\d+|\D+/g
+
+function compareRuns(a: string, b: string) {
+  const runsA = a.match(DIGIT_RUNS) ?? []
+  const runsB = b.match(DIGIT_RUNS) ?? []
+  const shared = Math.min(runsA.length, runsB.length)
+  for (let i = 0; i < shared; i++) {
+    const x = runsA[i]!
+    const y = runsB[i]!
+    if (x === y) {
+      continue
+    }
+    if (/^\d/.test(x) && /^\d/.test(y)) {
+      const nx = Number(x)
+      const ny = Number(y)
+      if (nx !== ny) {
+        return nx < ny ? -1 : 1
+      }
+      return x.length < y.length ? -1 : 1
+    }
+    return x < y ? -1 : 1
+  }
+  return runsA.length - runsB.length
+}
+
+/**
+ * Numbers first by value, then every other value run by run with digit runs
+ * by magnitude, so `2` before `10`, `chr2` before `chr10` and `2.3.2.1a`
+ * before `2.3.4.4b`. The empty value sorts last.
+ */
+export function compareGroupKeys(a: string, b: string) {
+  if (a === b) {
+    return 0
+  }
+  if (a === '' || b === '') {
+    return a === '' ? 1 : -1
+  }
+  const numA = NUMERIC.test(a)
+  const numB = NUMERIC.test(b)
+  if (numA !== numB) {
+    return numA ? -1 : 1
+  }
+  if (numA) {
+    const diff = Number(a) - Number(b)
+    if (diff !== 0) {
+      return diff < 0 ? -1 : 1
+    }
+  }
+  return compareRuns(a, b)
+}

package/src/index.ts

@@ -51,8 +51,19 @@ export type { InterProScanResults } from 'msa-parsers'
 export type { ColumnCounts } from './columnCounts.ts'
 export type { ColumnStats } from './columnStats.ts'
 export type { ZoomSnapshot } from './zoomSnapshot.ts'
-// the scale an encoding reads its field through, and what resolving one gives
-export type { ResolvedScale, ScaleSpec } from './scales.ts'
+// the color object a channel reads its field through, and what resolving one
+// gives
+export type {
+  ColorChannel,
+  ColorSpec,
+  LegacyColumnTrack,
+  LegacyEncoding,
+  LegacyRowPanel,
+  LegacyScale,
+  ResolvedScale,
+  ScaleTable,
+  SharedScale,
+} from './scales.ts'
 export type {
   Accession,
   Annotation,