@trilogy-data/trilogy-studio-components 0.1.0

package/dist/useDashboard-CPI83oAm.js

@@ -0,0 +1,3352 @@
+import { defineComponent as X, ref as b, watch as ne, createElementBlock as p, createCommentVNode as R, openBlock as m, createElementVNode as t, toDisplayString as N, computed as C, onMounted as pe, onBeforeUnmount as We, normalizeStyle as Ie, Fragment as ce, renderList as we, normalizeClass as H, createTextVNode as G, createBlock as Z, unref as Y, createVNode as z, withCtx as ie, withDirectives as te, withKeys as Ce, vModelText as ye, onUnmounted as $e, inject as j, resolveComponent as J, Teleport as Ue, withModifiers as Pe, createStaticVNode as rt, resolveDynamicComponent as lt, nextTick as Ae, vModelRadio as Te, vShow as at } from "vue";
+import { a as ee, N as st, T as ke, P as je, Q as ze, u as Ge, B as ut, L as dt, U as ct, x as De, w as Le, V as mt, W as ht, M as ft, X as vt, Y as de, J as $, Z as Ee, $ as ae, a0 as ve, a1 as yt, a2 as pt, a3 as Ne, a4 as gt, a5 as Ye, a6 as Je, r as bt, a7 as Ke } from "./main-oVvKtGNk.js";
+const Ct = { class: "popup-header" }, wt = { class: "popup-body" }, kt = { class: "json-container" }, It = { "data-testid": "dashboard-json" }, Dt = { class: "popup-footer" }, St = /* @__PURE__ */ X({
+  __name: "DashboardSharePopup",
+  props: {
+    dashboard: {},
+    isOpen: { type: Boolean }
+  },
+  emits: ["close"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = b(""), l = (y) => {
+      if (!y) return null;
+      const g = JSON.parse(JSON.stringify(y));
+      if (delete g.id, delete g.connection, delete g.storage, delete g.changed, delete g.deleted, g.layout && Array.isArray(g.layout) && (g.layout = g.layout.map((k) => {
+        const T = { ...k };
+        return delete T.static, delete T.moved, delete T.state, T;
+      })), g.gridItems && typeof g.gridItems == "object")
+        for (const [k, T] of Object.entries(g.gridItems)) {
+          const F = { ...T };
+          delete F.results, delete F.loading, delete F.loadStartTime, delete F.error, F.filters || delete F.filters, F.crossFilters || delete F.crossFilters, F.chartFilters || delete F.chartFilters, F.conceptFilters || delete F.conceptFilters, F.chartConfig && delete F.chartConfig.showDebug, g.gridItems[k] = F;
+        }
+      return g.imports && Array.isArray(g.imports) && (g.imports = g.imports.map((k) => {
+        const T = { ...k };
+        return delete T.id, T;
+      })), g;
+    };
+    ne(
+      [() => n.dashboard, () => n.isOpen],
+      ([y, g]) => {
+        if (g && y) {
+          const k = l(y);
+          i.value = JSON.stringify(k, null, 2);
+        } else g || (i.value = "");
+      },
+      { immediate: !0 }
+    );
+    const r = b(!1), h = () => {
+      navigator.clipboard.writeText(i.value).then(() => {
+        r.value = !0, setTimeout(() => {
+          r.value = !1;
+        }, 2e3);
+      }).catch((y) => {
+        console.error("Could not copy text: ", y);
+      });
+    }, f = b(null), v = (y) => {
+      f.value && !f.value.contains(y.target) && a("close");
+    };
+    return (y, g) => e.isOpen ? (m(), p("div", {
+      key: 0,
+      class: "popup-overlay",
+      onClick: v
+    }, [
+      t("div", {
+        class: "popup-content",
+        ref_key: "popupContent",
+        ref: f,
+        "data-testid": "dashboard-share-popup"
+      }, [
+        t("div", Ct, [
+          g[1] || (g[1] = t("h3", null, "Definition", -1)),
+          t("button", {
+            onClick: g[0] || (g[0] = (k) => a("close")),
+            class: "close-button",
+            "data-testid": "close-popup-button"
+          }, " ✕ ")
+        ]),
+        t("div", wt, [
+          t("div", kt, [
+            t("pre", It, N(i.value), 1)
+          ])
+        ]),
+        t("div", Dt, [
+          t("button", {
+            onClick: h,
+            class: "dashboard-copy-button",
+            "data-testid": "copy-json-button"
+          }, N(r.value ? "Copied!" : "Copy"), 1)
+        ])
+      ], 512)
+    ])) : R("", !0);
+  }
+}), Tt = /* @__PURE__ */ ee(St, [["__scopeId", "data-v-e0f711ae"]]), Et = ["onClick"], $t = { class: "completion-details" }, Lt = { class: "completion-label" }, Mt = { class: "completion-description" }, qt = /* @__PURE__ */ X({
+  __name: "DashboardFilterAutocomplete",
+  props: {
+    inputValue: {
+      type: String,
+      required: !0
+    },
+    completionItems: {
+      type: Array,
+      required: !0
+    },
+    inputElement: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["select-completion"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = b(!1), l = b(0), r = b(0), h = b(""), f = b(0), v = b(null), y = C(() => {
+      if (!n.inputElement) return {};
+      const E = n.inputElement.getBoundingClientRect();
+      return {
+        top: `${E.bottom + 50}px`,
+        left: `${E.left}px`,
+        width: `${E.width}px`,
+        maxHeight: "200px"
+      };
+    }), g = () => {
+      if (!n.inputElement) return;
+      r.value = n.inputElement.selectionStart || 0;
+      const E = n.inputValue;
+      let M = r.value;
+      for (; M > 0 && !/\s/.test(E.charAt(M - 1)); )
+        M--;
+      let I = r.value;
+      for (; I < E.length && !/\s/.test(E.charAt(I)); )
+        I++;
+      f.value = M, h.value = E.substring(M, I);
+    }, k = C(() => {
+      if (!h.value.trim()) return [];
+      const E = h.value.toLowerCase();
+      return n.completionItems.filter((M) => M.label.toLowerCase().includes(E)).sort((M, I) => {
+        const B = M.label.toLowerCase().startsWith(E), x = I.label.toLowerCase().startsWith(E);
+        return B && !x ? -1 : !B && x ? 1 : M.label.localeCompare(I.label);
+      }).slice(0, 10);
+    });
+    ne(k, (E) => {
+      i.value = E.length > 0, l.value = 0;
+    });
+    const T = (E) => {
+      const M = n.inputValue.substring(0, f.value), I = n.inputValue.substring(r.value);
+      a("select-completion", {
+        text: M + E.label + I,
+        cursorPosition: f.value + E.label.length
+      }), i.value = !1;
+    }, F = (E) => {
+      v.value && !v.value.contains(E.target) && n.inputElement !== E.target && (i.value = !1);
+    }, _ = (E) => E.trilogySubType ? E.trilogySubType.toLowerCase() : E.type.toLowerCase();
+    return ne(
+      () => n.inputValue,
+      () => {
+        g();
+      }
+    ), pe(() => {
+      document.addEventListener("mousedown", F), n.inputElement;
+    }), We(() => {
+      document.removeEventListener("mousedown", F), n.inputElement;
+    }), g(), (E, M) => i.value ? (m(), p("div", {
+      key: 0,
+      ref_key: "dropdown",
+      ref: v,
+      class: "autocomplete-dropdown",
+      style: Ie(y.value)
+    }, [
+      (m(!0), p(ce, null, we(k.value, (I, B) => (m(), p("div", {
+        key: B,
+        class: H(["completion-item", { selected: B === l.value }]),
+        onClick: (x) => T(I)
+      }, [
+        t("div", {
+          class: H(["symbol-icon", _(I)])
+        }, [
+          I.trilogySubType ? (m(), p("i", {
+            key: 0,
+            class: H(`mdi ${I.trilogySubType === "key" ? "mdi-key-outline" : I.trilogySubType === "property" ? "mdi-tag-outline" : "mdi-cube-outline"}`)
+          }, null, 2)) : (m(), p(ce, { key: 1 }, [
+            G(N(I.type === "function" ? "ƒ" : I.type === "variable" ? "V" : I.type === "class" ? "C" : I.type === "interface" ? "I" : I.type === "method" ? "M" : I.type === "property" ? "P" : I.type === "field" ? "F" : I.type === "constant" ? "K" : I.type === "enum" ? "E" : I.type === "keyword" ? "K" : "S"), 1)
+          ], 64))
+        ], 2),
+        t("div", $t, [
+          t("div", Lt, N(I.label), 1),
+          t("div", Mt, N(I.description), 1)
+        ])
+      ], 10, Et))), 128))
+    ], 4)) : R("", !0);
+  }
+}), At = /* @__PURE__ */ ee(qt, [["__scopeId", "data-v-71bf654b"]]), Rt = { class: "filter-container" }, Ft = { class: "filter-input-wrapper" }, xt = ["value", "disabled"], Qt = {
+  key: 0,
+  class: "filter-dropdown"
+}, Vt = ["value", "placeholder", "disabled"], Bt = {
+  key: 0,
+  class: "dropdown-error-message",
+  "data-testid": "dropdown-error-message"
+}, Ot = { class: "dropdown-actions" }, Ht = ["disabled"], Pt = ["disabled"], Nt = {
+  key: 0,
+  class: "loader-container"
+}, Kt = ["disabled"], _t = ["disabled"], Wt = { class: "button-content" }, Ut = ["disabled"], jt = { class: "button-content" }, zt = {
+  key: 0,
+  class: "loader-container"
+}, Gt = ["disabled"], Yt = { class: "button-content" }, Jt = {
+  key: 4,
+  class: "filter-validation-icon"
+}, Zt = {
+  key: 0,
+  class: "filter-icon error",
+  "data-testid": "filter-error-icon"
+}, Xt = {
+  key: 1,
+  class: "filter-icon valid",
+  "data-testid": "filter-valid-icon"
+}, en = /* @__PURE__ */ X({
+  __name: "DashboardHeaderFilterInput",
+  props: {
+    filterValue: {
+      type: String,
+      default: ""
+    },
+    filterError: String,
+    isLoading: Boolean,
+    globalCompletion: {
+      type: Array,
+      default: () => []
+    },
+    validateFilter: {
+      type: Function,
+      default: () => !0
+    }
+  },
+  emits: ["filter-change", "filter-apply", "clear-filter"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = st(), l = b(n.isLoading), r = b(null), h = b(null), f = b(n.filterValue || ""), v = b(!1), y = b(!1), g = C(() => f.value.replace(/\n/g, " ")), k = C(() => !0);
+    function T() {
+      a("filter-apply", f.value), v.value = !1, M();
+    }
+    function F() {
+      f.value = "", v.value = !0, a("filter-change", ""), a("filter-apply", ""), a("clear-filter", ""), setTimeout(() => {
+        h.value && h.value.focus();
+      }, 0);
+    }
+    function _(w) {
+      const u = w.target;
+      f.value = u.value, v.value = !0, a("filter-change", f.value);
+    }
+    function E() {
+      y.value = !0, setTimeout(() => {
+        if (h.value) {
+          h.value.focus();
+          const w = f.value.length;
+          h.value.setSelectionRange(w, w);
+        }
+      }, 0);
+    }
+    function M() {
+      y.value = !1;
+    }
+    function I(w) {
+      const u = w.target, d = document.querySelector(".filter-dropdown"), S = r.value;
+      d && !d.contains(u) && u !== S && M();
+    }
+    const B = () => {
+      l.value = !0;
+      let w = n.globalCompletion.map((u) => ({
+        name: u.label,
+        type: u.datatype,
+        description: u.description
+      }));
+      i.generateFilterQuery(f.value, w, n.validateFilter).then((u) => {
+        u && u.length > 0 && (f.value = u.replace(/^\s*where\s+/i, ""), v.value = !0, a("filter-apply", f.value)), l.value = !1;
+      }).catch(() => {
+        l.value = !1;
+      });
+    };
+    function x(w) {
+      w.key === "Enter" && !w.shiftKey && !w.ctrlKey && !w.altKey ? y.value || (w.preventDefault(), T()) : (w.ctrlKey || w.metaKey) && w.shiftKey && w.key === "Enter" ? (w.preventDefault(), B()) : w.key === "Escape" && y.value && (w.preventDefault(), M());
+    }
+    function A(w) {
+      (w.ctrlKey || w.metaKey) && w.key === "Enter" && !w.shiftKey ? (w.preventDefault(), T()) : (w.ctrlKey || w.metaKey) && w.shiftKey && w.key === "Enter" ? (w.preventDefault(), B()) : w.key === "Escape" && (w.preventDefault(), M());
+    }
+    const D = C(() => (n.filterError || "").length > 0 ? "error" : f.value ? "valid" : "neutral");
+    function U(w) {
+      f.value = w.text, v.value = !0, a("filter-change", f.value);
+      const u = y.value ? h.value : r.value;
+      u && (u.focus(), u.setSelectionRange(w.cursorPosition, w.cursorPosition));
+    }
+    return ne(
+      () => n.filterValue,
+      (w) => {
+        w !== f.value && (f.value = w || "", v.value = !1);
+      }
+    ), ne(
+      () => n.isLoading,
+      (w) => {
+        l.value = w;
+      }
+    ), ne(y, (w) => {
+      w ? document.addEventListener("click", I) : document.removeEventListener("click", I);
+    }), (w, u) => (m(), p("div", Rt, [
+      t("div", Ft, [
+        t("input", {
+          id: "filter",
+          "data-testid": "filter-input",
+          type: "text",
+          value: g.value,
+          onInput: _,
+          onKeydown: x,
+          onFocus: E,
+          placeholder: "Add a global filter...",
+          class: H({ "filter-error": D.value === "error" }),
+          disabled: l.value,
+          ref_key: "filterInputRef",
+          ref: r
+        }, null, 42, xt),
+        y.value ? (m(), p("div", Qt, [
+          t("div", { class: "dropdown-header" }, [
+            u[1] || (u[1] = t("span", null, "Global Filters", -1)),
+            t("button", {
+              onClick: M,
+              class: "close-button",
+              title: "Close (Esc)"
+            }, [...u[0] || (u[0] = [
+              t("i", { class: "mdi mdi-close" }, null, -1)
+            ])])
+          ]),
+          t("textarea", {
+            ref_key: "filterTextareaRef",
+            ref: h,
+            class: H(["filter-textarea", { "filter-error": D.value === "error" }]),
+            value: f.value,
+            onInput: _,
+            onKeydown: A,
+            placeholder: Y(i).hasActiveDefaultConnection ? `Use a SQL condition (ex color='blue' or color='red') or text to filter.
+Use Ctrl+Enter to apply, Ctrl+Shift+Enter for text to SQL` : `Use a SQL condition (ex color='blue') to filter.
+Use Ctrl+Enter to apply`,
+            disabled: l.value,
+            rows: "4"
+          }, null, 42, Vt),
+          e.filterError ? (m(), p("div", Bt, [
+            u[2] || (u[2] = t("i", { class: "mdi mdi-alert-circle" }, null, -1)),
+            t("span", null, N(e.filterError), 1)
+          ])) : R("", !0),
+          t("div", Ot, [
+            t("button", {
+              onClick: T,
+              class: H(["apply-button", { "has-changes": v.value }]),
+              disabled: l.value,
+              title: "Apply filter (Ctrl+Enter)"
+            }, [...u[3] || (u[3] = [
+              t("i", { class: "mdi mdi-check" }, null, -1),
+              G(" Apply ", -1)
+            ])], 10, Ht),
+            Y(i).hasActiveDefaultConnection ? (m(), p("button", {
+              key: 0,
+              onClick: B,
+              class: "llm-button",
+              disabled: l.value,
+              title: "Text to filter (Ctrl+Shift+Enter)"
+            }, [
+              t("i", {
+                class: H(["mdi mdi-creation", { hidden: l.value }])
+              }, null, 2),
+              l.value ? (m(), p("div", Nt, [...u[4] || (u[4] = [
+                t("div", { class: "loader" }, null, -1)
+              ])])) : R("", !0),
+              u[5] || (u[5] = G(" Text to Filter ", -1))
+            ], 8, Pt)) : R("", !0),
+            t("button", {
+              onClick: F,
+              class: "clear-button",
+              disabled: l.value,
+              title: "Clear filter"
+            }, [...u[6] || (u[6] = [
+              t("i", { class: "mdi mdi-close-circle-outline" }, null, -1),
+              G(" Clear ", -1)
+            ])], 8, Kt)
+          ])
+        ])) : R("", !0),
+        (y.value ? h.value : r.value) ? (m(), Z(At, {
+          key: 1,
+          "input-value": f.value,
+          "completion-items": e.globalCompletion,
+          "input-element": y.value ? h.value : r.value,
+          onSelectCompletion: U
+        }, null, 8, ["input-value", "completion-items", "input-element"])) : R("", !0),
+        t("button", {
+          onClick: T,
+          class: H(["search-button", { "has-changes": v.value }]),
+          "data-testid": "filter-search-button",
+          disabled: l.value,
+          title: "Apply filter (Enter)"
+        }, [
+          t("div", Wt, [
+            u[8] || (u[8] = t("i", { class: "mdi mdi-magnify" }, null, -1)),
+            z(ke, {
+              content: v.value ? "Apply changes (Enter)" : "Search (Enter)",
+              position: "top"
+            }, {
+              default: ie(() => [...u[7] || (u[7] = [
+                t("span", { class: "tooltip-trigger" }, null, -1)
+              ])]),
+              _: 1
+            }, 8, ["content"])
+          ])
+        ], 10, _t),
+        Y(i).hasActiveDefaultConnection ? (m(), p("button", {
+          key: 2,
+          onClick: B,
+          class: "sparkle-button",
+          "data-testid": "filter-llm-button",
+          disabled: l.value,
+          title: "Transform text to filter if you have a configured LLM connection"
+        }, [
+          t("div", jt, [
+            t("i", {
+              class: H(["mdi mdi-creation", { hidden: l.value }])
+            }, null, 2),
+            l.value ? (m(), p("div", zt, [...u[9] || (u[9] = [
+              t("div", { class: "loader" }, null, -1)
+            ])])) : R("", !0),
+            z(ke, {
+              content: l.value ? "Processing..." : "Text to filter (Ctrl+Shift+Enter)",
+              position: "top"
+            }, {
+              default: ie(() => [...u[10] || (u[10] = [
+                t("span", { class: "tooltip-trigger" }, null, -1)
+              ])]),
+              _: 1
+            }, 8, ["content"])
+          ])
+        ], 8, Ut)) : R("", !0),
+        k.value ? (m(), p("button", {
+          key: 3,
+          onClick: F,
+          class: "clear-filters-button",
+          "data-testid": "clear-filters-button",
+          disabled: l.value,
+          title: "Clear all filters"
+        }, [
+          t("div", Yt, [
+            u[12] || (u[12] = t("i", { class: "mdi mdi-close" }, null, -1)),
+            z(ke, {
+              content: "Clear all filters",
+              position: "top"
+            }, {
+              default: ie(() => [...u[11] || (u[11] = [
+                t("span", { class: "tooltip-trigger" }, null, -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ], 8, Gt)) : R("", !0),
+        D.value !== "neutral" ? (m(), p("div", Jt, [
+          D.value === "error" ? (m(), p("div", Zt, [
+            u[14] || (u[14] = t("span", { class: "icon-x" }, "✕", -1)),
+            z(ke, {
+              content: e.filterError || "Unknown Error",
+              position: "bottom"
+            }, {
+              default: ie(() => [...u[13] || (u[13] = [
+                t("span", {
+                  class: "tooltip-trigger",
+                  "data-testid": "filter-error-tooltip-trigger"
+                }, null, -1)
+              ])]),
+              _: 1
+            }, 8, ["content"])
+          ])) : D.value === "valid" ? (m(), p("div", Xt, [
+            z(ke, {
+              content: "This is a syntactically correct filter.",
+              position: "top"
+            }, {
+              default: ie(() => [...u[15] || (u[15] = [
+                t("span", {
+                  class: "icon-check",
+                  "data-testid": "filter-valid-tooltip-trigger"
+                }, "✓", -1)
+              ])]),
+              _: 1
+            })
+          ])) : R("", !0)
+        ])) : R("", !0)
+      ])
+    ]));
+  }
+}), tn = /* @__PURE__ */ ee(en, [["__scopeId", "data-v-b8827229"]]), nn = {
+  class: "dashboard-controls",
+  "data-testid": "dashboard-controls"
+}, on = {
+  key: 0,
+  class: "controls-row title-row"
+}, rn = {
+  key: 0,
+  class: "editable-text"
+}, ln = {
+  key: 0,
+  class: "edit-indicator",
+  "data-testid": "edit-dashboard-title"
+}, an = { class: "dashboard-right-controls" }, sn = {
+  class: "connection-selector",
+  "data-testid": "connection-selector-wrapper"
+}, un = { class: "select-wrapper" }, dn = ["value"], cn = ["value"], mn = { class: "grid-actions" }, hn = {
+  key: 1,
+  class: "controls-row title-only-row"
+}, fn = {
+  key: 0,
+  class: "editable-text"
+}, vn = { class: "controls-row filter-row" }, yn = { class: "grid-actions" }, pn = {
+  class: "mode-selector",
+  "data-testid": "mode-selector-wrapper"
+}, gn = { class: "select-wrapper" }, bn = ["value", "disabled"], Cn = /* @__PURE__ */ X({
+  __name: "DashboardHeader",
+  props: {
+    dashboard: {
+      type: Object,
+      required: !0
+    },
+    editsLocked: Boolean,
+    selectedConnection: {
+      type: String,
+      required: !0
+    },
+    filterError: String,
+    globalCompletion: {
+      type: Array,
+      default: () => []
+    },
+    validateFilter: {
+      type: Function,
+      default: () => !0
+    }
+  },
+  emits: [
+    "connection-change",
+    "filter-change",
+    "import-change",
+    "add-item",
+    "clear-items",
+    "clear-filter",
+    "mode-change",
+    "refresh",
+    "title-update",
+    "export-image"
+  ],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = je(), l = ze(), r = Ge(), h = b(!1), f = b(!1), v = b(!1), y = b(""), g = b(null);
+    function k() {
+      f.value = !f.value;
+    }
+    function T() {
+      f.value = !1;
+    }
+    function F(u) {
+      a("filter-change", u);
+    }
+    async function _() {
+      return a("export-image"), await new Promise((u) => setTimeout(u, 5e3)), Promise.resolve();
+    }
+    function E(u) {
+      const d = u.target;
+      a("mode-change", d.value);
+    }
+    function M() {
+      var u;
+      n.editsLocked || (v.value = !0, y.value = ((u = n.dashboard) == null ? void 0 : u.name) || "Untitled Dashboard", setTimeout(() => {
+        var d;
+        (d = g.value) == null || d.focus();
+      }, 0));
+    }
+    function I() {
+      v.value = !1, a("title-update", y.value);
+    }
+    function B() {
+      var u;
+      v.value = !1, y.value = ((u = n.dashboard) == null ? void 0 : u.name) || "Untitled Dashboard";
+    }
+    const x = C(() => Object.values(l.editors).filter((d) => d.connection === n.selectedConnection).sort((d, S) => d.name.localeCompare(S.name)).map((d) => ({
+      id: d.id,
+      // Convert folder path separators (/) to Python import syntax (.)
+      name: d.name.replace(/\//g, "."),
+      alias: ""
+    }))), A = C(() => {
+      var u;
+      return ((u = n.dashboard) == null ? void 0 : u.imports) || [];
+    });
+    function D(u) {
+      a("import-change", u);
+    }
+    function U() {
+      a("refresh");
+    }
+    const w = C(() => {
+      var u;
+      switch ((u = n.dashboard) == null ? void 0 : u.state) {
+        case "editing":
+          return "mdi mdi-pencil-outline";
+        case "published":
+          return "mdi mdi-eye-outline";
+        case "fullscreen":
+          return "mdi mdi-fullscreen";
+        default:
+          return "mdi mdi-eye-outline";
+      }
+    });
+    return (u, d) => {
+      var S, L, Q;
+      return m(), p("div", nn, [
+        e.dashboard.state === "editing" ? (m(), p("div", on, [
+          t("div", {
+            class: "dashboard-title",
+            onClick: M
+          }, [
+            v.value ? te((m(), p("input", {
+              key: 1,
+              ref_key: "titleInput",
+              ref: g,
+              "data-testid": "dashboard-title-input",
+              "onUpdate:modelValue": d[0] || (d[0] = (K) => y.value = K),
+              onBlur: I,
+              onKeyup: [
+                Ce(I, ["enter"]),
+                Ce(B, ["esc"])
+              ],
+              class: "title-input",
+              type: "text"
+            }, null, 544)), [
+              [ye, y.value]
+            ]) : (m(), p("span", rn, [
+              G(N(((S = e.dashboard) == null ? void 0 : S.name) || "Untitled Dashboard") + " ", 1),
+              e.editsLocked ? R("", !0) : (m(), p("span", ln, " ✎ "))
+            ]))
+          ]),
+          t("div", an, [
+            t("div", sn, [
+              t("div", un, [
+                d[7] || (d[7] = t("i", { class: "mdi mdi-database-outline select-icon" }, null, -1)),
+                t("select", {
+                  id: "connection",
+                  "data-testid": "connection-selector",
+                  onChange: d[1] || (d[1] = (K) => u.$emit("connection-change", K)),
+                  value: e.selectedConnection
+                }, [
+                  (m(!0), p(ce, null, we(Object.values(Y(i).connections).filter(
+                    (K) => K.model
+                  ), (K) => (m(), p("option", {
+                    key: K.name,
+                    value: K.name
+                  }, N(K.name), 9, cn))), 128))
+                ], 40, dn)
+              ])
+            ]),
+            z(ut, {
+              "available-imports": x.value,
+              "active-imports": A.value,
+              "onUpdate:imports": D,
+              onExplore: d[2] || (d[2] = (K) => Y(r).openTab("editors", null, K.id))
+            }, null, 8, ["available-imports", "active-imports"]),
+            t("div", mn, [
+              t("button", {
+                onClick: d[3] || (d[3] = (K) => u.$emit("add-item")),
+                class: "btn btn-success",
+                "data-testid": "add-item-button"
+              }, " Add Item "),
+              t("button", {
+                onClick: d[4] || (d[4] = (K) => u.$emit("clear-items")),
+                class: "btn btn-danger",
+                "data-testid": "clear-items-button"
+              }, " Clear All ")
+            ])
+          ])
+        ])) : (m(), p("div", hn, [
+          t("div", {
+            class: "dashboard-title",
+            onClick: M
+          }, [
+            v.value ? te((m(), p("input", {
+              key: 1,
+              ref_key: "titleInput",
+              ref: g,
+              "data-testid": "dashboard-title-input",
+              "onUpdate:modelValue": d[5] || (d[5] = (K) => y.value = K),
+              onBlur: I,
+              onKeyup: [
+                Ce(I, ["enter"]),
+                Ce(B, ["esc"])
+              ],
+              class: "title-input",
+              type: "text"
+            }, null, 544)), [
+              [ye, y.value]
+            ]) : (m(), p("span", fn, N(((L = e.dashboard) == null ? void 0 : L.name) || "Untitled Dashboard"), 1))
+          ])
+        ])),
+        t("div", vn, [
+          z(tn, {
+            "filter-value": ((Q = e.dashboard) == null ? void 0 : Q.filter) || "",
+            "filter-error": e.filterError,
+            "is-loading": h.value,
+            "global-completion": e.globalCompletion,
+            "validate-filter": e.validateFilter,
+            onFilterApply: F,
+            onClearFilter: d[6] || (d[6] = (K) => u.$emit("clear-filter", ""))
+          }, null, 8, ["filter-value", "filter-error", "is-loading", "global-completion", "validate-filter"]),
+          t("div", yn, [
+            z(dt, {
+              action: _,
+              "use-default-style": !1,
+              class: "btn btn-secondary",
+              "data-testid": "download-button",
+              "test-id": "download-button"
+            }, {
+              default: ie(() => [...d[8] || (d[8] = [
+                G(" Download ", -1)
+              ])]),
+              _: 1
+            }),
+            t("button", {
+              onClick: k,
+              class: "btn btn-secondary",
+              "data-testid": "share-dashboard-button"
+            }, " Export "),
+            t("button", {
+              onClick: U,
+              class: "btn btn-primary",
+              "data-testid": "refresh-button"
+            }, " ⟳ Refresh "),
+            t("div", pn, [
+              t("div", gn, [
+                t("i", {
+                  class: H(w.value + " select-icon")
+                }, null, 2),
+                t("select", {
+                  id: "viewMode",
+                  "data-testid": "mode-selector",
+                  onChange: E,
+                  value: e.dashboard.state,
+                  disabled: e.editsLocked,
+                  class: "mode-select"
+                }, [...d[9] || (d[9] = [
+                  t("option", {
+                    value: "editing",
+                    "data-testid": "edit-mode-option"
+                  }, "Edit", -1),
+                  t("option", {
+                    value: "published",
+                    "data-testid": "view-mode-option"
+                  }, "View", -1),
+                  t("option", {
+                    value: "fullscreen",
+                    "data-testid": "fullscreen-mode-option"
+                  }, "Fullscreen", -1)
+                ])], 40, bn)
+              ])
+            ])
+          ])
+        ]),
+        z(Tt, {
+          dashboard: e.dashboard,
+          "is-open": f.value,
+          onClose: T
+        }, null, 8, ["dashboard", "is-open"])
+      ]);
+    };
+  }
+}), pi = /* @__PURE__ */ ee(Cn, [["__scopeId", "data-v-47b2477d"]]), wn = X({
+  name: "DashboardChart",
+  components: {
+    VegaLiteChart: mt,
+    ErrorMessage: Le,
+    LoadingView: De,
+    DrilldownPane: ct
+  },
+  props: {
+    dashboardId: {
+      type: String,
+      required: !0
+    },
+    itemId: {
+      type: String,
+      required: !0
+    },
+    getItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    setItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    editMode: {
+      type: Boolean,
+      required: !0
+    },
+    symbols: {
+      type: Array,
+      required: !0
+    },
+    getDashboardQueryExecutor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e, { emit: o }) {
+    const n = b(!1), a = b(null), i = b(null), l = b(!1), r = b(null), h = b(null), f = C(() => e.getItemData(e.itemId, e.dashboardId)), v = () => {
+      if (!a.value) return 0;
+      const W = a.value.getBoundingClientRect(), oe = window.scrollY || document.documentElement.scrollTop, se = W.top + oe, fe = Math.floor(se / 200) * 10;
+      return Math.min(fe, 100);
+    };
+    pe(() => {
+      setTimeout(() => {
+        const W = v();
+        g.value ? setTimeout(() => {
+          n.value = !0;
+        }, W) : n.value = !0;
+      }, 0);
+    }), $e(() => {
+      r.value && (clearTimeout(r.value), r.value = null);
+    });
+    const y = C(() => f.value.structured_content.query), g = C(() => f.value.results || null), k = C(() => f.value.name || ""), T = C(() => (f.value.height || 300) - 75), F = C(() => f.value.width || 300), _ = C(() => f.value.chartConfig || null), E = C(() => f.value.loading || !1), M = C(() => f.value.error || null), I = C(() => f.value.loadStartTime || null), B = C(() => (f.value.chartFilters || []).map((W) => W.value)), x = C(() => f.value.hasDrilldown), A = C(() => f.value.onRefresh || null);
+    ne(
+      E,
+      (W, oe) => {
+        r.value && (clearTimeout(r.value), r.value = null), W ? r.value = setTimeout(() => {
+          l.value = !0, r.value = null;
+        }, 250) : l.value = !1;
+      },
+      { immediate: !0 }
+    );
+    const D = j("connectionStore"), U = j(
+      "analyticsStore",
+      null
+    ), w = (W) => {
+      if (x.value) {
+        e.setItemData(e.itemId, e.dashboardId, { drilldownChartConfig: W });
+        return;
+      }
+      e.setItemData(e.itemId, e.dashboardId, { chartConfig: W });
+    };
+    if (!D)
+      throw new Error("Connection store not found!");
+    const u = async () => {
+      if (!y.value) return;
+      const W = e.getDashboardQueryExecutor(e.dashboardId);
+      if (!W)
+        throw new Error("Dashboard query executor not found!");
+      try {
+        U && U.log("dashboard-chart-execution", "CHART", !0), i.value && W.cancelQuery(i.value);
+        let oe = await W.runSingle(e.itemId);
+        await W.waitForQuery(oe);
+      } catch (oe) {
+        console.error("Error setting up query:", oe), i.value = null;
+      }
+    }, d = () => {
+      A.value ? A.value(e.itemId) : u();
+    }, S = (W) => {
+      o("dimension-click", {
+        source: e.itemId,
+        filters: W.filters,
+        chart: W.chart,
+        append: W.append
+      });
+    }, L = () => {
+      o("background-click");
+    }, Q = (W) => {
+      let oe = W.filters, se = Object.keys(oe)[0], fe = ht(W.filters);
+      se && (h.value = { remove: se, filter: fe });
+    }, K = async () => {
+      e.setItemData(e.itemId, e.dashboardId, {
+        drilldown: null,
+        drilldownChartConfig: null,
+        loading: !0
+      }), await u();
+    }, me = async (W) => {
+      let se = await e.getDashboardQueryExecutor(e.dashboardId).createDrilldownQuery(
+        y.value,
+        W,
+        h.value.remove,
+        h.value.filter
+      );
+      e.setItemData(e.itemId, e.dashboardId, {
+        drilldown: se,
+        drilldownChartConfig: null,
+        loading: !0
+      }), n.value = !1, l.value = !0, h.value = null, await u().then(() => {
+        n.value = !0;
+      }).catch((fe) => {
+        console.error("Error executing drilldown query:", fe), n.value = !0;
+      }).finally(() => {
+        l.value = !1;
+      });
+    }, he = b(!1);
+    return {
+      chartContainer: a,
+      results: g,
+      ready: n,
+      loading: E,
+      showLoading: l,
+      error: M,
+      query: y,
+      chartHeight: T,
+      chartWidth: F,
+      chartConfig: _,
+      chartTitle: k,
+      onChartConfigChange: w,
+      onRefresh: A,
+      handleLocalRefresh: d,
+      chartSelection: B,
+      startTime: I,
+      handleDimensionClick: S,
+      handleBackgroundClick: L,
+      activeDrilldown: h,
+      activateDrilldown: Q,
+      submitDrilldown: me,
+      controlsVisible: he,
+      onChartMouseEnter: () => {
+        he.value = !0;
+      },
+      onChartMouseLeave: () => {
+        he.value = !1;
+      },
+      revertDrilldown: K,
+      hasDrilldown: x
+    };
+  }
+}), kn = {
+  key: 3,
+  class: "loading-overlay"
+};
+function In(e, o, n, a, i, l) {
+  const r = J("drilldown-pane"), h = J("ErrorMessage"), f = J("VegaLiteChart"), v = J("LoadingView");
+  return m(), p("div", {
+    ref: "chartContainer",
+    class: H(["chart-placeholder no-drag", { "chart-placeholder-edit-mode": e.editMode }]),
+    onMouseenter: o[3] || (o[3] = (...y) => e.onChartMouseEnter && e.onChartMouseEnter(...y)),
+    onMouseleave: o[4] || (o[4] = (...y) => e.onChartMouseLeave && e.onChartMouseLeave(...y))
+  }, [
+    e.activeDrilldown ? (m(), Z(r, {
+      key: 0,
+      "drilldown-remove": e.activeDrilldown.remove,
+      "drilldown-filter": e.activeDrilldown.filter,
+      onClose: o[0] || (o[0] = (y) => e.activeDrilldown = null),
+      symbols: e.symbols,
+      onSubmit: e.submitDrilldown
+    }, null, 8, ["drilldown-remove", "drilldown-filter", "symbols", "onSubmit"])) : e.error && !e.loading ? (m(), Z(h, {
+      key: 1,
+      class: "chart-placeholder"
+    }, {
+      default: ie(() => [
+        G(N(e.error), 1)
+      ]),
+      _: 1
+    })) : e.results && e.ready && !e.loading ? (m(), Z(f, {
+      key: 2,
+      id: `${e.itemId}-${e.dashboardId}`,
+      columns: e.results.headers,
+      data: e.results.data,
+      showControls: e.editMode,
+      initialConfig: e.chartConfig || void 0,
+      containerHeight: e.chartHeight,
+      "container-width": e.chartWidth,
+      onChartConfigChange: e.onChartConfigChange,
+      chartSelection: e.chartSelection,
+      chartTitle: e.chartTitle,
+      "drilldown-active": e.hasDrilldown,
+      onDimensionClick: e.handleDimensionClick,
+      onBackgroundClick: e.handleBackgroundClick,
+      onRefreshClick: e.handleLocalRefresh,
+      onDrilldownClick: e.activateDrilldown,
+      onRevertDrilldown: e.revertDrilldown
+    }, null, 8, ["id", "columns", "data", "showControls", "initialConfig", "containerHeight", "container-width", "onChartConfigChange", "chartSelection", "chartTitle", "drilldown-active", "onDimensionClick", "onBackgroundClick", "onRefreshClick", "onDrilldownClick", "onRevertDrilldown"])) : R("", !0),
+    e.loading && e.showLoading ? (m(), p("div", kn, [
+      z(v, {
+        startTime: e.startTime,
+        text: "Loading"
+      }, null, 8, ["startTime"])
+    ])) : R("", !0),
+    !e.editMode || !(e.results && e.ready) ? (m(), p("div", {
+      key: 4,
+      class: H(["controls-toggle", { "controls-visible": e.controlsVisible }])
+    }, [
+      t("button", {
+        onClick: o[1] || (o[1] = (...y) => e.handleLocalRefresh && e.handleLocalRefresh(...y)),
+        class: "control-btn",
+        "data-testid": "refresh-chart-btn",
+        title: "Refresh table"
+      }, [...o[5] || (o[5] = [
+        t("i", { class: "mdi mdi-refresh icon" }, null, -1)
+      ])]),
+      t("button", {
+        onClick: o[2] || (o[2] = (...y) => e.revertDrilldown && e.revertDrilldown(...y)),
+        class: "control-btn",
+        "data-testid": "refresh-chart-btn",
+        title: "Clear Drilldown"
+      }, [...o[6] || (o[6] = [
+        t("i", { class: "mdi mdi-undo icon" }, null, -1)
+      ])])
+    ], 2)) : R("", !0)
+  ], 34);
+}
+const Dn = /* @__PURE__ */ ee(wn, [["render", In], ["__scopeId", "data-v-973d4802"]]), Sn = X({
+  name: "DynamicMarkdownChart",
+  components: {
+    ErrorMessage: Le,
+    LoadingView: De,
+    MarkdownRenderer: ft
+  },
+  props: {
+    dashboardId: {
+      type: String,
+      required: !0
+    },
+    itemId: {
+      type: String,
+      required: !0
+    },
+    getItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "MARKDOWN", content: { markdown: "", query: "" } })
+    },
+    setItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "MARKDOWN", content: { markdown: "", query: "" } })
+    },
+    editMode: {
+      type: Boolean,
+      required: !0
+    },
+    getDashboardQueryExecutor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const o = b(!1), n = b(null), a = b(null), i = b(!1), l = () => {
+      i.value = !0;
+    }, r = () => {
+      i.value = !1;
+    }, h = () => {
+      if (!n.value) return 0;
+      const x = n.value.getBoundingClientRect(), A = window.scrollY || document.documentElement.scrollTop, D = x.top + A, U = Math.floor(D / 200) * 10;
+      return Math.min(U, 100);
+    };
+    pe(() => {
+      setTimeout(() => {
+        const x = h();
+        g.value ? setTimeout(() => {
+          o.value = !0;
+        }, x) : o.value = !0;
+      }, 0);
+    });
+    const f = C(() => e.getItemData(e.itemId, e.dashboardId).structured_content || { markdown: "", query: "" }), v = C(() => f.value.markdown || ""), y = C(() => f.value.query || ""), g = C(() => e.getItemData(e.itemId, e.dashboardId).results || null), k = C(() => e.getItemData(e.itemId, e.dashboardId).loading || !1), T = C(() => e.getItemData(e.itemId, e.dashboardId).error || null), F = C(() => e.getItemData(e.itemId, e.dashboardId).loadStartTime || null), _ = C(() => e.getItemData(e.itemId, e.dashboardId).onRefresh || null), E = j("connectionStore"), M = j("analyticsStore");
+    if (!E)
+      throw new Error("Connection store not found!");
+    const I = async () => {
+      if (!y.value)
+        return;
+      const x = e.getDashboardQueryExecutor(e.dashboardId);
+      if (!x)
+        throw new Error("Dashboard query executor not found!");
+      try {
+        M && M.log("dashboard-markdown-execution", "MARKDOWN", !0), a.value && x.cancelQuery(a.value);
+        let A = await x.runSingle(e.itemId);
+        await x.waitForQuery(A);
+      } catch (A) {
+        console.error("Error setting up query:", A), a.value = null;
+      }
+    };
+    return {
+      chartContainer: n,
+      results: g,
+      ready: o,
+      loading: k,
+      error: T,
+      query: y,
+      markdown: v,
+      onRefresh: _,
+      handleLocalRefresh: () => {
+        _.value ? _.value(e.itemId) : I();
+      },
+      startTime: F,
+      controlsVisible: i,
+      onChartMouseEnter: l,
+      onChartMouseLeave: r
+    };
+  }
+});
+function Tn(e, o, n, a, i, l) {
+  const r = J("ErrorMessage"), h = J("MarkdownRenderer");
+  return m(), p("div", {
+    ref: "chartContainer",
+    class: H(["chart-placeholder no-drag", { "chart-placeholder-edit-mode": e.editMode }]),
+    onMouseenter: o[1] || (o[1] = (...f) => e.onChartMouseEnter && e.onChartMouseEnter(...f)),
+    onMouseleave: o[2] || (o[2] = (...f) => e.onChartMouseLeave && e.onChartMouseLeave(...f))
+  }, [
+    e.error && !e.loading ? (m(), Z(r, {
+      key: 0,
+      class: "chart-placeholder"
+    }, {
+      default: ie(() => [
+        G(N(e.error), 1)
+      ]),
+      _: 1
+    })) : e.ready ? (m(), Z(h, {
+      key: 1,
+      markdown: e.markdown,
+      results: e.results,
+      loading: e.loading
+    }, null, 8, ["markdown", "results", "loading"])) : R("", !0),
+    !e.loading && e.editMode ? (m(), p("div", {
+      key: 2,
+      class: H(["controls-toggle", { "controls-visible": e.controlsVisible }])
+    }, [
+      t("button", {
+        onClick: o[0] || (o[0] = (...f) => e.handleLocalRefresh && e.handleLocalRefresh(...f)),
+        class: "control-btn",
+        "data-testid": "refresh-chart-btn",
+        title: "Refresh text"
+      }, [...o[3] || (o[3] = [
+        t("i", { class: "mdi mdi-refresh icon" }, null, -1)
+      ])])
+    ], 2)) : R("", !0)
+  ], 34);
+}
+const En = /* @__PURE__ */ ee(Sn, [["render", Tn], ["__scopeId", "data-v-b4abaf19"]]), $n = X({
+  name: "DashboardChart",
+  components: {
+    DataTable: vt,
+    ErrorMessage: Le,
+    LoadingView: De
+  },
+  props: {
+    dashboardId: {
+      type: String,
+      required: !0
+    },
+    itemId: {
+      type: String,
+      required: !0
+    },
+    getItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    setItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    editMode: {
+      type: Boolean,
+      required: !0
+    },
+    getDashboardQueryExecutor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e, { emit: o }) {
+    const n = b(!1), a = b(null), i = b(null), l = b(!1), r = b(null), h = b(!1), f = () => {
+      h.value = !0;
+    }, v = () => {
+      h.value = !1;
+    }, y = () => {
+      if (!a.value) return 0;
+      const d = a.value.getBoundingClientRect(), S = window.scrollY || document.documentElement.scrollTop, L = d.top + S, Q = Math.floor(L / 200) * 10;
+      return Math.min(Q, 100);
+    };
+    pe(() => {
+      setTimeout(() => {
+        const d = y();
+        k.value ? setTimeout(() => {
+          n.value = !0;
+        }, d) : n.value = !0;
+      }, 0);
+    }), $e(() => {
+      r.value && (clearTimeout(r.value), r.value = null);
+    });
+    const g = C(() => e.getItemData(e.itemId, e.dashboardId).content), k = C(() => e.getItemData(e.itemId, e.dashboardId).results || null), T = C(() => e.getItemData(e.itemId, e.dashboardId).loading || !1), F = C(() => e.getItemData(e.itemId, e.dashboardId).error || null), _ = C(() => e.getItemData(e.itemId, e.dashboardId).loadStartTime || null), E = C(() => (e.getItemData(e.itemId, e.dashboardId).height || 300) - 75), M = C(() => (e.getItemData(e.itemId, e.dashboardId).width || 300) - 100), I = C(() => e.getItemData(e.itemId, e.dashboardId).chartConfig || null), B = C(() => e.getItemData(e.itemId, e.dashboardId).onRefresh || null);
+    ne(
+      T,
+      (d, S) => {
+        r.value && (clearTimeout(r.value), r.value = null), d ? r.value = setTimeout(() => {
+          l.value = !0, r.value = null;
+        }, 150) : l.value = !1;
+      },
+      { immediate: !0 }
+    );
+    const x = j("connectionStore"), A = j("analyticsStore");
+    if (!x)
+      throw new Error("Connection store not found!");
+    const D = async () => {
+      if (!g.value) return;
+      const d = e.getDashboardQueryExecutor(e.dashboardId);
+      if (!d)
+        throw new Error("Dashboard query executor not found!");
+      try {
+        A && A.log("dashboard-table-execution", "TABLE", !0), i.value && d.cancelQuery(i.value);
+        let S = await d.runSingle(e.itemId);
+        await d.waitForQuery(S);
+      } catch (S) {
+        console.error("Error setting up query:", S), i.value = null;
+      }
+    };
+    return {
+      chartContainer: a,
+      results: k,
+      ready: n,
+      loading: T,
+      showLoading: l,
+      error: F,
+      query: g,
+      chartHeight: E,
+      chartWidth: M,
+      chartConfig: I,
+      onRefresh: B,
+      handleLocalRefresh: () => {
+        B.value ? B.value(e.itemId) : D();
+      },
+      startTime: _,
+      handleDimensionClick: (d) => {
+        o("dimension-click", {
+          source: e.itemId,
+          filters: d.filters,
+          chart: d.chart,
+          append: d.append
+        });
+      },
+      handleBackgroundClick: () => {
+        o("background-click");
+      },
+      controlsVisible: h,
+      onChartMouseEnter: f,
+      onChartMouseLeave: v
+    };
+  }
+}), Ln = {
+  key: 2,
+  class: "loading-overlay"
+};
+function Mn(e, o, n, a, i, l) {
+  const r = J("ErrorMessage"), h = J("data-table"), f = J("LoadingView");
+  return m(), p("div", {
+    ref: "chartContainer",
+    class: H(["chart-placeholder no-drag", { "chart-placeholder-edit-mode": e.editMode }]),
+    onMouseenter: o[1] || (o[1] = (...v) => e.onChartMouseEnter && e.onChartMouseEnter(...v)),
+    onMouseleave: o[2] || (o[2] = (...v) => e.onChartMouseLeave && e.onChartMouseLeave(...v))
+  }, [
+    e.error && !e.loading ? (m(), Z(r, {
+      key: 0,
+      class: "chart-placeholder"
+    }, {
+      default: ie(() => [
+        G(N(e.error), 1)
+      ]),
+      _: 1
+    })) : e.ready && e.results ? (m(), Z(h, {
+      key: 1,
+      id: `${e.itemId}-${e.dashboardId}`,
+      headers: e.results.headers,
+      results: e.results.data,
+      containerHeight: e.chartHeight,
+      prettyPrint: !0,
+      fitParent: !0,
+      onCellClick: e.handleDimensionClick,
+      onBackgroundClick: e.handleBackgroundClick
+    }, null, 8, ["id", "headers", "results", "containerHeight", "onCellClick", "onBackgroundClick"])) : R("", !0),
+    e.loading && e.showLoading ? (m(), p("div", Ln, [
+      z(f, {
+        startTime: e.startTime,
+        text: "Loading"
+      }, null, 8, ["startTime"])
+    ])) : R("", !0),
+    !e.loading && e.editMode ? (m(), p("div", {
+      key: 3,
+      class: H(["controls-toggle", { "controls-visible": e.controlsVisible }])
+    }, [
+      t("button", {
+        onClick: o[0] || (o[0] = (...v) => e.handleLocalRefresh && e.handleLocalRefresh(...v)),
+        class: "control-btn",
+        "data-testid": "refresh-chart-btn",
+        title: "Refresh table"
+      }, [...o[3] || (o[3] = [
+        t("i", { class: "mdi mdi-refresh icon" }, null, -1)
+      ])])
+    ], 2)) : R("", !0)
+  ], 34);
+}
+const qn = /* @__PURE__ */ ee($n, [["render", Mn], ["__scopeId", "data-v-fcabd793"]]), An = {
+  data() {
+    return {
+      selectedValue: "",
+      selectedLabel: "",
+      searchText: "",
+      showDropdown: !1,
+      inputElement: null
+    };
+  },
+  props: {
+    headers: {
+      type: Map,
+      required: !0
+    },
+    results: {
+      type: Array,
+      required: !0
+    },
+    containerHeight: Number,
+    cellClick: {
+      type: Function,
+      default: () => {
+      }
+    },
+    backgroundClick: {
+      type: Function,
+      default: () => {
+      }
+    },
+    prettyPrint: {
+      type: Boolean,
+      default: !1
+    },
+    fitParent: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    const e = j("userSettingsStore");
+    if (!e)
+      throw new Error("userSettingsStore not provided");
+    const o = C(() => e.settings.theme);
+    return {
+      settingsStore: e,
+      currentTheme: o
+    };
+  },
+  computed: {
+    headersArray() {
+      return Array.from(this.headers.values());
+    },
+    firstColumn() {
+      return this.headersArray[0] || null;
+    },
+    secondColumn() {
+      return this.headersArray[1] || null;
+    },
+    displayColumn() {
+      return this.firstColumn;
+    },
+    valueColumn() {
+      return this.secondColumn || this.firstColumn;
+    },
+    selectOptions() {
+      if (!this.displayColumn || !this.valueColumn || !this.results || this.results.length === 0)
+        return [];
+      const e = this.displayColumn.name, o = this.valueColumn.name, n = [];
+      return this.results.forEach((a) => {
+        const i = a[e], l = a[o];
+        if (i != null && l !== null && l !== void 0) {
+          const r = this.formatValue(i, this.displayColumn);
+          n.push({
+            label: r,
+            value: l
+          });
+        }
+      }), n;
+    },
+    filteredOptions() {
+      if (!this.searchText)
+        return this.selectOptions;
+      const e = this.searchText.toLowerCase();
+      return this.selectOptions.filter((o) => o.label.toLowerCase().includes(e));
+    },
+    placeholderText() {
+      var e;
+      return this.hasSelection ? this.selectedLabel || "Type to search..." : !this.selectOptions || this.selectOptions.length === 0 ? "No data available" : this.firstColumn ? `Select ${(e = this.firstColumn) == null ? void 0 : e.name}` : "Select an option";
+    },
+    hasSelection() {
+      return !!(this.selectedLabel && this.selectedValue);
+    },
+    fieldLabel() {
+      var e;
+      return ((e = this.firstColumn) == null ? void 0 : e.name) || "Field";
+    },
+    dropdownStyle() {
+      if (!this.inputElement)
+        return {};
+      const e = this.inputElement.getBoundingClientRect();
+      return {
+        position: "fixed",
+        top: `${e.bottom}px`,
+        left: `${e.left}px`,
+        width: `${e.width}px`
+      };
+    }
+  },
+  mounted() {
+    this.selectedLabel && !this.searchText && (this.searchText = this.selectedLabel);
+  },
+  watch: {
+    // Watch for external changes to selectedLabel and update searchText accordingly
+    selectedLabel(e) {
+      e && !this.showDropdown && (this.searchText = e);
+    }
+  },
+  methods: {
+    formatValue(e, o) {
+      var n, a;
+      switch (o.type) {
+        case de.FLOAT:
+          return (n = o.traits) != null && n.includes("usd") ? `$${Number(e).toFixed(o.scale || 2)}` : (a = o.traits) != null && a.includes("percent") ? `${(Number(e) * 100).toFixed(2)}%` : Number(e).toFixed(o.scale || 2);
+        case de.DATETIME:
+        case de.TIMESTAMP:
+        case de.DATE:
+        case de.TIME:
+          return e instanceof Date ? e.toLocaleString() : String(e);
+        case de.BOOLEAN:
+          return e ? "✓" : "✗";
+        case de.ARRAY:
+        case de.STRUCT:
+          return JSON.stringify(e);
+        default:
+          return String(e);
+      }
+    },
+    highlightMatch(e) {
+      if (!this.searchText)
+        return e;
+      const o = this.searchText.toLowerCase(), a = e.toLowerCase().indexOf(o);
+      if (a === -1)
+        return e;
+      const i = e.slice(0, a), l = e.slice(a, a + this.searchText.length), r = e.slice(a + this.searchText.length);
+      return `${i}<mark>${l}</mark>${r}`;
+    },
+    selectOption(e) {
+      this.selectedValue = e.value, this.selectedLabel = e.label, this.searchText = e.label, this.showDropdown = !1, this.handleSelection();
+    },
+    selectAll() {
+      this.selectedValue = "", this.selectedLabel = "", this.searchText = "", this.showDropdown = !1, this.$emit("background-click"), this.backgroundClick();
+    },
+    onSearchInput() {
+      this.searchText !== this.selectedLabel && this.selectedLabel && (this.selectedValue = "", this.selectedLabel = ""), this.showDropdown = !0, this.updateInputElement();
+    },
+    handleFocus() {
+      this.searchText = "", this.showDropdown = !0, this.updateInputElement();
+    },
+    updateInputElement() {
+      this.inputElement = this.$refs.searchInput;
+    },
+    handleBlur() {
+      setTimeout(() => {
+        this.showDropdown = !1, this.selectedLabel && !this.searchText && (this.searchText = this.selectedLabel);
+      }, 200);
+    },
+    handleSelection() {
+      if (!this.valueColumn || !this.selectedValue)
+        return;
+      const e = this.valueColumn.address || this.valueColumn.name;
+      this.$emit("cell-click", {
+        filters: { [e]: this.selectedValue },
+        append: !1
+      });
+    }
+  }
+}, Rn = { class: "result-select row pa-0 ba-0" }, Fn = { class: "select-container" }, xn = { class: "search-input-wrapper" }, Qn = {
+  key: 0,
+  class: "inline-label"
+}, Vn = ["placeholder", "disabled"], Bn = ["onMousedown", "innerHTML"];
+function On(e, o, n, a, i, l) {
+  return m(), p("div", Rn, [
+    t("div", Fn, [
+      t("div", xn, [
+        l.hasSelection ? (m(), p("span", Qn, N(l.fieldLabel) + ": ", 1)) : R("", !0),
+        te(t("input", {
+          ref: "searchInput",
+          "onUpdate:modelValue": o[0] || (o[0] = (r) => i.searchText = r),
+          type: "text",
+          class: H(["search-input", { "has-inline-label": l.hasSelection }]),
+          placeholder: l.placeholderText,
+          disabled: !l.selectOptions || l.selectOptions.length === 0,
+          onFocus: o[1] || (o[1] = (...r) => l.handleFocus && l.handleFocus(...r)),
+          onInput: o[2] || (o[2] = (...r) => l.onSearchInput && l.onSearchInput(...r)),
+          onBlur: o[3] || (o[3] = (...r) => l.handleBlur && l.handleBlur(...r))
+        }, null, 42, Vn), [
+          [ye, i.searchText]
+        ]),
+        o[5] || (o[5] = t("span", { class: "search-icon" }, [
+          t("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            t("circle", {
+              cx: "11",
+              cy: "11",
+              r: "8"
+            }),
+            t("path", { d: "m21 21-4.35-4.35" })
+          ])
+        ], -1))
+      ]),
+      (m(), Z(Ue, { to: "body" }, [
+        i.showDropdown && l.filteredOptions.length > 0 ? (m(), p("div", {
+          key: 0,
+          class: "dropdown-list",
+          style: Ie(l.dropdownStyle)
+        }, [
+          t("div", {
+            class: H(["dropdown-item select-all", { selected: !i.selectedValue }]),
+            onMousedown: o[4] || (o[4] = Pe((...r) => l.selectAll && l.selectAll(...r), ["prevent"]))
+          }, " Select All ", 34),
+          (m(!0), p(ce, null, we(l.filteredOptions, (r, h) => (m(), p("div", {
+            key: h,
+            class: H(["dropdown-item", { selected: i.selectedValue === r.value }]),
+            onMousedown: Pe((f) => l.selectOption(r), ["prevent"]),
+            innerHTML: l.highlightMatch(r.label)
+          }, null, 42, Bn))), 128))
+        ], 4)) : R("", !0),
+        i.showDropdown && i.searchText && l.filteredOptions.length === 0 ? (m(), p("div", {
+          key: 1,
+          class: "dropdown-list",
+          style: Ie(l.dropdownStyle)
+        }, [...o[6] || (o[6] = [
+          t("div", { class: "dropdown-item no-results" }, "No matches found", -1)
+        ])], 4)) : R("", !0)
+      ]))
+    ])
+  ]);
+}
+const Hn = /* @__PURE__ */ ee(An, [["render", On], ["__scopeId", "data-v-db5bbc35"]]), Pn = X({
+  name: "DashboardChart",
+  components: {
+    DashboardDataSelector: Hn,
+    ErrorMessage: Le,
+    LoadingView: De
+  },
+  props: {
+    dashboardId: {
+      type: String,
+      required: !0
+    },
+    itemId: {
+      type: String,
+      required: !0
+    },
+    getItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    setItemData: {
+      type: Function,
+      required: !0,
+      default: () => ({ type: "CHART", content: "" })
+    },
+    editMode: {
+      type: Boolean,
+      required: !0
+    },
+    getDashboardQueryExecutor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e, { emit: o }) {
+    const n = b(!1), a = b(null), i = b(null), l = b(!1), r = b(null), h = b(!1), f = () => {
+      h.value = !0;
+    }, v = () => {
+      h.value = !1;
+    }, y = () => {
+      if (!a.value) return 0;
+      const d = a.value.getBoundingClientRect(), S = window.scrollY || document.documentElement.scrollTop, L = d.top + S, Q = Math.floor(L / 200) * 10;
+      return Math.min(Q, 100);
+    };
+    pe(() => {
+      setTimeout(() => {
+        const d = y();
+        k.value ? setTimeout(() => {
+          n.value = !0;
+        }, d) : n.value = !0;
+      }, 0);
+    }), $e(() => {
+      r.value && (clearTimeout(r.value), r.value = null);
+    });
+    const g = C(() => e.getItemData(e.itemId, e.dashboardId).content), k = C(() => e.getItemData(e.itemId, e.dashboardId).results || null), T = C(() => e.getItemData(e.itemId, e.dashboardId).loading || !1), F = C(() => e.getItemData(e.itemId, e.dashboardId).error || null), _ = C(() => e.getItemData(e.itemId, e.dashboardId).loadStartTime || null), E = C(() => (e.getItemData(e.itemId, e.dashboardId).height || 300) - 75), M = C(() => (e.getItemData(e.itemId, e.dashboardId).width || 300) - 100), I = C(() => e.getItemData(e.itemId, e.dashboardId).chartConfig || null), B = C(() => e.getItemData(e.itemId, e.dashboardId).onRefresh || null);
+    ne(
+      T,
+      (d, S) => {
+        r.value && (clearTimeout(r.value), r.value = null), d ? r.value = setTimeout(() => {
+          l.value = !0, r.value = null;
+        }, 150) : l.value = !1;
+      },
+      { immediate: !0 }
+    );
+    const x = j("connectionStore"), A = j("analyticsStore");
+    if (!x)
+      throw new Error("Connection store not found!");
+    const D = async () => {
+      if (!g.value) return;
+      const d = e.getDashboardQueryExecutor(e.dashboardId);
+      if (!d)
+        throw new Error("Dashboard query executor not found!");
+      try {
+        A && A.log("dashboard-table-execution", "TABLE", !0), i.value && d.cancelQuery(i.value);
+        let S = await d.runSingle(e.itemId);
+        await d.waitForQuery(S);
+      } catch (S) {
+        console.error("Error setting up query:", S), i.value = null;
+      }
+    };
+    return {
+      chartContainer: a,
+      results: k,
+      ready: n,
+      loading: T,
+      showLoading: l,
+      error: F,
+      query: g,
+      chartHeight: E,
+      chartWidth: M,
+      chartConfig: I,
+      onRefresh: B,
+      handleLocalRefresh: () => {
+        B.value ? B.value(e.itemId) : D();
+      },
+      startTime: _,
+      handleDimensionClick: (d) => {
+        o("dimension-click", {
+          source: e.itemId,
+          filters: d.filters,
+          chart: d.chart,
+          append: d.append
+        });
+      },
+      handleBackgroundClick: () => {
+        o("background-click");
+      },
+      controlsVisible: h,
+      onChartMouseEnter: f,
+      onChartMouseLeave: v
+    };
+  }
+}), Nn = {
+  key: 2,
+  class: "loading-overlay"
+};
+function Kn(e, o, n, a, i, l) {
+  const r = J("ErrorMessage"), h = J("dashboard-data-selector"), f = J("LoadingView");
+  return m(), p("div", {
+    ref: "chartContainer",
+    class: H(["chart-placeholder no-drag", { "chart-placeholder-edit-mode": e.editMode }]),
+    onMouseenter: o[0] || (o[0] = (...v) => e.onChartMouseEnter && e.onChartMouseEnter(...v)),
+    onMouseleave: o[1] || (o[1] = (...v) => e.onChartMouseLeave && e.onChartMouseLeave(...v))
+  }, [
+    e.error && !e.loading ? (m(), Z(r, {
+      key: 0,
+      class: "chart-placeholder"
+    }, {
+      default: ie(() => [
+        G(N(e.error), 1)
+      ]),
+      _: 1
+    })) : e.ready && e.results ? (m(), Z(h, {
+      key: 1,
+      id: `${e.itemId}-${e.dashboardId}`,
+      headers: e.results.headers,
+      results: e.results.data,
+      containerHeight: e.chartHeight,
+      prettyPrint: !0,
+      fitParent: !0,
+      onCellClick: e.handleDimensionClick,
+      onBackgroundClick: e.handleBackgroundClick
+    }, null, 8, ["id", "headers", "results", "containerHeight", "onCellClick", "onBackgroundClick"])) : R("", !0),
+    e.loading && e.showLoading ? (m(), p("div", Nn, [
+      z(f, {
+        startTime: e.startTime,
+        text: "Loading"
+      }, null, 8, ["startTime"])
+    ])) : R("", !0)
+  ], 34);
+}
+const _n = /* @__PURE__ */ ee(Pn, [["render", Kn], ["__scopeId", "data-v-2e938e5d"]]), Wn = ["data-testid"], Un = ["data-testid"], jn = ["data-testid"], zn = ["data-testid"], Gn = ["data-testid", "title"], Yn = {
+  key: 0,
+  class: "mdi mdi-filter-remove-outline icon"
+}, Jn = {
+  key: 1,
+  class: "mdi mdi-filter-outline icon"
+}, Zn = ["data-testid"], Xn = ["data-testid"], eo = { class: "item-title-container no-drag" }, to = ["id", "placeholder"], no = { class: "content-area" }, oo = {
+  key: 2,
+  class: "filters-overlay"
+}, io = {
+  key: 0,
+  class: "filters-container edit-mode"
+}, ro = ["title"], lo = { class: "filter-content" }, ao = { class: "filter-source" }, so = { class: "filter-value" }, uo = ["onClick"], co = {
+  key: 0,
+  class: "filters-container view-mode"
+}, mo = {
+  key: 0,
+  class: "filter-summary"
+}, ho = {
+  key: 1,
+  class: "filter-details"
+}, fo = ["title"], vo = { class: "filter-content" }, yo = { class: "filter-source" }, po = { class: "filter-value" }, go = ["onClick", "title"], bo = /* @__PURE__ */ X({
+  __name: "DashboardGridItem",
+  props: {
+    dashboardId: {},
+    item: {},
+    editMode: { type: Boolean },
+    symbols: {},
+    getItemData: { type: Function },
+    getDashboardQueryExecutor: { type: Function },
+    setItemData: { type: Function }
+  },
+  emits: ["edit-content", "update-dimensions", "dimension-click", "background-click", "remove-filter", "remove-item", "copy-item"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = b(!1), l = b(""), r = b(!1), h = b(!1);
+    function f(S) {
+      return S.replace(/'''/g, "'").replace("local.", "");
+    }
+    function v(S, L = 1e3) {
+      const Q = f(S);
+      return Q.length <= L ? Q : Q.substring(0, L) + "...";
+    }
+    function y() {
+      if (!n.editMode) return;
+      const S = n.getItemData(n.item.i, n.dashboardId);
+      i.value = !0, l.value = S.name, setTimeout(() => {
+        const L = document.getElementById(`title-input-${n.item.i}`);
+        L && L.focus();
+      }, 0);
+    }
+    function g() {
+      if (i.value) {
+        const S = n.getItemData(n.item.i, n.dashboardId), L = l.value.trim() || S.name;
+        n.setItemData(n.item.i, n.dashboardId, { name: L }), i.value = !1;
+      }
+    }
+    function k() {
+      const L = !n.getItemData(n.item.i, n.dashboardId).allowCrossFilter;
+      n.setItemData(n.item.i, n.dashboardId, {
+        allowCrossFilter: L
+      });
+    }
+    function T() {
+      const S = n.item.h + 1;
+      n.setItemData(n.item.i, n.dashboardId, {
+        dimensions: {
+          width: n.item.w,
+          height: S
+        }
+      });
+    }
+    function F() {
+      const S = Math.max(1, n.item.h - 1);
+      n.setItemData(n.item.i, n.dashboardId, {
+        dimensions: {
+          width: n.item.w,
+          height: S
+        }
+      });
+    }
+    function _() {
+      i.value = !1;
+    }
+    function E() {
+      a("edit-content", n.item);
+    }
+    function M() {
+      confirm(`Are you sure you want to remove "${D.value.name}"?`) && a("remove-item", n.item.i);
+    }
+    function I() {
+      a("copy-item", n.item.i);
+    }
+    function B(S) {
+      a("dimension-click", S);
+    }
+    function x() {
+      a("background-click", n.item.i);
+    }
+    function A(S) {
+      a("remove-filter", n.item.i, S);
+    }
+    const D = C(() => n.getItemData(n.item.i, n.dashboardId)), U = C(() => {
+      switch (D.value.type) {
+        case $.CHART:
+          return Dn;
+        case $.TABLE:
+          return qn;
+        case $.FILTER:
+          return _n;
+        case $.MARKDOWN:
+        default:
+          return En;
+      }
+    }), w = C(() => {
+      switch (D.value.type) {
+        case $.CHART:
+          return "Chart Name";
+        case $.TABLE:
+          return "Table Name";
+        case $.FILTER:
+          return "Filter Name";
+        case $.MARKDOWN:
+        default:
+          return "Note Name";
+      }
+    }), u = C(() => [$.CHART, $.TABLE, $.MARKDOWN].includes(D.value.type)), d = C(() => D.value.filters ? D.value.filters.length : 0);
+    return (S, L) => (m(), p("div", {
+      class: H(["grid-item-content", {
+        "grid-item-chart-style": [Y($).CHART, Y($).TABLE, Y($).FILTER].includes(
+          //@ts-ignore
+          D.value.type
+        ),
+        "grid-item-edit-style": e.editMode
+      }]),
+      "data-testid": `dashboard-component-${e.item.i}`,
+      onMouseenter: L[1] || (L[1] = () => {
+        r.value = !0, h.value = !0;
+      }),
+      onMouseleave: L[2] || (L[2] = () => {
+        r.value = !1, h.value = !1;
+      })
+    }, [
+      e.editMode ? (m(), p("div", {
+        key: 0,
+        class: H(["header-controls", { "header-visible": r.value || i.value }]),
+        "data-testid": "dashboard-item-header-controls"
+      }, [
+        t("button", {
+          onClick: T,
+          class: "control-btn",
+          "data-testid": `increase-height-item-${e.item.i}`,
+          title: "Increase height"
+        }, [...L[3] || (L[3] = [
+          t("i", { class: "mdi mdi-plus icon" }, null, -1)
+        ])], 8, Un),
+        t("button", {
+          onClick: F,
+          class: "control-btn",
+          "data-testid": `decrease-height-item-${e.item.i}`,
+          title: "Decrease height"
+        }, [...L[4] || (L[4] = [
+          t("i", { class: "mdi mdi-minus icon" }, null, -1)
+        ])], 8, jn),
+        t("button", {
+          onClick: E,
+          class: "control-btn",
+          "data-testid": `edit-dashboard-item-content-${e.item.i}`,
+          title: "Edit data"
+        }, [...L[5] || (L[5] = [
+          t("i", { class: "mdi mdi-database-edit-outline icon" }, null, -1)
+        ])], 8, zn),
+        t("button", {
+          onClick: k,
+          class: "control-btn",
+          "data-testid": `toggle-crossfilter-item-content-${e.item.i}`,
+          title: D.value.allowCrossFilter ? "Toggle cross-filtering OFF" : "Toggle cross-filtering ON"
+        }, [
+          D.value.allowCrossFilter ? (m(), p("i", Yn)) : (m(), p("i", Jn))
+        ], 8, Gn),
+        t("button", {
+          onClick: I,
+          class: "control-btn",
+          "data-testid": `copy-dashboard-item-${e.item.i}`,
+          title: "Copy item"
+        }, [...L[6] || (L[6] = [
+          t("i", { class: "mdi mdi-content-copy icon" }, null, -1)
+        ])], 8, Zn),
+        t("button", {
+          onClick: M,
+          class: "control-btn remove-btn",
+          "data-testid": `remove-dashboard-item-${e.item.i}`,
+          title: "Remove item"
+        }, [...L[7] || (L[7] = [
+          t("i", { class: "mdi mdi-delete-outline icon" }, null, -1)
+        ])], 8, Xn)
+      ], 2)) : R("", !0),
+      e.editMode ? (m(), p("div", {
+        key: 1,
+        class: H(["grid-item-header overlay-header", { "header-visible": r.value || i.value }])
+      }, [
+        L[9] || (L[9] = rt('<div class="drag-handle-icon grid-item-drag-handle" data-v-b6ccdc8d><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="drag-handle-svg" data-v-b6ccdc8d><line x1="3" y1="12" x2="21" y2="12" data-v-b6ccdc8d></line><line x1="3" y1="6" x2="21" y2="6" data-v-b6ccdc8d></line><line x1="3" y1="18" x2="21" y2="18" data-v-b6ccdc8d></line></svg></div>', 1)),
+        t("div", eo, [
+          i.value ? te((m(), p("input", {
+            key: 1,
+            id: `title-input-${e.item.i}`,
+            "onUpdate:modelValue": L[0] || (L[0] = (Q) => l.value = Q),
+            onBlur: g,
+            onKeyup: [
+              Ce(g, ["enter"]),
+              Ce(_, ["esc"])
+            ],
+            class: "title-input",
+            type: "text",
+            placeholder: w.value
+          }, null, 40, to)), [
+            [ye, l.value]
+          ]) : (m(), p("div", {
+            key: 0,
+            class: "item-title editable-title",
+            onClick: y
+          }, [
+            G(N(D.value.name) + " ", 1),
+            L[8] || (L[8] = t("span", { class: "edit-indicator" }, "✎", -1))
+          ]))
+        ])
+      ], 2)) : R("", !0),
+      t("div", no, [
+        (m(), Z(lt(U.value), {
+          dashboardId: n.dashboardId,
+          itemId: e.item.i,
+          setItemData: e.setItemData,
+          getItemData: e.getItemData,
+          getDashboardQueryExecutor: e.getDashboardQueryExecutor,
+          editMode: e.editMode,
+          symbols: n.symbols || [],
+          onDimensionClick: B,
+          onBackgroundClick: x
+        }, null, 40, ["dashboardId", "itemId", "setItemData", "getItemData", "getDashboardQueryExecutor", "editMode", "symbols"]))
+      ]),
+      u.value ? (m(), p("div", oo, [
+        e.editMode ? (m(), p("div", io, [
+          (m(!0), p(ce, null, we(D.value.filters, (Q, K) => (m(), p("div", {
+            class: "filter-tag",
+            key: `${Q.source}-${Q.value}-${K}`,
+            title: f(Q.value)
+          }, [
+            t("span", lo, [
+              t("span", ao, N(Q.source === "global" ? Q.source : "cross") + ": ", 1),
+              t("span", so, N(v(Q.value)), 1)
+            ]),
+            Q.source !== "global" ? (m(), p("button", {
+              key: 0,
+              class: "filter-remove-btn",
+              onClick: (me) => A(Q.source),
+              title: "Remove filter"
+            }, " × ", 8, uo)) : R("", !0)
+          ], 8, ro))), 128))
+        ])) : (m(), p(ce, { key: 1 }, [
+          d.value > 0 ? (m(), p("div", co, [
+            h.value ? R("", !0) : (m(), p("div", mo, [...L[10] || (L[10] = [
+              t("i", { class: "mdi mdi-filter-outline filter-icon" }, null, -1)
+            ])])),
+            h.value ? (m(), p("div", ho, [
+              (m(!0), p(ce, null, we(D.value.filters, (Q, K) => (m(), p("div", {
+                class: "filter-tag",
+                key: `${Q.source}-${Q.value}-${K}`,
+                title: f(Q.value)
+              }, [
+                t("span", vo, [
+                  t("span", yo, N(Q.source === "global" ? Q.source : "cross") + ": ", 1),
+                  t("span", po, N(v(Q.value)), 1)
+                ]),
+                Q.source !== "global" ? (m(), p("button", {
+                  key: 0,
+                  class: "filter-remove-btn",
+                  onClick: (me) => A(Q.source),
+                  title: `Remove ${Q.source} filter`
+                }, " × ", 8, go)) : R("", !0)
+              ], 8, fo))), 128))
+            ])) : R("", !0)
+          ])) : R("", !0)
+        ], 64))
+      ])) : R("", !0)
+    ], 42, Wn));
+  }
+}), gi = /* @__PURE__ */ ee(bo, [["__scopeId", "data-v-b6ccdc8d"]]), Co = { class: "editor-overlay" }, wo = { class: "add-item-modal" }, ko = { class: "item-type-selector" }, Io = ["value"], Do = ["value"], So = ["value"], To = ["value"], Eo = /* @__PURE__ */ X({
+  __name: "DashboardAddItemModal",
+  props: {
+    show: { type: Boolean }
+  },
+  emits: ["add", "close"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = b($.CHART);
+    function l() {
+      a("add", i.value);
+    }
+    function r() {
+      a("close");
+    }
+    function h(f) {
+      const v = document.querySelector(".content-editor");
+      v && !v.contains(f.target) && n.show && a("close");
+    }
+    return pe(() => {
+      Ae(() => {
+        document.addEventListener("click", h);
+      });
+    }), $e(() => {
+      document.removeEventListener("click", h);
+    }), (f, v) => e.show ? (m(), Z(Ue, {
+      key: 0,
+      to: "body"
+    }, [
+      t("div", Co, [
+        t("div", wo, [
+          v[8] || (v[8] = t("h3", null, "Add New Item", -1)),
+          t("div", ko, [
+            t("label", null, [
+              te(t("input", {
+                type: "radio",
+                "onUpdate:modelValue": v[0] || (v[0] = (y) => i.value = y),
+                value: Y($).CHART,
+                "data-testid": "dashboard-add-item-type-chart"
+              }, null, 8, Io), [
+                [Te, i.value]
+              ]),
+              v[4] || (v[4] = G(" Chart ", -1))
+            ]),
+            t("label", null, [
+              te(t("input", {
+                type: "radio",
+                "onUpdate:modelValue": v[1] || (v[1] = (y) => i.value = y),
+                value: Y($).TABLE,
+                "data-testid": "dashboard-add-item-type-table"
+              }, null, 8, Do), [
+                [Te, i.value]
+              ]),
+              v[5] || (v[5] = G(" Table ", -1))
+            ]),
+            t("label", null, [
+              te(t("input", {
+                type: "radio",
+                "onUpdate:modelValue": v[2] || (v[2] = (y) => i.value = y),
+                value: Y($).MARKDOWN,
+                "data-testid": "dashboard-add-item-type-markdown"
+              }, null, 8, So), [
+                [Te, i.value]
+              ]),
+              v[6] || (v[6] = G(" Markdown ", -1))
+            ]),
+            t("label", null, [
+              te(t("input", {
+                type: "radio",
+                "onUpdate:modelValue": v[3] || (v[3] = (y) => i.value = y),
+                value: Y($).FILTER,
+                "data-testid": "dashboard-add-item-type-filter"
+              }, null, 8, To), [
+                [Te, i.value]
+              ]),
+              v[7] || (v[7] = G(" Filter ", -1))
+            ])
+          ]),
+          t("div", { class: "editor-actions" }, [
+            t("button", {
+              onClick: l,
+              class: "add-button",
+              "data-testid": "dashboard-add-item-confirm"
+            }, " Add "),
+            t("button", {
+              onClick: r,
+              class: "cancel-button"
+            }, "Cancel")
+          ])
+        ])
+      ])
+    ])) : R("", !0);
+  }
+}), bi = /* @__PURE__ */ ee(Eo, [["__scopeId", "data-v-440a3716"]]);
+function $o(e = "dark") {
+  Ee.defineTheme("trilogyStudio", {
+    base: e === "light" ? "vs" : "vs-dark",
+    inherit: !0,
+    rules: [
+      { token: "comment", foreground: "#6A9955", fontStyle: "italic" },
+      { token: "keyword", foreground: "#569CD6", fontStyle: "bold" },
+      { token: "definition", foreground: "#E5C07B", fontStyle: "bold" },
+      { token: "type", foreground: "#4EC9B0", fontStyle: "bold" },
+      { token: "string", foreground: "#CE9178" },
+      { token: "number", foreground: "#B5CEA8" },
+      { token: "operator", foreground: "#D4D4D4" },
+      { token: "delimiter", foreground: "#D4D4D4" },
+      { token: "function", foreground: "#C586C0", fontStyle: "bold" },
+      { token: "hidden", foreground: "#D6D6C8", fontStyle: "italic" },
+      { token: "property", foreground: "#BFBFBF" }
+    ],
+    colors: {
+      "editorCursor.foreground": e === "light" ? "#333333" : "#ffffff",
+      "editorCursor.background": e === "light" ? "#ffffff" : "#000000"
+    }
+  }), Ee.setTheme("trilogyStudio");
+}
+function Lo(e, o = {}) {
+  const a = { ...{
+    automaticLayout: !0,
+    autoClosingBrackets: "always",
+    autoClosingOvertype: "always",
+    autoClosingQuotes: "always",
+    acceptSuggestionOnEnter: "off",
+    tabCompletion: "on",
+    theme: "trilogyStudio"
+  }, ...o };
+  return Ee.create(e, a);
+}
+function _e(e, o = "") {
+  var i;
+  if (!e) return o;
+  const n = e.getSelection();
+  let a = n && !(n.startColumn === n.endColumn && n.startLineNumber === n.endLineNumber) ? ((i = e.getModel()) == null ? void 0 : i.getValueInRange(n)) || "" : e.getValue();
+  return a || (a = o), a;
+}
+function Mo(e, o = {}) {
+  const { onValidate: n, onRun: a, onSave: i } = o;
+  if (n && e.addCommand(ae.CtrlCmd | ae.Shift | ve.KeyV, n), a && e.addCommand(ae.CtrlCmd | ve.Enter, a), i && e.addCommand(ae.CtrlCmd | ve.KeyS, i), e.addCommand(ae.CtrlCmd | ve.KeyZ, () => {
+    e.trigger("ide", "undo", {});
+  }), o.onContentChange) {
+    let l = null;
+    e.onDidChangeModelContent(() => {
+      var r;
+      (r = o.onContentChange) == null || r.call(o, e.getValue()), l && clearTimeout(l), l = setTimeout(() => {
+        var h;
+        e.hasTextFocus() && !((h = e.getSelection()) != null && h.isEmpty()) && e.trigger("completion", "editor.action.triggerSuggest", { auto: !0 });
+      }, 200);
+    });
+  }
+}
+let V = null;
+const qo = X({
+  name: "EnhancedEditor",
+  components: {
+    SymbolsPane: yt,
+    LoadingView: De
+  },
+  props: {
+    onSave: {
+      type: null,
+      required: !1,
+      default: null
+    },
+    theme: {
+      type: String,
+      default: "vs-dark"
+    },
+    initContent: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    connectionName: {
+      type: String,
+      required: !0
+    },
+    imports: {
+      type: Array,
+      required: !1,
+      default: () => []
+    },
+    rootContent: {
+      type: Array,
+      required: !1,
+      default: () => []
+    }
+  },
+  emits: ["query-started", "format-query"],
+  data() {
+    return {
+      lastOperation: null,
+      editor: new pt({
+        id: "simple-editor",
+        name: "My Query",
+        type: "trilogy",
+        connection: this.connectionName,
+        storage: "local",
+        contents: this.initContent
+      }),
+      // New properties for collapsible sidebar
+      activePanel: "symbols",
+      isPanelVisible: !1
+    };
+  },
+  setup() {
+    const e = j("queryExecutionService"), o = j("connectionStore"), n = j("isMobile"), a = j("llmConnectionStore"), i = j("analyticsStore");
+    return {
+      queryExecutionService: e,
+      connectionStore: o,
+      isMobile: n,
+      llmConnectionStore: a,
+      analyticsStore: i
+    };
+  },
+  created() {
+    this.isPanelVisible = !this.isMobile;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.createEditor(), document.addEventListener("keydown", this.handleKeyboardShortcuts), this.validateQuery();
+    });
+  },
+  beforeUnmount() {
+    V && V.dispose(), document.removeEventListener("keydown", this.handleKeyboardShortcuts);
+  },
+  methods: {
+    // New methods for panel management
+    togglePanel(e) {
+      this.activePanel === e && this.isPanelVisible ? this.isPanelVisible = !1 : (this.activePanel = e, this.isPanelVisible = !0, e === "symbols" && this.$refs.symbolsPane && this.$nextTick(() => {
+        this.focusSymbolSearch();
+      })), V && this.$nextTick(() => {
+        V == null || V.layout();
+      });
+    },
+    closePanel() {
+      this.isPanelVisible = !1, V && this.$nextTick(() => {
+        V == null || V.layout();
+      });
+    },
+    getPanelTitle() {
+      switch (this.activePanel) {
+        case "symbols":
+          return "Symbols";
+        default:
+          return "";
+      }
+    },
+    createEditor() {
+      $o(this.theme === "vs-dark" ? "dark" : "light"), V = Lo(this.$refs.editorElement, {
+        value: this.editor.contents || "",
+        language: this.editor.type === "sql" ? "sql" : "trilogy"
+      }), Mo(V, {
+        onValidate: () => this.validateQuery(),
+        onRun: () => this.runQuery(),
+        onGenerateLLM: () => this.generateLLMQuery()
+        // Add LLM generation shortcut
+      }), V.addCommand(ae.CtrlCmd | ve.Space, () => {
+        this.togglePanel("symbols");
+      }), V.addCommand(ae.CtrlCmd | ae.Shift | ve.Enter, () => {
+        this.generateLLMQuery();
+      }), this.editor.type !== "sql" && V.addCommand(ae.CtrlCmd | ve.KeyK, () => {
+        this.formatQuery();
+      });
+    },
+    handleKeyboardShortcuts(e) {
+      e.ctrlKey && e.shiftKey && e.key === "O" && (this.togglePanel("symbols"), e.preventDefault()), e.ctrlKey && e.shiftKey && e.key === "Enter" && (this.generateLLMQuery(), e.preventDefault()), e.ctrlKey && e.key === "k" && this.editor.type !== "sql" && (this.formatQuery(), e.preventDefault());
+    },
+    focusSymbolSearch() {
+      const e = this.$refs.symbolsPane;
+      e && "focusSearch" in e && e.focusSearch();
+    },
+    insertSymbol(e) {
+      if (!V) return;
+      const o = V.getPosition();
+      o && e.insertText && (V.executeEdits("", [
+        {
+          range: new gt(
+            o.lineNumber,
+            o.column,
+            o.lineNumber,
+            o.column
+          ),
+          text: e.insertText
+        }
+      ]), V.focus(), this.isMobile && this.closePanel());
+    },
+    async validateQuery(e = !0) {
+      if (!V) return [];
+      const o = this.connectionStore, n = this.queryExecutionService;
+      try {
+        this.editor.setError(null);
+        const a = V.getValue(), i = o.connections[this.editor.connection], l = {
+          text: a,
+          queryType: i ? i.query_type : "trilogy",
+          editorType: this.editor.type,
+          sources: [],
+          imports: this.imports,
+          extraContent: this.rootContent
+        }, r = await n.validateQuery(
+          this.editor.connection,
+          l
+        );
+        if (r && e) {
+          const h = V.getModel();
+          h && Ee.setModelMarkers(h, "owner", r.data.items || []), r.data.completion_items && (this.editor.completionSymbols = r.data.completion_items);
+        }
+        return r ? r.data.imports : [];
+      } catch (a) {
+        return a instanceof Error ? this.editor.setError(a.message || "Validation failed") : this.editor.setError("Validation failed"), [];
+      }
+    },
+    async formatQuery() {
+      var i;
+      const e = V, o = _e(e, this.editor.contents);
+      if (!o || !e) return;
+      let n = (i = this.connectionStore) == null ? void 0 : i.connections[this.editor.connection], a = this.queryExecutionService;
+      if (a)
+        try {
+          const l = await a.formatQuery(
+            o,
+            n ? n.query_type : "",
+            this.editor.type,
+            this.imports,
+            this.rootContent
+          );
+          l && e.setValue(l);
+        } catch (l) {
+          console.error("Error formatting query:", l);
+        }
+    },
+    async cancelQuery() {
+      this.editor.cancelCallback && await this.editor.cancelCallback(), this.editor.loading = !1;
+    },
+    async runQuery() {
+      var i, l, r;
+      this.$emit("query-started"), this.editor.setError(null);
+      let e = !1;
+      const o = this.connectionStore, n = this.queryExecutionService, a = V;
+      if (!(this.editor.loading || !a))
+        try {
+          this.analyticsStore && this.analyticsStore.log("studio-query-execution", this.editor.type, !0), this.editor.loading = !0, this.lastOperation = null, this.editor.startTime = Date.now();
+          const h = o.connections[this.editor.connection], f = _e(a, this.editor.contents);
+          if (!f) {
+            this.editor.results = new Ne(/* @__PURE__ */ new Map(), []), this.editor.loading = !1;
+            return;
+          }
+          const v = {
+            text: f,
+            queryType: h ? h.query_type : "",
+            editorType: this.editor.type,
+            imports: this.imports,
+            extraContent: this.rootContent
+          }, { resultPromise: y, cancellation: g } = await n.executeQuery(
+            this.editor.connection,
+            v,
+            // Progress callback for connection issues
+            () => {
+            },
+            (T) => {
+              !e && T.error && (this.editor.loading = !1, T.message && this.editor.setError(T.message)), !e && T.running && (this.editor.error = null, this.editor.loading = !0);
+            }
+          );
+          this.editor.cancelCallback = () => {
+            g.isActive() && g.cancel(), this.editor.loading = !1, this.editor.cancelCallback = null;
+          };
+          const k = await y;
+          e = !0, this.lastOperation = {
+            success: k.success,
+            duration: k.executionTime,
+            rows: (i = k.results) != null && i.data ? (r = (l = k.results) == null ? void 0 : l.data) == null ? void 0 : r.length : void 0,
+            type: this.editor.type
+          }, k.success ? (k.generatedSql && (this.editor.generated_sql = k.generatedSql), k.results && (this.editor.results = k.results, this.editor.duration = k.executionTime)) : k.error && this.editor.setError(k.error);
+        } catch (h) {
+          h instanceof Error && this.editor.setError(h.message || "Query execution failed"), this.lastOperation = {
+            success: !1,
+            duration: 0,
+            type: this.editor.type
+          };
+        } finally {
+          this.editor.loading = !1, this.editor.cancelCallback = null, V && V.layout();
+        }
+    },
+    // Add the LLM query generation method
+    async generateLLMQuery() {
+      if (this.editor.loading || !V) return;
+      const e = this.llmConnectionStore, o = this.queryExecutionService, n = this.connectionStore;
+      if (!e) {
+        this.editor.setError("LLM connection store not available");
+        return;
+      }
+      try {
+        this.analyticsStore && this.analyticsStore.log("studio-llm-generation", this.editor.type, !0), this.editor.loading = !0, this.editor.startTime = Date.now(), this.editor.results = new Ne(/* @__PURE__ */ new Map(), []), this.editor.setError(null);
+        const a = V.getValue();
+        if (await this.validateQuery(!1), !this.editor.completionSymbols || this.editor.completionSymbols.length === 0)
+          throw new Error("There are no imported concepts for LLM generation");
+        const i = this.editor.completionSymbols.map((h) => ({
+          name: h.label,
+          type: h.datatype,
+          description: h.description,
+          calculation: h.calculation
+        })), l = async (h) => {
+          const f = n.connections[this.editor.connection], v = {
+            text: h,
+            queryType: f ? f.query_type : "",
+            editorType: this.editor.type,
+            imports: this.imports,
+            extraContent: this.rootContent
+          };
+          try {
+            const { resultPromise: y } = await o.executeQuery(
+              this.editor.connection,
+              v,
+              () => {
+              },
+              () => {
+              },
+              (g) => {
+                throw g;
+              },
+              () => !0,
+              !0
+              // Explain mode
+            );
+            return await y, !0;
+          } catch (y) {
+            throw y;
+          }
+        }, r = await e.generateQueryCompletion(a, i, l);
+        if (r)
+          V.setValue(r.content), this.editor.contents = V.getValue(), this.lastOperation = {
+            success: !0,
+            duration: Date.now() - (this.editor.startTime || 0),
+            type: "LLM Generation"
+          };
+        else
+          throw new Error("LLM could not successfully generate query");
+      } catch (a) {
+        if (a instanceof Error)
+          throw this.editor.setError(a.message), a;
+        this.editor.setError("Unknown error occurred during LLM generation"), this.lastOperation = {
+          success: !1,
+          duration: 0,
+          type: "LLM Generation"
+        };
+      } finally {
+        this.editor.loading = !1, V && V.layout();
+      }
+    },
+    getContent() {
+      return V ? V.getValue() : this.editor.contents || "";
+    }
+  }
+}), Ao = { class: "editor-container" }, Ro = { class: "menu-bar" }, Fo = { class: "menu-actions" }, xo = { class: "editor-content" }, Qo = { class: "sidebar-panel" }, Vo = { class: "be-sidebar-container" }, Bo = { class: "be-sidebar-icons" }, Oo = { class: "result-wrapper" }, Ho = {
+  key: 1,
+  class: "error-message"
+}, Po = {
+  key: 2,
+  class: "results-summary",
+  "data-testid": "simple-editor-results"
+}, No = { class: "results-details" }, Ko = {
+  key: 0,
+  class: "timing"
+}, _o = {
+  key: 1,
+  class: "row-count"
+}, Wo = {
+  key: 2,
+  class: "operation-type"
+};
+function Uo(e, o, n, a, i, l) {
+  const r = J("SymbolsPane"), h = J("loading-view");
+  return m(), p("div", Ao, [
+    t("div", Ro, [
+      t("div", Fo, [
+        t("button", {
+          class: "action-item",
+          onClick: o[0] || (o[0] = (...f) => e.generateLLMQuery && e.generateLLMQuery(...f)),
+          title: "Generate query using AI",
+          "data-testid": "editor-generate-button"
+        }, " Generate "),
+        e.editor.type !== "sql" ? (m(), p("button", {
+          key: 0,
+          class: "action-item",
+          onClick: o[1] || (o[1] = () => e.validateQuery())
+        }, " Parse ")) : R("", !0),
+        e.editor.type !== "sql" ? (m(), p("button", {
+          key: 1,
+          class: "action-item",
+          onClick: o[2] || (o[2] = (...f) => e.formatQuery && e.formatQuery(...f)),
+          title: "Format query"
+        }, " Format ")) : R("", !0),
+        t("button", {
+          onClick: o[3] || (o[3] = (f) => e.editor.loading ? e.cancelQuery() : e.runQuery()),
+          class: H(["action-item", { "button-cancel": e.editor.loading }]),
+          "data-testid": "editor-run-button"
+        }, N(e.editor.loading ? "Cancel" : "Test"), 3)
+      ])
+    ]),
+    t("div", xo, [
+      t("div", {
+        ref: "editorElement",
+        class: H(["editor-obj", {
+          "monaco-width-with-panel": e.isPanelVisible,
+          "monaco-width-no-panel": !e.isPanelVisible
+        }]),
+        "data-testid": "simple-editor-content"
+      }, null, 2),
+      te(t("div", Qo, [
+        z(r, {
+          symbols: e.editor.completionSymbols || [],
+          onSelectSymbol: e.insertSymbol,
+          ref: "symbolsPane"
+        }, null, 8, ["symbols", "onSelectSymbol"])
+      ], 512), [
+        [at, e.isPanelVisible]
+      ]),
+      t("div", Vo, [
+        t("div", Bo, [
+          t("button", {
+            class: H(["sidebar-icon-button", { active: e.isPanelVisible }]),
+            onClick: o[4] || (o[4] = (f) => e.togglePanel("symbols")),
+            title: "Symbols"
+          }, [...o[5] || (o[5] = [
+            t("i", { class: "mdi mdi-tag-search-outline" }, null, -1)
+          ])], 2)
+        ])
+      ])
+    ]),
+    t("div", Oo, [
+      e.editor.loading ? (m(), Z(h, {
+        key: 0,
+        class: "loading-view",
+        text: "Loading...",
+        startTime: e.editor.startTime
+      }, null, 8, ["startTime"])) : e.editor.error ? (m(), p("div", Ho, N(e.editor.error), 1)) : e.lastOperation ? (m(), p("div", Po, [
+        t("div", {
+          class: H(["status-badge", e.lastOperation.success ? "success" : "error"])
+        }, N(e.lastOperation.success ? "SUCCESS" : "FAILED"), 3),
+        t("div", No, [
+          e.lastOperation.duration ? (m(), p("div", Ko, N(e.lastOperation.duration) + "ms", 1)) : R("", !0),
+          e.lastOperation.rows !== void 0 ? (m(), p("div", _o, N(e.lastOperation.rows) + " " + N(e.lastOperation.rows === 1 ? "row" : "rows"), 1)) : R("", !0),
+          e.lastOperation.type ? (m(), p("div", Wo, N(e.lastOperation.type), 1)) : R("", !0)
+        ])
+      ])) : R("", !0)
+    ])
+  ]);
+}
+const Ze = /* @__PURE__ */ ee(qo, [["render", Uo], ["__scopeId", "data-v-0acd56f6"]]), jo = { class: "editor-overlay" }, zo = { class: "editor-body" }, Go = /* @__PURE__ */ X({
+  __name: "DashboardChartEditor",
+  props: {
+    content: {},
+    connectionName: {},
+    imports: {},
+    rootContent: {},
+    showing: { type: Boolean },
+    initialWidth: {},
+    initialHeight: {}
+  },
+  emits: ["save", "cancel"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = b(n.content), l = b(n.imports), r = b(null), { editorElement: h, dialogStyle: f, startResize: v } = Ye(() => a("cancel"), {
+      initialWidth: n.initialWidth,
+      initialHeight: n.initialHeight
+    });
+    function y() {
+      if (r.value) {
+        const k = r.value.getContent();
+        a("save", k);
+      }
+    }
+    function g() {
+      a("cancel");
+    }
+    return (k, T) => (m(), p("div", jo, [
+      t("div", {
+        class: "content-editor",
+        ref_key: "editorElement",
+        ref: h,
+        style: Ie(Y(f))
+      }, [
+        t("div", zo, [
+          z(Ze, {
+            class: "editor-content",
+            initContent: i.value,
+            connectionName: e.connectionName,
+            imports: l.value,
+            rootContent: e.rootContent,
+            ref_key: "editor",
+            ref: r
+          }, null, 8, ["initContent", "connectionName", "imports", "rootContent"])
+        ]),
+        t("div", { class: "editor-actions" }, [
+          t("button", {
+            onClick: y,
+            class: "save-button",
+            "data-testid": "save-dashboard-chart"
+          }, " Save Query "),
+          t("button", {
+            onClick: g,
+            class: "cancel-button"
+          }, "Cancel")
+        ]),
+        z(Je, { onStartResize: Y(v) }, null, 8, ["onStartResize"])
+      ], 4)
+    ]));
+  }
+}), Ci = /* @__PURE__ */ ee(Go, [["__scopeId", "data-v-b0e7bd68"]]), Yo = { class: "editor-overlay" }, Jo = { class: "tab-header" }, Zo = { class: "editor-body" }, Xo = {
+  key: 0,
+  class: "tab-content"
+}, ei = {
+  key: 1,
+  class: "tab-content"
+}, ti = /* @__PURE__ */ X({
+  __name: "DashboardMarkdownEditor",
+  props: {
+    content: {},
+    connectionName: {},
+    imports: {},
+    rootContent: {},
+    initialWidth: {},
+    initialHeight: {}
+  },
+  emits: ["save", "cancel"],
+  setup(e, { emit: o }) {
+    const n = e, a = o, i = C(() => typeof n.content == "string" ? { markdown: n.content, query: "" } : { markdown: n.content.markdown || "", query: n.content.query || "" }), l = b(i.value.markdown), r = b(i.value.query), h = b(i.value.query), f = b(n.imports), v = b(null), y = b("markdown"), { editorElement: g, dialogStyle: k, startResize: T } = Ye(() => a("cancel"), {
+      initialWidth: n.initialWidth,
+      initialHeight: n.initialHeight
+    });
+    ne(
+      () => n.content,
+      (u) => {
+        const d = typeof u == "string" ? { markdown: u, query: "" } : { markdown: u.markdown || "", query: u.query || "" };
+        l.value = d.markdown, r.value = d.query, h.value = d.query;
+      }
+    ), ne(y, (u, d) => {
+      d === "query" && v.value && (h.value = v.value.getContent());
+    });
+    function F() {
+      y.value === "query" && v.value && (h.value = v.value.getContent());
+      const u = {
+        markdown: l.value,
+        query: h.value
+      };
+      a("save", u);
+    }
+    function _() {
+      a("cancel");
+    }
+    function E(u) {
+      y.value === "query" && v.value && (h.value = v.value.getContent()), y.value = u;
+    }
+    function M(u, d = "") {
+      const S = document.querySelector(".markdown-editor");
+      if (!S) return;
+      const L = S.selectionStart, Q = S.selectionEnd, K = l.value.substring(L, Q), me = l.value.substring(0, L), he = l.value.substring(Q);
+      l.value = me + u + K + d + he, setTimeout(() => {
+        S.focus(), S.setSelectionRange(L + u.length, L + u.length + K.length);
+      }, 0);
+    }
+    function I() {
+      M("**", "**");
+    }
+    function B() {
+      M("*", "*");
+    }
+    function x() {
+      M("## ");
+    }
+    function A() {
+      M("- ");
+    }
+    function D() {
+      M("[", "](url)");
+    }
+    function U() {
+      M("{data[0].field_name}");
+    }
+    function w() {
+      M(`{{#each data}}
+- {{field_name}}
+{{/each}}`);
+    }
+    return (u, d) => (m(), p("div", Yo, [
+      t("div", {
+        class: "content-editor",
+        ref_key: "editorElement",
+        ref: g,
+        style: Ie(Y(k))
+      }, [
+        t("div", Jo, [
+          t("button", {
+            onClick: d[0] || (d[0] = (S) => E("markdown")),
+            class: H([{ active: y.value === "markdown" }, "tab-button"])
+          }, " 📝 Markdown Template ", 2),
+          t("button", {
+            onClick: d[1] || (d[1] = (S) => E("query")),
+            class: H([{ active: y.value === "query" }, "tab-button"])
+          }, " 🔍 Data Query ", 2)
+        ]),
+        t("div", Zo, [
+          y.value === "markdown" ? (m(), p("div", Xo, [
+            t("div", { class: "markdown-toolbar" }, [
+              t("button", {
+                onClick: I,
+                title: "Bold"
+              }, [...d[3] || (d[3] = [
+                t("strong", null, "B", -1)
+              ])]),
+              t("button", {
+                onClick: B,
+                title: "Italic"
+              }, [...d[4] || (d[4] = [
+                t("em", null, "I", -1)
+              ])]),
+              t("button", {
+                onClick: x,
+                title: "Heading"
+              }, "H"),
+              t("button", {
+                onClick: A,
+                title: "List"
+              }, "•"),
+              t("button", {
+                onClick: D,
+                title: "Link"
+              }, "🔗"),
+              d[5] || (d[5] = t("div", { class: "toolbar-separator" }, null, -1)),
+              t("button", {
+                onClick: U,
+                title: "Insert data reference",
+                class: "data-button"
+              }, " {} "),
+              t("button", {
+                onClick: w,
+                title: "Insert loop",
+                class: "data-button"
+              }, "↻")
+            ]),
+            te(t("textarea", {
+              "onUpdate:modelValue": d[2] || (d[2] = (S) => l.value = S),
+              placeholder: `Enter markdown content here...\r
+\r
+Template examples:\r
+- {field_name} - First row value\r
+- {data[0].field_name} - Specific row\r
+- {data.length} - Total rows\r
+- {{#each data}} {{field_name}} {{/each}} - Loop all\r
+- {{#each data limit=5}} {{field_name}} {{/each}} - Loop first 5`,
+              class: "markdown-editor"
+            }, null, 512), [
+              [ye, l.value]
+            ])
+          ])) : R("", !0),
+          y.value === "query" ? (m(), p("div", ei, [
+            d[6] || (d[6] = t("div", { class: "query-help" }, [
+              t("p", null, " Write a query to fetch data for your markdown template. Leave empty if no data is needed. ")
+            ], -1)),
+            z(Ze, {
+              class: "editor-content",
+              initContent: h.value,
+              connectionName: e.connectionName,
+              imports: f.value,
+              rootContent: e.rootContent,
+              ref_key: "editor",
+              ref: v
+            }, null, 8, ["initContent", "connectionName", "imports", "rootContent"])
+          ])) : R("", !0)
+        ]),
+        t("div", { class: "editor-actions" }, [
+          t("button", {
+            onClick: F,
+            class: "save-button",
+            "data-testid": "save-dashboard-markdown"
+          }, " Save Content "),
+          t("button", {
+            onClick: _,
+            class: "cancel-button"
+          }, "Cancel")
+        ]),
+        z(Je, { onStartResize: Y(T) }, null, 8, ["onStartResize"])
+      ], 4)
+    ]));
+  }
+}), wi = /* @__PURE__ */ ee(ti, [["__scopeId", "data-v-048afde5"]]), ni = { class: "dashboard-setup" }, oi = { class: "setup-section" }, ii = {
+  key: 0,
+  class: "setup-section"
+}, ri = { class: "action-row" }, li = ["disabled"], ai = {
+  key: 0,
+  class: "error-message"
+}, si = { class: "setup-section" }, ui = { class: "templates-grid" }, di = ["onClick", "data-testid"], ci = { class: "template-icon" }, mi = { class: "template-info" }, hi = { class: "template-title" }, fi = { class: "template-desc" }, P = 20, ki = /* @__PURE__ */ X({
+  __name: "DashboardCTA",
+  props: {
+    dashboardId: {}
+  },
+  emits: ["template-selected", "description-updated"],
+  setup(e, { emit: o }) {
+    const n = j("dashboardStore"), a = j("editorStore"), i = j("llmConnectionStore"), l = j(
+      "queryExecutionService"
+    ), r = j("saveDashboards");
+    if (!n || !i || !l || !r)
+      throw new Error("DashboardStore, LLMConnectionStore, or QueryExecutionService not provided");
+    const h = e, f = C(() => i.activeConnection), v = o, y = b(""), g = b(""), k = b(!1), T = b(""), F = b(null), _ = P / 4, E = [
+      {
+        id: "summary",
+        name: "Summary Dashboard",
+        description: "High-level metrics and KPIs with key visualizations",
+        icon: "mdi-view-dashboard",
+        layout: [
+          { i: "title", x: 0, y: 0, w: P, h: 3, type: $.MARKDOWN },
+          { i: "kpi1", x: 0, y: 3, w: P / 4, h: 4, type: $.CHART },
+          { i: "kpi2", x: _, y: 3, w: P / 4, h: 4, type: $.CHART },
+          { i: "kpi3", x: _ * 2, y: 3, w: P / 4, h: 4, type: $.CHART },
+          { i: "kpi4", x: _ * 3, y: 3, w: P / 4, h: 4, type: $.CHART },
+          { i: "trend", x: 0, y: 7, w: P / 2, h: 8, type: $.CHART },
+          { i: "breakdown", x: P / 2, y: 7, w: P / 2, h: 8, type: $.CHART }
+        ]
+      },
+      {
+        id: "drilldown",
+        name: "Drill-Down Analysis",
+        description: "Hierarchical data exploration with filtering capabilities",
+        icon: "mdi-magnify-expand",
+        layout: [
+          { i: "filters", x: 0, y: 0, w: P, h: 3, type: $.MARKDOWN },
+          { i: "overview", x: 0, y: 3, w: P, h: 5, type: $.CHART },
+          { i: "detail1", x: 0, y: 8, w: P / 2, h: 8, type: $.CHART },
+          { i: "detail2", x: P / 2, y: 10, w: P / 2, h: 8, type: $.CHART },
+          { i: "datatable", x: 0, y: 20, w: P, h: 8, type: $.TABLE }
+        ]
+      },
+      {
+        id: "comparison",
+        name: "Comparison Dashboard",
+        description: "Side-by-side comparisons of metrics across dimensions",
+        icon: "mdi-compare",
+        layout: [
+          { i: "title", x: 0, y: 0, w: P, h: 3, type: $.MARKDOWN },
+          { i: "compare1", x: 0, y: 3, w: P / 2, h: 6, type: $.CHART },
+          { i: "compare2", x: P / 2, y: 3, w: P / 2, h: 6, type: $.CHART },
+          { i: "compare3", x: 0, y: 9, w: P / 2, h: 6, type: $.CHART },
+          { i: "compare4", x: P / 2, y: 9, w: P / 2, h: 6, type: $.CHART },
+          { i: "summary", x: 0, y: 15, w: P, h: 5, type: $.MARKDOWN }
+        ]
+      },
+      {
+        id: "trends",
+        name: "Time Series Analysis",
+        description: "Visualization of trends and patterns over time",
+        icon: "mdi-chart-timeline-variant",
+        layout: [
+          { i: "headline", x: 0, y: 0, w: P, h: 3, type: $.MARKDOWN },
+          { i: "maintrend", x: 0, y: 3, w: P, h: 8, type: $.CHART },
+          { i: "breakdown1", x: 0, y: 11, w: P / 3, h: 6, type: $.CHART },
+          { i: "breakdown2", x: P / 3, y: 11, w: P / 3, h: 6, type: $.CHART },
+          { i: "breakdown3", x: P / 3 * 2, y: 11, w: P / 3, h: 6, type: $.CHART },
+          { i: "forecast", x: 0, y: 17, w: P, h: 6, type: $.CHART }
+        ]
+      }
+      //   {
+      //     id: 'custom',
+      //     name: 'Start from Scratch',
+      //     description: 'Build your dashboard completely from scratch',
+      //     icon: 'mdi-pencil-outline',
+      //     layout: []
+      //   }
+    ];
+    function M(x) {
+      F.value = x;
+      const A = E.find((D) => D.id === x);
+      if (A && h.dashboardId) {
+        for (const D of A.layout)
+          n.addItemToDashboard(
+            h.dashboardId,
+            D.type,
+            D.x,
+            D.y,
+            D.w,
+            D.h
+          );
+        v("template-selected", x);
+      }
+    }
+    function I() {
+      h.dashboardId && y.value && (n.updateDashboardDescription(h.dashboardId, y.value), v("description-updated", y.value));
+    }
+    async function B() {
+      if (!g.value.trim()) {
+        T.value = "Please provide a prompt for the dashboard generation.";
+        return;
+      }
+      try {
+        k.value = !0, T.value = "";
+        const x = await n.generatePromptSpec(
+          g.value,
+          i,
+          l,
+          a
+        );
+        console.log("Prompt spec generated:", x), x ? (await n.populateFromPromptSpec(
+          h.dashboardId,
+          x,
+          i,
+          l,
+          a
+        ), !y.value && x.description && (y.value = x.description, I()), r()) : T.value = "Failed to generate dashboard specification.";
+      } catch (x) {
+        console.error("Error generating dashboard with LLM:", x), T.value = "An error occurred while generating the dashboard.";
+      } finally {
+        k.value = !1;
+      }
+    }
+    return (x, A) => (m(), p("div", ni, [
+      A[7] || (A[7] = t("div", { class: "setup-header" }, [
+        t("h2", { class: "setup-title" }, "An Empty Dashboard"),
+        t("p", { class: "setup-subtitle" }, " Choose a template or start from scratch by using the 'add item' button to add charts, tables, and more. ")
+      ], -1)),
+      t("div", oi, [
+        A[3] || (A[3] = t("h3", { class: "section-title" }, "Description", -1)),
+        te(t("textarea", {
+          "onUpdate:modelValue": A[0] || (A[0] = (D) => y.value = D),
+          placeholder: "What is this dashboard for? Add context to help viewers understand the data...",
+          rows: "3",
+          class: "description-input"
+        }, null, 512), [
+          [ye, y.value]
+        ]),
+        t("button", {
+          onClick: I,
+          class: "action-button save-button",
+          "data-testid": "dashboard-description-save"
+        }, [...A[2] || (A[2] = [
+          t("i", { class: "mdi mdi-content-save" }, null, -1),
+          G(" Save ", -1)
+        ])])
+      ]),
+      f.value ? (m(), p("div", ii, [
+        A[4] || (A[4] = t("h3", { class: "section-title" }, "AI Copilot", -1)),
+        A[5] || (A[5] = t("p", { class: "section-desc" }, " Let AI help build your dashboard based on your data and description ", -1)),
+        te(t("textarea", {
+          "onUpdate:modelValue": A[1] || (A[1] = (D) => g.value = D),
+          placeholder: "Describe the dashboard you want to create. For example: 'Create a sales performance dashboard with monthly trends, regional breakdown, and top product metrics.'",
+          rows: "4",
+          class: "description-input",
+          "data-testid": "dashboard-prompt-input"
+        }, null, 512), [
+          [ye, g.value]
+        ]),
+        t("div", ri, [
+          t("button", {
+            onClick: B,
+            class: "action-button llm-button",
+            disabled: k.value || !g.value.trim(),
+            "data-testid": "generate-with-llm-button"
+          }, [
+            t("i", {
+              class: H(["mdi", k.value ? "mdi-loading mdi-spin" : "mdi-creation"])
+            }, null, 2),
+            G(" " + N(k.value ? "Generating..." : "Generate with AI"), 1)
+          ], 8, li),
+          T.value ? (m(), p("div", ai, N(T.value), 1)) : R("", !0)
+        ])
+      ])) : R("", !0),
+      t("div", si, [
+        A[6] || (A[6] = t("h3", { class: "section-title" }, "Templates", -1)),
+        t("div", ui, [
+          (m(), p(ce, null, we(E, (D) => t("div", {
+            key: D.id,
+            class: H(["template-card", { selected: F.value === D.id }]),
+            onClick: (U) => M(D.id),
+            "data-testid": `template-card-${D.id}`
+          }, [
+            t("div", ci, [
+              t("i", {
+                class: H(["mdi", D.icon])
+              }, null, 2)
+            ]),
+            t("div", mi, [
+              t("h4", hi, N(D.name), 1),
+              t("p", fi, N(D.description), 1)
+            ])
+          ], 10, di)), 64))
+        ])
+      ])
+    ]));
+  }
+});
+function Ii(e, o, n, a) {
+  if (!e.value)
+    throw new Error("Dashboard computed reference is required");
+  const i = bt(), l = ze();
+  let r = j("queryExecutionService");
+  const h = je(), { setActiveDashboard: f } = Ge();
+  if (!r)
+    throw new Error("QueryExecutionService not provided");
+  const v = b(""), y = b(""), g = b(""), k = b(null), T = b(null), F = b(!1), _ = b(!1), E = b(!1), M = b([]), I = C(() => o.maxWidth || "100vw"), B = C(() => e.value ? e.value.layout : []), x = C(() => e.value ? [...e.value.layout].sort((c, q) => (c.y + c.y + c.h) / 2 - (q.y + q.y + q.h) / 2) : []), A = C(() => e.value ? e.value.connection : ""), D = C(() => o.viewMode ? !1 : e.value ? e.value.state === "editing" : !1), U = C(() => e.value ? e.value.imports.map((c) => {
+    var q, s;
+    return {
+      alias: c.name,
+      // legacy handling
+      contents: ((q = l.editors[c.id]) == null ? void 0 : q.contents) || ((s = l.editors[c.name]) == null ? void 0 : s.contents) || ""
+    };
+  }) : []);
+  function w(c) {
+    if (!(c != null && c.id)) return;
+    c.state === "fullscreen" && n.fullScreen(!0), i.setActiveDashboard(c.id), g.value = "", v.value = "", y.value = "", M.value = [], c.filter && (v.value = c.filter, y.value = c.filter);
+    const q = qe(c.id), s = Object.keys(c.gridItems).filter(
+      (O) => !c.gridItems[O].results
+    );
+    q == null || q.runBatch(s), L();
+  }
+  ne(
+    () => {
+      var c;
+      return (c = e.value) == null ? void 0 : c.id;
+    },
+    (c, q) => {
+      c && c !== q && e.value && w(e.value);
+    }
+  ), pe(() => {
+    e.value && w(e.value);
+    const c = new ResizeObserver(() => {
+      n.triggerResize();
+    }), q = o.isMobile ? ".mobile-container" : ".grid-container", s = document.querySelector(q);
+    s && c.observe(s);
+  }), We(() => {
+    k.value !== null && clearTimeout(k.value);
+  });
+  async function u() {
+    var c;
+    if (e.value && e.value.id) {
+      v.value = "", y.value = "", g.value = "";
+      let q = i.removeAllFilters(e.value.id);
+      await ((c = i.getQueryExecutor(e.value.id)) == null ? void 0 : c.runBatch(q));
+    }
+  }
+  async function d(c) {
+    var q;
+    if (!c || Ke(c) === "") {
+      if (g.value = "", e.value && e.value.id) {
+        let s = i.updateDashboardFilter(
+          e.value.id,
+          Ke(c)
+        );
+        await ((q = i.getQueryExecutor(e.value.id)) == null ? void 0 : q.runBatch(s));
+      }
+      return;
+    }
+    e.value && e.value.id && (v.value = c, await (r == null ? void 0 : r.generateQuery(e.value.connection, {
+      text: "select 1 as test;",
+      editorType: "trilogy",
+      extraFilters: [c],
+      imports: e.value.imports,
+      extraContent: U.value
+    }).then(() => {
+      var s;
+      if (g.value = "", e.value && e.value.id) {
+        let O = i.updateDashboardFilter(e.value.id, c);
+        (s = i.getQueryExecutor(e.value.id)) == null || s.runBatch(O);
+      }
+    }).catch((s) => (g.value = s.message, !1))));
+  }
+  const S = async (c) => {
+    let q = c.replace(/^\s*where\s+/i, "");
+    if (e.value && e.value.id) {
+      let s = await (r == null ? void 0 : r.executeQuery(
+        e.value.connection,
+        {
+          text: "select 1 as test;",
+          editorType: "trilogy",
+          imports: e.value.imports,
+          extraFilters: [q],
+          extraContent: U.value
+        },
+        () => {
+        },
+        () => {
+        },
+        () => {
+        },
+        () => {
+        },
+        !0
+      ));
+      if (!s)
+        throw new Error("No promises returned from query execution service");
+      let O = await s.resultPromise;
+      if (!O.success)
+        throw new Error(
+          `Validation of "select 1 as test ${q}" resulted in ${O.error}`
+        );
+    } else
+      throw new Error("Dashboard not found");
+  };
+  async function L() {
+    if (e.value && e.value.id && r) {
+      let c = await i.populateCompletion(
+        e.value.id,
+        r,
+        l
+      );
+      c && (M.value = c), g.value = "";
+    }
+  }
+  async function Q(c) {
+    e.value && e.value.id && (i.updateDashboardImports(e.value.id, c), await L());
+  }
+  const K = (c) => {
+    e.value && (i.setState(e.value.id, c), Ae(() => {
+      n.triggerResize();
+    }));
+  }, me = (c) => {
+    e.value && e.value.id && i.updateDashboardLayout(e.value.id, c);
+  };
+  function he() {
+    E.value = !0;
+  }
+  function Re(c = $.CHART) {
+    if (!e.value || !e.value.id) return;
+    const q = i.addItemToDashboard(e.value.id, c);
+    E.value = !1, Ae(() => {
+      n.dimensionsUpdate(q);
+    });
+  }
+  function Fe(c) {
+    !e.value || !e.value.id || i.updateDashboardTitle(e.value.id, c);
+  }
+  function W() {
+    !e.value || !e.value.id || i.clearDashboardItems(e.value.id);
+  }
+  function oe(c) {
+    !e.value || !e.value.id || i.removeItemFromDashboard(e.value.id, c);
+  }
+  function se(c) {
+    !e.value || !e.value.id || i.copyItemInDashboard(e.value.id, c);
+  }
+  function fe() {
+    E.value = !1;
+  }
+  function xe(c) {
+    if (T.value = c, !e.value || !e.value.id) return;
+    const s = e.value.gridItems[c.i];
+    s && (s.type === $.CHART ? F.value = !0 : s.type === $.MARKDOWN ? _.value = !0 : (s.type === $.TABLE || s.type === $.FILTER) && (F.value = !0));
+  }
+  function Xe(c) {
+    if (!e.value || !e.value.id || !T.value) return;
+    const q = T.value.i;
+    Me(q, e.value.id, { content: c }), Qe();
+  }
+  function Qe() {
+    F.value = !1, _.value = !1, T.value = null;
+  }
+  function Ve(c, q) {
+    if (q && e.value && e.value.id !== q)
+      return {
+        type: $.CHART,
+        content: "",
+        structured_content: { markdown: "", query: "" },
+        name: `Item ${c}`,
+        allowCrossFilter: !0,
+        width: 0,
+        height: 0,
+        imports: [],
+        filters: [],
+        rootContent: [],
+        hasDrilldown: !1
+      };
+    if (!e.value)
+      return {
+        type: $.CHART,
+        content: "",
+        structured_content: { markdown: "", query: "" },
+        name: `Item ${c}`,
+        allowCrossFilter: !0,
+        width: 0,
+        height: 0,
+        imports: [],
+        filters: [],
+        rootContent: [],
+        hasDrilldown: !1
+      };
+    const s = e.value.gridItems[c];
+    if (!s)
+      return {
+        type: $.CHART,
+        content: "",
+        structured_content: { markdown: "", query: "" },
+        name: `Item ${c}`,
+        allowCrossFilter: !0,
+        width: 0,
+        height: 0,
+        imports: e.value.imports,
+        filters: [],
+        rootContent: [],
+        connectionName: e.value.connection || "",
+        hasDrilldown: !1
+      };
+    const O = s.filters || [];
+    let re = O;
+    e.value.filter && (O.some(
+      (Oe) => {
+        var He;
+        return Oe.source === "global" && Oe.value === ((He = e.value) == null ? void 0 : He.filter);
+      }
+    ) || (re = [{ value: e.value.filter, source: "global" }, ...O]));
+    function ue(le) {
+      return le && typeof le == "object" && typeof le.markdown == "string" && typeof le.query == "string";
+    }
+    let ge = !1, Se = ue(s.content) ? s.content : {
+      markdown: s.type === "markdown" ? s.content : "",
+      query: s.type !== "markdown" ? s.content : ""
+    };
+    s.drilldown && (ge = !0, Se = ue(s.drilldown) ? s.drilldown : {
+      markdown: s.type === "markdown" ? s.drilldown : "",
+      query: s.type !== "markdown" ? s.drilldown : ""
+    });
+    let be = s.chartConfig;
+    return ge && (be = s.drilldownChartConfig || void 0), {
+      type: s.type,
+      // check if it's MarkdownData, and if so, extract markdown
+      //
+      content: ue(s.content) ? s.content.markdown : s.content || "",
+      // display the drilldown of set
+      structured_content: Se,
+      name: s.name,
+      allowCrossFilter: s.allowCrossFilter !== !1,
+      // Default to true if not explicitly false
+      width: s.width || 0,
+      height: s.height || 0,
+      chartConfig: be,
+      filters: re,
+      chartFilters: s.chartFilters || [],
+      conceptFilters: s.conceptFilters || [],
+      parameters: s.parameters || {},
+      onRefresh: Be,
+      rootContent: U.value,
+      results: s.results || null,
+      connectionName: e.value.connection || "",
+      imports: e.value.imports,
+      error: s.error || "",
+      loading: s.loading || !1,
+      loadStartTime: s.loadStartTime || null,
+      // Include load start time if available
+      hasDrilldown: ge
+    };
+  }
+  function Me(c, q, s) {
+    if (!e.value || !e.value.id) return;
+    if (!q || e.value.id !== q) {
+      console.warn(
+        "Dashboard ID mismatch. Cannot set item data. Given:",
+        q,
+        "Expected:",
+        e.value.id
+      );
+      return;
+    }
+    const O = {};
+    if (s.name && (O.name = s.name), s.chartConfig && (O.chartConfig = s.chartConfig), s.content && (O.content = s.content), s.dimensions && (O.layoutDimensions = {
+      w: s.dimensions.width,
+      h: s.dimensions.height
+    }), s.width && s.height && (O.width = s.width, O.height = s.height), s.loading !== void 0 && (O.loading = s.loading), s.results !== void 0 && (O.results = s.results), s.error !== void 0 && (O.error = s.error), s.drilldown !== void 0 && (O.drilldown = s.drilldown), s.drilldownChartConfig !== void 0 && (O.drilldownChartConfig = s.drilldownChartConfig), s.allowCrossFilter !== void 0 && (O.allowCrossFilter = s.allowCrossFilter), Object.keys(O).length > 0 && i.updateMultipleItemProperties(e.value.id, c, O), s.content) {
+      let re = qe(e.value.id);
+      re == null || re.runSingle(c);
+    }
+  }
+  function qe(c) {
+    if (!e.value || !e.value.id)
+      throw new Error("Dashboard not found or not initialized");
+    if (!r) throw new Error("Query execution service not found");
+    if (!h) throw new Error("Connection store not found");
+    let q = i.dashboards[c];
+    const s = i.getOrCreateQueryExecutor(c, {
+      queryExecutionService: r,
+      connectionStore: h,
+      editorStore: l,
+      connectionName: q.connection,
+      dashboardId: c,
+      getDashboardData: (O) => i.dashboards[O],
+      getItemData: Ve,
+      setItemData: Me
+    });
+    return s || console.warn("No query executor found for dashboard:", e.value.id), s;
+  }
+  function et(c) {
+    var O;
+    const s = c.target.value;
+    e.value && e.value.id && (i.updateDashboardConnection(e.value.id, s), (O = i.getQueryExecutor(e.value.id)) == null || O.setConnection(s));
+  }
+  function Be(c) {
+    var q, s;
+    if (e.value) {
+      if (c) {
+        (q = i.getQueryExecutor(e.value.id)) == null || q.runSingle(c), n.dimensionsUpdate(c);
+        return;
+      }
+      (s = i.getQueryExecutor(e.value.id)) == null || s.runBatch(Object.keys(e.value.gridItems));
+    }
+  }
+  function tt(c) {
+    var re;
+    if (!e.value || !e.value.id) return;
+    let q = M.value.map((ue) => ue.label);
+    const s = Object.entries(c.filters).reduce(
+      (ue, [ge, Se]) => {
+        let be = ge, le = null;
+        return be.startsWith("local.") && (le = be.replace("local.", "")), (q.includes(be) || le && q.includes(le)) && (ue[ge] = Se), ue;
+      },
+      {}
+    );
+    if (!s || Object.keys(s).length === 0) {
+      console.log("No valid filters to apply from cross-filter event, given ", c.filters);
+      return;
+    }
+    let O = i.updateItemCrossFilters(
+      e.value.id,
+      c.source,
+      s,
+      c.chart,
+      c.append ? "append" : "add"
+    );
+    (re = i.getQueryExecutor(e.value.id)) == null || re.runBatch(O);
+  }
+  function nt(c, q) {
+    var s;
+    !e.value || !e.value.id || (i.removeItemCrossFilter(e.value.id, c, q), (s = i.getQueryExecutor(e.value.id)) == null || s.runSingle(c));
+  }
+  function ot(c) {
+    var s;
+    if (!e.value || !e.value.id) return;
+    let q = i.removeItemCrossFilterSource(e.value.id, c);
+    (s = i.getQueryExecutor(e.value.id)) == null || s.runBatch(q);
+  }
+  function it(c) {
+    f(c);
+  }
+  return {
+    // State
+    dashboard: e,
+    layout: B,
+    sortedLayout: x,
+    editMode: D,
+    selectedConnection: A,
+    filter: v,
+    filterError: g,
+    globalCompletion: M,
+    showAddItemModal: E,
+    showQueryEditor: F,
+    showMarkdownEditor: _,
+    editingItem: T,
+    dashboardMaxWidth: I,
+    rootContent: U,
+    // Methods
+    handleFilterChange: d,
+    handleFilterClear: u,
+    handleImportChange: Q,
+    validateFilter: S,
+    onConnectionChange: et,
+    toggleMode: K,
+    onLayoutUpdated: me,
+    openAddItemModal: he,
+    addItem: Re,
+    clearItems: W,
+    removeItem: oe,
+    copyItem: se,
+    closeAddModal: fe,
+    openEditor: xe,
+    saveContent: Xe,
+    closeEditors: Qe,
+    getDashboardQueryExecutor: qe,
+    getItemData: Ve,
+    setItemData: Me,
+    handleRefresh: Be,
+    setCrossFilter: tt,
+    removeFilter: nt,
+    unSelect: ot,
+    dashboardCreated: it,
+    updateTitle: Fe
+  };
+}
+export {
+  Ci as C,
+  pi as D,
+  wi as M,
+  ki as _,
+  gi as a,
+  bi as b,
+  Ii as u
+};