@milaboratories/graph-maker 1.2.5 → 1.2.6

package/dist/forms/LayersForm/DotSizeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSizeSelector.js","names":[],"sources":["../../../src/forms/LayersForm/DotSizeSelector.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch } from 'vue';\nimport { PlDropdown, Slider, SliderRange } from '@platforma-sdk/ui-vue';\nimport { DEFAULT_DOT_RANGE, DEFAULT_DOT_SIZE } from '../../dataBindAes';\nimport { useStore } from '../../store';\nimport type { ContinuousDataMappingSize } from '../../constantsCommon';\nimport { isContinuousDataMapping } from '../../constantsCommon';\nimport type { ChartType } from '@milaboratories/pf-plots';\n\nconst props = withDefaults(defineProps<{\n  selected?: number | ContinuousDataMappingSize;\n  min?: number;\n  max?: number;\n  possibleAesSourceInputs?: string[];\n}>(), { selected: undefined, min: 3, max: 10, possibleAesSourceInputs: undefined });\n\nconst store = useStore();\nconst chartType = computed(() => store.value.reactive.chartType);\nconst emit = defineEmits(['aes-update', 'aes-selector-close']);\n\nconst DEFAULT_AES_INPUTS: Record<ChartType, string[]> = {\n  'discrete': ['primaryGrouping', 'secondaryGrouping'],\n  'scatterplot': ['size'],\n  'scatterplot-umap': ['size'],\n  'dendro': [],\n  'heatmap': [],\n  'histogram': [],\n  'bubble': [],\n};\nconst possibleAesSourceInputs = props.possibleAesSourceInputs ?? DEFAULT_AES_INPUTS[chartType.value];\n\nconst selectedKey = ref(\n  isContinuousDataMapping(props.selected) ? props.selected.column : 'fix',\n);\n\nconst inputGuide = computed(() => store.value.inputGuide.value);\n\nfunction getOptionTitle(selected: string) {\n  const selectedSourceInfo = inputGuide.value.getSourceInfo(selected);\n\n  if (chartType.value === 'scatterplot' || chartType.value === 'dendro') {\n    return `Grouping: ${selectedSourceInfo?.label}`;\n  }\n  if (!selectedSourceInfo) {\n    return 'Not consistent (grouping)';\n  }\n  return selectedSourceInfo?.label ?? '';\n}\n\nconst options = computed(() => {\n  const options: { text: string; value: string }[] = [];\n  const inputStateMap = store.value.reactive.optionsState.components;\n\n  possibleAesSourceInputs.forEach((name) => {\n    if (inputStateMap?.[name]?.selectorStates.length) {\n      inputStateMap[name].selectorStates.forEach(({ selectedSource }) => {\n        const selectedSourceInfo = inputGuide.value.getSourceInfo(selectedSource);\n        if (selectedSourceInfo.type !== 'String') {\n          options.push({\n            text: getOptionTitle(selectedSource),\n            value: selectedSource,\n          });\n        }\n      });\n    }\n  });\n  return options.length ? options : [{ text: 'Fixed', value: 'fix' }];\n});\n\nconst fixedValue = ref(isContinuousDataMapping(props.selected) ? DEFAULT_DOT_SIZE : props.selected ?? DEFAULT_DOT_SIZE);\nconst rangeValue = ref<[number, number]>(isContinuousDataMapping(props.selected) ? [props.selected.range.min, props.selected.range.max] : [DEFAULT_DOT_RANGE.min, DEFAULT_DOT_RANGE.max]);\n\nwatch(\n  () => selectedKey.value,\n  (value) => {\n    if (value === 'fix') {\n      emit('aes-update', fixedValue.value);\n    } else {\n      const mapping = {\n        column: value,\n        range: { min: rangeValue.value[0], max: rangeValue.value[1] },\n      } as ContinuousDataMappingSize;\n      emit('aes-update', mapping);\n    }\n  },\n);\n\nwatch(\n  () => fixedValue.value,\n  (value) => {\n    if (selectedKey.value === 'fix') {\n      emit('aes-update', value);\n    }\n  },\n);\n\nwatch(\n  () => rangeValue.value,\n  (rangeV) => {\n    if (selectedKey.value !== 'fix') {\n      const mapping = {\n        column: selectedKey.value,\n        range: { min: rangeV[0], max: rangeV[1] },\n      } as ContinuousDataMappingSize;\n      emit('aes-update', mapping);\n    }\n  },\n);\n\n</script>\n\n<template>\n  <div class=\"dot-size-selector\">\n    <div class=\"dot-size-selector__row\">\n      <div class=\"aes-input-select\" @click.stop>\n        <PlDropdown\n          v-model=\"selectedKey\"\n          :disabled=\"options.length < 2 && options[0].value === selectedKey\"\n          label=\"Dot size source\"\n          :options=\"options\"\n        />\n      </div>\n    </div>\n    <div class=\"dot-size-selector-row\">\n      <SliderRange\n        v-if=\"selectedKey !== 'fix'\"\n        v-model=\"rangeValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :breakpoints=\"true\"\n        label=\"Dot size range\"\n      />\n      <Slider\n        v-else\n        v-model=\"fixedValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"1\"\n        :breakpoints=\"true\"\n        label=\"Dot size\"\n      />\n    </div>\n  </div>\n</template>\n<style>\n  .dot-size-selector {\n    margin-top: 24px\n  }\n  .dot-size-selector__row {\n    margin: 12px 0;\n  }\n</style>\n"],"mappings":""}

package/dist/forms/LayersForm/DotSizeSelector.vue2.js

@@ -0,0 +1,104 @@
+import { DEFAULT_DOT_RANGE as e } from "../../dataBindAes.js";
+import { isContinuousDataMapping as t } from "../../constantsCommon.js";
+import { useStore as n } from "../../store.js";
+import { computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, openBlock as l, ref as u, unref as d, watch as f, withModifiers as p } from "vue";
+import { PlDropdown as m, Slider as h, SliderRange as g } from "@platforma-sdk/ui-vue";
+var _ = { class: "dot-size-selector" }, v = { class: "dot-size-selector__row" }, y = { class: "dot-size-selector-row" }, b = /* @__PURE__ */ c({
+	__name: "DotSizeSelector",
+	props: {
+		selected: { default: void 0 },
+		min: { default: 3 },
+		max: { default: 10 },
+		possibleAesSourceInputs: { default: void 0 }
+	},
+	emits: ["aes-update", "aes-selector-close"],
+	setup(c, { emit: b }) {
+		let x = c, S = n(), C = r(() => S.value.reactive.chartType), w = b, T = x.possibleAesSourceInputs ?? {
+			discrete: ["primaryGrouping", "secondaryGrouping"],
+			scatterplot: ["size"],
+			"scatterplot-umap": ["size"],
+			dendro: [],
+			heatmap: [],
+			histogram: [],
+			bubble: []
+		}[C.value], E = u(t(x.selected) ? x.selected.column : "fix"), D = r(() => S.value.inputGuide.value);
+		function O(e) {
+			let t = D.value.getSourceInfo(e);
+			return C.value === "scatterplot" || C.value === "dendro" ? `Grouping: ${t?.label}` : t ? t?.label ?? "" : "Not consistent (grouping)";
+		}
+		let k = r(() => {
+			let e = [], t = S.value.reactive.optionsState.components;
+			return T.forEach((n) => {
+				t?.[n]?.selectorStates.length && t[n].selectorStates.forEach(({ selectedSource: t }) => {
+					D.value.getSourceInfo(t).type !== "String" && e.push({
+						text: O(t),
+						value: t
+					});
+				});
+			}), e.length ? e : [{
+				text: "Fixed",
+				value: "fix"
+			}];
+		}), A = u(t(x.selected) ? 3 : x.selected ?? 3), j = u(t(x.selected) ? [x.selected.range.min, x.selected.range.max] : [e.min, e.max]);
+		return f(() => E.value, (e) => {
+			e === "fix" ? w("aes-update", A.value) : w("aes-update", {
+				column: e,
+				range: {
+					min: j.value[0],
+					max: j.value[1]
+				}
+			});
+		}), f(() => A.value, (e) => {
+			E.value === "fix" && w("aes-update", e);
+		}), f(() => j.value, (e) => {
+			E.value !== "fix" && w("aes-update", {
+				column: E.value,
+				range: {
+					min: e[0],
+					max: e[1]
+				}
+			});
+		}), (e, t) => (l(), a("div", _, [o("div", v, [o("div", {
+			class: "aes-input-select",
+			onClick: t[1] ||= p(() => {}, ["stop"])
+		}, [s(d(m), {
+			modelValue: E.value,
+			"onUpdate:modelValue": t[0] ||= (e) => E.value = e,
+			disabled: k.value.length < 2 && k.value[0].value === E.value,
+			label: "Dot size source",
+			options: k.value
+		}, null, 8, [
+			"modelValue",
+			"disabled",
+			"options"
+		])])]), o("div", y, [E.value === "fix" ? (l(), i(d(h), {
+			key: 1,
+			modelValue: A.value,
+			"onUpdate:modelValue": t[3] ||= (e) => A.value = e,
+			min: c.min,
+			max: c.max,
+			step: 1,
+			breakpoints: !0,
+			label: "Dot size"
+		}, null, 8, [
+			"modelValue",
+			"min",
+			"max"
+		])) : (l(), i(d(g), {
+			key: 0,
+			modelValue: j.value,
+			"onUpdate:modelValue": t[2] ||= (e) => j.value = e,
+			min: c.min,
+			max: c.max,
+			breakpoints: !0,
+			label: "Dot size range"
+		}, null, 8, [
+			"modelValue",
+			"min",
+			"max"
+		]))])]));
+	}
+});
+export { b as default };
+
+//# sourceMappingURL=DotSizeSelector.vue2.js.map

