react-msaview 6.0.0 → 6.1.1

package/dist/sequenceLogo.js

@@ -0,0 +1,47 @@
+import { letterOfResidueSlot } from './columnCounts.js';
+/** the y-axis ceiling of a logo: the information content of a fully conserved
+ * column, log2 of the alphabet size */
+export function maxBitsFor(sequenceType) {
+    return Math.log2(sequenceType === 'amino' ? 20 : 4);
+}
+/**
+ * One column of a sequence logo, tallest letter last so a caller can draw the
+ * stack bottom-up in array order.
+ *
+ * Heights follow Schneider & Stephens: the column's information content is
+ * `log2(alphabet) - H` bits, and each residue takes the share of that its own
+ * frequency earns. Frequencies come from the non-gap residues only, so a column
+ * of two residues and eight gaps is read as a two-way choice rather than a
+ * ten-way one -- otherwise every gappy column would look uninformative for the
+ * wrong reason.
+ *
+ * The whole stack is then scaled by the non-gap fraction, which plain WebLogo
+ * does not do. Here it earns its place: the track sits directly under an
+ * alignment where the gaps are visible, and a column that is 90% gap drawing a
+ * full-height stack off its one remaining pair of residues reads as a conserved
+ * site. Scaling makes stack height mean "how much this column tells you about
+ * the family", matching what the conservation track above it already plots.
+ */
+export function columnLogoStack(colStats, col, maxBits) {
+    const total = colStats.total(col);
+    const nonGapTotal = total - colStats.gapCount(col);
+    if (nonGapTotal === 0) {
+        return [];
+    }
+    const informationContent = Math.max(0, maxBits - colStats.entropy(col)) * (nonGapTotal / total);
+    if (informationContent === 0) {
+        return [];
+    }
+    const stack = [];
+    colStats.forEachResidue(col, (slot, count) => {
+        stack.push({
+            letter: letterOfResidueSlot(slot),
+            bits: (count / nonGapTotal) * informationContent,
+        });
+    });
+    // ascending, so drawing in order stacks the tallest letter on top. Ties break
+    // on letter to keep the stack order stable between redraws.
+    stack.sort((a, b) => a.bits - b.bits || a.letter.localeCompare(b.letter));
+    return stack;
+}
+//# sourceMappingURL=sequenceLogo.js.map

package/dist/sequenceLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sequenceLogo.js","sourceRoot":"","sources":["../src/sequenceLogo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAUvD;uCACuC;AACvC,MAAM,UAAU,UAAU,CAAC,YAAqC;IAC9D,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACrD,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAC7B,QAAsB,EACtB,GAAW,EACX,OAAe;IAEf,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACjC,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;IAClD,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,kBAAkB,GACtB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,CAAA;IACtE,IAAI,kBAAkB,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,KAAK,GAAiB,EAAE,CAAA;IAC9B,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC3C,KAAK,CAAC,IAAI,CAAC;YACT,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC;YACjC,IAAI,EAAE,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,kBAAkB;SACjD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IACF,8EAA8E;IAC9E,4DAA4D;IAC5D,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;IACzE,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/types.d.ts

@@ -4,11 +4,13 @@ export interface Accession {
     name: string;
     description: string;
 }
