@platforma-sdk/ui-vue 1.37.0 → 1.37.1

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

@@ -0,0 +1,181 @@
+import { defineComponent as A, mergeModels as B, useModel as x, onBeforeMount as E, ref as U, reactive as i, computed as c, watchEffect as z, createElementBlock as y, openBlock as s, Fragment as b, createVNode as h, createBlock as p, unref as n, withCtx as d, createTextVNode as S, toDisplayString as v, createCommentVNode as w, normalizeClass as D } from "vue";
+import "../../lib/ui/uikit/dist/index.js";
+import { chemicalPropertiesColorMap as j } from "./chemical-properties.js";
+import { useSequenceColumnsOptions as T, useLabelColumnsOptions as $, useMarkupColumnsOptions as G, useMultipleAlignmentData as H, sequenceLimit as V } from "./data.js";
+import J from "./Legend.vue.js";
+import { markupColors as O } from "./markup.js";
+import { runMigrations as K } from "./migrations.js";
+import Q from "./MultiSequenceAlignmentView.vue.js";
+import { defaultSettings as R } from "./settings.js";
+import W from "./Toolbar.vue.js";
+import I from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
+import X from "../../lib/ui/uikit/dist/components/PlSplash/PlSplash.vue.js";
+const me = /* @__PURE__ */ A({
+  __name: "PlMultiSequenceAlignment",
+  props: /* @__PURE__ */ B({
+    pFrame: {},
+    sequenceColumnPredicate: { type: Function },
+    linkerColumnPredicate: { type: Function },
+    selection: {}
+  }, {
+    modelValue: { default: {} },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(F) {
+    const u = x(F, "modelValue");
+    E(() => {
+      K(u);
+    });
+    const r = F, o = U(R), f = i(T(() => ({
+      pFrame: r.pFrame,
+      sequenceColumnPredicate: r.sequenceColumnPredicate
+    }))), m = c({
+      get: () => u.value.sequenceColumnIds ?? f.data.defaults,
+      set: (l) => {
+        u.value.sequenceColumnIds = l;
+      }
+    }), C = i($(() => ({
+      pFrame: r.pFrame,
+      sequenceColumnIds: m.value
+    }))), q = c({
+      get: () => u.value.labelColumnIds ?? C.data.defaults,
+      set: (l) => {
+        u.value.labelColumnIds = l;
+      }
+    }), g = i(G(() => ({
+      pFrame: r.pFrame,
+      sequenceColumnIds: m.value
+    }))), t = i(H(() => ({
+      pframe: r.pFrame,
+      sequenceColumnIds: m.value,
+      labelColumnIds: q.value,
+      markupColumnId: o.value.colorScheme.type === "markup" ? o.value.colorScheme.columnId : void 0,
+      linkerColumnPredicate: r.linkerColumnPredicate,
+      selection: r.selection
+    }))), k = new Intl.NumberFormat("en").format, L = c(
+      () => [
+        {
+          label: "Chemical Properties",
+          value: { type: "chemical-properties" }
+        },
+        {
+          label: "No Color",
+          value: { type: "no-color" }
+        },
+        ...g.data.map(({ label: l, value: e }) => ({
+          label: l,
+          value: {
+            type: "markup",
+            columnId: e
+          }
+        }))
+      ]
+    ), M = c(() => {
+      var l;
+      switch (o.value.colorScheme.type) {
+        case "no-color":
+          return {
+            type: "no-color",
+            colors: {}
+          };
+        case "chemical-properties":
+          return {
+            type: "chemical-properties",
+            colors: j
+          };
+        case "markup":
+          return {
+            type: "markup",
+            colors: Object.fromEntries(
+              Object.entries(
+                ((l = t.data.markup) == null ? void 0 : l.labels) ?? {}
+              ).map(([e, a], N) => [
+                e,
+                { label: a, color: O[N % O.length] }
+              ])
+            )
+          };
+        default:
+          throw new Error(`Unknown color scheme ${o.value.colorScheme}`);
+      }
+    });
+    z(() => {
+      const l = o.value.colorScheme.type === "markup" ? o.value.colorScheme.columnId : void 0;
+      l && g.data.every(({ value: e }) => e !== l) && (o.value.colorScheme = { type: "no-color" });
+    });
+    const P = c(
+      () => f.error ?? C.error ?? g.error ?? t.error
+    );
+    return (l, e) => (s(), y(b, null, [
+      h(W, {
+        "sequence-columns": m.value,
+        "onUpdate:sequenceColumns": e[0] || (e[0] = (a) => m.value = a),
+        "label-columns": q.value,
+        "onUpdate:labelColumns": e[1] || (e[1] = (a) => q.value = a),
+        settings: o.value,
+        "onUpdate:settings": e[2] || (e[2] = (a) => o.value = a),
+        "sequence-column-options": f.data.options,
+        "label-column-options": C.data.options,
+        "color-scheme-options": L.value
+      }, null, 8, ["sequence-columns", "label-columns", "settings", "sequence-column-options", "label-column-options", "color-scheme-options"]),
+      P.value ? (s(), p(n(I), {
+        key: 0,
+        type: "error"
+      }, {
+        default: d(() => [
+          S(v(P.value), 1)
+        ]),
+        _: 1
+      })) : !t.loading && t.data.sequences.length < 2 ? (s(), p(n(I), {
+        key: 1,
+        type: "warn",
+        icon: ""
+      }, {
+        default: d(() => e[3] || (e[3] = [
+          S(" Please select at least one sequence column and two or more rows to run alignment ")
+        ])),
+        _: 1
+      })) : (s(), y(b, { key: 2 }, [
+        t.data.exceedsLimit ? (s(), p(n(I), {
+          key: 0,
+          type: "warn",
+          icon: "",
+          label: "Visualization is limited"
+        }, {
+          default: d(() => [
+            S(" MSA visualization supports " + v(n(k)(2)) + " to " + v(n(k)(n(V))) + " sequences. Only the first " + v(n(k)(n(V))) + " will be displayed. ", 1)
+          ]),
+          _: 1
+        })) : w("", !0),
+        h(n(X), {
+          type: "transparent",
+          class: D(l.$style.splash),
+          loading: t.loading
+        }, {
+          default: d(() => [
+            t.data.sequences.length ? (s(), y(b, { key: 0 }, [
+              h(Q, {
+                "sequence-rows": t.data.sequences,
+                "label-rows": t.data.labels,
+                markup: t.data.markup,
+                colorScheme: M.value,
+                consensus: o.value.consensus,
+                "seq-logo": o.value.seqLogo
+              }, null, 8, ["sequence-rows", "label-rows", "markup", "colorScheme", "consensus", "seq-logo"]),
+              o.value.legend && o.value.colorScheme.type !== "no-color" ? (s(), p(J, {
+                key: 0,
+                colors: M.value.colors
+              }, null, 8, ["colors"])) : w("", !0)
+            ], 64)) : w("", !0)
+          ]),
+          _: 1
+        }, 8, ["class", "loading"])
+      ], 64))
+    ], 64));
+  }
+});
+export {
+  me as default
+};
+//# sourceMappingURL=PlMultiSequenceAlignment.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ListOptionNormalized } from '@milaboratories/uikit';\nimport { PlAlert, PlSplash } from '@milaboratories/uikit';\nimport type {\n  PColumnPredicate,\n  PFrameHandle,\n  PlMultiSequenceAlignmentModel,\n  PlSelectionModel,\n} from '@platforma-sdk/model';\nimport { computed, onBeforeMount, reactive, ref, watchEffect } from 'vue';\nimport { chemicalPropertiesColorMap } from './chemical-properties';\nimport {\n  sequenceLimit,\n  useLabelColumnsOptions,\n  useMarkupColumnsOptions,\n  useMultipleAlignmentData,\n  useSequenceColumnsOptions,\n} from './data';\nimport Legend from './Legend.vue';\nimport { markupColors } from './markup';\nimport { runMigrations } from './migrations';\nimport MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';\nimport { defaultSettings } from './settings';\nimport Toolbar from './Toolbar.vue';\nimport type { ColorScheme, ColorSchemeOption } from './types';\n\nconst model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });\n\nonBeforeMount(() => {\n  runMigrations(model);\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   * Sometimes sequence column and label column have disjoint axes.\n   * In this case you have to define `linkerColumnPredicate` to select columns\n   * connecting axes of sequence and label columns.\n   */\n  readonly linkerColumnPredicate?: 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 settings = ref(defaultSettings);\n\nconst sequenceColumns = reactive(useSequenceColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnPredicate: props.sequenceColumnPredicate,\n})));\n\nconst selectedSequenceColumnIds = computed({\n  get: () => model.value.sequenceColumnIds ?? sequenceColumns.data.defaults,\n  set: (value) => {\n    model.value.sequenceColumnIds = value;\n  },\n});\n\nconst labelColumns = reactive(useLabelColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnIds: selectedSequenceColumnIds.value,\n})));\n\nconst selectedLabelColumnIds = computed({\n  get: () => model.value.labelColumnIds ?? labelColumns.data.defaults,\n  set: (value) => {\n    model.value.labelColumnIds = value;\n  },\n});\n\nconst markupColumns = reactive(useMarkupColumnsOptions(() => ({\n  pFrame: props.pFrame,\n  sequenceColumnIds: selectedSequenceColumnIds.value,\n})));\n\nconst multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({\n  pframe: props.pFrame,\n  sequenceColumnIds: selectedSequenceColumnIds.value,\n  labelColumnIds: selectedLabelColumnIds.value,\n  markupColumnId: settings.value.colorScheme.type === 'markup'\n    ? settings.value.colorScheme.columnId\n    : undefined,\n  linkerColumnPredicate: props.linkerColumnPredicate,\n  selection: props.selection,\n})));\n\nconst formatNumber = new Intl.NumberFormat('en').format;\n\nconst colorSchemeOptions = computed<ListOptionNormalized<ColorSchemeOption>[]>(\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        columnId: value,\n      },\n    })),\n  ],\n);\n\nconst colorScheme = computed<ColorScheme>(() => {\n  switch (settings.value.colorScheme.type) {\n    case 'no-color':\n      return {\n        type: 'no-color',\n        colors: {},\n      };\n    case 'chemical-properties':\n      return {\n        type: 'chemical-properties',\n        colors: chemicalPropertiesColorMap,\n      };\n    case 'markup':\n      return {\n        type: 'markup',\n        colors: Object.fromEntries(\n          Object.entries(\n            multipleAlignmentData.data.markup?.labels ?? {},\n          ).map(([id, label], index) => [\n            id,\n            { label, color: markupColors[index % markupColors.length] },\n          ]),\n        ),\n      };\n    default:\n      throw new Error(`Unknown color scheme ${settings.value.colorScheme}`);\n  }\n});\n\nwatchEffect(() => {\n  const markupColumnId = settings.value.colorScheme.type === 'markup'\n    ? settings.value.colorScheme.columnId\n    : undefined;\n  if (\n    markupColumnId\n    && markupColumns.data.every(({ value }) => value !== markupColumnId)\n  ) {\n    settings.value.colorScheme = { type: 'no-color' };\n  }\n});\n\nconst error = computed(() =>\n  sequenceColumns.error\n  ?? labelColumns.error\n  ?? markupColumns.error\n  ?? multipleAlignmentData.error,\n);\n</script>\n\n<template>\n  <Toolbar\n    v-model:sequence-columns=\"selectedSequenceColumnIds\"\n    v-model:label-columns=\"selectedLabelColumnIds\"\n    v-model:settings=\"settings\"\n    :sequence-column-options=\"sequenceColumns.data.options\"\n    :label-column-options=\"labelColumns.data.options\"\n    :color-scheme-options=\"colorSchemeOptions\"\n  />\n  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error }}\n  </PlAlert>\n  <PlAlert\n    v-else-if=\"\n      !multipleAlignmentData.loading\n        && multipleAlignmentData.data.sequences.length < 2\n    \"\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(sequenceLimit) }} sequences. Only the first\n      {{ formatNumber(sequenceLimit) }} will be displayed.\n    </PlAlert>\n    <PlSplash\n      type=\"transparent\"\n      :class=\"$style.splash\"\n      :loading=\"multipleAlignmentData.loading\"\n    >\n      <template v-if=\"multipleAlignmentData.data.sequences.length\">\n        <MultiSequenceAlignmentView\n          :sequence-rows=\"multipleAlignmentData.data.sequences\"\n          :label-rows=\"multipleAlignmentData.data.labels\"\n          :markup=\"multipleAlignmentData.data.markup\"\n          :colorScheme\n          :consensus=\"settings.consensus\"\n          :seq-logo=\"settings.seqLogo\"\n        />\n        <Legend\n          v-if=\"\n            settings.legend\n              && settings.colorScheme.type !== 'no-color'\n          \"\n          :colors=\"colorScheme.colors\"\n        />\n      </template>\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","props","settings","ref","defaultSettings","sequenceColumns","reactive","useSequenceColumnsOptions","selectedSequenceColumnIds","computed","value","labelColumns","useLabelColumnsOptions","selectedLabelColumnIds","markupColumns","useMarkupColumnsOptions","multipleAlignmentData","useMultipleAlignmentData","formatNumber","colorSchemeOptions","label","colorScheme","chemicalPropertiesColorMap","_a","id","index","markupColors","watchEffect","markupColumnId","error"],"mappings":"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"}

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

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

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

@@ -0,0 +1,9 @@
+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;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=SeqLogo.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeqLogo.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/SeqLogo.vue"],"names":[],"mappings":"AAqMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,KAAK,WAAW,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;;;;AA6MF,wBAQG"}

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

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

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

@@ -0,0 +1,141 @@
+import { defineComponent as w, useTemplateRef as C, ref as E, computed as f, shallowRef as B, watchEffect as D, onBeforeUnmount as K, createElementBlock as x, openBlock as d, normalizeClass as y, createElementVNode as N, createBlock as _, createCommentVNode as G, unref as u, withCtx as R, createTextVNode as T, toDisplayString as z } from "vue";
+import { useResizeObserver as A } from "../../node_modules/.pnpm/@vueuse_core@13.3.0_vue@3.5.13_typescript@5.5.4_/node_modules/@vueuse/core/index.js";
+import { useMiPlots as L } from "./useMiPlots.js";
+import "../../lib/ui/uikit/dist/index.js";
+import O from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
+const I = /* @__PURE__ */ w({
+  __name: "SeqLogo",
+  props: {
+    residueCounts: {}
+  },
+  setup(v) {
+    const n = C("plotEl"), s = E();
+    A(n, ([{ contentRect: { width: t, height: l } }]) => {
+      s.value = { width: t, height: l };
+    });
+    const e = {
+      blue: "#549EE7",
+      red: "#E85456",
+      green: "#65BF65",
+      magenta: "#9178E1",
+      pink: "#D568D5",
+      orange: "#C59445",
+      cyan: "#62C7CC",
+      yellow: "#D5D549",
+      black: "#000000"
+    }, g = {
+      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(() => {
+      if (s.value)
+        return {
+          type: "discrete",
+          title: {
+            name: "",
+            show: !1
+          },
+          size: {
+            width: s.value.width,
+            height: s.value.height,
+            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: g }
+          }]
+        };
+    }), a = f(
+      () => {
+        const t = [], l = [], m = [];
+        for (const [h, b] of v.residueCounts.entries())
+          for (const [p, k] of Object.entries(b))
+            p !== "-" && (t.push(k), l.push(h), m.push(p));
+        return {
+          type: "columns",
+          id: "seq-logo",
+          values: { countKey: t, columnKey: l, residueKey: m }
+        };
+      }
+    ), { miplots: c, error: i } = L(), o = B();
+    return D(async () => {
+      !r.value || !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)));
+    }), K(() => {
+      var t;
+      (t = o.value) == null || t.unmount();
+    }), (t, l) => (d(), x("div", {
+      class: y(t.$style.container)
+    }, [
+      N("div", {
+        ref_key: "plotEl",
+        ref: n,
+        class: y(t.$style.plot)
+      }, null, 2),
+      u(i) ? (d(), _(u(O), {
+        key: 0,
+        type: "error"
+      }, {
+        default: R(() => [
+          T(z(u(i).message), 1)
+        ]),
+        _: 1
+      })) : G("", !0)
+    ], 2));
+  }
+});
+export {
+  I as default
+};
+//# sourceMappingURL=SeqLogo.vue2.js.map

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