package/dist/forms/LayersForm/DotSizeSelector.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSizeSelector.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/LayersForm/DotSizeSelector.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch } from 'vue';\nimport { PlDropdown, Slider, SliderRange } from '@platforma-sdk/ui-vue';\nimport { DEFAULT_DOT_RANGE, DEFAULT_DOT_SIZE } from '../../dataBindAes';\nimport { useStore } from '../../store';\nimport type { ContinuousDataMappingSize } from '../../constantsCommon';\nimport { isContinuousDataMapping } from '../../constantsCommon';\nimport type { ChartType } from '@milaboratories/pf-plots';\n\nconst props = withDefaults(defineProps<{\n  selected?: number | ContinuousDataMappingSize;\n  min?: number;\n  max?: number;\n  possibleAesSourceInputs?: string[];\n}>(), { selected: undefined, min: 3, max: 10, possibleAesSourceInputs: undefined });\n\nconst store = useStore();\nconst chartType = computed(() => store.value.reactive.chartType);\nconst emit = defineEmits(['aes-update', 'aes-selector-close']);\n\nconst DEFAULT_AES_INPUTS: Record<ChartType, string[]> = {\n  'discrete': ['primaryGrouping', 'secondaryGrouping'],\n  'scatterplot': ['size'],\n  'scatterplot-umap': ['size'],\n  'dendro': [],\n  'heatmap': [],\n  'histogram': [],\n  'bubble': [],\n};\nconst possibleAesSourceInputs = props.possibleAesSourceInputs ?? DEFAULT_AES_INPUTS[chartType.value];\n\nconst selectedKey = ref(\n  isContinuousDataMapping(props.selected) ? props.selected.column : 'fix',\n);\n\nconst inputGuide = computed(() => store.value.inputGuide.value);\n\nfunction getOptionTitle(selected: string) {\n  const selectedSourceInfo = inputGuide.value.getSourceInfo(selected);\n\n  if (chartType.value === 'scatterplot' || chartType.value === 'dendro') {\n    return `Grouping: ${selectedSourceInfo?.label}`;\n  }\n  if (!selectedSourceInfo) {\n    return 'Not consistent (grouping)';\n  }\n  return selectedSourceInfo?.label ?? '';\n}\n\nconst options = computed(() => {\n  const options: { text: string; value: string }[] = [];\n  const inputStateMap = store.value.reactive.optionsState.components;\n\n  possibleAesSourceInputs.forEach((name) => {\n    if (inputStateMap?.[name]?.selectorStates.length) {\n      inputStateMap[name].selectorStates.forEach(({ selectedSource }) => {\n        const selectedSourceInfo = inputGuide.value.getSourceInfo(selectedSource);\n        if (selectedSourceInfo.type !== 'String') {\n          options.push({\n            text: getOptionTitle(selectedSource),\n            value: selectedSource,\n          });\n        }\n      });\n    }\n  });\n  return options.length ? options : [{ text: 'Fixed', value: 'fix' }];\n});\n\nconst fixedValue = ref(isContinuousDataMapping(props.selected) ? DEFAULT_DOT_SIZE : props.selected ?? DEFAULT_DOT_SIZE);\nconst rangeValue = ref<[number, number]>(isContinuousDataMapping(props.selected) ? [props.selected.range.min, props.selected.range.max] : [DEFAULT_DOT_RANGE.min, DEFAULT_DOT_RANGE.max]);\n\nwatch(\n  () => selectedKey.value,\n  (value) => {\n    if (value === 'fix') {\n      emit('aes-update', fixedValue.value);\n    } else {\n      const mapping = {\n        column: value,\n        range: { min: rangeValue.value[0], max: rangeValue.value[1] },\n      } as ContinuousDataMappingSize;\n      emit('aes-update', mapping);\n    }\n  },\n);\n\nwatch(\n  () => fixedValue.value,\n  (value) => {\n    if (selectedKey.value === 'fix') {\n      emit('aes-update', value);\n    }\n  },\n);\n\nwatch(\n  () => rangeValue.value,\n  (rangeV) => {\n    if (selectedKey.value !== 'fix') {\n      const mapping = {\n        column: selectedKey.value,\n        range: { min: rangeV[0], max: rangeV[1] },\n      } as ContinuousDataMappingSize;\n      emit('aes-update', mapping);\n    }\n  },\n);\n\n</script>\n\n<template>\n  <div class=\"dot-size-selector\">\n    <div class=\"dot-size-selector__row\">\n      <div class=\"aes-input-select\" @click.stop>\n        <PlDropdown\n          v-model=\"selectedKey\"\n          :disabled=\"options.length < 2 && options[0].value === selectedKey\"\n          label=\"Dot size source\"\n          :options=\"options\"\n        />\n      </div>\n    </div>\n    <div class=\"dot-size-selector-row\">\n      <SliderRange\n        v-if=\"selectedKey !== 'fix'\"\n        v-model=\"rangeValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :breakpoints=\"true\"\n        label=\"Dot size range\"\n      />\n      <Slider\n        v-else\n        v-model=\"fixedValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"1\"\n        :breakpoints=\"true\"\n        label=\"Dot size\"\n      />\n    </div>\n  </div>\n</template>\n<style>\n  .dot-size-selector {\n    margin-top: 24px\n  }\n  .dot-size-selector__row {\n    margin: 12px 0;\n  }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GAOR,IAAQ,GAAU,EAClB,IAAY,QAAe,EAAM,MAAM,SAAS,UAAU,EAC1D,IAAO,GAWP,IAA0B,EAAM,2BATkB;GACtD,UAAY,CAAC,mBAAmB,oBAAoB;GACpD,aAAe,CAAC,OAAO;GACvB,oBAAoB,CAAC,OAAO;GAC5B,QAAU,EAAE;GACZ,SAAW,EAAE;GACb,WAAa,EAAE;GACf,QAAU,EAAE;GACb,CACmF,EAAU,QAExF,IAAc,EAClB,EAAwB,EAAM,SAAS,GAAG,EAAM,SAAS,SAAS,MACnE,EAEK,IAAa,QAAe,EAAM,MAAM,WAAW,MAAM;EAE/D,SAAS,EAAe,GAAkB;GACxC,IAAM,IAAqB,EAAW,MAAM,cAAc,EAAS;AAQnE,UANI,EAAU,UAAU,iBAAiB,EAAU,UAAU,WACpD,aAAa,GAAoB,UAErC,IAGE,GAAoB,SAAS,KAF3B;;EAKX,IAAM,IAAU,QAAe;GAC7B,IAAM,IAA6C,EAAE,EAC/C,IAAgB,EAAM,MAAM,SAAS,aAAa;AAexD,UAbA,EAAwB,SAAS,MAAS;AACxC,IAAI,IAAgB,IAAO,eAAe,UACxC,EAAc,GAAM,eAAe,SAAS,EAAE,wBAAqB;AAEjE,KAD2B,EAAW,MAAM,cAAc,EAAe,CAClD,SAAS,YAC9B,EAAQ,KAAK;MACX,MAAM,EAAe,EAAe;MACpC,OAAO;MACR,CAAC;MAEJ;KAEJ,EACK,EAAQ,SAAS,IAAU,CAAC;IAAE,MAAM;IAAS,OAAO;IAAO,CAAC;IACnE,EAEI,IAAa,EAAI,EAAwB,EAAM,SAAS,GAAA,IAAsB,EAAM,YAAA,EAA6B,EACjH,IAAa,EAAsB,EAAwB,EAAM,SAAS,GAAG,CAAC,EAAM,SAAS,MAAM,KAAK,EAAM,SAAS,MAAM,IAAI,GAAG,CAAC,EAAkB,KAAK,EAAkB,IAAI,CAAC;SAEzL,QACQ,EAAY,QACjB,MAAU;AACT,GAAI,MAAU,QACZ,EAAK,cAAc,EAAW,MAAM,GAMpC,EAAK,cAJW;IACd,QAAQ;IACR,OAAO;KAAE,KAAK,EAAW,MAAM;KAAI,KAAK,EAAW,MAAM;KAAI;IAC9D,CAC0B;IAGhC,EAED,QACQ,EAAW,QAChB,MAAU;AACT,GAAI,EAAY,UAAU,SACxB,EAAK,cAAc,EAAM;IAG9B,EAED,QACQ,EAAW,QAChB,MAAW;AACV,GAAI,EAAY,UAAU,SAKxB,EAAK,cAJW;IACd,QAAQ,EAAY;IACpB,OAAO;KAAE,KAAK,EAAO;KAAI,KAAK,EAAO;KAAI;IAC1C,CAC0B;IAGhC,kBAKC,EA8BM,OA9BN,GA8BM,CA7BJ,EASM,OATN,GASM,CARJ,EAOM,OAAA;GAPD,OAAM;GAAoB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;MACvC,EAKE,EAAA,EAAA,EAAA;eAJS,EAAA;4CAAW,QAAA;GACnB,UAAU,EAAA,MAAQ,SAAM,KAAQ,EAAA,MAAO,GAAI,UAAU,EAAA;GACtD,OAAM;GACL,SAAS,EAAA;;;;;UAIhB,EAkBM,OAlBN,GAkBM,CAhBI,EAAA,UAAW,cAOnB,EAQE,EAAA,EAAA,EAAA;;eANS,EAAA;4CAAU,QAAA;GAClB,KAAK,EAAA;GACL,KAAK,EAAA;GACL,MAAM;GACN,aAAa;GACd,OAAM;;;;;SAdW,GAAA,EADnB,EAOE,EAAA,EAAA,EAAA;;eALS,EAAA;4CAAU,QAAA;GAClB,KAAK,EAAA;GACL,KAAK,EAAA;GACL,aAAa;GACd,OAAM"}

