@platforma-sdk/ui-vue 1.41.19 → 1.42.1

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"}

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

@@ -1,17 +1,17 @@
-import { defineComponent as R, mergeModels as J, useModel as U, onBeforeMount as $, reactive as d, computed as v, watchEffect as x, createElementBlock as w, openBlock as m, Fragment as S, createVNode as M, createBlock as h, unref as a, withCtx as q, createTextVNode as F, toDisplayString as C, createCommentVNode as O, normalizeClass as G } from "vue";
-import { isJsonEqual as b } from "../../lib/util/helpers/dist/index.js";
+import { defineComponent as L, mergeModels as U, useModel as J, onBeforeMount as G, reactive as g, computed as R, watchEffect as N, useTemplateRef as H, createElementBlock as T, openBlock as f, Fragment as V, createVNode as j, createBlock as S, unref as i, withCtx as b, createTextVNode as k, toDisplayString as q, createCommentVNode as A, normalizeClass as K } from "vue";
+import { isJsonEqual as I } from "../../lib/util/helpers/dist/index.js";
 import "../../lib/ui/uikit/dist/index.js";
-import { useSequenceColumnsOptions as H, useLabelColumnsOptions as K, useMarkupColumnsOptions as Q, useMultipleAlignmentData as W, sequenceLimit as z } from "./data.js";
-import X from "./Legend.vue.js";
-import { runMigrations as Y } from "./migrations.js";
-import Z from "./MultiSequenceAlignmentView.vue.js";
+import { getRawPlatformaInstance as Q } from "../../sdk/model/dist/index.js";
+import { useSequenceColumnsOptions as W, useLabelColumnsOptions as X, useMarkupColumnsOptions as Y, useMultipleAlignmentData as Z, sequenceLimit as B } from "./data.js";
+import { runMigrations as ee } from "./migrations.js";
+import te from "./MultiSequenceAlignmentView.vue.js";
 import { defaultSettings as D } from "./settings.js";
-import ee from "./Toolbar.vue.js";
+import oe from "./Toolbar.vue.js";
 import P from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
