@platforma-sdk/ui-vue 1.42.19 → 1.42.20

package/dist/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAppErrorNotificationAlert.vue.js","sources":["../../../src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BlockOutputsBase } from '@platforma-sdk/model';\nimport type { OutputErrors } from '../../types';\n// @TODO module\nimport './pl-app-error-notification-alert.scss';\nimport { PlBtnPrimary, PlDialogModal, PlNotificationAlert, PlSpacer, PlLogView } from '@milaboratories/uikit';\nimport { computed, ref, watch } from 'vue';\n\nexport type FullMessage = { fullMessage: string };\n\nconst props = defineProps<{ errors: OutputErrors<BlockOutputsBase> }>();\n\nconst isModalOpen = ref(false);\n\nconst isAlertOpen = ref(true);\n\nconst existingErrors = computed(() => Object.entries(props.errors).filter((item) => !!item[1]));\n\nfunction showErrors() {\n  isModalOpen.value = true;\n}\n\n// @TODO (temp)\nwatch(\n  () => props.errors,\n  (errors) => {\n    isAlertOpen.value = Object.values(errors).some((v) => !!v);\n  },\n  { immediate: true, deep: true },\n);\n</script>\n<template>\n  <div class=\"pl-app-notification-alert\">\n    <PlDialogModal v-model=\"isModalOpen\" width=\"720px\" style=\"max-height: 100vh\">\n      <template #title> Errors </template>\n      <div class=\"pl-app-notification-alert__content\">\n        <template v-for=\"item in existingErrors\" :key=\"item[0]\">\n          <div class=\"pl-app-notification-alert__item\">\n            <div class=\"pl-app-notification-alert__title\">Block output: {{ item[0] }}</div>\n            <PlLogView\n              :value=\"item[1]?.message\"\n              :valueToCopy=\"'fullMessage' in (item[1] ?? {}) ? (item[1] as unknown as FullMessage).fullMessage : item[1]?.message\"\n              :download-filename=\"`output-${item[0]}-error.txt`\"\n            />\n          </div>\n        </template>\n      </div>\n    </PlDialogModal>\n\n    <PlNotificationAlert v-model=\"isAlertOpen\" type=\"error\" closable>\n      Some outputs have errors.\n      <template #actions>\n        <PlBtnPrimary icon=\"arrow-right\" @click=\"showErrors\">See errors</PlBtnPrimary>\n        <PlSpacer />\n      </template>\n    </PlNotificationAlert>\n  </div>\n</template>\n"],"names":["props","__props","isModalOpen","ref","isAlertOpen","existingErrors","computed","item","showErrors","watch","errors","v"],"mappings":";;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,GAERC,IAAcC,EAAI,EAAK,GAEvBC,IAAcD,EAAI,EAAI,GAEtBE,IAAiBC,EAAS,MAAM,OAAO,QAAQN,EAAM,MAAM,EAAE,OAAO,CAACO,MAAS,CAAC,CAACA,EAAK,CAAC,CAAC,CAAC;AAE9F,aAASC,IAAa;AACpB,MAAAN,EAAY,QAAQ;AAAA,IAAA;AAItB,WAAAO;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,CAACU,MAAW;AACE,QAAAN,EAAA,QAAQ,OAAO,OAAOM,CAAM,EAAE,KAAK,CAACC,MAAM,CAAC,CAACA,CAAC;AAAA,MAC3D;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlAppErrorNotificationAlert.vue.js","sources":["../../../src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BlockOutputsBase } from '@platforma-sdk/model';\nimport type { OutputErrors } from '../../types';\n// @TODO module\nimport './pl-app-error-notification-alert.scss';\nimport { PlBtnPrimary, PlDialogModal, PlNotificationAlert, PlSpacer, PlLogView } from '@milaboratories/uikit';\nimport { computed, ref, watch } from 'vue';\n\nexport type FullMessage = { fullMessage: string };\n\nconst props = defineProps<{ errors: OutputErrors<BlockOutputsBase> }>();\n\nconst isModalOpen = ref(false);\n\nconst isAlertOpen = ref(true);\n\nconst existingErrors = computed(() => Object.entries(props.errors).filter((item) => !!item[1]));\n\nfunction showErrors() {\n  isModalOpen.value = true;\n}\n\n// @TODO (temp)\nwatch(\n  () => props.errors,\n  (errors) => {\n    isAlertOpen.value = Object.values(errors).some((v) => !!v);\n  },\n  { immediate: true, deep: true },\n);\n</script>\n<template>\n  <div class=\"pl-app-notification-alert\">\n    <PlDialogModal v-model=\"isModalOpen\" width=\"720px\" style=\"max-height: 100vh\">\n      <template #title> Errors </template>\n      <div class=\"pl-app-notification-alert__content\">\n        <template v-for=\"item in existingErrors\" :key=\"item[0]\">\n          <div class=\"pl-app-notification-alert__item\">\n            <div class=\"pl-app-notification-alert__title\">Block output: {{ item[0] }}</div>\n            <PlLogView\n              :value=\"item[1]?.message\"\n              :valueToCopy=\"'fullMessage' in (item[1] ?? {}) ? (item[1] as unknown as FullMessage).fullMessage : item[1]?.message\"\n              :download-filename=\"`output-${item[0]}-error.txt`\"\n            />\n          </div>\n        </template>\n      </div>\n    </PlDialogModal>\n\n    <PlNotificationAlert v-model=\"isAlertOpen\" type=\"error\" closable>\n      Some outputs have errors.\n      <template #actions>\n        <PlBtnPrimary icon=\"arrow-right\" @click=\"showErrors\">See errors</PlBtnPrimary>\n        <PlSpacer />\n      </template>\n    </PlNotificationAlert>\n  </div>\n</template>\n"],"names":["props","__props","isModalOpen","ref","isAlertOpen","existingErrors","computed","item","showErrors","watch","errors","v"],"mappings":";;;;;;;;;AAUA,UAAMA,IAAQC,GAERC,IAAcC,EAAI,EAAK,GAEvBC,IAAcD,EAAI,EAAI,GAEtBE,IAAiBC,EAAS,MAAM,OAAO,QAAQN,EAAM,MAAM,EAAE,OAAO,CAACO,MAAS,CAAC,CAACA,EAAK,CAAC,CAAC,CAAC;AAE9F,aAASC,IAAa;AACpB,MAAAN,EAAY,QAAQ;AAAA,IACtB;AAGA,WAAAO;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,CAACU,MAAW;AACV,QAAAN,EAAY,QAAQ,OAAO,OAAOM,CAAM,EAAE,KAAK,CAACC,MAAM,CAAC,CAACA,CAAC;AAAA,MAC3D;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAA;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlAppErrorNotificationAlert/index.d.ts

