@platforma-sdk/ui-vue 1.41.17 → 1.42.0

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

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

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

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

package/dist/components/PlMultiSequenceAlignment/chemical-properties.d.ts

@@ -1,9 +1,45 @@
-import { ColorMap, ResidueCounts } from './types';
-export declare const chemicalPropertiesColorMap: ColorMap;
-export type ChemicalCategory = keyof typeof chemicalPropertiesColorMap;
-export declare function colorizeSequencesByChemicalProperties({ sequences, residueCounts, colorMap }: {
+import { HighlightLegend, ResidueCounts } from './types';
+export declare function highlightByChemicalProperties({ sequences, residueCounts }: {
     sequences: string[];
     residueCounts: ResidueCounts;
-    colorMap: ColorMap;
-}): Promise<Blob>;
+}): {
+    blob: Blob;
+    legend: HighlightLegend;
+};
+declare const chemicalPropertiesColorScheme: {
+    hydrophobic: {
+        label: string;
+        color: string;
+    };
+    positiveCharge: {
+        label: string;
+        color: string;
+    };
+    negativeCharge: {
+        label: string;
+        color: string;
+    };
+    polar: {
+        label: string;
+        color: string;
+    };
+    cysteine: {
+        label: string;
+        color: string;
+    };
+    glycine: {
+        label: string;
+        color: string;
+    };
+    proline: {
+        label: string;
+        color: string;
+    };
+    aromatic: {
+        label: string;
+        color: string;
+    };
+};
+export type ChemicalCategory = keyof typeof chemicalPropertiesColorScheme;
+export {};
 //# sourceMappingURL=chemical-properties.d.ts.map