-import oe from "../../lib/ui/uikit/dist/components/PlSplash/PlSplash.vue.js";
-const pe = /* @__PURE__ */ R({
+import ne from "../../lib/ui/uikit/dist/components/PlSplash/PlSplash.vue.js";
+const ge = /* @__PURE__ */ L({
   __name: "PlMultiSequenceAlignment",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ U({
     pFrame: {},
     sequenceColumnPredicate: { type: Function },
     selection: {}
@@ -20,36 +20,30 @@ const pe = /* @__PURE__ */ R({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(V) {
-    const p = U(V, "modelValue");
-    $(() => {
-      Y(p);
+  setup(x) {
+    const h = J(x, "modelValue");
+    G(() => {
+      ee(h);
     });
-    const e = d({
+    const o = g({
       ...D
-    }), i = V, g = d(H(() => ({
-      pFrame: i.pFrame,
-      sequenceColumnPredicate: i.sequenceColumnPredicate
-    }))), f = d(K(() => ({
-      pFrame: i.pFrame,
-      sequenceColumnIds: e.sequenceColumnIds
-    }))), I = d(Q(() => ({
-      pFrame: i.pFrame,
-      sequenceColumnIds: e.sequenceColumnIds
-    }))), y = v(
-      () => {
-        var o;
-        return ((o = e.colorScheme) == null ? void 0 : o.type) === "markup" ? e.colorScheme.columnId : void 0;
-      }
-    ), s = d(W(() => ({
-      pframe: i.pFrame,
-      sequenceColumnIds: e.sequenceColumnIds,
-      labelColumnIds: e.labelColumnIds,
-      markupColumnId: y.value,
-      selection: i.selection,
-      colorScheme: e.colorScheme,
-      alignmentParams: e.alignmentParams
-    }))), k = new Intl.NumberFormat("en").format, T = v(
+    }), c = x, C = g(W(() => ({
+      pFrame: c.pFrame,
+      sequenceColumnPredicate: c.sequenceColumnPredicate
+    }))), y = g(X(() => ({
+      pFrame: c.pFrame,
+      sequenceColumnIds: o.sequenceColumnIds
+    }))), v = g(Y(() => ({
+      pFrame: c.pFrame,
+      sequenceColumnIds: o.sequenceColumnIds
+    }))), l = g(Z(() => ({
+      pframe: c.pFrame,
+      sequenceColumnIds: o.sequenceColumnIds,
+      labelColumnIds: o.labelColumnIds,
+      selection: c.selection,
+      colorScheme: o.colorScheme,
+      alignmentParams: o.alignmentParams
+    }))), w = new Intl.NumberFormat("en").format, _ = R(
       () => [
         {
           label: "Chemical Properties",
@@ -59,122 +53,163 @@ const pe = /* @__PURE__ */ R({
           label: "No Color",
           value: { type: "no-color" }
         },
-        ...(I.data ?? []).map(({ label: o, value: n }) => ({
-          label: o,
+        ...(v.data ?? []).map(({ label: t, value: n }) => ({
+          label: t,
           value: {
             type: "markup",
             columnId: n
           }
         }))
       ]
-    ), L = v(
-      () => g.error ?? f.error ?? I.error ?? s.error
+    ), O = R(
+      () => C.error ?? y.error ?? v.error ?? l.error
     );
-    function N(o) {
-      p.value = Object.fromEntries(
-        Object.entries({ ...p.value, ...o }).filter(([n, l]) => l !== void 0)
+    function E(t) {
+      h.value = Object.fromEntries(
+        Object.entries({ ...h.value, ...t }).filter(([n, e]) => e !== void 0)
       );
     }
-    return x(() => {
-      var n, l;
-      const o = Object.fromEntries(
+    N(() => {
+      var n, e;
+      const t = Object.fromEntries(
         Object.entries({
           ...D,
-          sequenceColumnIds: (n = g.data) == null ? void 0 : n.defaults,
-          labelColumnIds: (l = f.data) == null ? void 0 : l.defaults,
-          ...p.value
+          sequenceColumnIds: (n = C.data) == null ? void 0 : n.defaults,
+          labelColumnIds: (e = y.data) == null ? void 0 : e.defaults,
+          ...h.value
         }).filter(
-          ([r, t]) => !b(
-            e[r],
-            t
+          ([a, r]) => !I(
+            o[a],
+            r
           )
         )
       );
-      Object.assign(e, o);
-    }), x(() => {
-      var n, l, r;
-      const o = [];
-      (n = e.sequenceColumnIds) != null && n.some(
-        (t) => {
+      Object.assign(o, t);
+    }), N(() => {
+      var e, a, r, m;
+      const t = [];
+      (e = o.sequenceColumnIds) != null && e.some(
+        (s) => {
           var u;
-          return !((u = g.data) != null && u.options.some(
-            ({ value: c }) => b(c, t)
+          return !((u = C.data) != null && u.options.some(
+            ({ value: d }) => I(d, s)
           ));
         }
-      ) && o.push("sequenceColumnIds"), (l = e.labelColumnIds) != null && l.some(
-        (t) => {
+      ) && t.push("sequenceColumnIds"), (a = o.labelColumnIds) != null && a.some(
+        (s) => {
           var u;
-          return !((u = f.data) != null && u.options.some(
-            ({ value: c }) => b(c, t)
+          return !((u = y.data) != null && u.options.some(
+            ({ value: d }) => I(d, s)
           ));
         }
-      ) && o.push("labelColumnIds"), y.value && !((r = I.data) != null && r.some(
-        ({ value: t }) => b(t, y.value)
-      )) && o.push("colorScheme"), o.length && N(Object.fromEntries(
-        o.map((t) => [t, void 0])
+      ) && t.push("labelColumnIds");
+      const n = ((r = o.colorScheme) == null ? void 0 : r.type) === "markup" ? o.colorScheme.columnId : void 0;
+      n && !((m = v.data) != null && m.some(
+        ({ value: s }) => I(s, n)
+      )) && t.push("colorScheme"), t.length && E(Object.fromEntries(
+        t.map((s) => [s, void 0])
       ));
-    }), (o, n) => {
-      var l, r, t, u;
-      return m(), w(S, null, [
-        M(ee, {
-          settings: e,
-          "sequence-column-options": (l = g.data) == null ? void 0 : l.options,
-          "label-column-options": (r = f.data) == null ? void 0 : r.options,
-          "color-scheme-options": T.value,
-          onUpdateSettings: N
+    });
+    const $ = H("msa");
+    async function z() {
+      var d, F, M;
+      const t = (F = (d = Q()) == null ? void 0 : d.lsDriver) == null ? void 0 : F.exportToPdf;
+      if (!t)
+        return console.error(
+          "API getPlatformaRawInstance().lsDriver.exportToPdf is not available"
+        );
+      const n = (M = $.value) == null ? void 0 : M.rootEl;
+      if (!n)
+        throw new Error("MSA element is not available.");
+      const e = document.createElement("div");
+      e.id = `print-target-${crypto.randomUUID()}`;
+      const a = new CSSStyleSheet();
+      document.adoptedStyleSheets.push(a), a.insertRule(`
+@media screen {
+  #${e.id} {
+    visibility: hidden;
+    position: fixed;
+  }
+}`), e.replaceChildren(n.cloneNode(!0)), document.body.appendChild(e);
+      const { height: r, width: m } = e.getBoundingClientRect(), s = CSS.cm(1), u = [m, r].map((p) => CSS.px(p).add(s.mul(2))).join(" ");
+      a.insertRule(`
+@media print {
+  @page {
+    size: ${u};
+    margin: ${s};
+  }
+  body > :not(#${e.id}) {
+    display: none;
+  }
+}`);
+      try {
+        await t();
+      } catch (p) {
+        console.error(p);
+      } finally {
+        document.body.removeChild(e);
+        const p = document.adoptedStyleSheets.indexOf(a);
+        p >= 0 && document.adoptedStyleSheets.splice(p, 1);
+      }
+    }
+    return (t, n) => {
+      var e, a, r, m;
+      return f(), T(V, null, [
+        j(oe, {
+          settings: o,
+          "sequence-column-options": (e = C.data) == null ? void 0 : e.options,
+          "label-column-options": (a = y.data) == null ? void 0 : a.options,
+          "color-scheme-options": _.value,
+          onUpdateSettings: E,
+          onExport: z
         }, null, 8, ["settings", "sequence-column-options", "label-column-options", "color-scheme-options"]),
-        L.value ? (m(), h(a(P), {
+        O.value ? (f(), S(i(P), {
           key: 0,
           type: "error"
         }, {
-          default: q(() => [
-            F(C(L.value), 1)
+          default: b(() => [
+            k(q(O.value), 1)
           ]),
           _: 1
-        })) : !s.isLoading && (((t = s.data) == null ? void 0 : t.sequences) ?? []).length < 2 ? (m(), h(a(P), {
+        })) : !l.isLoading && (((r = l.data) == null ? void 0 : r.sequences) ?? []).length < 2 ? (f(), S(i(P), {
           key: 1,
           type: "warn",
           icon: ""
         }, {
-          default: q(() => n[0] || (n[0] = [
-            F(" Please select at least one sequence column and two or more rows to run alignment ")
+          default: b(() => n[0] || (n[0] = [
+            k(" Please select at least one sequence column and two or more rows to run alignment ")
           ])),
           _: 1
-        })) : (m(), w(S, { key: 2 }, [
-          (u = s.data) != null && u.exceedsLimit ? (m(), h(a(P), {
+        })) : (f(), T(V, { key: 2 }, [
+          (m = l.data) != null && m.exceedsLimit ? (f(), S(i(P), {
             key: 0,
             type: "warn",
             icon: "",
             label: "Visualization is limited"
           }, {
-            default: q(() => [
-              F(" MSA visualization supports " + C(a(k)(2)) + " to " + C(a(k)(a(z))) + " sequences. Only the first " + C(a(k)(a(z))) + " will be displayed. ", 1)
+            default: b(() => [
+              k(" MSA visualization supports " + q(i(w)(2)) + " to " + q(i(w)(i(B))) + " sequences. Only the first " + q(i(w)(i(B))) + " will be displayed. ", 1)
             ]),
             _: 1
-          })) : O("", !0),
-          M(a(oe), {
+          })) : A("", !0),
+          j(i(ne), {
             type: "transparent",
-            class: G(o.$style.splash),
-            loading: s.isLoading
+            class: K(t.$style.splash),
+            loading: l.isLoading
           }, {
-            default: q(() => {
-              var c, j, E, _, A, B;
+            default: b(() => {
+              var s;
               return [
-                (c = s.data) != null && c.sequences.length ? (m(), w(S, { key: 0 }, [
-                  M(Z, {
-                    "sequence-names": s.data.sequenceNames,
-                    sequences: s.data.sequences,
-                    "label-rows": s.data.labelsRows,
-                    "residue-counts": s.data.residueCounts,
-                    "highlight-image-blob": (j = s.data.highlightImage) == null ? void 0 : j.blob,
-                    consensus: ((E = e.widgets) == null ? void 0 : E.includes("consensus")) ?? !1,
-                    "seq-logo": ((_ = e.widgets) == null ? void 0 : _.includes("seqLogo")) ?? !1
-                  }, null, 8, ["sequence-names", "sequences", "label-rows", "residue-counts", "highlight-image-blob", "consensus", "seq-logo"]),
-                  (A = e.widgets) != null && A.includes("legend") && ((B = s.data.highlightImage) != null && B.colorMap) ? (m(), h(X, {
-                    key: 0,
-                    colors: s.data.highlightImage.colorMap
-                  }, null, 8, ["colors"])) : O("", !0)
-                ], 64)) : O("", !0)
+                (s = l.data) != null && s.sequences.length ? (f(), S(te, {
+                  key: 0,
+                  ref: "msa",
+                  sequences: l.data.sequences,
+                  "sequence-names": l.data.sequenceNames,
+                  "label-rows": l.data.labelRows,
+                  "residue-counts": l.data.residueCounts,
+                  "highlight-image": l.data.highlightImage,
+                  widgets: o.widgets
+                }, null, 8, ["sequences", "sequence-names", "label-rows", "residue-counts", "highlight-image", "widgets"])) : A("", !0)
               ];
             }),
             _: 1
@@ -185,6 +220,6 @@ const pe = /* @__PURE__ */ R({
   }
 });
 export {
-  pe as default
+  ge as default
 };
 //# sourceMappingURL=PlMultiSequenceAlignment.vue2.js.map