@milaboratories/graph-maker 1.1.140 → 1.1.142

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue.js

@@ -0,0 +1,90 @@
+import { defineComponent as C, computed as o, createElementBlock as g, openBlock as A, Fragment as U, createVNode as r, createElementVNode as i, unref as n } from "vue";
+import { useStore as x } from "../../../../store.js";
+import { useDefaultAes as c } from "./utils.js";
+import { DEFAULT_WHITE as B, DEFAULT_BLACK as E } from "../../../../constantsAesthetic.js";
+import y from "../../AesSelector.vue.js";
+import { Slider as b, PlCheckbox as k } from "@platforma-sdk/ui-vue";
+const F = { class: "checkbox-item" }, L = { class: "checkbox-item" }, m = "stackedArea", I = /* @__PURE__ */ C({
+  __name: "StackedArea",
+  setup(O) {
+    const s = x(), t = o(() => s.value.reactive.layersSettings[m]), p = o(
+      () => s.value.reactive.optionsState
+    ), S = o(
+      () => c(t.value.fillColor, p.value, B)
+    ), V = o(
+      () => c(t.value.lineColor, p.value, E)
+    );
+    function d(a, e, l) {
+      e.type === "dataCategorical" ? s.value.reactive.layersSettings[m][l] = {
+        type: e.inputName
+      } : s.value.reactive.layersSettings[m][l] = a, e.type === "dataCategorical" && typeof a != "string" && (s.value.reactive.dataBindAes[e.selectedSource] = a);
+    }
+    const v = o({
+      get: () => t.value.barsOpacity * 100,
+      set: (a) => {
+        t.value.barsOpacity = a / 100;
+      }
+    }), f = o({
+      get: () => t.value.areaOpacity * 100,
+      set: (a) => {
+        t.value.areaOpacity = a / 100;
+      }
+    });
+    return (a, e) => (A(), g(U, null, [
+      r(y, {
+        label: "Fill color",
+        "form-title": "Fill Color Settings",
+        "form-back-title": "Layers",
+        type: "fill",
+        selected: S.value,
+        onAesUpdate: e[0] || (e[0] = (l, u) => d(l, u, "fillColor"))
+      }, null, 8, ["selected"]),
+      r(y, {
+        label: "Stroke color",
+        "form-title": "Stroke Color Settings",
+        "form-back-title": "Layers",
+        type: "stroke",
+        selected: V.value,
+        onAesUpdate: e[1] || (e[1] = (l, u) => d(l, u, "lineColor"))
+      }, null, 8, ["selected"]),
+      r(n(b), {
+        label: "Opacity of bars",
+        min: 0,
+        max: 100,
+        step: 1,
+        breakpoints: !1,
+        measure: "%",
+        modelValue: v.value,
+        "onUpdate:modelValue": e[2] || (e[2] = (l) => v.value = l)
+      }, null, 8, ["modelValue"]),
+      r(n(b), {
+        label: "Opacity of areas",
+        min: 0,
+        max: 100,
+        step: 1,
+        breakpoints: !1,
+        measure: "%",
+        modelValue: f.value,
+        "onUpdate:modelValue": e[3] || (e[3] = (l) => f.value = l)
+      }, null, 8, ["modelValue"]),
+      i("div", F, [
+        r(n(k), {
+          modelValue: t.value.normalize,
+          "onUpdate:modelValue": e[4] || (e[4] = (l) => t.value.normalize = l)
+        }, null, 8, ["modelValue"]),
+        e[6] || (e[6] = i("span", null, "Normalize", -1))
+      ]),
+      i("div", L, [
+        r(n(k), {
+          modelValue: t.value.showBars,
+          "onUpdate:modelValue": e[5] || (e[5] = (l) => t.value.showBars = l)
+        }, null, 8, ["modelValue"]),
+        e[7] || (e[7] = i("span", null, "Show bars", -1))
+      ])
+    ], 64));
+  }
+});
+export {
+  I as default
+};
+//# sourceMappingURL=StackedArea.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedArea.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport { computed } from \"vue\";\nimport type { AesOption } from '../../../../components/AesSettings/types';\nimport type { AestheticMappingCategorical } from '../../../../dataBindAes';\nimport { useDefaultAes } from './utils';\nimport { DiscreteUIState } from \"@milaboratories/pf-plots\";\nimport {\n  DEFAULT_BLACK,\n  DEFAULT_WHITE,\n} from '../../../../constantsAesthetic';\nimport AesSelector from '../../AesSelector.vue';\nimport { PlCheckbox, Slider } from '@platforma-sdk/ui-vue';\n\nconst store = useStore();\nconst layer = \"stackedArea\";\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\nconst optionsState = computed(\n  () => store.value.reactive.optionsState as DiscreteUIState,\n);\n\nconst fillColor = computed(() =>\n  useDefaultAes(settings.value.fillColor, optionsState.value, DEFAULT_WHITE),\n);\nconst lineColor = computed(() =>\n  useDefaultAes(settings.value.lineColor, optionsState.value, DEFAULT_BLACK),\n);\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: \"fillColor\" | \"lineColor\",\n) {\n  if (colorOption.type === \"dataCategorical\") {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: colorOption.inputName,\n    };\n  } else {\n    store.value.reactive.layersSettings[layer][field] = value;\n  }\n  if (colorOption.type === \"dataCategorical\" && typeof value !== \"string\") {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst barOpacity = computed({\n  get: () => settings.value.barsOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.barsOpacity = newValue / 100;\n  }\n});\nconst areaOpacity = computed({\n  get: () => settings.value.areaOpacity * 100,\n  set: (newValue: number) => {\n    settings.value.areaOpacity = newValue / 100;\n  }\n});\n</script>\n\n<template>\n  <aes-selector\n    label=\"Fill color\"\n    form-title=\"Fill Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"fillColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'fillColor')\"\n  />\n  <aes-selector\n    label=\"Stroke color\"\n    form-title=\"Stroke Color Settings\"\n    form-back-title=\"Layers\"\n    type=\"stroke\"\n    :selected=\"lineColor\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'lineColor')\"\n  />\n  <Slider\n      label=\"Opacity of bars\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"barOpacity\"\n  />\n  <Slider\n      label=\"Opacity of areas\"\n      :min=\"0\"\n      :max=\"100\"\n      :step=\"1\"\n      :breakpoints=\"false\"\n      measure=\"%\"\n      v-model=\"areaOpacity\"\n  />\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.normalize\" />\n    <span>Normalize</span>\n  </div>\n  <div class=\"checkbox-item\">\n    <pl-checkbox v-model=\"settings.showBars\" />\n    <span>Show bars</span>\n  </div>\n</template>\n"],"names":["layer","store","useStore","settings","computed","optionsState","fillColor","useDefaultAes","DEFAULT_WHITE","lineColor","DEFAULT_BLACK","onUpdate","value","colorOption","field","barOpacity","newValue","areaOpacity"],"mappings":";;;;;;sEAeMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAS,MAAMH,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC,GACpEK,IAAeD;AAAA,MACnB,MAAMH,EAAM,MAAM,SAAS;AAAA,IAAA,GAGvBK,IAAYF;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOG,CAAa;AAAA,IAAA,GAErEC,IAAYL;AAAA,MAAS,MACzBG,EAAcJ,EAAS,MAAM,WAAWE,EAAa,OAAOK,CAAa;AAAA,IAAA;AAG3E,aAASC,EACPC,GACAC,GACAC,GACA;AACA,MAAID,EAAY,SAAS,oBACvBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAI;AAAA,QAClD,MAAMD,EAAY;AAAA,MAAA,IAGpBZ,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEc,CAAK,IAAIF,GAElDC,EAAY,SAAS,qBAAqB,OAAOD,KAAU,aAC7DX,EAAM,MAAM,SAAS,YAAYY,EAAY,cAAc,IAAID;AAAA,IAEnE;AAEA,UAAMG,IAAaX,EAAS;AAAA,MAC1B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACa,MAAqB;AACzB,QAAAb,EAAS,MAAM,cAAca,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD,GACKC,IAAcb,EAAS;AAAA,MAC3B,KAAK,MAAMD,EAAS,MAAM,cAAc;AAAA,MACxC,KAAK,CAACa,MAAqB;AACzB,QAAAb,EAAS,MAAM,cAAca,IAAW;AAAA,MAC1C;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue2.js