@@ -0,0 +1 @@
+{"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 { useResizeObserver } from '@vueuse/core';\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\nimport { PlAlert } from '@milaboratories/uikit';\n\nconst { residueCounts } = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst size = ref<{ width: number; height: number }>();\n\nuseResizeObserver(plotEl, ([{ contentRect: { width, height } }]) => {\n  size.value = { width, height };\n});\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<Settings | undefined>(() => {\n  if (!size.value) return;\n  return ({\n    type: 'discrete',\n    title: {\n      name: '',\n      show: false,\n    },\n    size: {\n      width: size.value.width,\n      height: size.value.height,\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  });\n});\n\nconst data = computed<DataByColumns>(\n  () => {\n    const countKey: number[] = [];\n    const columnKey: number[] = [];\n    const residueKey: string[] = [];\n    for (const [columnIndex, column] of 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',\n      values: { countKey, columnKey, residueKey },\n    });\n  },\n);\n\nconst { miplots, error } = useMiPlots();\n\nconst plot = shallowRef<ChartInterface>();\n\nwatchEffect(async () => {\n  if (!settings.value || !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  <div :class=\"$style.container\">\n    <div ref=\"plotEl\" :class=\"$style.plot\" />\n    <PlAlert v-if=\"error\" type=\"error\">\n      {{ error.message }}\n    </PlAlert>\n  </div>\n</template>\n\n<style module>\n.container {\n  position: relative;\n  block-size: 80px;\n}\n\n.plot {\n  position: absolute;\n  inset: 0;\n}\n</style>\n"],"names":["plotEl","useTemplateRef","size","ref","useResizeObserver","width","height","palette","residueColors","settings","computed","data","countKey","columnKey","residueKey","columnIndex","column","__props","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,11 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_skp9j_2{position:relative;block-size:80px}._plot_skp9j_7{position:absolute;top:0;right:0;bottom:0;left:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+const t = "_container_skp9j_2", o = "_plot_skp9j_7", n = {
+  container: t,
+  plot: o
+};
+export {
+  t as container,
+  n as default,
+  o as plot
+};
+//# 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.vue.d.ts

