@platforma-sdk/ui-vue 1.42.53 → 1.43.0

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

@@ -1,5 +1,127 @@
-import f from "./SeqLogo.vue.js";
+import { defineComponent as C, useCssModule as w, useTemplateRef as E, computed as f, shallowRef as x, watchEffect as D, onBeforeUnmount as _, createBlock as K, createElementBlock as B, unref as l, openBlock as d, withCtx as A, createTextVNode as G, toDisplayString as S, normalizeClass as T } from "vue";
+import { PlAlert as L } from "@milaboratories/uikit";
+import { cellSize as N } from "./cell-size.js";
+import { useMiPlots as P } from "./useMiPlots.js";
+const R = /* @__PURE__ */ C({
+  __name: "SeqLogo",
+  props: {
+    residueCounts: {}
+  },
+  setup(y) {
+    const u = y, g = w(), n = E("plotEl"), e = {
+      blue: "#549EE7",
+      red: "#E85456",
+      green: "#65BF65",
+      magenta: "#9178E1",
+      pink: "#D568D5",
+      orange: "#C59445",
+      cyan: "#62C7CC",
+      yellow: "#D5D549",
+      black: "#000000"
+    }, h = {
+      A: e.blue,
+      R: e.red,
+      N: e.green,
+      D: e.magenta,
+      C: e.pink,
+      Q: e.green,
+      E: e.magenta,
+      G: e.orange,
+      H: e.cyan,
+      I: e.blue,
+      L: e.blue,
+      K: e.red,
+      M: e.blue,
+      F: e.blue,
+      P: e.yellow,
+      S: e.green,
+      T: e.green,
+      W: e.blue,
+      Y: e.cyan,
+      V: e.blue,
+      B: e.black,
+      X: e.black,
+      Z: e.black
+    }, r = f(() => ({
+      type: "discrete",
+      title: {
+        name: "",
+        show: !1
+      },
+      size: {
+        width: u.residueCounts.length * N.inline,
+        height: 80,
+        innerOffset: 0,
+        outerOffset: 0
+      },
+      frame: {
+        type: "empty"
+      },
+      xAxis: {
+        title: "",
+        showGrid: !1,
+        showTicks: !1,
+        hiddenLabels: !0
+      },
+      yAxis: {
+        title: "",
+        showGrid: !1,
+        showTicks: !1,
+        hiddenLabels: !0
+      },
+      y: {
+        type: "column",
+        value: "countKey"
+      },
+      primaryGrouping: {
+        columnName: {
+          type: "column",
+          value: "columnKey"
+        }
+      },
+      secondaryGrouping: {
+        columnName: {
+          type: "column",
+          value: "residueKey"
+        }
+      },
+      layers: [{
+        type: "logo",
+        aes: { fillColor: h }
+      }]
+    })), a = f(() => {
+      const t = [], s = [], m = [];
+      for (const [v, b] of u.residueCounts.entries())
+        for (const [p, k] of Object.entries(b))
+          p !== "-" && (t.push(k), s.push(v), m.push(p));
+      return {
+        type: "columns",
+        id: `seq-logo-${crypto.randomUUID()}`,
+        values: { countKey: t, columnKey: s, residueKey: m }
+      };
+    }), { miplots: c, error: i } = P(), o = x();
+    return D(async () => {
+      !n.value || !c.value || (o.value ? o.value.updateSettingsAndData(a.value, r.value) : (o.value = c.value.newPlot(a.value, r.value), o.value.mount(n.value)));
+    }), _(() => {
+      var t;
+      (t = o.value) == null || t.unmount();
+    }), (t, s) => l(i) ? (d(), K(l(L), {
+      key: 0,
+      type: "error"
+    }, {
+      default: A(() => [
+        G(S(l(i).message), 1)
+      ]),
+      _: 1
+    })) : (d(), B("div", {
+      key: 1,
+      ref_key: "plotEl",
+      ref: n,
+      class: T(l(g).container)
+    }, null, 2));
+  }
+});
 export {
-  f as default
+  R as default
 };
 //# sourceMappingURL=SeqLogo.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SeqLogo.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"SeqLogo.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/SeqLogo.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 { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst props = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\n\nconst classes = useCssModule();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst palette = {\n  blue: '#549EE7',\n  red: '#E85456',\n  green: '#65BF65',\n  magenta: '#9178E1',\n  pink: '#D568D5',\n  orange: '#C59445',\n  cyan: '#62C7CC',\n  yellow: '#D5D549',\n  black: '#000000',\n};\n\nconst residueColors = {\n  A: palette.blue,\n  R: palette.red,\n  N: palette.green,\n  D: palette.magenta,\n  C: palette.pink,\n  Q: palette.green,\n  E: palette.magenta,\n  G: palette.orange,\n  H: palette.cyan,\n  I: palette.blue,\n  L: palette.blue,\n  K: palette.red,\n  M: palette.blue,\n  F: palette.blue,\n  P: palette.yellow,\n  S: palette.green,\n  T: palette.green,\n  W: palette.blue,\n  Y: palette.cyan,\n  V: palette.blue,\n  B: palette.black,\n  X: palette.black,\n  Z: palette.black,\n};\n\nconst settings = computed(() => ({\n  type: 'discrete',\n  title: {\n    name: '',\n    show: false,\n  },\n  size: {\n    width: props.residueCounts.length * cellSize.inline,\n    height: 80,\n    innerOffset: 0,\n    outerOffset: 0,\n  },\n  frame: {\n    type: 'empty',\n  },\n  xAxis: {\n    title: '',\n    showGrid: false,\n    showTicks: false,\n    hiddenLabels: true,\n  },\n  yAxis: {\n    title: '',\n    showGrid: false,\n    showTicks: false,\n    hiddenLabels: true,\n  },\n  y: {\n    type: 'column',\n    value: 'countKey',\n  },\n  primaryGrouping: {\n    columnName: {\n      type: 'column',\n      value: 'columnKey',\n    },\n  },\n  secondaryGrouping: {\n    columnName: {\n      type: 'column',\n      value: 'residueKey',\n    },\n  },\n  layers: [{\n    type: 'logo',\n    aes: { fillColor: residueColors },\n  }],\n} satisfies Settings));\n\nconst data = computed<DataByColumns>(() => {\n  const countKey: number[] = [];\n  const columnKey: number[] = [];\n  const residueKey: string[] = [];\n  for (const [columnIndex, column] of props.residueCounts.entries()) {\n    for (const [residue, count] of Object.entries(column)) {\n      if (residue === '-') continue;\n      countKey.push(count);\n      columnKey.push(columnIndex);\n      residueKey.push(residue);\n    }\n  }\n  return ({\n    type: 'columns',\n    id: `seq-logo-${crypto.randomUUID()}`,\n    values: { countKey, columnKey, residueKey },\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.value);\n    plot.value.mount(plotEl.value);\n  } else {\n    plot.value.updateSettingsAndData(data.value, settings.value);\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","palette","residueColors","settings","computed","cellSize","data","countKey","columnKey","residueKey","columnIndex","column","residue","count","miplots","error","useMiPlots","plot","shallowRef","watchEffect","onBeforeUnmount","_a"],"mappings":"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"}