package/dist/forms/LayersForm/Layer/Bubble.js

@@ -0,0 +1,5 @@
+import e from "./Bubble.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=Bubble.js.map

package/dist/forms/LayersForm/Layer/Bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.js","names":[],"sources":["../../../../src/forms/LayersForm/Layer/Bubble.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport type { BubbleLayer } from '../../../types';\nimport { computed, ref } from 'vue';\nimport {\n  DEFAULT_BLACK,\n  PALETTE_MAP,\n} from '../../../constantsAesthetic';\nimport type { ContinuousPalette } from '../../../components/AesSettings/types';\nimport { createContinuousMappingFromPalette } from '../../../dataBindAes';\nimport MultiselectButton from '../../../components/MultiselectButton.vue';\nimport PalettesForm from '../../../components/AesSettings/PalettesForm.vue';\nimport FormWrapper from '../../../components/AesSettings/FormWrapper.vue';\nimport type { BubbleUIState } from '@milaboratories/pf-plots';\nimport type { SimpleOption } from '@platforma-sdk/ui-vue';\nimport { PlBtnGroup, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport AesSelector from '../AesSelector.vue';\nimport { AGGREGATION_METHOD_OPTIONS } from '../../../constantsCommon';\n\nconst store = useStore();\nconst layer: BubbleLayer = 'bubble';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(() => store.value.reactive.optionsState as BubbleUIState);\n\nconst valueColor = computed(() => optionsState.value.components.valueColor.selectorStates[0]?.selectedSource);\nconst savedDataValuePalette = computed(() => valueColor.value ? store.value.reactive.dataBindAes[valueColor.value]?.palette : undefined);\n\nconst palettesOpen = ref(false);\nconst palette = ref<ContinuousPalette>(savedDataValuePalette.value as ContinuousPalette ?? store.value.defaultPalette.continuous);\n\nfunction onPaletteSelect(value: ContinuousPalette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  if (valueColor.value) {\n    store.value.reactive.dataBindAes[valueColor.value] = createContinuousMappingFromPalette(value);\n  }\n}\n\nconst NORMALIZATION_DIRECTION: SimpleOption[] = [\n  { label: 'None', value: null },\n  { label: 'Columns', value: 'column' },\n  { label: 'Rows', value: 'row' },\n];\nconst NORMALIZATION_METHOD: SimpleOption[] = [\n  { label: 'z-score', value: 'standardScaling' },\n  { label: 'Min-max', value: 'meanNormalization' },\n];\nconst AGGREGATION_METHOD = AGGREGATION_METHOD_OPTIONS;\n\nconst stroke = computed({\n  get: () => {\n    return settings.value.strokeColor ?? DEFAULT_BLACK;\n  },\n  set: (v: string) => {\n    settings.value.strokeColor = v;\n  },\n});\n\nconst NA_VALUE_OPTIONS: SimpleOption[] = [\n  { label: 'empty', value: null },\n  { label: 'Special value', value: 'custom' },\n];\n\nconst NAValueOption = ref(settings.value.NAValueAs !== null ? 'custom' : settings.value.NAValueAs);\nconst customNA = ref(settings.value.NAValueAs ?? 0);\n\n</script>\n\n<template>\n  <MultiselectButton\n    label=\"Color Palette \"\n    :title=\"PALETTE_MAP[palette].title\"\n    :palette=\"palette\"\n    @button-click=\"palettesOpen = true;\"\n  />\n  <FormWrapper\n    v-if=\"palettesOpen\"\n    title=\"Color Palette\"\n    back-title=\"Color mapping\"\n    @form:close=\"palettesOpen = false\"\n  >\n    <PalettesForm :selected=\"palette\" :categorical=\"false\" @select=\"onPaletteSelect\" />\n  </FormWrapper>\n  <div class=\"input-item\">\n    <AesSelector\n      label=\"Stroke color\"\n      form-title=\"Stroke Color Settings\"\n      form-back-title=\"Layers\"\n      type=\"stroke\"\n      :possible-aes-source-inputs=\"[]\"\n      :selected=\"stroke\"\n      @aes-update=\"(v:string) => stroke = v\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.normalizationDirection\"\n      label=\"Normalize by\"\n      :options=\"NORMALIZATION_DIRECTION\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.normalizationMethod\"\n      label=\"Normalization method\"\n      :options=\"NORMALIZATION_METHOD\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"settings.aggregateByX\"/>\n    <span>Aggregate X groups</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"settings.aggregateByY\"/>\n    <span>Aggregate Y groups</span>\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.aggregationMethod\"\n      label=\"Aggregation method\"\n      :options=\"AGGREGATION_METHOD\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"button-group-item\" :style=\"{display: 'flex', alignItems: 'end'}\">\n    <PlBtnGroup\n      v-model=\"NAValueOption\"\n      label=\"Treat NA value as:\"\n      :options=\"NA_VALUE_OPTIONS\"\n      :compact=\"true\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value === 'custom') {\n          settings.NAValueAs = customNA;\n        } else {\n          settings.NAValueAs = value as number|null;\n        }\n      }\"\n    />\n    <PlNumberField\n      v-model=\"customNA\"\n      :style=\"{height: '33px', marginLeft: '16px', width: '75px'}\"\n      :disabled=\"NAValueOption !== 'custom'\"\n      label=\"NA value\"\n      :useIncrementButtons=\"false\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value !== undefined) {\n          settings.NAValueAs = value as number;\n        }\n      }\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/forms/LayersForm/Layer/Bubble.vue2.js

@@ -1,5 +1,142 @@
-import f from "./Bubble.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Bubble.vue2.js.map
+import { PALETTE_MAP as e } from "../../../constantsAesthetic.js";
+import { createContinuousMappingFromPalette as t } from "../../../dataBindAes.js";
+import { AGGREGATION_METHOD_OPTIONS as n } from "../../../constantsCommon.js";
+import r from "../../../components/AesSettings/FormWrapper.js";
+import i from "../../../components/AesSettings/PalettesForm.js";
+import a from "../../../components/MultiselectButton.js";
+import o from "../AesSelector.js";
+import { useStore as s } from "../../../store.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, openBlock as g, ref as _, unref as v, withCtx as y } from "vue";
+import { PlBtnGroup as b, PlCheckbox as x, PlNumberField as S } from "@platforma-sdk/ui-vue";
+var C = { class: "input-item" }, w = { class: "button-group-item" }, T = { class: "button-group-item" }, E = { class: "checkbox-item" }, D = { class: "checkbox-item" }, O = { class: "button-group-item" }, k = {
+	class: "button-group-item",
+	style: {
+		display: "flex",
+		alignItems: "end"
+	}
+}, A = "bubble", j = /* @__PURE__ */ h({
+	__name: "Bubble",
+	setup(h) {
+		let j = s(), M = l(() => j.value.reactive.layersSettings[A]), N = l(() => j.value.reactive.optionsState), P = l(() => N.value.components.valueColor.selectorStates[0]?.selectedSource), F = l(() => P.value ? j.value.reactive.dataBindAes[P.value]?.palette : void 0), I = _(!1), L = _(F.value ?? j.value.defaultPalette.continuous);
+		function R(e) {
+			L.value = e, I.value = !1, P.value && (j.value.reactive.dataBindAes[P.value] = t(e));
+		}
+		let z = [
+			{
+				label: "None",
+				value: null
+			},
+			{
+				label: "Columns",
+				value: "column"
+			},
+			{
+				label: "Rows",
+				value: "row"
+			}
+		], B = [{
+			label: "z-score",
+			value: "standardScaling"
+		}, {
+			label: "Min-max",
+			value: "meanNormalization"
+		}], V = n, H = l({
+			get: () => M.value.strokeColor ?? "#110529",
+			set: (e) => {
+				M.value.strokeColor = e;
+			}
+		}), U = [{
+			label: "empty",
+			value: null
+		}, {
+			label: "Special value",
+			value: "custom"
+		}], W = _(M.value.NAValueAs === null ? M.value.NAValueAs : "custom"), G = _(M.value.NAValueAs ?? 0);
+		return (t, n) => (g(), f(c, null, [
+			m(a, {
+				label: "Color Palette ",
+				title: v(e)[L.value].title,
+				palette: L.value,
+				onButtonClick: n[0] ||= (e) => {
+					I.value = !0;
+				}
+			}, null, 8, ["title", "palette"]),
+			I.value ? (g(), u(r, {
+				key: 0,
+				title: "Color Palette",
+				"back-title": "Color mapping",
+				"onForm:close": n[1] ||= (e) => I.value = !1
+			}, {
+				default: y(() => [m(i, {
+					selected: L.value,
+					categorical: !1,
+					onSelect: R
+				}, null, 8, ["selected"])]),
+				_: 1
+			})) : d("", !0),
+			p("div", C, [m(o, {
+				label: "Stroke color",
+				"form-title": "Stroke Color Settings",
+				"form-back-title": "Layers",
+				type: "stroke",
+				"possible-aes-source-inputs": [],
+				selected: H.value,
+				onAesUpdate: n[2] ||= (e) => H.value = e
+			}, null, 8, ["selected"])]),
+			p("div", w, [m(v(b), {
+				modelValue: M.value.normalizationDirection,
+				"onUpdate:modelValue": n[3] ||= (e) => M.value.normalizationDirection = e,
+				label: "Normalize by",
+				options: z,
+				compact: !0
+			}, null, 8, ["modelValue"])]),
+			p("div", T, [m(v(b), {
+				modelValue: M.value.normalizationMethod,
+				"onUpdate:modelValue": n[4] ||= (e) => M.value.normalizationMethod = e,
+				label: "Normalization method",
+				options: B,
+				compact: !0
+			}, null, 8, ["modelValue"])]),
+			p("div", E, [m(v(x), {
+				modelValue: M.value.aggregateByX,
+				"onUpdate:modelValue": n[5] ||= (e) => M.value.aggregateByX = e
+			}, null, 8, ["modelValue"]), n[12] ||= p("span", null, "Aggregate X groups", -1)]),
+			p("div", D, [m(v(x), {
+				modelValue: M.value.aggregateByY,
+				"onUpdate:modelValue": n[6] ||= (e) => M.value.aggregateByY = e
+			}, null, 8, ["modelValue"]), n[13] ||= p("span", null, "Aggregate Y groups", -1)]),
+			p("div", O, [m(v(b), {
+				modelValue: M.value.aggregationMethod,
+				"onUpdate:modelValue": n[7] ||= (e) => M.value.aggregationMethod = e,
+				label: "Aggregation method",
+				options: v(V),
+				compact: !0
+			}, null, 8, ["modelValue", "options"])]),
+			p("div", k, [m(v(b), {
+				modelValue: W.value,
+				"onUpdate:modelValue": [n[8] ||= (e) => W.value = e, n[9] ||= (e) => {
+					e === "custom" ? M.value.NAValueAs = G.value : M.value.NAValueAs = e;
+				}],
+				label: "Treat NA value as:",
+				options: U,
+				compact: !0
+			}, null, 8, ["modelValue"]), m(v(S), {
+				modelValue: G.value,
+				"onUpdate:modelValue": [n[10] ||= (e) => G.value = e, n[11] ||= (e) => {
+					e !== void 0 && (M.value.NAValueAs = e);
+				}],
+				style: {
+					height: "33px",
+					marginLeft: "16px",
+					width: "75px"
+				},
+				disabled: W.value !== "custom",
+				label: "NA value",
+				useIncrementButtons: !1
+			}, null, 8, ["modelValue", "disabled"])])
+		], 64));
+	}
+});
+export { j as default };
+
+//# sourceMappingURL=Bubble.vue2.js.map

package/dist/forms/LayersForm/Layer/Bubble.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Bubble.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/forms/LayersForm/Layer/Bubble.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport type { BubbleLayer } from '../../../types';\nimport { computed, ref } from 'vue';\nimport {\n  DEFAULT_BLACK,\n  PALETTE_MAP,\n} from '../../../constantsAesthetic';\nimport type { ContinuousPalette } from '../../../components/AesSettings/types';\nimport { createContinuousMappingFromPalette } from '../../../dataBindAes';\nimport MultiselectButton from '../../../components/MultiselectButton.vue';\nimport PalettesForm from '../../../components/AesSettings/PalettesForm.vue';\nimport FormWrapper from '../../../components/AesSettings/FormWrapper.vue';\nimport type { BubbleUIState } from '@milaboratories/pf-plots';\nimport type { SimpleOption } from '@platforma-sdk/ui-vue';\nimport { PlBtnGroup, PlCheckbox, PlNumberField } from '@platforma-sdk/ui-vue';\nimport AesSelector from '../AesSelector.vue';\nimport { AGGREGATION_METHOD_OPTIONS } from '../../../constantsCommon';\n\nconst store = useStore();\nconst layer: BubbleLayer = 'bubble';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(() => store.value.reactive.optionsState as BubbleUIState);\n\nconst valueColor = computed(() => optionsState.value.components.valueColor.selectorStates[0]?.selectedSource);\nconst savedDataValuePalette = computed(() => valueColor.value ? store.value.reactive.dataBindAes[valueColor.value]?.palette : undefined);\n\nconst palettesOpen = ref(false);\nconst palette = ref<ContinuousPalette>(savedDataValuePalette.value as ContinuousPalette ?? store.value.defaultPalette.continuous);\n\nfunction onPaletteSelect(value: ContinuousPalette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  if (valueColor.value) {\n    store.value.reactive.dataBindAes[valueColor.value] = createContinuousMappingFromPalette(value);\n  }\n}\n\nconst NORMALIZATION_DIRECTION: SimpleOption[] = [\n  { label: 'None', value: null },\n  { label: 'Columns', value: 'column' },\n  { label: 'Rows', value: 'row' },\n];\nconst NORMALIZATION_METHOD: SimpleOption[] = [\n  { label: 'z-score', value: 'standardScaling' },\n  { label: 'Min-max', value: 'meanNormalization' },\n];\nconst AGGREGATION_METHOD = AGGREGATION_METHOD_OPTIONS;\n\nconst stroke = computed({\n  get: () => {\n    return settings.value.strokeColor ?? DEFAULT_BLACK;\n  },\n  set: (v: string) => {\n    settings.value.strokeColor = v;\n  },\n});\n\nconst NA_VALUE_OPTIONS: SimpleOption[] = [\n  { label: 'empty', value: null },\n  { label: 'Special value', value: 'custom' },\n];\n\nconst NAValueOption = ref(settings.value.NAValueAs !== null ? 'custom' : settings.value.NAValueAs);\nconst customNA = ref(settings.value.NAValueAs ?? 0);\n\n</script>\n\n<template>\n  <MultiselectButton\n    label=\"Color Palette \"\n    :title=\"PALETTE_MAP[palette].title\"\n    :palette=\"palette\"\n    @button-click=\"palettesOpen = true;\"\n  />\n  <FormWrapper\n    v-if=\"palettesOpen\"\n    title=\"Color Palette\"\n    back-title=\"Color mapping\"\n    @form:close=\"palettesOpen = false\"\n  >\n    <PalettesForm :selected=\"palette\" :categorical=\"false\" @select=\"onPaletteSelect\" />\n  </FormWrapper>\n  <div class=\"input-item\">\n    <AesSelector\n      label=\"Stroke color\"\n      form-title=\"Stroke Color Settings\"\n      form-back-title=\"Layers\"\n      type=\"stroke\"\n      :possible-aes-source-inputs=\"[]\"\n      :selected=\"stroke\"\n      @aes-update=\"(v:string) => stroke = v\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.normalizationDirection\"\n      label=\"Normalize by\"\n      :options=\"NORMALIZATION_DIRECTION\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.normalizationMethod\"\n      label=\"Normalization method\"\n      :options=\"NORMALIZATION_METHOD\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"settings.aggregateByX\"/>\n    <span>Aggregate X groups</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"settings.aggregateByY\"/>\n    <span>Aggregate Y groups</span>\n  </div>\n  <div class=\"button-group-item\">\n    <PlBtnGroup\n      v-model=\"settings.aggregationMethod\"\n      label=\"Aggregation method\"\n      :options=\"AGGREGATION_METHOD\"\n      :compact=\"true\"\n    />\n  </div>\n  <div class=\"button-group-item\" :style=\"{display: 'flex', alignItems: 'end'}\">\n    <PlBtnGroup\n      v-model=\"NAValueOption\"\n      label=\"Treat NA value as:\"\n      :options=\"NA_VALUE_OPTIONS\"\n      :compact=\"true\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value === 'custom') {\n          settings.NAValueAs = customNA;\n        } else {\n          settings.NAValueAs = value as number|null;\n        }\n      }\"\n    />\n    <PlNumberField\n      v-model=\"customNA\"\n      :style=\"{height: '33px', marginLeft: '16px', width: '75px'}\"\n      :disabled=\"NAValueOption !== 'custom'\"\n      label=\"NA value\"\n      :useIncrementButtons=\"false\"\n      @update:modelValue=\"(value:unknown) => {\n        if (value !== undefined) {\n          settings.NAValueAs = value as number;\n        }\n      }\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/forms/LayersForm/Layer/Dendro.js

@@ -0,0 +1,5 @@
+import e from "./Dendro.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=Dendro.js.map

package/dist/forms/LayersForm/Layer/Dendro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dendro.js","names":[],"sources":["../../../../src/forms/LayersForm/Layer/Dendro.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport { computed, ref } from 'vue';\nimport AesSelector from '../AesSelector.vue';\nimport type { AestheticMappingCategorical } from '../../../dataBindAes';\nimport type {\n  AesMappingOption,\n  AesOption,\n  DotShape,\n} from '../../../components/AesSettings/types';\nimport type { DendroUIState } from '@milaboratories/pf-plots';\nimport { PlCheckbox, SliderRange, Slider } from '@platforma-sdk/ui-vue';\nimport { isNumberRange } from '../../../constantsCommon';\n\nconst store = useStore();\nconst layer = 'dendro';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DendroUIState,\n);\n\nconst nodeColor = computed(() => settings.value.dotFill);\nconst nodeShape = computed(() => settings.value.dotShape);\nconst lineColor = computed(() => settings.value.lineColor);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'dotFill' | 'lineColor',\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n      value: colorOption.selectedSource,\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDot(\n  value: DotShape | AestheticMappingCategorical,\n  colorOption: AesMappingOption,\n  field: 'dotShape',\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n      value: colorOption.selectedSource,\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\n// Tree mode 'useAllNodesAsLeaves' - align tree special way to be able to set table line opposite every node\n// const treeAlign = ref(settings.value.mode === 'useAllNodesAsLeaves');\nconst leavesAlign = ref(settings.value.leavesMode === 'alignLeavesToLine');\n\nconst showLegend = computed({\n  get() { return settings.value.showLegend ?? true; },\n  set(v) {\n    settings.value.showLegend = v;\n  },\n});\nconst nodeSizeRange = computed<[number, number]>({\n  get() { return isNumberRange(settings.value.dotSize) ? [settings.value.dotSize.min, settings.value.dotSize.max] : [3, 10]; },\n  set([min, max]: [number, number]) {\n    settings.value.dotSize = { min, max };\n  },\n});\nconst nodeSize = computed<number>({\n  get() { return isNumberRange(settings.value.dotSize) ? 3 : settings.value.dotSize; },\n  set(v: number) {\n    settings.value.dotSize = v;\n  },\n});\n\n</script>\n\n<template>\n  <AesSelector\n    label=\"Node color\"\n    form-title=\"Node Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"nodeColor\"\n    :possible-aes-source-inputs=\"['nodeColor']\"\n    :without-fixed=\"\n      optionsState.components.nodeColor.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:string|AestheticMappingCategorical, c:AesOption) => onUpdate(v, c, 'dotFill')\"\n  />\n  <AesSelector\n    label=\"Node shape\"\n    form-title=\"Node Shape Settings\"\n    form-back-title=\"Layers\"\n    type=\"dotShape\"\n    :selected=\"nodeShape\"\n    :possible-aes-source-inputs=\"['nodeShape']\"\n    :without-fixed=\"\n      optionsState.components.nodeShape.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:DotShape|AestheticMappingCategorical, c:AesMappingOption) => onUpdateDot(v, c, 'dotShape')\"\n  />\n  <AesSelector\n    label=\"Line color\"\n    form-title=\"Line Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"lineColor\"\n    :possible-aes-source-inputs=\"['lineColor']\"\n    :without-fixed=\"\n      optionsState.components.lineColor.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:string|AestheticMappingCategorical, c:AesOption) => onUpdate(v, c, 'lineColor')\"\n  />\n  <!--  <div class=\"checkbox-item\">-->\n  <!--    <pl-checkbox v-model=\"treeAlign\" @update:modelValue=\"(v) => {-->\n  <!--      settings.mode = v ? 'useAllNodesAsLeaves' : 'normal';-->\n  <!--    }\"/>-->\n  <!--    <span>Align every node with table</span>-->\n  <!--  </div>-->\n  <div>\n    <SliderRange\n      v-if=\"optionsState.components.nodeSize.selectorStates.length > 0\"\n      v-model=\"nodeSizeRange\"\n      :min=\"3\"\n      :max=\"10\"\n      :breakpoints=\"true\"\n      label=\"Node size range\"\n    />\n    <Slider\n      v-else\n      v-model=\"nodeSize\"\n      :min=\"3\"\n      :max=\"10\"\n      :step=\"1\"\n      :breakpoints=\"true\"\n      label=\"Node size\"\n    />\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox\n      v-model=\"leavesAlign\" @update:modelValue=\"(v) => {\n        settings.leavesMode = v ? 'alignLeavesToLine' : 'normal';\n      }\"\n    />\n    <span>Move leaves to the right</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"showLegend\"/>\n    <span>Show legend</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/forms/LayersForm/Layer/Dendro.vue2.js

@@ -1,5 +1,111 @@
-import f from "./Dendro.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Dendro.vue2.js.map
+import { isNumberRange as e } from "../../../constantsCommon.js";
+import t from "../AesSelector.js";
+import { useStore as n } from "../../../store.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, openBlock as u, ref as d, unref as f } from "vue";
+import { PlCheckbox as p, Slider as m, SliderRange as h } from "@platforma-sdk/ui-vue";
+var g = { class: "checkbox-item" }, _ = { class: "checkbox-item" }, v = "dendro", y = /* @__PURE__ */ l({
+	__name: "Dendro",
+	setup(l) {
+		let y = n(), b = i(() => y.value.reactive.layersSettings[v]), x = i(() => y.value.reactive.optionsState), S = i(() => b.value.dotFill), C = i(() => b.value.dotShape), w = i(() => b.value.lineColor);
+		function T(e, t, n) {
+			typeof e == "string" ? y.value.reactive.layersSettings[v][n] = e : t.type === "dataCategorical" && (y.value.reactive.layersSettings[v][n] = {
+				type: t.inputName,
+				value: t.selectedSource
+			}), t.type === "dataCategorical" && typeof e != "string" && (y.value.reactive.dataBindAes[t.selectedSource] = e);
+		}
+		function E(e, t, n) {
+			typeof e == "string" ? y.value.reactive.layersSettings[v][n] = e : t.type === "dataCategorical" && (y.value.reactive.layersSettings[v][n] = {
+				type: t.inputName,
+				value: t.selectedSource
+			}), t.type === "dataCategorical" && typeof e != "string" && (y.value.reactive.dataBindAes[t.selectedSource] = e);
+		}
+		let D = d(b.value.leavesMode === "alignLeavesToLine"), O = i({
+			get() {
+				return b.value.showLegend ?? !0;
+			},
+			set(e) {
+				b.value.showLegend = e;
+			}
+		}), k = i({
+			get() {
+				return e(b.value.dotSize) ? [b.value.dotSize.min, b.value.dotSize.max] : [3, 10];
+			},
+			set([e, t]) {
+				b.value.dotSize = {
+					min: e,
+					max: t
+				};
+			}
+		}), A = i({
+			get() {
+				return e(b.value.dotSize) ? 3 : b.value.dotSize;
+			},
+			set(e) {
+				b.value.dotSize = e;
+			}
+		});
+		return (e, n) => (u(), o(r, null, [
+			c(t, {
+				label: "Node color",
+				"form-title": "Node Color Settings",
+				"form-back-title": "Layers",
+				type: "fill",
+				selected: S.value,
+				"possible-aes-source-inputs": ["nodeColor"],
+				"without-fixed": x.value.components.nodeColor.selectorStates.length > 0,
+				onAesUpdate: n[0] ||= (e, t) => T(e, t, "dotFill")
+			}, null, 8, ["selected", "without-fixed"]),
+			c(t, {
+				label: "Node shape",
+				"form-title": "Node Shape Settings",
+				"form-back-title": "Layers",
+				type: "dotShape",
+				selected: C.value,
+				"possible-aes-source-inputs": ["nodeShape"],
+				"without-fixed": x.value.components.nodeShape.selectorStates.length > 0,
+				onAesUpdate: n[1] ||= (e, t) => E(e, t, "dotShape")
+			}, null, 8, ["selected", "without-fixed"]),
+			c(t, {
+				label: "Line color",
+				"form-title": "Line Color Settings",
+				"form-back-title": "Layers",
+				type: "fill",
+				selected: w.value,
+				"possible-aes-source-inputs": ["lineColor"],
+				"without-fixed": x.value.components.lineColor.selectorStates.length > 0,
+				onAesUpdate: n[2] ||= (e, t) => T(e, t, "lineColor")
+			}, null, 8, ["selected", "without-fixed"]),
+			s("div", null, [x.value.components.nodeSize.selectorStates.length > 0 ? (u(), a(f(h), {
+				key: 0,
+				modelValue: k.value,
+				"onUpdate:modelValue": n[3] ||= (e) => k.value = e,
+				min: 3,
+				max: 10,
+				breakpoints: !0,
+				label: "Node size range"
+			}, null, 8, ["modelValue"])) : (u(), a(f(m), {
+				key: 1,
+				modelValue: A.value,
+				"onUpdate:modelValue": n[4] ||= (e) => A.value = e,
+				min: 3,
+				max: 10,
+				step: 1,
+				breakpoints: !0,
+				label: "Node size"
+			}, null, 8, ["modelValue"]))]),
+			s("div", g, [c(f(p), {
+				modelValue: D.value,
+				"onUpdate:modelValue": [n[5] ||= (e) => D.value = e, n[6] ||= (e) => {
+					b.value.leavesMode = e ? "alignLeavesToLine" : "normal";
+				}]
+			}, null, 8, ["modelValue"]), n[8] ||= s("span", null, "Move leaves to the right", -1)]),
+			s("div", _, [c(f(p), {
+				modelValue: O.value,
+				"onUpdate:modelValue": n[7] ||= (e) => O.value = e
+			}, null, 8, ["modelValue"]), n[9] ||= s("span", null, "Show legend", -1)])
+		], 64));
+	}
+});
+export { y as default };
+
+//# sourceMappingURL=Dendro.vue2.js.map

package/dist/forms/LayersForm/Layer/Dendro.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dendro.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Dendro.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/forms/LayersForm/Layer/Dendro.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../store';\nimport { computed, ref } from 'vue';\nimport AesSelector from '../AesSelector.vue';\nimport type { AestheticMappingCategorical } from '../../../dataBindAes';\nimport type {\n  AesMappingOption,\n  AesOption,\n  DotShape,\n} from '../../../components/AesSettings/types';\nimport type { DendroUIState } from '@milaboratories/pf-plots';\nimport { PlCheckbox, SliderRange, Slider } from '@platforma-sdk/ui-vue';\nimport { isNumberRange } from '../../../constantsCommon';\n\nconst store = useStore();\nconst layer = 'dendro';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DendroUIState,\n);\n\nconst nodeColor = computed(() => settings.value.dotFill);\nconst nodeShape = computed(() => settings.value.dotShape);\nconst lineColor = computed(() => settings.value.lineColor);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'dotFill' | 'lineColor',\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n      value: colorOption.selectedSource,\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDot(\n  value: DotShape | AestheticMappingCategorical,\n  colorOption: AesMappingOption,\n  field: 'dotShape',\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n      value: colorOption.selectedSource,\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\n// Tree mode 'useAllNodesAsLeaves' - align tree special way to be able to set table line opposite every node\n// const treeAlign = ref(settings.value.mode === 'useAllNodesAsLeaves');\nconst leavesAlign = ref(settings.value.leavesMode === 'alignLeavesToLine');\n\nconst showLegend = computed({\n  get() { return settings.value.showLegend ?? true; },\n  set(v) {\n    settings.value.showLegend = v;\n  },\n});\nconst nodeSizeRange = computed<[number, number]>({\n  get() { return isNumberRange(settings.value.dotSize) ? [settings.value.dotSize.min, settings.value.dotSize.max] : [3, 10]; },\n  set([min, max]: [number, number]) {\n    settings.value.dotSize = { min, max };\n  },\n});\nconst nodeSize = computed<number>({\n  get() { return isNumberRange(settings.value.dotSize) ? 3 : settings.value.dotSize; },\n  set(v: number) {\n    settings.value.dotSize = v;\n  },\n});\n\n</script>\n\n<template>\n  <AesSelector\n    label=\"Node color\"\n    form-title=\"Node Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"nodeColor\"\n    :possible-aes-source-inputs=\"['nodeColor']\"\n    :without-fixed=\"\n      optionsState.components.nodeColor.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:string|AestheticMappingCategorical, c:AesOption) => onUpdate(v, c, 'dotFill')\"\n  />\n  <AesSelector\n    label=\"Node shape\"\n    form-title=\"Node Shape Settings\"\n    form-back-title=\"Layers\"\n    type=\"dotShape\"\n    :selected=\"nodeShape\"\n    :possible-aes-source-inputs=\"['nodeShape']\"\n    :without-fixed=\"\n      optionsState.components.nodeShape.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:DotShape|AestheticMappingCategorical, c:AesMappingOption) => onUpdateDot(v, c, 'dotShape')\"\n  />\n  <AesSelector\n    label=\"Line color\"\n    form-title=\"Line Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"lineColor\"\n    :possible-aes-source-inputs=\"['lineColor']\"\n    :without-fixed=\"\n      optionsState.components.lineColor.selectorStates.length > 0\n    \"\n    @aes-update=\"(v:string|AestheticMappingCategorical, c:AesOption) => onUpdate(v, c, 'lineColor')\"\n  />\n  <!--  <div class=\"checkbox-item\">-->\n  <!--    <pl-checkbox v-model=\"treeAlign\" @update:modelValue=\"(v) => {-->\n  <!--      settings.mode = v ? 'useAllNodesAsLeaves' : 'normal';-->\n  <!--    }\"/>-->\n  <!--    <span>Align every node with table</span>-->\n  <!--  </div>-->\n  <div>\n    <SliderRange\n      v-if=\"optionsState.components.nodeSize.selectorStates.length > 0\"\n      v-model=\"nodeSizeRange\"\n      :min=\"3\"\n      :max=\"10\"\n      :breakpoints=\"true\"\n      label=\"Node size range\"\n    />\n    <Slider\n      v-else\n      v-model=\"nodeSize\"\n      :min=\"3\"\n      :max=\"10\"\n      :step=\"1\"\n      :breakpoints=\"true\"\n      label=\"Node size\"\n    />\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox\n      v-model=\"leavesAlign\" @update:modelValue=\"(v) => {\n        settings.leavesMode = v ? 'alignLeavesToLine' : 'normal';\n      }\"\n    />\n    <span>Move leaves to the right</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"showLegend\"/>\n    <span>Show legend</span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/forms/LayersForm/Layer/discrete/Bar.js

@@ -0,0 +1,5 @@
+import e from "./Bar.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=Bar.js.map

package/dist/forms/LayersForm/Layer/discrete/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","names":[],"sources":["../../../../../src/forms/LayersForm/Layer/discrete/Bar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { PlDropdown, Slider } from '@platforma-sdk/ui-vue';\nimport { computed } from 'vue';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport type { DiscreteUIState } from '@milaboratories/pf-plots';\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport { AGGREGATION_METHOD_OPTIONS } from '../../../../constantsCommon';\n\nconst store = useStore();\nconst layer = 'bar';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'fillColor' | 'lineColor',\n) {\n  if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = { type: colorOption.inputName };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst HEIGHT_OPTIONS = AGGREGATION_METHOD_OPTIONS;\n\nconst opacity = computed({\n  get: () => settings.value.opacity * 100,\n  set: (newValue: number) => {\n    settings.value.opacity = newValue / 100;\n  },\n});\n</script>\n\n<template>\n  <AesSelector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <AesSelector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <div class=\"input-item\" @click.stop>\n    <PlDropdown\n      v-model=\"settings.height\"\n      label=\"Height\"\n      :options=\"HEIGHT_OPTIONS\"\n    />\n  </div>\n  <Slider\n    v-model=\"opacity\"\n    label=\"Opacity\"\n    :min=\"0\"\n    :max=\"100\"\n    :step=\"1\"\n    :breakpoints=\"false\"\n    measure=\"%\"\n  />\n</template>\n"],"mappings":""}