@@ -0,0 +1,35 @@
+import { ListOptionNormalized } from '@milaboratories/uikit';
+import { PObjectId, PTableColumnId } from '@platforma-sdk/model';
+import { Settings } from './settings';
+import { ColorSchemeOption } from './types';
+type __VLS_Props = {
+    sequenceColumnOptions: ListOptionNormalized<PObjectId>[];
+    labelColumnOptions: ListOptionNormalized<PTableColumnId>[];
+    colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];
+};
+type __VLS_PublicProps = {
+    'sequenceColumns': PObjectId[];
+    'labelColumns': PTableColumnId[];
+    'settings': Settings;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:sequenceColumns": (value: PObjectId[]) => any;
+    "update:labelColumns": (value: PTableColumnId[]) => any;
+    "update:settings": (value: {
+        colorScheme: ColorSchemeOption;
+        consensus: boolean;
+        seqLogo: boolean;
+        legend: boolean;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:sequenceColumns"?: ((value: PObjectId[]) => any) | undefined;
+    "onUpdate:labelColumns"?: ((value: PTableColumnId[]) => any) | undefined;
+    "onUpdate:settings"?: ((value: {
+        colorScheme: ColorSchemeOption;
+        consensus: boolean;
+        seqLogo: boolean;
+        legend: boolean;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=Toolbar.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"names":[],"mappings":"AAwGA,OAAO,EACL,KAAK,oBAAoB,EAK1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiBjD,KAAK,WAAW,GAAG;IACjB,qBAAqB,EAAE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC;IACzD,kBAAkB,EAAE,oBAAoB,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3D,kBAAkB,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,CAAC;CAC/D,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACzB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,UAAU,EAAE,QAAQ,CAAC;CACpB,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;AAuMhB,wBAQG"}

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

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

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

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

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

@@ -0,0 +1,142 @@
+import { defineComponent as V, mergeModels as g, useModel as p, createElementBlock as q, openBlock as S, normalizeClass as a, createElementVNode as i, createVNode as s, unref as n, withCtx as t, createTextVNode as d } from "vue";
+import "../../lib/ui/uikit/dist/index.js";
+import C from "../../lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js";
+import O from "../../lib/ui/uikit/dist/components/PlDropdown/PlDropdown.vue.js";
+import f from "../../lib/ui/uikit/dist/components/PlBtnGhost/PlBtnGhost.vue.js";
+import m from "../../lib/ui/uikit/dist/components/PlCheckbox/PlCheckbox.vue.js";
+const E = /* @__PURE__ */ V({
+  __name: "Toolbar",
+  props: /* @__PURE__ */ g({
+    sequenceColumnOptions: {},
+    labelColumnOptions: {},
+    colorSchemeOptions: {}
+  }, {
+    sequenceColumns: { required: !0 },
+    sequenceColumnsModifiers: {},
+    labelColumns: { required: !0 },
+    labelColumnsModifiers: {},
+    settings: { required: !0 },
+    settingsModifiers: {}
+  }),
+  emits: ["update:sequenceColumns", "update:labelColumns", "update:settings"],
+  setup(r) {
+    const b = p(
+      r,
+      "sequenceColumns"
+    ), v = p(
+      r,
+      "labelColumns"
+    ), u = p(
+      r,
+      "settings"
+    );
+    return (l, e) => (S(), q("div", {
+      class: a(l.$style.container)
+    }, [
+      i("div", {
+        class: a(l.$style.line)
+      }, [
+        i("div", {
+          class: a(l.$style.section)
+        }, [
+          s(n(C), {
+            modelValue: b.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (o) => b.value = o),
+            label: "Sequence Columns",
+            options: l.sequenceColumnOptions,
+            disabled: !l.sequenceColumnOptions.length,
+            clearable: ""
+          }, null, 8, ["modelValue", "options", "disabled"]),
+          s(n(C), {
+            modelValue: v.value,
+            "onUpdate:modelValue": e[1] || (e[1] = (o) => v.value = o),
+            label: "Label Columns",
+            options: l.labelColumnOptions,
+            disabled: !l.labelColumnOptions.length,
+            clearable: ""
+          }, null, 8, ["modelValue", "options", "disabled"]),
+          s(n(O), {
+            modelValue: u.value.colorScheme,
+            "onUpdate:modelValue": e[2] || (e[2] = (o) => u.value.colorScheme = o),
+            label: "Color Scheme",
+            options: l.colorSchemeOptions
+          }, null, 8, ["modelValue", "options"])
+        ], 2),
+        i("div", {
+          class: a(l.$style.buttons)
+        }, [
+          s(n(f), { icon: "settings" }, {
+            default: t(() => e[6] || (e[6] = [
+              d("Settings")
+            ])),
+            _: 1
+          }),
+          s(n(f), { icon: "export" }, {
+            default: t(() => e[7] || (e[7] = [
+              d("Export")
+            ])),
+            _: 1
+          })
+        ], 2)
+      ], 2),
+      i("div", {
+        class: a(l.$style.line)
+      }, [
+        i("div", {
+          class: a(l.$style.section)
+        }, [
+          s(n(m), {
+            modelValue: u.value.seqLogo,
+            "onUpdate:modelValue": e[3] || (e[3] = (o) => u.value.seqLogo = o)
+          }, {
+            default: t(() => e[8] || (e[8] = [
+              d("Seq logo")
+            ])),
+            _: 1
+          }, 8, ["modelValue"]),
+          s(n(m), {
+            modelValue: u.value.consensus,
+            "onUpdate:modelValue": e[4] || (e[4] = (o) => u.value.consensus = o)
+          }, {
+            default: t(() => e[9] || (e[9] = [
+              d("Consensus")
+            ])),
+            _: 1
+          }, 8, ["modelValue"]),
+          s(n(m), {
+            "model-value": !1,
+            disabled: ""
+          }, {
+            default: t(() => e[10] || (e[10] = [
+              d("Navigator")
+            ])),
+            _: 1
+          }),
+          s(n(m), {
+            "model-value": !1,
+            disabled: ""
+          }, {
+            default: t(() => e[11] || (e[11] = [
+              d("Tree")
+            ])),
+            _: 1
+          }),
+          s(n(m), {
+            modelValue: u.value.legend,
+            "onUpdate:modelValue": e[5] || (e[5] = (o) => u.value.legend = o),
+            disabled: u.value.colorScheme.type === "no-color"
+          }, {
+            default: t(() => e[12] || (e[12] = [
+              d(" Legend ")
+            ])),
+            _: 1
+          }, 8, ["modelValue", "disabled"])
+        ], 2)
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  E as default
+};
+//# sourceMappingURL=Toolbar.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  type ListOptionNormalized,\n  PlBtnGhost,\n  PlCheckbox,\n  PlDropdown,\n  PlDropdownMulti,\n} from '@milaboratories/uikit';\nimport type { PObjectId, PTableColumnId } from '@platforma-sdk/model';\nimport type { Settings } from './settings';\nimport type { ColorSchemeOption } from './types';\n\nconst sequenceColumns = defineModel<PObjectId[]>(\n  'sequenceColumns',\n  { required: true },\n);\n\nconst labelColumns = defineModel<PTableColumnId[]>(\n  'labelColumns',\n  { required: true },\n);\n\nconst settings = defineModel<Settings>(\n  'settings',\n  { required: true },\n);\n\ndefineProps<{\n  sequenceColumnOptions: ListOptionNormalized<PObjectId>[];\n  labelColumnOptions: ListOptionNormalized<PTableColumnId>[];\n  colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];\n}>();\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <div :class=\"$style.line\">\n      <div :class=\"$style.section\">\n        <PlDropdownMulti\n          v-model=\"sequenceColumns\"\n          label=\"Sequence Columns\"\n          :options=\"sequenceColumnOptions\"\n          :disabled=\"!sequenceColumnOptions.length\"\n          clearable\n        />\n        <PlDropdownMulti\n          v-model=\"labelColumns\"\n          label=\"Label Columns\"\n          :options=\"labelColumnOptions\"\n          :disabled=\"!labelColumnOptions.length\"\n          clearable\n        />\n        <PlDropdown\n          v-model=\"settings.colorScheme\"\n          label=\"Color Scheme\"\n          :options=\"colorSchemeOptions\"\n        />\n      </div>\n      <div :class=\"$style.buttons\">\n        <PlBtnGhost icon=\"settings\">Settings</PlBtnGhost>\n        <PlBtnGhost icon=\"export\">Export</PlBtnGhost>\n      </div>\n    </div>\n    <div :class=\"$style.line\">\n      <div :class=\"$style.section\">\n        <PlCheckbox v-model=\"settings.seqLogo\">Seq logo</PlCheckbox>\n        <PlCheckbox v-model=\"settings.consensus\">Consensus</PlCheckbox>\n        <PlCheckbox :model-value=\"false\" disabled>Navigator</PlCheckbox>\n        <PlCheckbox :model-value=\"false\" disabled>Tree</PlCheckbox>\n        <PlCheckbox\n          v-model=\"settings.legend\"\n          :disabled=\"settings.colorScheme.type === 'no-color'\"\n        >\n          Legend\n        </PlCheckbox>\n      </div>\n    </div>\n  </div>\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</style>\n"],"names":["sequenceColumns","_useModel","labelColumns","__props","settings"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAkBC;AAAAA;MACtB;AAAA,IAEF,GAEMC,IAAeD;AAAAA,MACnBE;AAAA,MAAA;AAAA,IAEF,GAEMC,IAAWH;AAAAA,MAChBE;AAAA,MAAC;AAAA,IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,15 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1mjcu_2{display:flex;flex-direction:column;gap:24px}._line_1mjcu_8{display:flex;justify-content:space-between}._section_1mjcu_13{display:flex;flex-wrap:wrap;gap:24px}._buttons_1mjcu_19{display:flex}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+const n = "_container_1mjcu_2", t = "_line_1mjcu_8", c = "_section_1mjcu_13", o = "_buttons_1mjcu_19", s = {
+  container: n,
+  line: t,
+  section: c,
+  buttons: o
+};
+export {
+  o as buttons,
+  n as container,
+  s as default,
+  t as line,
+  c as section
+};
+//# sourceMappingURL=Toolbar.vue3.js.map

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

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