@@ -0,0 +1,5 @@
+import f from "./StackedArea.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=StackedArea.vue2.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/discrete/StackedArea.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedArea.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/GraphMaker/forms/LayersForm/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/forms/LayersForm/index.vue"],"names":[],"mappings":";AAucA,wBAMG"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/forms/LayersForm/index.vue"],"names":[],"mappings":";AA2cA,wBAMG"}

package/dist/GraphMaker/forms/LayersForm/index.vue.js

@@ -1,63 +1,65 @@
 import { defineComponent as L, createElementBlock as _, openBlock as e, createElementVNode as u, createCommentVNode as a, createBlock as o, unref as t, Fragment as l, renderList as p, withCtx as n, resolveDynamicComponent as f, createVNode as d } from "vue";
 import { useStore as b } from "../../store.js";
-import { DISCRETE_TEMPLATES_MAP as A, LAYER_TITLES as c, LAYER_ICONS as s, SCATTERPLOT_TEMPLATES_MAP as T, SCATTERPLOT_UMAP_TEMPLATES_MAP as M, HEATMAP_TEMPLATES_MAP as P } from "../../constantsCommon.js";
+import { DISCRETE_TEMPLATES_MAP as E, LAYER_TITLES as c, LAYER_ICONS as s, SCATTERPLOT_TEMPLATES_MAP as T, SCATTERPLOT_UMAP_TEMPLATES_MAP as M, HEATMAP_TEMPLATES_MAP as P } from "../../constantsCommon.js";
 import m from "../../components/CollapsableBlock.vue.js";
 import R from "./Layer/discrete/Boxplot.vue.js";
-import y from "./Layer/discrete/BinnedDots.vue.js";
-import k from "./Layer/discrete/JitteredDots.vue.js";
+import k from "./Layer/discrete/BinnedDots.vue.js";
+import y from "./Layer/discrete/JitteredDots.vue.js";
 import C from "./Layer/discrete/Violin.vue.js";
 import O from "./Layer/discrete/Bar.vue.js";
 import Y from "./Layer/discrete/StackedBar.vue.js";
-import x from "./Layer/discrete/Line.vue.js";
-import D from "./Layer/discrete/Errorbar.vue.js";
-import F from "./Layer/discrete/Sina.vue.js";
-import I from "./Layer/discrete/Logo.vue.js";
-import B from "./Layer/heatmap/Heatmap.vue.js";
-import N from "./Layer/Dendro.vue.js";
-import H from "./Layer/scatterplot/Scatter.vue.js";
-import V from "./Layer/scatterplot-umap/Scatter.vue.js";
+import x from "./Layer/discrete/StackedArea.vue.js";
+import D from "./Layer/discrete/Line.vue.js";
+import F from "./Layer/discrete/Errorbar.vue.js";
+import I from "./Layer/discrete/Sina.vue.js";
+import B from "./Layer/discrete/Logo.vue.js";
+import N from "./Layer/heatmap/Heatmap.vue.js";
+import H from "./Layer/Dendro.vue.js";
+import V from "./Layer/scatterplot/Scatter.vue.js";
+import j from "./Layer/scatterplot-umap/Scatter.vue.js";
 import S from "./Layer/scatterplot/Curve.vue.js";
