react-msaview-cli 8.1.0 → 8.2.0

package/dist/index.js

@@ -51230,9 +51230,9 @@ function renderFeaturePanel({ ctx, model: model2, theme, panel, x: x2, offsetY,
       top: (y2, lane, h2) => y2 - rowHeight + lane * (h2 + rowPadding) + rowPadding / 2,
       headLength: (h2) => h2
     },
-    xOf: (span) => [span.xStart, span.xEnd],
+    xOf: (span2) => [span2.xStart, span2.xEnd],
     colors: panel.colors,
-    labelOf: (span) => panel.labels?.get(span.annotation),
+    labelOf: (span2) => panel.labels?.get(span2.annotation),
     contrastText: contrastTextFn(theme),
     xMin: 0,
     xMax: panel.width
@@ -67534,6 +67534,113 @@ var init_headlessRenderEnv = __esm({
   }
 });
 
+// ../lib/dist/expandSpec.js
+function parseSpan(text2, what) {
+  const match2 = span.exec(text2.trim());
+  if (!match2) {
+    throw new Error(`${what} "${text2}" is not "start", "start-end" or either followed by a label`);
+  }
+  const start = Number(match2[1]);
+  const end = match2[2] === void 0 ? start : Number(match2[2]);
+  return { start, end, label: match2[3] };
+}
+function withRow(entry, query) {
+  const { row, ...rest } = entry;
+  const resolved = row === void 0 ? query : row ?? void 0;
+  return resolved === void 0 ? rest : { ...rest, row: resolved };
+}
+function expandHighlight(entry, query) {
+  if (typeof entry === "object") {
+    return entry.rows ? entry : withRow(entry, entry.start === void 0 ? void 0 : query);
+  }
+  const { start, end, label } = parseSpan(String(entry), "highlight");
+  const single = start === end && query !== void 0;
+  return {
+    ...query === void 0 ? {} : { row: query },
+    start,
+    end,
+    ...label ? { label } : single ? { label: residueLabel } : {}
+  };
+}
+function expandRegion(region, query) {
+  if (typeof region === "string") {
+    const { start, end } = parseSpan(region, "region");
+    const parsed = { start, end };
+    return withRow(parsed, query);
+  }
+  return withRow(region, query);
+}
+function slug(name) {
+  return name.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/^-|-$/g, "");
+}
+function kindOf(track) {
+  if (track.kind) {
+    return track.kind;
+  }
+  if (track.values) {
+    return "bar";
+  }
+  if (track.data !== void 0) {
+    return "text";
+  }
+  if (track.arcs) {
+    return "arc";
+  }
+  throw new Error(`column track "${track.name}" has no values, data or arcs to take its kind from`);
+}
+function expandTrack(track, query, ids) {
+  const { start, ...rest } = track;
+  const pad2 = start && start > 1 ? start - 1 : 0;
+  let id = track.id ?? (slug(track.name) || "track");
+  for (let n2 = 2; !track.id && ids.has(id); n2++) {
+    id = `${slug(track.name) || "track"}-${n2}`;
+  }
+  ids.add(id);
+  return {
+    ...withRow(rest, query),
+    id,
+    kind: kindOf(track),
+    ...pad2 && track.values ? { values: [...Array(pad2).fill(0), ...track.values] } : {},
+    ...pad2 && track.data !== void 0 ? { data: " ".repeat(pad2) + track.data } : {}
+  };
+}
+function isInlineMsa(msa) {
+  return msa.includes("\n");
+}
+function isInlineTree(tree) {
+  return tree.trimStart().startsWith("(");
+}
+function uri(location2) {
+  return { uri: location2, locationType: "UriLocation" };
+}
+function expandSpec(spec) {
+  const { query, msa, tree, highlights, region, columnTracks, ...rest } = spec;
+  const data = {
+    ...rest.data,
+    ...msa !== void 0 && isInlineMsa(msa) ? { msa } : {},
+    ...tree !== void 0 && isInlineTree(tree) ? { tree } : {}
+  };
+  const ids = new Set((columnTracks ?? []).map((t3) => t3.id).filter((id) => id !== void 0));
+  return {
+    ...rest,
+    ...msa !== void 0 && !isInlineMsa(msa) ? { msaFilehandle: uri(msa) } : {},
+    ...tree !== void 0 && !isInlineTree(tree) ? { treeFilehandle: uri(tree) } : {},
+    ...Object.keys(data).length > 0 ? { data } : {},
+    ...query !== void 0 && rest.relativeTo === void 0 ? { relativeTo: query } : {},
+    ...highlights ? { highlights: highlights.map((h2) => expandHighlight(h2, query)) } : {},
+    ...region === void 0 ? {} : { region: expandRegion(region, query) },
+    ...columnTracks ? { columnTracks: columnTracks.map((t3) => expandTrack(t3, query, ids)) } : {}
+  };
+}
+var residueLabel, span;
+var init_expandSpec = __esm({
+  "../lib/dist/expandSpec.js"() {
+    "use strict";
+    residueLabel = "{residue}{position}";
+    span = /^(\d+)(?:-(\d+))?(?:\s+(.+))?$/;
+  }
+});
+
 // ../../node_modules/.pnpm/@jbrowse+core@file+vendor-jbrowse+jbrowse-core.tgz_@emotion+styled@11.14.1_@emotion+rea_7090bbe2527c98dca0fac05344a682ca/node_modules/@jbrowse/core/esm/util/environment.js
 var isElectron, isNode, rIC;
 var init_environment = __esm({
@@ -71865,8 +71972,8 @@ var init_mst = __esm({
         if (snap.locationType) {
           return snap;
         } else {
-          const { uri: uri2, localPath, blob } = snap;
-          const inferredLocationType = uri2 !== void 0 ? "UriLocation" : localPath !== void 0 ? "LocalPathLocation" : blob !== void 0 ? "BlobLocation" : "FileHandleLocation";
+          const { uri: uri3, localPath, blob } = snap;
+          const inferredLocationType = uri3 !== void 0 ? "UriLocation" : localPath !== void 0 ? "LocalPathLocation" : blob !== void 0 ? "BlobLocation" : "FileHandleLocation";
           return { ...snap, locationType: inferredLocationType };
         }
       }
@@ -75533,12 +75640,12 @@ var init_measureText = __esm({
 
 // ../../node_modules/.pnpm/@jbrowse+core@file+vendor-jbrowse+jbrowse-core.tgz_@emotion+styled@11.14.1_@emotion+rea_7090bbe2527c98dca0fac05344a682ca/node_modules/@jbrowse/core/esm/util/getStr.js
 function getUriLink(value) {
-  const { uri: uri2, baseUri = "" } = value;
+  const { uri: uri3, baseUri = "" } = value;
   let href;
   try {
-    href = new URL(uri2, baseUri).href;
+    href = new URL(uri3, baseUri).href;
   } catch {
-    href = uri2;
+    href = uri3;
   }
   return href;
 }
@@ -76061,14 +76168,14 @@ async function copyToClipboard(text2, options2 = {}) {
 function execCommandCopy(text2, format2) {
   const selection = document.getSelection();
   const previousRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : void 0;
-  const span = document.createElement("span");
-  span.textContent = text2;
-  span.style.whiteSpace = "pre";
-  span.style.position = "fixed";
-  span.style.top = "0";
-  span.style.left = "0";
-  span.style.opacity = "0";
-  document.body.append(span);
+  const span2 = document.createElement("span");
+  span2.textContent = text2;
+  span2.style.whiteSpace = "pre";
+  span2.style.position = "fixed";
+  span2.style.top = "0";
+  span2.style.left = "0";
+  span2.style.opacity = "0";
+  document.body.append(span2);
   const listener = (e3) => {
     if (e3.clipboardData) {
       e3.clipboardData.clearData();
@@ -76080,7 +76187,7 @@ function execCommandCopy(text2, format2) {
   let success = false;
   try {
     const range = document.createRange();
-    range.selectNodeContents(span);
+    range.selectNodeContents(span2);
     selection?.removeAllRanges();
     selection?.addRange(range);
     success = document.execCommand("copy");
@@ -76092,7 +76199,7 @@ function execCommandCopy(text2, format2) {
     if (previousRange) {
       selection?.addRange(previousRange);
     }
-    span.remove();
+    span2.remove();
   }
   return success;
 }
@@ -80037,39 +80144,39 @@ var require_source_map = __commonJS({
 });
 
 // ../../node_modules/.pnpm/@jbrowse+core@file+vendor-jbrowse+jbrowse-core.tgz_@emotion+styled@11.14.1_@emotion+rea_7090bbe2527c98dca0fac05344a682ca/node_modules/@jbrowse/core/esm/ui/mapStackTrace.js
-async function myfetchtext(uri2) {
-  const res = await fetch(uri2);
+async function myfetchtext(uri3) {
+  const res = await fetch(uri3);
   if (!res.ok) {
-    throw new Error(`HTTP ${res.status} fetching ${uri2}: ${await res.text()}`);
+    throw new Error(`HTTP ${res.status} fetching ${uri3}: ${await res.text()}`);
   }
   return res.text();
 }
-function sourceMapUrl(script, uri2) {
+function sourceMapUrl(script, uri3) {
   const mapUri = [...script.matchAll(sourceMappingUrlRe)].at(-1)?.[1]?.trim();
   let url;
   if (mapUri) {
-    url = new URL(mapUri, uri2);
+    url = new URL(mapUri, uri3);
     if (!url.search && url.protocol !== "data:") {
-      url.search = new URL(uri2).search;
+      url.search = new URL(uri3).search;
     }
   }
   return url?.href;
 }
-async function loadSourceMap(uri2) {
+async function loadSourceMap(uri3) {
   try {
-    const mapUrl = sourceMapUrl(await myfetchtext(uri2), uri2);
+    const mapUrl = sourceMapUrl(await myfetchtext(uri3), uri3);
     return mapUrl ? new import_source_map_js.SourceMapConsumer(JSON.parse(await myfetchtext(mapUrl))) : void 0;
   } catch {
     return void 0;
   }
 }
-function getSourceMap(uri2) {
-  const existing = sourceMaps.get(uri2);
+function getSourceMap(uri3) {
+  const existing = sourceMaps.get(uri3);
   if (existing) {
     return existing;
   } else {
-    const map2 = loadSourceMap(uri2);
-    sourceMaps.set(uri2, map2);
+    const map2 = loadSourceMap(uri3);
+    sourceMaps.set(uri3, map2);
     return map2;
   }
 }
@@ -86329,12 +86436,12 @@ var init_SimpleField = __esm({
 
 // ../../node_modules/.pnpm/@jbrowse+core@file+vendor-jbrowse+jbrowse-core.tgz_@emotion+styled@11.14.1_@emotion+rea_7090bbe2527c98dca0fac05344a682ca/node_modules/@jbrowse/core/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.js
 function UriField({ value, prefix: prefix2, name }) {
-  const { uri: uri2, baseUri = "" } = value;
+  const { uri: uri3, baseUri = "" } = value;
   let href;
   try {
-    href = new URL(uri2, baseUri).href;
+    href = new URL(uri3, baseUri).href;
   } catch {
-    href = uri2;
+    href = uri3;
   }
   return (0, import_jsx_runtime177.jsx)(SimpleField, { name, prefix: prefix2, value: href });
 }
@@ -111161,21 +111268,21 @@ var init_csvSerializer = __esm({
 
 // ../../node_modules/.pnpm/@mui+x-data-grid@9.10.1_@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.0_support_99c4788b624f401637c043973d33a0af/node_modules/@mui/x-data-grid/hooks/features/clipboard/useGridClipboard.mjs
 function writeToClipboardPolyfill(data) {
-  const span = document.createElement("span");
-  span.style.whiteSpace = "pre";
-  span.style.userSelect = "all";
-  span.style.opacity = "0px";
-  span.textContent = data;
-  document.body.appendChild(span);
+  const span2 = document.createElement("span");
+  span2.style.whiteSpace = "pre";
+  span2.style.userSelect = "all";
+  span2.style.opacity = "0px";
+  span2.textContent = data;
+  document.body.appendChild(span2);
   const range = document.createRange();
-  range.selectNode(span);
+  range.selectNode(span2);
   const selection = window.getSelection();
   selection.removeAllRanges();
   selection.addRange(range);
   try {
     document.execCommand("copy");
   } finally {
-    document.body.removeChild(span);
+    document.body.removeChild(span2);
   }
 }
 function copyToClipboard2(data) {
@@ -121959,7 +122066,7 @@ var version3;
 var init_version3 = __esm({
   "../lib/dist/version.js"() {
     "use strict";
-    version3 = "8.1.0";
+    version3 = "8.2.0";
   }
 });
 
@@ -122709,11 +122816,11 @@ function hoverLines({ model: model2, panel, name, x: x2 }) {
       `${panel.header}: ${model2.rowDataOf(name)?.[panel.field] ?? "(none)"}`
     ];
   }
-  const span = panel.spans.get(name)?.findLast((s2) => x2 >= s2.xStart && x2 <= s2.xEnd);
-  if (!span) {
+  const span2 = panel.spans.get(name)?.findLast((s2) => x2 >= s2.xStart && x2 <= s2.xEnd);
+  if (!span2) {
     return [];
   }
-  const { annotation } = span;
+  const { annotation } = span2;
   const strand = annotation.strand === void 0 ? "" : annotation.strand < 0 ? " (-)" : " (+)";
   const value = panel.field ? featureField(annotation, panel.field) : void 0;
   return [
@@ -124063,7 +124170,7 @@ var init_util10 = __esm({
 });
 
 // ../lib/dist/components/import/ImportFormExamples.js
-function uri(url) {
+function uri2(url) {
   return url ? { uri: url, locationType: "UriLocation" } : void 0;
 }
 var import_react92, import_mobx_react46, BASE, TREES, examples, ImportFormExamples, ImportFormExamples_default;
@@ -124130,7 +124237,7 @@ var init_ImportFormExamples = __esm({
               if (inline4) {
                 model2.setData(inline4);
               } else {
-                load(model2, uri(msa), uri(tree), uri(gff));
+                load(model2, uri2(msa), uri2(tree), uri2(gff));
               }
             } catch (e3) {
               console.error(e3);
@@ -126025,6 +126132,14 @@ function stateModelFactory() {
      * Persists in the snapshot and the URL.
      */
     highlights: stripDefault2(types.array(types.frozen()), []),
+    /**
+     * #property
+     * where the view opens, in `highlights` coordinates: `{row, start,
+     * end}` zooms onto residues of that row, `{start, end}` onto alignment
+     * columns. Applied once the alignment and any tree file have loaded,
+     * then cleared, so a reloaded session keeps the reader's own scroll.
+     */
+    region: types.frozen(),
     /**
      * #property
      * clades of the tree with a mark drawn over them. `mrca` names tips
@@ -126276,6 +126391,12 @@ function stateModelFactory() {
     setHighlightedColumns(columns) {
       self.highlightedColumns = columns;
     },
+    /**
+     * #action
+     */
+    setRegion(region) {
+      self.region = region;
+    },
     /**
      * #action
      */
@@ -128299,6 +128420,19 @@ function stateModelFactory() {
       }
       return runs;
     },
+    /**
+     * #method
+     * a highlight label with `{residue}` and `{position}` filled in from the
+     * row's letter at `start`, which is how the `175` shorthand draws "R175"
+     */
+    fillHighlightLabel(label, row, start) {
+      if (!label.includes("{")) {
+        return label;
+      }
+      const col = row && start !== void 0 ? self.seqPosIndex(row)?.[start - 1] : void 0;
+      const residue = row && col !== void 0 ? self.MSA?.getRow(row)[col] ?? "" : "";
+      return label.replaceAll("{residue}", residue).replaceAll("{position}", start === void 0 ? "" : String(start));
+    },
     /**
      * #getter
      * `highlights` projected onto what is on screen: residue spans go
@@ -128313,7 +128447,10 @@ function stateModelFactory() {
         ...Object.values(transientHighlights).flat()
       ];
       return all.flatMap(({ row, rows, start, end, label, color: color2 }) => {
-        const base = { label, color: color2 };
+        const base = {
+          label: label && this.fillHighlightLabel(label, row, start),
+          color: color2
+        };
         if (rows) {
           const rowIndices = rows.map((name) => rowNamesSet.get(name)).filter(notEmpty);
           return rowIndices.length ? [{ ...base, rowIndices }] : [];
@@ -128321,8 +128458,8 @@ function stateModelFactory() {
         if (start === void 0 || end === void 0) {
           return [];
         }
-        const span = self.visibleSpan({ row, start, end });
-        return span ? [{ ...base, ...span, rowIndices: [] }] : [];
+        const span2 = self.visibleSpan({ row, start, end });
+        return span2 ? [{ ...base, ...span2, rowIndices: [] }] : [];
       });
     },
     /**
@@ -128617,13 +128754,13 @@ function stateModelFactory() {
      * its width, or for a span that resolves to no visible column.
      */
     zoomToRegion(region) {
-      const span = self.visibleSpan(region);
-      if (!span || !self.viewInitialized) {
+      const span2 = self.visibleSpan(region);
+      if (!span2 || !self.viewInitialized) {
         return;
       }
       (0, import_mobx5.transaction)(() => {
-        self.colWidth = clamp3(self.msaCanvasWidth / (span.endCol - span.startCol + 1), minColWidth, maxCellSize);
-        self.scrollX = clamp3(-span.startCol * self.colWidth, self.maxScrollX, 0);
+        self.colWidth = clamp3(self.msaCanvasWidth / (span2.endCol - span2.startCol + 1), minColWidth, maxCellSize);
+        self.scrollX = clamp3(-span2.startCol * self.colWidth, self.maxScrollX, 0);
       });
     },
     /**
@@ -128656,6 +128793,13 @@ function stateModelFactory() {
           }
         }
       }));
+      addDisposer(self, (0, import_mobx5.autorun)(() => {
+        const { region } = self;
+        if (region && self.viewInitialized && self.numColumns > 0 && !(self.treeFilehandle && !self.data.tree)) {
+          this.zoomToRegion(region);
+          self.setRegion(void 0);
+        }
+      }));
       if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
         const query = () => window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
         let mql = query();
@@ -129178,16 +129322,16 @@ var init_mount = __esm({
 });
 
 // ../lib/dist/element.js
-function location(uri2) {
-  return uri2 ? { uri: uri2, locationType: "UriLocation" } : void 0;
+function location(uri3) {
+  return uri3 ? { uri: uri3, locationType: "UriLocation" } : void 0;
 }
 function numberAttribute(value) {
   const n2 = value ? Number(value) : Number.NaN;
   return Number.isFinite(n2) ? n2 : void 0;
 }
 function parseHighlight(value, row) {
-  return (value ?? "").split(",").flatMap((span) => {
-    const [start, end] = span.split(":").map(numberAttribute);
+  return (value ?? "").split(",").flatMap((span2) => {
+    const [start, end] = span2.split(":").map(numberAttribute);
     return start === void 0 ? [] : [{ row, start, end: end ?? start }];
   });
 }
@@ -129470,10 +129614,12 @@ __export(dist_exports, {
   MSAView: () => Loading_default,
   MSAViewer: () => MSAViewer,
   defineMsaElement: () => defineMsaElement,
+  expandSpec: () => expandSpec,
   installHeadlessRenderEnv: () => installHeadlessRenderEnv,
   maxNeighborJoiningRows: () => maxNeighborJoiningRows,
   mount: () => mount,
   renderToSvg: () => renderToSvg,
+  residueLabel: () => residueLabel,
   useMsaSvgFigure: () => useMsaSvgFigure
 });
 var init_dist = __esm({
@@ -129482,6 +129628,7 @@ var init_dist = __esm({
     init_renderToSvg();
     init_headlessRenderEnv();
     init_constants();
+    init_expandSpec();
     init_Loading2();
     init_MSAViewer();
     init_mount();

package/package.json

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