@@ -1,2 +1 @@
 export { default as PlAppErrorNotificationAlert } from './PlAppErrorNotificationAlert.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -6,4 +6,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     plotEl: HTMLDivElement;
 }, any>;
 export default _default;
-//# sourceMappingURL=Consensus.vue.d.ts.map

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

@@ -1,8 +1,7 @@
-import { defineComponent as g, useTemplateRef as w, computed as c, shallowRef as k, watchEffect as E, onBeforeUnmount as x, createBlock as A, createElementBlock as B, unref as f, openBlock as h, withCtx as O, createTextVNode as j, toDisplayString as v, normalizeClass as C, createElementVNode as b } from "vue";
-import "../../lib/ui/uikit/dist/index.js";
-import { useMiPlots as D } from "./useMiPlots.js";
-import G from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
-const N = /* @__PURE__ */ g({
+import { defineComponent as g, useTemplateRef as w, computed as c, shallowRef as k, watchEffect as E, onBeforeUnmount as x, createBlock as A, createElementBlock as O, unref as f, openBlock as h, withCtx as j, createTextVNode as B, toDisplayString as v, normalizeClass as C, createElementVNode as b } from "vue";
+import { PlAlert as D } from "@milaboratories/uikit";
+import { useMiPlots as G } from "./useMiPlots.js";
+const $ = /* @__PURE__ */ g({
   __name: "Consensus",
   props: {
     residueCounts: {}
@@ -87,21 +86,21 @@ const N = /* @__PURE__ */ g({
           values: { countKey: e, columnKey: o }
         };
       }
-    ), l = k(), { miplots: p, error: y } = D();
+    ), l = k(), { miplots: p, error: y } = G();
     return E(async () => {
       !a.value || !r.value || !p.value || (l.value ? l.value.updateSettingsAndData(d.value, a.value) : (l.value = p.value.newPlot(d.value, a.value), l.value.mount(r.value)));
     }), x(() => {
       var e;
       (e = l.value) == null || e.unmount();
-    }), (e, o) => f(y) ? (h(), A(f(G), {
+    }), (e, o) => f(y) ? (h(), A(f(D), {
       key: 0,
       type: "error"
     }, {
-      default: O(() => [
-        j(v(f(y).message), 1)
+      default: j(() => [
+        B(v(f(y).message), 1)
       ]),
       _: 1
-    })) : (h(), B("div", {
+    })) : (h(), O("div", {
       key: 1,
       class: C(e.$style.container)
     }, [
@@ -116,6 +115,6 @@ const N = /* @__PURE__ */ g({
   }
 });
 export {
-  N as default
+  $ as default
 };
 //# sourceMappingURL=Consensus.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Consensus.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Consensus.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  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst { residueCounts } = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst columns = computed(() => {\n  return residueCounts.map((column) => {\n    let totalCount = 0;\n    let topResidue = { label: '', count: 0 };\n    for (const [residue, count] of Object.entries(column)) {\n      totalCount += count;\n      if (residue === '-') continue;\n      if (count > topResidue.count) topResidue = { label: residue, count };\n    }\n    const confidence = CSS.percent(topResidue.count / totalCount * 100);\n    return {\n      label: topResidue.label,\n      color: `color-mix(in oklab, ${confidence} #3056AE, #C1CDE9)`,\n    };\n  });\n});\n\nconst settings = computed<Settings | undefined>(() => {\n  const width = residueCounts.length * 20;\n  return ({\n    type: 'discrete',\n    y: {\n      type: 'column',\n      value: 'countKey',\n    },\n    legend: { show: false },\n    primaryGrouping: {\n      columnName: {\n        type: 'column',\n        value: 'columnKey',\n      },\n      order: residueCounts.map((_, i) => i),\n      inheritedAes: Object.fromEntries(\n        columns.value.map(({ color }) => ({ fillColor: color })).entries(),\n      ),\n    },\n    layers: [{\n      type: 'bar',\n      height: 'max',\n      aes: {\n        ...residueCounts.length && {\n          width: (width - residueCounts.length + 1) / residueCounts.length,\n        },\n        fillColor: {\n          type: 'primaryGrouping',\n        },\n        lineColor: '#ffffff',\n      },\n    }],\n    title: {\n      name: '',\n      show: false,\n    },\n    size: {\n      width,\n      height: 60,\n      outerOffset: 0,\n      innerOffset: 0,\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    frame: {\n      type: 'empty',\n    },\n  });\n});\n\nconst data = computed<DataByColumns>(\n  () => {\n    const countKey: number[] = [];\n    const columnKey: number[] = [];\n    for (const [columnIndex, column] of residueCounts.entries()) {\n      for (const [residue, count] of Object.entries(column)) {\n        if (residue === '-') continue;\n        countKey.push(residue === ' ' ? 0 : count);\n        columnKey.push(columnIndex);\n      }\n    }\n    return ({\n      type: 'columns',\n      id: `consensus-${crypto.randomUUID()}`,\n      values: { countKey, columnKey },\n    });\n  },\n);\n\nconst plot = shallowRef<ChartInterface>();\n\nconst { miplots, error } = useMiPlots();\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  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else :class=\"$style.container\">\n    <div :class=\"$style.labels\">\n      {{ columns.map(column => column.label).join('') }}\n    </div>\n    <div ref=\"plotEl\" />\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.labels {\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: 24px;\n  letter-spacing: 11.6px;\n  text-indent: 5.8px;\n  margin-inline-end: -5.8px;\n}\n</style>\n"],"names":["plotEl","useTemplateRef","columns","computed","__props","column","totalCount","topResidue","residue","count","confidence","settings","width","_","i","color","data","countKey","columnKey","columnIndex","plot","shallowRef","miplots","error","useMiPlots","watchEffect","onBeforeUnmount","_a"],"mappings":"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"}
+{"version":3,"file":"Consensus.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Consensus.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  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst { residueCounts } = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst columns = computed(() => {\n  return residueCounts.map((column) => {\n    let totalCount = 0;\n    let topResidue = { label: '', count: 0 };\n    for (const [residue, count] of Object.entries(column)) {\n      totalCount += count;\n      if (residue === '-') continue;\n      if (count > topResidue.count) topResidue = { label: residue, count };\n    }\n    const confidence = CSS.percent(topResidue.count / totalCount * 100);\n    return {\n      label: topResidue.label,\n      color: `color-mix(in oklab, ${confidence} #3056AE, #C1CDE9)`,\n    };\n  });\n});\n\nconst settings = computed<Settings | undefined>(() => {\n  const width = residueCounts.length * 20;\n  return ({\n    type: 'discrete',\n    y: {\n      type: 'column',\n      value: 'countKey',\n    },\n    legend: { show: false },\n    primaryGrouping: {\n      columnName: {\n        type: 'column',\n        value: 'columnKey',\n      },\n      order: residueCounts.map((_, i) => i),\n      inheritedAes: Object.fromEntries(\n        columns.value.map(({ color }) => ({ fillColor: color })).entries(),\n      ),\n    },\n    layers: [{\n      type: 'bar',\n      height: 'max',\n      aes: {\n        ...residueCounts.length && {\n          width: (width - residueCounts.length + 1) / residueCounts.length,\n        },\n        fillColor: {\n          type: 'primaryGrouping',\n        },\n        lineColor: '#ffffff',\n      },\n    }],\n    title: {\n      name: '',\n      show: false,\n    },\n    size: {\n      width,\n      height: 60,\n      outerOffset: 0,\n      innerOffset: 0,\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    frame: {\n      type: 'empty',\n    },\n  });\n});\n\nconst data = computed<DataByColumns>(\n  () => {\n    const countKey: number[] = [];\n    const columnKey: number[] = [];\n    for (const [columnIndex, column] of residueCounts.entries()) {\n      for (const [residue, count] of Object.entries(column)) {\n        if (residue === '-') continue;\n        countKey.push(residue === ' ' ? 0 : count);\n        columnKey.push(columnIndex);\n      }\n    }\n    return ({\n      type: 'columns',\n      id: `consensus-${crypto.randomUUID()}`,\n      values: { countKey, columnKey },\n    });\n  },\n);\n\nconst plot = shallowRef<ChartInterface>();\n\nconst { miplots, error } = useMiPlots();\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  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else :class=\"$style.container\">\n    <div :class=\"$style.labels\">\n      {{ columns.map(column => column.label).join('') }}\n    </div>\n    <div ref=\"plotEl\" />\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.labels {\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: 24px;\n  letter-spacing: 11.6px;\n  text-indent: 5.8px;\n  margin-inline-end: -5.8px;\n}\n</style>\n"],"names":["plotEl","useTemplateRef","columns","computed","__props","column","totalCount","topResidue","residue","count","confidence","settings","width","_","i","color","data","countKey","columnKey","columnIndex","plot","shallowRef","miplots","error","useMiPlots","watchEffect","onBeforeUnmount","_a"],"mappings":"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"}

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

@@ -4,4 +4,3 @@ type __VLS_Props = {
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=Legend.vue.d.ts.map

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

@@ -16,4 +16,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
     rootRef: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=MultiSequenceAlignmentView.vue.d.ts.map

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

@@ -1,5 +1,5 @@
 import { defineComponent as I, useCssVars as R, computed as f, useTemplateRef as N, createElementBlock as l, openBlock as s, normalizeClass as n, createElementVNode as t, createBlock as g, createCommentVNode as a, Fragment as i, renderList as d, normalizeStyle as b, toDisplayString as m } from "vue";
-import { useObjectUrl as L } from "../../node_modules/.pnpm/@vueuse_core@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/core/index.js";
+import { useObjectUrl as L } from "@vueuse/core";
 import S from "./Consensus.vue.js";
 import V from "./Legend.vue.js";
 import z from "./SeqLogo.vue.js";

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSequenceAlignmentView.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useObjectUrl } from '@vueuse/core';\nimport { computed, useTemplateRef } from 'vue';\nimport Consensus from './Consensus.vue';\nimport Legend from './Legend.vue';\nimport SeqLogo from './SeqLogo.vue';\nimport type { HighlightLegend, ResidueCounts } from './types';\n\nconst { sequences, highlightImage } = defineProps<{\n  sequences: string[];\n  sequenceNames: string[];\n  labelRows: string[][];\n  residueCounts: ResidueCounts;\n  highlightImage: {\n    blob: Blob;\n    legend: HighlightLegend;\n  } | undefined;\n  widgets: ('consensus' | 'seqLogo' | 'legend')[];\n}>();\n\nconst rootEl = useTemplateRef('rootRef');\ndefineExpose({ rootEl });\n\nconst highlightImageObjectUrl = useObjectUrl(() => highlightImage?.blob);\nconst highlightImageCssUrl = computed(() =>\n  highlightImageObjectUrl.value\n    ? `url('${highlightImageObjectUrl.value}')`\n    : 'none',\n);\n\nconst sequenceLengths = computed(() =>\n  sequences.at(0)?.split(' ').map(({ length }) => length),\n);\n</script>\n\n<template>\n  <div ref=\"rootRef\" :class=\"$style.root\">\n    <div :class=\"['pl-scrollable', $style.table]\">\n      <div :class=\"$style.corner\">\n        <div :class=\"$style['label-scroll-indicator']\" />\n      </div>\n      <div :class=\"$style.header\">\n        <div v-if=\"sequenceNames.length > 1\" :class=\"$style['sequence-names']\">\n          <span\n            v-for=\"(name, index) of sequenceNames\"\n            :key=\"index\"\n            :style=\"{\n              inlineSize: ((sequenceLengths?.at(index) ?? 0) * 20)\n                + 'px',\n            }\"\n          >{{ name }}</span>\n        </div>\n        <Consensus v-if=\"widgets.includes('consensus')\" :residue-counts />\n        <SeqLogo v-if=\"widgets.includes('seqLogo')\" :residue-counts />\n      </div>\n      <div :class=\"$style.labels\">\n        <div :class=\"$style['labels-grid']\">\n          <template v-for=\"(labelRow, rowIndex) of labelRows\">\n            <div\n              v-for=\"(label, labelIndex) of labelRow\"\n              :key=\"labelIndex\"\n              :style=\"{ gridRow: rowIndex + 1 }\"\n            >\n              {{ label }}\n            </div>\n          </template>\n        </div>\n      </div>\n      <div :class=\"$style.sequences\">\n        <div\n          v-for=\"(sequence, index) of sequences\"\n          :key=\"index\"\n        >\n          {{ sequence }}\n        </div>\n      </div>\n    </div>\n    <Legend\n      v-if=\"widgets?.includes('legend') && highlightImage?.legend\"\n      :legend=\"highlightImage.legend\"\n    />\n  </div>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-block-size: 0;\n  -webkit-print-color-adjust: exact;\n  print-color-adjust: exact;\n\n  &[data-pre-print] {\n    .table {\n      container-type: unset;\n    }\n    .labels {\n      max-inline-size: unset;\n    }\n  }\n}\n\n.table {\n  container-type: inline-size;\n  display: grid;\n  grid-template-areas:\n    \"corner header\"\n    \"labels sequences\";\n  justify-content: start;\n  timeline-scope: --msa-labels-scroll;\n  @media print {\n    overflow: visible;\n  }\n}\n\n.corner {\n  grid-area: corner;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  z-index: 2;\n}\n\n.label-scroll-indicator {\n  position: absolute;\n  inset-inline-end: 0;\n  block-size: 100cqb;\n  inline-size: 8px;\n  animation-name: hide;\n  animation-timeline: --msa-labels-scroll;\n  visibility: hidden;\n  background: #fff;\n  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.10);\n}\n\n.header {\n  grid-area: header;\n  background-color: #fff;\n  position: sticky;\n  inset-block-start: 0;\n  z-index: 1;\n}\n\n.sequence-names {\n  display: flex;\n  font-weight: 700;\n  line-height: 20px;\n  margin-block-end: 4px;\n  gap: 20px;\n}\n\n.labels {\n  grid-area: labels;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  inline-size: max-content;\n  max-inline-size: 30cqi;\n  overflow: scroll;\n  scrollbar-width: none;\n  overscroll-behavior-inline: none;\n  scroll-timeline: --msa-labels-scroll inline;\n}\n\n.labels-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  font-family: Spline Sans Mono;\n  line-height: 24px;\n  text-wrap: nowrap;\n\n  > * {\n    padding-inline-end: 12px;\n  }\n}\n\n.sequences {\n  grid-area: sequences;\n  display: flex;\n  flex-direction: column;\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: 24px;\n  letter-spacing: 11.6px;\n  text-indent: 5.8px;\n  margin-inline-end: -5.8px;\n  background-image: v-bind(highlightImageCssUrl);\n  background-repeat: no-repeat;\n  background-size: calc(100% - 5.8px) 100%;\n}\n\n@keyframes hide {\n  from {\n    visibility: visible;\n  }\n  to {\n    visibility: hidden;\n  }\n}\n</style>\n"],"names":["rootEl","useTemplateRef","__expose","highlightImageObjectUrl","useObjectUrl","_a","__props","highlightImageCssUrl","computed","sequenceLengths","length"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBM,UAAAA,IAASC,EAAe,SAAS;AAC1B,IAAAC,EAAA,EAAE,QAAAF,GAAQ;AAEvB,UAAMG,IAA0BC,EAAa,MAAM;;AAAA,cAAAC,IAAAC,EAAA,mBAAA,gBAAAD,EAAgB;AAAA,KAAI,GACjEE,IAAuBC;AAAA,MAAS,MACpCL,EAAwB,QACpB,QAAQA,EAAwB,KAAK,OACrC;AAAA,IACN,GAEMM,IAAkBD;AAAA,MAAS,MAAA;;AAC/B,gBAAAH,IAAAC,YAAU,GAAG,CAAC,MAAd,gBAAAD,EAAiB,MAAM,KAAK,IAAI,CAAC,EAAE,QAAAK,QAAaA;AAAA;AAAA,IAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MultiSequenceAlignmentView.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useObjectUrl } from '@vueuse/core';\nimport { computed, useTemplateRef } from 'vue';\nimport Consensus from './Consensus.vue';\nimport Legend from './Legend.vue';\nimport SeqLogo from './SeqLogo.vue';\nimport type { HighlightLegend, ResidueCounts } from './types';\n\nconst { sequences, highlightImage } = defineProps<{\n  sequences: string[];\n  sequenceNames: string[];\n  labelRows: string[][];\n  residueCounts: ResidueCounts;\n  highlightImage: {\n    blob: Blob;\n    legend: HighlightLegend;\n  } | undefined;\n  widgets: ('consensus' | 'seqLogo' | 'legend')[];\n}>();\n\nconst rootEl = useTemplateRef('rootRef');\ndefineExpose({ rootEl });\n\nconst highlightImageObjectUrl = useObjectUrl(() => highlightImage?.blob);\nconst highlightImageCssUrl = computed(() =>\n  highlightImageObjectUrl.value\n    ? `url('${highlightImageObjectUrl.value}')`\n    : 'none',\n);\n\nconst sequenceLengths = computed(() =>\n  sequences.at(0)?.split(' ').map(({ length }) => length),\n);\n</script>\n\n<template>\n  <div ref=\"rootRef\" :class=\"$style.root\">\n    <div :class=\"['pl-scrollable', $style.table]\">\n      <div :class=\"$style.corner\">\n        <div :class=\"$style['label-scroll-indicator']\" />\n      </div>\n      <div :class=\"$style.header\">\n        <div v-if=\"sequenceNames.length > 1\" :class=\"$style['sequence-names']\">\n          <span\n            v-for=\"(name, index) of sequenceNames\"\n            :key=\"index\"\n            :style=\"{\n              inlineSize: ((sequenceLengths?.at(index) ?? 0) * 20)\n                + 'px',\n            }\"\n          >{{ name }}</span>\n        </div>\n        <Consensus v-if=\"widgets.includes('consensus')\" :residue-counts />\n        <SeqLogo v-if=\"widgets.includes('seqLogo')\" :residue-counts />\n      </div>\n      <div :class=\"$style.labels\">\n        <div :class=\"$style['labels-grid']\">\n          <template v-for=\"(labelRow, rowIndex) of labelRows\">\n            <div\n              v-for=\"(label, labelIndex) of labelRow\"\n              :key=\"labelIndex\"\n              :style=\"{ gridRow: rowIndex + 1 }\"\n            >\n              {{ label }}\n            </div>\n          </template>\n        </div>\n      </div>\n      <div :class=\"$style.sequences\">\n        <div\n          v-for=\"(sequence, index) of sequences\"\n          :key=\"index\"\n        >\n          {{ sequence }}\n        </div>\n      </div>\n    </div>\n    <Legend\n      v-if=\"widgets?.includes('legend') && highlightImage?.legend\"\n      :legend=\"highlightImage.legend\"\n    />\n  </div>\n</template>\n\n<style module>\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-block-size: 0;\n  -webkit-print-color-adjust: exact;\n  print-color-adjust: exact;\n\n  &[data-pre-print] {\n    .table {\n      container-type: unset;\n    }\n    .labels {\n      max-inline-size: unset;\n    }\n  }\n}\n\n.table {\n  container-type: inline-size;\n  display: grid;\n  grid-template-areas:\n    \"corner header\"\n    \"labels sequences\";\n  justify-content: start;\n  timeline-scope: --msa-labels-scroll;\n  @media print {\n    overflow: visible;\n  }\n}\n\n.corner {\n  grid-area: corner;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  z-index: 2;\n}\n\n.label-scroll-indicator {\n  position: absolute;\n  inset-inline-end: 0;\n  block-size: 100cqb;\n  inline-size: 8px;\n  animation-name: hide;\n  animation-timeline: --msa-labels-scroll;\n  visibility: hidden;\n  background: #fff;\n  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.10);\n}\n\n.header {\n  grid-area: header;\n  background-color: #fff;\n  position: sticky;\n  inset-block-start: 0;\n  z-index: 1;\n}\n\n.sequence-names {\n  display: flex;\n  font-weight: 700;\n  line-height: 20px;\n  margin-block-end: 4px;\n  gap: 20px;\n}\n\n.labels {\n  grid-area: labels;\n  background-color: #fff;\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  inline-size: max-content;\n  max-inline-size: 30cqi;\n  overflow: scroll;\n  scrollbar-width: none;\n  overscroll-behavior-inline: none;\n  scroll-timeline: --msa-labels-scroll inline;\n}\n\n.labels-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  font-family: Spline Sans Mono;\n  line-height: 24px;\n  text-wrap: nowrap;\n\n  > * {\n    padding-inline-end: 12px;\n  }\n}\n\n.sequences {\n  grid-area: sequences;\n  display: flex;\n  flex-direction: column;\n  font-family: Spline Sans Mono;\n  font-weight: 600;\n  line-height: 24px;\n  letter-spacing: 11.6px;\n  text-indent: 5.8px;\n  margin-inline-end: -5.8px;\n  background-image: v-bind(highlightImageCssUrl);\n  background-repeat: no-repeat;\n  background-size: calc(100% - 5.8px) 100%;\n}\n\n@keyframes hide {\n  from {\n    visibility: visible;\n  }\n  to {\n    visibility: hidden;\n  }\n}\n</style>\n"],"names":["rootEl","useTemplateRef","__expose","highlightImageObjectUrl","useObjectUrl","_a","__props","highlightImageCssUrl","computed","sequenceLengths","length"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,UAAMA,IAASC,EAAe,SAAS;AACvC,IAAAC,EAAa,EAAE,QAAAF,GAAQ;AAEvB,UAAMG,IAA0BC,EAAa,MAAA;;AAAM,cAAAC,IAAAC,EAAA,mBAAA,gBAAAD,EAAgB;AAAA,KAAI,GACjEE,IAAuBC;AAAA,MAAS,MACpCL,EAAwB,QACpB,QAAQA,EAAwB,KAAK,OACrC;AAAA,IAAA,GAGAM,IAAkBD;AAAA,MAAS,MAAA;;AAC/B,gBAAAH,IAAAC,YAAU,GAAG,CAAC,MAAd,gBAAAD,EAAiB,MAAM,KAAK,IAAI,CAAC,EAAE,QAAAK,EAAA,MAAaA;AAAA;AAAA,IAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -61,4 +61,3 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     }, {}, {}, {}, {}> | null;
 }, any>;
 export default _default;
-//# sourceMappingURL=PlMultiSequenceAlignment.vue.d.ts.map

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

@@ -1,15 +1,13 @@
-import { defineComponent as U, mergeModels as J, useModel as G, onBeforeMount as H, reactive as h, computed as R, watchEffect as L, useTemplateRef as K, createElementBlock as N, openBlock as p, Fragment as T, createVNode as V, createBlock as S, unref as m, withCtx as b, createTextVNode as w, toDisplayString as q, createCommentVNode as j, normalizeClass as Q } from "vue";
-import { isJsonEqual as v } from "../../lib/util/helpers/dist/index.js";
-import "../../lib/ui/uikit/dist/index.js";
-import { getRawPlatformaInstance as W } from "../../sdk/model/dist/index.js";
-import { useSequenceColumnsOptions as X, useLabelColumnsOptions as Y, useMarkupColumnsOptions as Z, useMultipleAlignmentData as ee, sequenceLimit as A } from "./data.js";
-import { runMigrations as te } from "./migrations.js";
-import oe from "./MultiSequenceAlignmentView.vue.js";
-import { defaultSettings as B } from "./settings.js";
-import ne from "./Toolbar.vue.js";
-import P from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
-import se from "../../lib/ui/uikit/dist/components/PlSplash/PlSplash.vue.js";
-const he = /* @__PURE__ */ U({
+import { defineComponent as U, mergeModels as J, useModel as G, onBeforeMount as H, reactive as h, computed as R, watchEffect as A, useTemplateRef as K, createElementBlock as L, openBlock as p, Fragment as N, createVNode as T, createBlock as S, unref as m, withCtx as b, createTextVNode as w, toDisplayString as q, createCommentVNode as V, normalizeClass as Q } from "vue";
+import { isJsonEqual as v } from "../../lib/util/helpers/dist/objects.js";
+import { PlAlert as P, PlSplash as W } from "@milaboratories/uikit";
+import { getRawPlatformaInstance as X } from "@platforma-sdk/model";
+import { useSequenceColumnsOptions as Y, useLabelColumnsOptions as Z, useMarkupColumnsOptions as ee, useMultipleAlignmentData as te, sequenceLimit as j } from "./data.js";
+import { runMigrations as oe } from "./migrations.js";
+import ne from "./MultiSequenceAlignmentView.vue.js";
+import { defaultSettings as D } from "./settings.js";
+import se from "./Toolbar.vue.js";
+const fe = /* @__PURE__ */ U({
   __name: "PlMultiSequenceAlignment",
   props: /* @__PURE__ */ J({
     pFrame: {},
@@ -23,27 +21,27 @@ const he = /* @__PURE__ */ U({
   setup(k) {
     const C = G(k, "modelValue");
     H(() => {
-      te(C);
+      oe(C);
     });
     const o = h({
-      ...B
-    }), u = k, f = h(X(() => ({
+      ...D
+    }), u = k, f = h(Y(() => ({
       pFrame: u.pFrame,
       sequenceColumnPredicate: u.sequenceColumnPredicate
-    }))), g = h(Y(() => ({
+    }))), g = h(Z(() => ({
       pFrame: u.pFrame,
       sequenceColumnIds: o.sequenceColumnIds
-    }))), y = h(Z(() => ({
+    }))), y = h(ee(() => ({
       pFrame: u.pFrame,
       sequenceColumnIds: o.sequenceColumnIds
-    }))), l = h(ee(() => ({
+    }))), l = h(te(() => ({
       pFrame: u.pFrame,
       sequenceColumnIds: o.sequenceColumnIds,
       labelColumnIds: o.labelColumnIds,
       selection: u.selection,
       colorScheme: o.colorScheme,
       alignmentParams: o.alignmentParams
-    }))), I = new Intl.NumberFormat("en").format, D = R(
+    }))), I = new Intl.NumberFormat("en").format, _ = R(
       () => [
         {
           label: "Chemical Properties",
@@ -69,11 +67,11 @@ const he = /* @__PURE__ */ U({
         Object.entries({ ...C.value, ...t }).filter(([n, e]) => e !== void 0)
       );
     }
-    L(() => {
+    A(() => {
       var n, e;
       const t = Object.fromEntries(
         Object.entries({
-          ...B,
+          ...D,
           sequenceColumnIds: (n = f.data) == null ? void 0 : n.defaults,
           labelColumnIds: (e = g.data) == null ? void 0 : e.defaults,
           ...C.value
@@ -85,7 +83,7 @@ const he = /* @__PURE__ */ U({
         )
       );
       Object.assign(o, t);
-    }), L(() => {
+    }), A(() => {
       var e, s, r;
       const t = [];
       !f.isLoading && ((e = o.sequenceColumnIds) != null && e.some(
@@ -110,15 +108,15 @@ const he = /* @__PURE__ */ U({
         t.map((a) => [a, void 0])
       ));
     });
-    const _ = K("msa");
-    async function $() {
+    const $ = K("msa");
+    async function z() {
       var O, E, M;
-      const t = (E = (O = W()) == null ? void 0 : O.lsDriver) == null ? void 0 : E.exportToPdf;
+      const t = (E = (O = X()) == null ? void 0 : O.lsDriver) == null ? void 0 : E.exportToPdf;
       if (!t)
         return console.error(
           "API getPlatformaRawInstance().lsDriver.exportToPdf is not available"
         );
-      const n = (M = _.value) == null ? void 0 : M.rootEl;
+      const n = (M = $.value) == null ? void 0 : M.rootEl;
       if (!n)
         throw new Error("MSA element is not available.");
       const e = document.createElement("div");
@@ -133,11 +131,11 @@ const he = /* @__PURE__ */ U({
 }`);
       const r = n.cloneNode(!0);
       r.dataset.prePrint = "", e.replaceChildren(r), document.body.appendChild(e);
-      const { height: a, width: i } = e.getBoundingClientRect(), c = CSS.cm(1), z = [i, a].map((d) => CSS.px(d).add(c.mul(2))).join(" ");
+      const { height: a, width: i } = e.getBoundingClientRect(), c = CSS.cm(1), B = [i, a].map((d) => CSS.px(d).add(c.mul(2))).join(" ");
       s.insertRule(`
 @media print {
   @page {
-    size: ${z};
+    size: ${B};
     margin: ${c};
   }
   body > :not(#${e.id}) {
@@ -156,14 +154,14 @@ const he = /* @__PURE__ */ U({
     }
     return (t, n) => {
       var e, s, r, a;
-      return p(), N(T, null, [
-        V(ne, {
+      return p(), L(N, null, [
+        T(se, {
           settings: o,
           "sequence-column-options": (e = f.data) == null ? void 0 : e.options,
           "label-column-options": (s = g.data) == null ? void 0 : s.options,
-          "color-scheme-options": D.value,
+          "color-scheme-options": _.value,
           onUpdateSettings: F,
-          onExport: $
+          onExport: z
         }, null, 8, ["settings", "sequence-column-options", "label-column-options", "color-scheme-options"]),
         x.value ? (p(), S(m(P), {
           key: 0,
@@ -182,7 +180,7 @@ const he = /* @__PURE__ */ U({
             w(" Please select at least one sequence column and two or more rows to run alignment ")
           ])),
           _: 1
-        })) : (p(), N(T, { key: 2 }, [
+        })) : (p(), L(N, { key: 2 }, [
           (a = l.data) != null && a.exceedsLimit ? (p(), S(m(P), {
             key: 0,
             type: "warn",
@@ -190,11 +188,11 @@ const he = /* @__PURE__ */ U({
             label: "Visualization is limited"
           }, {
             default: b(() => [
-              w(" MSA visualization supports " + q(m(I)(2)) + " to " + q(m(I)(m(A))) + " sequences. Only the first " + q(m(I)(m(A))) + " will be displayed. ", 1)
+              w(" MSA visualization supports " + q(m(I)(2)) + " to " + q(m(I)(m(j))) + " sequences. Only the first " + q(m(I)(m(j))) + " will be displayed. ", 1)
             ]),
             _: 1
-          })) : j("", !0),
-          V(m(se), {
+          })) : V("", !0),
+          T(m(W), {
             type: "transparent",
             class: Q(t.$style.splash),
             loading: l.isLoading
@@ -202,7 +200,7 @@ const he = /* @__PURE__ */ U({
             default: b(() => {
               var i;
               return [
-                (i = l.data) != null && i.sequences.length ? (p(), S(oe, {
+                (i = l.data) != null && i.sequences.length ? (p(), S(ne, {
                   key: 0,
                   ref: "msa",
                   sequences: l.data.sequences,
@@ -211,7 +209,7 @@ const he = /* @__PURE__ */ U({
                   "residue-counts": l.data.residueCounts,
                   "highlight-image": l.data.highlightImage,
                   widgets: o.widgets
-                }, null, 8, ["sequences", "sequence-names", "label-rows", "residue-counts", "highlight-image", "widgets"])) : j("", !0)
+                }, null, 8, ["sequences", "sequence-names", "label-rows", "residue-counts", "highlight-image", "widgets"])) : V("", !0)
               ];
             }),
             _: 1
@@ -222,6 +220,6 @@ const he = /* @__PURE__ */ U({
   }
 });
 export {
-  he as default
+  fe as default
 };
 //# sourceMappingURL=PlMultiSequenceAlignment.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/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  reactive,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport {\n  sequenceLimit,\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 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})));\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        columnId: 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 markupColumnId = settings.colorScheme?.type === 'markup'\n    ? settings.colorScheme.columnId\n    : undefined;\n\n  if (\n    !markupColumns.isLoading\n    && markupColumnId\n    && (markupColumns.data ?? []).every(\n      ({ value }) => !isJsonEqual(value, markupColumnId),\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</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\n      && (multipleAlignmentData.data?.sequences ?? []).length < 2\"\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.isLoading\"\n    >\n      <template v-if=\"multipleAlignmentData.data?.sequences.length\">\n        <MultiSequenceAlignmentView\n          ref=\"msa\"\n          :sequences=\"multipleAlignmentData.data.sequences\"\n          :sequence-names=\"multipleAlignmentData.data.sequenceNames\"\n          :label-rows=\"multipleAlignmentData.data.labelRows\"\n          :residue-counts=\"multipleAlignmentData.data.residueCounts\"\n          :highlight-image=\"multipleAlignmentData.data.highlightImage\"\n          :widgets=\"settings.widgets\"\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","settings","reactive","defaultSettings","props","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","markupColumnId","_c","msaEl","useTemplateRef","exportPdf","exportToPdf","getRawPlatformaInstance","msaRoot","printTarget","printStyleSheet","msaClone","height","width","margin","pageSize","index"],"mappings":"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"}
+{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/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  reactive,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport {\n  sequenceLimit,\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 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})));\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        columnId: 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 markupColumnId = settings.colorScheme?.type === 'markup'\n    ? settings.colorScheme.columnId\n    : undefined;\n\n  if (\n    !markupColumns.isLoading\n    && markupColumnId\n    && (markupColumns.data ?? []).every(\n      ({ value }) => !isJsonEqual(value, markupColumnId),\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</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\n      && (multipleAlignmentData.data?.sequences ?? []).length < 2\"\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.isLoading\"\n    >\n      <template v-if=\"multipleAlignmentData.data?.sequences.length\">\n        <MultiSequenceAlignmentView\n          ref=\"msa\"\n          :sequences=\"multipleAlignmentData.data.sequences\"\n          :sequence-names=\"multipleAlignmentData.data.sequenceNames\"\n          :label-rows=\"multipleAlignmentData.data.labelRows\"\n          :residue-counts=\"multipleAlignmentData.data.residueCounts\"\n          :highlight-image=\"multipleAlignmentData.data.highlightImage\"\n          :widgets=\"settings.widgets\"\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","settings","reactive","defaultSettings","props","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","markupColumnId","_c","msaEl","useTemplateRef","exportPdf","exportToPdf","getRawPlatformaInstance","msaRoot","printTarget","printStyleSheet","msaClone","height","width","margin","pageSize","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,EAA0CC,GAAA,YAAgB;AAExE,IAAAC,EAAc,MAAM;AAClB,MAAAC,GAAcJ,CAAK;AAAA,IACrB,CAAC;AAED,UAAMK,IAAWC,EAA2C;AAAA,MAC1D,GAAGC;AAAA,IAAA,CACJ,GAEKC,IAAQN,GAmBRO,IAAkBH,EAASI,EAA0B,OAAO;AAAA,MAChE,QAAQF,EAAM;AAAA,MACd,yBAAyBA,EAAM;AAAA,IAAA,EAC/B,CAAC,GAEGG,IAAeL,EAASM,EAAuB,OAAO;AAAA,MAC1D,QAAQJ,EAAM;AAAA,MACd,mBAAmBH,EAAS;AAAA,IAAA,EAC5B,CAAC,GAEGQ,IAAgBP,EAASQ,GAAwB,OAAO;AAAA,MAC5D,QAAQN,EAAM;AAAA,MACd,mBAAmBH,EAAS;AAAA,IAAA,EAC5B,CAAC,GAEGU,IAAwBT,EAASU,GAAyB,OAAO;AAAA,MACrE,QAAQR,EAAM;AAAA,MACd,mBAAmBH,EAAS;AAAA,MAC5B,gBAAgBA,EAAS;AAAA,MACzB,WAAWG,EAAM;AAAA,MACjB,aAAaH,EAAS;AAAA,MACtB,iBAAiBA,EAAS;AAAA,IAAA,EAC1B,CAAC,GAEGY,IAAe,IAAI,KAAK,aAAa,IAAI,EAAE,QAE3CC,IAAqBC;AAAA,MAGzB,MAAM;AAAA,QACJ;AAAA,UACE,OAAO;AAAA,UACP,OAAO,EAAE,MAAM,sBAAA;AAAA,QAAsB;AAAA,QAEvC;AAAA,UACE,OAAO;AAAA,UACP,OAAO,EAAE,MAAM,WAAA;AAAA,QAAW;AAAA,QAE5B,IAAIN,EAAc,QAAQ,CAAA,GAAI,IAAI,CAAC,EAAE,OAAAO,GAAO,OAAAC,SAAa;AAAA,UACvD,OAAAD;AAAA,UACA,OAAO;AAAA,YACL,MAAM;AAAA,YACN,UAAUC;AAAA,UAAA;AAAA,QACZ,EACA;AAAA,MAAA;AAAA,IACJ,GAGIC,IAAQH;AAAA,MAAS,MACrBV,EAAgB,SACbE,EAAa,SACbE,EAAc,SACdE,EAAsB;AAAA,IAAA;AAG3B,aAASQ,EACPC,GACA;AACA,MAAAxB,EAAM,QAAQ,OAAO;AAAA,QACnB,OAAO,QAAQ,EAAE,GAAGA,EAAM,OAAO,GAAGwB,EAAA,CAAe,EAChD,OAAO,CAAC,CAACC,GAAMJ,CAAK,MAAMA,MAAU,MAAS;AAAA,MAAA;AAAA,IAEpD;AAEA,IAAAK,EAAY,MAAM;;AAChB,YAAMC,IAAmD,OAAO;AAAA,QAC9D,OAAO,QAAQ;AAAA,UACb,GAAGpB;AAAA,UACH,oBAAmBqB,IAAAnB,EAAgB,SAAhB,gBAAAmB,EAAsB;AAAA,UACzC,iBAAgBC,IAAAlB,EAAa,SAAb,gBAAAkB,EAAmB;AAAA,UACnC,GAAG7B,EAAM;AAAA,QAAA,CACV,EAAE;AAAA,UAAO,CAAC,CAAC8B,GAAKT,CAAK,MACpB,CAACU;AAAA,YACC1B,EAASyB,CAA6C;AAAA,YACtDT;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAEF,aAAO,OAAOhB,GAAUsB,CAAK;AAAA,IAC/B,CAAC,GAGDD,EAAY,MAAM;;AAChB,YAAMM,IAA8D,CAAA;AACpE,MACE,CAACvB,EAAgB,eACdmB,IAAAvB,EAAS,sBAAT,QAAAuB,EAA4B;AAAA,QAAK,CAACK,MAAA;;AAClC,oBAAAL,IAAAnB,EAAgB,SAAhB,gBAAAmB,EAAsB,YAAW,CAAA,GAAI;AAAA,YACpC,CAAC,EAAE,OAAAP,EAAA,MAAY,CAACU,EAAYV,GAAOY,CAAE;AAAA,UAAA;AAAA;AAAA,YAIzCD,EAAgB,KAAK,mBAAmB,GAGxC,CAACrB,EAAa,eACXkB,IAAAxB,EAAS,mBAAT,QAAAwB,EAAyB;AAAA,QAAK,CAACI,MAAA;;AAC/B,oBAAAL,IAAAjB,EAAa,SAAb,gBAAAiB,EAAmB,YAAW,CAAA,GAAI;AAAA,YACjC,CAAC,EAAE,OAAAP,EAAA,MAAY,CAACU,EAAYV,GAAOY,CAAE;AAAA,UAAA;AAAA;AAAA,YAIzCD,EAAgB,KAAK,gBAAgB;AAGvC,YAAME,MAAiBC,IAAA9B,EAAS,gBAAT,gBAAA8B,EAAsB,UAAS,WAClD9B,EAAS,YAAY,WACrB;AAEJ,MACE,CAACQ,EAAc,aACZqB,MACCrB,EAAc,QAAQ,CAAA,GAAI;AAAA,QAC5B,CAAC,EAAE,OAAAQ,EAAA,MAAY,CAACU,EAAYV,GAAOa,CAAc;AAAA,MAAA,KAGnDF,EAAgB,KAAK,aAAa,GAEhCA,EAAgB,UAClBT,EAAc,OAAO;AAAA,QACnBS,EAAgB,IAAI,CAACF,MAAQ,CAACA,GAAK,MAAS,CAAC;AAAA,MAAA,CAC9C;AAAA,IAEL,CAAC;AAED,UAAMM,IAAQC,EAAe,KAAK;AAElC,mBAAeC,IAAY;;AACzB,YAAMC,KAAcV,KAAAD,IAAAY,QAAA,gBAAAZ,EAA2B,aAA3B,gBAAAC,EAChB;AACJ,UAAI,CAACU;AACH,eAAO,QAAQ;AAAA,UACb;AAAA,QAAA;AAGJ,YAAME,KAAUN,IAAAC,EAAM,UAAN,gBAAAD,EAAa;AAC7B,UAAI,CAACM;AACH,cAAM,IAAI,MAAM,+BAA+B;AAEjD,YAAMC,IAAc,SAAS,cAAc,KAAK;AAChD,MAAAA,EAAY,KAAK,gBAAgB,OAAO,WAAA,CAAY;AACpD,YAAMC,IAAkB,IAAI,cAAA;AAC5B,eAAS,mBAAmB,KAAKA,CAAe,GAChDA,EAAgB,WAAW;AAAA;AAAA,KAExBD,EAAY,EAAE;AAAA;AAAA;AAAA;AAAA,EAIjB;AACA,YAAME,IAAWH,EAAQ,UAAU,EAAI;AACvC,MAAAG,EAAS,QAAQ,WAAW,IAC5BF,EAAY,gBAAgBE,CAAQ,GACpC,SAAS,KAAK,YAAYF,CAAW;AACrC,YAAM,EAAE,QAAAG,GAAQ,OAAAC,MAAUJ,EAAY,sBAAA,GAChCK,IAAS,IAAI,GAAG,CAAC,GACjBC,IAAW,CAACF,GAAOD,CAAM,EAC5B,IAAI,CAACxB,MAAU,IAAI,GAAGA,CAAK,EAAE,IAAI0B,EAAO,IAAI,CAAC,CAAC,CAAC,EAC/C,KAAK,GAAG;AACX,MAAAJ,EAAgB,WAAW;AAAA;AAAA;AAAA,YAGjBK,CAAQ;AAAA,cACND,CAAM;AAAA;AAAA,iBAEHL,EAAY,EAAE;AAAA;AAAA;AAAA,EAG7B;AACA,UAAI;AACF,cAAMH,EAAA;AAAA,MACR,SAASjB,GAAO;AACd,gBAAQ,MAAMA,CAAK;AAAA,MACrB,UAAA;AACE,iBAAS,KAAK,YAAYoB,CAAW;AACrC,cAAMO,IAAQ,SAAS,mBAAmB,QAAQN,CAAe;AACjE,QAAIM,KAAS,KACX,SAAS,mBAAmB,OAAOA,GAAO,CAAC;AAAA,MAE/C;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,4 +6,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     plotEl: HTMLDivElement;
 }, any>;
 export default _default;
-//# sourceMappingURL=SeqLogo.vue.d.ts.map

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

@@ -1,8 +1,7 @@
-import { defineComponent as b, useTemplateRef as k, computed as f, shallowRef as w, watchEffect as C, onBeforeUnmount as E, createBlock as x, createElementBlock as D, unref as r, openBlock as d, withCtx as B, createTextVNode as K, toDisplayString as _ } from "vue";
-import "../../lib/ui/uikit/dist/index.js";
+import { defineComponent as b, useTemplateRef as k, computed as f, shallowRef as w, watchEffect as C, onBeforeUnmount as E, createBlock as x, createElementBlock as D, unref as r, openBlock as d, withCtx as K, createTextVNode as B, toDisplayString as _ } from "vue";
+import { PlAlert as A } from "@milaboratories/uikit";
 import { useMiPlots as G } from "./useMiPlots.js";
-import T from "../../lib/ui/uikit/dist/components/PlAlert/PlAlert.vue.js";
-const I = /* @__PURE__ */ b({
+const P = /* @__PURE__ */ b({
   __name: "SeqLogo",
   props: {
     residueCounts: {}
@@ -107,12 +106,12 @@ const I = /* @__PURE__ */ b({
     }), E(() => {
       var t;
       (t = o.value) == null || t.unmount();
-    }), (t, u) => r(i) ? (d(), x(r(T), {
+    }), (t, u) => r(i) ? (d(), x(r(A), {
       key: 0,
       type: "error"
     }, {
-      default: B(() => [
-        K(_(r(i).message), 1)
+      default: K(() => [
+        B(_(r(i).message), 1)
       ]),
       _: 1
     })) : (d(), D("div", {
@@ -123,6 +122,6 @@ const I = /* @__PURE__ */ b({
   }
 });
 export {
-  I as default
+  P as default
 };
 //# sourceMappingURL=SeqLogo.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SeqLogo.vue.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  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst { residueCounts } = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\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<Settings | undefined>(() => {\n  return ({\n    type: 'discrete',\n    title: {\n      name: '',\n      show: false,\n    },\n    size: {\n      width: residueCounts.length * 20,\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  });\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-${crypto.randomUUID()}`,\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  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else ref=\"plotEl\" />\n</template>\n"],"names":["plotEl","useTemplateRef","palette","residueColors","settings","computed","__props","data","countKey","columnKey","residueKey","columnIndex","column","residue","count","miplots","error","useMiPlots","plot","shallowRef","watchEffect","onBeforeUnmount","_a"],"mappings":"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"}
+{"version":3,"file":"SeqLogo.vue.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  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst { residueCounts } = defineProps<{\n  residueCounts: ResidueCounts;\n}>();\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<Settings | undefined>(() => {\n  return ({\n    type: 'discrete',\n    title: {\n      name: '',\n      show: false,\n    },\n    size: {\n      width: residueCounts.length * 20,\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  });\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-${crypto.randomUUID()}`,\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  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else ref=\"plotEl\" />\n</template>\n"],"names":["plotEl","useTemplateRef","palette","residueColors","settings","computed","__props","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/Toolbar.vue.d.ts

@@ -14,4 +14,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     onUpdateSettings?: ((args_0: Partial<Settings>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
-//# sourceMappingURL=Toolbar.vue.d.ts.map