package/dist/components/PlMultiSequenceAlignment/SeqLogo.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=SeqLogo.vue3.js.map

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

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

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

@@ -1,9 +1,9 @@
-import { defineComponent as E, ref as b, watchEffect as I, computed as V, createElementBlock as $, openBlock as f, Fragment as K, createElementVNode as r, createVNode as o, normalizeClass as u, unref as n, withModifiers as S, withCtx as s, createTextVNode as a, createCommentVNode as k, createBlock as L, withKeys as P } from "vue";
-import { isJsonEqual as w } from "../../lib/util/helpers/dist/objects.js";
+import { defineComponent as I, useCssModule as K, ref as S, watchEffect as L, computed as x, createElementBlock as w, openBlock as P, Fragment as M, createElementVNode as r, createVNode as o, normalizeClass as m, unref as t, withModifiers as k, withCtx as s, createTextVNode as a, createCommentVNode as U, createBlock as T, withKeys as C } from "vue";
+import { isJsonEqual as q } from "../../lib/util/helpers/dist/objects.js";
 import "../../lib/util/helpers/dist/test_timeouts.js";
-import { PlDropdownMulti as q, PlDropdown as T, PlBtnGhost as y, PlCheckbox as g, PlSlideModal as A, PlNumberField as C, PlBtnPrimary as D, PlBtnSecondary as G } from "@milaboratories/uikit";
-import { defaultAlignmentParams as M } from "./multi-sequence-alignment.js";
-const j = /* @__PURE__ */ E({
+import { PlDropdownMulti as $, PlDropdown as D, PlBtnGhost as V, PlCheckbox as g, PlSlideModal as G, PlNumberField as b, PlBtnPrimary as A, PlBtnSecondary as F } from "@milaboratories/uikit";
+import { defaultSettings as R } from "./settings.js";
+const Q = /* @__PURE__ */ I({
   __name: "Toolbar",
   props: {
     settings: {},
@@ -12,74 +12,74 @@ const j = /* @__PURE__ */ E({
     colorSchemeOptions: {}
   },
   emits: ["updateSettings", "export"],
-  setup(m, { emit: U }) {
-    const O = U, p = b(!1);
-    function d(t, e) {
-      O("updateSettings", { [t]: e });
+  setup(B, { emit: O }) {
+    const n = B, y = O, u = K(), f = S(!1);
+    function d(p, e) {
+      y("updateSettings", { [p]: e });
     }
-    function v(t, e) {
+    function v(p, e) {
       d(
         "widgets",
-        e ? [...m.settings.widgets, t] : m.settings.widgets.filter((l) => t !== l)
+        e ? [...n.settings.widgets, p] : n.settings.widgets.filter((l) => p !== l)
       );
     }
-    const i = b({ ...m.settings.alignmentParams });
-    I(() => {
-      i.value = { ...m.settings.alignmentParams };
+    const i = S({ ...n.settings.alignmentParams });
+    L(() => {
+      i.value = { ...n.settings.alignmentParams };
     });
-    const B = V(
-      () => !w(m.settings.alignmentParams, i.value)
-    ), N = V(
-      () => !w(m.settings.alignmentParams, M)
+    const N = x(
+      () => !q(n.settings.alignmentParams, i.value)
+    ), E = x(
+      () => !q(n.settings.alignmentParams, R.alignmentParams)
     );
-    return (t, e) => (f(), $(K, null, [
+    return (p, e) => (P(), w(M, null, [
       r("div", {
-        class: u(t.$style.container)
+        class: m(t(u).container)
       }, [
         r("div", {
-          class: u(t.$style.line)
+          class: m(t(u).line)
         }, [
           r("div", {
-            class: u(t.$style.section)
+            class: m(t(u).section)
           }, [
-            o(n(q), {
+            o(t($), {
               label: "Sequence Columns",
-              "model-value": t.settings.sequenceColumnIds ?? [],
-              options: t.sequenceColumnOptions,
+              "model-value": n.settings.sequenceColumnIds ?? [],
+              options: n.sequenceColumnOptions,
               clearable: "",
               "onUpdate:modelValue": e[0] || (e[0] = (l) => d("sequenceColumnIds", l))
             }, null, 8, ["model-value", "options"]),
-            o(n(q), {
-              "model-value": t.settings.labelColumnIds ?? [],
+            o(t($), {
+              "model-value": n.settings.labelColumnIds ?? [],
               label: "Label Columns",
-              options: t.labelColumnOptions,
+              options: n.labelColumnOptions,
               clearable: "",
               "onUpdate:modelValue": e[1] || (e[1] = (l) => d("labelColumnIds", l))
             }, null, 8, ["model-value", "options"]),
-            o(n(T), {
-              "model-value": t.settings.colorScheme,
+            o(t(D), {
+              "model-value": n.settings.colorScheme,
               label: "Color Scheme",
-              options: t.colorSchemeOptions,
+              options: n.colorSchemeOptions,
               "onUpdate:modelValue": e[2] || (e[2] = (l) => d("colorScheme", l))
             }, null, 8, ["model-value", "options"])
           ], 2),
           r("div", {
-            class: u(t.$style.buttons)
+            class: m(t(u).buttons)
           }, [
-            o(n(y), {
+            o(t(V), {
               icon: "settings",
-              onClick: e[3] || (e[3] = S((l) => p.value = !0, ["stop"]))
+              onClick: e[3] || (e[3] = k((l) => f.value = !0, ["stop"]))
             }, {
-              default: s(() => e[18] || (e[18] = [
+              default: s(() => e[19] || (e[19] = [
                 a(" Settings ")
               ])),
               _: 1
             }),
-            o(n(y), {
+            o(t(V), {
               icon: "export",
-              onClick: e[4] || (e[4] = S((l) => t.$emit("export"), ["stop"]))
+              onClick: e[4] || (e[4] = k((l) => y("export"), ["stop"]))
             }, {
-              default: s(() => e[19] || (e[19] = [
+              default: s(() => e[20] || (e[20] = [
                 a(" Export ")
               ])),
               _: 1
@@ -87,53 +87,53 @@ const j = /* @__PURE__ */ E({
           ], 2)
         ], 2),
         r("div", {
-          class: u(t.$style.line)
+          class: m(t(u).line)
         }, [
           r("div", {
-            class: u(t.$style.section)
+            class: m(t(u).section)
           }, [
-            o(n(g), {
-              "model-value": t.settings.widgets.includes("seqLogo"),
+            o(t(g), {
+              "model-value": n.settings.widgets.includes("seqLogo"),
               "onUpdate:modelValue": e[5] || (e[5] = (l) => v("seqLogo", l))
             }, {
-              default: s(() => e[20] || (e[20] = [
+              default: s(() => e[21] || (e[21] = [
                 a(" Seq logo ")
               ])),
               _: 1
             }, 8, ["model-value"]),
-            o(n(g), {
-              "model-value": t.settings.widgets.includes("consensus"),
+            o(t(g), {
+              "model-value": n.settings.widgets.includes("consensus"),
               "onUpdate:modelValue": e[6] || (e[6] = (l) => v("consensus", l))
             }, {
-              default: s(() => e[21] || (e[21] = [
+              default: s(() => e[22] || (e[22] = [
                 a(" Consensus ")
               ])),
               _: 1
             }, 8, ["model-value"]),
-            o(n(g), {
+            o(t(g), {
               "model-value": !1,
               disabled: ""
             }, {
-              default: s(() => e[22] || (e[22] = [
+              default: s(() => e[23] || (e[23] = [
                 a("Navigator")
               ])),
               _: 1
             }),
-            o(n(g), {
-              "model-value": !1,
-              disabled: ""
+            o(t(g), {
+              "model-value": n.settings.widgets.includes("tree"),
+              "onUpdate:modelValue": e[7] || (e[7] = (l) => v("tree", l))
             }, {
-              default: s(() => e[23] || (e[23] = [
-                a("Tree")
+              default: s(() => e[24] || (e[24] = [
+                a(" Tree ")
               ])),
               _: 1
-            }),
-            o(n(g), {
-              "model-value": t.settings.widgets.includes("legend"),
-              disabled: t.settings.colorScheme.type === "no-color",
-              "onUpdate:modelValue": e[7] || (e[7] = (l) => v("legend", l))
+            }, 8, ["model-value"]),
+            o(t(g), {
+              "model-value": n.settings.widgets.includes("legend"),
+              disabled: n.settings.colorScheme.type === "no-color",
+              "onUpdate:modelValue": e[8] || (e[8] = (l) => v("legend", l))
             }, {
-              default: s(() => e[24] || (e[24] = [
+              default: s(() => e[25] || (e[25] = [
                 a(" Legend ")
               ])),
               _: 1
@@ -141,82 +141,82 @@ const j = /* @__PURE__ */ E({
           ], 2)
         ], 2)
       ], 2),
-      o(n(A), {
-        modelValue: p.value,
-        "onUpdate:modelValue": e[17] || (e[17] = (l) => p.value = l)
+      o(t(G), {
+        modelValue: f.value,
+        "onUpdate:modelValue": e[18] || (e[18] = (l) => f.value = l)
       }, {
-        title: s(() => e[25] || (e[25] = [
+        title: s(() => e[26] || (e[26] = [
           a("Settings")
         ])),
         default: s(() => [
-          o(n(C), {
+          o(t(b), {
             modelValue: i.value.gpo,
-            "onUpdate:modelValue": e[8] || (e[8] = (l) => i.value.gpo = l),
+            "onUpdate:modelValue": e[9] || (e[9] = (l) => i.value.gpo = l),
             label: "Gap open penalty",
             step: 0.1,
-            onKeyup: e[9] || (e[9] = P((l) => d("alignmentParams", i.value), ["enter"]))
+            onKeyup: e[10] || (e[10] = C((l) => d("alignmentParams", i.value), ["enter"]))
           }, {
-            tooltip: s(() => e[26] || (e[26] = [
+            tooltip: s(() => e[27] || (e[27] = [
               a(" Penalty score assigned to the introduction of a gap in the alignment ")
             ])),
             _: 1
           }, 8, ["modelValue"]),
-          o(n(C), {
+          o(t(b), {
             modelValue: i.value.gpe,
-            "onUpdate:modelValue": e[10] || (e[10] = (l) => i.value.gpe = l),
+            "onUpdate:modelValue": e[11] || (e[11] = (l) => i.value.gpe = l),
             label: "Gap extension penalty",
             step: 0.1,
-            onKeyup: e[11] || (e[11] = P((l) => d("alignmentParams", i.value), ["enter"]))
+            onKeyup: e[12] || (e[12] = C((l) => d("alignmentParams", i.value), ["enter"]))
           }, {
-            tooltip: s(() => e[27] || (e[27] = [
+            tooltip: s(() => e[28] || (e[28] = [
               a(" Penalty score assigned to each additional residue added to an existing gap ")
             ])),
             _: 1
           }, 8, ["modelValue"]),
-          o(n(C), {
+          o(t(b), {
             modelValue: i.value.tgpe,
-            "onUpdate:modelValue": e[12] || (e[12] = (l) => i.value.tgpe = l),
+            "onUpdate:modelValue": e[13] || (e[13] = (l) => i.value.tgpe = l),
             label: "Terminal gap extension penalty",
             step: 0.1,
-            onKeyup: e[13] || (e[13] = P((l) => d("alignmentParams", i.value), ["enter"]))
+            onKeyup: e[14] || (e[14] = C((l) => d("alignmentParams", i.value), ["enter"]))
           }, {
-            tooltip: s(() => e[28] || (e[28] = [
+            tooltip: s(() => e[29] || (e[29] = [
               a(" Penalty score assigned to extending gaps at the ends of sequences ")
             ])),
             _: 1
           }, 8, ["modelValue"]),
-          B.value ? (f(), $("div", {
+          N.value ? (P(), w("div", {
             key: 0,
-            class: u(t.$style["pending-changes"])
+            class: m(t(u).pendingChanges)
           }, [
-            o(n(D), {
-              onClick: e[14] || (e[14] = (l) => d("alignmentParams", i.value))
+            o(t(A), {
+              onClick: e[15] || (e[15] = (l) => d("alignmentParams", i.value))
             }, {
-              default: s(() => e[29] || (e[29] = [
+              default: s(() => e[30] || (e[30] = [
                 a(" Apply ")
               ])),
               _: 1
             }),
-            o(n(y), {
-              onClick: e[15] || (e[15] = (l) => i.value = t.settings.alignmentParams)
+            o(t(V), {
+              onClick: e[16] || (e[16] = (l) => i.value = n.settings.alignmentParams)
             }, {
-              default: s(() => e[30] || (e[30] = [
+              default: s(() => e[31] || (e[31] = [
                 a(" Cancel ")
               ])),
               _: 1
             })
-          ], 2)) : k("", !0),
-          N.value ? (f(), L(n(G), {
+          ], 2)) : U("", !0),
+          E.value ? (P(), T(t(F), {
             key: 1,
-            class: u(t.$style["reset-button"]),
+            class: m(t(u).resetButton),
             icon: "reverse",
-            onClick: e[16] || (e[16] = (l) => d("alignmentParams", void 0))
+            onClick: e[17] || (e[17] = (l) => d("alignmentParams", void 0))
           }, {
-            default: s(() => e[31] || (e[31] = [
+            default: s(() => e[32] || (e[32] = [
               a(" Reset to Default ")
             ])),
             _: 1
-          }, 8, ["class"])) : k("", !0)
+          }, 8, ["class"])) : U("", !0)
         ]),
         _: 1
       }, 8, ["modelValue"])
@@ -224,6 +224,6 @@ const j = /* @__PURE__ */ E({
   }
 });
 export {
-  j as default
+  Q as default
 };
 //# sourceMappingURL=Toolbar.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n  type ListOptionNormalized,\n  PlBtnGhost,\n  PlBtnPrimary,\n  PlBtnSecondary,\n  PlCheckbox,\n  PlDropdown,\n  PlDropdownMulti,\n  PlNumberField,\n  PlSlideModal,\n} from '@milaboratories/uikit';\nimport type {\n  PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,\n  PlMultiSequenceAlignmentSettings as Settings,\n  PObjectId,\n  PTableColumnId,\n} from '@platforma-sdk/model';\nimport { computed, ref, watchEffect } from 'vue';\nimport { defaultAlignmentParams } from './multi-sequence-alignment';\n\nconst { settings } = defineProps<{\n  settings: Settings;\n  sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;\n  labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;\n  colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];\n}>();\n\nconst emit = defineEmits<{\n  updateSettings: [Partial<Settings>];\n  export: [];\n}>();\n\nconst settingsOpen = ref(false);\n\nfunction updateSetting<K extends keyof Settings>(\n  key: K,\n  value: Settings[K] | undefined,\n) {\n  emit('updateSettings', { [key]: value });\n}\n\nfunction toggleWidget(\n  widget: 'seqLogo' | 'consensus' | 'legend',\n  checked: boolean,\n) {\n  updateSetting(\n    'widgets',\n    checked\n      ? [...settings.widgets, widget]\n      : settings.widgets.filter((w) => widget !== w),\n  );\n}\n\nconst alignmentParams = ref({ ...settings.alignmentParams });\nwatchEffect(() => {\n  alignmentParams.value = { ...settings.alignmentParams };\n});\n\nconst alignmentParamsChangesPending = computed(() =>\n  !isJsonEqual(settings.alignmentParams, alignmentParams.value),\n);\n\nconst canResetAlignmentParams = computed(() =>\n  !isJsonEqual(settings.alignmentParams, defaultAlignmentParams),\n);\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <div :class=\"$style.line\">\n      <div :class=\"$style.section\">\n        <PlDropdownMulti\n          label=\"Sequence Columns\"\n          :model-value=\"settings.sequenceColumnIds ?? []\"\n          :options=\"sequenceColumnOptions\"\n          clearable\n          @update:model-value=\"updateSetting('sequenceColumnIds', $event)\"\n        />\n        <PlDropdownMulti\n          :model-value=\"settings.labelColumnIds ?? []\"\n          label=\"Label Columns\"\n          :options=\"labelColumnOptions\"\n          clearable\n          @update:model-value=\"updateSetting('labelColumnIds', $event)\"\n        />\n        <PlDropdown\n          :model-value=\"settings.colorScheme\"\n          label=\"Color Scheme\"\n          :options=\"colorSchemeOptions\"\n          @update:model-value=\"updateSetting('colorScheme', $event)\"\n        />\n      </div>\n      <div :class=\"$style.buttons\">\n        <PlBtnGhost icon=\"settings\" @click.stop=\"settingsOpen = true\">\n          Settings\n        </PlBtnGhost>\n        <PlBtnGhost icon=\"export\" @click.stop=\"$emit('export')\">\n          Export\n        </PlBtnGhost>\n      </div>\n    </div>\n    <div :class=\"$style.line\">\n      <div :class=\"$style.section\">\n        <PlCheckbox\n          :model-value=\"settings.widgets.includes('seqLogo')\"\n          @update:model-value=\"toggleWidget('seqLogo', $event)\"\n        >\n          Seq logo\n        </PlCheckbox>\n        <PlCheckbox\n          :model-value=\"settings.widgets.includes('consensus')\"\n          @update:model-value=\"toggleWidget('consensus', $event)\"\n        >\n          Consensus\n        </PlCheckbox>\n        <PlCheckbox :model-value=\"false\" disabled>Navigator</PlCheckbox>\n        <PlCheckbox :model-value=\"false\" disabled>Tree</PlCheckbox>\n        <PlCheckbox\n          :model-value=\"settings.widgets.includes('legend')\"\n          :disabled=\"settings.colorScheme.type === 'no-color'\"\n          @update:model-value=\"toggleWidget('legend', $event)\"\n        >\n          Legend\n        </PlCheckbox>\n      </div>\n    </div>\n  </div>\n  <PlSlideModal v-model=\"settingsOpen\">\n    <template #title>Settings</template>\n    <PlNumberField\n      v-model=\"alignmentParams.gpo\"\n      label=\"Gap open penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to the introduction of a gap in the alignment\n      </template>\n    </PlNumberField>\n    <PlNumberField\n      v-model=\"alignmentParams.gpe\"\n      label=\"Gap extension penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to each additional residue added to an existing\n        gap\n      </template>\n    </PlNumberField>\n    <PlNumberField\n      v-model=\"alignmentParams.tgpe\"\n      label=\"Terminal gap extension penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to extending gaps at the ends of sequences\n      </template>\n    </PlNumberField>\n    <div\n      v-if=\"alignmentParamsChangesPending\"\n      :class=\"$style['pending-changes']\"\n    >\n      <PlBtnPrimary @click=\"updateSetting('alignmentParams', alignmentParams)\">\n        Apply\n      </PlBtnPrimary>\n      <PlBtnGhost @click=\"alignmentParams = settings.alignmentParams\">\n        Cancel\n      </PlBtnGhost>\n    </div>\n    <PlBtnSecondary\n      v-if=\"canResetAlignmentParams\"\n      :class=\"$style['reset-button']\"\n      icon=\"reverse\"\n      @click=\"updateSetting('alignmentParams', undefined)\"\n    >\n      Reset to Default\n    </PlBtnSecondary>\n  </PlSlideModal>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.line {\n  display: flex;\n  justify-content: space-between;\n}\n\n.section {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n}\n\n.buttons {\n  display: flex;\n}\n\n.pending-changes {\n  display: flex;\n  button {\n    min-width: 160px;\n  }\n}\n\n.reset-button {\n  margin-block-start: auto;\n  span {\n    text-transform: none;\n  }\n}\n</style>\n"],"names":["emit","__emit","settingsOpen","ref","updateSetting","key","value","toggleWidget","widget","checked","__props","w","alignmentParams","watchEffect","alignmentParamsChangesPending","computed","isJsonEqual","canResetAlignmentParams","defaultAlignmentParams"],"mappings":";;;;;;;;;;;;;;;AA6BA,UAAMA,IAAOC,GAKPC,IAAeC,EAAI,EAAK;AAE9B,aAASC,EACPC,GACAC,GACA;AACA,MAAAN,EAAK,kBAAkB,EAAE,CAACK,CAAG,GAAGC,GAAO;AAAA,IACzC;AAEA,aAASC,EACPC,GACAC,GACA;AACA,MAAAL;AAAA,QACE;AAAA,QACAK,IACI,CAAC,GAAGC,EAAA,SAAS,SAASF,CAAM,IAC5BE,EAAA,SAAS,QAAQ,OAAO,CAACC,MAAMH,MAAWG,CAAC;AAAA,MAAA;AAAA,IAEnD;AAEA,UAAMC,IAAkBT,EAAI,EAAE,GAAGO,WAAS,iBAAiB;AAC3D,IAAAG,EAAY,MAAM;AAChB,MAAAD,EAAgB,QAAQ,EAAE,GAAGF,WAAS,gBAAA;AAAA,IACxC,CAAC;AAED,UAAMI,IAAgCC;AAAA,MAAS,MAC7C,CAACC,EAAYN,EAAA,SAAS,iBAAiBE,EAAgB,KAAK;AAAA,IAAA,GAGxDK,IAA0BF;AAAA,MAAS,MACvC,CAACC,EAAYN,EAAA,SAAS,iBAAiBQ,CAAsB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Toolbar.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n  type ListOptionNormalized,\n  PlBtnGhost,\n  PlBtnPrimary,\n  PlBtnSecondary,\n  PlCheckbox,\n  PlDropdown,\n  PlDropdownMulti,\n  PlNumberField,\n  PlSlideModal,\n} from '@milaboratories/uikit';\nimport type {\n  PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,\n  PlMultiSequenceAlignmentSettings as Settings,\n  PlMultiSequenceAlignmentWidget,\n  PObjectId,\n  PTableColumnId,\n} from '@platforma-sdk/model';\nimport { computed, ref, useCssModule, watchEffect } from 'vue';\nimport { defaultSettings } from './settings';\n\nconst props = defineProps<{\n  settings: Settings;\n  sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;\n  labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;\n  colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];\n}>();\n\nconst emit = defineEmits<{\n  updateSettings: [Partial<Settings>];\n  export: [];\n}>();\n\nconst classes = useCssModule();\n\nconst settingsOpen = ref(false);\n\nfunction updateSetting<K extends keyof Settings>(\n  key: K,\n  value: Settings[K] | undefined,\n) {\n  emit('updateSettings', { [key]: value });\n}\n\nfunction toggleWidget(\n  widget: PlMultiSequenceAlignmentWidget,\n  checked: boolean,\n) {\n  updateSetting(\n    'widgets',\n    checked\n      ? [...props.settings.widgets, widget]\n      : props.settings.widgets.filter((w) => widget !== w),\n  );\n}\n\nconst alignmentParams = ref({ ...props.settings.alignmentParams });\nwatchEffect(() => {\n  alignmentParams.value = { ...props.settings.alignmentParams };\n});\n\nconst alignmentParamsChangesPending = computed(() =>\n  !isJsonEqual(props.settings.alignmentParams, alignmentParams.value),\n);\n\nconst canResetAlignmentParams = computed(() =>\n  !isJsonEqual(props.settings.alignmentParams, defaultSettings.alignmentParams),\n);\n</script>\n\n<template>\n  <div :class=\"classes.container\">\n    <div :class=\"classes.line\">\n      <div :class=\"classes.section\">\n        <PlDropdownMulti\n          label=\"Sequence Columns\"\n          :model-value=\"props.settings.sequenceColumnIds ?? []\"\n          :options=\"props.sequenceColumnOptions\"\n          clearable\n          @update:model-value=\"event => updateSetting('sequenceColumnIds', event)\"\n        />\n        <PlDropdownMulti\n          :model-value=\"props.settings.labelColumnIds ?? []\"\n          label=\"Label Columns\"\n          :options=\"props.labelColumnOptions\"\n          clearable\n          @update:model-value=\"event => updateSetting('labelColumnIds', event)\"\n        />\n        <PlDropdown\n          :model-value=\"props.settings.colorScheme\"\n          label=\"Color Scheme\"\n          :options=\"props.colorSchemeOptions\"\n          @update:model-value=\"event => updateSetting('colorScheme', event)\"\n        />\n      </div>\n      <div :class=\"classes.buttons\">\n        <PlBtnGhost icon=\"settings\" @click.stop=\"settingsOpen = true\">\n          Settings\n        </PlBtnGhost>\n        <PlBtnGhost icon=\"export\" @click.stop=\"emit('export')\">\n          Export\n        </PlBtnGhost>\n      </div>\n    </div>\n    <div :class=\"classes.line\">\n      <div :class=\"classes.section\">\n        <PlCheckbox\n          :model-value=\"props.settings.widgets.includes('seqLogo')\"\n          @update:model-value=\"event => toggleWidget('seqLogo', event)\"\n        >\n          Seq logo\n        </PlCheckbox>\n        <PlCheckbox\n          :model-value=\"props.settings.widgets.includes('consensus')\"\n          @update:model-value=\"event => toggleWidget('consensus', event)\"\n        >\n          Consensus\n        </PlCheckbox>\n        <PlCheckbox :model-value=\"false\" disabled>Navigator</PlCheckbox>\n        <PlCheckbox\n          :model-value=\"props.settings.widgets.includes('tree')\"\n          @update:model-value=\"event => toggleWidget('tree', event)\"\n        >\n          Tree\n        </PlCheckbox>\n        <PlCheckbox\n          :model-value=\"props.settings.widgets.includes('legend')\"\n          :disabled=\"props.settings.colorScheme.type === 'no-color'\"\n          @update:model-value=\"event => toggleWidget('legend', event)\"\n        >\n          Legend\n        </PlCheckbox>\n      </div>\n    </div>\n  </div>\n  <PlSlideModal v-model=\"settingsOpen\">\n    <template #title>Settings</template>\n    <PlNumberField\n      v-model=\"alignmentParams.gpo\"\n      label=\"Gap open penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to the introduction of a gap in the alignment\n      </template>\n    </PlNumberField>\n    <PlNumberField\n      v-model=\"alignmentParams.gpe\"\n      label=\"Gap extension penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to each additional residue added to an existing\n        gap\n      </template>\n    </PlNumberField>\n    <PlNumberField\n      v-model=\"alignmentParams.tgpe\"\n      label=\"Terminal gap extension penalty\"\n      :step=\"0.1\"\n      @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n    >\n      <template #tooltip>\n        Penalty score assigned to extending gaps at the ends of sequences\n      </template>\n    </PlNumberField>\n    <div\n      v-if=\"alignmentParamsChangesPending\"\n      :class=\"classes.pendingChanges\"\n    >\n      <PlBtnPrimary @click=\"updateSetting('alignmentParams', alignmentParams)\">\n        Apply\n      </PlBtnPrimary>\n      <PlBtnGhost @click=\"alignmentParams = props.settings.alignmentParams\">\n        Cancel\n      </PlBtnGhost>\n    </div>\n    <PlBtnSecondary\n      v-if=\"canResetAlignmentParams\"\n      :class=\"classes.resetButton\"\n      icon=\"reverse\"\n      @click=\"updateSetting('alignmentParams', undefined)\"\n    >\n      Reset to Default\n    </PlBtnSecondary>\n  </PlSlideModal>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.line {\n  display: flex;\n  justify-content: space-between;\n}\n\n.section {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n}\n\n.buttons {\n  display: flex;\n}\n\n.pendingChanges {\n  display: flex;\n  button {\n    min-width: 160px;\n  }\n}\n\n.resetButton {\n  margin-block-start: auto;\n  span {\n    text-transform: none;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","settingsOpen","ref","updateSetting","key","value","toggleWidget","widget","checked","w","alignmentParams","watchEffect","alignmentParamsChangesPending","computed","isJsonEqual","canResetAlignmentParams","defaultSettings"],"mappings":";;;;;;;;;;;;;;;AAuBA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAUC,EAAA,GAEVC,IAAeC,EAAI,EAAK;AAE9B,aAASC,EACPC,GACAC,GACA;AACA,MAAAR,EAAK,kBAAkB,EAAE,CAACO,CAAG,GAAGC,GAAO;AAAA,IACzC;AAEA,aAASC,EACPC,GACAC,GACA;AACA,MAAAL;AAAA,QACE;AAAA,QACAK,IACI,CAAC,GAAGb,EAAM,SAAS,SAASY,CAAM,IAClCZ,EAAM,SAAS,QAAQ,OAAO,CAACc,MAAMF,MAAWE,CAAC;AAAA,MAAA;AAAA,IAEzD;AAEA,UAAMC,IAAkBR,EAAI,EAAE,GAAGP,EAAM,SAAS,iBAAiB;AACjE,IAAAgB,EAAY,MAAM;AAChB,MAAAD,EAAgB,QAAQ,EAAE,GAAGf,EAAM,SAAS,gBAAA;AAAA,IAC9C,CAAC;AAED,UAAMiB,IAAgCC;AAAA,MAAS,MAC7C,CAACC,EAAYnB,EAAM,SAAS,iBAAiBe,EAAgB,KAAK;AAAA,IAAA,GAG9DK,IAA0BF;AAAA,MAAS,MACvC,CAACC,EAAYnB,EAAM,SAAS,iBAAiBqB,EAAgB,eAAe;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,17 +1,19 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_8w0jf_2{display:flex;flex-direction:column;gap:24px}._line_8w0jf_8{display:flex;justify-content:space-between}._section_8w0jf_13{display:flex;flex-wrap:wrap;gap:24px}._buttons_8w0jf_19,._pending-changes_8w0jf_23{display:flex}._pending-changes_8w0jf_23 button{min-width:160px}._reset-button_8w0jf_30{margin-block-start:auto}._reset-button_8w0jf_30 span{text-transform:none}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-const n = "_container_8w0jf_2", t = "_line_8w0jf_8", e = "_section_8w0jf_13", _ = "_buttons_8w0jf_19", o = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_ypn45_2{display:flex;flex-direction:column;gap:24px}._line_ypn45_8{display:flex;justify-content:space-between}._section_ypn45_13{display:flex;flex-wrap:wrap;gap:24px}._buttons_ypn45_19,._pendingChanges_ypn45_23{display:flex}._pendingChanges_ypn45_23 button{min-width:160px}._resetButton_ypn45_30{margin-block-start:auto}._resetButton_ypn45_30 span{text-transform:none}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+const n = "_container_ypn45_2", t = "_line_ypn45_8", e = "_section_ypn45_13", s = "_buttons_ypn45_19", o = "_pendingChanges_ypn45_23", _ = "_resetButton_ypn45_30", c = {
   container: n,
   line: t,
   section: e,
-  buttons: _,
-  "pending-changes": "_pending-changes_8w0jf_23",
-  "reset-button": "_reset-button_8w0jf_30"
+  buttons: s,
+  pendingChanges: o,
+  resetButton: _
 };
 export {
-  _ as buttons,
+  s as buttons,
   n as container,
-  o as default,
+  c as default,
   t as line,
+  o as pendingChanges,
+  _ as resetButton,
   e as section
 };
 //# sourceMappingURL=Toolbar.vue3.js.map

package/dist/components/PlMultiSequenceAlignment/cell-size.d.ts

@@ -0,0 +1,4 @@
+export declare const cellSize: {
+    inline: number;
+    block: number;
+};

package/dist/components/PlMultiSequenceAlignment/cell-size.js

@@ -0,0 +1,8 @@
+const e = {
+  inline: 20,
+  block: 24
+};
+export {
+  e as cellSize
+};
+//# sourceMappingURL=cell-size.js.map

package/dist/components/PlMultiSequenceAlignment/cell-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-size.js","sources":["../../../src/components/PlMultiSequenceAlignment/cell-size.ts"],"sourcesContent":["export const cellSize = {\n  inline: 20,\n  block: 24,\n};\n"],"names":["cellSize"],"mappings":"AAAO,MAAMA,IAAW;AAAA,EACtB,QAAQ;AAAA,EACR,OAAO;AACT;"}

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

@@ -1,7 +1,8 @@
 import { ListOptionNormalized } from '@milaboratories/uikit';
 import { PColumnIdAndSpec, PFrameHandle, PlMultiSequenceAlignmentColorSchemeOption, PlMultiSequenceAlignmentSettings, PlSelectionModel, PObjectId, PTableColumnId } from '@platforma-sdk/model';
 import { HighlightLegend, ResidueCounts } from './types';
-export declare const sequenceLimit = 1000;
+import type * as PhylogeneticTreeWorker from './phylogenetic-tree.worker';
+export declare const SEQUENCE_LIMIT = 1000;
 export declare const useSequenceColumnsOptions: (paramsGetter: () => {
     pFrame: PFrameHandle | undefined;
     sequenceColumnPredicate: (column: PColumnIdAndSpec) => boolean;
@@ -22,7 +23,7 @@ export declare const useMarkupColumnsOptions: (paramsGetter: () => {
     pFrame: PFrameHandle | undefined;
     sequenceColumnIds: PObjectId[] | undefined;
 }) => {
-    data: import('vue').Ref<ListOptionNormalized<PObjectId>[] | undefined, ListOptionNormalized<PObjectId>[] | undefined>;
+    data: import('vue').Ref<ListOptionNormalized<PObjectId[]>[] | undefined, ListOptionNormalized<PObjectId[]>[] | undefined>;
     isLoading: import('vue').Ref<boolean, boolean>;
     error: import('vue').Ref<Error | undefined, Error | undefined>;
 };
@@ -33,20 +34,24 @@ export declare const useMultipleAlignmentData: (paramsGetter: () => {
     selection: PlSelectionModel | undefined;
     colorScheme: PlMultiSequenceAlignmentColorSchemeOption;
     alignmentParams: PlMultiSequenceAlignmentSettings["alignmentParams"];
+    shouldBuildPhylogeneticTree: boolean;
 }) => {
     data: import('vue').Ref<MultipleAlignmentData | undefined, MultipleAlignmentData | undefined>;
     isLoading: import('vue').Ref<boolean, boolean>;
     error: import('vue').Ref<Error | undefined, Error | undefined>;
 };
 type MultipleAlignmentData = {
-    sequences: string[];
-    sequenceNames: string[];
-    labelRows: string[][];
-    residueCounts: ResidueCounts;
-    highlightImage?: {
-        blob: Blob;
-        legend: HighlightLegend;
-    };
+    sequences: {
+        name: string;
+        rows: string[];
+        residueCounts: ResidueCounts;
+        highlightImageUrl?: string;
+    }[];
+    labels: {
+        rows: string[];
+    }[];
+    highlightLegend?: HighlightLegend;
+    phylogeneticTree?: PhylogeneticTreeWorker.TreeNodeData[];
     exceedsLimit: boolean;
 };
 type OptionsWithDefaults<T> = {