@milaboratories/graph-maker 1.2.5 → 1.2.6

package/dist/components/AesSettings/PalettesForm.vue2.js

@@ -1,5 +1,73 @@
-import f from "./PalettesForm.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PalettesForm.vue2.js.map
+import { CATEGORICAL_LIST as e, DIVERGING_LIST as t, PALETTE_MAP as n, SEQUENTIAL_LIST as r } from "../../constantsAesthetic.js";
+import { Fragment as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, withModifiers as h } from "vue";
+var g = { class: "palettes-groups" }, _ = { class: "palettes-list" }, v = ["onClick"], y = { class: "palette-gradient" }, b = { class: "palettes-list" }, x = ["onClick"], S = { class: "palettes-list" }, C = ["onClick"], w = 9, T = /* @__PURE__ */ c({
+	__name: "PalettesForm",
+	props: {
+		selected: {},
+		categorical: {
+			type: Boolean,
+			default: !0
+		},
+		sequential: {
+			type: Boolean,
+			default: !0
+		},
+		diverging: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["select"],
+	setup(c, { emit: T }) {
+		let E = T, D = c;
+		function O(e) {
+			E("select", e);
+		}
+		function k(e) {
+			let t = 100 / (e.length - 1);
+			return `background: linear-gradient(to right, ${e.map((e, n) => `${e} ${n * t}%`).join(", ")})`;
+		}
+		return (T, E) => (d(), o("div", g, [
+			c.categorical ? (d(), o(i, { key: 0 }, [
+				E[0] ||= s("div", { class: "section-title" }, [s("span", null, "CATEGORICAL")], -1),
+				E[1] ||= s("div", { class: "section-description" }, " Best to representing categorical data ", -1),
+				s("div", _, [(d(!0), o(i, null, f(m(e), (e) => (d(), o("div", {
+					key: e,
+					class: l(["palettes-list__palette", { selected: D.selected === e }]),
+					onClick: h((t) => O(e), ["stop"])
+				}, [s("div", null, p(m(n)[e].title), 1), s("div", y, [(d(!0), o(i, null, f(m(n)[e].colors.slice(0, w), (e) => (d(), o("div", {
+					key: e,
+					class: "palette-gradient__item",
+					style: u({ background: e })
+				}, null, 4))), 128))])], 10, v))), 128))])
+			], 64)) : a("", !0),
+			c.sequential ? (d(), o(i, { key: 1 }, [
+				E[2] ||= s("div", { class: "section-title" }, [s("span", null, "SEQUENTIAL")], -1),
+				E[3] ||= s("div", { class: "section-description" }, " Best to representing sequential data ", -1),
+				s("div", b, [(d(!0), o(i, null, f(m(r), (e) => (d(), o("div", {
+					key: e,
+					class: l(["palettes-list__palette", { selected: c.selected === e }]),
+					onClick: h((t) => O(e), ["stop"])
+				}, [s("div", null, p(m(n)[e].title), 1), s("div", {
+					class: "palette-gradient",
+					style: u(k(m(n)[e].colors))
+				}, null, 4)], 10, x))), 128))])
+			], 64)) : a("", !0),
+			c.diverging ? (d(), o(i, { key: 2 }, [
+				E[4] ||= s("div", { class: "section-title" }, [s("span", null, "DIVERGING")], -1),
+				E[5] ||= s("div", { class: "section-description" }, " Best to representing diverging data ", -1),
+				s("div", S, [(d(!0), o(i, null, f(m(t), (e) => (d(), o("div", {
+					key: e,
+					class: l(["palettes-list__palette", { selected: c.selected === e }]),
+					onClick: h((t) => O(e), ["stop"])
+				}, [s("div", null, p(m(n)[e].title), 1), s("div", {
+					class: "palette-gradient",
+					style: u(k(m(n)[e].colors))
+				}, null, 4)], 10, C))), 128))])
+			], 64)) : a("", !0)
+		]));
+	}
+});
+export { T as default };
+
+//# sourceMappingURL=PalettesForm.vue2.js.map

package/dist/components/AesSettings/PalettesForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PalettesForm.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PalettesForm.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/AesSettings/PalettesForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type {\n  Palette,\n  PaletteData,\n} from './types';\nimport {\n  CATEGORICAL_LIST,\n  DIVERGING_LIST,\n  PALETTE_MAP,\n  SEQUENTIAL_LIST,\n} from '../../constantsAesthetic';\n\nconst emit = defineEmits(['select']);\n\nconst props = withDefaults(defineProps<{\n  selected: Palette;\n  categorical?: boolean;\n  sequential?: boolean;\n  diverging?: boolean;\n}>(), {\n  categorical: true,\n  sequential: true,\n  diverging: true,\n});\n\nconst COLORS_CATEGORICAL_VISIBLE = 9;\n\nfunction onSelect(v: Palette) {\n  emit('select', v);\n}\n\nfunction createCssGradient(palette: PaletteData) {\n  const step = 100 / (palette.length - 1);\n  return `background: linear-gradient(to right, ${palette\n    .map((value, idx) => `${value} ${idx * step}%`)\n    .join(', ')})`;\n}\n</script>\n\n<template>\n  <div class=\"palettes-groups\">\n    <template v-if=\"categorical\">\n      <div class=\"section-title\"><span>CATEGORICAL</span></div>\n      <div class=\"section-description\">\n        Best to representing categorical data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of CATEGORICAL_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: props.selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div class=\"palette-gradient\">\n            <div\n              v-for=\"color of PALETTE_MAP[palette].colors.slice(\n                0,\n                COLORS_CATEGORICAL_VISIBLE,\n              )\"\n              :key=\"color\"\n              class=\"palette-gradient__item\"\n              :style=\"{ background: color }\"\n            />\n          </div>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"sequential\">\n      <div class=\"section-title\"><span>SEQUENTIAL</span></div>\n      <div class=\"section-description\">\n        Best to representing sequential data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of SEQUENTIAL_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div\n            class=\"palette-gradient\"\n            :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"diverging\">\n      <div class=\"section-title\"><span>DIVERGING</span></div>\n      <div class=\"section-description\">\n        Best to representing diverging data\n      </div>\n      <div class=\"palettes-list\">\n        <div\n          v-for=\"palette of DIVERGING_LIST\"\n          :key=\"palette\"\n          class=\"palettes-list__palette\"\n          :class=\"{ selected: selected === palette }\"\n          @click.stop=\"onSelect(palette)\"\n        >\n          <div>{{ PALETTE_MAP[palette].title }}</div>\n          <div\n            class=\"palette-gradient\"\n            :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n          />\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/BtnIconGroup.js

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

package/dist/components/BtnIconGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BtnIconGroup.js","names":[],"sources":["../../src/components/BtnIconGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst emitModel = (v: unknown) => emit('update:modelValue', v);\n\ndefineProps<{\n  modelValue: unknown;\n  options: { value: string | number; icon: Component }[];\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"btn-icon-group\" :class=\"{ disabled }\">\n    <div\n      v-for=\"(opt, i) in options\"\n      :key=\"opt.value + ':' + i\"\n      class=\"btn-icon-group__option\"\n      :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n      :class=\"{ active: modelValue === opt.value }\"\n      @keydown.enter=\"emitModel(opt.value)\"\n      @click=\"emitModel(opt.value)\"\n    >\n      <component :is=\"opt.icon\"/>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/BtnIconGroup.vue2.js

@@ -1,5 +1,27 @@
-import f from "./BtnIconGroup.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=BtnIconGroup.vue2.js.map
+import { Fragment as e, createBlock as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderList as o, resolveDynamicComponent as s, withKeys as c } from "vue";
+var l = [
+	"tabindex",
+	"onKeydown",
+	"onClick"
+], u = /* @__PURE__ */ r({
+	__name: "BtnIconGroup",
+	props: {
+		modelValue: {},
+		options: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(r, { emit: u }) {
+		let d = u, f = (e) => d("update:modelValue", e);
+		return (u, d) => (a(), n("div", { class: i(["btn-icon-group", { disabled: r.disabled }]) }, [(a(!0), n(e, null, o(r.options, (e, o) => (a(), n("div", {
+			key: e.value + ":" + o,
+			class: i(["btn-icon-group__option", { active: r.modelValue === e.value }]),
+			tabindex: r.modelValue === e.value || r.disabled ? void 0 : 0,
+			onKeydown: c((t) => f(e.value), ["enter"]),
+			onClick: (t) => f(e.value)
+		}, [(a(), t(s(e.icon)))], 42, l))), 128))], 2));
+	}
+});
+export { u as default };
+
+//# sourceMappingURL=BtnIconGroup.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BtnIconGroup.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"BtnIconGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/BtnIconGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst emitModel = (v: unknown) => emit('update:modelValue', v);\n\ndefineProps<{\n  modelValue: unknown;\n  options: { value: string | number; icon: Component }[];\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"btn-icon-group\" :class=\"{ disabled }\">\n    <div\n      v-for=\"(opt, i) in options\"\n      :key=\"opt.value + ':' + i\"\n      class=\"btn-icon-group__option\"\n      :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n      :class=\"{ active: modelValue === opt.value }\"\n      @keydown.enter=\"emitModel(opt.value)\"\n      @click=\"emitModel(opt.value)\"\n    >\n      <component :is=\"opt.icon\"/>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAGA,IAAM,IAAO,GAEP,KAAa,MAAe,EAAK,qBAAqB,EAAE;yBAU5D,EAYM,OAAA,EAZD,OAAK,EAAA,CAAC,kBAAgB,EAAA,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,EAAA,EAAA,GAAA,EAC5C,EAUM,GAAA,MAAA,EATe,EAAA,UAAX,GAAK,YADf,EAUM,OAAA;GARH,KAAK,EAAI,QAAK,MAAS;GACxB,OAAK,EAAA,CAAC,0BAAwB,EAAA,QAEZ,EAAA,eAAe,EAAI,OAAK,CAAA,CAAA;GADzC,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,WAAW,KAAA,IAAS;GAE1D,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;GAClC,UAAK,MAAE,EAAU,EAAI,MAAK;YAE3B,EAA2B,EAAX,EAAI,KAAI,CAAA,EAAA,EAAA,IAAA,EAAA"}

package/dist/components/Chart.js

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

package/dist/components/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","names":[],"sources":["../../src/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ChartInterface, ErrorInfo } from '@milaboratories/miplots4';\nimport type { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport type { ListOption } from '@platforma-sdk/ui-vue';\nimport { PlAutocomplete, PlBtnGhost, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../components/DendroTable.vue';\nimport DendroTooltip from '../components/DendroTooltip.vue';\nimport LassoControls from '../components/LassoControls/index.vue';\nimport Zoom from '../components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../constantsCommon.ts';\nimport EditIcon from '../icons/EditIcon.vue';\nimport { useStore } from '../store.ts';\nimport type { GraphStatus, StatusTextData } from '../types.ts';\nimport GraphStatusScreen from './GraphStatusScreen.vue';\n\nconst emit = defineEmits(['graph-title-update', 'dendro-node-select', 'dendro-tooltip-btn-click']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  graphStatus: GraphStatus;\n  graphTitle: string;\n  dendroTooltipButton?: string;\n  chartData: Record<string, unknown> | null;\n  chartRef: ChartInterface | null;\n  errorInfo: ErrorInfo | null;\n  customStatusText?: Partial<StatusTextData>;\n  allowTitleEditing?: boolean;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst title = ref(props.graphTitle);\n// title can be updated from graph-maker settings\nwatch(() => props.graphTitle, (graphTitle) => {\n  title.value = graphTitle;\n});\n\nconst tabByState = computed(() => store.value.reactive.optionsState.components.tabBy?.selectorStates[0] as SelectorStateFilter | undefined);\nconst tabBySource = computed(() => tabByState.value?.selectedSource);\nconst tabByFilterValue = computed(() => tabByState.value?.selectedFilterValues?.[0]);\nconst filtersStates = computed(() => store.value.reactive.optionsState.components.filters?.selectorStates as SelectorStateFilter[]);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch([() => tabBySource.value, () => tabByFilterValue.value], () => { // tabBy column changed, needs to update selected value\n  tabByLocalValue.value = tabByFilterValue.value;\n}, { deep: true });\n\n// try to load full options list, without search query; if result is not overflow, use values from it in regular dropdown, no autocomplete;\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    return Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value,\n    store.value.inputGuide.value,\n    sourceId,\n    MAX_SEARCH_OPTIONS_LIST_LENGTH,\n  );\n  return response.overflow ? null : response.values;\n}\nconst preloadedOptions = ref<ListOption[] | null | undefined>();\nwatch([\n  () => tabBySource.value,\n  () => store.value.loading.inputGuide,\n], async ([v, loading]) => {\n  if (v === undefined || loading || !store.value.columnsDataStore.value) {\n    return undefined;\n  }\n  preloadedOptions.value = await loadOptions(v);\n}, { immediate: true });\n\nwatch(() => preloadedOptions.value, async (opts) => {\n  if (\n    tabBySource.value === undefined // no tabBy selected\n    || tabByLocalValue.value !== undefined // tabBy selected and has selected value\n    || opts === undefined // options not loaded yet\n  ) {\n    return;\n  }\n  let availableOptions = opts;\n  if (opts === null) { // options loaded but too many unique values\n    availableOptions = await searchFilterOptions(tabBySource.value, '');\n  }\n  if (availableOptions?.length) {\n    const nextFilterValue = availableOptions[0].value as string;\n    tabByLocalValue.value = nextFilterValue;\n    onFilterValueUpdate(nextFilterValue);\n  }\n}, { immediate: true });\n\nfunction onFilterValueUpdate(value: string) {\n  const prevSelectorStates = store.value.reactive.optionsState.components.tabBy.selectorStates;\n  if (prevSelectorStates.length) {\n    store.value.reactive.optionsState.components.tabBy.selectorStates = [{\n      ...prevSelectorStates[0],\n      type: 'equals',\n      selectedFilterValues: [value],\n    }];\n  }\n}\n\nfunction onTitleChange(e: Event) {\n  const target = e.currentTarget as HTMLInputElement;\n  title.value = target.value;\n  emit('graph-title-update', target.value);\n}\n\nfunction onTableRowSelect(id: number) {\n  emit('dendro-node-select', id);\n}\n\n// search options for autocomplete component; use label-mode search for options and value-mode for search of label of selected by default value;\nasync function searchFilterOptions(sourceId: string, searchStr: string, type: 'value' | 'label' = 'label') {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    const results = await Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n    return searchStr ? results.filter((v) => v.label.toLowerCase().includes(searchStr.toLowerCase())) : results;\n  }\n  const searchLabelStr = type === 'label' ? searchStr : undefined;\n  const searchValueStr = type === 'value' ? searchStr : undefined;\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchLabelStr, searchValueStr)).values;\n}\n\n// search by value, not by label;\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ value: selectedValue, label: ' ' }); // don't show non-human-readable value\n  }\n  const value = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value, store.value.inputGuide.value,\n    sourceId, 1, undefined, selectedValue).then((v) => v.values[0]);\n  return value;\n}\n\nconst chartContainerRef = ref();\n\nconst hasPrimaryHidden = computed(() => {\n  if (store.value.reactive.chartType !== 'discrete') {\n    return false;\n  }\n  const optionsState = store.value.reactive.optionsState.components;\n  if (optionsState.primaryGrouping?.selectorStates.length) {\n    const columnName = optionsState.primaryGrouping.selectorStates[0].selectedSource;\n    const dataBindAes = store.value.reactive.dataBindAes[columnName];\n    if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n      return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some((v) => dataBindAes.hidden?.[v]);\n    }\n  }\n  return false;\n});\nconst hasSecondaryHidden = computed(() => {\n  if (store.value.reactive.chartType !== 'discrete') {\n    return false;\n  }\n  const optionsState = store.value.reactive.optionsState.components;\n  if (optionsState.secondaryGrouping?.selectorStates.length) {\n    const columnName = optionsState.secondaryGrouping.selectorStates[0].selectedSource;\n    const dataBindAes = store.value.reactive.dataBindAes[columnName];\n    if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n      return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some((v) => dataBindAes.hidden?.[v]);\n    }\n  }\n  return false;\n});\nfunction openAxesSettingsPrimary() {\n  store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen = true;\n  store.value.reactive.currentTab = 'axes';\n}\nfunction openAxesSettingsSecondary() {\n  store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen = true;\n  store.value.reactive.currentTab = 'axes';\n}\n\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input\n        class=\"chart_title\"\n        :value=\"title\"\n        :disabled=\"!allowTitleEditing\"\n        @change=\"onTitleChange\"\n        @keyup.enter=\"(e) => { (e.target as HTMLInputElement)?.blur() }\"\n      />\n      <component :is=\"EditIcon\" v-if=\"allowTitleEditing\" class=\"chart_titleEdit\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot />\n      </div>\n    </div>\n    <PlNotificationAlert\n      v-if=\"!store.reactive.tooltipHintWasShown\"\n      v-model=\"store.reactive.showTooltipHint\"\n      type=\"success\"\n      class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div v-if=\"tabBySource\" class=\"chart_tabBy\">\n      <PlDropdown\n        v-if=\"preloadedOptions || (preloadedOptions === undefined && store.loading.inputGuide)\"\n        v-model=\"tabByLocalValue\" label=\"Show for\" :options=\"preloadedOptions\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n      <PlAutocomplete\n        v-else v-model=\"tabByLocalValue\" label=\"Show for\"\n        :options-search=\"(str, type) => searchFilterOptions(tabBySource as string, str, type)\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n    </div>\n    <div\n      ref=\"chartContainerRef\" class=\"chart_main-content\"\n      :class=\"[{ 'chart_main-content__dendro': store.reactive.chartType === 'dendro' }, 'pl-scrollable']\"\n    >\n      <div\n        id=\"chartSvgContainer\" :class=\"{\n          'chart_ready': graphStatus === 'ready',\n          'chart_loading': graphStatus === 'loading',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      />\n      <GraphStatusScreen :graphStatus=\"graphStatus\" :top=\"tabBySource ? 24 : 0\" :bottom=\"11\" :customStatusText=\"customStatusText\" :errorInfo=\"errorInfo\"/>\n      <DendroTable\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\" @row-select=\"onTableRowSelect\"\n      />\n      <DendroTooltip\n        v-if=\"store.reactive.dendroInfoByClick\" :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\" :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id: string) => $emit('dendro-tooltip-btn-click', id)\" @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <div v-if=\"graphStatus === 'ready'\" class=\"chart_controls\">\n      <Zoom />\n      <LassoControls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\" :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"/>\n      <PlBtnGhost v-if=\"hasPrimaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsPrimary()\">\n        Hidden (primary)\n      </PlBtnGhost>\n      <PlBtnGhost v-if=\"hasSecondaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsSecondary()\">\n        Hidden (secondary)\n      </PlBtnGhost>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Chart.vue2.js

