react-msaview 9.4.0 → 9.6.0

package/src/createPaletteMap.ts

@@ -1,25 +1,39 @@
-import { colord } from 'colord'
+import { colord, extend } from 'colord'
+import lchPlugin from 'colord/plugins/lch'
 
 import palettes from './ggplotPalettes.ts'
 
+extend([lchPlugin])
+
 /**
  * Creates a map from keys to colors. `palette` names the colors to take in
  * order, such as the list a scale asked for by name; without it the keys take
  * the ggplot palette of their own size. Beyond the colors available — a
  * gene-structure overlay with one feature per exon, or nine keys on an
- * eight-color palette — every key gets an evenly spaced HSL hue instead, so no
- * two keys share a color.
+ * eight-color palette — every key gets an evenly spaced hue instead, so no
+ * two keys share a color. The hues sit at CIELAB `lightness` where one is
+ * given, else at HSL lightness 60.
  */
-export function createPaletteMap(keys: string[], palette?: readonly string[]) {
+export function createPaletteMap(
+  keys: string[],
+  palette?: readonly string[],
+  lightness?: number,
+) {
   const n = keys.length
   const colors = palette ?? palettes[n - 1]
   if (colors && n <= colors.length) {
     return Object.fromEntries(keys.map((key, i) => [key, colors[i]!]))
   }
   return Object.fromEntries(
-    keys.map((key, i) => [
-      key,
-      colord({ h: (i * 360) / n, s: 60, l: 60 }).toHex(),
-    ]),
+    keys.map((key, i) => {
+      const h = (i * 360) / n
+      return [
+        key,
+        (lightness === undefined
+          ? colord({ h, s: 60, l: 60 })
+          : colord({ l: lightness, c: 40, h })
+        ).toHex(),
+      ]
+    }),
   )
 }

package/src/index.ts

@@ -15,7 +15,7 @@ export { installHeadlessRenderEnv } from './headlessRenderEnv.ts'
 export { CHAR_WIDTH_RATIO } from './measureTextCanvas.ts'
 // the row count above which calculateNeighborJoiningTreeFromMSA throws, for
 // hosts gating their own menu item
-export { maxNeighborJoiningRows } from './constants.ts'
+export { isSiteType, maxNeighborJoiningRows } from './constants.ts'
 // the short forms a link or a script can write a view in; see docs/layers.md
 export { expandSpec, residueLabel } from './expandSpec.ts'
 export type {

package/src/model/treeModel.ts

@@ -10,7 +10,6 @@ import {
   defaultShowBranchLen,
   defaultTreeOrder,
   defaultShowTreeOverview,
-  defaultShowTreeScaleBar,
   treeOrders,
 } from '../constants.ts'
 import { stripDefault } from '../stripDefault.ts'
@@ -94,12 +93,6 @@ export function TreeModelF() {
        */
       showTreeOverview: stripDefault(types.boolean, defaultShowTreeOverview),
 
-      /**
-       * #property
-       * draw the branch-length scale bar above the tree of a phylogram
-       */
-      showTreeScaleBar: stripDefault(types.boolean, defaultShowTreeScaleBar),
-
       /**
        * #property
        * height of the tree overview band, px
@@ -170,12 +163,6 @@ export function TreeModelF() {
       setShowTreeOverview(arg: boolean) {
         self.showTreeOverview = arg
       },
-      /**
-       * #action
-       */
-      setShowTreeScaleBar(arg: boolean) {
-        self.showTreeScaleBar = arg
-      },
       /**
        * #action
        */

package/src/model.ts

@@ -46,6 +46,7 @@ import {
   defaultScrollZoomAxis,
   defaultShowDomainLegend,
   defaultShowDomains,
+  domainFills,
   defaultSubFeatureRows,
   fontSizeFor,
   labelFitFontSize,
@@ -57,6 +58,7 @@ import {
   minColWidth,
   minLetterColWidth,
   minLetterRowHeight,
+  isSiteType,
   minRowHeight,
   minTreeWidth,
   pxPerTreeDepth,
@@ -67,6 +69,7 @@ import {
   segmentFeatureTypes,
   segmentShades,
   settingsPanelWidth,
+  siteFills,
   treeScaleBarHeight,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
@@ -280,7 +283,6 @@ export const preservedOnReset = new Set([
   'drawNodeBubbles',
   'drawNodeLabels',
   'showTreeOverview',
-  'showTreeScaleBar',
   'overviewHeight',
   'turnedOffTracks',
   'trackHeights',
@@ -2934,14 +2936,11 @@ function stateModelFactory({
     .views(self => ({
       /**
        * #getter
-       * the branch-length scale bar over the tree, undefined while
-       * `showTreeScaleBar` is off, in cladogram mode, or when the tree area is
-       * too narrow for one
+       * the branch-length scale bar over the tree, the guide of its branch-length
+       * scale: undefined in cladogram mode, with the tree off, or when the tree
+       * area is too narrow for one
        */
       get treeScaleBar() {
-        if (!self.showTreeScaleBar) {
-          return undefined
-        }
         return scaleBarLength(
           self.pxPerBranchLength,
           self.effectiveTreeAreaWidth - self.marginLeft * 2,
@@ -3595,21 +3594,19 @@ function stateModelFactory({
       /**
        * #getter
        * categorical feature types (InterPro domains and the like) that each get
-       * their own color and a legend entry, in palette order: grouped by
-       * feature type, types in the order they first appear. A GenPept
-       * record's CDD Sites follow every Region, so the palette spends the
-       * colors after the domains' on the sites inside them
+       * their own color and a legend entry
        */
       get categoricalDomainTypes() {
-        const types = [...self.annotationTypes.values()].filter(
+        return [...self.annotationTypes.values()].filter(
           d => !segmentFeatureTypes.has(d.featureType ?? ''),
         )
-        const typeOrder = [...new Set(types.map(d => d.featureType))]
-        return types.toSorted(
-          (a, b) =>
-            typeOrder.indexOf(a.featureType) - typeOrder.indexOf(b.featureType),
-        )
       },
+      /**
+       * #getter
+       * accession -> fill: segments alternate two shades, a domain takes a
+       * light color and a site a dark one, so a site's residues stand out on
+       * the domain around them
+       */
       get fillPalette() {
         const segments = Object.fromEntries(
           this.segmentDomainTypes.map((d, i) => [
@@ -3617,10 +3614,15 @@ function stateModelFactory({
             segmentShades[i % segmentShades.length]!,
           ]),
         )
-        const categorical = createPaletteMap(
-          this.categoricalDomainTypes.map(d => d.accession),
-        )
-        return { ...segments, ...categorical }
+        const accessions = (site: boolean) =>
+          this.categoricalDomainTypes
+            .filter(d => isSiteType(d.featureType) === site)
+            .map(d => d.accession)
+        return {
+          ...segments,
+          ...createPaletteMap(accessions(false), domainFills, 85),
+          ...createPaletteMap(accessions(true), siteFills, 45),
+        }
       },
       /**
        * #getter

package/src/version.ts

@@ -1 +1 @@
-export const version = '9.4.0'
+export const version = '9.6.0'