package/dist/components/PlMultiSequenceAlignment/chemical-properties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chemical-properties.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/chemical-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,0BAA0B,EAAE,QAiCxC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,0BAA0B,CAAC;AAEvE,wBAAgB,qCAAqC,CACnD,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE;IACtC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB,GACA,OAAO,CAAC,IAAI,CAAC,CAwBf"}
+{"version":3,"file":"chemical-properties.d.ts","sourceRoot":"","sources":["../../../src/components/PlMultiSequenceAlignment/chemical-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE9D,wBAAgB,6BAA6B,CAC3C,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE;IAC5B,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;CAC9B,GACA;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,CA4DzC;AA8BD,QAAA,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCR,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,6BAA6B,CAAC"}

package/dist/components/PlMultiSequenceAlignment/chemical-properties.js

@@ -1,4 +1,49 @@
-const f = {
+function E({ sequences: t, residueCounts: g }) {
+  var C, h, u;
+  const i = [], c = v({
+    residueCounts: g,
+    rowCount: t.length
+  }), n = ((C = t.at(0)) == null ? void 0 : C.length) ?? 0, l = t.length;
+  for (let e = 0; e < n; e += 1)
+    for (let o = 0; o < l; o += 1) {
+      const F = t[o][e], d = (u = (h = c.at(e)) == null ? void 0 : h.find(({ residues: a }) => a.includes(F))) == null ? void 0 : u.category;
+      if (!d) continue;
+      const r = i.at(-1);
+      r && r.category === d && r.column === e && r.start + r.length === o ? r.length += 1 : i.push({ category: d, column: e, start: o, length: 1 });
+    }
+  const s = Map.groupBy(i, ({ category: e }) => e), y = new Blob(
+    function* () {
+      var o;
+      yield `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${`0 0 ${n * 2} ${l}`}" stroke-width="2" preserveAspectRatio="none">`;
+      for (const [F, d] of s) {
+        const r = (o = P[F]) == null ? void 0 : o.color;
+        if (!r) continue;
+        yield `<path stroke="${r}" d="`;
+        let a = 0, A = 0;
+        for (const { column: m, start: b, length: f } of d)
+          yield `m${m * 2 + 1 - a},${b - A}v${f}`, a = m * 2 + 1, A = b + f;
+        yield '"/>';
+      }
+      yield "</svg>";
+    }().toArray(),
+    { type: "image/svg+xml" }
+  ), p = Object.fromEntries(
+    Object.entries(P).filter(([e]) => s.has(e))
+  );
+  return { blob: y, legend: p };
+}
+const v = ({ residueCounts: t, rowCount: g }) => t.map((i) => {
+  const c = /* @__PURE__ */ new Set();
+  return D.filter(
+    ({ residues: n, rules: l }) => n.split("").some((s) => s in i) && (!l || l.split("").map(
+      (s) => [s, w[s]]
+    ).some(([s, { residues: y, threshold: p }]) => {
+      if (c.has(s)) return !0;
+      const h = y.split("").reduce((u, e) => u + (i[e] ?? 0), 0) >= g * p;
+      return h && c.add(s), h;
+    }))
+  );
+}), P = {
   hydrophobic: {
     label: "Hydrophobic",
     color: "#99CCFF"
@@ -31,136 +76,57 @@ const f = {
     label: "Aromatic",
     color: "#A2F5FA"
   }
-};
-function m({ sequences: e, residueCounts: c, colorMap: s }) {
-  var t, g, l, h;
-  const o = new OffscreenCanvas(
-    ((t = e[0]) == null ? void 0 : t.length) ?? 0,
-    e.length
-  ), r = o.getContext("2d"), i = y({
-    residueCounts: c,
-    rowCount: e.length
-  });
-  for (const [n, d] of e.entries())
-    for (const [a, p] of d.split("").entries()) {
-      const u = (l = (g = i.at(a)) == null ? void 0 : g.find(({ residues: C }) => C.includes(p))) == null ? void 0 : l.category;
-      !u || !((h = s[u]) != null && h.color) || (r.fillStyle = s[u].color, r.fillRect(a, n, 1, 1));
-    }
-  return o.convertToBlob();
-}
-const y = ({ residueCounts: e, rowCount: c }) => (
-  // for every column in a residue counts table
-  // (e.g. table = [{ A: 3, R: 5, Q: 1}, { E: 4, T: 2 }, ...])
-  e.map((s) => (
-    // find all matching criterion
-    F.filter(
-      ({ rules: o }) => (
-        // by matching at least one rule
-        o.some(
-          ({ groups: r, threshold: i }) => (
-            // where at least one residue group
-            r.some((t) => t.split("").reduce(
-              (l, h) => l + (s[h] ?? 0),
-              0
-            ) > c * i)
-          )
-        )
-      )
-    ).map(({ residues: o, category: r }) => ({ residues: o, category: r }))
-  ))
-), F = [
-  {
-    residues: "ACILMFWV",
-    category: "hydrophobic",
-    rules: [
-      { groups: ["WLVIMAFCYHP"], threshold: 0.6 }
-    ]
-  },
-  {
-    residues: "KR",
-    category: "positiveCharge",
-    rules: [
-      { groups: ["KR"], threshold: 0.6 },
-      { groups: [..."KRQ"], threshold: 0.8 }
-    ]
-  },
-  {
-    residues: "E",
-    category: "negativeCharge",
-    rules: [
-      { groups: ["KR"], threshold: 0.6 },
-      { groups: ["QE"], threshold: 0.5 },
-      { groups: ["ED"], threshold: 0.5 },
-      { groups: [..."EQD"], threshold: 0.85 }
-    ]
-  },
-  {
-    residues: "D",
-    category: "negativeCharge",
-    rules: [
-      { groups: ["KR"], threshold: 0.6 },
-      { groups: [..."DEN"], threshold: 0.85 },
-      { groups: ["ED"], threshold: 0.5 }
-    ]
-  },
-  {
-    residues: "N",
-    category: "polar",
-    rules: [
-      { groups: ["N"], threshold: 0.5 },
-      { groups: [..."ND"], threshold: 0.85 }
-    ]
-  },
-  {
-    residues: "Q",
-    category: "polar",
-    rules: [
-      { groups: ["KR"], threshold: 0.6 },
-      { groups: ["QE"], threshold: 0.5 },
-      { groups: [..."QTKR"], threshold: 0.85 }
-    ]
-  },
-  {
-    residues: "ST",
-    category: "polar",
-    rules: [
-      { groups: ["WLVIMAFCYHP"], threshold: 0.6 },
-      { groups: ["TS"], threshold: 0.5 },
-      { groups: [..."ST"], threshold: 0.85 }
-    ]
-  },
-  {
-    residues: "C",
-    category: "cysteine",
-    rules: [
-      { groups: ["C"], threshold: 0.85 }
-    ]
-  },
-  {
-    residues: "G",
-    category: "glycine",
-    rules: [
-      { groups: ["G"], threshold: 0 }
-    ]
-  },
-  {
-    residues: "P",
-    category: "proline",
-    rules: [
-      { groups: ["P"], threshold: 0 }
-    ]
-  },
-  {
-    residues: "HY",
-    category: "aromatic",
-    rules: [
-      { groups: ["WLVIMAFCYHP"], threshold: 0.6 },
-      { groups: [..."WYACPQFHILMV"], threshold: 0.85 }
-    ]
-  }
+}, w = {
+  "%": { residues: "WLVIMAFCYHP", threshold: 0.6 },
+  "#": { residues: "WLVIMAFCYHP", threshold: 0.8 },
+  "-": { residues: "ED", threshold: 0.5 },
+  "+": { residues: "KR", threshold: 0.6 },
+  g: { residues: "G", threshold: 0.5 },
+  n: { residues: "N", threshold: 0.5 },
+  q: { residues: "QE", threshold: 0.5 },
+  p: { residues: "P", threshold: 0.5 },
+  t: { residues: "TS", threshold: 0.5 },
+  A: { residues: "A", threshold: 0.85 },
+  C: { residues: "C", threshold: 0.85 },
+  D: { residues: "D", threshold: 0.85 },
+  E: { residues: "E", threshold: 0.85 },
+  F: { residues: "F", threshold: 0.85 },
+  G: { residues: "G", threshold: 0.85 },
+  H: { residues: "H", threshold: 0.85 },
+  I: { residues: "I", threshold: 0.85 },
+  K: { residues: "K", threshold: 0.85 },
+  L: { residues: "L", threshold: 0.85 },
+  M: { residues: "M", threshold: 0.85 },
+  N: { residues: "N", threshold: 0.85 },
+  P: { residues: "P", threshold: 0.85 },
+  Q: { residues: "Q", threshold: 0.85 },
+  R: { residues: "R", threshold: 0.85 },
+  S: { residues: "S", threshold: 0.85 },
+  T: { residues: "T", threshold: 0.85 },
+  V: { residues: "V", threshold: 0.85 },
+  W: { residues: "W", threshold: 0.85 },
+  Y: { residues: "Y", threshold: 0.85 }
+}, D = [
+  { residues: "G", category: "glycine", rules: "" },
+  { residues: "P", category: "proline", rules: "" },
+  { residues: "T", category: "polar", rules: "tST%#" },
+  { residues: "S", category: "polar", rules: "tST#" },
+  { residues: "N", category: "polar", rules: "nND" },
+  { residues: "Q", category: "polar", rules: "qQE+KR" },
+  // criteria below has to go before the other criteria for C,
+  // otherwise it will never match
+  { residues: "C", category: "cysteine", rules: "C" },
+  { residues: "WLVIMF", category: "hydrophobic", rules: "%#ACFHILMVWYPp" },
+  // below there was an 's' rule too,
+  // but no definition of such rule was provided
+  { residues: "A", category: "hydrophobic", rules: "%#ACFHILMVWYPpTSG" },
+  { residues: "C", category: "hydrophobic", rules: "%#AFHILMVWYSPp" },
+  { residues: "HY", category: "aromatic", rules: "%#ACFHILMVWYPp" },
+  { residues: "E", category: "negativeCharge", rules: "-DEqQ" },
+  { residues: "D", category: "negativeCharge", rules: "-DEnN" },
+  { residues: "KR", category: "positiveCharge", rules: "+KRQ" }
 ];
 export {
-  f as chemicalPropertiesColorMap,
-  m as colorizeSequencesByChemicalProperties
+  E as highlightByChemicalProperties
 };
 //# sourceMappingURL=chemical-properties.js.map