@@ -1,5 +1,233 @@
-import f from "./Chart.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Chart.vue2.js.map
+import { useStore as e } from "../store.js";
+import t from "./DendroTable.js";
+import n from "./DendroTooltip.js";
+import r from "./LassoControls/index.js";
+import i from "./Zoom/index.js";
+import a from "../icons/EditIcon.js";
+import o from "./GraphStatusScreen.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, unref as b, watch as x, withCtx as S, withKeys as C, withModifiers as w } from "vue";
+import { PlAutocomplete as T, PlBtnGhost as E, PlDropdown as D, PlNotificationAlert as O } from "@platforma-sdk/ui-vue";
+var k = { class: "chart_container" }, A = { class: "chart_header" }, j = ["value", "disabled"], M = { class: "chart_titleLineSlot" }, N = {
+	key: 1,
+	class: "chart_tabBy"
+}, P = {
+	key: 2,
+	class: "chart_controls"
+}, F = /* @__PURE__ */ m({
+	__name: "Chart",
+	props: {
+		graphStatus: {},
+		graphTitle: {},
+		dendroTooltipButton: {},
+		chartData: {},
+		chartRef: {},
+		errorInfo: {},
+		customStatusText: {},
+		allowTitleEditing: { type: Boolean },
+		isScatterplotZoomChanged: { type: Boolean }
+	},
+	emits: [
+		"graph-title-update",
+		"dendro-node-select",
+		"dendro-tooltip-btn-click"
+	],
+	setup(m, { emit: F }) {
+		let I = F, L = e(), R = m, z = _(R.graphTitle);
+		x(() => R.graphTitle, (e) => {
+			z.value = e;
+		});
+		let B = s(() => L.value.reactive.optionsState.components.tabBy?.selectorStates[0]), V = s(() => B.value?.selectedSource), H = s(() => B.value?.selectedFilterValues?.[0]), U = s(() => L.value.reactive.optionsState.components.filters?.selectorStates), W = _(H.value);
+		x([() => V.value, () => H.value], () => {
+			W.value = H.value;
+		}, { deep: !0 });
+		async function G(e) {
+			if (!L.value.columnsDataStore.value) return Promise.resolve([]);
+			let t = U.value.find((t) => t.selectedSource === e);
+			if (t && (t.selectedFilterValues?.length ?? 0) > 0) {
+				let n = t.selectedFilterValues ?? [];
+				return Promise.all(n.map((t) => Z(e, t)));
+			}
+			let n = await L.value.controller.getUniqueSourceValuesWithLabels(L.value.columnsDataStore.value, L.value.inputGuide.value, e, 100);
+			return n.overflow ? null : n.values;
+		}
+		let K = _();
+		x([() => V.value, () => L.value.loading.inputGuide], async ([e, t]) => {
+			e === void 0 || t || !L.value.columnsDataStore.value || (K.value = await G(e));
+		}, { immediate: !0 }), x(() => K.value, async (e) => {
+			if (V.value === void 0 || W.value !== void 0 || e === void 0) return;
+			let t = e;
+			if (e === null && (t = await X(V.value, "")), t?.length) {
+				let e = t[0].value;
+				W.value = e, q(e);
+			}
+		}, { immediate: !0 });
+		function q(e) {
+			let t = L.value.reactive.optionsState.components.tabBy.selectorStates;
+			t.length && (L.value.reactive.optionsState.components.tabBy.selectorStates = [{
+				...t[0],
+				type: "equals",
+				selectedFilterValues: [e]
+			}]);
+		}
+		function J(e) {
+			let t = e.currentTarget;
+			z.value = t.value, I("graph-title-update", t.value);
+		}
+		function Y(e) {
+			I("dendro-node-select", e);
+		}
+		async function X(e, t, n = "label") {
+			if (!L.value.columnsDataStore.value) return Promise.resolve([]);
+			let r = U.value.find((t) => t.selectedSource === e);
+			if (r && (r.selectedFilterValues?.length ?? 0) > 0) {
+				let n = r.selectedFilterValues ?? [], i = await Promise.all(n.map((t) => Z(e, t)));
+				return t ? i.filter((e) => e.label.toLowerCase().includes(t.toLowerCase())) : i;
+			}
+			let i = n === "label" ? t : void 0, a = n === "value" ? t : void 0;
+			return (await L.value.controller.getUniqueSourceValuesWithLabels(L.value.columnsDataStore.value, L.value.inputGuide.value, e, 100, i, a)).values;
+		}
+		async function Z(e, t) {
+			return L.value.columnsDataStore.value ? await L.value.controller.getUniqueSourceValuesWithLabels(L.value.columnsDataStore.value, L.value.inputGuide.value, e, 1, void 0, t).then((e) => e.values[0]) : Promise.resolve({
+				value: t,
+				label: " "
+			});
+		}
+		let Q = _(), $ = s(() => {
+			if (L.value.reactive.chartType !== "discrete") return !1;
+			let e = L.value.reactive.optionsState.components;
+			if (e.primaryGrouping?.selectorStates.length) {
+				let t = e.primaryGrouping.selectorStates[0].selectedSource, n = L.value.reactive.dataBindAes[t];
+				if (n?.type === "categorical" && n.hidden) return Object.values(n.hidden).length > 0 && n.order.some((e) => n.hidden?.[e]);
+			}
+			return !1;
+		}), ee = s(() => {
+			if (L.value.reactive.chartType !== "discrete") return !1;
+			let e = L.value.reactive.optionsState.components;
+			if (e.secondaryGrouping?.selectorStates.length) {
+				let t = e.secondaryGrouping.selectorStates[0].selectedSource, n = L.value.reactive.dataBindAes[t];
+				if (n?.type === "categorical" && n.hidden) return Object.values(n.hidden).length > 0 && n.order.some((e) => n.hidden?.[e]);
+			}
+			return !1;
+		});
+		function te() {
+			L.value.reactive.tabDefaultState.axes.reorderPrimaryOpen = !0, L.value.reactive.currentTab = "axes";
+		}
+		function ne() {
+			L.value.reactive.tabDefaultState.axes.reorderSecondaryOpen = !0, L.value.reactive.currentTab = "axes";
+		}
+		return (e, s) => (g(), u("div", k, [
+			d("div", A, [
+				d("input", {
+					class: "chart_title",
+					value: z.value,
+					disabled: !m.allowTitleEditing,
+					onChange: J,
+					onKeyup: s[0] ||= C((e) => {
+						e.target?.blur();
+					}, ["enter"])
+				}, null, 40, j),
+				m.allowTitleEditing ? (g(), c(y(a), {
+					key: 0,
+					class: "chart_titleEdit"
+				})) : l("", !0),
+				d("div", M, [v(e.$slots, "default")])
+			]),
+			b(L).reactive.tooltipHintWasShown ? l("", !0) : (g(), c(b(O), {
+				key: 0,
+				modelValue: b(L).reactive.showTooltipHint,
+				"onUpdate:modelValue": s[1] ||= (e) => b(L).reactive.showTooltipHint = e,
+				type: "success",
+				class: "chart_tooltipHint",
+				width: "170px"
+			}, {
+				default: S(() => [...s[10] ||= [f(" Hit enter to pin tooltip ", -1)]]),
+				_: 1
+			}, 8, ["modelValue"])),
+			V.value ? (g(), u("div", N, [K.value || K.value === void 0 && b(L).loading.inputGuide ? (g(), c(b(D), {
+				key: 0,
+				modelValue: W.value,
+				"onUpdate:modelValue": [s[2] ||= (e) => W.value = e, s[3] ||= (e) => q(e)],
+				label: "Show for",
+				options: K.value
+			}, null, 8, ["modelValue", "options"])) : (g(), c(b(T), {
+				key: 1,
+				modelValue: W.value,
+				"onUpdate:modelValue": [s[4] ||= (e) => W.value = e, s[5] ||= (e) => q(e)],
+				label: "Show for",
+				"options-search": (e, t) => X(V.value, e, t)
+			}, null, 8, ["modelValue", "options-search"]))])) : l("", !0),
+			d("div", {
+				ref_key: "chartContainerRef",
+				ref: Q,
+				class: h(["chart_main-content", [{ "chart_main-content__dendro": b(L).reactive.chartType === "dendro" }, "pl-scrollable"]])
+			}, [
+				d("div", {
+					id: "chartSvgContainer",
+					class: h({
+						chart_ready: m.graphStatus === "ready",
+						chart_loading: m.graphStatus === "loading",
+						chart_activeLassoSelection: b(L).reactive.lassoControlsState?.mode === "selection"
+					})
+				}, null, 2),
+				p(o, {
+					graphStatus: m.graphStatus,
+					top: V.value ? 24 : 0,
+					bottom: 11,
+					customStatusText: m.customStatusText,
+					errorInfo: m.errorInfo
+				}, null, 8, [
+					"graphStatus",
+					"top",
+					"customStatusText",
+					"errorInfo"
+				]),
+				b(L).reactive.chartType === "dendro" && m.chartData && b(L).reactive.layersSettings.dendro.showTable ? (g(), c(t, {
+					key: 0,
+					chartData: m.chartData,
+					onRowSelect: Y
+				}, null, 8, ["chartData"])) : l("", !0),
+				b(L).reactive.dendroInfoByClick ? (g(), c(n, {
+					key: 1,
+					info: b(L).reactive.dendroInfoByClick,
+					containerRef: Q.value,
+					tooltipBtn: m.dendroTooltipButton,
+					onTooltipBtnClick: s[6] ||= (t) => e.$emit("dendro-tooltip-btn-click", t),
+					onClose: s[7] ||= (t) => {
+						b(L).reactive.dendroInfoByClick = null, e.$emit("dendro-node-select", null);
+					}
+				}, null, 8, [
+					"info",
+					"containerRef",
+					"tooltipBtn"
+				])) : l("", !0)
+			], 2),
+			m.graphStatus === "ready" ? (g(), u("div", P, [
+				p(i),
+				b(L).reactive.chartType === "scatterplot-umap" ? (g(), c(r, {
+					key: 0,
+					"chart-ref": m.chartRef,
+					isScatterplotZoomChanged: m.isScatterplotZoomChanged
+				}, null, 8, ["chart-ref", "isScatterplotZoomChanged"])) : l("", !0),
+				$.value ? (g(), c(b(E), {
+					key: 1,
+					icon: "view-hide",
+					onClick: s[8] ||= w(() => te(), ["stop"])
+				}, {
+					default: S(() => [...s[11] ||= [f(" Hidden (primary) ", -1)]]),
+					_: 1
+				})) : l("", !0),
+				ee.value ? (g(), c(b(E), {
+					key: 2,
+					icon: "view-hide",
+					onClick: s[9] ||= w(() => ne(), ["stop"])
+				}, {
+					default: S(() => [...s[12] ||= [f(" Hidden (secondary) ", -1)]]),
+					_: 1
+				})) : l("", !0)
+			])) : l("", !0)
+		]));
+	}
+});
+export { F as default };
+
+//# sourceMappingURL=Chart.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Chart.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../src/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ChartInterface, ErrorInfo } from '@milaboratories/miplots4';\nimport type { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport type { ListOption } from '@platforma-sdk/ui-vue';\nimport { PlAutocomplete, PlBtnGhost, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../components/DendroTable.vue';\nimport DendroTooltip from '../components/DendroTooltip.vue';\nimport LassoControls from '../components/LassoControls/index.vue';\nimport Zoom from '../components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../constantsCommon.ts';\nimport EditIcon from '../icons/EditIcon.vue';\nimport { useStore } from '../store.ts';\nimport type { GraphStatus, StatusTextData } from '../types.ts';\nimport GraphStatusScreen from './GraphStatusScreen.vue';\n\nconst emit = defineEmits(['graph-title-update', 'dendro-node-select', 'dendro-tooltip-btn-click']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  graphStatus: GraphStatus;\n  graphTitle: string;\n  dendroTooltipButton?: string;\n  chartData: Record<string, unknown> | null;\n  chartRef: ChartInterface | null;\n  errorInfo: ErrorInfo | null;\n  customStatusText?: Partial<StatusTextData>;\n  allowTitleEditing?: boolean;\n  isScatterplotZoomChanged?: boolean;\n}>();\n\nconst title = ref(props.graphTitle);\n// title can be updated from graph-maker settings\nwatch(() => props.graphTitle, (graphTitle) => {\n  title.value = graphTitle;\n});\n\nconst tabByState = computed(() => store.value.reactive.optionsState.components.tabBy?.selectorStates[0] as SelectorStateFilter | undefined);\nconst tabBySource = computed(() => tabByState.value?.selectedSource);\nconst tabByFilterValue = computed(() => tabByState.value?.selectedFilterValues?.[0]);\nconst filtersStates = computed(() => store.value.reactive.optionsState.components.filters?.selectorStates as SelectorStateFilter[]);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch([() => tabBySource.value, () => tabByFilterValue.value], () => { // tabBy column changed, needs to update selected value\n  tabByLocalValue.value = tabByFilterValue.value;\n}, { deep: true });\n\n// try to load full options list, without search query; if result is not overflow, use values from it in regular dropdown, no autocomplete;\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    return Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value,\n    store.value.inputGuide.value,\n    sourceId,\n    MAX_SEARCH_OPTIONS_LIST_LENGTH,\n  );\n  return response.overflow ? null : response.values;\n}\nconst preloadedOptions = ref<ListOption[] | null | undefined>();\nwatch([\n  () => tabBySource.value,\n  () => store.value.loading.inputGuide,\n], async ([v, loading]) => {\n  if (v === undefined || loading || !store.value.columnsDataStore.value) {\n    return undefined;\n  }\n  preloadedOptions.value = await loadOptions(v);\n}, { immediate: true });\n\nwatch(() => preloadedOptions.value, async (opts) => {\n  if (\n    tabBySource.value === undefined // no tabBy selected\n    || tabByLocalValue.value !== undefined // tabBy selected and has selected value\n    || opts === undefined // options not loaded yet\n  ) {\n    return;\n  }\n  let availableOptions = opts;\n  if (opts === null) { // options loaded but too many unique values\n    availableOptions = await searchFilterOptions(tabBySource.value, '');\n  }\n  if (availableOptions?.length) {\n    const nextFilterValue = availableOptions[0].value as string;\n    tabByLocalValue.value = nextFilterValue;\n    onFilterValueUpdate(nextFilterValue);\n  }\n}, { immediate: true });\n\nfunction onFilterValueUpdate(value: string) {\n  const prevSelectorStates = store.value.reactive.optionsState.components.tabBy.selectorStates;\n  if (prevSelectorStates.length) {\n    store.value.reactive.optionsState.components.tabBy.selectorStates = [{\n      ...prevSelectorStates[0],\n      type: 'equals',\n      selectedFilterValues: [value],\n    }];\n  }\n}\n\nfunction onTitleChange(e: Event) {\n  const target = e.currentTarget as HTMLInputElement;\n  title.value = target.value;\n  emit('graph-title-update', target.value);\n}\n\nfunction onTableRowSelect(id: number) {\n  emit('dendro-node-select', id);\n}\n\n// search options for autocomplete component; use label-mode search for options and value-mode for search of label of selected by default value;\nasync function searchFilterOptions(sourceId: string, searchStr: string, type: 'value' | 'label' = 'label') {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    const results = await Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n    return searchStr ? results.filter((v) => v.label.toLowerCase().includes(searchStr.toLowerCase())) : results;\n  }\n  const searchLabelStr = type === 'label' ? searchStr : undefined;\n  const searchValueStr = type === 'value' ? searchStr : undefined;\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchLabelStr, searchValueStr)).values;\n}\n\n// search by value, not by label;\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ value: selectedValue, label: ' ' }); // don't show non-human-readable value\n  }\n  const value = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value, store.value.inputGuide.value,\n    sourceId, 1, undefined, selectedValue).then((v) => v.values[0]);\n  return value;\n}\n\nconst chartContainerRef = ref();\n\nconst hasPrimaryHidden = computed(() => {\n  if (store.value.reactive.chartType !== 'discrete') {\n    return false;\n  }\n  const optionsState = store.value.reactive.optionsState.components;\n  if (optionsState.primaryGrouping?.selectorStates.length) {\n    const columnName = optionsState.primaryGrouping.selectorStates[0].selectedSource;\n    const dataBindAes = store.value.reactive.dataBindAes[columnName];\n    if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n      return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some((v) => dataBindAes.hidden?.[v]);\n    }\n  }\n  return false;\n});\nconst hasSecondaryHidden = computed(() => {\n  if (store.value.reactive.chartType !== 'discrete') {\n    return false;\n  }\n  const optionsState = store.value.reactive.optionsState.components;\n  if (optionsState.secondaryGrouping?.selectorStates.length) {\n    const columnName = optionsState.secondaryGrouping.selectorStates[0].selectedSource;\n    const dataBindAes = store.value.reactive.dataBindAes[columnName];\n    if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n      return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some((v) => dataBindAes.hidden?.[v]);\n    }\n  }\n  return false;\n});\nfunction openAxesSettingsPrimary() {\n  store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen = true;\n  store.value.reactive.currentTab = 'axes';\n}\nfunction openAxesSettingsSecondary() {\n  store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen = true;\n  store.value.reactive.currentTab = 'axes';\n}\n\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input\n        class=\"chart_title\"\n        :value=\"title\"\n        :disabled=\"!allowTitleEditing\"\n        @change=\"onTitleChange\"\n        @keyup.enter=\"(e) => { (e.target as HTMLInputElement)?.blur() }\"\n      />\n      <component :is=\"EditIcon\" v-if=\"allowTitleEditing\" class=\"chart_titleEdit\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot />\n      </div>\n    </div>\n    <PlNotificationAlert\n      v-if=\"!store.reactive.tooltipHintWasShown\"\n      v-model=\"store.reactive.showTooltipHint\"\n      type=\"success\"\n      class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div v-if=\"tabBySource\" class=\"chart_tabBy\">\n      <PlDropdown\n        v-if=\"preloadedOptions || (preloadedOptions === undefined && store.loading.inputGuide)\"\n        v-model=\"tabByLocalValue\" label=\"Show for\" :options=\"preloadedOptions\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n      <PlAutocomplete\n        v-else v-model=\"tabByLocalValue\" label=\"Show for\"\n        :options-search=\"(str, type) => searchFilterOptions(tabBySource as string, str, type)\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n    </div>\n    <div\n      ref=\"chartContainerRef\" class=\"chart_main-content\"\n      :class=\"[{ 'chart_main-content__dendro': store.reactive.chartType === 'dendro' }, 'pl-scrollable']\"\n    >\n      <div\n        id=\"chartSvgContainer\" :class=\"{\n          'chart_ready': graphStatus === 'ready',\n          'chart_loading': graphStatus === 'loading',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      />\n      <GraphStatusScreen :graphStatus=\"graphStatus\" :top=\"tabBySource ? 24 : 0\" :bottom=\"11\" :customStatusText=\"customStatusText\" :errorInfo=\"errorInfo\"/>\n      <DendroTable\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\" @row-select=\"onTableRowSelect\"\n      />\n      <DendroTooltip\n        v-if=\"store.reactive.dendroInfoByClick\" :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\" :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id: string) => $emit('dendro-tooltip-btn-click', id)\" @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <div v-if=\"graphStatus === 'ready'\" class=\"chart_controls\">\n      <Zoom />\n      <LassoControls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\" :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"/>\n      <PlBtnGhost v-if=\"hasPrimaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsPrimary()\">\n        Hidden (primary)\n      </PlBtnGhost>\n      <PlBtnGhost v-if=\"hasSecondaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsSecondary()\">\n        Hidden (secondary)\n      </PlBtnGhost>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/ChartErrorNotificationAlert.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./ChartErrorNotificationAlert.vue2.js";
+import n from "./ChartErrorNotificationAlert.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=ChartErrorNotificationAlert.js.map

