@milaboratories/graph-maker 1.2.0 → 1.2.2

package/dist/index.vue.js

@@ -1,23 +1,24 @@
-import { defineComponent as ie, mergeModels as q, useModel as H, ref as p, watch as c, toRaw as u, computed as m, shallowRef as J, onMounted as se, onUnmounted as ce, useSlots as de, createElementBlock as ve, openBlock as D, createElementVNode as pe, createVNode as N, createBlock as F, createCommentVNode as S, withCtx as O, renderSlot as P, unref as s, resolveDynamicComponent as me } from "vue";
-import { MiPlots as ge } from "@milaboratories/miplots4";
-import { DemoDataStore as fe } 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 he from "./components/Chart.vue.js";
-import Se from "./components/PanelModal.vue.js";
-import ye 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 Te from "./components/ChartErrorNotificationAlert.vue.js";
-import { useSettingsForm as Ce, isOwnGraphMakerTab as De } from "./forms/index.js";
-import { provideStore as we, createReactiveState as ke } from "./store.js";
-import { copyJSON as y } from "./utils/copyJSON.js";
-import xe from "./components/GraphStatusScreen.vue.js";
-import { composeChartSettings as K } from "./utils/createChartSettingsForRender/composeChartSettings.js";
-import { saveToFile as Fe } from "./utils/saveToFile.js";
-const Oe = { class: "graph-maker" }, Pe = { class: "graph-maker__main-pane" }, We = /* @__PURE__ */ ie({
+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__ */ q({
+  props: /* @__PURE__ */ J({
     pFrame: {},
     chartType: {},
     defaultOptions: {},
@@ -38,53 +39,53 @@ const Oe = { class: "graph-maker" }, Pe = { class: "graph-maker__main-pane" }, W
     selection: {},
     selectionModifiers: {}
   }),
-  emits: /* @__PURE__ */ q(["delete-this-graph", "tooltip-btn-click"], ["update:modelValue", "update:selection"]),
-  setup(d, { expose: W, emit: Be }) {
-    const l = H(d, "modelValue"), R = H(d, "selection"), n = d;
-    W({
+  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: z
+      reset: Y
     });
-    const w = p(null);
-    c(() => n.pFrame, (e) => {
+    const F = v(null);
+    s(() => n.pFrame, (e) => {
       var o;
       if (!e.ok || !e.value) {
-        w.value = null;
+        F.value = null;
         return;
       }
       const a = "platforma" in window ? (o = window.platforma) == null ? void 0 : o.pFrameDriver : n.driver;
       if (!a)
         throw new Error("PFrame driver is missing");
-      w.value = new fe(
+      F.value = new ye(
         e.value,
         a,
         n.labelsModifier
       );
     }, { immediate: !0, deep: !0 });
-    const $ = p(n.fixedOptions ?? []);
-    c(() => n.fixedOptions, (e, a) => {
-      (e && a && JSON.stringify(e) !== JSON.stringify(a) || e && !a || a && !e) && ($.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 k = p(n.defaultOptions);
-    c(() => n.defaultOptions, (e) => {
-      k.value = e;
+    const O = v(n.defaultOptions);
+    s(() => n.defaultOptions, (e) => {
+      O.value = e;
     }, { deep: !0 });
-    const t = we(
+    const t = Oe(
       u(l.value),
-      w,
+      F,
       n.chartType,
-      k,
-      $,
+      O,
+      M,
       n.dataColumnPredicate,
       n.metaColumnPredicate,
       n.readonlyInputs,
       n.defaultPalette
     );
-    function z() {
-      const e = ke(
+    function Y() {
+      const e = Pe(
         u(l.value),
         n.chartType
       );
@@ -94,108 +95,124 @@ const Oe = { class: "graph-maker" }, Pe = { class: "graph-maker__main-pane" }, W
         initialDefaults: !0,
         inputGuide: !1,
         chartData: !1
-      }), k.value = n.defaultOptions;
+      }), O.value = n.defaultOptions;
     }
-    const Q = m(() => Ce(t.value.reactive.currentTab)), r = J(null), M = p(null), A = p(!1), f = p(null), b = m(
+    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
-    ), B = m(
-      () => t.value.loading.initialInputGuide && x.value === "loading"
-    ), x = m((e) => {
-      var i, v;
-      if (b.value)
+    ), I = f(
+      () => t.value.loading.initialInputGuide && P.value === "loading"
+    ), P = f((e) => {
+      var r, m;
+      if (C.value)
         return "running";
       if (n.pFrame.ok && n.pFrame.stable && !n.pFrame.value)
         return "noPframe";
       if (!n.pFrame.ok)
         return "noPframeWithError";
       const a = t.value.inputGuide.value, o = t.value.chartData.value;
-      return a.consistent ? a.ready ? o && ((i = Object.values(o.data.byColumns.values)[0]) == null ? void 0 : i.length) === 0 ? "empty" : A.value ? ((v = f.value) == null ? void 0 : v.type) === "unknownError" ? "unknownError" : "knownError" : t.value.loading.initialCharts || e !== "ready" && t.value.loading.chartData || t.value.loading.chartRendering || r.value === null && (t.value.loading.inputGuide || t.value.loading.chartData) ? "loading" : "ready" : k.value === null || t.value.loading.defaults || t.value.loading.initialInputGuide ? "loading" : "notReady" : "inconsistent";
+      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 X(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;
     }
-    function h(e) {
-      t.value.reactive.showTooltipHint = e;
+    const p = v(null);
+    function y(e) {
+      const a = t.value.reactive;
+      if (e) {
+        if (a.tooltipHintWasShown) return;
+        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 T, C;
+      var D, k;
       l.value = {
         ...l.value,
         selectedPolygons: a
       };
-      const o = (C = (T = t.value.chartData.value) == null ? void 0 : T.data) == null ? void 0 : C.axesData;
+      const o = (k = (D = t.value.chartData.value) == null ? void 0 : D.data) == null ? void 0 : k.axesData;
       if (e.length === 0 || !o) {
-        R.value = { axesSpec: [], selectedKeys: [] };
+        H.value = { axesSpec: [], selectedKeys: [] };
         return;
       }
-      const i = Object.keys(o), v = t.value.inputGuide.value;
-      R.value = {
-        axesSpec: i.map((L) => v.getSourceInfo(L).spec),
-        selectedKeys: e.map((L) => i.map((ue) => o[ue][L]))
+      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 E = null;
-    function Y(e) {
-      e ? E = setTimeout(() => {
+    let R = null;
+    function te(e) {
+      e ? R = setTimeout(() => {
         t.value.loading.chartRendering = !0;
-      }, 1e3) : (E && clearTimeout(E), t.value.loading.chartRendering = !1);
+      }, 1e3) : (R && clearTimeout(R), t.value.loading.chartRendering = !1);
     }
-    const j = p(!1);
-    function _(e) {
+    const j = v(!1);
+    function ae(e) {
       j.value = e;
     }
-    const ee = {
-      dendro: [X],
+    const le = {
+      dendro: [ee],
       "scatterplot-umap": {
         onPolygonUpdate: U,
-        onTooltipHintSwitch: h,
-        onLassoControlsStateUpdate: V,
-        onZoomChange: _
+        onTooltipHintSwitch: y,
+        onLassoControlsStateUpdate: W,
+        onZoomChange: ae
       },
-      discrete: [h],
+      discrete: [y],
       scatterplot: {
         onPolygonUpdate: U,
-        onTooltipHintSwitch: h,
-        onLassoControlsStateUpdate: V
+        onTooltipHintSwitch: y,
+        onLassoControlsStateUpdate: W
       },
-      histogram: [h],
-      heatmap: { onTooltipHintSwitch: h, onLoadingChange: Y },
-      bubble: [h]
+      histogram: [y],
+      heatmap: { onTooltipHintSwitch: y, onLoadingChange: te },
+      bubble: [y]
     };
     function Z(e) {
-      var a, o, i, v, T;
+      var a, o, r, m, D;
       if (e && ((a = Object.values(e.data.values)[0]) == null ? void 0 : a.length) > 0) {
-        if (r.value)
-          r.value.updateSettingsAndData({ ...u(e.data), id: e.data.id + (n.pFrame.ok ? n.pFrame.value : "") }, u(e.settings));
+        if (i.value)
+          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 && (r.value = ge.newPlot(u(e.data), u(e.settings), ee[e.settings.type]), e.settings.type === "scatterplot-umap" && r.value.updateChartState("polygon", l.value.selectedPolygons ?? []), r.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 = (o = r.value) != null && o.calculatedData ? { ...r.value.calculatedData } : null, A.value = ((i = r.value) == null ? void 0 : i.hasError) ?? !1, f.value = ((v = r.value) == null ? void 0 : v.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
-        (T = r.value) == null || T.unmount(), r.value = null, f.value = null;
+        (D = i.value) == null || D.unmount(), i.value = null, S.value = null;
     }
-    c(() => x.value, (e) => {
+    s(() => P.value, (e) => {
       var a;
-      (e === "notReady" || e === "noPframe" || w.value === null) && ((a = r.value) == null || a.unmount(), r.value = null);
+      (e === "notReady" || e === "noPframe" || F.value === null) && ((a = i.value) == null || a.unmount(), i.value = null);
     });
-    const I = J(null);
-    c([
+    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]) => {
-      I.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)
-      );
-    }), c([
+        u(t.value.defaultPalette),
+        u(t.value.facetValuesData.value)
+      ));
+    }), s([
       () => t.value.reactive.template,
       () => t.value.reactive.layersSettings,
       () => t.value.reactive.axesSettings,
@@ -203,52 +220,53 @@ const Oe = { class: "graph-maker" }, Pe = { class: "graph-maker__main-pane" }, W
       () => t.value.reactive.dataBindAes,
       () => t.value.reactive.chartScale
     ], () => {
-      I.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)
-      );
-    }, { deep: !0 }), c(() => I.value, (e) => {
+        u(t.value.defaultPalette),
+        u(t.value.facetValuesData.value)
+      ));
+    }, { deep: !0 }), s(() => G.value, (e) => {
       Z(e);
-    }), se(() => {
+    }), de(() => {
       Z(null);
-    }), ce(() => {
+    }), pe(() => {
       var e;
-      (e = r.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: y(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: y(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: y(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: y(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: y(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: y(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
@@ -259,110 +277,116 @@ const Oe = { class: "graph-maker" }, Pe = { class: "graph-maker__main-pane" }, W
         template: a,
         currentTab: o
       };
-    }, { debounce: 1e3 }), c(() => l.value.currentTab, (e) => {
+    }, { 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;
-    }), c(() => {
+    }), s(() => {
       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 te() {
+    function ne() {
       var e;
-      Fe(
+      Ee(
         new Blob([
-          ((e = r.value) == null ? void 0 : e.export()) ?? ""
+          ((e = i.value) == null ? void 0 : e.export()) ?? ""
         ]),
         "chart.svg"
       );
     }
-    function ae(e) {
+    function oe(e) {
       l.value = {
         ...l.value,
         title: e
       };
     }
-    function le(e) {
+    function ue(e) {
       var a;
-      t.value.reactive.dendroSelectedNodeId = e, (a = r.value) == null || a.updateChartState("selectedNode", e);
+      t.value.reactive.dendroSelectedNodeId = e, (a = i.value) == null || a.updateChartState("selectedNode", e);
     }
-    const G = de(), ne = m(() => !!G.annotationsSlot), oe = m(() => !!G.settingsSlot), re = m(() => !!G.logSlot);
+    const L = me(), ie = f(() => !!L.annotationsSlot), re = f(() => !!L.settingsSlot), se = f(() => !!L.logSlot);
     return (e, a) => {
       var o;
-      return D(), ve("div", Oe, [
-        pe("div", Pe, [
-          N(he, {
-            "graph-status": x.value,
+      return b(), fe("div", Ie, [
+        ge("div", Re, [
+          $(Te, {
+            "graph-status": P.value,
             graphTitle: l.value.title,
-            chartData: M.value,
-            "chart-ref": r.value,
-            "error-info": f.value,
+            chartData: V.value,
+            "chart-ref": i.value,
+            "error-info": S.value,
             dendroTooltipButton: d.tooltipButton,
             "custom-status-text": d.statusText,
             "allow-title-editing": d.allowTitleEditing,
             isScatterplotZoomChanged: j.value,
-            onGraphTitleUpdate: ae,
-            onDendroNodeSelect: le,
-            onDendroTooltipBtnClick: a[0] || (a[0] = (i) => e.$emit("tooltip-btn-click", i))
+            onGraphTitleUpdate: oe,
+            onDendroNodeSelect: ue,
+            onDendroTooltipBtnClick: a[0] || (a[0] = (r) => e.$emit("tooltip-btn-click", r))
           }, {
-            default: O(() => [
-              P(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"]),
-          B.value || b.value ? (D(), F(xe, {
+          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: d.statusText
-          }, null, 8, ["graphStatus", "customStatusText"])) : S("", !0),
-          N(be, { id: "graph-settings-modal" }, {
-            default: O(() => [
-              s(t).reactive.currentTab && !((B.value || b.value) && s(De)(s(t).reactive.currentTab)) ? (D(), F(Se, {
+          }, 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] = (i) => s(t).reactive.currentTab = null)
+                onClose: a[1] || (a[1] = (r) => c(t).reactive.currentTab = null)
               }, {
-                default: O(() => [
-                  (D(), F(me(Q.value.value), null, {
-                    default: O(() => [
-                      s(t).reactive.currentTab === "annotations" ? P(e.$slots, "annotationsSlot", { key: 0 }) : S("", !0),
-                      s(t).reactive.currentTab === "settings" ? P(e.$slots, "settingsSlot", { key: 1 }) : S("", !0),
-                      s(t).reactive.currentTab === "log" ? P(e.$slots, "logSlot", { key: 2 }) : S("", !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
-              })) : S("", !0)
+              })) : g("", !0)
             ]),
             _: 3
           })
         ]),
-        N(ye, {
-          modelValue: s(t).reactive.currentTab,
-          "onUpdate:modelValue": a[2] || (a[2] = (i) => s(t).reactive.currentTab = i),
-          "chart-type": s(t).reactive.chartType,
-          "graph-status": x.value,
+        $(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": P.value,
           allowDeleting: d.allowChartDeleting,
-          hasAnnotationsSlot: ne.value,
-          hasSettingsSlot: oe.value,
-          hasLogSlot: re.value,
-          initialLoading: B.value || b.value,
-          onExport: te,
-          onDelete: a[3] || (a[3] = (i) => e.$emit("delete-this-graph"))
+          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"]),
-        ((o = f.value) == null ? void 0 : o.type) === "unknownError" ? (D(), F(Te, {
+        ((o = S.value) == null ? void 0 : o.type) === "unknownError" ? (b(), x(De, {
           key: 0,
-          errorInfo: f.value
-        }, null, 8, ["errorInfo"])) : S("", !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 {
-  We as default
+  _e as default
 };
 //# sourceMappingURL=index.vue.js.map