@platforma-sdk/ui-vue 1.42.53 → 1.43.0

package/dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue2.js

@@ -1,106 +1,138 @@
-import { defineComponent as I, useCssVars as R, computed as f, useTemplateRef as N, createElementBlock as l, openBlock as s, normalizeClass as n, createElementVNode as t, createBlock as g, createCommentVNode as a, Fragment as i, renderList as d, normalizeStyle as b, toDisplayString as m } from "vue";
-import { useObjectUrl as L } from "@vueuse/core";
-import S from "./Consensus.vue.js";
-import V from "./Legend.vue.js";
-import z from "./SeqLogo.vue.js";
-const A = /* @__PURE__ */ I({
+import { defineComponent as M, useCssVars as U, unref as n, computed as C, useCssModule as D, useTemplateRef as b, ref as I, onBeforeMount as E, onBeforeUnmount as A, watch as F, onWatcherCleanup as H, createElementBlock as c, openBlock as t, normalizeClass as l, createElementVNode as i, createBlock as f, createCommentVNode as u, Fragment as d, renderList as v, toDisplayString as y, withDirectives as O, vShow as P, normalizeStyle as W } from "vue";
+import { cellSize as k } from "./cell-size.js";
+import $ from "./Consensus.vue.js";
+import j from "./Legend.vue.js";
+import G from "./PhylogeneticTree.vue.js";
+import J from "./SeqLogo.vue.js";
+const ne = /* @__PURE__ */ M({
   __name: "MultiSequenceAlignmentView",
   props: {
     sequences: {},
-    sequenceNames: {},
-    labelRows: {},
-    residueCounts: {},
-    highlightImage: {},
+    labels: {},
+    highlightLegend: {},
+    phylogeneticTree: {},
     widgets: {}
   },
-  setup(c, { expose: q }) {
-    R((e) => ({
-      "861533c4": k.value
+  setup(R, { expose: B }) {
+    U((o) => ({
+      e405b06c: n(N),
+      "0c44921e": s.sequences.length,
+      "6aab37c6": _.value,
+      "2e72cab4": s.labels.length,
+      "1ad5abe9": V.value,
+      "3c16a76c": x.value,
+      "1406981e": n(T)
     }));
-    const $ = N("rootRef");
-    q({ rootEl: $ });
-    const h = L(() => {
-      var e;
-      return (e = c.highlightImage) == null ? void 0 : e.blob;
-    }), k = f(
-      () => h.value ? `url('${h.value}')` : "none"
-    ), C = f(
-      () => {
-        var e;
-        return (e = c.sequences.at(0)) == null ? void 0 : e.split(" ").map(({ length: y }) => y);
-      }
+    const s = R, r = D(), L = b("rootRef");
+    B({ rootEl: L });
+    const _ = C(() => {
+      var o;
+      return ((o = s.sequences.at(0)) == null ? void 0 : o.rows.length) ?? 0;
+    }), T = CSS.px(k.inline).toString(), N = CSS.px(k.block).toString(), w = b("referenceCell"), h = I(), q = b("corner"), z = I(), x = C(
+      () => h.value ? CSS.px(k.inline - h.value).toString() : void 0
+    ), V = C(
+      () => CSS.px(z.value ?? 0).toString()
     );
-    return (e, y) => {
-      var p, v;
-      return s(), l("div", {
-        ref: "rootRef",
-        class: n(e.$style.root)
+    let g;
+    E(() => {
+      const o = (a) => {
+        var e;
+        return (e = a.borderBoxSize.find(Boolean)) == null ? void 0 : e.inlineSize;
+      };
+      g = new ResizeObserver((a) => {
+        for (const e of a)
+          switch (e.target) {
+            case w.value:
+              h.value = o(e);
+              break;
+            case q.value:
+              z.value = o(e);
+              break;
+          }
+      });
+    }), A(() => {
+      g.disconnect();
+    });
+    for (const o of [w, q])
+      F(o, (a, e) => {
+        a && g.observe(a), H(() => {
+          e && g.unobserve(e);
+        });
+      });
+    return (o, a) => (t(), c("div", {
+      ref: "rootRef",
+      class: l(n(r).root)
+    }, [
+      i("div", {
+        ref: "referenceCell",
+        class: l(n(r).referenceCell)
+      }, "x", 2),
+      i("div", {
+        class: l(["pl-scrollable", n(r).table])
       }, [
-        t("div", {
-          class: n(["pl-scrollable", e.$style.table])
+        i("div", {
+          class: l(n(r).sidebar)
         }, [
-          t("div", {
-            class: n(e.$style.corner)
+          s.widgets.includes("tree") && s.phylogeneticTree ? (t(), f(G, {
+            key: 0,
+            tree: s.phylogeneticTree,
+            class: l(n(r).phylogeneticTree)
+          }, null, 8, ["tree", "class"])) : u("", !0),
+          i("div", {
+            class: l(n(r).labels)
           }, [
-            t("div", {
-              class: n(e.$style["label-scroll-indicator"])
-            }, null, 2)
-          ], 2),
-          t("div", {
-            class: n(e.$style.header)
+            (t(!0), c(d, null, v(s.labels, ({ rows: e }, m) => (t(), c(d, { key: m }, [
+              (t(!0), c(d, null, v(e, (p, S) => (t(), c("div", { key: S }, y(p), 1))), 128))
+            ], 64))), 128))
+          ], 2)
+        ], 2),
+        x.value !== void 0 ? (t(!0), c(d, { key: 0 }, v(s.sequences, (e, m) => (t(), c("div", {
+          key: m,
+          class: l(n(r).sequenceColumn)
+        }, [
+          i("div", {
+            class: l(n(r).sequenceHeader)
           }, [
-            e.sequenceNames.length > 1 ? (s(), l("div", {
+            O(i("div", {
+              class: l(n(r).sequenceName)
+            }, y(e.name), 3), [
+              [P, s.sequences.length > 1]
+            ]),
+            s.widgets.includes("consensus") ? (t(), f($, {
               key: 0,
-              class: n(e.$style["sequence-names"])
-            }, [
-              (s(!0), l(i, null, d(e.sequenceNames, (u, r) => {
-                var o;
-                return s(), l("span", {
-                  key: r,
-                  style: b({
-                    inlineSize: (((o = C.value) == null ? void 0 : o.at(r)) ?? 0) * 20 + "px"
-                  })
-                }, m(u), 5);
-              }), 128))
-            ], 2)) : a("", !0),
-            e.widgets.includes("consensus") ? (s(), g(S, {
+              "residue-counts": e.residueCounts,
+              "labels-class": n(r).sequenceRow
+            }, null, 8, ["residue-counts", "labels-class"])) : u("", !0),
+            s.widgets.includes("seqLogo") ? (t(), f(J, {
               key: 1,
               "residue-counts": e.residueCounts
-            }, null, 8, ["residue-counts"])) : a("", !0),
-            e.widgets.includes("seqLogo") ? (s(), g(z, {
-              key: 2,
-              "residue-counts": e.residueCounts
-            }, null, 8, ["residue-counts"])) : a("", !0)
-          ], 2),
-          t("div", {
-            class: n(e.$style.labels)
-          }, [
-            t("div", {
-              class: n(e.$style["labels-grid"])
-            }, [
-              (s(!0), l(i, null, d(e.labelRows, (u, r) => (s(), l(i, null, [
-                (s(!0), l(i, null, d(u, (o, w) => (s(), l("div", {
-                  key: w,
-                  style: b({ gridRow: r + 1 })
-                }, m(o), 5))), 128))
-              ], 64))), 256))
-            ], 2)
+            }, null, 8, ["residue-counts"])) : u("", !0)
           ], 2),
-          t("div", {
-            class: n(e.$style.sequences)
+          i("div", {
+            class: l(n(r).sequenceRowsContainer),
+            style: W({
+              backgroundImage: e.highlightImageUrl ? `url(${e.highlightImageUrl})` : void 0
+            })
           }, [
-            (s(!0), l(i, null, d(e.sequences, (u, r) => (s(), l("div", { key: r }, m(u), 1))), 128))
-          ], 2)
-        ], 2),
-        (p = e.widgets) != null && p.includes("legend") && ((v = e.highlightImage) != null && v.legend) ? (s(), g(V, {
-          key: 0,
-          legend: e.highlightImage.legend
-        }, null, 8, ["legend"])) : a("", !0)
-      ], 2);
-    };
+            (t(!0), c(d, null, v(e.rows, (p, S) => (t(), c("div", {
+              key: S,
+              class: l(n(r).sequenceRow)
+            }, y(p), 3))), 128))
+          ], 6)
+        ], 2))), 128)) : u("", !0),
+        i("div", {
+          ref: "corner",
+          class: l(n(r).corner)
+        }, null, 2)
+      ], 2),
+      s.widgets.includes("legend") && s.highlightLegend ? (t(), f(j, {
+        key: 0,
+        legend: s.highlightLegend
+      }, null, 8, ["legend"])) : u("", !0)
+    ], 2));
   }
 });
 export {
-  A as default
+  ne as default
 };
 //# sourceMappingURL=MultiSequenceAlignmentView.vue2.js.map

package/dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSequenceAlignmentView.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useObjectUrl } from '@vueuse/core';\nimport { computed, useTemplateRef } from 'vue';\nimport Consensus from './Consensus.vue';\nimport Legend from './Legend.vue';\nimport SeqLogo from './SeqLogo.vue';\nimport type { HighlightLegend, ResidueCounts } from './types';\n\nconst { sequences, highlightImage } = defineProps<{\n  sequences: string[];\n  sequenceNames: string[];\n  labelRows: string[][];\n  residueCounts: ResidueCounts;\n  highlightImage: {\n    blob: Blob;\n    legend: HighlightLegend;\n  } | undefined;\n  widgets: ('consensus' | 'seqLogo' | 'legend')[];\n}>();\n\nconst rootEl = useTemplateRef('rootRef');\ndefineExpose({ rootEl });\n\nconst highlightImageObjectUrl = useObjectUrl(() => highlightImage?.blob);\nconst highlightImageCssUrl = computed(() =>\n  highlightImageObjectUrl.value\n    ? `url('${highlightImageObjectUrl.value}')`\n    : 'none',\n);\n\nconst sequenceLengths = computed(() =>\n  sequences.at(0)?.split(' ').map(({ length }) => length),\n);\n</script>\n\n<template>\n  <div ref=\"rootRef\" :class=\"$style.root\">\n    <div :class=\"['pl-scrollable', $style.table]\">\n      <div :class=\"$style.corner\">\n        <div :class=\"$style['label-scroll-indicator']\" />\n      </div>\n      <div :class=\"$style.header\">\n        <div v-if=\"sequenceNames.length > 1\" :class=\"$style['sequence-names']\">\n          <span\n            v-for=\"(name, index) of sequenceNames\"\n            :key=\"index\"\n            :style=\"{\n              inlineSize: ((sequenceLengths?.at(index) ?? 0) * 20)\n                + 'px',\n            }\"\n          >{{ name }}</span>\n        </div>\n        <Consensus v-if=\"widgets.includes('consensus')\" :residue-counts />\n        <SeqLogo v-if=\"widgets.includes('seqLogo')\" :residue-counts />\n      </div>\n      <div :class=\"$style.labels\">\n        <div :class=\"$style['labels-grid']\">\n          <template v-for=\"(labelRow, rowIndex) of labelRows\">\n            <div\n              v-for=\"(label, labelIndex) of labelRow\"\n              :key=\"labelIndex\"\n              :style=\"{ gridRow: rowIndex + 1 }\"\n            >\n              {{ label }}\n            </div>\n          </template>\n        </div>\n      </div>\n      <div :class=\"$style.sequences\">\n        <div\n          v-for=\"(sequence, index) of sequences\"\n          :key=\"index\"\n        >\n          {{ sequence }}\n        </div>\n      </div>\n    </div>\n    <Legend\n      v-if=\"widgets?.includes('legend') && highlightImage?.legend\"\n      :legend=\"highlightImage.legend\"\n    />\n  </div>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-block-size: 0;\n  -webkit-print-color-adjust: exact;\n  print-color-adjust: exact;\n\n  &[data-pre-print] {\n    .table {\n      container-type: unset;\n    }\n    .labels {\n      max-inline-size: unset;\n    }\n  }\n}\n\n.table {\n  container-type: inline-size;\n  display: grid;\n  grid-template-areas:\n    \"corner header\"\n    \"labels sequences\";\n  justify-content: start;\n  timeline-scope: --msa-labels-scroll;\n  @media print {\n    overflow: visible;\n  }\n}\n\n.corner {\n  grid-area: corner;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  z-index: 2;\n}\n\n.label-scroll-indicator {\n  position: absolute;\n  inset-inline-end: 0;\n  block-size: 100cqb;\n  inline-size: 8px;\n  animation-name: hide;\n  animation-timeline: --msa-labels-scroll;\n  visibility: hidden;\n  background: #fff;\n  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.10);\n}\n\n.header {\n  grid-area: header;\n  background-color: #fff;\n  position: sticky;\n  inset-block-start: 0;\n  z-index: 1;\n}\n\n.sequence-names {\n  display: flex;\n  font-weight: 700;\n  line-height: 20px;\n  margin-block-end: 4px;\n  gap: 20px;\n}\n\n.labels {\n  grid-area: labels;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  inline-size: max-content;\n  max-inline-size: 30cqi;\n  overflow: scroll;\n  scrollbar-width: none;\n  overscroll-behavior-inline: none;\n  scroll-timeline: --msa-labels-scroll inline;\n}\n\n.labels-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  font-family: Spline Sans Mono;\n  line-height: 24px;\n  text-wrap: nowrap;\n\n  > * {\n    padding-inline-end: 12px;\n  }\n}\n\n.sequences {\n  grid-area: sequences;\n  display: flex;\n  flex-direction: column;\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: 24px;\n  letter-spacing: 11.6px;\n  text-indent: 5.8px;\n  margin-inline-end: -5.8px;\n  background-image: v-bind(highlightImageCssUrl);\n  background-repeat: no-repeat;\n  background-size: calc(100% - 5.8px) 100%;\n}\n\n@keyframes hide {\n  from {\n    visibility: visible;\n  }\n  to {\n    visibility: hidden;\n  }\n}\n</style>\n"],"names":["rootEl","useTemplateRef","__expose","highlightImageObjectUrl","useObjectUrl","_a","__props","highlightImageCssUrl","computed","sequenceLengths","length"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,UAAMA,IAASC,EAAe,SAAS;AACvC,IAAAC,EAAa,EAAE,QAAAF,GAAQ;AAEvB,UAAMG,IAA0BC,EAAa,MAAA;;AAAM,cAAAC,IAAAC,EAAA,mBAAA,gBAAAD,EAAgB;AAAA,KAAI,GACjEE,IAAuBC;AAAA,MAAS,MACpCL,EAAwB,QACpB,QAAQA,EAAwB,KAAK,OACrC;AAAA,IAAA,GAGAM,IAAkBD;AAAA,MAAS,MAAA;;AAC/B,gBAAAH,IAAAC,YAAU,GAAG,CAAC,MAAd,gBAAAD,EAAiB,MAAM,KAAK,IAAI,CAAC,EAAE,QAAAK,EAAA,MAAaA;AAAA;AAAA,IAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MultiSequenceAlignmentView.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { PlMultiSequenceAlignmentWidget } from '@platforma-sdk/model';\nimport {\n  computed,\n  onBeforeMount,\n  onBeforeUnmount,\n  onWatcherCleanup,\n  ref,\n  useCssModule,\n  useTemplateRef,\n  watch,\n} from 'vue';\nimport { cellSize } from './cell-size';\nimport Consensus from './Consensus.vue';\nimport Legend from './Legend.vue';\nimport type { TreeNodeData } from './phylogenetic-tree.worker';\nimport PhylogeneticTree from './PhylogeneticTree.vue';\nimport SeqLogo from './SeqLogo.vue';\nimport type { HighlightLegend, ResidueCounts } from './types';\n\nconst props = defineProps<{\n  sequences: {\n    name: string;\n    rows: string[];\n    residueCounts: ResidueCounts;\n    highlightImageUrl?: string;\n  }[];\n  labels: {\n    rows: string[];\n  }[];\n  highlightLegend: HighlightLegend | undefined;\n  phylogeneticTree: TreeNodeData[] | undefined;\n  widgets: PlMultiSequenceAlignmentWidget[];\n}>();\n\nconst classes = useCssModule();\n\nconst rootEl = useTemplateRef('rootRef');\ndefineExpose({ rootEl });\n\nconst rowCount = computed(() => props.sequences.at(0)?.rows.length ?? 0);\n\nconst targetCellInlineSize = CSS.px(cellSize.inline).toString();\nconst targetCellBlockSize = CSS.px(cellSize.block).toString();\n\nconst referenceCellRef = useTemplateRef('referenceCell');\nconst referenceCellInlineSize = ref<number>();\n\nconst cornerRef = useTemplateRef('corner');\nconst cornerInlineSize = ref<number>();\n\nconst letterSpacing = computed(() =>\n  referenceCellInlineSize.value\n    ? CSS.px(cellSize.inline - referenceCellInlineSize.value).toString()\n    : undefined,\n);\n\nconst sequenceNameInsetInlineStart = computed(() =>\n  CSS.px(cornerInlineSize.value ?? 0).toString(),\n);\n\nlet observer: ResizeObserver;\n\nonBeforeMount(() => {\n  const getInlineSize = (entry: ResizeObserverEntry) =>\n    entry.borderBoxSize.find(Boolean)?.inlineSize;\n\n  observer = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      switch (entry.target) {\n        case referenceCellRef.value:\n          referenceCellInlineSize.value = getInlineSize(entry);\n          break;\n        case cornerRef.value:\n          cornerInlineSize.value = getInlineSize(entry);\n          break;\n      }\n    }\n  });\n});\n\nonBeforeUnmount(() => {\n  observer.disconnect();\n});\n\nfor (const ref of [referenceCellRef, cornerRef]) {\n  watch(ref, (el, prevEl) => {\n    if (el) observer.observe(el);\n    onWatcherCleanup(() => {\n      if (prevEl) observer.unobserve(prevEl);\n    });\n  });\n}\n</script>\n\n<template>\n  <div ref=\"rootRef\" :class=\"classes.root\">\n    <div ref=\"referenceCell\" :class=\"classes.referenceCell\">x</div>\n    <div :class=\"['pl-scrollable', classes.table]\">\n      <div :class=\"classes.sidebar\">\n        <PhylogeneticTree\n          v-if=\"props.widgets.includes('tree') && props.phylogeneticTree\"\n          :tree=\"props.phylogeneticTree\"\n          :class=\"classes.phylogeneticTree\"\n        />\n        <div :class=\"classes.labels\">\n          <template\n            v-for=\"({ rows }, columnIndex) of props.labels\"\n            :key=\"columnIndex\"\n          >\n            <div v-for=\"(row, rowIndex) of rows\" :key=\"rowIndex\">\n              {{ row }}\n            </div>\n          </template>\n        </div>\n      </div>\n      <template v-if=\"letterSpacing !== undefined\">\n        <div\n          v-for=\"(column, columnIndex) of props.sequences\"\n          :key=\"columnIndex\"\n          :class=\"classes.sequenceColumn\"\n        >\n          <div :class=\"classes.sequenceHeader\">\n            <div\n              v-show=\"props.sequences.length > 1\"\n              :class=\"classes.sequenceName\"\n            >\n              {{ column.name }}\n            </div>\n            <Consensus\n              v-if=\"props.widgets.includes('consensus')\"\n              :residue-counts=\"column.residueCounts\"\n              :labels-class=\"classes.sequenceRow\"\n            />\n            <SeqLogo\n              v-if=\"props.widgets.includes('seqLogo')\"\n              :residue-counts=\"column.residueCounts\"\n            />\n          </div>\n          <div\n            :class=\"classes.sequenceRowsContainer\"\n            :style=\"{\n              backgroundImage: column.highlightImageUrl\n                ? `url(${column.highlightImageUrl})`\n                : undefined,\n            }\"\n          >\n            <div\n              v-for=\"(row, rowIndex) of column.rows\"\n              :key=\"rowIndex\"\n              :class=\"classes.sequenceRow\"\n            >\n              {{ row }}\n            </div>\n          </div>\n        </div>\n      </template>\n      <div ref=\"corner\" :class=\"classes.corner\" />\n    </div>\n    <Legend\n      v-if=\"props.widgets.includes('legend') && props.highlightLegend\"\n      :legend=\"props.highlightLegend\"\n    />\n  </div>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-block-size: 0;\n  -webkit-print-color-adjust: exact;\n  print-color-adjust: exact;\n  container-type: inline-size;\n\n  &[data-pre-print] {\n    container-type: unset;\n\n    .sidebar {\n      max-inline-size: unset;\n    }\n  }\n}\n\n.referenceCell {\n  position: fixed;\n  visibility: hidden;\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: v-bind('targetCellBlockSize');\n}\n\n.table {\n  display: grid;\n  grid-template-columns:\n    [sidebar-start] auto [sidebar-end] repeat(\n    v-bind('props.sequences.length'),\n    [column-start] auto [column-end]\n  );\n  grid-template-rows:\n    [header-start] auto [header-end]\n    repeat(v-bind('rowCount'), [row-start] auto [row-end]);\n  justify-content: start;\n  position: relative;\n  @media print {\n    overflow: visible;\n  }\n}\n\n.sidebar {\n  grid-column: sidebar;\n  grid-row: 1 row-start / -1 row-end;\n  display: grid;\n  grid-template-rows: subgrid;\n  position: sticky;\n  inset-inline-start: 0;\n  background-color: #fff;\n  inline-size: min-content;\n  max-inline-size: 30cqi;\n  overflow: scroll;\n  overscroll-behavior-inline: none;\n  scrollbar-width: none;\n}\n\n.phylogeneticTree {\n  grid-row: 1 row-start / -1 row-end;\n}\n\n.labels {\n  grid-row: 1 row-start / -1 row-end;\n  display: grid;\n  grid-template-columns: repeat(v-bind('props.labels.length'), auto);\n  grid-template-rows: subgrid;\n  grid-auto-flow: column;\n  column-gap: 12px;\n  padding-inline-end: 12px;\n  font-family: Spline Sans Mono;\n  line-height: v-bind('targetCellBlockSize');\n  white-space: nowrap;\n}\n\n.sequenceColumn {\n  grid-row: header-start / -1 row-end;\n  display: grid;\n  grid-template-rows: subgrid;\n  & + & {\n    margin-inline-start: 24px;\n  }\n}\n\n.sequenceHeader {\n  grid-row: header;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  min-inline-size: 0;\n  position: sticky;\n  inset-block-start: 0;\n  background-color: #fff;\n}\n\n.sequenceName {\n  margin-block-end: 4px;\n  font-weight: 700;\n  line-height: 20px;\n  inline-size: fit-content;\n  position: sticky;\n  inset-inline-start: v-bind('sequenceNameInsetInlineStart');\n}\n\n.sequenceRowsContainer {\n  grid-row: 1 row-start / -1 row-end;\n  display: grid;\n  grid-template-rows: subgrid;\n}\n\n.sequenceRow {\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: v-bind('targetCellBlockSize');\n  letter-spacing: v-bind('letterSpacing');\n  text-indent: calc(v-bind('letterSpacing') / 2);\n  inline-size: calc-size(\n    min-content,\n    round(down, size, v-bind('targetCellInlineSize'))\n  );\n  white-space: nowrap;\n}\n\n.corner {\n  grid-column: sidebar;\n  grid-row: header;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  background-color: #fff;\n}\n</style>\n"],"names":["props","__props","classes","useCssModule","rootEl","useTemplateRef","__expose","rowCount","computed","_a","targetCellInlineSize","cellSize","targetCellBlockSize","referenceCellRef","referenceCellInlineSize","ref","cornerRef","cornerInlineSize","letterSpacing","sequenceNameInsetInlineStart","observer","onBeforeMount","getInlineSize","entry","entries","onBeforeUnmount","watch","el","prevEl","onWatcherCleanup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,UAAMA,IAAQC,GAeRC,IAAUC,EAAA,GAEVC,IAASC,EAAe,SAAS;AACvC,IAAAC,EAAa,EAAE,QAAAF,GAAQ;AAEvB,UAAMG,IAAWC,EAAS,MAAA;;AAAM,eAAAC,IAAAT,EAAM,UAAU,GAAG,CAAC,MAApB,gBAAAS,EAAuB,KAAK,WAAU;AAAA,KAAC,GAEjEC,IAAuB,IAAI,GAAGC,EAAS,MAAM,EAAE,SAAA,GAC/CC,IAAsB,IAAI,GAAGD,EAAS,KAAK,EAAE,SAAA,GAE7CE,IAAmBR,EAAe,eAAe,GACjDS,IAA0BC,EAAA,GAE1BC,IAAYX,EAAe,QAAQ,GACnCY,IAAmBF,EAAA,GAEnBG,IAAgBV;AAAA,MAAS,MAC7BM,EAAwB,QACpB,IAAI,GAAGH,EAAS,SAASG,EAAwB,KAAK,EAAE,aACxD;AAAA,IAAA,GAGAK,IAA+BX;AAAA,MAAS,MAC5C,IAAI,GAAGS,EAAiB,SAAS,CAAC,EAAE,SAAA;AAAA,IAAS;AAG/C,QAAIG;AAEJ,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAgB,CAACC,MAAA;;AACrB,gBAAAd,IAAAc,EAAM,cAAc,KAAK,OAAO,MAAhC,gBAAAd,EAAmC;AAAA;AAErC,MAAAW,IAAW,IAAI,eAAe,CAACI,MAAY;AACzC,mBAAWD,KAASC;AAClB,kBAAQD,EAAM,QAAA;AAAA,YACZ,KAAKV,EAAiB;AACpB,cAAAC,EAAwB,QAAQQ,EAAcC,CAAK;AACnD;AAAA,YACF,KAAKP,EAAU;AACb,cAAAC,EAAiB,QAAQK,EAAcC,CAAK;AAC5C;AAAA,UAAA;AAAA,MAGR,CAAC;AAAA,IACH,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAL,EAAS,WAAA;AAAA,IACX,CAAC;AAED,eAAWL,KAAO,CAACF,GAAkBG,CAAS;AAC5C,MAAAU,EAAMX,GAAK,CAACY,GAAIC,MAAW;AACzB,QAAID,KAAIP,EAAS,QAAQO,CAAE,GAC3BE,EAAiB,MAAM;AACrB,UAAID,KAAQR,EAAS,UAAUQ,CAAM;AAAA,QACvC,CAAC;AAAA,MACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue3.js

@@ -1,24 +1,31 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._root_y6xw0_2{display:flex;flex-direction:column;gap:12px;min-block-size:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}._root_y6xw0_2[data-pre-print] ._table_y6xw0_11{container-type:unset}._root_y6xw0_2[data-pre-print] ._labels_y6xw0_14{max-inline-size:unset}._table_y6xw0_11{container-type:inline-size;display:grid;grid-template-areas:"corner header" "labels sequences";justify-content:start;timeline-scope:--msa-labels-scroll}@media print{._table_y6xw0_11{overflow:visible}}._corner_y6xw0_33{grid-area:corner;background-color:#fff;position:sticky;inset-inline-start:0;inset-block-start:0;z-index:2}._label-scroll-indicator_y6xw0_42{position:absolute;inset-inline-end:0;block-size:100cqb;inline-size:8px;animation-name:_hide_y6xw0_1;animation-timeline:--msa-labels-scroll;visibility:hidden;background:#fff;box-shadow:-4px 0 4px -2px #0000001a}._header_y6xw0_54{grid-area:header;background-color:#fff;position:sticky;inset-block-start:0;z-index:1}._sequence-names_y6xw0_62{display:flex;font-weight:700;line-height:20px;margin-block-end:4px;gap:20px}._labels_y6xw0_14{grid-area:labels;background-color:#fff;position:sticky;inset-inline-start:0;z-index:1;inline-size:max-content;max-inline-size:30cqi;overflow:scroll;scrollbar-width:none;overscroll-behavior-inline:none;scroll-timeline:--msa-labels-scroll inline}._labels-grid_y6xw0_84{display:grid;grid-auto-flow:dense;font-family:Spline Sans Mono;line-height:24px;text-wrap:nowrap}._labels-grid_y6xw0_84>*{padding-inline-end:12px}._sequences_y6xw0_96{grid-area:sequences;display:flex;flex-direction:column;font-family:Spline Sans Mono;font-weight:600;line-height:24px;letter-spacing:11.6px;text-indent:5.8px;margin-inline-end:-5.8px;background-image:var(--861533c4);background-repeat:no-repeat;background-size:calc(100% - 5.8px) 100%}@keyframes _hide_y6xw0_1{0%{visibility:visible}to{visibility:hidden}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-const e = "_root_y6xw0_2", _ = "_table_y6xw0_11", s = "_labels_y6xw0_14", l = "_corner_y6xw0_33", o = "_hide_y6xw0_1", c = "_header_y6xw0_54", n = "_sequences_y6xw0_96", a = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._root_34869_2{display:flex;flex-direction:column;gap:12px;min-block-size:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;container-type:inline-size}._root_34869_2[data-pre-print]{container-type:unset}._root_34869_2[data-pre-print] ._sidebar_34869_14{max-inline-size:unset}._referenceCell_34869_20{position:fixed;visibility:hidden;font-family:Spline Sans Mono;font-weight:600;line-height:var(--e405b06c)}._table_34869_28{display:grid;grid-template-columns:[sidebar-start] auto [sidebar-end] repeat(var(--0c44921e),[column-start] auto [column-end]);grid-template-rows:[header-start] auto [header-end] repeat(var(--6aab37c6),[row-start] auto [row-end]);justify-content:start;position:relative}@media print{._table_34869_28{overflow:visible}}._sidebar_34869_14{grid-column:sidebar;grid-row:1 row-start / -1 row-end;display:grid;grid-template-rows:subgrid;position:sticky;inset-inline-start:0;background-color:#fff;inline-size:min-content;max-inline-size:30cqi;overflow:scroll;overscroll-behavior-inline:none;scrollbar-width:none}._phylogeneticTree_34869_60{grid-row:1 row-start / -1 row-end}._labels_34869_64{grid-row:1 row-start / -1 row-end;display:grid;grid-template-columns:repeat(var(--2e72cab4),auto);grid-template-rows:subgrid;grid-auto-flow:column;column-gap:12px;padding-inline-end:12px;font-family:Spline Sans Mono;line-height:var(--e405b06c);white-space:nowrap}._sequenceColumn_34869_77{grid-row:header-start / -1 row-end;display:grid;grid-template-rows:subgrid}._sequenceColumn_34869_77+._sequenceColumn_34869_77{margin-inline-start:24px}._sequenceHeader_34869_86{grid-row:header;display:flex;flex-direction:column;justify-content:end;min-inline-size:0;position:sticky;inset-block-start:0;background-color:#fff}._sequenceName_34869_97{margin-block-end:4px;font-weight:700;line-height:20px;inline-size:fit-content;position:sticky;inset-inline-start:var(--1ad5abe9)}._sequenceRowsContainer_34869_106{grid-row:1 row-start / -1 row-end;display:grid;grid-template-rows:subgrid}._sequenceRow_34869_106{font-family:Spline Sans Mono;font-weight:600;line-height:var(--e405b06c);letter-spacing:var(--3c16a76c);text-indent:calc(var(--3c16a76c) / 2);inline-size:calc-size(min-content,round(down,size,var(--1406981e)));white-space:nowrap}._corner_34869_125{grid-column:sidebar;grid-row:header;position:sticky;inset-inline-start:0;inset-block-start:0;background-color:#fff}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+const e = "_root_34869_2", n = "_sidebar_34869_14", s = "_referenceCell_34869_20", o = "_table_34869_28", c = "_phylogeneticTree_34869_60", _ = "_labels_34869_64", r = "_sequenceColumn_34869_77", t = "_sequenceHeader_34869_86", l = "_sequenceName_34869_97", a = "_sequenceRowsContainer_34869_106", u = "_sequenceRow_34869_106", q = "_corner_34869_125", b = {
   root: e,
-  table: _,
-  labels: s,
-  corner: l,
-  "label-scroll-indicator": "_label-scroll-indicator_y6xw0_42",
-  hide: o,
-  header: c,
-  "sequence-names": "_sequence-names_y6xw0_62",
-  "labels-grid": "_labels-grid_y6xw0_84",
-  sequences: n
+  sidebar: n,
+  referenceCell: s,
+  table: o,
+  phylogeneticTree: c,
+  labels: _,
+  sequenceColumn: r,
+  sequenceHeader: t,
+  sequenceName: l,
+  sequenceRowsContainer: a,
+  sequenceRow: u,
+  corner: q
 };
 export {
-  l as corner,
-  a as default,
-  c as header,
-  o as hide,
-  s as labels,
+  q as corner,
+  b as default,
+  _ as labels,
+  c as phylogeneticTree,
+  s as referenceCell,
   e as root,
-  n as sequences,
-  _ as table
+  r as sequenceColumn,
+  t as sequenceHeader,
+  l as sequenceName,
+  u as sequenceRow,
+  a as sequenceRowsContainer,
+  n as sidebar,
+  o as table
 };
 //# sourceMappingURL=MultiSequenceAlignmentView.vue3.js.map

package/dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSequenceAlignmentView.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"MultiSequenceAlignmentView.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue.d.ts

@@ -0,0 +1,8 @@
+import { TreeNodeData } from './phylogenetic-tree.worker';
+type __VLS_Props = {
+    tree: TreeNodeData[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    plotEl: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue.js

@@ -0,0 +1,10 @@
+import o from "./PhylogeneticTree.vue2.js";
+import s from "./PhylogeneticTree.vue3.js";
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+const t = {
+  $style: s
+}, f = /* @__PURE__ */ e(o, [["__cssModules", t]]);
+export {
+  f as default
+};
+//# sourceMappingURL=PhylogeneticTree.vue.js.map

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhylogeneticTree.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue2.js

@@ -0,0 +1,77 @@
+import { defineComponent as v, useCssModule as g, useTemplateRef as y, computed as w, shallowRef as k, watchEffect as _, onBeforeUnmount as I, createBlock as x, createElementBlock as C, unref as o, openBlock as p, withCtx as L, createTextVNode as T, toDisplayString as B, normalizeClass as E } from "vue";
+import { PlAlert as P } from "@milaboratories/uikit";
+import { cellSize as d } from "./cell-size.js";
+import { useMiPlots as b } from "./useMiPlots.js";
+const N = /* @__PURE__ */ v({
+  __name: "PhylogeneticTree",
+  props: {
+    tree: {}
+  },
+  setup(m) {
+    const f = m, h = g(), l = y("plotEl"), a = {
+      type: "dendro",
+      title: { show: !1, name: "" },
+      size: {
+        width: 149,
+        minCellHeight: d.block,
+        maxCellHeight: d.block,
+        marginLeft: 1,
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: 0
+      },
+      mode: "normal",
+      leavesMode: "alignLeavesToLine",
+      leavesOrder: "indexAsc",
+      legend: { show: !1 },
+      id: {
+        type: "column",
+        value: "nodeId"
+      },
+      parentId: {
+        type: "column",
+        value: "parentId"
+      },
+      height: {
+        type: "column",
+        value: "distance"
+      },
+      showNodes: !1,
+      showNodesLabels: !1,
+      showLeavesLabels: !1,
+      rootPosition: "left"
+    }, r = w(() => {
+      const e = [], n = [], u = [];
+      for (const s of f.tree)
+        e.push(s.id), n.push(s.parentId ?? null), u.push(s.length ?? 0);
+      return {
+        type: "columns",
+        id: `phylogeneticTree-${crypto.randomUUID()}`,
+        values: { nodeId: e, parentId: n, distance: u }
+      };
+    }), { miplots: i, error: c } = b(), t = k();
+    return _(async () => {
+      !l.value || !i.value || (t.value ? t.value.updateSettingsAndData(r.value, a) : (t.value = i.value.newPlot(r.value, a), t.value.mount(l.value)));
+    }), I(() => {
+      var e;
+      (e = t.value) == null || e.unmount();
+    }), (e, n) => o(c) ? (p(), x(o(P), {
+      key: 0,
+      type: "error"
+    }, {
+      default: L(() => [
+        T(B(o(c).message), 1)
+      ]),
+      _: 1
+    })) : (p(), C("div", {
+      key: 1,
+      ref_key: "plotEl",
+      ref: l,
+      class: E(o(h).container)
+    }, null, 2));
+  }
+});
+export {
+  N as default
+};
+//# sourceMappingURL=PhylogeneticTree.vue2.js.map

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhylogeneticTree.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/PhylogeneticTree.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type {\n  ChartInterface,\n  DataByColumns,\n  Settings,\n} from '@milaboratories/miplots4';\nimport { PlAlert } from '@milaboratories/uikit';\nimport {\n  computed,\n  onBeforeUnmount,\n  shallowRef,\n  useCssModule,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport { cellSize } from './cell-size';\nimport type { TreeNodeData } from './phylogenetic-tree.worker';\nimport { useMiPlots } from './useMiPlots';\n\nconst props = defineProps<{\n  tree: TreeNodeData[];\n}>();\n\nconst classes = useCssModule();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst settings: Settings = {\n  type: 'dendro',\n  title: { show: false, name: '' },\n  size: {\n    width: 149,\n    minCellHeight: cellSize.block,\n    maxCellHeight: cellSize.block,\n    marginLeft: 1,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n  },\n  mode: 'normal',\n  leavesMode: 'alignLeavesToLine',\n  leavesOrder: 'indexAsc',\n  legend: { show: false },\n  id: {\n    type: 'column',\n    value: 'nodeId',\n  },\n  parentId: {\n    type: 'column',\n    value: 'parentId',\n  },\n  height: {\n    type: 'column',\n    value: 'distance',\n  },\n  showNodes: false,\n  showNodesLabels: false,\n  showLeavesLabels: false,\n  rootPosition: 'left',\n};\n\nconst data = computed<DataByColumns>(() => {\n  const nodeId: number[] = [];\n  const parentId: (number | null)[] = [];\n  const distance: number[] = [];\n  for (const node of props.tree) {\n    nodeId.push(node.id);\n    parentId.push(node.parentId ?? null);\n    distance.push(node.length ?? 0);\n  }\n  return ({\n    type: 'columns',\n    id: `phylogeneticTree-${crypto.randomUUID()}`,\n    values: { nodeId, parentId, distance },\n  });\n});\n\nconst { miplots, error } = useMiPlots();\n\nconst plot = shallowRef<ChartInterface>();\n\nwatchEffect(async () => {\n  if (!plotEl.value || !miplots.value) return;\n  if (!plot.value) {\n    plot.value = miplots.value.newPlot(data.value, settings);\n    plot.value.mount(plotEl.value);\n  } else {\n    plot.value.updateSettingsAndData(data.value, settings);\n  }\n});\n\nonBeforeUnmount(() => {\n  plot.value?.unmount();\n});\n</script>\n\n<template>\n  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else ref=\"plotEl\" :class=\"classes.container\" />\n</template>\n\n<style module>\n.container {\n  svg {\n    display: block;\n  }\n}\n</style>\n"],"names":["props","__props","classes","useCssModule","plotEl","useTemplateRef","settings","cellSize","data","computed","nodeId","parentId","distance","node","miplots","error","useMiPlots","plot","shallowRef","watchEffect","onBeforeUnmount","_a"],"mappings":";;;;;;;;;;AAmBA,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAASC,EAAe,QAAQ,GAEhCC,IAAqB;AAAA,MACzB,MAAM;AAAA,MACN,OAAO,EAAE,MAAM,IAAO,MAAM,GAAA;AAAA,MAC5B,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,eAAeC,EAAS;AAAA,QACxB,eAAeA,EAAS;AAAA,QACxB,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,WAAW;AAAA,QACX,cAAc;AAAA,MAAA;AAAA,MAEhB,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ,EAAE,MAAM,GAAA;AAAA,MAChB,IAAI;AAAA,QACF,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,kBAAkB;AAAA,MAClB,cAAc;AAAA,IAAA,GAGVC,IAAOC,EAAwB,MAAM;AACzC,YAAMC,IAAmB,CAAA,GACnBC,IAA8B,CAAA,GAC9BC,IAAqB,CAAA;AAC3B,iBAAWC,KAAQb,EAAM;AACvB,QAAAU,EAAO,KAAKG,EAAK,EAAE,GACnBF,EAAS,KAAKE,EAAK,YAAY,IAAI,GACnCD,EAAS,KAAKC,EAAK,UAAU,CAAC;AAEhC,aAAQ;AAAA,QACN,MAAM;AAAA,QACN,IAAI,oBAAoB,OAAO,WAAA,CAAY;AAAA,QAC3C,QAAQ,EAAE,QAAAH,GAAQ,UAAAC,GAAU,UAAAC,EAAA;AAAA,MAAS;AAAA,IAEzC,CAAC,GAEK,EAAE,SAAAE,GAAS,OAAAC,EAAA,IAAUC,EAAA,GAErBC,IAAOC,EAAA;AAEb,WAAAC,EAAY,YAAY;AACtB,MAAI,CAACf,EAAO,SAAS,CAACU,EAAQ,UACzBG,EAAK,QAIRA,EAAK,MAAM,sBAAsBT,EAAK,OAAOF,CAAQ,KAHrDW,EAAK,QAAQH,EAAQ,MAAM,QAAQN,EAAK,OAAOF,CAAQ,GACvDW,EAAK,MAAM,MAAMb,EAAO,KAAK;AAAA,IAIjC,CAAC,GAEDgB,EAAgB,MAAM;;AACpB,OAAAC,IAAAJ,EAAK,UAAL,QAAAI,EAAY;AAAA,IACd,CAAC;;;;;;;;;;;;;;;;"}

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue3.js

@@ -0,0 +1,9 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1uo2b_2 svg{display:block}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+const n = "_container_1uo2b_2", t = {
+  container: n
+};
+export {
+  n as container,
+  t as default
+};
+//# sourceMappingURL=PhylogeneticTree.vue3.js.map

package/dist/components/PlMultiSequenceAlignment/PhylogeneticTree.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhylogeneticTree.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue.d.ts

@@ -26,19 +26,24 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: PlMultiSequenceAlignmentModel) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     msa: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-        sequences: string[];
-        sequenceNames: string[];
-        labelRows: string[][];
-        residueCounts: import('./types').ResidueCounts;
-        highlightImage: {
-            blob: Blob;
-            legend: import('./types').HighlightLegend;
-        } | undefined;
-        widgets: ("consensus" | "seqLogo" | "legend")[];
+        sequences: {
+            name: string;
+            rows: string[];
+            residueCounts: import('./types').ResidueCounts;
+            highlightImageUrl?: string;
+        }[];
+        labels: {
+            rows: string[];
+        }[];
+        highlightLegend: import('./types').HighlightLegend | undefined;
+        phylogeneticTree: import('./phylogenetic-tree.worker').TreeNodeData[] | undefined;
+        widgets: import('@platforma-sdk/model').PlMultiSequenceAlignmentWidget[];
     }> & Readonly<{}>, {
         rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         rootRef: HTMLDivElement;
+        referenceCell: HTMLDivElement;
+        corner: HTMLDivElement;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -47,15 +52,18 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
         M: {};
         Defaults: {};
     }, Readonly<{
-        sequences: string[];
-        sequenceNames: string[];
-        labelRows: string[][];
-        residueCounts: import('./types').ResidueCounts;
-        highlightImage: {
-            blob: Blob;
-            legend: import('./types').HighlightLegend;
-        } | undefined;
-        widgets: ("consensus" | "seqLogo" | "legend")[];
+        sequences: {
+            name: string;
+            rows: string[];
+            residueCounts: import('./types').ResidueCounts;
+            highlightImageUrl?: string;
+        }[];
+        labels: {
+            rows: string[];
+        }[];
+        highlightLegend: import('./types').HighlightLegend | undefined;
+        phylogeneticTree: import('./phylogenetic-tree.worker').TreeNodeData[] | undefined;
+        widgets: import('@platforma-sdk/model').PlMultiSequenceAlignmentWidget[];
     }> & Readonly<{}>, {
         rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
     }, {}, {}, {}, {}> | null;