package/dist/components/ChartErrorNotificationAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartErrorNotificationAlert.js","names":[],"sources":["../../src/components/ChartErrorNotificationAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary, PlDialogModal, PlNotificationAlert, PlSpacer, PlLogView } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport type { ErrorInfoUnknown } from '@milaboratories/miplots4';\n\nconst props = defineProps<{ errorInfo: ErrorInfoUnknown }>();\n\nconst isModalOpen = ref(false);\nconst isAlertOpen = ref(true);\n\nfunction showErrors() {\n  isModalOpen.value = true;\n}\nconst errorMessage = computed(() => props.errorInfo.info?.stack);\n</script>\n<template>\n  <div :class=\"$style.alert\">\n    <PlDialogModal v-model=\"isModalOpen\" width=\"720px\" style=\"max-height: 100vh\">\n      <template #title> Errors </template>\n      <div :class=\"$style.alertContent\">\n        <div :class=\"$style.alertItem\">\n          <div :class=\"$style.alertTitle\">Chart error</div>\n          <PlLogView\n            :value=\"errorMessage\"\n            :valueToCopy=\"errorMessage\"\n            download-filename=\"chart-error-log.txt\"\n          />\n        </div>\n      </div>\n    </PlDialogModal>\n\n    <PlNotificationAlert v-model=\"isAlertOpen\" type=\"error\" closable>\n      The chart has errors.\n      <template #actions>\n        <PlBtnPrimary icon=\"arrow-right\" @click=\"showErrors\">See errors</PlBtnPrimary>\n        <PlSpacer />\n      </template>\n    </PlNotificationAlert>\n  </div>\n</template>\n<style module>\n.alert {\n    position: fixed;\n    bottom: 12px;\n    right: 12px;\n    width: 256px;\n    height: auto;\n    z-index: 1;\n}\n.alertContent {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    max-height: 100%;\n}\n.alertItem {\n    position: relative;\n}\n.alertTitle {\n    color: var(--txt-01);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n    margin-bottom: 6px;\n}\n</style>\n"],"mappings":""}

