react-msaview-cli 9.1.1 → 9.2.0

package/dist/index.js

@@ -46935,7 +46935,7 @@ function drawArcs({ ctx, arcs, color: color2, colWidth, trackHeight, offsetX, bl
     ctx.stroke();
   }
 }
-function drawTextTrackContent({ ctx, data, colorScheme, contrastText, bgColor, drawLetters, colWidth, rowHeight, offsetX, blockSize }) {
+function drawTextTrackContent({ ctx, data, colorAt, contrastText, bgColor, drawLetters, colWidth, rowHeight, offsetX, blockSize }) {
   const { xStart, xEnd } = visibleColRange({
     offsetX,
     blockWidth: blockSize,
@@ -46944,9 +46944,9 @@ function drawTextTrackContent({ ctx, data, colorScheme, contrastText, bgColor, d
   const str = data?.slice(xStart, xEnd);
   for (let i2 = 0; str && i2 < str.length; i2++) {
     const letter = str[i2];
-    const upper = letter.toUpperCase();
-    const fill = bgColor ? colorScheme[upper] : void 0;
-    const x2 = (xStart + i2) * colWidth;
+    const col = xStart + i2;
+    const fill = bgColor ? colorAt(col, letter) : void 0;
+    const x2 = col * colWidth;
     if (fill) {
       ctx.fillStyle = fill;
       ctx.fillRect(x2, 0, colWidth, rowHeight);
@@ -47106,15 +47106,19 @@ function drawTrackBlock({ model: model2, ctx, track, offsetX, offsetY = 0, theme
       });
       break;
     }
-    case "text": {
+    case "text":
+    case "reference": {
       const { bgColor, fontSize: fontSize2, rowHeight, showMsaLetters } = model2;
+      const scheme = customColorScheme ?? model2.colorScheme;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       setFontSize(ctx, fontSize2);
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? model2.colorScheme,
+        // the reference row takes its colors from the alignment's own
+        // scheme, per column under a dynamic one
+        colorAt: kind === "reference" ? tileColorFn(model2) : (_col, letter) => scheme[letter.toUpperCase()],
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,
@@ -47151,6 +47155,7 @@ var init_drawTracks = __esm({
     init_sequenceLogo();
     init_setFontSize();
     init_util3();
+    init_tileColor();
     init_visibleColRange();
     RULER_FONT_SIZE = 10;
     TICK_HEIGHT = 4;
@@ -85264,7 +85269,8 @@ var init_TrackTooltipContent = __esm({
         case "logo": {
           return import_react43.default.createElement(LogoTooltip, { model: model2, col });
         }
-        case "text": {
+        case "text":
+        case "reference": {
           return import_react43.default.createElement(TextTooltip, { model: model2, track, col });
         }
         case "arc": {
@@ -86496,7 +86502,7 @@ var version2;
 var init_version3 = __esm({
   "../lib/dist/version.js"() {
     "use strict";
-    version2 = "9.1.1";
+    version2 = "9.2.0";
   }
 });
 
@@ -88825,16 +88831,15 @@ function trackGroups(model2) {
   const computed3 = new Set(model2.computedTrackModels.map((t3) => t3.model.id));
   const computedEntries = [];
   const alignmentEntries = [];
+  const referenceEntries = [];
   for (const { model: t3 } of model2.tracks) {
-    ;
-    (computed3.has(t3.id) ? computedEntries : alignmentEntries).push({
-      id: t3.id,
-      label: t3.name
-    });
+    const entries3 = t3.kind === "reference" ? referenceEntries : computed3.has(t3.id) ? computedEntries : alignmentEntries;
+    entries3.push({ id: t3.id, label: t3.name });
   }
   return [
     { title: "Computed from the alignment", entries: computedEntries },
-    { title: "Alignment annotations", entries: alignmentEntries }
+    { title: "Alignment annotations", entries: alignmentEntries },
+    { title: "Reference row", entries: referenceEntries }
   ].filter((g2) => g2.entries.length > 0);
 }
 var import_react89, import_mobx_react64, filterFrom, TrackList, TrackList_default;
@@ -94648,6 +94653,26 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
         }
       }));
     },
+    /**
+     * #getter
+     * the reference row (`relativeTo`) repeated above the alignment, so it
+     * stays in view while the rows compared against it scroll
+     */
+    get referenceTrackModels() {
+      const { relativeTo } = self;
+      const data = relativeTo === void 0 ? void 0 : self.columns.get(relativeTo);
+      return relativeTo === void 0 || data === void 0 ? [] : [
+        {
+          model: {
+            id: "reference-row",
+            name: relativeTo,
+            kind: "reference",
+            data,
+            height: self.rowHeight
+          }
+        }
+      ];
+    },
     get tracks() {
       return [
         ...this.adapterTrackModels,
@@ -94655,7 +94680,8 @@ function stateModelFactory({ maxInlineSnapshotBytes: maxInlineSnapshotBytes2 = m
         ...self.columnTrackModels,
         // every computed track reads the alignment's columns, and a tree, a
         // GFF and a features panel draw a figure with none
-        ...self.numColumns > 0 ? this.computedTrackModels : []
+        ...self.numColumns > 0 ? this.computedTrackModels : [],
+        ...this.referenceTrackModels
       ];
     },
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-msaview-cli",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -20,8 +20,8 @@
     "@types/node": "^26.6.5",
     "esbuild": "^0.28.2",
     "mobx-react": "^10.0.2",
-    "msa-parsers": "9.1.1",
-    "react-msaview": "9.1.1"
+    "msa-parsers": "9.2.0",
+    "react-msaview": "9.2.0"
   },
   "dependencies": {
     "jsdom": "^30.1.3"