@platforma-sdk/ui-vue 1.41.17 → 1.42.0

package/.turbo/turbo-type-check.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.41.17 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.42.0 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > vue-tsc --noEmit --project ./tsconfig.json
 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @platforma-sdk/ui-vue
 
+## 1.42.0
+
+### Minor Changes
+
+- 3271446: MSA: added export functionality
+
+### Patch Changes
+
+- @platforma-sdk/model@1.42.0
+- @milaboratories/uikit@2.3.24
+
+## 1.41.19
+
+### Patch Changes
+
+- Updated dependencies [e2a1629]
+  - @milaboratories/uikit@2.3.23
+
 ## 1.41.17
 
 ### Patch Changes

package/dist/components/PlAnnotations/components/PlAnnotationsModal.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as I, mergeModels as A, useModel as S, shallowRef as F, computed as u, effect as M, createElementBlock as w, openBlock as C, Fragment as B, createVNode as d, unref as y, normalizeClass as i, withCtx as p, createBlock as D, createCommentVNode as U } from "vue";
+import { defineComponent as I, mergeModels as F, useModel as S, shallowRef as A, computed as u, effect as M, createElementBlock as w, openBlock as C, Fragment as B, createVNode as d, unref as y, normalizeClass as i, withCtx as p, createBlock as D, createCommentVNode as U } from "vue";
 import { isNil as g } from "../../../lib/util/helpers/dist/index.js";
 import "../../../lib/ui/uikit/dist/index.js";
 import { getDefaultAnnotationScript as $ } from "../utils.js";