package/dist/forms/LayersForm/Layer/discrete/Bar.vue2.js

@@ -1,5 +1,62 @@
-import f from "./Bar.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Bar.vue2.js.map
+import { DEFAULT_BLACK as e, DEFAULT_WHITE as t } from "../../../../constantsAesthetic.js";
+import { AGGREGATION_METHOD_OPTIONS as n } from "../../../../constantsCommon.js";
+import { useDefaultAes as r } from "./utils.js";
+import i from "../../AesSelector.js";
+import { useStore as a } from "../../../../store.js";
+import { Fragment as o, computed as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, openBlock as f, unref as p, withModifiers as m } from "vue";
+import { PlDropdown as h, Slider as g } from "@platforma-sdk/ui-vue";
+var _ = "bar", v = /* @__PURE__ */ d({
+	__name: "Bar",
+	setup(d) {
+		let v = a(), y = s(() => v.value.reactive.layersSettings[_]), b = s(() => v.value.reactive.optionsState), x = s(() => r(y.value.fillColor, b.value, t)), S = s(() => r(y.value.lineColor, b.value, e));
+		function C(e, t, n) {
+			t.type === "dataCategorical" ? v.value.reactive.layersSettings[_][n] = { type: t.inputName } : v.value.reactive.layersSettings[_][n] = e, t.type === "dataCategorical" && typeof e != "string" && (v.value.reactive.dataBindAes[t.selectedSource] = e);
+		}
+		let w = n, T = s({
+			get: () => y.value.opacity * 100,
+			set: (e) => {
+				y.value.opacity = e / 100;
+			}
+		});
+		return (e, t) => (f(), c(o, null, [
+			u(i, {
+				label: "Fill color",
+				"form-title": "Fill Color Settings",
+				"form-back-title": "Layers",
+				type: "fill",
+				selected: x.value,
+				onAesUpdate: t[0] ||= (e, t) => C(e, t, "fillColor")
+			}, null, 8, ["selected"]),
+			u(i, {
+				label: "Stroke color",
+				"form-title": "Stroke Color Settings",
+				"form-back-title": "Layers",
+				type: "stroke",
+				selected: S.value,
+				onAesUpdate: t[1] ||= (e, t) => C(e, t, "lineColor")
+			}, null, 8, ["selected"]),
+			l("div", {
+				class: "input-item",
+				onClick: t[3] ||= m(() => {}, ["stop"])
+			}, [u(p(h), {
+				modelValue: y.value.height,
+				"onUpdate:modelValue": t[2] ||= (e) => y.value.height = e,
+				label: "Height",
+				options: p(w)
+			}, null, 8, ["modelValue", "options"])]),
+			u(p(g), {
+				modelValue: T.value,
+				"onUpdate:modelValue": t[4] ||= (e) => T.value = e,
+				label: "Opacity",
+				min: 0,
+				max: 100,
+				step: 1,
+				breakpoints: !1,
+				measure: "%"
+			}, null, 8, ["modelValue"])
+		], 64));
+	}
+});
+export { v as default };
+
+//# sourceMappingURL=Bar.vue2.js.map

