@milaboratories/multi-sequence-alignment 1.45.0

package/dist/PhylogeneticTree.vue2.js

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

package/dist/PhylogeneticTree.vue2.js.map

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

package/dist/PhylogeneticTree.vue3.js

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

package/dist/PhylogeneticTree.vue3.js.map

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

package/dist/PlMultiSequenceAlignment.vue.d.ts

@@ -0,0 +1,71 @@
+import { PColumnPredicate, PFrameHandle, PlMultiSequenceAlignmentModel, PlSelectionModel } from '@platforma-sdk/model';
+type __VLS_Props = {
+    /**
+     * Handle to PFrame created using `createPFrameForGraphs`.
+     * Should contain all desired sequence and label columns.
+     */
+    readonly pFrame: PFrameHandle | undefined;
+    /**
+     * Return true if column should be shown in sequence columns dropdown.
+     * By default, all sequence columns are selected.
+     */
+    readonly sequenceColumnPredicate: PColumnPredicate;
+    /**
+     * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).
+     * If not provided or empty, all rows will be considered selected.
+     * Warning: should be forwarded as a field of `reactive` object
+     */
+    readonly selection?: PlSelectionModel;
+};
+type __VLS_PublicProps = {
+    modelValue?: PlMultiSequenceAlignmentModel;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: PlMultiSequenceAlignmentModel) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: PlMultiSequenceAlignmentModel) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    msa: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        sequences: {
+            name: string;
+            rows: string[];
+            residueCounts: import('./types').ResidueCounts;
+            highlightImageUrl?: string;
+        }[];
+        labels: {
+            rows: string[];
+        }[];
+        highlightLegend: import('./types').HighlightLegend | undefined;
+        phylogeneticTree: import('./phylogenetic-tree.worker').TreeNodeData[] | undefined;
+        widgets: import('@platforma-sdk/model').PlMultiSequenceAlignmentWidget[];
+    }> & Readonly<{}>, {
+        rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+        referenceCell: HTMLDivElement;
+        corner: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        sequences: {
+            name: string;
+            rows: string[];
+            residueCounts: import('./types').ResidueCounts;
+            highlightImageUrl?: string;
+        }[];
+        labels: {
+            rows: string[];
+        }[];
+        highlightLegend: import('./types').HighlightLegend | undefined;
+        phylogeneticTree: import('./phylogenetic-tree.worker').TreeNodeData[] | undefined;
+        widgets: import('@platforma-sdk/model').PlMultiSequenceAlignmentWidget[];
+    }> & Readonly<{}>, {
+        rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+    }, {}, {}, {}, {}> | null;
+}, any>;
+export default _default;

package/dist/PlMultiSequenceAlignment.vue.js

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

package/dist/PlMultiSequenceAlignment.vue.js.map

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

package/dist/PlMultiSequenceAlignment.vue2.js

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

