@milaboratories/graph-maker 1.2.4 → 1.2.6

package/dist/ui.vue2.js

@@ -0,0 +1,371 @@
+import './assets/ui.css';/* empty css          */
+import { copyJSON as e } from "./utils/copyJSON.js";
+import { composeChartSettings as t } from "./utils/createChartSettingsForRender/composeChartSettings.js";
+import { saveToFile as n } from "./utils/saveToFile.js";
+import { isOwnGraphMakerTab as r, useSettingsForm as i } from "./forms/index.js";
+import { createReactiveState as ee, provideStore as te } from "./store.js";
+import ne from "./components/GraphStatusScreen.js";
+import re from "./components/Chart.js";
+import ie from "./components/PanelModal.js";
+import ae from "./components/SettingsTabs/index.js";
+import a from "./components/TransitionSlidePanel.js";
+import o from "./components/ChartErrorNotificationAlert.js";
+import oe from "./components/ChartTruncationWarningAlert.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as se, createElementVNode as ce, createVNode as u, defineComponent as d, mergeModels as f, onMounted as le, onUnmounted as ue, openBlock as p, ref as m, renderSlot as h, resolveDynamicComponent as g, shallowRef as _, toRaw as v, unref as y, useModel as b, useSlots as de, watch as x, withCtx as S } from "vue";
+import { MiPlots as fe } from "@milaboratories/miplots4";
+import { DemoDataStore as C } from "@milaboratories/pf-plots";
+import { watchDebounced as w } from "@vueuse/core";
+var pe = { class: "graph-maker" }, T = { class: "graph-maker__main-pane" }, E = /* @__PURE__ */ d({
+	__name: "ui",
+	props: /* @__PURE__ */ f({
+		pFrame: {},
+		chartType: {},
+		defaultOptions: {},
+		defaultPalette: {},
+		fixedOptions: {},
+		allowChartDeleting: { type: Boolean },
+		allowTitleEditing: { type: Boolean },
+		driver: {},
+		tooltipButton: {},
+		labelsModifier: { type: Function },
+		dataColumnPredicate: { type: Function },
+		metaColumnPredicate: { type: Function },
+		readonlyInputs: {},
+		statusText: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {},
+		selection: {},
+		selectionModifiers: {}
+	}),
+	emits: /* @__PURE__ */ f(["delete-this-graph", "tooltip-btn-click"], ["update:modelValue", "update:selection"]),
+	setup(d, { expose: f, emit: E }) {
+		let D = b(d, "modelValue"), O = b(d, "selection"), k = d;
+		f({ reset: P });
+		let A = m(null);
+		x(() => k.pFrame, (e) => {
+			if (!e.ok || !e.value) {
+				A.value = null;
+				return;
+			}
+			let t = "platforma" in window ? window.platforma?.pFrameDriver : k.driver;
+			if (!t) throw Error("PFrame driver is missing");
+			A.value = new C(e.value, t, k.labelsModifier);
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let j = m(k.fixedOptions ?? []);
+		x(() => k.fixedOptions, (e, t) => {
+			(e && t && JSON.stringify(e) !== JSON.stringify(t) || e && !t || t && !e) && (j.value = e);
+		}, { deep: !0 });
+		let M = m(k.defaultOptions);
+		x(() => k.defaultOptions, (e) => {
+			M.value = e;
+		}, { deep: !0 });
+		let N = te(v(D.value), A, k.chartType, M, j, k.dataColumnPredicate, k.metaColumnPredicate, k.readonlyInputs, k.defaultPalette);
+		function P() {
+			let e = ee(v(D.value), k.chartType);
+			Object.assign(N.value.reactive, e), Object.assign(N.value.loading, {
+				initialInputGuide: !0,
+				initialCharts: !0,
+				initialDefaults: !0,
+				inputGuide: !1,
+				chartData: !1
+			}), M.value = k.defaultOptions;
+		}
+		let F = s(() => i(N.value.reactive.currentTab)), I = _(null), L = m(null), R = m(!1), z = m(null), B = s(() => k.pFrame.ok && !k.pFrame.value && !k.pFrame.stable), V = s(() => N.value.loading.initialInputGuide && H.value === "loading");
+		x(() => B.value, (e, t) => {
+			e && !t && (N.value.reactive.currentTab = null);
+		});
+		let H = s((e) => {
+			if (B.value) return "running";
+			if (k.pFrame.ok && k.pFrame.stable && !k.pFrame.value) return "noPframe";
+			if (!k.pFrame.ok) return "noPframeWithError";
+			let t = N.value.inputGuide.value, n = N.value.chartData.value;
+			return t.consistent ? t.ready ? n && Object.values(n.data.byColumns.values)[0]?.length === 0 ? "empty" : R.value ? z.value?.type === "unknownError" ? "unknownError" : "knownError" : N.value.loading.initialCharts || e !== "ready" && N.value.loading.chartData || N.value.loading.chartRendering || I.value === null && (N.value.loading.inputGuide || N.value.loading.chartData) ? "loading" : "ready" : M.value === null || N.value.loading.defaults || N.value.loading.initialInputGuide ? "loading" : "notReady" : "inconsistent";
+		});
+		function me(e) {
+			N.value.reactive.dendroSelectedNodeId = e?.info[0]?.id, N.value.reactive.dendroInfoByClick = e;
+		}
+		let U = m(null);
+		function W(e) {
+			let t = N.value.reactive;
+			if (e) {
+				if (t.tooltipHintWasShown) return;
+				U.value &&= (clearTimeout(U.value), null), t.showTooltipHint = !0, U.value = setTimeout(() => {
+					t.showTooltipHint = !1, t.tooltipHintWasShown = !0, U.value = null;
+				}, 3e3);
+			} else t.showTooltipHint = !1;
+		}
+		function G(e, t) {
+			D.value = {
+				...D.value,
+				selectedPolygons: t
+			};
+			let n = N.value.chartData.value?.data?.axesData;
+			if (e.length === 0 || !n) {
+				O.value = {
+					axesSpec: [],
+					selectedKeys: []
+				};
+				return;
+			}
+			let r = Object.keys(n), i = N.value.inputGuide.value;
+			O.value = {
+				axesSpec: r.map((e) => i.getSourceInfo(e).spec),
+				selectedKeys: e.map((e) => r.map((t) => n[t][e]))
+			};
+		}
+		function K(e) {
+			N.value.reactive.lassoControlsState = e;
+		}
+		let q = null;
+		function he(e) {
+			e ? q = setTimeout(() => {
+				N.value.loading.chartRendering = !0;
+			}, 1e3) : (q && clearTimeout(q), N.value.loading.chartRendering = !1);
+		}
+		let J = m(!1);
+		function ge(e) {
+			J.value = e;
+		}
+		let _e = {
+			dendro: [me],
+			"scatterplot-umap": {
+				onPolygonUpdate: G,
+				onTooltipHintSwitch: W,
+				onLassoControlsStateUpdate: K,
+				onZoomChange: ge
+			},
+			discrete: [W],
+			scatterplot: {
+				onPolygonUpdate: G,
+				onTooltipHintSwitch: W,
+				onLassoControlsStateUpdate: K
+			},
+			histogram: [W],
+			heatmap: {
+				onTooltipHintSwitch: W,
+				onLoadingChange: he
+			},
+			bubble: [W]
+		};
+		function Y(e) {
+			if (e && Object.values(e.data.values)[0]?.length > 0) {
+				if (I.value) I.value.updateSettingsAndData({
+					...v(e.data),
+					id: e.data.id + (k.pFrame.ok ? k.pFrame.value : "")
+				}, v(e.settings));
+				else {
+					let t = document.getElementById("chartSvgContainer");
+					t && (I.value = fe.newPlot(v(e.data), v(e.settings), _e[e.settings.type]), e.settings.type === "scatterplot-umap" && I.value.updateChartState("polygon", D.value.selectedPolygons ?? []), I.value.mount(t));
+				}
+				L.value = I.value?.calculatedData ? { ...I.value.calculatedData } : null, R.value = I.value?.hasError ?? !1, z.value = I.value?.errorInfo ?? null;
+			} else I.value?.unmount(), I.value = null, z.value = null;
+		}
+		x(() => H.value, (e) => {
+			(e === "notReady" || e === "noPframe" || A.value === null) && (I.value?.unmount(), I.value = null);
+		});
+		let X = _(null), Z = m(null);
+		function Q(e) {
+			if (!e) {
+				X.value = null, Z.value = null;
+				return;
+			}
+			X.value = {
+				settings: e.settings,
+				data: e.data
+			}, Z.value = e.truncationWarning;
+		}
+		x([() => N.value.chartData.value], ([e]) => {
+			Q(t(v(e), v(N.value.inputGuide.value), v(N.value.uniqueValuesData.value), v(N.value.filterLabelsInfo.value), v(N.value.reactive), v(N.value.defaultPalette), v(N.value.facetValuesData.value)));
+		}), x([
+			() => N.value.reactive.template,
+			() => N.value.reactive.layersSettings,
+			() => N.value.reactive.axesSettings,
+			() => N.value.reactive.statisticsSettings,
+			() => N.value.reactive.dataBindAes,
+			() => N.value.reactive.chartScale
+		], () => {
+			Q(t(v(N.value.chartData.value), v(N.value.inputGuide.value), v(N.value.uniqueValuesData.value), v(N.value.filterLabelsInfo.value), v(N.value.reactive), v(N.value.defaultPalette), v(N.value.facetValuesData.value)));
+		}, { deep: !0 }), x(() => X.value, (e) => {
+			Y(e);
+		}), le(() => {
+			Y(null);
+		}), ue(() => {
+			U.value &&= (clearTimeout(U.value), null), I.value?.unmount();
+		}), w(() => N.value.reactive.optionsState, (t) => {
+			D.value = {
+				...D.value,
+				optionsState: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w(() => N.value.reactive.usedDefaultOptions, (t) => {
+			D.value = {
+				...D.value,
+				usedDefaultOptions: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w(() => N.value.reactive.statisticsSettings, (t) => {
+			D.value = {
+				...D.value,
+				statisticsSettings: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w(() => N.value.reactive.axesSettings, (t) => {
+			D.value = {
+				...D.value,
+				axesSettings: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w(() => N.value.reactive.layersSettings, (t) => {
+			D.value = {
+				...D.value,
+				layersSettings: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w(() => N.value.reactive.dataBindAes, (t) => {
+			D.value = {
+				...D.value,
+				dataBindAes: e(t)
+			};
+		}, {
+			deep: !0,
+			debounce: 1e3
+		}), w([
+			() => N.value.reactive.chartScale,
+			() => N.value.reactive.template,
+			() => N.value.reactive.currentTab
+		], ([e, t, n]) => {
+			D.value = {
+				...D.value,
+				zoomState: e,
+				template: t,
+				currentTab: n
+			};
+		}, { debounce: 1e3 }), x(() => N.value.reactive.tooltipHintWasShown, (e) => {
+			e && (D.value = {
+				...D.value,
+				tooltipHintWasShown: !0
+			});
+		}), x(() => D.value.currentTab, (e) => {
+			N.value.reactive.currentTab = e === void 0 ? "dataMapping" : e;
+		}), x(() => D.value?.layersSettings?.dendro?.showTable, (e) => {
+			N.value.reactive.layersSettings.dendro.showTable = e ?? !1;
+		});
+		function ve() {
+			n(new Blob([I.value?.export() ?? ""]), "chart.svg");
+		}
+		function ye(e) {
+			D.value = {
+				...D.value,
+				title: e
+			};
+		}
+		function be(e) {
+			N.value.reactive.dendroSelectedNodeId = e, I.value?.updateChartState("selectedNode", e);
+		}
+		let $ = de(), xe = s(() => !!$.annotationsSlot), Se = s(() => !!$.settingsSlot), Ce = s(() => !!$.logSlot);
+		return (e, t) => (p(), se("div", pe, [
+			ce("div", T, [
+				u(re, {
+					"graph-status": H.value,
+					graphTitle: D.value.title,
+					chartData: L.value,
+					"chart-ref": I.value,
+					"error-info": z.value,
+					dendroTooltipButton: d.tooltipButton,
+					"custom-status-text": d.statusText,
+					"allow-title-editing": d.allowTitleEditing,
+					isScatterplotZoomChanged: J.value,
+					onGraphTitleUpdate: ye,
+					onDendroNodeSelect: be,
+					onDendroTooltipBtnClick: t[0] ||= (t) => e.$emit("tooltip-btn-click", t)
+				}, {
+					default: S(() => [h(e.$slots, "titleLineSlot")]),
+					_: 3
+				}, 8, [
+					"graph-status",
+					"graphTitle",
+					"chartData",
+					"chart-ref",
+					"error-info",
+					"dendroTooltipButton",
+					"custom-status-text",
+					"allow-title-editing",
+					"isScatterplotZoomChanged"
+				]),
+				V.value || B.value ? (p(), c(ne, {
+					key: 0,
+					graphStatus: B.value ? "running" : "loading",
+					top: 67,
+					left: 12,
+					right: 12,
+					bottom: 12,
+					customStatusText: d.statusText
+				}, null, 8, ["graphStatus", "customStatusText"])) : l("", !0),
+				u(a, { id: "graph-settings-modal" }, {
+					default: S(() => [y(N).reactive.currentTab && !((V.value || B.value) && y(r)(y(N).reactive.currentTab)) ? (p(), c(ie, {
+						key: 0,
+						onClose: t[1] ||= (e) => y(N).reactive.currentTab = null
+					}, {
+						default: S(() => [(p(), c(g(F.value.value), null, {
+							default: S(() => [
+								y(N).reactive.currentTab === "annotations" ? h(e.$slots, "annotationsSlot", { key: 0 }) : l("", !0),
+								y(N).reactive.currentTab === "settings" ? h(e.$slots, "settingsSlot", { key: 1 }) : l("", !0),
+								y(N).reactive.currentTab === "log" ? h(e.$slots, "logSlot", { key: 2 }) : l("", !0)
+							]),
+							_: 3
+						}))]),
+						_: 3
+					})) : l("", !0)]),
+					_: 3
+				})
+			]),
+			u(ae, {
+				modelValue: y(N).reactive.currentTab,
+				"onUpdate:modelValue": t[2] ||= (e) => y(N).reactive.currentTab = e,
+				"chart-type": y(N).reactive.chartType,
+				"graph-status": H.value,
+				allowDeleting: d.allowChartDeleting,
+				hasAnnotationsSlot: xe.value,
+				hasSettingsSlot: Se.value,
+				hasLogSlot: Ce.value,
+				initialLoading: V.value || B.value,
+				onExport: ve,
+				onDelete: t[3] ||= (t) => e.$emit("delete-this-graph")
+			}, null, 8, [
+				"modelValue",
+				"chart-type",
+				"graph-status",
+				"allowDeleting",
+				"hasAnnotationsSlot",
+				"hasSettingsSlot",
+				"hasLogSlot",
+				"initialLoading"
+			]),
+			z.value?.type === "unknownError" ? (p(), c(o, {
+				key: 0,
+				errorInfo: z.value
+			}, null, 8, ["errorInfo"])) : l("", !0),
+			Z.value && (Z.value.groups || Z.value.facets) ? (p(), c(oe, {
+				key: 1,
+				"truncation-warning": Z.value
+			}, null, 8, ["truncation-warning"])) : l("", !0)
+		]));
+	}
+});
+export { E as default };
+
+//# sourceMappingURL=ui.vue2.js.map

package/dist/ui.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../src/ui.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './assets/ui.scss';\nimport type {\n  ChartInterface,\n  DataByColumns,\n  ErrorInfo,\n  LassoControlsState,\n  Settings,\n} from '@milaboratories/miplots4';\nimport { MiPlots } from '@milaboratories/miplots4';\nimport type { ChartType, PlotDataAndSettings } from '@milaboratories/pf-plots';\nimport { DemoDataStore } from '@milaboratories/pf-plots';\nimport type { AxisSpec, PFrameDriver, PlSelectionModel, PTableKey } from '@platforma-sdk/model';\nimport { watchDebounced } from '@vueuse/core';\nimport { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, useSlots, watch } from 'vue';\nimport Chart from './components/Chart.vue';\nimport PanelModal from './components/PanelModal.vue';\nimport VTabs from './components/SettingsTabs/index.vue';\nimport TransitionSlidePanel from './components/TransitionSlidePanel.vue';\nimport ChartErrorNotificationAlert from './components/ChartErrorNotificationAlert.vue';\nimport ChartTruncationWarningAlert from './components/ChartTruncationWarningAlert.vue';\nimport { isOwnGraphMakerTab, useSettingsForm } from './forms';\nimport { createReactiveState, provideStore } from './store';\nimport type { DendroNodeInfo, GraphMakerProps, GraphMakerState, GraphStatus } from './types';\nimport { composeChartSettings, saveToFile } from './utils';\nimport type { ChartTruncationWarning } from './utils/createChartSettingsForRender/composeChartSettings';\nimport { copyJSON } from './utils/copyJSON';\nimport GraphStatusScreen from './components/GraphStatusScreen.vue';\n\nconst _emit = defineEmits(['delete-this-graph', 'tooltip-btn-click']);\n\nconst graphMakerState = defineModel<GraphMakerState>({ required: true });\nconst selectionState = defineModel<PlSelectionModel>('selection');\n\nconst props = defineProps<GraphMakerProps>();\n\ndefineExpose({\n  /**\n   reset() will update data-mapping, axis-settings, layers-settings with the state that is in v-model at the moment.\n   In other cases editing of v-model fields doesn't make any impact to graphs and interface.\n   */\n  reset,\n});\n\nconst dataStore = ref<DemoDataStore | null>(null);\n\nwatch(() => props.pFrame, (pframe) => {\n  if (!pframe.ok || !pframe.value) {\n    dataStore.value = null;\n    return;\n  }\n  const driver = ('platforma' in window) ? window.platforma?.pFrameDriver as PFrameDriver : props.driver;\n  if (!driver) {\n    throw new Error('PFrame driver is missing');\n  }\n  dataStore.value = new DemoDataStore(\n    pframe.value,\n    driver,\n    props.labelsModifier,\n  );\n}, { immediate: true, deep: true });\n\n// fixed options can be updated outside, other settings only inside from chart settings interface, so we don't watching other settings\nconst fixedOptions = ref<typeof props.fixedOptions>(props.fixedOptions ?? []);\nwatch(() => props.fixedOptions, (value, oldValue) => {\n  if (\n    (value && oldValue && JSON.stringify(value) !== JSON.stringify(oldValue))\n    || (value && !oldValue)\n    || (oldValue && !value)\n  ) {\n    fixedOptions.value = value;\n  }\n}, { deep: true });\nconst defaultOptions = ref<typeof props.defaultOptions>(props.defaultOptions);\nwatch(() => props.defaultOptions, (v) => {\n  defaultOptions.value = v;\n}, { deep: true });\nconst state = provideStore(\n  toRaw(graphMakerState.value),\n  dataStore,\n  props.chartType,\n  defaultOptions,\n  fixedOptions,\n  props.dataColumnPredicate,\n  props.metaColumnPredicate,\n  props.readonlyInputs,\n  props.defaultPalette,\n);\n\nfunction reset() {\n  const nextReactiveState = createReactiveState(\n    toRaw(graphMakerState.value),\n    props.chartType,\n  );\n  Object.assign(state.value.reactive, nextReactiveState);\n  Object.assign(state.value.loading, {\n    initialInputGuide: true,\n    initialCharts: true,\n    initialDefaults: true,\n    inputGuide: false,\n    chartData: false,\n  });\n  defaultOptions.value = props.defaultOptions;\n}\n\nconst currentForm = computed(() => useSettingsForm(state.value.reactive.currentTab));\n\nconst chartRef = shallowRef<ChartInterface | null>(null);\nconst chartCalculatedDataRef = ref<Record<string, unknown> | null>(null);\nconst chartError = ref(false);\nconst chartErrorInfo = ref<ErrorInfo | null>(null);\n\nconst isRunning = computed(\n  () => props.pFrame.ok && !props.pFrame.value && !props.pFrame.stable,\n);\nconst isInitialLoading = computed(\n  () => state.value.loading.initialInputGuide && graphStatus.value === 'loading',\n);\n\nwatch(() => isRunning.value, (val, prevVal) => {\n  if (val && !prevVal) {\n    state.value.reactive.currentTab = null;\n  }\n});\n\nconst graphStatus = computed<GraphStatus>((previousStatus) => {\n  if (isRunning.value) {\n    return 'running';\n  }\n  if (props.pFrame.ok && props.pFrame.stable && !props.pFrame.value) {\n    return 'noPframe';\n  }\n  if (!props.pFrame.ok) {\n    return 'noPframeWithError';\n  }\n  const inputGuide = state.value.inputGuide.value;\n  const chartData = state.value.chartData.value;\n  if (!inputGuide.consistent) {\n    return 'inconsistent';\n  }\n  if (!inputGuide.ready) {\n    return defaultOptions.value === null\n      || state.value.loading.defaults\n      || state.value.loading.initialInputGuide\n      ? 'loading'\n      : 'notReady';\n  }\n  if (chartData && Object.values(chartData.data.byColumns.values)[0]?.length === 0) {\n    return 'empty';\n  }\n  if (chartError.value) {\n    return chartErrorInfo.value?.type === 'unknownError' ? 'unknownError' : 'knownError';\n  }\n  if (\n    (state.value.loading.initialCharts || (previousStatus !== 'ready' && state.value.loading.chartData) || state.value.loading.chartRendering)\n    || (chartRef.value === null && (state.value.loading.inputGuide || state.value.loading.chartData))\n  ) {\n    return 'loading';\n  }\n  return 'ready';\n});\n\nfunction onTreeNodeClick(d: DendroNodeInfo) {\n  state.value.reactive.dendroSelectedNodeId = d?.info[0]?.id as number;\n  state.value.reactive.dendroInfoByClick = d;\n}\n\nconst tooltipHintHideTimerRef = ref<ReturnType<typeof setTimeout> | null>(null);\n\nfunction onTooltipHintSwitch(v: boolean) {\n  const reactive = state.value.reactive;\n  if (v) {\n    if (reactive.tooltipHintWasShown) return;\n    if (tooltipHintHideTimerRef.value) {\n      clearTimeout(tooltipHintHideTimerRef.value);\n      tooltipHintHideTimerRef.value = null;\n    }\n    reactive.showTooltipHint = true;\n    tooltipHintHideTimerRef.value = setTimeout(() => {\n      reactive.showTooltipHint = false;\n      reactive.tooltipHintWasShown = true;\n      tooltipHintHideTimerRef.value = null;\n    }, 3000);\n  } else {\n    reactive.showTooltipHint = false;\n  }\n}\n\nfunction onLassoPolygonUpdate(dotIndexes: number[], polygons: { points: [number, number][]; closed: boolean }[]) {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    selectedPolygons: polygons,\n  };\n\n  const axesData = state.value.chartData.value?.data?.axesData;\n  if (dotIndexes.length === 0 || !axesData) {\n    selectionState.value = { axesSpec: [], selectedKeys: [] };\n    return;\n  }\n\n  const axisKeys = Object.keys(axesData);\n  const inputGuide = state.value.inputGuide.value;\n  selectionState.value = {\n    axesSpec: axisKeys.map((axisKey) => inputGuide.getSourceInfo(axisKey).spec as AxisSpec),\n    selectedKeys: dotIndexes.map((idx) => axisKeys.map((axisKey) => axesData[axisKey][idx]) as PTableKey),\n  };\n}\n\nfunction onLassoStateChange(v: LassoControlsState) {\n  state.value.reactive.lassoControlsState = v;\n}\nlet chartRenderingInProgress: ReturnType<typeof setTimeout> | null = null;\nfunction onLoadingStateChange(v: boolean) {\n  if (v) {\n    chartRenderingInProgress = setTimeout(() => {\n      state.value.loading.chartRendering = true;\n    }, 1000);\n  } else {\n    if (chartRenderingInProgress) {\n      clearTimeout(chartRenderingInProgress);\n    }\n    state.value.loading.chartRendering = false;\n  }\n}\nconst isScatterplotZoomChanged = ref(false);\nfunction onZoomChange(isZoomChanged: boolean) {\n  isScatterplotZoomChanged.value = isZoomChanged;\n}\nconst graphEventHandlers: Record<ChartType, unknown> = {\n  'dendro': [onTreeNodeClick],\n  'scatterplot-umap': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange,\n    onZoomChange,\n  },\n  'discrete': [onTooltipHintSwitch],\n  'scatterplot': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange,\n  },\n  'histogram': [onTooltipHintSwitch],\n  'heatmap': { onTooltipHintSwitch, onLoadingChange: onLoadingStateChange },\n  'bubble': [onTooltipHintSwitch],\n};\nfunction updateChart(value: { data: PlotDataAndSettings['data']['byColumns']; settings: PlotDataAndSettings['settings'] } | null) {\n  // if dataByColumns exists but columns has no data - show empty chart\n  if (value && Object.values(value.data.values)[0]?.length > 0) {\n    // console.log('value.dataByColumns', toRaw(value.data));\n    // console.log('value.settings', toRaw(value.settings));\n    if (chartRef.value) {\n      chartRef.value.updateSettingsAndData({ ...toRaw(value.data), id: value.data.id + (props.pFrame.ok ? props.pFrame.value : '') }, toRaw(value.settings) as Settings);\n    } else {\n      const htmlNode = document.getElementById('chartSvgContainer');\n      if (htmlNode) {\n        chartRef.value = MiPlots.newPlot(toRaw(value.data), toRaw(value.settings) as Settings, graphEventHandlers[value.settings.type as ChartType]);\n        if (value.settings.type === 'scatterplot-umap') {\n          // set default polygons (from props)\n          chartRef.value.updateChartState('polygon', graphMakerState.value.selectedPolygons ?? []);\n        }\n        chartRef.value.mount(htmlNode);\n      }\n    }\n    // calculated by chart renderer data, tree hierarchy for example\n    chartCalculatedDataRef.value = chartRef.value?.calculatedData ? { ...chartRef.value.calculatedData } : null;\n    chartError.value = chartRef.value?.hasError ?? false;\n    chartErrorInfo.value = chartRef.value?.errorInfo ?? null;\n  } else {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n    chartErrorInfo.value = null;\n  }\n}\n\nwatch(() => graphStatus.value, (v) => {\n  if (v === 'notReady' || v === 'noPframe' || dataStore.value === null) {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n  }\n});\n\nconst chartDataForRender = shallowRef<{ settings: Settings; data: DataByColumns } | null>(null);\nconst chartTruncationWarning = ref<ChartTruncationWarning | null>(null);\n\nfunction applyComposeResult(result: ReturnType<typeof composeChartSettings>) {\n  if (!result) {\n    chartDataForRender.value = null;\n    chartTruncationWarning.value = null;\n    return;\n  }\n  chartDataForRender.value = { settings: result.settings, data: result.data };\n  chartTruncationWarning.value = result.truncationWarning;\n}\n\nwatch([\n  () => state.value.chartData.value,\n], ([chartData]) => {\n  applyComposeResult(composeChartSettings(\n    toRaw(chartData),\n    toRaw(state.value.inputGuide.value),\n    toRaw(state.value.uniqueValuesData.value),\n    toRaw(state.value.filterLabelsInfo.value),\n    toRaw(state.value.reactive),\n    toRaw(state.value.defaultPalette),\n    toRaw(state.value.facetValuesData.value),\n  ));\n});\nwatch([\n  () => state.value.reactive.template,\n  () => state.value.reactive.layersSettings,\n  () => state.value.reactive.axesSettings,\n  () => state.value.reactive.statisticsSettings,\n  () => state.value.reactive.dataBindAes,\n  () => state.value.reactive.chartScale,\n], () => {\n  applyComposeResult(composeChartSettings(\n    toRaw(state.value.chartData.value),\n    toRaw(state.value.inputGuide.value),\n    toRaw(state.value.uniqueValuesData.value),\n    toRaw(state.value.filterLabelsInfo.value),\n    toRaw(state.value.reactive),\n    toRaw(state.value.defaultPalette),\n    toRaw(state.value.facetValuesData.value),\n  ));\n}, { deep: true });\n\nwatch(() => chartDataForRender.value, (chartData) => {\n  updateChart(chartData);\n});\nonMounted(() => {\n  updateChart(null);\n});\nonUnmounted(() => {\n  if (tooltipHintHideTimerRef.value) {\n    clearTimeout(tooltipHintHideTimerRef.value);\n    tooltipHintHideTimerRef.value = null;\n  }\n  chartRef.value?.unmount();\n});\n\nwatchDebounced(() => state.value.reactive.optionsState, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    optionsState: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.usedDefaultOptions, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    usedDefaultOptions: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.statisticsSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    statisticsSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.axesSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    axesSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.layersSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    layersSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.dataBindAes, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    dataBindAes: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\n\nwatchDebounced([\n  () => state.value.reactive.chartScale,\n  () => state.value.reactive.template,\n  () => state.value.reactive.currentTab,\n], ([zoomState, template, currentTab]) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    zoomState,\n    template,\n    currentTab,\n  };\n}, { debounce: 1000 });\n\nwatch(() => state.value.reactive.tooltipHintWasShown, (v) => {\n  if (v) {\n    graphMakerState.value = { ...graphMakerState.value, tooltipHintWasShown: true };\n  }\n});\n\nwatch(() => graphMakerState.value.currentTab, (v) => {\n  state.value.reactive.currentTab = v === undefined ? 'dataMapping' : v;\n});\n\nwatch(() => graphMakerState.value?.layersSettings?.dendro?.showTable, (v) => {\n  state.value.reactive.layersSettings.dendro.showTable = v ?? false;\n});\n\nfunction onExport() {\n  saveToFile(\n    new Blob([\n      chartRef.value?.export() ?? '',\n    ]),\n    'chart.svg',\n  );\n}\n\nfunction updateGraphTitle(nextTitle: string) {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    title: nextTitle,\n  };\n}\n\nfunction selectTreeNode(id: number | null) {\n  state.value.reactive.dendroSelectedNodeId = id;\n  chartRef.value?.updateChartState('selectedNode', id);\n}\n\nconst slots = useSlots();\n\nconst hasAnnotationsSlot = computed(() => Boolean(slots.annotationsSlot));\nconst hasSettingsSlot = computed(() => Boolean(slots.settingsSlot));\nconst hasLogSlot = computed(() => Boolean(slots.logSlot));\n\n</script>\n\n<template>\n  <div class=\"graph-maker\">\n    <div class=\"graph-maker__main-pane\">\n      <Chart\n        :graph-status=\"graphStatus\" :graphTitle=\"graphMakerState.title\" :chartData=\"chartCalculatedDataRef\"\n        :chart-ref=\"chartRef\" :error-info=\"chartErrorInfo\" :dendroTooltipButton=\"tooltipButton\"\n        :custom-status-text=\"statusText\"\n        :allow-title-editing=\"allowTitleEditing\"\n        :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"\n        @graph-title-update=\"updateGraphTitle\" @dendro-node-select=\"selectTreeNode\"\n        @dendro-tooltip-btn-click=\"(id: string) => $emit('tooltip-btn-click', id)\"\n      >\n        <slot name=\"titleLineSlot\" />\n      </Chart>\n      <GraphStatusScreen v-if=\"isInitialLoading || isRunning\" :graphStatus=\"isRunning ? 'running' : 'loading'\" :top=\"67\" :left=\"12\" :right=\"12\" :bottom=\"12\" :customStatusText=\"statusText\" />\n      <TransitionSlidePanel id=\"graph-settings-modal\">\n        <PanelModal\n          v-if=\"state.reactive.currentTab && !((isInitialLoading || isRunning) && isOwnGraphMakerTab(state.reactive.currentTab))\"\n          @close=\"state.reactive.currentTab = null\"\n        >\n          <component :is=\"currentForm.value\">\n            <slot v-if=\"state.reactive.currentTab === 'annotations'\" name=\"annotationsSlot\" />\n            <slot v-if=\"state.reactive.currentTab === 'settings'\" name=\"settingsSlot\" />\n            <slot v-if=\"state.reactive.currentTab === 'log'\" name=\"logSlot\" />\n          </component>\n        </PanelModal>\n      </TransitionSlidePanel>\n    </div>\n    <VTabs\n      v-model=\"state.reactive.currentTab\" :chart-type=\"state.reactive.chartType\" :graph-status=\"graphStatus\"\n      :allowDeleting=\"allowChartDeleting\" :hasAnnotationsSlot=\"hasAnnotationsSlot\" :hasSettingsSlot=\"hasSettingsSlot\"\n      :hasLogSlot=\"hasLogSlot\" :initialLoading=\"isInitialLoading || isRunning\" @export=\"onExport\"\n      @delete=\"$emit('delete-this-graph')\"\n    />\n    <ChartErrorNotificationAlert v-if=\"chartErrorInfo?.type === 'unknownError'\" :errorInfo=\"chartErrorInfo\" />\n    <ChartTruncationWarningAlert\n      v-if=\"chartTruncationWarning && (chartTruncationWarning.groups || chartTruncationWarning.facets)\"\n      :truncation-warning=\"chartTruncationWarning\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/ui2.js

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

package/dist/ui2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui2.js","names":[],"sources":["../src/ui.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './assets/ui.scss';\nimport type {\n  ChartInterface,\n  DataByColumns,\n  ErrorInfo,\n  LassoControlsState,\n  Settings,\n} from '@milaboratories/miplots4';\nimport { MiPlots } from '@milaboratories/miplots4';\nimport type { ChartType, PlotDataAndSettings } from '@milaboratories/pf-plots';\nimport { DemoDataStore } from '@milaboratories/pf-plots';\nimport type { AxisSpec, PFrameDriver, PlSelectionModel, PTableKey } from '@platforma-sdk/model';\nimport { watchDebounced } from '@vueuse/core';\nimport { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, useSlots, watch } from 'vue';\nimport Chart from './components/Chart.vue';\nimport PanelModal from './components/PanelModal.vue';\nimport VTabs from './components/SettingsTabs/index.vue';\nimport TransitionSlidePanel from './components/TransitionSlidePanel.vue';\nimport ChartErrorNotificationAlert from './components/ChartErrorNotificationAlert.vue';\nimport ChartTruncationWarningAlert from './components/ChartTruncationWarningAlert.vue';\nimport { isOwnGraphMakerTab, useSettingsForm } from './forms';\nimport { createReactiveState, provideStore } from './store';\nimport type { DendroNodeInfo, GraphMakerProps, GraphMakerState, GraphStatus } from './types';\nimport { composeChartSettings, saveToFile } from './utils';\nimport type { ChartTruncationWarning } from './utils/createChartSettingsForRender/composeChartSettings';\nimport { copyJSON } from './utils/copyJSON';\nimport GraphStatusScreen from './components/GraphStatusScreen.vue';\n\nconst _emit = defineEmits(['delete-this-graph', 'tooltip-btn-click']);\n\nconst graphMakerState = defineModel<GraphMakerState>({ required: true });\nconst selectionState = defineModel<PlSelectionModel>('selection');\n\nconst props = defineProps<GraphMakerProps>();\n\ndefineExpose({\n  /**\n   reset() will update data-mapping, axis-settings, layers-settings with the state that is in v-model at the moment.\n   In other cases editing of v-model fields doesn't make any impact to graphs and interface.\n   */\n  reset,\n});\n\nconst dataStore = ref<DemoDataStore | null>(null);\n\nwatch(() => props.pFrame, (pframe) => {\n  if (!pframe.ok || !pframe.value) {\n    dataStore.value = null;\n    return;\n  }\n  const driver = ('platforma' in window) ? window.platforma?.pFrameDriver as PFrameDriver : props.driver;\n  if (!driver) {\n    throw new Error('PFrame driver is missing');\n  }\n  dataStore.value = new DemoDataStore(\n    pframe.value,\n    driver,\n    props.labelsModifier,\n  );\n}, { immediate: true, deep: true });\n\n// fixed options can be updated outside, other settings only inside from chart settings interface, so we don't watching other settings\nconst fixedOptions = ref<typeof props.fixedOptions>(props.fixedOptions ?? []);\nwatch(() => props.fixedOptions, (value, oldValue) => {\n  if (\n    (value && oldValue && JSON.stringify(value) !== JSON.stringify(oldValue))\n    || (value && !oldValue)\n    || (oldValue && !value)\n  ) {\n    fixedOptions.value = value;\n  }\n}, { deep: true });\nconst defaultOptions = ref<typeof props.defaultOptions>(props.defaultOptions);\nwatch(() => props.defaultOptions, (v) => {\n  defaultOptions.value = v;\n}, { deep: true });\nconst state = provideStore(\n  toRaw(graphMakerState.value),\n  dataStore,\n  props.chartType,\n  defaultOptions,\n  fixedOptions,\n  props.dataColumnPredicate,\n  props.metaColumnPredicate,\n  props.readonlyInputs,\n  props.defaultPalette,\n);\n\nfunction reset() {\n  const nextReactiveState = createReactiveState(\n    toRaw(graphMakerState.value),\n    props.chartType,\n  );\n  Object.assign(state.value.reactive, nextReactiveState);\n  Object.assign(state.value.loading, {\n    initialInputGuide: true,\n    initialCharts: true,\n    initialDefaults: true,\n    inputGuide: false,\n    chartData: false,\n  });\n  defaultOptions.value = props.defaultOptions;\n}\n\nconst currentForm = computed(() => useSettingsForm(state.value.reactive.currentTab));\n\nconst chartRef = shallowRef<ChartInterface | null>(null);\nconst chartCalculatedDataRef = ref<Record<string, unknown> | null>(null);\nconst chartError = ref(false);\nconst chartErrorInfo = ref<ErrorInfo | null>(null);\n\nconst isRunning = computed(\n  () => props.pFrame.ok && !props.pFrame.value && !props.pFrame.stable,\n);\nconst isInitialLoading = computed(\n  () => state.value.loading.initialInputGuide && graphStatus.value === 'loading',\n);\n\nwatch(() => isRunning.value, (val, prevVal) => {\n  if (val && !prevVal) {\n    state.value.reactive.currentTab = null;\n  }\n});\n\nconst graphStatus = computed<GraphStatus>((previousStatus) => {\n  if (isRunning.value) {\n    return 'running';\n  }\n  if (props.pFrame.ok && props.pFrame.stable && !props.pFrame.value) {\n    return 'noPframe';\n  }\n  if (!props.pFrame.ok) {\n    return 'noPframeWithError';\n  }\n  const inputGuide = state.value.inputGuide.value;\n  const chartData = state.value.chartData.value;\n  if (!inputGuide.consistent) {\n    return 'inconsistent';\n  }\n  if (!inputGuide.ready) {\n    return defaultOptions.value === null\n      || state.value.loading.defaults\n      || state.value.loading.initialInputGuide\n      ? 'loading'\n      : 'notReady';\n  }\n  if (chartData && Object.values(chartData.data.byColumns.values)[0]?.length === 0) {\n    return 'empty';\n  }\n  if (chartError.value) {\n    return chartErrorInfo.value?.type === 'unknownError' ? 'unknownError' : 'knownError';\n  }\n  if (\n    (state.value.loading.initialCharts || (previousStatus !== 'ready' && state.value.loading.chartData) || state.value.loading.chartRendering)\n    || (chartRef.value === null && (state.value.loading.inputGuide || state.value.loading.chartData))\n  ) {\n    return 'loading';\n  }\n  return 'ready';\n});\n\nfunction onTreeNodeClick(d: DendroNodeInfo) {\n  state.value.reactive.dendroSelectedNodeId = d?.info[0]?.id as number;\n  state.value.reactive.dendroInfoByClick = d;\n}\n\nconst tooltipHintHideTimerRef = ref<ReturnType<typeof setTimeout> | null>(null);\n\nfunction onTooltipHintSwitch(v: boolean) {\n  const reactive = state.value.reactive;\n  if (v) {\n    if (reactive.tooltipHintWasShown) return;\n    if (tooltipHintHideTimerRef.value) {\n      clearTimeout(tooltipHintHideTimerRef.value);\n      tooltipHintHideTimerRef.value = null;\n    }\n    reactive.showTooltipHint = true;\n    tooltipHintHideTimerRef.value = setTimeout(() => {\n      reactive.showTooltipHint = false;\n      reactive.tooltipHintWasShown = true;\n      tooltipHintHideTimerRef.value = null;\n    }, 3000);\n  } else {\n    reactive.showTooltipHint = false;\n  }\n}\n\nfunction onLassoPolygonUpdate(dotIndexes: number[], polygons: { points: [number, number][]; closed: boolean }[]) {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    selectedPolygons: polygons,\n  };\n\n  const axesData = state.value.chartData.value?.data?.axesData;\n  if (dotIndexes.length === 0 || !axesData) {\n    selectionState.value = { axesSpec: [], selectedKeys: [] };\n    return;\n  }\n\n  const axisKeys = Object.keys(axesData);\n  const inputGuide = state.value.inputGuide.value;\n  selectionState.value = {\n    axesSpec: axisKeys.map((axisKey) => inputGuide.getSourceInfo(axisKey).spec as AxisSpec),\n    selectedKeys: dotIndexes.map((idx) => axisKeys.map((axisKey) => axesData[axisKey][idx]) as PTableKey),\n  };\n}\n\nfunction onLassoStateChange(v: LassoControlsState) {\n  state.value.reactive.lassoControlsState = v;\n}\nlet chartRenderingInProgress: ReturnType<typeof setTimeout> | null = null;\nfunction onLoadingStateChange(v: boolean) {\n  if (v) {\n    chartRenderingInProgress = setTimeout(() => {\n      state.value.loading.chartRendering = true;\n    }, 1000);\n  } else {\n    if (chartRenderingInProgress) {\n      clearTimeout(chartRenderingInProgress);\n    }\n    state.value.loading.chartRendering = false;\n  }\n}\nconst isScatterplotZoomChanged = ref(false);\nfunction onZoomChange(isZoomChanged: boolean) {\n  isScatterplotZoomChanged.value = isZoomChanged;\n}\nconst graphEventHandlers: Record<ChartType, unknown> = {\n  'dendro': [onTreeNodeClick],\n  'scatterplot-umap': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange,\n    onZoomChange,\n  },\n  'discrete': [onTooltipHintSwitch],\n  'scatterplot': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange,\n  },\n  'histogram': [onTooltipHintSwitch],\n  'heatmap': { onTooltipHintSwitch, onLoadingChange: onLoadingStateChange },\n  'bubble': [onTooltipHintSwitch],\n};\nfunction updateChart(value: { data: PlotDataAndSettings['data']['byColumns']; settings: PlotDataAndSettings['settings'] } | null) {\n  // if dataByColumns exists but columns has no data - show empty chart\n  if (value && Object.values(value.data.values)[0]?.length > 0) {\n    // console.log('value.dataByColumns', toRaw(value.data));\n    // console.log('value.settings', toRaw(value.settings));\n    if (chartRef.value) {\n      chartRef.value.updateSettingsAndData({ ...toRaw(value.data), id: value.data.id + (props.pFrame.ok ? props.pFrame.value : '') }, toRaw(value.settings) as Settings);\n    } else {\n      const htmlNode = document.getElementById('chartSvgContainer');\n      if (htmlNode) {\n        chartRef.value = MiPlots.newPlot(toRaw(value.data), toRaw(value.settings) as Settings, graphEventHandlers[value.settings.type as ChartType]);\n        if (value.settings.type === 'scatterplot-umap') {\n          // set default polygons (from props)\n          chartRef.value.updateChartState('polygon', graphMakerState.value.selectedPolygons ?? []);\n        }\n        chartRef.value.mount(htmlNode);\n      }\n    }\n    // calculated by chart renderer data, tree hierarchy for example\n    chartCalculatedDataRef.value = chartRef.value?.calculatedData ? { ...chartRef.value.calculatedData } : null;\n    chartError.value = chartRef.value?.hasError ?? false;\n    chartErrorInfo.value = chartRef.value?.errorInfo ?? null;\n  } else {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n    chartErrorInfo.value = null;\n  }\n}\n\nwatch(() => graphStatus.value, (v) => {\n  if (v === 'notReady' || v === 'noPframe' || dataStore.value === null) {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n  }\n});\n\nconst chartDataForRender = shallowRef<{ settings: Settings; data: DataByColumns } | null>(null);\nconst chartTruncationWarning = ref<ChartTruncationWarning | null>(null);\n\nfunction applyComposeResult(result: ReturnType<typeof composeChartSettings>) {\n  if (!result) {\n    chartDataForRender.value = null;\n    chartTruncationWarning.value = null;\n    return;\n  }\n  chartDataForRender.value = { settings: result.settings, data: result.data };\n  chartTruncationWarning.value = result.truncationWarning;\n}\n\nwatch([\n  () => state.value.chartData.value,\n], ([chartData]) => {\n  applyComposeResult(composeChartSettings(\n    toRaw(chartData),\n    toRaw(state.value.inputGuide.value),\n    toRaw(state.value.uniqueValuesData.value),\n    toRaw(state.value.filterLabelsInfo.value),\n    toRaw(state.value.reactive),\n    toRaw(state.value.defaultPalette),\n    toRaw(state.value.facetValuesData.value),\n  ));\n});\nwatch([\n  () => state.value.reactive.template,\n  () => state.value.reactive.layersSettings,\n  () => state.value.reactive.axesSettings,\n  () => state.value.reactive.statisticsSettings,\n  () => state.value.reactive.dataBindAes,\n  () => state.value.reactive.chartScale,\n], () => {\n  applyComposeResult(composeChartSettings(\n    toRaw(state.value.chartData.value),\n    toRaw(state.value.inputGuide.value),\n    toRaw(state.value.uniqueValuesData.value),\n    toRaw(state.value.filterLabelsInfo.value),\n    toRaw(state.value.reactive),\n    toRaw(state.value.defaultPalette),\n    toRaw(state.value.facetValuesData.value),\n  ));\n}, { deep: true });\n\nwatch(() => chartDataForRender.value, (chartData) => {\n  updateChart(chartData);\n});\nonMounted(() => {\n  updateChart(null);\n});\nonUnmounted(() => {\n  if (tooltipHintHideTimerRef.value) {\n    clearTimeout(tooltipHintHideTimerRef.value);\n    tooltipHintHideTimerRef.value = null;\n  }\n  chartRef.value?.unmount();\n});\n\nwatchDebounced(() => state.value.reactive.optionsState, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    optionsState: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.usedDefaultOptions, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    usedDefaultOptions: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.statisticsSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    statisticsSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.axesSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    axesSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.layersSettings, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    layersSettings: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\nwatchDebounced(() => state.value.reactive.dataBindAes, (v) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    dataBindAes: copyJSON(v),\n  };\n}, { deep: true, debounce: 1000 });\n\nwatchDebounced([\n  () => state.value.reactive.chartScale,\n  () => state.value.reactive.template,\n  () => state.value.reactive.currentTab,\n], ([zoomState, template, currentTab]) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    zoomState,\n    template,\n    currentTab,\n  };\n}, { debounce: 1000 });\n\nwatch(() => state.value.reactive.tooltipHintWasShown, (v) => {\n  if (v) {\n    graphMakerState.value = { ...graphMakerState.value, tooltipHintWasShown: true };\n  }\n});\n\nwatch(() => graphMakerState.value.currentTab, (v) => {\n  state.value.reactive.currentTab = v === undefined ? 'dataMapping' : v;\n});\n\nwatch(() => graphMakerState.value?.layersSettings?.dendro?.showTable, (v) => {\n  state.value.reactive.layersSettings.dendro.showTable = v ?? false;\n});\n\nfunction onExport() {\n  saveToFile(\n    new Blob([\n      chartRef.value?.export() ?? '',\n    ]),\n    'chart.svg',\n  );\n}\n\nfunction updateGraphTitle(nextTitle: string) {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    title: nextTitle,\n  };\n}\n\nfunction selectTreeNode(id: number | null) {\n  state.value.reactive.dendroSelectedNodeId = id;\n  chartRef.value?.updateChartState('selectedNode', id);\n}\n\nconst slots = useSlots();\n\nconst hasAnnotationsSlot = computed(() => Boolean(slots.annotationsSlot));\nconst hasSettingsSlot = computed(() => Boolean(slots.settingsSlot));\nconst hasLogSlot = computed(() => Boolean(slots.logSlot));\n\n</script>\n\n<template>\n  <div class=\"graph-maker\">\n    <div class=\"graph-maker__main-pane\">\n      <Chart\n        :graph-status=\"graphStatus\" :graphTitle=\"graphMakerState.title\" :chartData=\"chartCalculatedDataRef\"\n        :chart-ref=\"chartRef\" :error-info=\"chartErrorInfo\" :dendroTooltipButton=\"tooltipButton\"\n        :custom-status-text=\"statusText\"\n        :allow-title-editing=\"allowTitleEditing\"\n        :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"\n        @graph-title-update=\"updateGraphTitle\" @dendro-node-select=\"selectTreeNode\"\n        @dendro-tooltip-btn-click=\"(id: string) => $emit('tooltip-btn-click', id)\"\n      >\n        <slot name=\"titleLineSlot\" />\n      </Chart>\n      <GraphStatusScreen v-if=\"isInitialLoading || isRunning\" :graphStatus=\"isRunning ? 'running' : 'loading'\" :top=\"67\" :left=\"12\" :right=\"12\" :bottom=\"12\" :customStatusText=\"statusText\" />\n      <TransitionSlidePanel id=\"graph-settings-modal\">\n        <PanelModal\n          v-if=\"state.reactive.currentTab && !((isInitialLoading || isRunning) && isOwnGraphMakerTab(state.reactive.currentTab))\"\n          @close=\"state.reactive.currentTab = null\"\n        >\n          <component :is=\"currentForm.value\">\n            <slot v-if=\"state.reactive.currentTab === 'annotations'\" name=\"annotationsSlot\" />\n            <slot v-if=\"state.reactive.currentTab === 'settings'\" name=\"settingsSlot\" />\n            <slot v-if=\"state.reactive.currentTab === 'log'\" name=\"logSlot\" />\n          </component>\n        </PanelModal>\n      </TransitionSlidePanel>\n    </div>\n    <VTabs\n      v-model=\"state.reactive.currentTab\" :chart-type=\"state.reactive.chartType\" :graph-status=\"graphStatus\"\n      :allowDeleting=\"allowChartDeleting\" :hasAnnotationsSlot=\"hasAnnotationsSlot\" :hasSettingsSlot=\"hasSettingsSlot\"\n      :hasLogSlot=\"hasLogSlot\" :initialLoading=\"isInitialLoading || isRunning\" @export=\"onExport\"\n      @delete=\"$emit('delete-this-graph')\"\n    />\n    <ChartErrorNotificationAlert v-if=\"chartErrorInfo?.type === 'unknownError'\" :errorInfo=\"chartErrorInfo\" />\n    <ChartTruncationWarningAlert\n      v-if=\"chartTruncationWarning && (chartTruncationWarning.groups || chartTruncationWarning.facets)\"\n      :truncation-warning=\"chartTruncationWarning\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/utils/addFixedOptionsToState.js

@@ -1,14 +1,11 @@
-import { copyJSON as a } from "./copyJSON.js";
-import { loadDefaultSources as l } from "./loadDefaultSources.js";
-async function u(o, r, t) {
-  if (!t || t.length === 0)
-    return o;
-  const s = await l(r, t, null, !1), e = a(o);
-  for (const [n, c] of Object.entries(s))
-    o.components[n] && e.components[n].selectorStates.push(...c);
-  return e;
+import { copyJSON as e } from "./copyJSON.js";
+import { loadDefaultSources as t } from "./loadDefaultSources.js";
+async function n(n, r, i) {
+	if (!i || i.length === 0) return n;
+	let a = await t(r, i, null, !1), o = e(n);
+	for (let [e, t] of Object.entries(a)) n.components[e] && o.components[e].selectorStates.push(...t);
+	return o;
 }
-export {
-  u as addFixedOptionsToState
-};
-//# sourceMappingURL=addFixedOptionsToState.js.map
+export { n as addFixedOptionsToState };
+
+//# sourceMappingURL=addFixedOptionsToState.js.map

package/dist/utils/addFixedOptionsToState.js.map

@@ -1 +1 @@
-{"version":3,"file":"addFixedOptionsToState.js","sources":["../../src/utils/addFixedOptionsToState.ts"],"sourcesContent":["import type { GraphMakerProps } from '../types';\nimport { copyJSON } from './copyJSON';\nimport type { DemoDataStore, InputState, SelectorStateFilter } from '@milaboratories/pf-plots';\nimport { loadDefaultSources } from './loadDefaultSources';\n\n// hidden options that are always in the state but not visible to the user\nexport async function addFixedOptionsToState(\n  state: InputState,\n  dataStore: DemoDataStore,\n  fixedOptions: GraphMakerProps['fixedOptions'],\n): Promise<InputState> {\n  if (!fixedOptions || fixedOptions.length === 0) {\n    return state;\n  }\n  const loadedFixedOptions = await loadDefaultSources(dataStore, fixedOptions, null, false);\n  const res: InputState = copyJSON(state);\n  for (const [inputName, selectorStates] of Object.entries(loadedFixedOptions)) {\n    if (state.components[inputName]) {\n      res.components[inputName].selectorStates.push(...selectorStates as SelectorStateFilter[]);\n    }\n  }\n  return res;\n}\n"],"names":["addFixedOptionsToState","state","dataStore","fixedOptions","loadedFixedOptions","loadDefaultSources","res","copyJSON","inputName","selectorStates"],"mappings":";;AAMA,eAAsBA,EACpBC,GACAC,GACAC,GACqB;AACrB,MAAI,CAACA,KAAgBA,EAAa,WAAW;AAC3C,WAAOF;AAET,QAAMG,IAAqB,MAAMC,EAAmBH,GAAWC,GAAc,MAAM,EAAK,GAClFG,IAAkBC,EAASN,CAAK;AACtC,aAAW,CAACO,GAAWC,CAAc,KAAK,OAAO,QAAQL,CAAkB;AACzE,IAAIH,EAAM,WAAWO,CAAS,KAC5BF,EAAI,WAAWE,CAAS,EAAE,eAAe,KAAK,GAAGC,CAAuC;AAG5F,SAAOH;AACT;"}
+{"version":3,"file":"addFixedOptionsToState.js","names":[],"sources":["../../src/utils/addFixedOptionsToState.ts"],"sourcesContent":["import type { GraphMakerProps } from '../types';\nimport { copyJSON } from './copyJSON';\nimport type { DemoDataStore, InputState, SelectorStateFilter } from '@milaboratories/pf-plots';\nimport { loadDefaultSources } from './loadDefaultSources';\n\n// hidden options that are always in the state but not visible to the user\nexport async function addFixedOptionsToState(\n  state: InputState,\n  dataStore: DemoDataStore,\n  fixedOptions: GraphMakerProps['fixedOptions'],\n): Promise<InputState> {\n  if (!fixedOptions || fixedOptions.length === 0) {\n    return state;\n  }\n  const loadedFixedOptions = await loadDefaultSources(dataStore, fixedOptions, null, false);\n  const res: InputState = copyJSON(state);\n  for (const [inputName, selectorStates] of Object.entries(loadedFixedOptions)) {\n    if (state.components[inputName]) {\n      res.components[inputName].selectorStates.push(...selectorStates as SelectorStateFilter[]);\n    }\n  }\n  return res;\n}\n"],"mappings":";;AAMA,eAAsB,EACpB,GACA,GACA,GACqB;AACrB,KAAI,CAAC,KAAgB,EAAa,WAAW,EAC3C,QAAO;CAET,IAAM,IAAqB,MAAM,EAAmB,GAAW,GAAc,MAAM,GAAM,EACnF,IAAkB,EAAS,EAAM;AACvC,MAAK,IAAM,CAAC,GAAW,MAAmB,OAAO,QAAQ,EAAmB,CAC1E,CAAI,EAAM,WAAW,MACnB,EAAI,WAAW,GAAW,eAAe,KAAK,GAAG,EAAwC;AAG7F,QAAO"}

package/dist/utils/calculateDiscreteGroups.js

@@ -1,13 +1,6 @@
-function i(e, u, c) {
-  var n, o, r, s, l;
-  if (((o = (n = e.components) == null ? void 0 : n.y) == null ? void 0 : o.selectorStates.length) === 0)
-    return [];
-  if (!((s = (r = e.components) == null ? void 0 : r[c]) != null && s.selectorStates.length))
-    return ["single common group"];
-  const g = (l = e.components) == null ? void 0 : l[c].selectorStates[0].selectedSource, t = u[g];
-  return (t == null ? void 0 : t.list) ?? [];
+function e(e, t, n) {
+	return e.components?.y?.selectorStates.length === 0 ? [] : e.components?.[n]?.selectorStates.length ? t[e.components?.[n].selectorStates[0].selectedSource]?.list ?? [] : ["single common group"];
 }
-export {
-  i as calculateDiscreteGroups
-};
-//# sourceMappingURL=calculateDiscreteGroups.js.map
+export { e as calculateDiscreteGroups };
+
+//# sourceMappingURL=calculateDiscreteGroups.js.map

package/dist/utils/calculateDiscreteGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculateDiscreteGroups.js","sources":["../../src/utils/calculateDiscreteGroups.ts"],"sourcesContent":["import type { InputState } from '@milaboratories/pf-plots';\nimport type { UniqueValuesBySourceMap } from '../types';\n\nexport function calculateDiscreteGroups(optionsState: InputState, uniqueValuesInfo: UniqueValuesBySourceMap, field: 'primaryGrouping' | 'secondaryGrouping'): string[] {\n  if (optionsState.components?.y?.selectorStates.length === 0) {\n    return [];\n  }\n  if (!optionsState.components?.[field]?.selectorStates.length) {\n    return ['single common group'];\n  }\n  const idGroupingStr: string = optionsState.components?.[field].selectorStates[0].selectedSource;\n  const entry = uniqueValuesInfo[idGroupingStr];\n  return entry?.list ?? [];\n}\n"],"names":["calculateDiscreteGroups","optionsState","uniqueValuesInfo","field","_a","_b","_c","_d","_e","idGroupingStr","entry"],"mappings":"AAGO,SAASA,EAAwBC,GAA0BC,GAA2CC,GAA0D;AAAhK,MAAAC,GAAAC,GAAAC,GAAAC,GAAAC;AACL,QAAIH,KAAAD,IAAAH,EAAa,eAAb,gBAAAG,EAAyB,MAAzB,gBAAAC,EAA4B,eAAe,YAAW;AACxD,WAAO,CAAA;AAET,MAAI,GAACE,KAAAD,IAAAL,EAAa,eAAb,gBAAAK,EAA0BH,OAA1B,QAAAI,EAAkC,eAAe;AACpD,WAAO,CAAC,qBAAqB;AAE/B,QAAME,KAAwBD,IAAAP,EAAa,eAAb,gBAAAO,EAA0BL,GAAO,eAAe,GAAG,gBAC3EO,IAAQR,EAAiBO,CAAa;AAC5C,UAAOC,KAAA,gBAAAA,EAAO,SAAQ,CAAA;AACxB;"}
+{"version":3,"file":"calculateDiscreteGroups.js","names":[],"sources":["../../src/utils/calculateDiscreteGroups.ts"],"sourcesContent":["import type { InputState } from '@milaboratories/pf-plots';\nimport type { UniqueValuesBySourceMap } from '../types';\n\nexport function calculateDiscreteGroups(optionsState: InputState, uniqueValuesInfo: UniqueValuesBySourceMap, field: 'primaryGrouping' | 'secondaryGrouping'): string[] {\n  if (optionsState.components?.y?.selectorStates.length === 0) {\n    return [];\n  }\n  if (!optionsState.components?.[field]?.selectorStates.length) {\n    return ['single common group'];\n  }\n  const idGroupingStr: string = optionsState.components?.[field].selectorStates[0].selectedSource;\n  const entry = uniqueValuesInfo[idGroupingStr];\n  return entry?.list ?? [];\n}\n"],"mappings":"AAGA,SAAgB,EAAwB,GAA0B,GAA2C,GAA0D;AASrK,QARI,EAAa,YAAY,GAAG,eAAe,WAAW,IACjD,EAAE,GAEN,EAAa,aAAa,IAAQ,eAAe,SAIxC,EADgB,EAAa,aAAa,GAAO,eAAe,GAAG,iBAEnE,QAAQ,EAAE,GAJf,CAAC,sBAAsB"}

package/dist/utils/copyJSON.js

@@ -1,7 +1,6 @@
-function n(r) {
-  return JSON.parse(JSON.stringify(r));
+function e(e) {
+	return JSON.parse(JSON.stringify(e));
 }
-export {
-  n as copyJSON
-};
-//# sourceMappingURL=copyJSON.js.map
+export { e as copyJSON };
+
+//# sourceMappingURL=copyJSON.js.map

package/dist/utils/copyJSON.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyJSON.js","sources":["../../src/utils/copyJSON.ts"],"sourcesContent":["export function copyJSON(obj: unknown) {\n  return JSON.parse(JSON.stringify(obj));\n}\n"],"names":["copyJSON","obj"],"mappings":"AAAO,SAASA,EAASC,GAAc;AACrC,SAAO,KAAK,MAAM,KAAK,UAAUA,CAAG,CAAC;AACvC;"}
+{"version":3,"file":"copyJSON.js","names":[],"sources":["../../src/utils/copyJSON.ts"],"sourcesContent":["export function copyJSON(obj: unknown) {\n  return JSON.parse(JSON.stringify(obj));\n}\n"],"mappings":"AAAA,SAAgB,EAAS,GAAc;AACrC,QAAO,KAAK,MAAM,KAAK,UAAU,EAAI,CAAC"}

package/dist/utils/createChartSettingsForRender/composeBubbleSettings.js

@@ -1,29 +1,39 @@
-import { PALETTE_MAP as B, DEFAULT_BLACK as c } from "../../constantsAesthetic.js";
-import { getAxesDataFromForms as x } from "./getAxesDataFromForms.js";
-const m = 40, A = m / 2 - 2, f = 3;
-function h(o, a, e) {
-  var y;
-  const p = a.template, r = a.layersSettings[p], n = (y = a.dataBindAes[o.valueColor.value]) == null ? void 0 : y.palette;
-  o.aes = {
-    cellStrokeColor: r.strokeColor ?? c,
-    colorsList: B[n ?? e.continuous].colors,
-    maxRadius: A * (a.chartScale / 100),
-    minRadius: f
-  }, o.size = { cellSize: m * (a.chartScale / 100) }, Object.assign(
-    o,
-    x(a.axesSettings, a.chartType)
-  ), o.NAValueAs = r.NAValueAs, r.normalizationDirection && (o.normalization = {
-    method: r.normalizationMethod,
-    direction: r.normalizationDirection
-  }), (r.aggregateByX || r.aggregateByY) && (o.aggregation = {
-    x: r.aggregateByX && o.xGroupBy && o.xGroupBy.length > 0,
-    y: r.aggregateByY && o.yGroupBy && o.yGroupBy.length > 0,
-    method: r.aggregationMethod
-  });
-  const l = a.axesSettings.other.nullValueLabel;
-  return o.xColumn && (o.xColumn = { ...o.xColumn, nullValueLabel: l }), o.yColumn && (o.yColumn = { ...o.yColumn, nullValueLabel: l }), o.xGroupBy && (o.xGroupBy = o.xGroupBy.map((u) => ({ ...u, nullValueLabel: l }))), o.yGroupBy && (o.yGroupBy = o.yGroupBy.map((u) => ({ ...u, nullValueLabel: l }))), o.facetBy && (o.facetBy = o.facetBy.map((u) => ({ ...u, nullValueLabel: l }))), o;
+import { PALETTE_MAP as e } from "../../constantsAesthetic.js";
+import { getAxesDataFromForms as t } from "./getAxesDataFromForms.js";
+var n = 40, r = n / 2 - 2, i = 3;
+function a(a, o, s) {
+	let c = o.template, l = o.layersSettings[c], u = o.dataBindAes[a.valueColor.value]?.palette;
+	a.aes = {
+		cellStrokeColor: l.strokeColor ?? "#110529",
+		colorsList: e[u ?? s.continuous].colors,
+		maxRadius: r * (o.chartScale / 100),
+		minRadius: i
+	}, a.size = { cellSize: n * (o.chartScale / 100) }, Object.assign(a, t(o.axesSettings, o.chartType)), a.NAValueAs = l.NAValueAs, l.normalizationDirection && (a.normalization = {
+		method: l.normalizationMethod,
+		direction: l.normalizationDirection
+	}), (l.aggregateByX || l.aggregateByY) && (a.aggregation = {
+		x: l.aggregateByX && a.xGroupBy && a.xGroupBy.length > 0,
+		y: l.aggregateByY && a.yGroupBy && a.yGroupBy.length > 0,
+		method: l.aggregationMethod
+	});
+	let d = o.axesSettings.other.nullValueLabel;
+	return a.xColumn &&= {
+		...a.xColumn,
+		nullValueLabel: d
+	}, a.yColumn &&= {
+		...a.yColumn,
+		nullValueLabel: d
+	}, a.xGroupBy &&= a.xGroupBy.map((e) => ({
+		...e,
+		nullValueLabel: d
+	})), a.yGroupBy &&= a.yGroupBy.map((e) => ({
+		...e,
+		nullValueLabel: d
+	})), a.facetBy &&= a.facetBy.map((e) => ({
+		...e,
+		nullValueLabel: d
+	})), a;
 }
-export {
-  h as composeBubbleSettings
-};
-//# sourceMappingURL=composeBubbleSettings.js.map
+export { a as composeBubbleSettings };
+
+//# sourceMappingURL=composeBubbleSettings.js.map