-import j from "./Layer/heatmap/HeatmapClustered.vue.js";
-import U from "./Layer/heatmap/HeatmapAnnotations.vue.js";
-import w from "../../icons/HeatmapAnnotation.vue.js";
-import q from "./Layer/histogram/Bins.vue.js";
-import z from "./Layer/Bubble.vue.js";
-const G = {
+import U from "./Layer/heatmap/HeatmapClustered.vue.js";
+import w from "./Layer/heatmap/HeatmapAnnotations.vue.js";
+import q from "../../icons/HeatmapAnnotation.vue.js";
+import z from "./Layer/histogram/Bins.vue.js";
+import G from "./Layer/Bubble.vue.js";
+const J = {
   class: "layers-form",
   id: "layers-form"
-}, J = { class: "layers-list" }, ht = /* @__PURE__ */ L({
+}, K = { class: "layers-list" }, gt = /* @__PURE__ */ L({
   __name: "index",
-  setup(K) {
+  setup(Q) {
     const i = b(), v = {
       box: R,
-      binnedDots: y,
-      jitteredDots: k,
+      binnedDots: k,
+      jitteredDots: y,
       violin: C,
       bar: O,
       stackedBar: Y,
-      line: x,
-      errorbar: D,
-      sina: F,
-      logo: I
-    }, h = {
-      dots: H,
-      curve: S
+      stackedArea: x,
+      line: D,
+      errorbar: F,
+      sina: I,
+      logo: B
     }, $ = {
       dots: V,
       curve: S
+    }, h = {
+      dots: j,
+      curve: S
     }, g = {
-      heatmap: B,
-      heatmapClustered: j
+      heatmap: N,
+      heatmapClustered: U
     };
-    return (Q, E) => (e(), _("div", G, [
-      E[0] || (E[0] = u("div", { class: "layers-title" }, [
+    return (W, A) => (e(), _("div", J, [
+      A[0] || (A[0] = u("div", { class: "layers-title" }, [
         u("h3", null, " Layers ")
       ], -1)),
-      u("div", J, [
-        t(i).reactive.chartType === "discrete" ? (e(!0), _(l, { key: 0 }, p(t(A)[t(i).reactive.template], (r) => (e(), o(m, {
+      u("div", K, [
+        t(i).reactive.chartType === "discrete" ? (e(!0), _(l, { key: 0 }, p(t(E)[t(i).reactive.template], (r) => (e(), o(m, {
           icon: t(s)[r],
           title: t(c)[r],
-          settings: { defaultState: t(A)[t(i).reactive.template].length > 1 ? "close" : "open" }
+          settings: { defaultState: t(E)[t(i).reactive.template].length > 1 ? "close" : "open" }
         }, {
           default: n(() => [
             (e(), o(f(v[r])))
@@ -70,7 +72,7 @@ const G = {
           settings: { defaultState: t(T)[t(i).reactive.template].length > 1 ? "close" : "open" }
         }, {
           default: n(() => [
-            (e(), o(f(h[r])))
+            (e(), o(f($[r])))
           ]),
           _: 2
         }, 1032, ["icon", "title", "settings"]))), 256)) : a("", !0),
@@ -80,7 +82,7 @@ const G = {
           settings: { defaultState: t(T)[t(i).reactive.template].length > 1 ? "close" : "open" }
         }, {
           default: n(() => [
-            (e(), o(f($[r])))
+            (e(), o(f(h[r])))
           ]),
           _: 2
         }, 1032, ["icon", "title", "settings"]))), 256)) : a("", !0),
@@ -96,12 +98,12 @@ const G = {
         }, 1032, ["icon", "title"]))), 256)) : a("", !0),
         t(i).reactive.chartType === "heatmap" ? (e(), o(m, {
           key: 4,
-          icon: w,
+          icon: q,
           title: "Annotations",
           settings: { defaultState: "open" }
         }, {
           default: n(() => [
-            (e(), o(f(U)))
+            (e(), o(f(w)))
           ]),
           _: 1
         })) : a("", !0),
@@ -112,7 +114,7 @@ const G = {
           settings: { defaultState: "open" }
         }, {
           default: n(() => [
-            d(N)
+            d(H)
           ]),
           _: 1
         }, 8, ["icon", "title"])) : a("", !0),
@@ -123,7 +125,7 @@ const G = {
           settings: { defaultState: "open" }
         }, {
           default: n(() => [
-            d(q)
+            d(z)
           ]),
           _: 1
         }, 8, ["icon", "title"])) : a("", !0),
@@ -134,7 +136,7 @@ const G = {
           settings: { defaultState: "open" }
         }, {
           default: n(() => [
-            d(z)
+            d(G)
           ]),
           _: 1
         }, 8, ["icon", "title"])) : a("", !0)
@@ -143,6 +145,6 @@ const G = {
   }
 });
 export {
-  ht as default
+  gt as default
 };
 //# sourceMappingURL=index.vue.js.map

package/dist/GraphMaker/forms/LayersForm/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../src/GraphMaker/forms/LayersForm/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../store';\nimport {\n  DISCRETE_TEMPLATES_MAP,\n  HEATMAP_TEMPLATES_MAP,\n  LAYER_ICONS,\n  LAYER_TITLES,\n  SCATTERPLOT_TEMPLATES_MAP, SCATTERPLOT_UMAP_TEMPLATES_MAP\n} from '../../constantsCommon';\nimport type { Component } from 'vue';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Boxplot from './Layer/discrete/Boxplot.vue';\nimport BinnedDots from './Layer/discrete/BinnedDots.vue';\nimport JitteredDots from './Layer/discrete/JitteredDots.vue';\nimport Violin from './Layer/discrete/Violin.vue';\nimport Bar from './Layer/discrete/Bar.vue';\nimport StackedBar from './Layer/discrete/StackedBar.vue';\nimport Line from './Layer/discrete/Line.vue';\nimport Errorbar from './Layer/discrete/Errorbar.vue';\nimport Sina from './Layer/discrete/Sina.vue';\nimport Logo from './Layer/discrete/Logo.vue';\nimport Heatmap from './Layer/heatmap/Heatmap.vue';\nimport Dendro from './Layer/Dendro.vue';\nimport Scatterplot from './Layer/scatterplot/Scatter.vue';\nimport ScatterplotUmap from './Layer/scatterplot-umap/Scatter.vue';\nimport Curve from './Layer/scatterplot/Curve.vue';\nimport {\n  DiscreteLayer,\n  DiscreteLayersTemplate,\n  HeatmapLayer, HeatmapLayerTemplate,\n  ScatterplotLayer,\n  ScatterplotLayersTemplate\n} from '../../types';\nimport HeatmapClustered from './Layer/heatmap/HeatmapClustered.vue';\nimport HeatmapAnnotations from './Layer/heatmap/HeatmapAnnotations.vue';\nimport HeatmapAnnotationIcon from '../../icons/HeatmapAnnotation.vue';\nimport Bins from './Layer/histogram/Bins.vue';\nimport Bubble from './Layer/Bubble.vue';\n\nconst store = useStore();\nconst DISCRETE_LAYERS_FORMS: Record<DiscreteLayer, Component> = {\n  box: Boxplot,\n  binnedDots: BinnedDots,\n  jitteredDots: JitteredDots,\n  violin: Violin,\n  bar: Bar,\n  stackedBar: StackedBar,\n  line: Line,\n  errorbar: Errorbar,\n  sina: Sina,\n  logo: Logo\n};\nconst SCATTERPLOT_LAYER_FORMS: Record<ScatterplotLayer, Component> = {\n  dots: Scatterplot,\n  curve: Curve\n};\nconst SCATTERPLOT_UMAP_LAYER_FORMS: Record<ScatterplotLayer, Component> = {\n  dots: ScatterplotUmap,\n  curve: Curve\n};\nconst HEATMAP_LAYER_FORMS: Record<HeatmapLayer, Component> = {\n  heatmap: Heatmap,\n  heatmapClustered: HeatmapClustered\n};\n\n</script>\n\n<template>\n  <div class=\"layers-form\" id=\"layers-form\">\n    <div class=\"layers-title\">\n      <h3>\n        Layers\n      </h3>\n    </div>\n    <div class=\"layers-list\">\n      <template v-if=\"store.reactive.chartType === 'discrete'\"\n                v-for=\"layer of DISCRETE_TEMPLATES_MAP[store.reactive.template as DiscreteLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: DISCRETE_TEMPLATES_MAP[store.reactive.template as DiscreteLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"DISCRETE_LAYERS_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'scatterplot'\"\n                v-for=\"layer of SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"SCATTERPLOT_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n      <template v-if=\"store.reactive.chartType === 'scatterplot-umap'\"\n                v-for=\"layer of SCATTERPLOT_UMAP_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"SCATTERPLOT_UMAP_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'heatmap'\"\n                v-for=\"layer of HEATMAP_TEMPLATES_MAP[store.reactive.template as HeatmapLayerTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\" :settings=\"{defaultState: 'open'}\">\n          <component :is=\"HEATMAP_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n      <!-- Not a layer - part of aesthetic mapping for heatmap annotations -->\n      <template v-if=\"store.reactive.chartType === 'heatmap'\">\n        <collapsable-block :icon=\"HeatmapAnnotationIcon\" title=\"Annotations\" :settings=\"{defaultState: 'open'}\">\n          <component :is=\"HeatmapAnnotations\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'dendro'\">\n        <collapsable-block :icon=\"LAYER_ICONS.dendro\" :title=\"LAYER_TITLES.dendro\" :settings=\"{defaultState: 'open'}\">\n          <Dendro />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'histogram'\">\n        <collapsable-block :icon=\"LAYER_ICONS.bins\" :title=\"LAYER_TITLES.bins\" :settings=\"{defaultState: 'open'}\">\n          <Bins />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'bubble'\">\n        <collapsable-block :icon=\"LAYER_ICONS.bubble\" :title=\"LAYER_TITLES.bubble\" :settings=\"{defaultState: 'open'}\">\n          <Bubble />\n        </collapsable-block>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["store","useStore","DISCRETE_LAYERS_FORMS","Boxplot","BinnedDots","JitteredDots","Violin","Bar","StackedBar","Line","Errorbar","Sina","Logo","SCATTERPLOT_LAYER_FORMS","Scatterplot","Curve","SCATTERPLOT_UMAP_LAYER_FORMS","ScatterplotUmap","HEATMAP_LAYER_FORMS","Heatmap","HeatmapClustered"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAMA,IAAQC,EAAA,GACRC,IAA0D;AAAA,MAC9D,KAAKC;AAAAA,MACL,YAAYC;AAAAA,MACZ,cAAcC;AAAAA,MACd,QAAQC;AAAAA,MACR,KAAKC;AAAAA,MACL,YAAYC;AAAAA,MACZ,MAAMC;AAAAA,MACN,UAAUC;AAAAA,MACV,MAAMC;AAAAA,MACN,MAAMC;AAAAA,IAAA,GAEFC,IAA+D;AAAA,MACnE,MAAMC;AAAAA,MACN,OAAOC;AAAAA,IAAA,GAEHC,IAAoE;AAAA,MACxE,MAAMC;AAAAA,MACN,OAAOF;AAAAA,IAAA,GAEHG,IAAuD;AAAA,MAC3D,SAASC;AAAAA,MACT,kBAAkBC;AAAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../src/GraphMaker/forms/LayersForm/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../store';\nimport {\n  DISCRETE_TEMPLATES_MAP,\n  HEATMAP_TEMPLATES_MAP,\n  LAYER_ICONS,\n  LAYER_TITLES,\n  SCATTERPLOT_TEMPLATES_MAP, SCATTERPLOT_UMAP_TEMPLATES_MAP\n} from '../../constantsCommon';\nimport type { Component } from 'vue';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Boxplot from './Layer/discrete/Boxplot.vue';\nimport BinnedDots from './Layer/discrete/BinnedDots.vue';\nimport JitteredDots from './Layer/discrete/JitteredDots.vue';\nimport Violin from './Layer/discrete/Violin.vue';\nimport Bar from './Layer/discrete/Bar.vue';\nimport StackedBar from './Layer/discrete/StackedBar.vue';\nimport StackedArea from './Layer/discrete/StackedArea.vue';\nimport Line from './Layer/discrete/Line.vue';\nimport Errorbar from './Layer/discrete/Errorbar.vue';\nimport Sina from './Layer/discrete/Sina.vue';\nimport Logo from './Layer/discrete/Logo.vue';\nimport Heatmap from './Layer/heatmap/Heatmap.vue';\nimport Dendro from './Layer/Dendro.vue';\nimport Scatterplot from './Layer/scatterplot/Scatter.vue';\nimport ScatterplotUmap from './Layer/scatterplot-umap/Scatter.vue';\nimport Curve from './Layer/scatterplot/Curve.vue';\nimport {\n  DiscreteLayer,\n  DiscreteLayersTemplate,\n  HeatmapLayer, HeatmapLayerTemplate,\n  ScatterplotLayer,\n  ScatterplotLayersTemplate\n} from '../../types';\nimport HeatmapClustered from './Layer/heatmap/HeatmapClustered.vue';\nimport HeatmapAnnotations from './Layer/heatmap/HeatmapAnnotations.vue';\nimport HeatmapAnnotationIcon from '../../icons/HeatmapAnnotation.vue';\nimport Bins from './Layer/histogram/Bins.vue';\nimport Bubble from './Layer/Bubble.vue';\n\nconst store = useStore();\nconst DISCRETE_LAYERS_FORMS: Record<DiscreteLayer, Component> = {\n  box: Boxplot,\n  binnedDots: BinnedDots,\n  jitteredDots: JitteredDots,\n  violin: Violin,\n  bar: Bar,\n  stackedBar: StackedBar,\n  stackedArea: StackedArea,\n  line: Line,\n  errorbar: Errorbar,\n  sina: Sina,\n  logo: Logo\n};\nconst SCATTERPLOT_LAYER_FORMS: Record<ScatterplotLayer, Component> = {\n  dots: Scatterplot,\n  curve: Curve\n};\nconst SCATTERPLOT_UMAP_LAYER_FORMS: Record<ScatterplotLayer, Component> = {\n  dots: ScatterplotUmap,\n  curve: Curve\n};\nconst HEATMAP_LAYER_FORMS: Record<HeatmapLayer, Component> = {\n  heatmap: Heatmap,\n  heatmapClustered: HeatmapClustered\n};\n\n</script>\n\n<template>\n  <div class=\"layers-form\" id=\"layers-form\">\n    <div class=\"layers-title\">\n      <h3>\n        Layers\n      </h3>\n    </div>\n    <div class=\"layers-list\">\n      <template v-if=\"store.reactive.chartType === 'discrete'\"\n                v-for=\"layer of DISCRETE_TEMPLATES_MAP[store.reactive.template as DiscreteLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: DISCRETE_TEMPLATES_MAP[store.reactive.template as DiscreteLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"DISCRETE_LAYERS_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'scatterplot'\"\n                v-for=\"layer of SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"SCATTERPLOT_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n      <template v-if=\"store.reactive.chartType === 'scatterplot-umap'\"\n                v-for=\"layer of SCATTERPLOT_UMAP_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\"\n                           :settings=\"{defaultState: SCATTERPLOT_TEMPLATES_MAP[store.reactive.template as ScatterplotLayersTemplate].length > 1 ? 'close' : 'open'}\">\n          <component :is=\"SCATTERPLOT_UMAP_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'heatmap'\"\n                v-for=\"layer of HEATMAP_TEMPLATES_MAP[store.reactive.template as HeatmapLayerTemplate]\">\n        <collapsable-block :icon=\"LAYER_ICONS[layer]\" :title=\"LAYER_TITLES[layer]\" :settings=\"{defaultState: 'open'}\">\n          <component :is=\"HEATMAP_LAYER_FORMS[layer]\" />\n        </collapsable-block>\n      </template>\n      <!-- Not a layer - part of aesthetic mapping for heatmap annotations -->\n      <template v-if=\"store.reactive.chartType === 'heatmap'\">\n        <collapsable-block :icon=\"HeatmapAnnotationIcon\" title=\"Annotations\" :settings=\"{defaultState: 'open'}\">\n          <component :is=\"HeatmapAnnotations\" />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'dendro'\">\n        <collapsable-block :icon=\"LAYER_ICONS.dendro\" :title=\"LAYER_TITLES.dendro\" :settings=\"{defaultState: 'open'}\">\n          <Dendro />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'histogram'\">\n        <collapsable-block :icon=\"LAYER_ICONS.bins\" :title=\"LAYER_TITLES.bins\" :settings=\"{defaultState: 'open'}\">\n          <Bins />\n        </collapsable-block>\n      </template>\n\n      <template v-if=\"store.reactive.chartType === 'bubble'\">\n        <collapsable-block :icon=\"LAYER_ICONS.bubble\" :title=\"LAYER_TITLES.bubble\" :settings=\"{defaultState: 'open'}\">\n          <Bubble />\n        </collapsable-block>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["store","useStore","DISCRETE_LAYERS_FORMS","Boxplot","BinnedDots","JitteredDots","Violin","Bar","StackedBar","StackedArea","Line","Errorbar","Sina","Logo","SCATTERPLOT_LAYER_FORMS","Scatterplot","Curve","SCATTERPLOT_UMAP_LAYER_FORMS","ScatterplotUmap","HEATMAP_LAYER_FORMS","Heatmap","HeatmapClustered"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,UAAMA,IAAQC,EAAA,GACRC,IAA0D;AAAA,MAC9D,KAAKC;AAAAA,MACL,YAAYC;AAAAA,MACZ,cAAcC;AAAAA,MACd,QAAQC;AAAAA,MACR,KAAKC;AAAAA,MACL,YAAYC;AAAAA,MACZ,aAAaC;AAAAA,MACb,MAAMC;AAAAA,MACN,UAAUC;AAAAA,MACV,MAAMC;AAAAA,MACN,MAAMC;AAAAA,IAAA,GAEFC,IAA+D;AAAA,MACnE,MAAMC;AAAAA,MACN,OAAOC;AAAAA,IAAA,GAEHC,IAAoE;AAAA,MACxE,MAAMC;AAAAA,MACN,OAAOF;AAAAA,IAAA,GAEHG,IAAuD;AAAA,MAC3D,SAASC;AAAAA,MACT,kBAAkBC;AAAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/GraphMaker/index.vue"],"names":[],"mappings":"AA8ZA,OAAO,KAAK,EAAqC,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIhG,OAAO,kBAAkB,CAAC;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,SAAS,CAAC;AAgF5D,iBAAS,KAAK,SAcb;AAED,iBAAS,aAAa,SASrB;AAgQD,iBAAS,cAAc;WAsKT,OAAO,IAA6B;;+BAZf,GAAG;8BACH,GAAG;yBACR,GAAG;;;;EAehC;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;gBAhNT,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;IAnV5B;;;;OAIG;;IAEH;;OAEG;;;;;;;;gBA0UO,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;;;;;6FA2N5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/GraphMaker/index.vue"],"names":[],"mappings":"AA6ZA,OAAO,KAAK,EAAqC,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIhG,OAAO,kBAAkB,CAAC;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,SAAS,CAAC;AA+E5D,iBAAS,KAAK,SAcb;AAED,iBAAS,aAAa,SASrB;AAgQD,iBAAS,cAAc;WAsKT,OAAO,IAA6B;;+BAZf,GAAG;8BACH,GAAG;yBACR,GAAG;;;;EAehC;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;gBAhNT,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;IAnV5B;;;;OAIG;;IAEH;;OAEG;;;;;;;;gBA0UO,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;gBADlB,eAAe;gBACb,gBAAgB;;;;;;6FA2N5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/GraphMaker/index.vue.js

@@ -2,23 +2,24 @@
 .slide-panel-enter-active{transition:transform .3s ease-out}.slide-panel-leave-active{transition:transform .3s ease-in-out}.slide-panel-enter-from{transform:translate(200%);opacity:0}.slide-panel-leave-to{transform:translate(200%);opacity:1}`)),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 import { defineComponent as le, mergeModels as _, useModel as j, ref as f, watch as s, toRaw as n, computed as g, shallowRef as E, onMounted as ie, onUnmounted as oe, useSlots as ne, createElementBlock as re, openBlock as h, createElementVNode as ue, createVNode as U, createBlock as D, createCommentVNode as S, withCtx as T, renderSlot as B, unref as u, resolveDynamicComponent as se } from "vue";
 import { MiPlots as ce } from "../node_modules/@milaboratories/miplots4/dist/MiPlots.js";
-import { DemoDataStore as de, getInitialStateByType as ve } from "../node_modules/@milaboratories/pf-plots/dist/index.js";
-import pe from "../node_modules/canonicalize/lib/canonicalize.js";
+import { getInitialStateByType as de } from "../node_modules/@milaboratories/pf-plots/dist/index.js";
+import ve from "../node_modules/canonicalize/lib/canonicalize.js";
 
-import me from "./components/Chart.vue.js";
-import fe from "./components/Loading.vue.js";
-import ge from "./components/PanelModal.vue.js";
-import he from "./components/SettingsTabs/index.vue.js";
-import Se from "./components/TransitionSlidePanel.vue.js";
+import pe from "./components/Chart.vue.js";
+import me from "./components/Loading.vue.js";
+import fe from "./components/PanelModal.vue.js";
+import ge from "./components/SettingsTabs/index.vue.js";
+import he from "./components/TransitionSlidePanel.vue.js";
 
-import { useSettingsForm as ye } from "./forms/index.js";
-import { provideStore as be, createReactiveState as V } from "./store.js";
+import { useSettingsForm as Se } from "./forms/index.js";
+import { provideStore as ye, createReactiveState as V } from "./store.js";
 import "./constantsAesthetic.js";
 import { composeChartSettings as A } from "./utils/createChartSettingsForRender/composeChartSettings.js";
-import { saveToFile as De } from "./utils/saveToFile.js";
+import { saveToFile as be } from "./utils/saveToFile.js";
 import { copyJSON as d } from "./utils/copyJSON.js";
+import { DemoDataStore as De } from "../node_modules/@milaboratories/pf-plots/dist/demoStore.js";
 import { debouncedWatch as v } from "../node_modules/@vueuse/shared/index.js";
-const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, Ve = /* @__PURE__ */ le({
+const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, Ae = /* @__PURE__ */ le({
   __name: "index",
   props: /* @__PURE__ */ _({
     pFrame: {},
@@ -40,7 +41,6 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
   }),
   emits: /* @__PURE__ */ _(["delete-this-graph", "tooltip-btn-click"], ["update:modelValue", "update:selection"]),
   setup(C, { expose: q, emit: Oe }) {
-    console.log("error!!!");
     const l = j(C, "modelValue"), G = j(C, "selection"), o = C;
     q({
       /**
@@ -62,7 +62,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
       const a = "platforma" in window ? (i = window.platforma) == null ? void 0 : i.pFrameDriver : o.driver;
       if (!a)
         throw new Error("PFrame driver is missing");
-      k.value = new de(
+      k.value = new De(
         e,
         a,
         o.labelsModifier
@@ -72,7 +72,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
     s(() => o.fixedOptions, (e, a) => {
       (e && a && JSON.stringify(e) !== JSON.stringify(a) || e && !a || a && !e) && (I.value = e);
     }, { deep: !0 });
-    const y = f(o.defaultOptions), t = be(
+    const y = f(o.defaultOptions), t = ye(
       n(l.value),
       k,
       o.chartType,
@@ -104,9 +104,9 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
       }), y.value = o.defaultOptions ? [...o.defaultOptions] : [];
     }
     const x = g(() => t.value.reactive.dataStateKey);
-    s(() => pe(o.dataStateKey), (e) => {
+    s(() => ve(o.dataStateKey), (e) => {
       if ((e !== void 0 || x.value !== void 0) && x.value !== e) {
-        l.value.optionsState = d(ve(o.chartType));
+        l.value.optionsState = d(de(o.chartType));
         const a = V(n(l.value), o.chartType);
         Object.assign(t.value.reactive, a), Object.assign(t.value.loading, {
           initialInputGuide: !0,
@@ -118,7 +118,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
       }
       t.value.reactive.dataStateKey = e;
     }, { deep: !0, immediate: !0 });
-    const z = g(() => ye(t.value.reactive.currentTab)), r = E(null), N = f(null), L = f(!1), $ = g(() => {
+    const z = g(() => Se(t.value.reactive.currentTab)), r = E(null), N = f(null), L = f(!1), $ = g(() => {
       var i;
       const e = t.value.inputGuide.value, a = t.value.chartData.value;
       return e.consistent ? e.ready ? a && ((i = Object.values(a.data.byColumns.values)[0]) == null ? void 0 : i.length) === 0 ? "empty" : L.value ? "error" : "ready" : "notReady" : "inconsistent";
@@ -264,7 +264,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
     });
     function X() {
       var e;
-      De(
+      be(
         new Blob([
           ((e = r.value) == null ? void 0 : e.export()) ?? ""
         ]),
@@ -284,7 +284,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
     const K = ne(), ee = g(() => !!K.settingsSlot), te = g(() => !!K.logSlot);
     return (e, a) => (h(), re("div", Te, [
       ue("div", Ce, [
-        U(me, {
+        U(pe, {
           "graph-status": $.value,
           graphTitle: l.value.title,
           chartData: N.value,
@@ -299,19 +299,19 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
           ]),
           _: 3
         }, 8, ["graph-status", "graphTitle", "chartData", "chart-ref", "dendroTooltipButton"]),
-        u(t).loading.initialInputGuide ? (h(), D(fe, {
+        u(t).loading.initialInputGuide ? (h(), D(me, {
           key: 0,
           top: 67,
           left: 12,
           right: 12,
           bottom: 12
         })) : S("", !0),
-        u(t).loading.initialInputGuide ? S("", !0) : (h(), D(Se, {
+        u(t).loading.initialInputGuide ? S("", !0) : (h(), D(he, {
           key: 1,
           id: "graph-settings-modal"
         }, {
           default: T(() => [
-            u(t).reactive.currentTab ? (h(), D(ge, {
+            u(t).reactive.currentTab ? (h(), D(fe, {
               key: 0,
               onClose: a[1] || (a[1] = (i) => u(t).reactive.currentTab = null)
             }, {
@@ -330,7 +330,7 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
           _: 3
         }))
       ]),
-      U(he, {
+      U(ge, {
         "chart-type": u(t).reactive.chartType,
         "graph-status": $.value,
         allowDeleting: e.allowChartDeleting,
@@ -346,6 +346,6 @@ const Te = { class: "graph-maker" }, Ce = { class: "graph-maker__main-pane" }, V
   }
 });
 export {
-  Ve as default
+  Ae as default
 };
 //# sourceMappingURL=index.vue.js.map

package/dist/GraphMaker/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../src/GraphMaker/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ChartInterface,\n  DataByColumns,\n  LassoControlsState,\n  MiPlots,\n  Settings\n} from '@milaboratories/miplots4';\nimport {\n  ChartType,\n  DemoDataStore, getInitialStateByType,\n  PlotDataAndSettings\n} from '@milaboratories/pf-plots';\nimport type { AxisSpec, AxisValue, PFrameDriver, PlSelectionModel } from '@platforma-sdk/model';\nimport { watchDebounced } from '@vueuse/core';\nimport canonicalize from 'canonicalize';\nimport { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, useSlots, watch } from 'vue';\nimport './assets/ui.scss';\nimport Chart from './components/Chart.vue';\nimport Loading from './components/Loading.vue';\nimport PanelModal from './components/PanelModal.vue';\nimport VTabs from './components/SettingsTabs/index.vue';\nimport TransitionSlidePanel from './components/TransitionSlidePanel.vue';\nimport { useSettingsForm } from './forms';\nimport { createReactiveState, provideStore } from './store';\nimport type { GraphMakerState, GraphStatus } from './types';\nimport { DendroNodeInfo, GraphMakerProps } from './types';\nimport { composeChartSettings, saveToFile } from './utils';\nimport { copyJSON } from './utils/copyJSON';\n\nconsole.log('error!!!')\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   Besides, after reset default-options will be applied again. You can use reset to apply new default-options.\n   */\n  reset,\n  /**\n   Apply new defaults without resetting all the state\n   */\n  resetDefaults\n});\n\nconst dataStore = ref<DemoDataStore | null>(null);\n\nwatch(() => props.pFrame, (pframeValue) => {\n  if (!pframeValue) {\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    pframeValue,\n    driver,\n    props.labelsModifier\n  );\n}, { immediate: true });\n\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);\n\nconst state = provideStore(\n  toRaw(graphMakerState.value),\n  dataStore,\n  props.chartType,\n  defaultOptions,\n  fixedOptions,\n  props.dataColumnPredicate,\n  props.readonlyInputs\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\nfunction resetDefaults() {\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 ? [...props.defaultOptions] as typeof props.defaultOptions : [];\n}\n\nconst prevDataKey = computed(() => state.value.reactive.dataStateKey);\nwatch(() => canonicalize(props.dataStateKey), (keyValue) => {\n  if ((keyValue !== undefined || prevDataKey.value !== undefined) && prevDataKey.value !== keyValue) {\n    graphMakerState.value.optionsState = copyJSON(getInitialStateByType(props.chartType));\n    const nextReactiveState = createReactiveState(toRaw(graphMakerState.value), props.chartType);\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 ? [...props.defaultOptions] as typeof props.defaultOptions : []; // to trigger watch on defaults\n  }\n  state.value.reactive.dataStateKey = keyValue;\n}, {deep: true, immediate: true});\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);\n\nconst graphStatus = computed<GraphStatus>(() => {\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 'notReady';\n  }\n  if (chartData && Object.values(chartData.data.byColumns.values)[0]?.length === 0) {\n    return 'empty';\n  }\n  if (chartError.value) {\n    return 'error';\n  }\n  return 'ready';\n});\nfunction onTreeNodeClick(d: DendroNodeInfo) {\n  state.value.reactive.dendroSelectedNodeId = d?.info[0]?.id as number;\n  state.value.reactive.dendroInfoByClick = d;\n}\n\nfunction onTooltipHintSwitch(v:boolean) {\n  state.value.reactive.showTooltipHint = v;\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 AxisValue))\n  };\n}\n\nfunction onLassoStateChange (v:LassoControlsState) {\n  state.value.reactive.lassoControlsState = v;\n}\nconst graphEventHandlers:Record<ChartType, unknown> = {\n  dendro: [onTreeNodeClick],\n  'scatterplot-umap': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange\n  },\n  discrete: [onTooltipHintSwitch],\n  scatterplot: {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange\n  },\n  histogram: [onTooltipHintSwitch],\n  heatmap: [onTooltipHintSwitch],\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), 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  } else {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n  }\n}\n\nconst chartDataForRender = shallowRef<{settings:Settings, data:DataByColumns} | null>(null);\nwatch([\n  () => state.value.chartData.value\n], ([chartData]) => {\n  chartDataForRender.value = 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  );\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  chartDataForRender.value = 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  );\n}, {deep: true});\n\nwatch(() => chartDataForRender.value, (chartData) => {\n  updateChart(chartData);\n});\nonMounted(() => {\n  updateChart(null);\n});\nonUnmounted(() => {\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.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.dataStateKey, (dataStateKey) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    dataStateKey\n  }\n}, {immediate: true});\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 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\"\n        :graphTitle=\"graphMakerState.title\"\n        :chartData=\"chartCalculatedDataRef\"\n        :chart-ref=\"chartRef\"\n        :dendroTooltipButton=\"tooltipButton\"\n        @graph-title-update=\"updateGraphTitle\"\n        @dendro-node-select=\"selectTreeNode\"\n        @dendro-tooltip-btn-click=\"(id:string) => $emit('tooltip-btn-click', id)\"\n      >\n        <slot name=\"titleLineSlot\"></slot>\n      </chart>\n      <loading v-if=\"state.loading.initialInputGuide\" :top=\"67\" :left=\"12\" :right=\"12\" :bottom=\"12\" />\n      <TransitionSlidePanel id=\"graph-settings-modal\" v-if=\"!state.loading.initialInputGuide\">\n        <panel-modal v-if=\"state.reactive.currentTab\" @close=\"state.reactive.currentTab = null\">\n          <component :is=\"currentForm.value\">\n            <slot v-if=\"state.reactive.currentTab === 'settings'\" name=\"settingsSlot\"></slot> \n            <slot v-if=\"state.reactive.currentTab === 'log'\" name=\"logSlot\"></slot> \n          </component>\n        </panel-modal>\n      </TransitionSlidePanel>\n    </div>\n    <v-tabs\n      :chart-type=\"state.reactive.chartType\"\n      :graph-status=\"graphStatus\"\n      :allowDeleting=\"allowChartDeleting\"\n      :hasSettingsSlot=\"hasSettingsSlot\"\n      :hasLogSlot=\"hasLogSlot\"\n      :initialLoading=\"state.loading.initialInputGuide\"\n      v-model=\"state.reactive.currentTab\"\n      @export=\"onExport\"\n      @delete=\"$emit('delete-this-graph')\"\n    />\n  </div>\n</template>\n"],"names":["graphMakerState","_useModel","selectionState","__props","props","__expose","reset","resetDefaults","dataStore","ref","watch","pframeValue","driver","_a","DemoDataStore","fixedOptions","value","oldValue","defaultOptions","state","provideStore","toRaw","nextReactiveState","createReactiveState","prevDataKey","computed","canonicalize","keyValue","copyJSON","getInitialStateByType","currentForm","useSettingsForm","chartRef","shallowRef","chartCalculatedDataRef","chartError","graphStatus","inputGuide","chartData","onTreeNodeClick","d","onTooltipHintSwitch","v","onLassoPolygonUpdate","dotIndexes","polygons","axesData","_b","axisKeys","axisKey","idx","onLassoStateChange","graphEventHandlers","updateChart","htmlNode","MiPlots","_c","_d","chartDataForRender","composeChartSettings","onMounted","onUnmounted","watchDebounced","zoomState","template","currentTab","dataStateKey","onExport","saveToFile","updateGraphTitle","nextTitle","selectTreeNode","id","slots","useSlots","hasSettingsSlot","hasLogSlot"],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../src/GraphMaker/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ChartInterface,\n  DataByColumns,\n  LassoControlsState,\n  MiPlots,\n  Settings\n} from '@milaboratories/miplots4';\nimport {\n  ChartType,\n  DemoDataStore, getInitialStateByType,\n  PlotDataAndSettings\n} from '@milaboratories/pf-plots';\nimport type { AxisSpec, AxisValue, PFrameDriver, PlSelectionModel } from '@platforma-sdk/model';\nimport { watchDebounced } from '@vueuse/core';\nimport canonicalize from 'canonicalize';\nimport { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, useSlots, watch } from 'vue';\nimport './assets/ui.scss';\nimport Chart from './components/Chart.vue';\nimport Loading from './components/Loading.vue';\nimport PanelModal from './components/PanelModal.vue';\nimport VTabs from './components/SettingsTabs/index.vue';\nimport TransitionSlidePanel from './components/TransitionSlidePanel.vue';\nimport { useSettingsForm } from './forms';\nimport { createReactiveState, provideStore } from './store';\nimport type { GraphMakerState, GraphStatus } from './types';\nimport { DendroNodeInfo, GraphMakerProps } from './types';\nimport { composeChartSettings, saveToFile } from './utils';\nimport { copyJSON } from './utils/copyJSON';\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   Besides, after reset default-options will be applied again. You can use reset to apply new default-options.\n   */\n  reset,\n  /**\n   Apply new defaults without resetting all the state\n   */\n  resetDefaults\n});\n\nconst dataStore = ref<DemoDataStore | null>(null);\n\nwatch(() => props.pFrame, (pframeValue) => {\n  if (!pframeValue) {\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    pframeValue,\n    driver,\n    props.labelsModifier\n  );\n}, { immediate: true });\n\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);\n\nconst state = provideStore(\n  toRaw(graphMakerState.value),\n  dataStore,\n  props.chartType,\n  defaultOptions,\n  fixedOptions,\n  props.dataColumnPredicate,\n  props.readonlyInputs\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\nfunction resetDefaults() {\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 ? [...props.defaultOptions] as typeof props.defaultOptions : [];\n}\n\nconst prevDataKey = computed(() => state.value.reactive.dataStateKey);\nwatch(() => canonicalize(props.dataStateKey), (keyValue) => {\n  if ((keyValue !== undefined || prevDataKey.value !== undefined) && prevDataKey.value !== keyValue) {\n    graphMakerState.value.optionsState = copyJSON(getInitialStateByType(props.chartType));\n    const nextReactiveState = createReactiveState(toRaw(graphMakerState.value), props.chartType);\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 ? [...props.defaultOptions] as typeof props.defaultOptions : []; // to trigger watch on defaults\n  }\n  state.value.reactive.dataStateKey = keyValue;\n}, {deep: true, immediate: true});\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);\n\nconst graphStatus = computed<GraphStatus>(() => {\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 'notReady';\n  }\n  if (chartData && Object.values(chartData.data.byColumns.values)[0]?.length === 0) {\n    return 'empty';\n  }\n  if (chartError.value) {\n    return 'error';\n  }\n  return 'ready';\n});\nfunction onTreeNodeClick(d: DendroNodeInfo) {\n  state.value.reactive.dendroSelectedNodeId = d?.info[0]?.id as number;\n  state.value.reactive.dendroInfoByClick = d;\n}\n\nfunction onTooltipHintSwitch(v:boolean) {\n  state.value.reactive.showTooltipHint = v;\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 AxisValue))\n  };\n}\n\nfunction onLassoStateChange (v:LassoControlsState) {\n  state.value.reactive.lassoControlsState = v;\n}\nconst graphEventHandlers:Record<ChartType, unknown> = {\n  dendro: [onTreeNodeClick],\n  'scatterplot-umap': {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange\n  },\n  discrete: [onTooltipHintSwitch],\n  scatterplot: {\n    onPolygonUpdate: onLassoPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate: onLassoStateChange\n  },\n  histogram: [onTooltipHintSwitch],\n  heatmap: [onTooltipHintSwitch],\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), 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  } else {\n    chartRef.value?.unmount();\n    chartRef.value = null;\n  }\n}\n\nconst chartDataForRender = shallowRef<{settings:Settings, data:DataByColumns} | null>(null);\nwatch([\n  () => state.value.chartData.value\n], ([chartData]) => {\n  chartDataForRender.value = 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  );\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  chartDataForRender.value = 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  );\n}, {deep: true});\n\nwatch(() => chartDataForRender.value, (chartData) => {\n  updateChart(chartData);\n});\nonMounted(() => {\n  updateChart(null);\n});\nonUnmounted(() => {\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.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.dataStateKey, (dataStateKey) => {\n  graphMakerState.value = {\n    ...graphMakerState.value,\n    dataStateKey\n  }\n}, {immediate: true});\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 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\"\n        :graphTitle=\"graphMakerState.title\"\n        :chartData=\"chartCalculatedDataRef\"\n        :chart-ref=\"chartRef\"\n        :dendroTooltipButton=\"tooltipButton\"\n        @graph-title-update=\"updateGraphTitle\"\n        @dendro-node-select=\"selectTreeNode\"\n        @dendro-tooltip-btn-click=\"(id:string) => $emit('tooltip-btn-click', id)\"\n      >\n        <slot name=\"titleLineSlot\"></slot>\n      </chart>\n      <loading v-if=\"state.loading.initialInputGuide\" :top=\"67\" :left=\"12\" :right=\"12\" :bottom=\"12\" />\n      <TransitionSlidePanel id=\"graph-settings-modal\" v-if=\"!state.loading.initialInputGuide\">\n        <panel-modal v-if=\"state.reactive.currentTab\" @close=\"state.reactive.currentTab = null\">\n          <component :is=\"currentForm.value\">\n            <slot v-if=\"state.reactive.currentTab === 'settings'\" name=\"settingsSlot\"></slot> \n            <slot v-if=\"state.reactive.currentTab === 'log'\" name=\"logSlot\"></slot> \n          </component>\n        </panel-modal>\n      </TransitionSlidePanel>\n    </div>\n    <v-tabs\n      :chart-type=\"state.reactive.chartType\"\n      :graph-status=\"graphStatus\"\n      :allowDeleting=\"allowChartDeleting\"\n      :hasSettingsSlot=\"hasSettingsSlot\"\n      :hasLogSlot=\"hasLogSlot\"\n      :initialLoading=\"state.loading.initialInputGuide\"\n      v-model=\"state.reactive.currentTab\"\n      @export=\"onExport\"\n      @delete=\"$emit('delete-this-graph')\"\n    />\n  </div>\n</template>\n"],"names":["graphMakerState","_useModel","selectionState","__props","props","__expose","reset","resetDefaults","dataStore","ref","watch","pframeValue","driver","_a","DemoDataStore","fixedOptions","value","oldValue","defaultOptions","state","provideStore","toRaw","nextReactiveState","createReactiveState","prevDataKey","computed","canonicalize","keyValue","copyJSON","getInitialStateByType","currentForm","useSettingsForm","chartRef","shallowRef","chartCalculatedDataRef","chartError","graphStatus","inputGuide","chartData","onTreeNodeClick","d","onTooltipHintSwitch","v","onLassoPolygonUpdate","dotIndexes","polygons","axesData","_b","axisKeys","axisKey","idx","onLassoStateChange","graphEventHandlers","updateChart","htmlNode","MiPlots","_c","_d","chartDataForRender","composeChartSettings","onMounted","onUnmounted","watchDebounced","zoomState","template","currentTab","dataStateKey","onExport","saveToFile","updateGraphTitle","nextTitle","selectTreeNode","id","slots","useSlots","hasSettingsSlot","hasLogSlot"],"mappings":"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"}