@@ -10,7 +10,7 @@ import L from "../../../lib/ui/uikit/dist/components/PlSidebar/PlSidebarGroup.vu
 import { useConfirm as z } from "../../../lib/ui/uikit/dist/composition/useConfirm.js";
 const O = /* @__PURE__ */ I({
   __name: "PlAnnotationsModal",
-  props: /* @__PURE__ */ A({
+  props: /* @__PURE__ */ F({
     columns: {},
     hasSelectedColumns: { type: Boolean },
     getValuesForSelectedColumns: { type: Function }
@@ -22,7 +22,7 @@ const O = /* @__PURE__ */ I({
   }),
   emits: ["update:annotation", "update:opened"],
   setup(m) {
-    const e = S(m, "annotation"), n = S(m, "opened"), s = m, a = F(void 0), r = u(() => g(a.value) || g(e.value) ? void 0 : e.value.steps.find((t) => t.id === a.value)), c = u(() => e.value.isCreated === !0), v = u({
+    const e = S(m, "annotation"), n = S(m, "opened"), s = m, a = A(void 0), r = u(() => g(a.value) || g(e.value) ? void 0 : e.value.steps.find((t) => t.id === a.value)), c = u(() => e.value.isCreated === !0), v = u({
       get: () => !c.value && n.value,
       set: (t) => n.value = t
     }), f = u({

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

@@ -1,6 +1,6 @@
-import { ColorMap } from './types';
+import { HighlightLegend } from './types';
 type __VLS_Props = {
-    colors: ColorMap;
+    legend: HighlightLegend;
 };
 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, {}, HTMLDivElement>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/Legend.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,CAAC;;AAuDF,wBAOG"}
+{"version":3,"file":"Legend.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/Legend.vue"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;;AAuDF,wBAOG"}

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

@@ -1,22 +1,22 @@
-import { defineComponent as a, createElementBlock as r, openBlock as l, normalizeClass as o, Fragment as c, renderList as i, createElementVNode as m, createTextVNode as p, normalizeStyle as d, toDisplayString as u } from "vue";
+import { defineComponent as a, createElementBlock as l, openBlock as n, normalizeClass as r, Fragment as i, renderList as c, createElementVNode as d, createTextVNode as m, normalizeStyle as p, toDisplayString as u } from "vue";
 const _ = /* @__PURE__ */ a({
   __name: "Legend",
   props: {
-    colors: {}
+    legend: {}
   },
-  setup(y) {
-    return (e, f) => (l(), r("div", {
-      class: o(e.$style.container)
+  setup(g) {
+    return (e, y) => (n(), l("div", {
+      class: r(e.$style.container)
     }, [
-      (l(!0), r(c, null, i(Object.entries(e.colors), ([t, { label: n, color: s }]) => (l(), r("div", {
+      (n(!0), l(i, null, c(Object.entries(e.legend), ([t, { label: o, color: s }]) => (n(), l("div", {
         key: t,
-        class: o(e.$style.item)
+        class: r(e.$style.item)
       }, [
-        m("div", {
-          class: o(e.$style["color-sample"]),
-          style: d({ backgroundColor: s })
+        d("div", {
+          class: r(e.$style["color-sample"]),
+          style: p({ backgroundColor: s })
         }, null, 6),
-        p(" " + u(n), 1)
+        m(" " + u(o), 1)
       ], 2))), 128))
     ], 2));
   }

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

@@ -1,12 +1,12 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1fynp_2{display:flex;flex-wrap:wrap;gap:12px}._item_1fynp_8{display:flex;gap:4px}._color-sample_1fynp_13{display:inline-block;block-size:18px;inline-size:18px;border-radius:3px}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-const n = "_container_1fynp_2", t = "_item_1fynp_8", e = {
-  container: n,
-  item: t,
-  "color-sample": "_color-sample_1fynp_13"
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_157gs_2{display:flex;flex-wrap:wrap;gap:12px;max-inline-size:fit-content}._item_157gs_9{display:flex;gap:4px}._color-sample_157gs_14{display:inline-block;block-size:18px;inline-size:18px;border-radius:3px}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+const t = "_container_157gs_2", e = "_item_157gs_9", o = {
+  container: t,
+  item: e,
+  "color-sample": "_color-sample_157gs_14"
 };
 export {
-  n as container,
-  e as default,
-  t as item
+  t as container,
+  o as default,
+  e as item
 };
 //# sourceMappingURL=Legend.vue3.js.map

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

@@ -1,13 +1,19 @@
-import { ResidueCounts } from './types';
+import { HighlightLegend, ResidueCounts } from './types';
 type __VLS_Props = {
-    sequenceNames: string[];
     sequences: string[];
+    sequenceNames: string[];
     labelRows: string[][];
     residueCounts: ResidueCounts;
-    highlightImageBlob: Blob | undefined;
-    consensus: boolean;
-    seqLogo: boolean;
+    highlightImage: {
+        blob: Blob;
+        legend: HighlightLegend;
+    } | undefined;
+    widgets: ('consensus' | 'seqLogo' | 'legend')[];
 };
-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, {}, HTMLDivElement>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=MultiSequenceAlignmentView.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSequenceAlignmentView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"names":[],"mappings":"AA8IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,KAAK,WAAW,GAAG;IACjB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE,IAAI,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;;AAkIF,wBAOG"}
+{"version":3,"file":"MultiSequenceAlignmentView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"names":[],"mappings":"AAmKA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE9D,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE;QACd,IAAI,EAAE,IAAI,CAAC;QACX,MAAM,EAAE,eAAe,CAAC;KACzB,GAAG,SAAS,CAAC;IACd,OAAO,EAAE,CAAC,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;CACjD,CAAC;;;;;;AAqJF,wBASG"}

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

@@ -1,83 +1,98 @@
-import { defineComponent as B, useCssVars as $, computed as p, createElementBlock as l, openBlock as s, normalizeClass as u, createElementVNode as a, createCommentVNode as c, createBlock as h, Fragment as o, renderList as i, normalizeStyle as q, toDisplayString as m } from "vue";
-import { useBase64 as f } from "../../node_modules/.pnpm/@vueuse_core@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
-import C from "./Consensus.vue.js";
-import N from "./SeqLogo.vue.js";
-const V = /* @__PURE__ */ B({
+import { defineComponent as I, useCssVars as R, computed as v, useTemplateRef as N, createElementBlock as l, openBlock as s, normalizeClass as n, createElementVNode as r, createBlock as g, createCommentVNode as a, Fragment as o, renderList as d, normalizeStyle as q, toDisplayString as m } from "vue";
+import { useObjectUrl as L } from "../../node_modules/.pnpm/@vueuse_core@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
+import S from "./Consensus.vue.js";
+import V from "./Legend.vue.js";
+import z from "./SeqLogo.vue.js";
+const A = /* @__PURE__ */ I({
   __name: "MultiSequenceAlignmentView",
   props: {
-    sequenceNames: {},
     sequences: {},
+    sequenceNames: {},
     labelRows: {},
     residueCounts: {},
-    highlightImageBlob: {},
-    consensus: { type: Boolean },
-    seqLogo: { type: Boolean }
+    highlightImage: {},
+    widgets: {}
   },
-  setup(d) {
-    $((e) => ({
-      "10a70bbb": v.value
+  setup(c, { expose: k }) {
+    R((e) => ({
+      "3cff4522": C.value
     }));
-    const { base64: g } = f(() => d.highlightImageBlob), v = p(
-      () => g.value ? `url('${g.value}')` : "none"
-    ), b = p(
+    const b = N("rootRef");
+    k({ rootEl: b });
+    const h = L(() => {
+      var e;
+      return (e = c.highlightImage) == null ? void 0 : e.blob;
+    }), C = v(
+      () => h.value ? `url('${h.value}')` : "none"
+    ), $ = v(
       () => {
         var e;
-        return (e = d.sequences.at(0)) == null ? void 0 : e.split(" ").map(({ length: y }) => y);
+        return (e = c.sequences.at(0)) == null ? void 0 : e.split(" ").map(({ length: p }) => p);
       }
     );
-    return (e, y) => (s(), l("div", {
-      class: u(["pl-scrollable", e.$style.root])
-    }, [
-      a("div", {
-        class: u(e.$style.corner)
-      }, null, 2),
-      a("div", {
-        class: u(e.$style.header)
+    return (e, p) => {
+      var y, f;
+      return s(), l("div", {
+        ref: "rootRef",
+        class: n(e.$style.root)
       }, [
-        e.sequenceNames.length > 1 ? (s(), l("div", {
-          key: 0,
-          class: u(e.$style["sequence-names"])
+        r("div", {
+          class: n(["pl-scrollable", e.$style.table])
         }, [
-          (s(!0), l(o, null, i(e.sequenceNames, (t, n) => {
-            var r;
-            return s(), l("span", {
-              key: n,
-              style: q(
-                {
-                  inlineSize: `calc(${((r = b.value) == null ? void 0 : r.at(n)) ?? 0} * 20px)`
-                }
-              )
-            }, m(t), 5);
-          }), 128))
-        ], 2)) : c("", !0),
-        e.consensus ? (s(), h(C, {
-          key: 1,
-          "residue-counts": e.residueCounts
-        }, null, 8, ["residue-counts"])) : c("", !0),
-        e.seqLogo ? (s(), h(N, {
-          key: 2,
-          "residue-counts": e.residueCounts
-        }, null, 8, ["residue-counts"])) : c("", !0)
-      ], 2),
-      a("div", {
-        class: u(e.$style.labels)
-      }, [
-        (s(!0), l(o, null, i(e.labelRows, (t, n) => (s(), l(o, null, [
-          (s(!0), l(o, null, i(t, (r, k) => (s(), l("div", {
-            key: k,
-            style: q({ gridRow: n + 1 })
-          }, m(r), 5))), 128))
-        ], 64))), 256))
-      ], 2),
-      a("div", {
-        class: u(e.$style.sequences)
-      }, [
-        (s(!0), l(o, null, i(e.sequences, (t, n) => (s(), l("div", { key: n }, m(t), 1))), 128))
-      ], 2)
-    ], 2));
+          r("div", {
+            class: n(e.$style.corner)
+          }, null, 2),
+          r("div", {
+            class: n(e.$style.header)
+          }, [
+            e.sequenceNames.length > 1 ? (s(), l("div", {
+              key: 0,
+              class: n(e.$style["sequence-names"])
+            }, [
+              (s(!0), l(o, null, d(e.sequenceNames, (u, t) => {
+                var i;
+                return s(), l("span", {
+                  key: t,
+                  style: q({
+                    inlineSize: (((i = $.value) == null ? void 0 : i.at(t)) ?? 0) * 20 + "px"
+                  })
+                }, m(u), 5);
+              }), 128))
+            ], 2)) : a("", !0),
+            e.widgets.includes("consensus") ? (s(), g(S, {
+              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),
+          r("div", {
+            class: n(e.$style.labels)
+          }, [
+            (s(!0), l(o, null, d(e.labelRows, (u, t) => (s(), l(o, null, [
+              (s(!0), l(o, null, d(u, (i, w) => (s(), l("div", {
+                key: w,
+                style: q({ gridRow: t + 1 })
+              }, m(i), 5))), 128))
+            ], 64))), 256))
+          ], 2),
+          r("div", {
+            class: n(e.$style.sequences)
+          }, [
+            (s(!0), l(o, null, d(e.sequences, (u, t) => (s(), l("div", { key: t }, m(u), 1))), 128))
+          ], 2)
+        ], 2),
+        (y = e.widgets) != null && y.includes("legend") && ((f = e.highlightImage) != null && f.legend) ? (s(), g(V, {
+          key: 0,
+          legend: e.highlightImage.legend
+        }, null, 8, ["legend"])) : a("", !0)
+      ], 2);
+    };
   }
 });
 export {
-  V as default
+  A 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 { useBase64 } from '@vueuse/core';\nimport { computed } from 'vue';\nimport Consensus from './Consensus.vue';\nimport SeqLogo from './SeqLogo.vue';\nimport type { ResidueCounts } from './types';\n\nconst { sequences, highlightImageBlob } = defineProps<{\n  sequenceNames: string[];\n  sequences: string[];\n  labelRows: string[][];\n  residueCounts: ResidueCounts;\n  highlightImageBlob: Blob | undefined;\n  consensus: boolean;\n  seqLogo: boolean;\n}>();\n\nconst { base64: highlightImageBase64 } = useBase64(() => highlightImageBlob);\n\nconst highlightImageUrl = computed(() =>\n  highlightImageBase64.value\n    ? `url('${highlightImageBase64.value}')`\n    : 'none',\n);\n\nconst sequenceLengths = computed(() =>\n  sequences.at(0)?.split(' ').map(({ length }) => length),\n);\n</script>\n\n<template>\n  <div :class=\"['pl-scrollable', $style.root]\">\n    <div :class=\"$style.corner\" />\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            {\n              inlineSize: `calc(${\n                sequenceLengths?.at(index) ?? 0\n              } * 20px)`,\n            }\n          \"\n        >{{ name }}</span>\n      </div>\n      <Consensus v-if=\"consensus\" :residue-counts />\n      <SeqLogo v-if=\"seqLogo\" :residue-counts />\n    </div>\n    <div :class=\"$style.labels\">\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 :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</template>\n\n<style module>\n.root {\n  display: grid;\n  grid-template-areas:\n    \"corner header\"\n    \"labels sequences\";\n  text-wrap: nowrap;\n  justify-content: start;\n}\n\n.corner {\n  grid-area: corner;\n  background-color: white;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  z-index: 2;\n}\n\n.header {\n  grid-area: header;\n  background-color: white;\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  display: grid;\n  grid-auto-flow: dense;\n  column-gap: 12px;\n  background-color: white;\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  padding-inline-end: 12px;\n  font-family: Spline Sans Mono;\n  line-height: 24px;\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  background-image: v-bind(highlightImageUrl);\n  background-repeat: no-repeat;\n  background-size: calc(100% - 5.8px) 100%;\n  image-rendering: pixelated;\n}\n</style>\n"],"names":["highlightImageBase64","useBase64","__props","highlightImageUrl","computed","sequenceLengths","_a","length"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,UAAM,EAAE,QAAQA,EAAA,IAAyBC,EAAU,MAAMC,EAAA,kBAAkB,GAErEC,IAAoBC;AAAA,MAAS,MACjCJ,EAAqB,QACjB,QAAQA,EAAqB,KAAK,OAClC;AAAA,IACN,GAEMK,IAAkBD;AAAA,MAAS,MAAA;;AAC/B,gBAAAE,IAAAJ,YAAU,GAAG,CAAC,MAAd,gBAAAI,EAAiB,MAAM,KAAK,IAAI,CAAC,EAAE,QAAAC,QAAaA;AAAA;AAAA,IAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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.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        <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 :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\n.table {\n  display: grid;\n  grid-template-areas:\n    \"corner header\"\n    \"labels sequences\";\n  text-wrap: nowrap;\n  justify-content: start;\n  @media print {\n    overflow: visible;\n  }\n}\n\n.corner {\n  grid-area: corner;\n  background-color: white;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  z-index: 2;\n}\n\n.header {\n  grid-area: header;\n  background-color: white;\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  display: grid;\n  grid-auto-flow: dense;\n  column-gap: 12px;\n  background-color: white;\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  padding-inline-end: 12px;\n  font-family: Spline Sans Mono;\n  line-height: 24px;\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</style>\n"],"names":["rootEl","useTemplateRef","__expose","highlightImageObjectUrl","useObjectUrl","_a","__props","highlightImageCssUrl","computed","sequenceLengths","length"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBM,UAAAA,IAASC,EAAe,SAAS;AAC1B,IAAAC,EAAA,EAAE,QAAAF,GAAQ;AAEvB,UAAMG,IAA0BC,EAAa,MAAM;;AAAA,cAAAC,IAAAC,EAAA,mBAAA,gBAAAD,EAAgB;AAAA,KAAI,GACjEE,IAAuBC;AAAA,MAAS,MACpCL,EAAwB,QACpB,QAAQA,EAAwB,KAAK,OACrC;AAAA,IACN,GAEMM,IAAkBD;AAAA,MAAS,MAAA;;AAC/B,gBAAAH,IAAAC,YAAU,GAAG,CAAC,MAAd,gBAAAD,EAAiB,MAAM,KAAK,IAAI,CAAC,EAAE,QAAAK,QAAaA;AAAA;AAAA,IAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,18 +1,20 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._root_1uteo_2{display:grid;grid-template-areas:"corner header" "labels sequences";text-wrap:nowrap;justify-content:start}._corner_1uteo_11{grid-area:corner;background-color:#fff;position:sticky;inset-inline-start:0;inset-block-start:0;z-index:2}._header_1uteo_20{grid-area:header;background-color:#fff;position:sticky;inset-block-start:0;z-index:1}._sequence-names_1uteo_28{display:flex;font-weight:700;line-height:20px;margin-block-end:4px;gap:20px}._labels_1uteo_36{grid-area:labels;display:grid;grid-auto-flow:dense;column-gap:12px;background-color:#fff;position:sticky;inset-inline-start:0;z-index:1;padding-inline-end:12px;font-family:Spline Sans Mono;line-height:24px}._sequences_1uteo_50{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;background-image:var(--10a70bbb);background-repeat:no-repeat;background-size:calc(100% - 5.8px) 100%;image-rendering:pixelated}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-const e = "_root_1uteo_2", o = "_corner_1uteo_11", s = "_header_1uteo_20", t = "_labels_1uteo_36", _ = "_sequences_1uteo_50", n = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._root_cgj1q_2{display:flex;flex-direction:column;gap:12px;min-block-size:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}._table_cgj1q_11{display:grid;grid-template-areas:"corner header" "labels sequences";text-wrap:nowrap;justify-content:start}@media print{._table_cgj1q_11{overflow:visible}}._corner_cgj1q_23{grid-area:corner;background-color:#fff;position:sticky;inset-inline-start:0;inset-block-start:0;z-index:2}._header_cgj1q_32{grid-area:header;background-color:#fff;position:sticky;inset-block-start:0;z-index:1}._sequence-names_cgj1q_40{display:flex;font-weight:700;line-height:20px;margin-block-end:4px;gap:20px}._labels_cgj1q_48{grid-area:labels;display:grid;grid-auto-flow:dense;column-gap:12px;background-color:#fff;position:sticky;inset-inline-start:0;z-index:1;padding-inline-end:12px;font-family:Spline Sans Mono;line-height:24px}._sequences_cgj1q_62{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(--3cff4522);background-repeat:no-repeat;background-size:calc(100% - 5.8px) 100%}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+const e = "_root_cgj1q_2", c = "_table_cgj1q_11", s = "_corner_cgj1q_23", _ = "_header_cgj1q_32", n = "_labels_cgj1q_48", o = "_sequences_cgj1q_62", t = {
   root: e,
-  corner: o,
-  header: s,
-  "sequence-names": "_sequence-names_1uteo_28",
-  labels: t,
-  sequences: _
+  table: c,
+  corner: s,
+  header: _,
+  "sequence-names": "_sequence-names_cgj1q_40",
+  labels: n,
+  sequences: o
 };
 export {
-  o as corner,
-  n as default,
-  s as header,
-  t as labels,
+  s as corner,
+  t as default,
+  _ as header,
+  n as labels,
   e as root,
-  _ as sequences
+  o as sequences,
+  c 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/PlMultiSequenceAlignment.vue.d.ts

@@ -24,6 +24,41 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "update:modelValue": (value: PlMultiSequenceAlignmentModel) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: PlMultiSequenceAlignmentModel) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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")[];
+    }> & 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;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        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")[];
+    }> & Readonly<{}>, {
+        rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+    }, {}, {}, {}, {}> | null;
+}, any>;
 export default _default;
 //# sourceMappingURL=PlMultiSequenceAlignment.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlMultiSequenceAlignment.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue"],"names":[],"mappings":"AAoQA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EAEZ,6BAA6B,EAE7B,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAyB9B,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,uBAAuB,EAAE,gBAAgB,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CACvC,CAAC;AAmIF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,6BAA6B,CAAC;CAC1C,GAAG,WAAW,CAAC;;;;;;AAyLhB,wBAOG"}
+{"version":3,"file":"PlMultiSequenceAlignment.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue"],"names":[],"mappings":"AAuTA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAEjB,KAAK,6BAA6B,EAElC,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AA8B9B,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,uBAAuB,EAAE,gBAAgB,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CACvC,CAAC;AAwLF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,6BAA6B,CAAC;CAC1C,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkLhB,wBAQG"}