react-msaview 8.3.0 → 8.4.1

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import MetadataTable from '../../MetadataTable.tsx'
 import SequenceTextArea from '../../SequenceTextArea.tsx'
 
 import type { MsaViewModel } from '../../../model.ts'
@@ -34,20 +33,19 @@ const TreeNodeInfoDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <BaseCard title="Attributes">
-          <Attributes attributes={{ nodeName, ...info }} />
-        </BaseCard>
-        <BaseCard title="Sequence">
-          {res ? (
-            <SequenceTextArea str={[res]} />
-          ) : (
-            <div>Sequence not found</div>
-          )}
-        </BaseCard>
+        <Typography variant="h6">Attributes</Typography>
+        <MetadataTable record={{ nodeName, ...info }} />
+        <Typography variant="h6">Sequence</Typography>
+        {res ? (
+          <SequenceTextArea str={[res]} />
+        ) : (
+          <Typography>Sequence not found</Typography>
+        )}
         {metadata ? (
-          <BaseCard title="Extra metadata">
-            <Attributes attributes={metadata} />
-          </BaseCard>
+          <>
+            <Typography variant="h6">Extra metadata</Typography>
+            <MetadataTable record={metadata} />
+          </>
         ) : null}
       </DialogContent>
     </Dialog>

package/src/constants.ts

@@ -106,12 +106,12 @@ export const rowTintAlpha = 0.25
 export const cladeHighlightColor = '#fff3c4'
 export const cladeHighlightAlpha = 0.6
 
-// The largest inline document the snapshot carries. A larger pasted or
-// locally-opened file stays in the live model and out of the snapshot, and
-// `unshareableData` warns using the same number. The demo app gzips the
-// snapshot into `?data=`, where 15 kB of the hosted protein alignments encodes
-// to 6,300-7,600 characters, under the 8,192 gmod.org accepts.
-export const maxInlineSnapshotBytes = 15_000
+// The largest inline document a snapshot carries by default, which keeps a
+// jbrowse session small. A larger pasted or locally-opened file stays in the
+// live model and out of the snapshot, and `unshareableData` warns using the
+// same number. `MSAModelF({ maxInlineSnapshotBytes })` sets another; the demo
+// app's links hold far more.
+export const maxInlineSnapshotBytes = 50_000
 
 // Height of the band the `rowPanels` headers draw in, above the strips in the
 // top area beside the tree ruler and the minimap. A panel wider than the band

package/src/element.ts

@@ -7,15 +7,26 @@ import type { MsaViewModel } from './model.ts'
 import type { MountedViewer } from './mount.tsx'
 import type {
   Cell,
+  ColorScheme,
   ColumnTrackSpec,
+  Feature,
   Highlight,
+  MsaSelection,
   ResidueMapping,
   Viewport,
 } from './types.ts'
 
 type ElementData = Pick<
   MSAViewerProps,
-  'msa' | 'tree' | 'gff' | 'highlights' | 'columnTracks' | 'residueMappings'
+  | 'msa'
+  | 'tree'
+  | 'gff'
+  | 'features'
+  | 'colorScheme'
+  | 'highlights'
+  | 'columnTracks'
+  | 'residueMappings'
+  | 'selection'
 >
 
 interface NightingaleManager extends HTMLElement {
@@ -78,9 +89,13 @@ 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, highlights,
- * columnTracks and residueMappings. Events: cell-hover, cell-click and
- * viewport-change, each with the MSAViewer callback's value as detail.
+ * 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.
  *
  * Inside a <nightingale-manager>, the element registers with it and speaks its
  * protocol: it follows the display-start, display-end and highlight attributes
@@ -122,6 +137,18 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     set gff(value: string | undefined) {
       this.#setData({ gff: value })
     }
+    get features() {
+      return this.#data.features
+    }
+    set features(value: Feature[] | undefined) {
+      this.#setData({ features: value })
+    }
+    get colorScheme() {
+      return this.#data.colorScheme
+    }
+    set colorScheme(value: ColorScheme | undefined) {
+      this.#setData({ colorScheme: value })
+    }
     get highlights() {
       return this.#data.highlights
     }
@@ -140,6 +167,13 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     set residueMappings(value: ResidueMapping[] | undefined) {
       this.#setData({ residueMappings: value })
     }
+    // the viewer's selection, which the reader's drags change
+    get selection() {
+      return this.#model ? this.#model.selection : this.#data.selection
+    }
+    set selection(value: MsaSelection | undefined) {
+      this.#setData({ selection: value })
+    }
 
     get #referenceRow() {
       return this.getAttribute('reference-row') ?? undefined
@@ -157,7 +191,10 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
         msaFilehandle: location(this.getAttribute('msa-url')),
         treeFilehandle: location(this.getAttribute('tree-url')),
         gffFilehandle: location(this.getAttribute('gff-url')),
-        colorScheme: this.getAttribute('color-scheme') ?? undefined,
+        colorScheme:
+          this.#data.colorScheme ??
+          this.getAttribute('color-scheme') ??
+          undefined,
         height: numberAttribute(this.getAttribute('height')),
         treeAreaWidth: numberAttribute(this.getAttribute('tree-area-width')),
         hideHeader: this.hasAttribute('hide-header'),
@@ -173,6 +210,9 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
           this.#emit('viewport-change', viewport)
           this.#reportRange(viewport)
         },