package/dist/forms/LayersForm/Layer/discrete/Bar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Bar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/forms/LayersForm/Layer/discrete/Bar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { PlDropdown, Slider } from '@platforma-sdk/ui-vue';\nimport { computed } from 'vue';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport type { DiscreteUIState } from '@milaboratories/pf-plots';\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport { AGGREGATION_METHOD_OPTIONS } from '../../../../constantsCommon';\n\nconst store = useStore();\nconst layer = 'bar';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'fillColor' | 'lineColor',\n) {\n  if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = { type: colorOption.inputName };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst HEIGHT_OPTIONS = AGGREGATION_METHOD_OPTIONS;\n\nconst opacity = computed({\n  get: () => settings.value.opacity * 100,\n  set: (newValue: number) => {\n    settings.value.opacity = newValue / 100;\n  },\n});\n</script>\n\n<template>\n  <AesSelector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <AesSelector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <div class=\"input-item\" @click.stop>\n    <PlDropdown\n      v-model=\"settings.height\"\n      label=\"Height\"\n      :options=\"HEIGHT_OPTIONS\"\n    />\n  </div>\n  <Slider\n    v-model=\"opacity\"\n    label=\"Opacity\"\n    :min=\"0\"\n    :max=\"100\"\n    :step=\"1\"\n    :breakpoints=\"false\"\n    measure=\"%\"\n  />\n</template>\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAQ;;;EADd,IAAM,IAAQ,GAAU,EAElB,IAAW,QAAe,EAAM,MAAM,SAAS,eAAe,GAAO,EACrE,IAAe,QACb,EAAM,MAAM,SAAS,aAC5B,EAEK,IAAY,QAChB,EAAc,EAAS,MAAM,WAAW,EAAa,OAAO,EAAc,CAC3E,EACK,IAAY,QAChB,EAAc,EAAS,MAAM,WAAW,EAAa,OAAO,EAAc,CAC3E;EAED,SAAS,EACP,GACA,GACA,GACA;AAMA,GALI,EAAY,SAAS,oBACvB,EAAM,MAAM,SAAS,eAAe,GAAO,KAAS,EAAE,MAAM,EAAY,WAAW,GAEnF,EAAM,MAAM,SAAS,eAAe,GAAO,KAAS,GAElD,EAAY,SAAS,qBAAqB,OAAO,KAAU,aAC7D,EAAM,MAAM,SAAS,YAAY,EAAY,kBAAkB;;EAInE,IAAM,IAAiB,GAEjB,IAAU,EAAS;GACvB,WAAW,EAAS,MAAM,UAAU;GACpC,MAAM,MAAqB;AACzB,MAAS,MAAM,UAAU,IAAW;;GAEvC,CAAC;;GAIA,EAOE,GAAA;IANA,OAAM;IACN,cAAW;IACX,mBAAgB;IAChB,MAAK;IACJ,UAAU,EAAA;IACV,aAAU,AAAA,EAAA,QAAG,GAAG,MAAM,EAAS,GAAG,GAAC,YAAA;;GAEtC,EAOE,GAAA;IANA,OAAM;IACN,cAAW;IACX,mBAAgB;IAChB,MAAK;IACJ,UAAU,EAAA;IACV,aAAU,AAAA,EAAA,QAAG,GAAG,MAAM,EAAS,GAAG,GAAC,YAAA;;GAEtC,EAMM,OAAA;IAND,OAAM;IAAc,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;OACjC,EAIE,EAAA,EAAA,EAAA;gBAHS,EAAA,MAAS;6CAAT,MAAS,SAAM;IACxB,OAAM;IACL,SAAS,EAAA,EAAc;;GAG5B,EAQE,EAAA,EAAA,EAAA;gBAPS,EAAA;6CAAO,QAAA;IAChB,OAAM;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,aAAa;IACd,SAAQ"}

