@platforma-sdk/ui-vue 1.42.53 → 1.43.1

package/dist/components/PlAgDataTable/PlAgRowCount.vue.js

@@ -31,9 +31,8 @@ import "canonicalize";
 
 import { getTotalRowsCount as i, getSelectedRowsCount as p } from "../../AgGridVue/selection.js";
 import "../PlMultiSequenceAlignment/data.js";
-import "@milaboratories/biowasm-tools";
 import "../../composition/fileContent.js";
-const J = /* @__PURE__ */ l({
+const H = /* @__PURE__ */ l({
   __name: "PlAgRowCount",
   props: {
     params: {}
@@ -54,6 +53,6 @@ const J = /* @__PURE__ */ l({
   }
 });
 export {
-  J as default
+  H as default
 };
 //# sourceMappingURL=PlAgRowCount.vue.js.map

package/dist/components/PlAgDataTable/PlAgRowCount.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowCount.vue.js","sources":["../../../src/components/PlAgDataTable/PlAgRowCount.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { GridApi } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { getSelectedRowsCount, getTotalRowsCount } from '../../lib';\n\nconst { params } = defineProps<{\n  params: { api: GridApi };\n}>();\n\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\n\nconst pluralRules = new Intl.PluralRules('en');\nconst numberFormatter = new Intl.NumberFormat('en');\n\nconst output = computed(() => {\n  let result = numberFormatter.format(totalRowCount.value) + ' ';\n  result += pluralRules.select(totalRowCount.value) === 'one' ? 'row' : 'rows';\n  if (selectedRowCount.value > 0) {\n    result += ' (' + numberFormatter.format(selectedRowCount.value) + ' selected)';\n  }\n  return result;\n});\n\nfunction updateRowCounts() {\n  totalRowCount.value = getTotalRowsCount(params.api);\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener('selectionChanged', updateRowCounts);\n  params.api.addEventListener('rowDataUpdated', updateRowCounts);\n  params.api.addEventListener('modelUpdated', updateRowCounts);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener('selectionChanged', updateRowCounts);\n  params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n  params.api.removeEventListener('modelUpdated', updateRowCounts);\n});\n</script>\n\n<template>\n  {{ output }}\n</template>\n"],"names":["totalRowCount","ref","getTotalRowsCount","__props","selectedRowCount","getSelectedRowsCount","pluralRules","numberFormatter","output","computed","result","updateRowCounts","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAMA,IAAgBC,EAAIC,EAAkBC,EAAA,OAAO,GAAG,CAAC,GACjDC,IAAmBH,EAAII,EAAqBF,EAAA,OAAO,GAAG,CAAC,GAEvDG,IAAc,IAAI,KAAK,YAAY,IAAI,GACvCC,IAAkB,IAAI,KAAK,aAAa,IAAI,GAE5CC,IAASC,EAAS,MAAM;AAC5B,UAAIC,IAASH,EAAgB,OAAOP,EAAc,KAAK,IAAI;AAC3D,aAAAU,KAAUJ,EAAY,OAAON,EAAc,KAAK,MAAM,QAAQ,QAAQ,QAClEI,EAAiB,QAAQ,MAC3BM,KAAU,OAAOH,EAAgB,OAAOH,EAAiB,KAAK,IAAI,eAE7DM;AAAA,IACT,CAAC;AAED,aAASC,IAAkB;AACzB,MAAAX,EAAc,QAAQE,EAAkBC,SAAO,GAAG,GAClDC,EAAiB,QAAQC,EAAqBF,SAAO,GAAG;AAAA,IAC1D;AAEA,WAAAS,EAAc,MAAM;AAClB,MAAAT,EAAA,OAAO,IAAI,iBAAiB,oBAAoBQ,CAAe,GAC/DR,EAAA,OAAO,IAAI,iBAAiB,kBAAkBQ,CAAe,GAC7DR,EAAA,OAAO,IAAI,iBAAiB,gBAAgBQ,CAAe;AAAA,IAC7D,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAV,EAAA,OAAO,IAAI,oBAAoB,oBAAoBQ,CAAe,GAClER,EAAA,OAAO,IAAI,oBAAoB,kBAAkBQ,CAAe,GAChER,EAAA,OAAO,IAAI,oBAAoB,gBAAgBQ,CAAe;AAAA,IAChE,CAAC;;;"}
+{"version":3,"file":"PlAgRowCount.vue.js","sources":["../../../src/components/PlAgDataTable/PlAgRowCount.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { GridApi } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { getSelectedRowsCount, getTotalRowsCount } from '../../lib';\n\nconst { params } = defineProps<{\n  params: { api: GridApi };\n}>();\n\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\n\nconst pluralRules = new Intl.PluralRules('en');\nconst numberFormatter = new Intl.NumberFormat('en');\n\nconst output = computed(() => {\n  let result = numberFormatter.format(totalRowCount.value) + ' ';\n  result += pluralRules.select(totalRowCount.value) === 'one' ? 'row' : 'rows';\n  if (selectedRowCount.value > 0) {\n    result += ' (' + numberFormatter.format(selectedRowCount.value) + ' selected)';\n  }\n  return result;\n});\n\nfunction updateRowCounts() {\n  totalRowCount.value = getTotalRowsCount(params.api);\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener('selectionChanged', updateRowCounts);\n  params.api.addEventListener('rowDataUpdated', updateRowCounts);\n  params.api.addEventListener('modelUpdated', updateRowCounts);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener('selectionChanged', updateRowCounts);\n  params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n  params.api.removeEventListener('modelUpdated', updateRowCounts);\n});\n</script>\n\n<template>\n  {{ output }}\n</template>\n"],"names":["totalRowCount","ref","getTotalRowsCount","__props","selectedRowCount","getSelectedRowsCount","pluralRules","numberFormatter","output","computed","result","updateRowCounts","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAMA,IAAgBC,EAAIC,EAAkBC,EAAA,OAAO,GAAG,CAAC,GACjDC,IAAmBH,EAAII,EAAqBF,EAAA,OAAO,GAAG,CAAC,GAEvDG,IAAc,IAAI,KAAK,YAAY,IAAI,GACvCC,IAAkB,IAAI,KAAK,aAAa,IAAI,GAE5CC,IAASC,EAAS,MAAM;AAC5B,UAAIC,IAASH,EAAgB,OAAOP,EAAc,KAAK,IAAI;AAC3D,aAAAU,KAAUJ,EAAY,OAAON,EAAc,KAAK,MAAM,QAAQ,QAAQ,QAClEI,EAAiB,QAAQ,MAC3BM,KAAU,OAAOH,EAAgB,OAAOH,EAAiB,KAAK,IAAI,eAE7DM;AAAA,IACT,CAAC;AAED,aAASC,IAAkB;AACzB,MAAAX,EAAc,QAAQE,EAAkBC,SAAO,GAAG,GAClDC,EAAiB,QAAQC,EAAqBF,SAAO,GAAG;AAAA,IAC1D;AAEA,WAAAS,EAAc,MAAM;AAClB,MAAAT,EAAA,OAAO,IAAI,iBAAiB,oBAAoBQ,CAAe,GAC/DR,EAAA,OAAO,IAAI,iBAAiB,kBAAkBQ,CAAe,GAC7DR,EAAA,OAAO,IAAI,iBAAiB,gBAAgBQ,CAAe;AAAA,IAC7D,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAV,EAAA,OAAO,IAAI,oBAAoB,oBAAoBQ,CAAe,GAClER,EAAA,OAAO,IAAI,oBAAoB,kBAAkBQ,CAAe,GAChER,EAAA,OAAO,IAAI,oBAAoB,gBAAgBQ,CAAe;AAAA,IAChE,CAAC;;;"}

package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue.js

@@ -7,7 +7,7 @@
 .pl-ag-chart-stacked-bar-cell{height:100%;display:flex;flex-direction:row;align-items:center}.pl-ag-chart-stacked-bar-cell__not-ready{color:var(--txt-03)!important}
 .pl-ag-chart-histogram-cell{height:100%;display:flex;flex-direction:row;align-items:center}.pl-ag-chart-histogram-cell__not-ready{color:var(--txt-03)!important}
 .pl-ag-cell-status-tag{height:100%;padding:0 12px}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as C, ref as c, computed as h, onBeforeMount as w, onBeforeUnmount as b, createElementBlock as d, openBlock as l, normalizeClass as p, unref as t, createCommentVNode as u, createBlock as y, toDisplayString as B } from "vue";
+import { defineComponent as C, ref as c, computed as h, onBeforeMount as w, onBeforeUnmount as b, createElementBlock as d, openBlock as l, normalizeClass as n, unref as t, createCommentVNode as u, createBlock as y, toDisplayString as B } from "vue";
 import { PlCheckbox as E } from "@milaboratories/uikit";
 import r from "./pl-ag-row-num-checkbox.module.scss.js";
 
@@ -30,31 +30,30 @@ import "canonicalize";
 
 
 
-import { isSelectionEnabled as n } from "../../AgGridVue/selection.js";
+import { isSelectionEnabled as p } from "../../AgGridVue/selection.js";
 import "../PlMultiSequenceAlignment/data.js";
-import "@milaboratories/biowasm-tools";
 import "../../composition/fileContent.js";
-const Z = /* @__PURE__ */ C({
+const Y = /* @__PURE__ */ C({
   __name: "PlAgRowNumCheckbox",
   props: {
     params: {}
   },
   setup(f) {
-    const e = f, m = e.params.api, o = c(!!e.params.node.isSelected()), v = h(() => o.value || n(m)), k = c(n(m)), a = () => {
+    const e = f, a = e.params.api, o = c(!!e.params.node.isSelected()), v = h(() => o.value || p(a)), k = c(p(a)), m = () => {
       o.value = e.params.node.isSelected() !== !1;
     }, S = (i) => {
-      n(m) && (e.params.node.setSelected(i), a());
+      p(a) && (e.params.node.setSelected(i), m());
     };
     return w(() => {
-      e.params.node.addEventListener("rowSelected", a);
+      e.params.node.addEventListener("rowSelected", m);
     }), b(() => {
-      e.params.node.removeEventListener("rowSelected", a);
+      e.params.node.removeEventListener("rowSelected", m);
     }), (i, s) => (l(), d("div", {
-      class: p([t(r).container, { [t(r)["allowed-selection"]]: k.value }, "d-flex", "justify-center", "align-center"])
+      class: n([t(r).container, { [t(r)["allowed-selection"]]: k.value }, "d-flex", "justify-center", "align-center"])
     }, [
       o.value ? u("", !0) : (l(), d("div", {
         key: 0,
-        class: p([t(r).text])
+        class: n([t(r).text])
       }, B(i.params.value), 3)),
       v.value ? (l(), y(t(E), {
         key: 1,
@@ -63,12 +62,12 @@ const Z = /* @__PURE__ */ C({
           s[0] || (s[0] = (x) => o.value = x),
           S
         ],
-        class: p([t(r).checkbox, o.value && t(r).checked])
+        class: n([t(r).checkbox, o.value && t(r).checked])
       }, null, 8, ["modelValue", "class"])) : u("", !0)
     ], 2));
   }
 });
 export {
-  Z as default
+  Y as default
 };
 //# sourceMappingURL=PlAgRowNumCheckbox.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumCheckbox.vue.js","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from 'ag-grid-enterprise';\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';\nimport $styles from './pl-ag-row-num-checkbox.module.scss';\nimport { isSelectionEnabled } from '../../lib';\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener('rowSelected', updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener('rowSelected', updateSelection);\n});\n</script>\n\n<template>\n  <div :class=\"[$styles.container, { [$styles['allowed-selection']]: allowedSelection }, 'd-flex', 'justify-center', 'align-center']\">\n    <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","api","isChecked","ref","forceShowCheckbox","computed","isSelectionEnabled","allowedSelection","updateSelection","setSelection","val","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAERC,IAAMF,EAAM,OAAO,KACnBG,IAAYC,EAAI,CAAC,CAACJ,EAAM,OAAO,KAAK,YAAY,GAChDK,IAAoBC,EAAS,MAAMH,EAAU,SAASI,EAAmBL,CAAG,CAAC,GAC7EM,IAAmBJ,EAAIG,EAAmBL,CAAG,CAAC,GAE9CO,IAAkB,MAAM;AAC5B,MAAAN,EAAU,QAAQH,EAAM,OAAO,KAAK,iBAAiB;AAAA,IACvD,GAEMU,IAAe,CAACC,MAAiB;AACrC,MAAIJ,EAAmBL,CAAG,MACxBF,EAAM,OAAO,KAAK,YAAYW,CAAG,GACjCF,EAAA;AAAA,IAEJ;AAEA,WAAAG,EAAc,MAAM;AAClB,MAAAZ,EAAM,OAAO,KAAK,iBAAiB,eAAeS,CAAe;AAAA,IACnE,CAAC,GAEDI,EAAgB,MAAM;AACpB,MAAAb,EAAM,OAAO,KAAK,oBAAoB,eAAeS,CAAe;AAAA,IACtE,CAAC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlAgRowNumCheckbox.vue.js","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from 'ag-grid-enterprise';\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';\nimport $styles from './pl-ag-row-num-checkbox.module.scss';\nimport { isSelectionEnabled } from '../../lib';\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener('rowSelected', updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener('rowSelected', updateSelection);\n});\n</script>\n\n<template>\n  <div :class=\"[$styles.container, { [$styles['allowed-selection']]: allowedSelection }, 'd-flex', 'justify-center', 'align-center']\">\n    <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","api","isChecked","ref","forceShowCheckbox","computed","isSelectionEnabled","allowedSelection","updateSelection","setSelection","val","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAERC,IAAMF,EAAM,OAAO,KACnBG,IAAYC,EAAI,CAAC,CAACJ,EAAM,OAAO,KAAK,YAAY,GAChDK,IAAoBC,EAAS,MAAMH,EAAU,SAASI,EAAmBL,CAAG,CAAC,GAC7EM,IAAmBJ,EAAIG,EAAmBL,CAAG,CAAC,GAE9CO,IAAkB,MAAM;AAC5B,MAAAN,EAAU,QAAQH,EAAM,OAAO,KAAK,iBAAiB;AAAA,IACvD,GAEMU,IAAe,CAACC,MAAiB;AACrC,MAAIJ,EAAmBL,CAAG,MACxBF,EAAM,OAAO,KAAK,YAAYW,CAAG,GACjCF,EAAA;AAAA,IAEJ;AAEA,WAAAG,EAAc,MAAM;AAClB,MAAAZ,EAAM,OAAO,KAAK,iBAAiB,eAAeS,CAAe;AAAA,IACnE,CAAC,GAEDI,EAAgB,MAAM;AACpB,MAAAb,EAAM,OAAO,KAAK,oBAAoB,eAAeS,CAAe;AAAA,IACtE,CAAC;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlAgRowNumHeader.vue.js

@@ -31,15 +31,14 @@ import "canonicalize";
 
 import { getSelectedRowsCount as d, getTotalRowsCount as u, isSelectionEnabled as c, deselectAll as y, selectAll as h } from "../AgGridVue/selection.js";
 import "./PlMultiSequenceAlignment/data.js";
-import "@milaboratories/biowasm-tools";
 import "../composition/fileContent.js";
-const k = { style: { position: "absolute", inset: "0", display: "flex", "justify-content": "center", "align-items": "center" } }, b = { key: 1 }, te = /* @__PURE__ */ E({
+const k = { style: { position: "absolute", inset: "0", display: "flex", "justify-content": "center", "align-items": "center" } }, b = { key: 1 }, ee = /* @__PURE__ */ E({
   __name: "PlAgRowNumHeader",
   props: {
     params: {}
   },
   setup(e) {
-    const o = i(d(e.params.api)), m = i(u(e.params.api)), r = i(c(e.params.api)), a = s(
+    const o = i(d(e.params.api)), m = i(u(e.params.api)), l = i(c(e.params.api)), a = s(
       () => o.value > 0
     ), v = s(
       () => a.value && o.value === m.value
@@ -50,15 +49,15 @@ const k = { style: { position: "absolute", inset: "0", display: "flex", "justify
     function t() {
       o.value = d(e.params.api), m.value = u(e.params.api);
     }
-    function l() {
-      r.value = c(e.params.api);
+    function r() {
+      l.value = c(e.params.api);
     }
     return g(() => {
-      e.params.api.addEventListener("selectionChanged", t), e.params.api.addEventListener("rowDataUpdated", t), e.params.api.addEventListener("modelUpdated", t), e.params.api.addEventListener("stateUpdated", l);
+      e.params.api.addEventListener("selectionChanged", t), e.params.api.addEventListener("rowDataUpdated", t), e.params.api.addEventListener("modelUpdated", t), e.params.api.addEventListener("stateUpdated", r);
     }), C(() => {
-      e.params.api.removeEventListener("selectionChanged", t), e.params.api.removeEventListener("rowDataUpdated", t), e.params.api.removeEventListener("modelUpdated", t), e.params.api.removeEventListener("stateUpdated", l);
+      e.params.api.removeEventListener("selectionChanged", t), e.params.api.removeEventListener("rowDataUpdated", t), e.params.api.removeEventListener("modelUpdated", t), e.params.api.removeEventListener("stateUpdated", r);
     }), (w, B) => (n(), p("div", k, [
-      r.value ? (n(), L(R(U), {
+      l.value ? (n(), L(R(U), {
         key: 0,
         "model-value": a.value,
         indeterminate: a.value && !v.value,
@@ -68,6 +67,6 @@ const k = { style: { position: "absolute", inset: "0", display: "flex", "justify
   }
 });
 export {
-  te as default
+  ee as default
 };
 //# sourceMappingURL=PlAgRowNumHeader.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumHeader.vue.js","sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport type { IHeaderParams } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { deselectAll, getSelectedRowsCount, getTotalRowsCount, isSelectionEnabled, selectAll } from '../lib';\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() =>\n  selectedRowCount.value > 0,\n);\n\nconst allRowsSelected = computed(() =>\n  someRowsSelected.value\n  && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener('selectionChanged', updateRowCounts);\n  params.api.addEventListener('rowDataUpdated', updateRowCounts);\n  params.api.addEventListener('modelUpdated', updateRowCounts);\n  params.api.addEventListener('stateUpdated', updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener('selectionChanged', updateRowCounts);\n  params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n  params.api.removeEventListener('modelUpdated', updateRowCounts);\n  params.api.removeEventListener('stateUpdated', updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else>\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"names":["selectedRowCount","ref","getSelectedRowsCount","__props","totalRowCount","getTotalRowsCount","isSelectable","isSelectionEnabled","someRowsSelected","computed","allRowsSelected","toggleSelectAll","deselectAll","selectAll","updateRowCounts","updateIsSelectable","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAmBC,EAAIC,EAAqBC,EAAA,OAAO,GAAG,CAAC,GACvDC,IAAgBH,EAAII,EAAkBF,EAAA,OAAO,GAAG,CAAC,GACjDG,IAAeL,EAAIM,EAAmBJ,EAAA,OAAO,GAAG,CAAC,GAEjDK,IAAmBC;AAAA,MAAS,MAChCT,EAAiB,QAAQ;AAAA,IAAA,GAGrBU,IAAkBD;AAAA,MAAS,MAC/BD,EAAiB,SACdR,EAAiB,UAAUI,EAAc;AAAA,IAAA;AAG9C,aAASO,IAAkB;AACzB,MAAIH,EAAiB,QACnBI,EAAYT,EAAA,OAAO,GAAG,IAEtBU,EAAUV,EAAA,OAAO,GAAG;AAAA,IAExB;AAEA,aAASW,IAAkB;AACzB,MAAAd,EAAiB,QAAQE,EAAqBC,SAAO,GAAG,GACxDC,EAAc,QAAQC,EAAkBF,SAAO,GAAG;AAAA,IACpD;AAEA,aAASY,IAAqB;AAC5B,MAAAT,EAAa,QAAQC,EAAmBJ,SAAO,GAAG;AAAA,IACpD;AAEA,WAAAa,EAAc,MAAM;AAClB,MAAAb,EAAA,OAAO,IAAI,iBAAiB,oBAAoBW,CAAe,GAC/DX,EAAA,OAAO,IAAI,iBAAiB,kBAAkBW,CAAe,GAC7DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBW,CAAe,GAC3DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBY,CAAkB;AAAA,IAChE,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAd,EAAA,OAAO,IAAI,oBAAoB,oBAAoBW,CAAe,GAClEX,EAAA,OAAO,IAAI,oBAAoB,kBAAkBW,CAAe,GAChEX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBW,CAAe,GAC9DX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBY,CAAkB;AAAA,IACnE,CAAC;;;;;;;;;;"}
+{"version":3,"file":"PlAgRowNumHeader.vue.js","sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport type { IHeaderParams } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { deselectAll, getSelectedRowsCount, getTotalRowsCount, isSelectionEnabled, selectAll } from '../lib';\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() =>\n  selectedRowCount.value > 0,\n);\n\nconst allRowsSelected = computed(() =>\n  someRowsSelected.value\n  && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener('selectionChanged', updateRowCounts);\n  params.api.addEventListener('rowDataUpdated', updateRowCounts);\n  params.api.addEventListener('modelUpdated', updateRowCounts);\n  params.api.addEventListener('stateUpdated', updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener('selectionChanged', updateRowCounts);\n  params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n  params.api.removeEventListener('modelUpdated', updateRowCounts);\n  params.api.removeEventListener('stateUpdated', updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else>\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"names":["selectedRowCount","ref","getSelectedRowsCount","__props","totalRowCount","getTotalRowsCount","isSelectable","isSelectionEnabled","someRowsSelected","computed","allRowsSelected","toggleSelectAll","deselectAll","selectAll","updateRowCounts","updateIsSelectable","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAmBC,EAAIC,EAAqBC,EAAA,OAAO,GAAG,CAAC,GACvDC,IAAgBH,EAAII,EAAkBF,EAAA,OAAO,GAAG,CAAC,GACjDG,IAAeL,EAAIM,EAAmBJ,EAAA,OAAO,GAAG,CAAC,GAEjDK,IAAmBC;AAAA,MAAS,MAChCT,EAAiB,QAAQ;AAAA,IAAA,GAGrBU,IAAkBD;AAAA,MAAS,MAC/BD,EAAiB,SACdR,EAAiB,UAAUI,EAAc;AAAA,IAAA;AAG9C,aAASO,IAAkB;AACzB,MAAIH,EAAiB,QACnBI,EAAYT,EAAA,OAAO,GAAG,IAEtBU,EAAUV,EAAA,OAAO,GAAG;AAAA,IAExB;AAEA,aAASW,IAAkB;AACzB,MAAAd,EAAiB,QAAQE,EAAqBC,SAAO,GAAG,GACxDC,EAAc,QAAQC,EAAkBF,SAAO,GAAG;AAAA,IACpD;AAEA,aAASY,IAAqB;AAC5B,MAAAT,EAAa,QAAQC,EAAmBJ,SAAO,GAAG;AAAA,IACpD;AAEA,WAAAa,EAAc,MAAM;AAClB,MAAAb,EAAA,OAAO,IAAI,iBAAiB,oBAAoBW,CAAe,GAC/DX,EAAA,OAAO,IAAI,iBAAiB,kBAAkBW,CAAe,GAC7DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBW,CAAe,GAC3DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBY,CAAkB;AAAA,IAChE,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAd,EAAA,OAAO,IAAI,oBAAoB,oBAAoBW,CAAe,GAClEX,EAAA,OAAO,IAAI,oBAAoB,kBAAkBW,CAAe,GAChEX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBW,CAAe,GAC9DX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBY,CAAkB;AAAA,IACnE,CAAC;;;;;;;;;;"}

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

@@ -1,6 +1,7 @@
 import { ResidueCounts } from './types';
 type __VLS_Props = {
     residueCounts: ResidueCounts;
+    labelsClass: string;
 };
 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;

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

@@ -1,23 +1,27 @@
-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({
+import { defineComponent as x, useCssModule as k, useTemplateRef as E, computed as c, shallowRef as _, watchEffect as A, onBeforeUnmount as O, createBlock as S, createElementBlock as j, unref as u, openBlock as y, withCtx as B, createTextVNode as D, toDisplayString as C, normalizeClass as v, createElementVNode as b } from "vue";
+import { PlAlert as G } from "@milaboratories/uikit";
+import { cellSize as K } from "./cell-size.js";
+import { useMiPlots as T } from "./useMiPlots.js";
+const U = /* @__PURE__ */ x({
   __name: "Consensus",
   props: {
-    residueCounts: {}
+    residueCounts: {},
+    labelsClass: {}
   },
-  setup(n) {
-    const r = w("plotEl"), m = c(() => n.residueCounts.map((e) => {
-      let o = 0, t = { label: "", count: 0 };
-      for (const [s, u] of Object.entries(e))
-        o += u, s !== "-" && u > t.count && (t = { label: s, count: u });
-      const i = CSS.percent(t.count / o * 100);
-      return {
-        label: t.label,
-        color: `color-mix(in oklab, ${i} #3056AE, #C1CDE9)`
-      };
-    })), a = c(() => {
-      const e = n.residueCounts.length * 20;
+  setup(g) {
+    const s = g, w = k(), a = E("plotEl"), f = c(
+      () => s.residueCounts.map((e) => {
+        let o = 0, t = { label: "", count: 0 };
+        for (const [r, n] of Object.entries(e))
+          o += n, r !== "-" && n > t.count && (t = { label: r, count: n });
+        const i = CSS.percent(t.count / o * 100);
+        return {
+          label: t.label,
+          color: `color-mix(in oklab, ${i} #3056AE, #C1CDE9)`
+        };
+      })
+    ), m = c(() => {
+      const e = s.residueCounts.length * K.inline;
       return {
         type: "discrete",
         y: {
@@ -30,17 +34,17 @@ const $ = /* @__PURE__ */ g({
             type: "column",
             value: "columnKey"
           },
-          order: n.residueCounts.map((o, t) => t),
+          order: s.residueCounts.map((o, t) => t),
           inheritedAes: Object.fromEntries(
-            m.value.map(({ color: o }) => ({ fillColor: o })).entries()
+            f.value.map(({ color: o }) => ({ fillColor: o })).entries()
           )
         },
         layers: [{
           type: "bar",
           height: "max",
           aes: {
-            ...n.residueCounts.length && {
-              width: (e - n.residueCounts.length + 1) / n.residueCounts.length
+            ...s.residueCounts.length && {
+              width: (e - s.residueCounts.length + 1) / s.residueCounts.length
             },
             fillColor: {
               type: "primaryGrouping"
@@ -74,47 +78,45 @@ const $ = /* @__PURE__ */ g({
           type: "empty"
         }
       };
-    }), d = c(
-      () => {
-        const e = [], o = [];
-        for (const [t, i] of n.residueCounts.entries())
-          for (const [s, u] of Object.entries(i))
-            s !== "-" && (e.push(s === " " ? 0 : u), o.push(t));
-        return {
-          type: "columns",
-          id: `consensus-${crypto.randomUUID()}`,
-          values: { countKey: e, columnKey: o }
-        };
-      }
-    ), 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(() => {
+    }), p = c(() => {
+      const e = [], o = [];
+      for (const [t, i] of s.residueCounts.entries())
+        for (const [r, n] of Object.entries(i))
+          r !== "-" && (e.push(n), o.push(t));
+      return {
+        type: "columns",
+        id: `consensus-${crypto.randomUUID()}`,
+        values: { countKey: e, columnKey: o }
+      };
+    }), l = _(), { miplots: d, error: h } = T();
+    return A(async () => {
+      !a.value || !d.value || (l.value ? l.value.updateSettingsAndData(p.value, m.value) : (l.value = d.value.newPlot(p.value, m.value), l.value.mount(a.value)));
+    }), O(() => {
       var e;
       (e = l.value) == null || e.unmount();
-    }), (e, o) => f(y) ? (h(), A(f(D), {
+    }), (e, o) => u(h) ? (y(), S(u(G), {
       key: 0,
       type: "error"
     }, {
-      default: j(() => [
-        B(v(f(y).message), 1)
+      default: B(() => [
+        D(C(u(h).message), 1)
       ]),
       _: 1
-    })) : (h(), O("div", {
+    })) : (y(), j("div", {
       key: 1,
-      class: C(e.$style.container)
+      class: v(u(w).container)
     }, [
       b("div", {
-        class: C(e.$style.labels)
-      }, v(m.value.map((t) => t.label).join("")), 3),
+        class: v(s.labelsClass)
+      }, C(f.value.map((t) => t.label).join("")), 3),
       b("div", {
         ref_key: "plotEl",
-        ref: r
+        ref: a
       }, null, 512)
     ], 2));
   }
 });
 export {
-  $ as default
+  U 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  useCssModule,\n  useTemplateRef,\n  watchEffect,\n} from 'vue';\nimport { cellSize } from './cell-size';\nimport type { ResidueCounts } from './types';\nimport { useMiPlots } from './useMiPlots';\n\nconst props = defineProps<{\n  residueCounts: ResidueCounts;\n  labelsClass: string;\n}>();\n\nconst classes = useCssModule();\n\nconst plotEl = useTemplateRef('plotEl');\n\nconst columns = computed(() =>\n  props.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(() => {\n  const width = props.residueCounts.length * cellSize.inline;\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: props.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        ...props.residueCounts.length && {\n          width: (width - props.residueCounts.length + 1)\n            / props.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  } satisfies Settings);\n});\n\nconst data = computed<DataByColumns>(() => {\n  const countKey: number[] = [];\n  const columnKey: number[] = [];\n  for (const [columnIndex, column] of props.residueCounts.entries()) {\n    for (const [residue, count] of Object.entries(column)) {\n      if (residue === '-') continue;\n      countKey.push(count);\n      columnKey.push(columnIndex);\n    }\n  }\n  return ({\n    type: 'columns',\n    id: `consensus-${crypto.randomUUID()}`,\n    values: { countKey, columnKey },\n  });\n});\n\nconst plot = shallowRef<ChartInterface>();\n\nconst { miplots, error } = useMiPlots();\n\nwatchEffect(async () => {\n  if (!plotEl.value || !miplots.value) return;\n  if (!plot.value) {\n    plot.value = miplots.value.newPlot(data.value, settings.value);\n    plot.value.mount(plotEl.value);\n  } else {\n    plot.value.updateSettingsAndData(data.value, settings.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  plot.value?.unmount();\n});\n</script>\n\n<template>\n  <PlAlert v-if=\"error\" type=\"error\">\n    {{ error.message }}\n  </PlAlert>\n  <div v-else :class=\"classes.container\">\n    <div :class=\"props.labelsClass\">\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  svg {\n    display: block;\n  }\n}\n</style>\n"],"names":["props","__props","classes","useCssModule","plotEl","useTemplateRef","columns","computed","column","totalCount","topResidue","residue","count","confidence","settings","width","cellSize","_","i","color","data","countKey","columnKey","columnIndex","plot","shallowRef","miplots","error","useMiPlots","watchEffect","onBeforeUnmount","_a"],"mappings":"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"}

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

@@ -1,11 +1,9 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1gr8c_2{display:flex;flex-direction:column;gap:4px}._labels_1gr8c_8{font-family:Spline Sans Mono;font-weight:600;line-height:24px;letter-spacing:11.6px;text-indent:5.8px;margin-inline-end:-5.8px}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-const e = "_container_1gr8c_2", n = "_labels_1gr8c_8", t = {
-  container: e,
-  labels: n
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1vnon_2{display:flex;flex-direction:column;gap:4px}._container_1vnon_2 svg{display:block}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+const n = "_container_1vnon_2", t = {
+  container: n
 };
 export {
-  e as container,
-  t as default,
-  n as labels
+  n as container,
+  t as default
 };
 //# sourceMappingURL=Consensus.vue3.js.map

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

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

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

@@ -1,27 +1,28 @@
-import { defineComponent as a, createElementBlock as l, openBlock as n, normalizeClass as r, Fragment as i, renderList as c, createElementVNode as d, createTextVNode as m, normalizeStyle as p, toDisplayString as u } from "vue";
-const _ = /* @__PURE__ */ a({
+import { defineComponent as i, useCssModule as m, createElementBlock as n, openBlock as t, normalizeClass as r, unref as l, Fragment as u, renderList as p, createElementVNode as g, createTextVNode as _, normalizeStyle as f, toDisplayString as C } from "vue";
+const y = /* @__PURE__ */ i({
   __name: "Legend",
   props: {
     legend: {}
   },
-  setup(g) {
-    return (e, y) => (n(), l("div", {
-      class: r(e.$style.container)
+  setup(o) {
+    const s = o, e = m();
+    return (k, v) => (t(), n("div", {
+      class: r(l(e).container)
     }, [
-      (n(!0), l(i, null, c(Object.entries(e.legend), ([t, { label: o, color: s }]) => (n(), l("div", {
-        key: t,
-        class: r(e.$style.item)
+      (t(!0), n(u, null, p(s.legend, ({ label: a, color: c }, d) => (t(), n("div", {
+        key: d,
+        class: r(l(e).item)
       }, [
-        d("div", {
-          class: r(e.$style["color-sample"]),
-          style: p({ backgroundColor: s })
+        g("div", {
+          class: r(l(e).colorSample),
+          style: f({ backgroundColor: c })
         }, null, 6),
-        m(" " + u(o), 1)
+        _(" " + C(a), 1)
       ], 2))), 128))
     ], 2));
   }
 });
 export {
-  _ as default
+  y as default
 };
 //# sourceMappingURL=Legend.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Legend.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Legend.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCssModule } from 'vue';\nimport type { HighlightLegend } from './types';\n\nconst props = defineProps<{\n  legend: HighlightLegend;\n}>();\n\nconst classes = useCssModule();\n</script>\n\n<template>\n  <div :class=\"classes.container\">\n    <div\n      v-for=\"({ label, color }, key) of props.legend\"\n      :key=\"key\"\n      :class=\"classes.item\"\n    >\n      <div :class=\"classes.colorSample\" :style=\"{ backgroundColor: color }\" />\n      {{ label }}\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  max-inline-size: fit-content;\n}\n\n.item {\n  display: flex;\n  gap: 4px;\n}\n\n.colorSample {\n  display: inline-block;\n  block-size: 18px;\n  inline-size: 18px;\n  border-radius: 3px;\n}\n</style>\n"],"names":["props","__props","classes","useCssModule"],"mappings":";;;;;;;AAIA,UAAMA,IAAQC,GAIRC,IAAUC,EAAA;;;;;;;;;;;;;;;;;"}

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

@@ -1,12 +1,13 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_157gs_2{display:flex;flex-wrap:wrap;gap:12px;max-inline-size:fit-content}._item_157gs_9{display:flex;gap:4px}._color-sample_157gs_14{display:inline-block;block-size:18px;inline-size:18px;border-radius:3px}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-const t = "_container_157gs_2", e = "_item_157gs_9", o = {
-  container: t,
-  item: e,
-  "color-sample": "_color-sample_157gs_14"
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_5klj5_2{display:flex;flex-wrap:wrap;gap:12px;max-inline-size:fit-content}._item_5klj5_9{display:flex;gap:4px}._colorSample_5klj5_14{display:inline-block;block-size:18px;inline-size:18px;border-radius:3px}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+const o = "_container_5klj5_2", t = "_item_5klj5_9", e = "_colorSample_5klj5_14", l = {
+  container: o,
+  item: t,
+  colorSample: e
 };
 export {
-  t as container,
-  o as default,
-  e as item
+  e as colorSample,
+  o as container,
+  l as default,
+  t as item
 };
 //# sourceMappingURL=Legend.vue3.js.map

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

@@ -1,18 +1,25 @@
+import { PlMultiSequenceAlignmentWidget } from '@platforma-sdk/model';
+import { TreeNodeData } from './phylogenetic-tree.worker';
 import { HighlightLegend, ResidueCounts } from './types';
 type __VLS_Props = {
-    sequences: string[];
-    sequenceNames: string[];
-    labelRows: string[][];
-    residueCounts: ResidueCounts;
-    highlightImage: {
-        blob: Blob;
-        legend: HighlightLegend;
-    } | undefined;
-    widgets: ('consensus' | 'seqLogo' | 'legend')[];
+    sequences: {
+        name: string;
+        rows: string[];
+        residueCounts: ResidueCounts;
+        highlightImageUrl?: string;
+    }[];
+    labels: {
+        rows: string[];
+    }[];
+    highlightLegend: HighlightLegend | undefined;
+    phylogeneticTree: TreeNodeData[] | undefined;
+    widgets: PlMultiSequenceAlignmentWidget[];
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {
     rootEl: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
+    referenceCell: HTMLDivElement;
+    corner: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;