+        onSelectionChange: selection => {
+          this.#emit('selection-change', selection)
+        },
         onModel: model => {
           this.#model = model
           this.#followRange()

package/src/featuresLayer.ts

@@ -0,0 +1,48 @@
+import type { Annotation, Feature } from './types.ts'
+
+const placement = new Set(['row', 'start', 'end'])
+
+// The colors and labels are maps keyed by annotation, and a getter read
+// outside a reaction recomputes on every read. Caching on the frozen feature
+// gives it one annotation however often the layer converts.
+const converted = new WeakMap<Feature, Annotation>()
+
+/**
+ * The `features` layer as the annotations a GFF would parse to. Every field
+ * but the placement is also an attribute, as a string like a GFF value, so an
+ * encoding reads `type` or a host's own field the way it reads a GFF column 9
+ * key.
+ */
+export function featuresToAnnotations(features: Feature[]): Annotation[] {
+  return features.map(feature => {
+    const cached = converted.get(feature)
+    if (cached) {
+      return cached
+    }
+    const annotation = featureAnnotation(feature)
+    converted.set(feature, annotation)
+    return annotation
+  })
+}
+
+function featureAnnotation(feature: Feature): Annotation {
+  const { row, start, end, name, description, type, strand, color } = feature
+  const accession = name ?? `${row}:${start}-${end}`
+  const attributes = Object.fromEntries(
+    Object.entries(feature)
+      .filter(([key, value]) => !placement.has(key) && value !== undefined)
+      .map(([key, value]) => [key, String(value)]),
+  )
+  return {
+    id: row,
+    accession,
+    name: name ?? accession,
+    description: description ?? name ?? accession,
+    featureType: type,
+    start,
+    end,
+    strand: strand === '+' ? 1 : strand === '-' ? -1 : undefined,
+    color,
+    attributes,
+  }
+}

package/src/index.ts

@@ -60,13 +60,16 @@ export type {
   Cell,
   Clade,
   CladeMark,
+  ColorScheme,
   ColumnTrackSpec,
   DomainBand,
   Encoding,
   EncodingChannel,
+  Feature,
   Highlight,
   Legend,
   LegendEntry,
+  MsaSelection,
   Node,
   MappedStructure,
   NodeWithIds,
@@ -80,6 +83,8 @@ export type {
   ResolvedEncoding,
   ResolvedHighlight,
   ResolvedRowPanel,
+  ResolvedSelection,
+  RowDataInput,
   RowPanelSpec,
   RowResidue,
   StructureResidue,

package/src/model/DataModel.ts

@@ -9,7 +9,7 @@ import { maxInlineSnapshotBytes } from '../constants.ts'
  * data will not be persisted in saved session snapshots, it will be fetched
  * from msaFilehandle at startup
  */
-export function DataModelF() {
+export function DataModelF(maxInlineBytes = maxInlineSnapshotBytes) {
   return types
     .model({
       /**
@@ -56,12 +56,12 @@ export function DataModelF() {
       },
     }))
     .postProcessSnapshot(snap =>
-      // drops any field over maxInlineSnapshotBytes; the parent model's
+      // drops any field over maxInlineBytes; the parent model's
       // `unshareableData` reports what was dropped
       Object.fromEntries(
         Object.entries(snap).map(([key, text]) => [
           key,
-          text && text.length > maxInlineSnapshotBytes ? undefined : text,
+          text && text.length > maxInlineBytes ? undefined : text,
         ]),
       ),
     )

package/src/model/msaModel.ts

@@ -29,6 +29,13 @@ export function MSAModelF() {
        */
       colorSchemeName: stripDefault(types.string, defaultColorSchemeName),
 
+      /**
+       * #property
+       * a color per residue letter, which replaces the `colorSchemeName` table
+       * while set. A letter the map leaves out takes no color
+       */
+      customColorScheme: types.frozen<Record<string, string> | undefined>(),
+
       /**
        * #property
        * show a tooltip with the hovered column's value for a track while
@@ -49,10 +56,21 @@ export function MSAModelF() {
     .actions(self => ({
       /**
        * #action
-       * set color scheme name
+       * pick a scheme from the built-in table, which clears
+       * `customColorScheme`
        */
       setColorSchemeName(name: string) {
         self.colorSchemeName = name
+        self.customColorScheme = undefined
+      },
+
+      /**
+       * #action
+       * color residues from a map of letter to color, or pass undefined to
+       * return to `colorSchemeName`
+       */
+      setCustomColorScheme(map?: Record<string, string>) {
+        self.customColorScheme = map
       },
 
       /**