@milaboratories/graph-maker 1.2.1 → 1.2.2

package/dist/index.vue.js

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