package/dist/components/ChartErrorNotificationAlert.style.js

@@ -0,0 +1,9 @@
+import './ChartErrorNotificationAlert.vue.css';var e = {
+	alert: "_alert_2s905_2",
+	alertContent: "_alertContent_2s905_10",
+	alertItem: "_alertItem_2s905_16",
+	alertTitle: "_alertTitle_2s905_19"
+};
+export { e as default };
+
+//# sourceMappingURL=ChartErrorNotificationAlert.style.js.map

package/dist/components/ChartErrorNotificationAlert.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartErrorNotificationAlert.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../src/components/ChartErrorNotificationAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary, PlDialogModal, PlNotificationAlert, PlSpacer, PlLogView } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport type { ErrorInfoUnknown } from '@milaboratories/miplots4';\n\nconst props = defineProps<{ errorInfo: ErrorInfoUnknown }>();\n\nconst isModalOpen = ref(false);\nconst isAlertOpen = ref(true);\n\nfunction showErrors() {\n  isModalOpen.value = true;\n}\nconst errorMessage = computed(() => props.errorInfo.info?.stack);\n</script>\n<template>\n  <div :class=\"$style.alert\">\n    <PlDialogModal v-model=\"isModalOpen\" width=\"720px\" style=\"max-height: 100vh\">\n      <template #title> Errors </template>\n      <div :class=\"$style.alertContent\">\n        <div :class=\"$style.alertItem\">\n          <div :class=\"$style.alertTitle\">Chart error</div>\n          <PlLogView\n            :value=\"errorMessage\"\n            :valueToCopy=\"errorMessage\"\n            download-filename=\"chart-error-log.txt\"\n          />\n        </div>\n      </div>\n    </PlDialogModal>\n\n    <PlNotificationAlert v-model=\"isAlertOpen\" type=\"error\" closable>\n      The chart has errors.\n      <template #actions>\n        <PlBtnPrimary icon=\"arrow-right\" @click=\"showErrors\">See errors</PlBtnPrimary>\n        <PlSpacer />\n      </template>\n    </PlNotificationAlert>\n  </div>\n</template>\n<style module>\n.alert {\n    position: fixed;\n    bottom: 12px;\n    right: 12px;\n    width: 256px;\n    height: auto;\n    z-index: 1;\n}\n.alertContent {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    max-height: 100%;\n}\n.alertItem {\n    position: relative;\n}\n.alertTitle {\n    color: var(--txt-01);\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n    margin-bottom: 6px;\n}\n</style>\n"],"mappings":""}