+export type TrackKind = 'text' | 'bar' | 'logo';
 export interface BasicTrackModel {
     id: string;
     name: string;
     associatedRowName?: string;
     height: number;
+    kind: TrackKind;
 }
 export interface TextTrackModel extends BasicTrackModel {
     customColorScheme?: Record<string, string>;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "6.0.0";
+export declare const version = "6.1.1";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '6.0.0';
+export const version = '6.1.1';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -43,8 +43,8 @@
     "@gmod/newick": "^1.0.0",
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "6.0.0",
-    "msa-parsers": "6.0.0"
+    "@jbrowse/svgcanvas": "6.1.1",
+    "msa-parsers": "6.1.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/columnCounts.test.ts

@@ -47,6 +47,21 @@ describe('columnCounts', () => {
     expect(counts.total(3)).toBe(1)
   })
 
+  test('entropy is taken over the non-gap residues only', () => {
+    const counts = columnCountsFromColumns(['AAAA', 'AACC', 'ACGT', 'AC--'])
+    // fully conserved: no choice left to make
+    expect(counts.entropy(0)).toBeCloseTo(0, 10)
+    // even two-way and four-way splits
+    expect(counts.entropy(1)).toBeCloseTo(1, 10)
+    expect(counts.entropy(2)).toBeCloseTo(2, 10)
+    // the two gaps do not turn a 1-bit choice into a 2-bit one
+    expect(counts.entropy(3)).toBeCloseTo(1, 10)
+  })
+
+  test('an all-gap column has no entropy rather than NaN', () => {
+    expect(columnCountsFromColumns(['----']).entropy(0)).toBe(0)
+  })
+
   test('residue slots round-trip to their letters', () => {
     const counts = columnCountsFromColumns(['WY'])
     const slots: number[] = []

package/src/columnCounts.ts

@@ -109,6 +109,25 @@ export class ColumnCounts {
     }
   }
 
+  /**
+   * Shannon entropy of a column in bits, taken over its non-gap residues only:
+   * a column of two residues and eight gaps is a two-way choice, not a ten-way
+   * one, and gap occupancy is accounted for separately by every caller. 0 for
+   * an all-gap column.
+   */
+  entropy(col: number) {
+    const nonGapTotal = this.total(col) - this.gapCount(col)
+    if (nonGapTotal === 0) {
+      return 0
+    }
+    let entropy = 0
+    this.forEachResidue(col, (_slot, count) => {
+      const freq = count / nonGapTotal
+      entropy -= freq * Math.log2(freq)
+    })
+    return entropy
+  }
+
   /** non-gap [letter, count] pairs for one column, for display */
   residueEntries(col: number) {
     const entries: [string, number][] = []

package/src/components/DragHandle.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import { useDragScroll } from '../useDragScroll.ts'
+
+export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
+
+// The scroll thumbs (minimap, vertical scrollbar) and the resize dividers are
+// one widget -- press, drag along an axis, report the pixel delta -- differing
+// only in the affordance they present, so the variant carries the whole
+// difference rather than a second copy of the drag wiring.
+const variants: Record<
+  'thumb' | 'resizer',
+  {
+    fill: string
+    fillHovered: string
+    cursor: (axis: 'x' | 'y') => string
+    position: React.CSSProperties['position']
+    zIndex?: number
+  }
+> = {
+  thumb: {
+    fill: scrollbarThumbFill,
+    fillHovered: 'rgba(66,119,127,0.6)',
+    cursor: () => 'pointer',
+    position: 'absolute',
+    zIndex: 100,
+  },
+  resizer: {
+    fill: 'rgba(200,200,200)',
+    fillHovered: 'rgba(150,150,150)',
+    cursor: axis => (axis === 'x' ? 'ew-resize' : 'ns-resize'),
+    position: 'relative',
+  },
+}
+
+/**
+ * A handle dragged along a single axis. `getStart` is read at mousedown and
+ * handed back to `onDrag` alongside the pixel delta since, so a caller only
+ * supplies the dimension it drives and where the handle sits.
+ *
+ * Memoize `onDrag` (useCallback) so the document listeners are not re-attached
+ * on every render.
+ */
+export default function DragHandle({
+  axis,
+  variant,
+  getStart,
+  onDrag,
+  style,
+}: {
+  axis: 'x' | 'y'
+  variant: keyof typeof variants
+  getStart: () => number
+  onDrag: (delta: number, startValue: number) => void
+  style: React.CSSProperties
+}) {
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(axis, onDrag)
+  const { fill, fillHovered, cursor, position, zIndex } = variants[variant]
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      onMouseDown={event => {
+        startDrag(event, getStart())
+      }}
+      style={{
+        position,
+        zIndex,
+        cursor: cursor(axis),
+        background: hovered ? fillHovered : fill,
+        ...style,
+      }}
+    />
+  )
+}

package/src/components/ResizeHandles.tsx

@@ -1,53 +1,11 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../useDragScroll.ts'
+import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
-
-const handleBg = 'rgba(200,200,200)'
-const handleBgHover = 'rgba(150,150,150)'
-
-/**
- * A draggable divider. `getStart` is read at mousedown and handed back to
- * `onDrag` alongside the pixel delta since, so each handle below only has to say
- * which model dimension it resizes and where it sits.
- */
-function ResizeHandle({
-  axis,
-  getStart,
-  onDrag,
-  style,
-}: {
-  axis: 'x' | 'y'
-  getStart: () => number
-  onDrag: (delta: number, startValue: number) => void
-  style: React.CSSProperties
-}) {
-  const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(axis, onDrag)
-
-  return (
-    <div
-      onMouseDown={event => {
-        startDrag(event, getStart())
-      }}
-      onMouseEnter={() => {
-        setHovered(true)
-      }}
-      onMouseLeave={() => {
-        setHovered(false)
-      }}
-      style={{
-        position: 'relative',
-        cursor: axis === 'x' ? 'ew-resize' : 'ns-resize',
-        background: hovered ? handleBgHover : handleBg,
-        ...style,
-      }}
-    />
-  )
-}
+import type { TrackKind } from '../types.ts'
 
 export const VerticalResizeHandle = observer(function ({
   model,
@@ -61,8 +19,9 @@ export const VerticalResizeHandle = observer(function ({
     [model],
   )
   return (
-    <ResizeHandle
+    <DragHandle
       axis="x"
+      variant="resizer"
       getStart={() => model.treeAreaWidth}
       onDrag={onDrag}
       style={{ width: model.resizeHandleWidth }}
@@ -82,8 +41,9 @@ export const HorizontalResizeHandle = observer(function ({
     [model],
   )
   return (
-    <ResizeHandle
+    <DragHandle
       axis="y"
+      variant="resizer"
       getStart={() => model.height}
       onDrag={onDrag}
       style={{ width: '100%', height: model.resizeHandleWidth }}
@@ -91,21 +51,53 @@ export const HorizontalResizeHandle = observer(function ({
   )
 })
 
-export const ConservationTrackResizeHandle = observer(function ({
+// The height behind each resizable track kind. Both bar tracks read one height
+// so conservation and property conservation stay directly comparable; the logo
+// keeps its own, being taller by default. Text tracks are absent: they are one
+// alignment row tall and follow rowHeight, so the zoom controls already size
+// them.
+const trackHeights: Partial<
+  Record<
+    TrackKind,
+    {
+      get: (model: MsaViewModel) => number
+      set: (model: MsaViewModel, height: number) => void
+    }
+  >
+> = {
+  bar: {
+    get: model => model.conservationTrackHeight,
+    set: (model, height) => {
+      model.setConservationTrackHeight(height)
+    },
+  },
+  logo: {
+    get: model => model.sequenceLogoTrackHeight,
+    set: (model, height) => {
+      model.setSequenceLogoTrackHeight(height)
+    },
+  },
+}
+
+export const TrackResizeHandle = observer(function ({
   model,
+  kind,
 }: {
   model: MsaViewModel
+  kind: TrackKind
 }) {
+  const height = trackHeights[kind]
   const onDrag = useCallback(
     (delta: number, startHeight: number) => {
-      model.setConservationTrackHeight(Math.max(10, startHeight + delta))
+      height?.set(model, Math.max(10, startHeight + delta))
     },
-    [model],
+    [model, height],
   )
-  return (
-    <ResizeHandle
+  return height ? (
+    <DragHandle
       axis="y"
-      getStart={() => model.conservationTrackHeight}
+      variant="resizer"
+      getStart={() => height.get(model)}
       onDrag={onDrag}
       style={{
         position: 'absolute',
@@ -116,5 +108,5 @@ export const ConservationTrackResizeHandle = observer(function ({
         zIndex: 1,
       }}
     />
-  )
+  ) : null
 })

package/src/components/VerticalScrollbar.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import ScrollbarThumb from './ScrollbarThumb.tsx'
+import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
@@ -32,8 +32,9 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
         boxSizing: 'border-box',
       }}
     >
-      <ScrollbarThumb
+      <DragHandle
         axis="y"
+        variant="thumb"
         getStart={() => model.scrollY}
         onDrag={onDrag}
         style={{

package/src/components/dialogs/InterProScanDialog.tsx

@@ -10,6 +10,57 @@ import { launchInterProScan } from '../../launchInterProScan.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const FAMILIES = 'Families, domains, sites & repeats'
+const FEATURES = 'Other sequence features'
+const STRUCTURAL = 'Structural domains'
+const OTHER = 'Other category'
+
+// The analyses the EBI iprscan5 endpoint accepts, all on by default. Static, so
+// it lives out here rather than being rebuilt on every render of the dialog.
+const interProScanPrograms = [
+  {
+    name: 'NCBIfam',
+    category: FAMILIES,
+    description: 'NCBI RefSeq FAMs including TIGRFAMs',
+  },
+  {
+    name: 'SFLD',
+    category: FAMILIES,
+    description: 'Structure function linkage database',
+  },
+  {
+    name: 'Phobius',
+    category: FEATURES,
+    description:
+      'A combined transmembrane topology and signal peptide predictor',
+  },
+  { name: 'SignalP', category: FEATURES },
+  { name: 'SignalP_EUK', category: OTHER },
+  { name: 'SignalP_GRAM_POSITIVE', category: OTHER },
+  { name: 'SignalP_GRAM_NEGATIVE', category: OTHER },
+  { name: 'SuperFamily', category: STRUCTURAL },
+  { name: 'Panther', category: FAMILIES },
+  { name: 'Gene3d', category: STRUCTURAL },
+  { name: 'HAMAP', category: FAMILIES },
+  { name: 'PrositeProfiles', category: FAMILIES },
+  { name: 'PrositePatterns', category: FAMILIES },
+  { name: 'Coils', category: FEATURES },
+  { name: 'SMART', category: FAMILIES },
+  {
+    name: 'CDD',
+    category: FAMILIES,
+    description: 'Conserved Domains Database',
+  },
+  { name: 'PRINTS', category: FAMILIES },
+  { name: 'PfamA', category: FAMILIES },
+  { name: 'MobiDBLite', category: FEATURES },
+  { name: 'PIRSF', category: OTHER },
+  { name: 'TMHMM', category: FEATURES },
+  { name: 'AntiFam', category: OTHER },
+  { name: 'FunFam', category: OTHER },
+  { name: 'PIRSR', category: FAMILIES },
+].map(program => ({ ...program, checked: true }))
+
 const InterProScanDialog = observer(function ({
   handleClose,
   model,
@@ -17,134 +68,7 @@ const InterProScanDialog = observer(function ({
   handleClose: () => void
   model: MsaViewModel
 }) {
-  const [vals, setVals] = useState([
-    {
-      name: 'NCBIfam',
-      description: 'NCBI RefSeq FAMs including TIGRFAMs',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'SFLD',
-      description: 'Structure function linkage database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Phobius',
-      checked: true,
-      description:
-        'A combined transmembrane topology and signal peptide predictor',
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP_EUK',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_POSITIVE',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_NEGATIVE',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'SuperFamily',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'Panther',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Gene3d',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'HAMAP',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositeProfiles',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositePatterns',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Coils',
-      category: 'Other sequence features',
-      checked: true,
-    },
-    {
-      name: 'SMART',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'CDD',
-      description: 'Conserved Domains Database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PRINTS',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PfamA',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'MobiDBLite',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'PIRSF',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'TMHMM',
-      checked: true,
-      category: 'Other sequence features',
-    },
-
-    {
-      name: 'AntiFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'FunFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'PIRSR',
-      checked: true,
-      category: 'Families, domains, sites & repeats',
-    },
-  ])
+  const [vals, setVals] = useState(interProScanPrograms)
 
   const programs = vals.filter(e => e.checked).map(e => e.name)
   const [show, setShow] = useState(false)
@@ -197,12 +121,11 @@ const InterProScanDialog = observer(function ({
               <tbody>
                 {vals
                   .toSorted((a, b) => a.category.localeCompare(b.category))
-                  .map(({ name, checked, category }) => (
+                  .map(({ name, checked, category, description }) => (
                     <tr key={name}>
                       <td>
                         <input
                           type="checkbox"
-                          key={name}
                           checked={checked}
                           onChange={() => {
                             setVals(
@@ -215,7 +138,7 @@ const InterProScanDialog = observer(function ({
                           }}
                         />
                       </td>
-                      <td>{name}</td>
+                      <td title={description}>{name}</td>
                       <td>{category}</td>
                     </tr>
                   ))}

package/src/components/header/settingsMenuItems.ts

@@ -12,9 +12,27 @@ function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
   }
 }
 
+// Every track the alignment can show, with its current state. Without this the
+// "Close" item on a track's own dropdown is a one-way door -- there is nowhere
+// else in the UI to turn a track back on.
+function tracksSubMenu(model: MsaViewModel): MenuItem[] {
+  const shown = new Set(model.turnedOnTracks.map(t => t.model.id))
+  return model.tracks.map(({ model: { id, name } }) =>
+    toggle(name, shown.has(id), () => {
+      model.toggleTrack(id)
+    }),
+  )
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
+    {
+      label: 'Tracks',
+      type: 'subMenu' as const,
+      subMenu: tracksSubMenu(model),
+    },
+    { type: 'divider' as const },
     toggle('Show column statistics on hover', showColumnStats, arg => {
       model.setShowColumnStats(arg)
     }),
@@ -47,7 +65,7 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     toggle('Show tree', drawTree, arg => {
       model.setDrawTree(arg)
     }),
-    toggle('Draw clickable bubbles on tree branches', drawNodeBubbles, arg => {
+    toggle('Draw bubbles on tree branches', drawNodeBubbles, arg => {
       model.setDrawNodeBubbles(arg)
     }),
     toggle('Tree labels align right', labelsAlignRight, arg => {