package/dist/forms/LayersForm/Layer/discrete/BinnedDots.js

@@ -0,0 +1,5 @@
+import e from "./BinnedDots.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=BinnedDots.js.map

package/dist/forms/LayersForm/Layer/discrete/BinnedDots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BinnedDots.js","names":[],"sources":["../../../../../src/forms/LayersForm/Layer/discrete/BinnedDots.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { Slider, PlCheckbox } from '@platforma-sdk/ui-vue';\nimport { computed } from 'vue';\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport type { DiscreteUIState } from '@milaboratories/pf-plots';\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\n\nconst store = useStore();\nconst layer = 'binnedDots';\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'fillColor' | 'lineColor',\n) {\n  if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = { type: colorOption.inputName };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst opacity = computed({\n  get: () => settings.value.opacity * 100,\n  set: (newValue: number) => {\n    settings.value.opacity = newValue / 100;\n  },\n});\n</script>\n\n<template>\n  <AesSelector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <AesSelector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <Slider\n    v-model=\"opacity\"\n    label=\"Opacity\"\n    :min=\"0\"\n    :max=\"100\"\n    :step=\"1\"\n    :breakpoints=\"false\"\n    measure=\"%\"\n  />\n  <div class=\"checkbox-item\">\n    <PlCheckbox v-model=\"settings.showOutliers\" />\n    <span>Show outliers</span>\n  </div>\n</template>\n"],"mappings":""}