package/dist/components/ChartErrorNotificationAlert.vue.css

@@ -0,0 +1 @@
+._alert_2s905_2{z-index:1;width:256px;height:auto;position:fixed;bottom:12px;right:12px}._alertContent_2s905_10{flex-direction:column;gap:12px;max-height:100%;display:flex}._alertItem_2s905_16{position:relative}._alertTitle_2s905_19{color:var(--txt-01);margin-bottom:6px;font-size:14px;font-weight:600;line-height:20px}

package/dist/components/ChartErrorNotificationAlert.vue2.js

@@ -1,78 +1,45 @@
-import { defineComponent as y, ref as p, computed as C, createElementBlock as c, openBlock as g, normalizeClass as a, createVNode as l, unref as o, withCtx as t, createElementVNode as i, createTextVNode as u } from "vue";
-import { PlDialogModal as w, PlLogView as P, PlNotificationAlert as E, PlBtnPrimary as N, PlSpacer as T } from "@platforma-sdk/ui-vue";
-const $ = /* @__PURE__ */ y({
-  __name: "ChartErrorNotificationAlert",
-  props: {
-    errorInfo: {}
-  },
-  setup(f) {
-    const v = f, s = p(!1), d = p(!0);
-    function V() {
-      s.value = !0;
-    }
-    const m = C(() => {
-      var r;
-      return (r = v.errorInfo.info) == null ? void 0 : r.stack;
-    });
-    return (r, e) => (g(), c("div", {
-      class: a(r.$style.alert)
-    }, [
-      l(o(w), {
-        modelValue: s.value,
-        "onUpdate:modelValue": e[0] || (e[0] = (n) => s.value = n),
-        width: "720px",
-        style: { "max-height": "100vh" }
-      }, {
-        title: t(() => [...e[2] || (e[2] = [
-          u(" Errors ", -1)
-        ])]),
-        default: t(() => [
-          i("div", {
-            class: a(r.$style.alertContent)
-          }, [
-            i("div", {
-              class: a(r.$style.alertItem)
-            }, [
-              i("div", {
-                class: a(r.$style.alertTitle)
-              }, "Chart error", 2),
-              l(o(P), {
-                value: m.value,
-                valueToCopy: m.value,
-                "download-filename": "chart-error-log.txt"
-              }, null, 8, ["value", "valueToCopy"])
-            ], 2)
-          ], 2)
-        ]),
-        _: 1
-      }, 8, ["modelValue"]),
-      l(o(E), {
-        modelValue: d.value,
-        "onUpdate:modelValue": e[1] || (e[1] = (n) => d.value = n),
-        type: "error",
-        closable: ""
-      }, {
-        actions: t(() => [
-          l(o(N), {
-            icon: "arrow-right",
-            onClick: V
-          }, {
-            default: t(() => [...e[3] || (e[3] = [
-              u("See errors", -1)
-            ])]),
-            _: 1
-          }),
-          l(o(T))
-        ]),
-        default: t(() => [
-          e[4] || (e[4] = u(" The chart has errors. ", -1))
-        ]),
-        _: 1
-      }, 8, ["modelValue"])
-    ], 2));
-  }
+import { computed as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, ref as c, unref as l, withCtx as u } from "vue";
+import { PlBtnPrimary as d, PlDialogModal as f, PlLogView as p, PlNotificationAlert as m, PlSpacer as h } from "@platforma-sdk/ui-vue";
+var g = /* @__PURE__ */ a({
+	__name: "ChartErrorNotificationAlert",
+	props: { errorInfo: {} },
+	setup(a) {
+		let g = a, _ = c(!1), v = c(!0);
+		function y() {
+			_.value = !0;
+		}
+		let b = e(() => g.errorInfo.info?.stack);
+		return (e, a) => (s(), t("div", { class: o(e.$style.alert) }, [i(l(f), {
+			modelValue: _.value,
+			"onUpdate:modelValue": a[0] ||= (e) => _.value = e,
+			width: "720px",
+			style: { "max-height": "100vh" }
+		}, {
+			title: u(() => [...a[2] ||= [r(" Errors ", -1)]]),
+			default: u(() => [n("div", { class: o(e.$style.alertContent) }, [n("div", { class: o(e.$style.alertItem) }, [n("div", { class: o(e.$style.alertTitle) }, "Chart error", 2), i(l(p), {
+				value: b.value,
+				valueToCopy: b.value,
+				"download-filename": "chart-error-log.txt"
+			}, null, 8, ["value", "valueToCopy"])], 2)], 2)]),
+			_: 1
+		}, 8, ["modelValue"]), i(l(m), {
+			modelValue: v.value,
+			"onUpdate:modelValue": a[1] ||= (e) => v.value = e,
+			type: "error",
+			closable: ""
+		}, {
+			actions: u(() => [i(l(d), {
+				icon: "arrow-right",
+				onClick: y
+			}, {
+				default: u(() => [...a[3] ||= [r("See errors", -1)]]),
+				_: 1
+			}), i(l(h))]),
+			default: u(() => [a[4] ||= r(" The chart has errors. ", -1)]),
+			_: 1
+		}, 8, ["modelValue"])], 2));
+	}
 });
-export {
-  $ as default
-};
-//# sourceMappingURL=ChartErrorNotificationAlert.vue2.js.map
+export { g as default };
+
+//# sourceMappingURL=ChartErrorNotificationAlert.vue2.js.map