package/dist/PlMultiSequenceAlignment.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../src/PlMultiSequenceAlignment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n  type ListOptionNormalized,\n  PlAlert,\n  PlSplash,\n} from '@milaboratories/uikit';\nimport {\n  getRawPlatformaInstance,\n  type PColumnPredicate,\n  type PFrameHandle,\n  type PlMultiSequenceAlignmentColorSchemeOption,\n  type PlMultiSequenceAlignmentModel,\n  type PlMultiSequenceAlignmentSettings,\n  type PlSelectionModel,\n} from '@platforma-sdk/model';\nimport {\n  computed,\n  onBeforeMount,\n  onUnmounted,\n  reactive,\n  useCssModule,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport {\n  SEQUENCE_LIMIT,\n  useLabelColumnsOptions,\n  useMarkupColumnsOptions,\n  useMultipleAlignmentData,\n  useSequenceColumnsOptions,\n} from './data';\nimport { runMigrations } from './migrations';\nimport MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';\nimport { defaultSettings } from './settings';\nimport Toolbar from './Toolbar.vue';\n\nconst model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });\n\nonBeforeMount(() => {\n  runMigrations(model);\n});\n\nconst settings = reactive<PlMultiSequenceAlignmentSettings>({\n  ...defaultSettings,\n});\n\nconst props = defineProps<{\n  /**\n   * Handle to PFrame created using `createPFrameForGraphs`.\n   * Should contain all desired sequence and label columns.\n   */\n  readonly pFrame: PFrameHandle | undefined;\n  /**\n   * Return true if column should be shown in sequence columns dropdown.\n   * By default, all sequence columns are selected.\n   */\n  readonly sequenceColumnPredicate: PColumnPredicate;\n  /**\n   * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).\n   * If not provided or empty, all rows will be considered selected.\n   * Warning: should be forwarded as a field of `reactive` object\n   */\n  readonly selection?: PlSelectionModel;\n}>();\n\nconst classes = useCssModule();\n\nconst sequenceColumns = reactive(useSequenceColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnPredicate: props.sequenceColumnPredicate,\n})));\n\nconst labelColumns = reactive(useLabelColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst markupColumns = reactive(useMarkupColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnIds: settings.sequenceColumnIds,\n  labelColumnIds: settings.labelColumnIds,\n  selection: props.selection,\n  colorScheme: settings.colorScheme,\n  alignmentParams: settings.alignmentParams,\n  shouldBuildPhylogeneticTree: settings.widgets.includes('tree'),\n})));\n\nconst formatNumber = new Intl.NumberFormat('en').format;\n\nconst colorSchemeOptions = computed<\n  ListOptionNormalized<PlMultiSequenceAlignmentColorSchemeOption>[]\n>(\n  () => [\n    {\n      label: 'Chemical Properties',\n      value: { type: 'chemical-properties' },\n    },\n    {\n      label: 'No Color',\n      value: { type: 'no-color' },\n    },\n    ...(markupColumns.data ?? []).map(({ label, value }) => ({\n      label,\n      value: {\n        type: 'markup' as const,\n        columnIds: value,\n      },\n    })),\n  ],\n);\n\nconst error = computed(() =>\n  sequenceColumns.error\n  ?? labelColumns.error\n  ?? markupColumns.error\n  ?? multipleAlignmentData.error,\n);\n\nfunction applySettings(\n  settingsPatch: Partial<PlMultiSequenceAlignmentSettings>,\n) {\n  model.value = Object.fromEntries(\n    Object.entries({ ...model.value, ...settingsPatch })\n      .filter(([_key, value]) => value !== undefined),\n  );\n}\n\nwatchEffect(() => {\n  const patch: Partial<PlMultiSequenceAlignmentSettings> = Object.fromEntries(\n    Object.entries({\n      ...defaultSettings,\n      sequenceColumnIds: sequenceColumns.data?.defaults,\n      labelColumnIds: labelColumns.data?.defaults,\n      ...model.value,\n    }).filter(([key, value]) =>\n      !isJsonEqual(\n        settings[key as keyof PlMultiSequenceAlignmentSettings],\n        value,\n      ),\n    ),\n  );\n  Object.assign(settings, patch);\n});\n\n// Reset stale settings\nwatchEffect(() => {\n  const settingsToReset: (keyof PlMultiSequenceAlignmentSettings)[] = [];\n  if (\n    !sequenceColumns.isLoading\n    && settings.sequenceColumnIds?.some((id) =>\n      (sequenceColumns.data?.options ?? []).every(\n        ({ value }) => !isJsonEqual(value, id),\n      ),\n    )\n  ) {\n    settingsToReset.push('sequenceColumnIds');\n  }\n  if (\n    !labelColumns.isLoading\n    && settings.labelColumnIds?.some((id) =>\n      (labelColumns.data?.options ?? []).every(\n        ({ value }) => !isJsonEqual(value, id),\n      ),\n    )\n  ) {\n    settingsToReset.push('labelColumnIds');\n  }\n\n  const markupColumnIds = settings.colorScheme?.type === 'markup'\n    ? settings.colorScheme.columnIds\n    : undefined;\n\n  if (\n    !markupColumns.isLoading\n    && markupColumnIds\n    && (markupColumns.data ?? []).every(\n      ({ value }) => !isJsonEqual(value, markupColumnIds),\n    )\n  ) {\n    settingsToReset.push('colorScheme');\n  }\n  if (settingsToReset.length) {\n    applySettings(Object.fromEntries(\n      settingsToReset.map((key) => [key, undefined]),\n    ));\n  }\n});\n\nconst msaEl = useTemplateRef('msa');\n\nasync function exportPdf() {\n  const exportToPdf = getRawPlatformaInstance()?.lsDriver\n    ?.exportToPdf;\n  if (!exportToPdf) {\n    return console.error(\n      'API getPlatformaRawInstance().lsDriver.exportToPdf is not available',\n    );\n  }\n  const msaRoot = msaEl.value?.rootEl;\n  if (!msaRoot) {\n    throw new Error('MSA element is not available.');\n  }\n  const printTarget = document.createElement('div');\n  printTarget.id = `print-target-${crypto.randomUUID()}`;\n  const printStyleSheet = new CSSStyleSheet();\n  document.adoptedStyleSheets.push(printStyleSheet);\n  printStyleSheet.insertRule(`\n@media screen {\n  #${printTarget.id} {\n    visibility: hidden;\n    position: fixed;\n  }\n}`);\n  const msaClone = msaRoot.cloneNode(true) as HTMLElement;\n  msaClone.dataset.prePrint = '';\n  printTarget.replaceChildren(msaClone);\n  document.body.appendChild(printTarget);\n  const { height, width } = printTarget.getBoundingClientRect();\n  const margin = CSS.cm(1);\n  const pageSize = [width, height]\n    .map((value) => CSS.px(value).add(margin.mul(2)))\n    .join(' ');\n  printStyleSheet.insertRule(`\n@media print {\n  @page {\n    size: ${pageSize};\n    margin: ${margin};\n  }\n  body > :not(#${printTarget.id}) {\n    display: none;\n  }\n}`);\n  try {\n    await exportToPdf();\n  } catch (error) {\n    console.error(error);\n  } finally {\n    document.body.removeChild(printTarget);\n    const index = document.adoptedStyleSheets.indexOf(printStyleSheet);\n    if (index >= 0) {\n      document.adoptedStyleSheets.splice(index, 1);\n    }\n  }\n}\n\nonUnmounted(() => {\n  multipleAlignmentData.data = undefined;\n});\n</script>\n\n<template>\n  <Toolbar\n    :settings=\"settings\"\n    :sequence-column-options=\"sequenceColumns.data?.options\"\n    :label-column-options=\"labelColumns.data?.options\"\n    :color-scheme-options=\"colorSchemeOptions\"\n    @update-settings=\"applySettings\"\n    @export=\"exportPdf\"\n  />\n  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error }}\n  </PlAlert>\n  <PlAlert\n    v-else-if=\"!multipleAlignmentData.isLoading && !multipleAlignmentData.data\"\n    type=\"warn\"\n    icon\n  >\n    Please select at least one sequence column and two or more rows to run\n    alignment\n  </PlAlert>\n  <template v-else>\n    <PlAlert\n      v-if=\"multipleAlignmentData.data?.exceedsLimit\"\n      type=\"warn\"\n      icon\n      label=\"Visualization is limited\"\n    >\n      MSA visualization supports {{ formatNumber(2) }} to\n      {{ formatNumber(SEQUENCE_LIMIT) }} sequences. Only the first\n      {{ formatNumber(SEQUENCE_LIMIT) }} will be displayed.\n    </PlAlert>\n    <PlSplash\n      type=\"transparent\"\n      :class=\"classes.splash\"\n      :loading=\"multipleAlignmentData.isLoading\"\n    >\n      <MultiSequenceAlignmentView\n        v-if=\"multipleAlignmentData.data\"\n        ref=\"msa\"\n        :sequences=\"multipleAlignmentData.data.sequences\"\n        :labels=\"multipleAlignmentData.data.labels\"\n        :highlight-legend=\"multipleAlignmentData.data.highlightLegend\"\n        :phylogenetic-tree=\"multipleAlignmentData.data.phylogeneticTree\"\n        :widgets=\"settings.widgets\"\n      />\n    </PlSplash>\n  </template>\n</template>\n\n<style module>\n.splash {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  overflow: hidden;\n}\n</style>\n"],"names":["model","_useModel","__props","onBeforeMount","runMigrations","settings","reactive","defaultSettings","props","classes","useCssModule","sequenceColumns","useSequenceColumnsOptions","labelColumns","useLabelColumnsOptions","markupColumns","useMarkupColumnsOptions","multipleAlignmentData","useMultipleAlignmentData","formatNumber","colorSchemeOptions","computed","label","value","error","applySettings","settingsPatch","_key","watchEffect","patch","_a","_b","key","isJsonEqual","settingsToReset","id","markupColumnIds","_c","msaEl","useTemplateRef","exportPdf","exportToPdf","getRawPlatformaInstance","msaRoot","printTarget","printStyleSheet","msaClone","height","width","margin","pageSize","index","onUnmounted","_createVNode","Toolbar","_createBlock","_unref","PlAlert","_cache","_createElementBlock","_Fragment","_createTextVNode","_toDisplayString","SEQUENCE_LIMIT","PlSplash","_normalizeClass","MultiSequenceAlignmentView"],"mappings":"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"}

package/dist/PlMultiSequenceAlignment.vue3.js

@@ -0,0 +1,9 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._splash_dk8xp_2{flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+const s = "_splash_dk8xp_2", a = {
+  splash: s
+};
+export {
+  a as default,
+  s as splash
+};
+//# sourceMappingURL=PlMultiSequenceAlignment.vue3.js.map

package/dist/PlMultiSequenceAlignment.vue3.js.map

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

package/dist/SeqLogo.vue.d.ts

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

package/dist/SeqLogo.vue.js

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

package/dist/SeqLogo.vue.js.map

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

package/dist/SeqLogo.vue2.js

@@ -0,0 +1,127 @@
+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 {
+  R as default
+};
+//# sourceMappingURL=SeqLogo.vue2.js.map

package/dist/SeqLogo.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeqLogo.vue2.js","sources":["../src/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","_unref","_createBlock","PlAlert","_createTextVNode","_toDisplayString","_createElementBlock","_normalizeClass"],"mappings":"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"}

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

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