@milaboratories/graph-maker 1.2.5 → 1.2.7

package/dist/forms/DataMappingForm/BubbleForm.vue2.js

@@ -1,5 +1,100 @@
-import f from "./BubbleForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=BubbleForm.vue2.js.map
+import { getErrorForPlDropdown as e } from "./utils.js";
+import t from "../../components/DragAndDrop/DndBasket.js";
+import n from "./Layout/FormLayout.js";
+import r from "./Layout/OptionsList.js";
+import i from "./Layout/MandatoryOptions.js";
+import { useBaskets as a } from "./useBaskets.js";
+import { useStore as o } from "../../store.js";
+import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, openBlock as h, renderList as g, toHandlers as _, unref as v, withCtx as y } from "vue";
+import { PlDropdown as b } from "@platforma-sdk/ui-vue";
+var x = { class: "data-form-input-item" }, S = {
+	class: "data-form-input-item",
+	style: { "margin-top": "10px" }
+}, C = /* @__PURE__ */ p({
+	__name: "BubbleForm",
+	setup(p) {
+		let C = o(), { draggedId: w, basketsData: T, freeMetaOptions: E, freeMandatoryOptions: D, chipInfo: O, dataStateValues: k, dataOptions: A } = a(C, ["valueColor", "valueSize"], ["filters", "tabBy"], [
+			"x",
+			"y",
+			"xGroupBy",
+			"yGroupBy",
+			"tooltipContent",
+			"facetBy"
+		], [
+			"filters",
+			"x",
+			"y",
+			"xGroupBy",
+			"yGroupBy",
+			"tooltipContent",
+			"tabBy",
+			"facetBy"
+		], {
+			filters: "Filter",
+			x: "X",
+			y: "Y",
+			xGroupBy: "X group",
+			yGroupBy: "Y group",
+			tooltipContent: "Tooltip",
+			tabBy: "Tab by",
+			facetBy: "Facet by"
+		}), j = c(() => C.value.readonlyInputs?.includes("valueColor") ?? !1), M = c(() => C.value.readonlyInputs?.includes("valueSize") ?? !1), N = c({
+			get: () => k.value.valueColor.value,
+			set: (e) => {
+				k.value.valueColor.value = e;
+			}
+		}), P = c({
+			get: () => k.value.valueSize.value,
+			set: (e) => {
+				k.value.valueSize.value = e;
+			}
+		});
+		return (a, o) => (h(), l(n, null, {
+			dataInputs: y(() => [d("div", x, [f(v(b), {
+				modelValue: N.value,
+				"onUpdate:modelValue": o[0] ||= (e) => N.value = e,
+				label: "Data source for color:",
+				clearable: "",
+				disabled: j.value,
+				options: v(A).valueColor,
+				error: v(e)("valueColor", v(C).inputGuide.value)
+			}, null, 8, [
+				"modelValue",
+				"disabled",
+				"options",
+				"error"
+			])]), d("div", S, [f(v(b), {
+				modelValue: P.value,
+				"onUpdate:modelValue": o[1] ||= (e) => P.value = e,
+				label: "Data source for size:",
+				clearable: "",
+				disabled: M.value,
+				options: v(A).valueSize,
+				error: v(e)("valueSize", v(C).inputGuide.value)
+			}, null, 8, [
+				"modelValue",
+				"disabled",
+				"options",
+				"error"
+			])])]),
+			mandatoryOptions: y(() => [f(i, {
+				options: v(D),
+				chipInfo: v(O),
+				onDraggedIdUpdate: o[2] ||= (e) => w.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			metadataOptions: y(() => [f(r, {
+				options: v(E),
+				chipInfo: v(O),
+				onDraggedIdUpdate: o[3] ||= (e) => w.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			chartVar: y(() => [(h(!0), u(s, null, g(v(T), (e) => (h(), u("div", {
+				key: e.id,
+				class: "data-form-input-item"
+			}, [f(t, m({ ref_for: !0 }, e, _(e.listeners)), null, 16)]))), 128))]),
+			_: 1
+		}));
+	}
+});
+export { C as default };
+
+//# sourceMappingURL=BubbleForm.vue2.js.map

package/dist/forms/DataMappingForm/BubbleForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"BubbleForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/DataMappingForm/BubbleForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../store';\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type { BubbleUIState } from '@milaboratories/pf-plots';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { computed } from 'vue';\nimport { getErrorForPlDropdown } from './utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport { useBaskets } from './useBaskets';\n\ntype BasketIds = Exclude<keyof BubbleUIState['components'], 'valueColor' | 'valueSize'>;\ntype DataIds = keyof BubbleUIState['components'] & ('valueColor' | 'valueSize');\n\nconst store = useStore();\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'x',\n  'y',\n  'xGroupBy',\n  'yGroupBy',\n  'tooltipContent',\n  'tabBy',\n  'facetBy',\n];\n\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  x: 'X',\n  y: 'Y',\n  xGroupBy: 'X group',\n  yGroupBy: 'Y group',\n  tooltipContent: 'Tooltip',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by',\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions,\n} = useBaskets<BubbleUIState, BasketIds, DataIds>(\n  store,\n  ['valueColor', 'valueSize'],\n  ['filters', 'tabBy'],\n  ['x', 'y', 'xGroupBy', 'yGroupBy', 'tooltipContent', 'facetBy'],\n  BASKETS,\n  BASKET_LABELS,\n);\n\nconst readonlyValueColor = computed(() => store.value.readonlyInputs?.includes('valueColor') ?? false);\nconst readonlyValueSize = computed(() => store.value.readonlyInputs?.includes('valueSize') ?? false);\n\nconst valueColorValue = computed({\n  get: () => dataStateValues.value.valueColor.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.valueColor.value = value;\n  },\n});\n\nconst valueSizeValue = computed({\n  get: () => dataStateValues.value.valueSize.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.valueSize.value = value;\n  },\n});\n\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"valueColorValue\"\n          label=\"Data source for color:\"\n          clearable\n          :disabled=\"readonlyValueColor\"\n          :options=\"dataOptions.valueColor\"\n          :error=\"getErrorForPlDropdown('valueColor', store.inputGuide.value)\"\n        />\n      </div>\n      <div class=\"data-form-input-item\" style=\"margin-top: 10px;\">\n        <PlDropdown\n          v-model=\"valueSizeValue\"\n          label=\"Data source for size:\"\n          clearable\n          :disabled=\"readonlyValueSize\"\n          :options=\"dataOptions.valueSize\"\n          :error=\"getErrorForPlDropdown('valueSize', store.inputGuide.value)\"\n        />\n      </div>\n    </template>\n    <template #mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAeA,IAAM,IAAQ,GAAU,EAwBlB,EACJ,cACA,gBACA,oBACA,yBACA,aACA,oBACA,mBACE,EACF,GACA,CAAC,cAAc,YAAY,EAC3B,CAAC,WAAW,QAAQ,EACpB;GAAC;GAAK;GAAK;GAAY;GAAY;GAAkB;GAAU,EAlCpC;GAC3B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EAEgD;GAC/C,SAAS;GACT,GAAG;GACH,GAAG;GACH,UAAU;GACV,UAAU;GACV,gBAAgB;GAChB,OAAO;GACP,SAAS;GACV,CAiBA,EAEK,IAAqB,QAAe,EAAM,MAAM,gBAAgB,SAAS,aAAa,IAAI,GAAM,EAChG,IAAoB,QAAe,EAAM,MAAM,gBAAgB,SAAS,YAAY,IAAI,GAAM,EAE9F,IAAkB,EAAS;GAC/B,WAAW,EAAgB,MAAM,WAAW;GAC5C,MAAM,MAA8B;AAClC,MAAgB,MAAM,WAAW,QAAQ;;GAE5C,CAAC,EAEI,IAAiB,EAAS;GAC9B,WAAW,EAAgB,MAAM,UAAU;GAC3C,MAAM,MAA8B;AAClC,MAAgB,MAAM,UAAU,QAAQ;;GAE3C,CAAC;yBAKA,EA8Ca,GAAA,MAAA;GA7CA,YAAU,QAUb,CATN,EASM,OATN,GASM,CARJ,EAOE,EAAA,EAAA,EAAA;gBANS,EAAA;6CAAe,QAAA;IACxB,OAAM;IACN,WAAA;IACC,UAAU,EAAA;IACV,SAAS,EAAA,EAAW,CAAC;IACrB,OAAO,EAAA,EAAqB,CAAA,cAAe,EAAA,EAAK,CAAC,WAAW,MAAK;;;;;;SAGtE,EASM,OATN,GASM,CARJ,EAOE,EAAA,EAAA,EAAA;gBANS,EAAA;6CAAc,QAAA;IACvB,OAAM;IACN,WAAA;IACC,UAAU,EAAA;IACV,SAAS,EAAA,EAAW,CAAC;IACrB,OAAO,EAAA,EAAqB,CAAA,aAAc,EAAA,EAAK,CAAC,WAAW,MAAK;;;;;;;GAI5D,kBAAgB,QAKvB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAoB;IAC7B,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,iBAAe,QAKtB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAe;IACxB,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,UAAQ,QAEkB,EAAA,EAAA,GAAA,EADnC,EAMM,GAAA,MAAA,EALiB,EAAA,EAAW,GAAzB,YADT,EAMM,OAAA;IAJH,KAAK,EAAW;IACjB,OAAM;OAEN,EAA6D,GAA7D,EAA6D,EAAA,SAAA,IAAA,EAA1C,GAAY,EAAM,EAAW,UAAS,CAAA,EAAA,MAAA,GAAA,CAAA,CAAA"}

package/dist/forms/DataMappingForm/DendroForm.js

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

package/dist/forms/DataMappingForm/DendroForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DendroForm.js","names":[],"sources":["../../../src/forms/DataMappingForm/DendroForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type {\n  DendroUIState,\n  InputGuide,\n  InputState,\n} from '@milaboratories/pf-plots';\nimport FormLayout from './Layout/FormLayout.vue';\nimport type { Ref } from 'vue';\nimport { computed, watch, toRef, ref } from 'vue';\nimport { useStore } from '../../store';\nimport {\n  getAllInputsOptions,\n  toFiltersMulti,\n  getErrorForPlDropdown,\n  toSimpleMulti,\n  getChipInfo,\n  toSimpleSingle,\n  getFreeOptions,\n  hasInputError,\n} from './utils';\nimport { DEFAULT_DOT_SHAPE } from '../../dataBindAes';\nimport { DEFAULT_BLACK } from '../../constantsAesthetic';\nimport type {\n  BasketProps,\n  ChipInfo,\n  DropItemEvent,\n  RemoveItemEvent,\n} from '../../components/DragAndDrop/types';\nimport DndChip from '../../components/DragAndDrop/DndChip.vue';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../../constantsCommon';\n\ntype BasketIds = Exclude<\n  keyof (typeof inputStateValues)['value'] & keyof DendroUIState['components'],\n  'value' | 'filters' | 'tabBy'\n>;\n\nconst store = useStore();\nconst state = store.value.reactive.optionsState as DendroUIState;\nconst stateRef = toRef(store.value.reactive, 'optionsState');\n\nconst inputGuide = computed(\n  () => store.value.inputGuide.value,\n) as unknown as Ref<InputGuide<DendroUIState>>;\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value);\n\n// const nodeSize = toRef(state.data.nodeSize.selectorState, \"selectedSource\");\nfunction getSimpleSingle(inputName: keyof InputState['components']) {\n  return toSimpleSingle(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n  );\n}\nfunction getSimpleMulti(inputName: keyof InputState['components']) {\n  return toSimpleMulti(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n  );\n}\nfunction getFiltersMulti(inputName: keyof InputState['components']) {\n  return toFiltersMulti(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n    inputGuide,\n  );\n}\n\nconst inputStateValues = ref({\n  value: getSimpleSingle('value'),\n  tableContent: getSimpleMulti('tableContent'),\n  heatmapAnnotation: getSimpleMulti('heatmapAnnotation'),\n  heatmapForSequence: getSimpleMulti('heatmapForSequence'),\n  filters: getFiltersMulti('filters'),\n  tabBy: getFiltersMulti('tabBy'),\n  height: getSimpleMulti('height'),\n  labels: getSimpleMulti('labels'),\n  nodeShape: getSimpleMulti('nodeShape'),\n  nodeColor: getSimpleMulti('nodeColor'),\n  nodeSize: getSimpleMulti('nodeSize'),\n  lineColor: getSimpleMulti('lineColor'),\n  heatmapAxis: getSimpleMulti('heatmapAxis'),\n  heatmapGroup: getSimpleMulti('heatmapGroup'),\n});\nwatch(\n  () => inputStateValues.value.nodeShape,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.dotShape = value.length\n      ? { type: 'nodeShape', value: value[0] }\n      : DEFAULT_DOT_SHAPE;\n  },\n);\nwatch(\n  () => inputStateValues.value.nodeColor,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.dotFill = value.length\n      ? { type: 'nodeColor', value: value[0] }\n      : DEFAULT_BLACK;\n  },\n);\nwatch(\n  () => inputStateValues.value.lineColor,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.lineColor = value.length\n      ? { type: 'lineColor', value: value[0] }\n      : DEFAULT_BLACK;\n  },\n);\n\nconst options = computed(() => {\n  return getAllInputsOptions(\n    state,\n    inputGuide as Ref<InputGuide<DendroUIState>>,\n  );\n});\n\nconst freeOptions = computed(() =>\n  getFreeOptions(inputGuide as Ref<InputGuide<InputState>>, BASKETS),\n);\nconst freeMandatoryOptions = computed(() =>\n  freeOptions.value.filter((item) => item.info.kind === 'axis'),\n);\nconst BASKETS: BasketIds[] = [\n  'height',\n  'tableContent',\n  'labels',\n  'heatmapAnnotation',\n  'heatmapAxis',\n  'heatmapGroup',\n  'heatmapForSequence',\n  'nodeShape',\n  'nodeColor',\n  'nodeSize',\n  'lineColor',\n];\n\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  height: 'Connections length',\n  tableContent: 'Table/tooltip content',\n  labels: 'Labels',\n  heatmapAnnotation: 'Heatmap annotation',\n  heatmapAxis: 'Heatmap axis',\n  heatmapGroup: 'Heatmap group',\n  heatmapForSequence: 'Alignment data',\n  nodeShape: 'Node shape',\n  nodeColor: 'Node color',\n  nodeSize: 'Node size',\n  lineColor: 'Line color',\n};\n\nconst draggedId = ref<string | null>(null);\n\nconst chipInfo = computed<Record<string, ChipInfo>>(() => {\n  const freeAndSelectedIds = new Set<string>();\n  BASKETS.forEach((name) => {\n    options.value[name].forEach((option) => {\n      freeAndSelectedIds.add(option.value);\n    });\n    state.components[name].selectorStates.forEach((selectorState) => {\n      freeAndSelectedIds.add(selectorState.selectedSource);\n    });\n  });\n  return getChipInfo(inputGuide.value, state.components, labelsInfo.value, [...freeAndSelectedIds]);\n});\n\nfunction commonDropItemHandler(event: DropItemEvent<BasketIds>) {\n  inputStateValues.value[event.id] = [\n    ...inputStateValues.value[event.id],\n    event.draggedId,\n  ];\n  draggedId.value = null;\n}\n\nfunction commonReorder(data: ChipInfo['id'][], name: BasketIds) {\n  inputStateValues.value[name] = data;\n}\n\nfunction commonRemoveItem(event: RemoveItemEvent<BasketIds>) {\n  inputStateValues.value[event.basketId] = inputStateValues.value[\n    event.basketId\n  ].filter((op) => op !== event.chipId);\n}\n\nfunction getConsistency(basketId: BasketIds) {\n  return inputGuide.value.components[basketId].stateConsistency;\n}\n\nfunction getDisabled(basketId: BasketIds) {\n  return (\n    !inputGuide.value.readyData\n    || options.value[basketId].length === 0\n    || (draggedId.value !== null\n      && !chipInfo.value[draggedId.value].availableBasketIds.has(basketId))\n  );\n}\n\nasync function searchFilterOptions(sourceId: string, searchStr: string): Promise<{ value: string; label: string }[]> {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchStr)).values;\n}\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string): Promise<{ value: string; label: string }[]> {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, 1, undefined, selectedValue)).values;\n}\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ values: [], overflow: false });\n  }\n  return store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH);\n}\n\nconst basketsData = computed<BasketProps[]>(() =>\n  BASKETS.map((name) => {\n    const guide = inputGuide.value.components[name];\n\n    const basketProps: BasketProps = {\n      id: name,\n      title: BASKET_LABELS[name],\n      isFilter: false,\n      sortable: name === 'tableContent',\n      multiple: guide.multipleSelectors,\n      required: guide.required,\n      disabled: getDisabled(name),\n      readonly: store.value.readonlyInputs?.includes(name) ?? false,\n      consistency: getConsistency(name),\n      draggedId: draggedId.value,\n      droppedIds: inputStateValues.value[name],\n      info: chipInfo.value,\n\n      searchFn: searchFilterOptions,\n      searchSelectedValueFn: searchSelectedFilterValueOptions,\n      loadOptionsFn: loadOptions,\n\n      listeners: {\n        'drop-item': commonDropItemHandler,\n        'remove-item': commonRemoveItem,\n        'reorder': (data: ChipInfo['id'][]) => commonReorder(data, name),\n      },\n    };\n    return basketProps;\n  }),\n);\n\nfunction showBasket(basketId: BasketProps['id']) {\n  if (basketId === 'heatmapAxis' || basketId === 'heatmapGroup') {\n    return inputStateValues.value.heatmapAnnotation !== null;\n  }\n  return true;\n}\n\nfunction cleanDraggedId() {\n  draggedId.value = null;\n}\n\nconst autoFillInputs: (keyof typeof inputStateValues.value)[] = ['value'];\n\nautoFillInputs.forEach((inputName) => {\n  watch(\n    [() => inputStateValues.value[inputName], () => options.value],\n    ([v, vOptions]) => {\n      if (\n        (typeof v === 'undefined'\n          || hasInputError('value', inputGuide.value))\n        && vOptions[inputName]\n        && vOptions[inputName].length\n      ) {\n        store.value.controller.changeSelected(\n          inputName,\n          store.value.columnsDataStore.value!,\n          store.value.reactive.optionsState,\n          [{ selectedSource: vOptions[inputName][0].value }],\n\n        );\n      }\n    },\n    { immediate: true },\n  );\n});\n\nconst readonlyValue = computed(() => store.value.readonlyInputs?.includes('value') ?? false);\n\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"inputStateValues.value\"\n          label=\"Data source:\"\n          :options=\"options.value\"\n          :disabled=\"readonlyValue\"\n          :error=\"getErrorForPlDropdown('value', inputGuide)\"\n        />\n      </div>\n      <div v-if=\"freeMandatoryOptions.length > 0\" class=\"metadata-block\">\n        <div class=\"title\">Drag to build the chart</div>\n        <div class=\"metadata-block__items\">\n          <DndChip\n            v-for=\"{ id } in freeMandatoryOptions\"\n            :key=\"id\"\n            :info=\"chipInfo[id]\"\n            @dragstart=\"draggedId = $event\"\n            @dragend=\"cleanDraggedId\"\n          />\n        </div>\n      </div>\n      <div v-if=\"freeOptions.length > 0\" class=\"metadata-block\">\n        <div class=\"title\">Metadata</div>\n        <div class=\"metadata-block__items\">\n          <DndChip\n            v-for=\"{ id } in freeOptions\"\n            :key=\"id\"\n            :info=\"chipInfo[id]\"\n            @dragstart=\"draggedId = $event\"\n            @dragend=\"cleanDraggedId\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #chartVar>\n      <template v-for=\"basketProp in basketsData\" :key=\"basketProp.id\">\n        <div v-if=\"showBasket(basketProp.id)\" class=\"data-form-input-item\">\n          <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n        </div>\n      </template>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":""}

package/dist/forms/DataMappingForm/DendroForm.vue2.js

@@ -1,5 +1,196 @@
-import f from "./DendroForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=DendroForm.vue2.js.map
+import { DEFAULT_BLACK as e } from "../../constantsAesthetic.js";
+import { getAllInputsOptions as t, getChipInfo as n, getErrorForPlDropdown as r, getFreeOptions as i, hasInputError as ee, toFiltersMulti as a, toSimpleMulti as o, toSimpleSingle as s } from "./utils.js";
+import c from "../../components/DragAndDrop/DndBasket.js";
+import l from "./Layout/FormLayout.js";
+import u from "../../components/DragAndDrop/DndChip.js";
+import { useStore as d } from "../../store.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeProps as b, openBlock as x, ref as S, renderList as C, toHandlers as w, toRef as T, unref as E, watch as D, withCtx as O } from "vue";
+import { PlDropdown as k } from "@platforma-sdk/ui-vue";
+var te = { class: "data-form-input-item" }, A = {
+	key: 0,
+	class: "metadata-block"
+}, j = { class: "metadata-block__items" }, M = {
+	key: 1,
+	class: "metadata-block"
+}, N = { class: "metadata-block__items" }, P = {
+	key: 0,
+	class: "data-form-input-item"
+}, F = /* @__PURE__ */ y({
+	__name: "DendroForm",
+	setup(y) {
+		let F = d(), I = F.value.reactive.optionsState, L = T(F.value.reactive, "optionsState"), R = p(() => F.value.inputGuide.value), z = p(() => F.value.uniqueValuesData.value);
+		function B(e) {
+			return s(L, e, F.value.controller, F.value.columnsDataStore.value);
+		}
+		function V(e) {
+			return o(L, e, F.value.controller, F.value.columnsDataStore.value);
+		}
+		function H(e) {
+			return a(L, e, F.value.controller, F.value.columnsDataStore.value, R);
+		}
+		let U = S({
+			value: B("value"),
+			tableContent: V("tableContent"),
+			heatmapAnnotation: V("heatmapAnnotation"),
+			heatmapForSequence: V("heatmapForSequence"),
+			filters: H("filters"),
+			tabBy: H("tabBy"),
+			height: V("height"),
+			labels: V("labels"),
+			nodeShape: V("nodeShape"),
+			nodeColor: V("nodeColor"),
+			nodeSize: V("nodeSize"),
+			lineColor: V("lineColor"),
+			heatmapAxis: V("heatmapAxis"),
+			heatmapGroup: V("heatmapGroup")
+		});
+		D(() => U.value.nodeShape, (e) => {
+			F.value.reactive.layersSettings.dendro.dotShape = e.length ? {
+				type: "nodeShape",
+				value: e[0]
+			} : "21";
+		}), D(() => U.value.nodeColor, (t) => {
+			F.value.reactive.layersSettings.dendro.dotFill = t.length ? {
+				type: "nodeColor",
+				value: t[0]
+			} : e;
+		}), D(() => U.value.lineColor, (t) => {
+			F.value.reactive.layersSettings.dendro.lineColor = t.length ? {
+				type: "lineColor",
+				value: t[0]
+			} : e;
+		});
+		let W = p(() => t(I, R)), G = p(() => i(R, q)), K = p(() => G.value.filter((e) => e.info.kind === "axis")), q = [
+			"height",
+			"tableContent",
+			"labels",
+			"heatmapAnnotation",
+			"heatmapAxis",
+			"heatmapGroup",
+			"heatmapForSequence",
+			"nodeShape",
+			"nodeColor",
+			"nodeSize",
+			"lineColor"
+		], J = {
+			height: "Connections length",
+			tableContent: "Table/tooltip content",
+			labels: "Labels",
+			heatmapAnnotation: "Heatmap annotation",
+			heatmapAxis: "Heatmap axis",
+			heatmapGroup: "Heatmap group",
+			heatmapForSequence: "Alignment data",
+			nodeShape: "Node shape",
+			nodeColor: "Node color",
+			nodeSize: "Node size",
+			lineColor: "Line color"
+		}, Y = S(null), X = p(() => {
+			let e = /* @__PURE__ */ new Set();
+			return q.forEach((t) => {
+				W.value[t].forEach((t) => {
+					e.add(t.value);
+				}), I.components[t].selectorStates.forEach((t) => {
+					e.add(t.selectedSource);
+				});
+			}), n(R.value, I.components, z.value, [...e]);
+		});
+		function Z(e) {
+			U.value[e.id] = [...U.value[e.id], e.draggedId], Y.value = null;
+		}
+		function Q(e, t) {
+			U.value[t] = e;
+		}
+		function ne(e) {
+			U.value[e.basketId] = U.value[e.basketId].filter((t) => t !== e.chipId);
+		}
+		function re(e) {
+			return R.value.components[e].stateConsistency;
+		}
+		function ie(e) {
+			return !R.value.readyData || W.value[e].length === 0 || Y.value !== null && !X.value[Y.value].availableBasketIds.has(e);
+		}
+		async function ae(e, t) {
+			return F.value.columnsDataStore.value ? (await F.value.controller.getUniqueSourceValuesWithLabels(F.value.columnsDataStore.value, R.value, e, 100, t)).values : Promise.resolve([]);
+		}
+		async function oe(e, t) {
+			return F.value.columnsDataStore.value ? (await F.value.controller.getUniqueSourceValuesWithLabels(F.value.columnsDataStore.value, R.value, e, 1, void 0, t)).values : Promise.resolve([]);
+		}
+		async function se(e) {
+			return F.value.columnsDataStore.value ? F.value.controller.getUniqueSourceValuesWithLabels(F.value.columnsDataStore.value, R.value, e, 100) : Promise.resolve({
+				values: [],
+				overflow: !1
+			});
+		}
+		let ce = p(() => q.map((e) => {
+			let t = R.value.components[e];
+			return {
+				id: e,
+				title: J[e],
+				isFilter: !1,
+				sortable: e === "tableContent",
+				multiple: t.multipleSelectors,
+				required: t.required,
+				disabled: ie(e),
+				readonly: F.value.readonlyInputs?.includes(e) ?? !1,
+				consistency: re(e),
+				draggedId: Y.value,
+				droppedIds: U.value[e],
+				info: X.value,
+				searchFn: ae,
+				searchSelectedValueFn: oe,
+				loadOptionsFn: se,
+				listeners: {
+					"drop-item": Z,
+					"remove-item": ne,
+					reorder: (t) => Q(t, e)
+				}
+			};
+		}));
+		function le(e) {
+			return e === "heatmapAxis" || e === "heatmapGroup" ? U.value.heatmapAnnotation !== null : !0;
+		}
+		function $() {
+			Y.value = null;
+		}
+		["value"].forEach((e) => {
+			D([() => U.value[e], () => W.value], ([t, n]) => {
+				(t === void 0 || ee("value", R.value)) && n[e] && n[e].length && F.value.controller.changeSelected(e, F.value.columnsDataStore.value, F.value.reactive.optionsState, [{ selectedSource: n[e][0].value }]);
+			}, { immediate: !0 });
+		});
+		let ue = p(() => F.value.readonlyInputs?.includes("value") ?? !1);
+		return (e, t) => (x(), m(l, null, {
+			dataInputs: O(() => [
+				_("div", te, [v(E(k), {
+					modelValue: U.value.value,
+					"onUpdate:modelValue": t[0] ||= (e) => U.value.value = e,
+					label: "Data source:",
+					options: W.value.value,
+					disabled: ue.value,
+					error: E(r)("value", R.value)
+				}, null, 8, [
+					"modelValue",
+					"options",
+					"disabled",
+					"error"
+				])]),
+				K.value.length > 0 ? (x(), g("div", A, [t[3] ||= _("div", { class: "title" }, "Drag to build the chart", -1), _("div", j, [(x(!0), g(f, null, C(K.value, ({ id: e }) => (x(), m(u, {
+					key: e,
+					info: X.value[e],
+					onDragstart: t[1] ||= (e) => Y.value = e,
+					onDragend: $
+				}, null, 8, ["info"]))), 128))])])) : h("", !0),
+				G.value.length > 0 ? (x(), g("div", M, [t[4] ||= _("div", { class: "title" }, "Metadata", -1), _("div", N, [(x(!0), g(f, null, C(G.value, ({ id: e }) => (x(), m(u, {
+					key: e,
+					info: X.value[e],
+					onDragstart: t[2] ||= (e) => Y.value = e,
+					onDragend: $
+				}, null, 8, ["info"]))), 128))])])) : h("", !0)
+			]),
+			chartVar: O(() => [(x(!0), g(f, null, C(ce.value, (e) => (x(), g(f, { key: e.id }, [le(e.id) ? (x(), g("div", P, [v(c, b({ ref_for: !0 }, e, w(e.listeners)), null, 16)])) : h("", !0)], 64))), 128))]),
+			_: 1
+		}));
+	}
+});
+export { F as default };
+
+//# sourceMappingURL=DendroForm.vue2.js.map

package/dist/forms/DataMappingForm/DendroForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DendroForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"DendroForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/DataMappingForm/DendroForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type {\n  DendroUIState,\n  InputGuide,\n  InputState,\n} from '@milaboratories/pf-plots';\nimport FormLayout from './Layout/FormLayout.vue';\nimport type { Ref } from 'vue';\nimport { computed, watch, toRef, ref } from 'vue';\nimport { useStore } from '../../store';\nimport {\n  getAllInputsOptions,\n  toFiltersMulti,\n  getErrorForPlDropdown,\n  toSimpleMulti,\n  getChipInfo,\n  toSimpleSingle,\n  getFreeOptions,\n  hasInputError,\n} from './utils';\nimport { DEFAULT_DOT_SHAPE } from '../../dataBindAes';\nimport { DEFAULT_BLACK } from '../../constantsAesthetic';\nimport type {\n  BasketProps,\n  ChipInfo,\n  DropItemEvent,\n  RemoveItemEvent,\n} from '../../components/DragAndDrop/types';\nimport DndChip from '../../components/DragAndDrop/DndChip.vue';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../../constantsCommon';\n\ntype BasketIds = Exclude<\n  keyof (typeof inputStateValues)['value'] & keyof DendroUIState['components'],\n  'value' | 'filters' | 'tabBy'\n>;\n\nconst store = useStore();\nconst state = store.value.reactive.optionsState as DendroUIState;\nconst stateRef = toRef(store.value.reactive, 'optionsState');\n\nconst inputGuide = computed(\n  () => store.value.inputGuide.value,\n) as unknown as Ref<InputGuide<DendroUIState>>;\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value);\n\n// const nodeSize = toRef(state.data.nodeSize.selectorState, \"selectedSource\");\nfunction getSimpleSingle(inputName: keyof InputState['components']) {\n  return toSimpleSingle(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n  );\n}\nfunction getSimpleMulti(inputName: keyof InputState['components']) {\n  return toSimpleMulti(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n  );\n}\nfunction getFiltersMulti(inputName: keyof InputState['components']) {\n  return toFiltersMulti(\n    stateRef,\n    inputName,\n    store.value.controller,\n    store.value.columnsDataStore.value,\n    inputGuide,\n  );\n}\n\nconst inputStateValues = ref({\n  value: getSimpleSingle('value'),\n  tableContent: getSimpleMulti('tableContent'),\n  heatmapAnnotation: getSimpleMulti('heatmapAnnotation'),\n  heatmapForSequence: getSimpleMulti('heatmapForSequence'),\n  filters: getFiltersMulti('filters'),\n  tabBy: getFiltersMulti('tabBy'),\n  height: getSimpleMulti('height'),\n  labels: getSimpleMulti('labels'),\n  nodeShape: getSimpleMulti('nodeShape'),\n  nodeColor: getSimpleMulti('nodeColor'),\n  nodeSize: getSimpleMulti('nodeSize'),\n  lineColor: getSimpleMulti('lineColor'),\n  heatmapAxis: getSimpleMulti('heatmapAxis'),\n  heatmapGroup: getSimpleMulti('heatmapGroup'),\n});\nwatch(\n  () => inputStateValues.value.nodeShape,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.dotShape = value.length\n      ? { type: 'nodeShape', value: value[0] }\n      : DEFAULT_DOT_SHAPE;\n  },\n);\nwatch(\n  () => inputStateValues.value.nodeColor,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.dotFill = value.length\n      ? { type: 'nodeColor', value: value[0] }\n      : DEFAULT_BLACK;\n  },\n);\nwatch(\n  () => inputStateValues.value.lineColor,\n  (value) => {\n    store.value.reactive.layersSettings.dendro.lineColor = value.length\n      ? { type: 'lineColor', value: value[0] }\n      : DEFAULT_BLACK;\n  },\n);\n\nconst options = computed(() => {\n  return getAllInputsOptions(\n    state,\n    inputGuide as Ref<InputGuide<DendroUIState>>,\n  );\n});\n\nconst freeOptions = computed(() =>\n  getFreeOptions(inputGuide as Ref<InputGuide<InputState>>, BASKETS),\n);\nconst freeMandatoryOptions = computed(() =>\n  freeOptions.value.filter((item) => item.info.kind === 'axis'),\n);\nconst BASKETS: BasketIds[] = [\n  'height',\n  'tableContent',\n  'labels',\n  'heatmapAnnotation',\n  'heatmapAxis',\n  'heatmapGroup',\n  'heatmapForSequence',\n  'nodeShape',\n  'nodeColor',\n  'nodeSize',\n  'lineColor',\n];\n\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  height: 'Connections length',\n  tableContent: 'Table/tooltip content',\n  labels: 'Labels',\n  heatmapAnnotation: 'Heatmap annotation',\n  heatmapAxis: 'Heatmap axis',\n  heatmapGroup: 'Heatmap group',\n  heatmapForSequence: 'Alignment data',\n  nodeShape: 'Node shape',\n  nodeColor: 'Node color',\n  nodeSize: 'Node size',\n  lineColor: 'Line color',\n};\n\nconst draggedId = ref<string | null>(null);\n\nconst chipInfo = computed<Record<string, ChipInfo>>(() => {\n  const freeAndSelectedIds = new Set<string>();\n  BASKETS.forEach((name) => {\n    options.value[name].forEach((option) => {\n      freeAndSelectedIds.add(option.value);\n    });\n    state.components[name].selectorStates.forEach((selectorState) => {\n      freeAndSelectedIds.add(selectorState.selectedSource);\n    });\n  });\n  return getChipInfo(inputGuide.value, state.components, labelsInfo.value, [...freeAndSelectedIds]);\n});\n\nfunction commonDropItemHandler(event: DropItemEvent<BasketIds>) {\n  inputStateValues.value[event.id] = [\n    ...inputStateValues.value[event.id],\n    event.draggedId,\n  ];\n  draggedId.value = null;\n}\n\nfunction commonReorder(data: ChipInfo['id'][], name: BasketIds) {\n  inputStateValues.value[name] = data;\n}\n\nfunction commonRemoveItem(event: RemoveItemEvent<BasketIds>) {\n  inputStateValues.value[event.basketId] = inputStateValues.value[\n    event.basketId\n  ].filter((op) => op !== event.chipId);\n}\n\nfunction getConsistency(basketId: BasketIds) {\n  return inputGuide.value.components[basketId].stateConsistency;\n}\n\nfunction getDisabled(basketId: BasketIds) {\n  return (\n    !inputGuide.value.readyData\n    || options.value[basketId].length === 0\n    || (draggedId.value !== null\n      && !chipInfo.value[draggedId.value].availableBasketIds.has(basketId))\n  );\n}\n\nasync function searchFilterOptions(sourceId: string, searchStr: string): Promise<{ value: string; label: string }[]> {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchStr)).values;\n}\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string): Promise<{ value: string; label: string }[]> {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, 1, undefined, selectedValue)).values;\n}\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ values: [], overflow: false });\n  }\n  return store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH);\n}\n\nconst basketsData = computed<BasketProps[]>(() =>\n  BASKETS.map((name) => {\n    const guide = inputGuide.value.components[name];\n\n    const basketProps: BasketProps = {\n      id: name,\n      title: BASKET_LABELS[name],\n      isFilter: false,\n      sortable: name === 'tableContent',\n      multiple: guide.multipleSelectors,\n      required: guide.required,\n      disabled: getDisabled(name),\n      readonly: store.value.readonlyInputs?.includes(name) ?? false,\n      consistency: getConsistency(name),\n      draggedId: draggedId.value,\n      droppedIds: inputStateValues.value[name],\n      info: chipInfo.value,\n\n      searchFn: searchFilterOptions,\n      searchSelectedValueFn: searchSelectedFilterValueOptions,\n      loadOptionsFn: loadOptions,\n\n      listeners: {\n        'drop-item': commonDropItemHandler,\n        'remove-item': commonRemoveItem,\n        'reorder': (data: ChipInfo['id'][]) => commonReorder(data, name),\n      },\n    };\n    return basketProps;\n  }),\n);\n\nfunction showBasket(basketId: BasketProps['id']) {\n  if (basketId === 'heatmapAxis' || basketId === 'heatmapGroup') {\n    return inputStateValues.value.heatmapAnnotation !== null;\n  }\n  return true;\n}\n\nfunction cleanDraggedId() {\n  draggedId.value = null;\n}\n\nconst autoFillInputs: (keyof typeof inputStateValues.value)[] = ['value'];\n\nautoFillInputs.forEach((inputName) => {\n  watch(\n    [() => inputStateValues.value[inputName], () => options.value],\n    ([v, vOptions]) => {\n      if (\n        (typeof v === 'undefined'\n          || hasInputError('value', inputGuide.value))\n        && vOptions[inputName]\n        && vOptions[inputName].length\n      ) {\n        store.value.controller.changeSelected(\n          inputName,\n          store.value.columnsDataStore.value!,\n          store.value.reactive.optionsState,\n          [{ selectedSource: vOptions[inputName][0].value }],\n\n        );\n      }\n    },\n    { immediate: true },\n  );\n});\n\nconst readonlyValue = computed(() => store.value.readonlyInputs?.includes('value') ?? false);\n\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"inputStateValues.value\"\n          label=\"Data source:\"\n          :options=\"options.value\"\n          :disabled=\"readonlyValue\"\n          :error=\"getErrorForPlDropdown('value', inputGuide)\"\n        />\n      </div>\n      <div v-if=\"freeMandatoryOptions.length > 0\" class=\"metadata-block\">\n        <div class=\"title\">Drag to build the chart</div>\n        <div class=\"metadata-block__items\">\n          <DndChip\n            v-for=\"{ id } in freeMandatoryOptions\"\n            :key=\"id\"\n            :info=\"chipInfo[id]\"\n            @dragstart=\"draggedId = $event\"\n            @dragend=\"cleanDraggedId\"\n          />\n        </div>\n      </div>\n      <div v-if=\"freeOptions.length > 0\" class=\"metadata-block\">\n        <div class=\"title\">Metadata</div>\n        <div class=\"metadata-block__items\">\n          <DndChip\n            v-for=\"{ id } in freeOptions\"\n            :key=\"id\"\n            :info=\"chipInfo[id]\"\n            @dragstart=\"draggedId = $event\"\n            @dragend=\"cleanDraggedId\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #chartVar>\n      <template v-for=\"basketProp in basketsData\" :key=\"basketProp.id\">\n        <div v-if=\"showBasket(basketProp.id)\" class=\"data-form-input-item\">\n          <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n        </div>\n      </template>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":"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"}

package/dist/forms/DataMappingForm/DiscreteForm.js

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

package/dist/forms/DataMappingForm/DiscreteForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteForm.js","names":[],"sources":["../../../src/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch } from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n  () => store.value.commonHelpersData.primaryGroups.value,\n  checkStatisticsInputsValidity(store),\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y';\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'primaryGrouping',\n  'secondaryGrouping',\n  'tabBy',\n  'facetBy',\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  primaryGrouping: 'Primary grouping',\n  secondaryGrouping: 'Secondary grouping',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by',\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions,\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n  store,\n  ['y'],\n  ['filters', 'tabBy'],\n  ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n  BASKETS,\n  BASKET_LABELS,\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n\nconst yValue = computed({\n  get: () => dataStateValues.value.y.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.y.value = value;\n  },\n});\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"yValue\"\n          :options=\"dataOptions.y\"\n          :disabled=\"readonlyY\"\n          :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n          label=\"Y:\"\n          :clearable=\"!readonlyY\"\n        />\n      </div>\n    </template>\n    <template #mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":""}

package/dist/forms/DataMappingForm/DiscreteForm.vue2.js

@@ -1,5 +1,74 @@
-import f from "./DiscreteForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=DiscreteForm.vue2.js.map
+import { checkStatisticsInputsValidity as e } from "../../utils/getStatisticsOptions.js";
+import { getErrorForPlDropdown as t } from "./utils.js";
+import n from "../../components/DragAndDrop/DndBasket.js";
+import r from "./Layout/FormLayout.js";
+import i from "./Layout/OptionsList.js";
+import a from "./Layout/MandatoryOptions.js";
+import { useBaskets as o } from "./useBaskets.js";
+import { useStore as s } from "../../store.js";
+import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as h, openBlock as g, renderList as _, toHandlers as v, unref as y, watch as b, withCtx as x } from "vue";
+import { PlDropdown as S } from "@platforma-sdk/ui-vue";
+var C = { class: "data-form-input-item" }, w = /* @__PURE__ */ m({
+	__name: "DiscreteForm",
+	setup(m) {
+		let w = s();
+		b(() => w.value.commonHelpersData.primaryGroups.value, e(w));
+		let { draggedId: T, basketsData: E, freeMetaOptions: D, freeMandatoryOptions: O, chipInfo: k, dataStateValues: A, dataOptions: j } = o(w, ["y"], ["filters", "tabBy"], [
+			"primaryGrouping",
+			"secondaryGrouping",
+			"facetBy"
+		], [
+			"filters",
+			"primaryGrouping",
+			"secondaryGrouping",
+			"tabBy",
+			"facetBy"
+		], {
+			filters: "Filter",
+			primaryGrouping: "Primary grouping",
+			secondaryGrouping: "Secondary grouping",
+			tabBy: "Tab by",
+			facetBy: "Facet by"
+		}), M = l(() => w.value.readonlyInputs?.includes("y") ?? !1), N = l({
+			get: () => A.value.y.value,
+			set: (e) => {
+				A.value.y.value = e;
+			}
+		});
+		return (e, o) => (g(), u(r, null, {
+			dataInputs: x(() => [f("div", C, [p(y(S), {
+				modelValue: N.value,
+				"onUpdate:modelValue": o[0] ||= (e) => N.value = e,
+				options: y(j).y,
+				disabled: M.value,
+				error: y(t)("y", y(w).inputGuide.value),
+				label: "Y:",
+				clearable: !M.value
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"disabled",
+				"error",
+				"clearable"
+			])])]),
+			mandatoryOptions: x(() => [p(a, {
+				options: y(O),
+				chipInfo: y(k),
+				onDraggedIdUpdate: o[1] ||= (e) => T.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			metadataOptions: x(() => [p(i, {
+				options: y(D),
+				chipInfo: y(k),
+				onDraggedIdUpdate: o[2] ||= (e) => T.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			chartVar: x(() => [(g(!0), d(c, null, _(y(E), (e) => (g(), d("div", {
+				key: e.id,
+				class: "data-form-input-item"
+			}, [p(n, h({ ref_for: !0 }, e, v(e.listeners)), null, 16)]))), 128))]),
+			_: 1
+		}));
+	}
+});
+export { w as default };
+
+//# sourceMappingURL=DiscreteForm.vue2.js.map

package/dist/forms/DataMappingForm/DiscreteForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"DiscreteForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch } from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n  () => store.value.commonHelpersData.primaryGroups.value,\n  checkStatisticsInputsValidity(store),\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y';\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'primaryGrouping',\n  'secondaryGrouping',\n  'tabBy',\n  'facetBy',\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  primaryGrouping: 'Primary grouping',\n  secondaryGrouping: 'Secondary grouping',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by',\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions,\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n  store,\n  ['y'],\n  ['filters', 'tabBy'],\n  ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n  BASKETS,\n  BASKET_LABELS,\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n\nconst yValue = computed({\n  get: () => dataStateValues.value.y.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.y.value = value;\n  },\n});\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"yValue\"\n          :options=\"dataOptions.y\"\n          :disabled=\"readonlyY\"\n          :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n          label=\"Y:\"\n          :clearable=\"!readonlyY\"\n        />\n      </div>\n    </template>\n    <template #mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAaA,IAAM,IAAQ,GAAU;AAExB,UACQ,EAAM,MAAM,kBAAkB,cAAc,OAClD,EAA8B,EAAM,CACrC;EAoBD,IAAM,EACJ,cACA,gBACA,oBACA,yBACA,aACA,oBACA,mBACE,EACF,GACA,CAAC,IAAI,EACL,CAAC,WAAW,QAAQ,EACpB;GAAC;GAAmB;GAAqB;GAAU,EA3BxB;GAC3B;GACA;GACA;GACA;GACA;GACD,EACgD;GAC/C,SAAS;GACT,iBAAiB;GACjB,mBAAmB;GACnB,OAAO;GACP,SAAS;GACV,CAiBA,EAEK,IAAY,QAAe,EAAM,MAAM,gBAAgB,SAAS,IAAI,IAAI,GAAM,EAE9E,IAAS,EAAS;GACtB,WAAW,EAAgB,MAAM,EAAE;GACnC,MAAM,MAA8B;AAClC,MAAgB,MAAM,EAAE,QAAQ;;GAEnC,CAAC;yBAIA,EAoCa,GAAA,MAAA;GAnCA,YAAU,QAUb,CATN,EASM,OATN,GASM,CARJ,EAOE,EAAA,EAAA,EAAA;gBANS,EAAA;6CAAM,QAAA;IACd,SAAS,EAAA,EAAW,CAAC;IACrB,UAAU,EAAA;IACV,OAAO,EAAA,EAAqB,CAAA,KAAM,EAAA,EAAK,CAAC,WAAW,MAAK;IACzD,OAAM;IACL,WAAS,CAAG,EAAA;;;;;;;;GAIR,kBAAgB,QAKvB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAoB;IAC7B,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,iBAAe,QAKtB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAe;IACxB,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,UAAQ,QAEkB,EAAA,EAAA,GAAA,EADnC,EAMM,GAAA,MAAA,EALiB,EAAA,EAAW,GAAzB,YADT,EAMM,OAAA;IAJH,KAAK,EAAW;IACjB,OAAM;OAEN,EAA6D,GAA7D,EAA6D,EAAA,SAAA,IAAA,EAA1C,GAAY,EAAM,EAAW,UAAS,CAAA,EAAA,MAAA,GAAA,CAAA,CAAA"}

package/dist/forms/DataMappingForm/HeatmapForm.js

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

package/dist/forms/DataMappingForm/HeatmapForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapForm.js","names":[],"sources":["../../../src/forms/DataMappingForm/HeatmapForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../store';\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type { HeatmapUIState } from '@milaboratories/pf-plots';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { computed } from 'vue';\nimport { getErrorForPlDropdown } from './utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\ntype BasketIds = Exclude<keyof HeatmapUIState['components'], 'value'>;\ntype DataIds = keyof HeatmapUIState['components'] & 'value';\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'x',\n  'y',\n  'xGroupBy',\n  'yGroupBy',\n  'tooltipContent',\n  'tabBy',\n  'facetBy',\n  'annotationsX',\n  'annotationsY',\n];\n\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  x: 'X',\n  y: 'Y',\n  xGroupBy: 'X group',\n  yGroupBy: 'Y group',\n  tooltipContent: 'Tooltip',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by',\n  annotationsX: 'Annotations X',\n  annotationsY: 'Annotations Y',\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions,\n} = useBaskets<HeatmapUIState, BasketIds, DataIds>(\n  store,\n  ['value'],\n  ['filters', 'tabBy'],\n  ['x', 'y', 'xGroupBy', 'yGroupBy', 'tooltipContent', 'facetBy', 'annotationsX', 'annotationsY'],\n  BASKETS,\n  BASKET_LABELS,\n);\n\nconst readonlyValue = computed(() => store.value.readonlyInputs?.includes('value') ?? false);\n\nconst valueValue = computed({\n  get: () => dataStateValues.value.value.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.value.value = value;\n  },\n});\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"valueValue\"\n          label=\"Data source:\"\n          clearable\n          :options=\"dataOptions.value\"\n          :disabled=\"readonlyValue\"\n          :error=\"getErrorForPlDropdown('value', store.inputGuide.value)\"\n        />\n      </div>\n    </template>\n    <template #mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":""}

package/dist/forms/DataMappingForm/HeatmapForm.vue2.js

@@ -1,5 +1,85 @@
-import f from "./HeatmapForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=HeatmapForm.vue2.js.map
+import { getErrorForPlDropdown as e } from "./utils.js";
+import t from "../../components/DragAndDrop/DndBasket.js";
+import n from "./Layout/FormLayout.js";
+import r from "./Layout/OptionsList.js";
+import i from "./Layout/MandatoryOptions.js";
+import { useBaskets as a } from "./useBaskets.js";
+import { useStore as o } from "../../store.js";
+import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, openBlock as h, renderList as g, toHandlers as _, unref as v, withCtx as y } from "vue";
+import { PlDropdown as b } from "@platforma-sdk/ui-vue";
+var x = { class: "data-form-input-item" }, S = /* @__PURE__ */ p({
+	__name: "HeatmapForm",
+	setup(p) {
+		let S = o(), { draggedId: C, basketsData: w, freeMetaOptions: T, freeMandatoryOptions: E, chipInfo: D, dataStateValues: O, dataOptions: k } = a(S, ["value"], ["filters", "tabBy"], [
+			"x",
+			"y",
+			"xGroupBy",
+			"yGroupBy",
+			"tooltipContent",
+			"facetBy",
+			"annotationsX",
+			"annotationsY"
+		], [
+			"filters",
+			"x",
+			"y",
+			"xGroupBy",
+			"yGroupBy",
+			"tooltipContent",
+			"tabBy",
+			"facetBy",
+			"annotationsX",
+			"annotationsY"
+		], {
+			filters: "Filter",
+			x: "X",
+			y: "Y",
+			xGroupBy: "X group",
+			yGroupBy: "Y group",
+			tooltipContent: "Tooltip",
+			tabBy: "Tab by",
+			facetBy: "Facet by",
+			annotationsX: "Annotations X",
+			annotationsY: "Annotations Y"
+		}), A = c(() => S.value.readonlyInputs?.includes("value") ?? !1), j = c({
+			get: () => O.value.value.value,
+			set: (e) => {
+				O.value.value.value = e;
+			}
+		});
+		return (a, o) => (h(), l(n, null, {
+			dataInputs: y(() => [d("div", x, [f(v(b), {
+				modelValue: j.value,
+				"onUpdate:modelValue": o[0] ||= (e) => j.value = e,
+				label: "Data source:",
+				clearable: "",
+				options: v(k).value,
+				disabled: A.value,
+				error: v(e)("value", v(S).inputGuide.value)
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"disabled",
+				"error"
+			])])]),
+			mandatoryOptions: y(() => [f(i, {
+				options: v(E),
+				chipInfo: v(D),
+				onDraggedIdUpdate: o[1] ||= (e) => C.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			metadataOptions: y(() => [f(r, {
+				options: v(T),
+				chipInfo: v(D),
+				onDraggedIdUpdate: o[2] ||= (e) => C.value = e
+			}, null, 8, ["options", "chipInfo"])]),
+			chartVar: y(() => [(h(!0), u(s, null, g(v(w), (e) => (h(), u("div", {
+				key: e.id,
+				class: "data-form-input-item"
+			}, [f(t, m({ ref_for: !0 }, e, _(e.listeners)), null, 16)]))), 128))]),
+			_: 1
+		}));
+	}
+});
+export { S as default };
+
+//# sourceMappingURL=HeatmapForm.vue2.js.map

package/dist/forms/DataMappingForm/HeatmapForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"HeatmapForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/forms/DataMappingForm/HeatmapForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../store';\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport type { HeatmapUIState } from '@milaboratories/pf-plots';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { computed } from 'vue';\nimport { getErrorForPlDropdown } from './utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\ntype BasketIds = Exclude<keyof HeatmapUIState['components'], 'value'>;\ntype DataIds = keyof HeatmapUIState['components'] & 'value';\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'x',\n  'y',\n  'xGroupBy',\n  'yGroupBy',\n  'tooltipContent',\n  'tabBy',\n  'facetBy',\n  'annotationsX',\n  'annotationsY',\n];\n\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  x: 'X',\n  y: 'Y',\n  xGroupBy: 'X group',\n  yGroupBy: 'Y group',\n  tooltipContent: 'Tooltip',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by',\n  annotationsX: 'Annotations X',\n  annotationsY: 'Annotations Y',\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions,\n} = useBaskets<HeatmapUIState, BasketIds, DataIds>(\n  store,\n  ['value'],\n  ['filters', 'tabBy'],\n  ['x', 'y', 'xGroupBy', 'yGroupBy', 'tooltipContent', 'facetBy', 'annotationsX', 'annotationsY'],\n  BASKETS,\n  BASKET_LABELS,\n);\n\nconst readonlyValue = computed(() => store.value.readonlyInputs?.includes('value') ?? false);\n\nconst valueValue = computed({\n  get: () => dataStateValues.value.value.value,\n  set: (value: string | undefined) => {\n    dataStateValues.value.value.value = value;\n  },\n});\n</script>\n\n<template>\n  <FormLayout>\n    <template #dataInputs>\n      <div class=\"data-form-input-item\">\n        <PlDropdown\n          v-model=\"valueValue\"\n          label=\"Data source:\"\n          clearable\n          :options=\"dataOptions.value\"\n          :disabled=\"readonlyValue\"\n          :error=\"getErrorForPlDropdown('value', store.inputGuide.value)\"\n        />\n      </div>\n    </template>\n    <template #mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template #chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </FormLayout>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,IAAM,IAAQ,GAAU,EA+BlB,EACJ,cACA,gBACA,oBACA,yBACA,aACA,oBACA,mBACE,EACF,GACA,CAAC,QAAQ,EACT,CAAC,WAAW,QAAQ,EACpB;GAAC;GAAK;GAAK;GAAY;GAAY;GAAkB;GAAW;GAAgB;GAAe,EAtCpE;GAC3B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EAEgD;GAC/C,SAAS;GACT,GAAG;GACH,GAAG;GACH,UAAU;GACV,UAAU;GACV,gBAAgB;GAChB,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACf,CAiBA,EAEK,IAAgB,QAAe,EAAM,MAAM,gBAAgB,SAAS,QAAQ,IAAI,GAAM,EAEtF,IAAa,EAAS;GAC1B,WAAW,EAAgB,MAAM,MAAM;GACvC,MAAM,MAA8B;AAClC,MAAgB,MAAM,MAAM,QAAQ;;GAEvC,CAAC;yBAIA,EAoCa,GAAA,MAAA;GAnCA,YAAU,QAUb,CATN,EASM,OATN,GASM,CARJ,EAOE,EAAA,EAAA,EAAA;gBANS,EAAA;6CAAU,QAAA;IACnB,OAAM;IACN,WAAA;IACC,SAAS,EAAA,EAAW,CAAC;IACrB,UAAU,EAAA;IACV,OAAO,EAAA,EAAqB,CAAA,SAAU,EAAA,EAAK,CAAC,WAAW,MAAK;;;;;;;GAIxD,kBAAgB,QAKvB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAoB;IAC7B,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,iBAAe,QAKtB,CAJF,EAIE,GAAA;IAHC,SAAS,EAAA,EAAe;IACxB,UAAU,EAAA,EAAQ;IAClB,mBAAiB,AAAA,EAAA,QAAA,MAAE,EAAA,QAAY;;GAGzB,UAAQ,QAEkB,EAAA,EAAA,GAAA,EADnC,EAMM,GAAA,MAAA,EALiB,EAAA,EAAW,GAAzB,YADT,EAMM,OAAA;IAJH,KAAK,EAAW;IACjB,OAAM;OAEN,EAA6D,GAA7D,EAA6D,EAAA,SAAA,IAAA,EAA1C,GAAY,EAAM,EAAW,UAAS,CAAA,EAAA,MAAA,GAAA,CAAA,CAAA"}

package/dist/forms/DataMappingForm/HistogramForm.js

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