@trilogy-data/trilogy-studio-components 0.1.0

package/dist/DashboardCreatorInline-Do-CDJgS.js

@@ -0,0 +1,150 @@
+import { inject as m, ref as p, computed as D, createElementBlock as l, createCommentVNode as C, openBlock as i, createElementVNode as r, withDirectives as y, withKeys as E, vModelText as _, Fragment as k, renderList as I, toDisplayString as N, vModelSelect as P } from "vue";
+import { a as V } from "./main-oVvKtGNk.js";
+const F = {
+  name: "DashboardCreatorInline",
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    testTag: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(x, { emit: e }) {
+    const o = m("dashboardStore"), t = m("connectionStore"), h = m("llmConnectionStore"), u = m("editorStore"), a = m("queryExecutionService"), w = m("saveDashboards");
+    if (!o || !t || !h || !a || !u || !w)
+      throw new Error("Dashboard or connection store is not provided!");
+    const v = p(""), c = p(""), g = p(""), n = p(""), T = D(() => h.hasActiveDefaultConnection), S = D(() => Object.values(t.connections).filter((d) => d.model)), b = D(() => Object.values(u.editors).filter(
+      (s) => s.connection === c.value
+    ).map((s) => ({
+      id: s.id,
+      name: s.name,
+      alias: ""
+    })));
+    return D(() => (b.value.length > 0 && !n.value ? n.value = b.value[0].id : b.value.length === 0 && (n.value = ""), b.value)), S.value.length > 0 && !c.value && (c.value = S.value[0].name), {
+      dashboardName: v,
+      selectedConnection: c,
+      dashboardPrompt: g,
+      showPromptField: T,
+      connections: S,
+      availableImports: b,
+      selectedImport: n,
+      createDashboard: async () => {
+        if (!(!v.value || !c.value))
+          try {
+            const d = o.newDashboard(v.value, c.value), s = b.value.find((f) => f.id === n.value);
+            if (!s)
+              throw new Error("Selected import not found");
+            if (o.updateDashboardImports(d.id, [s]), v.value = "", n.value = "", w(), e("close"), o.setActiveDashboard(d.id), console.log("New dashboard created:", d.id), e("dashboard-created", d.id), T.value && g.value.trim()) {
+              const f = await o.generatePromptSpec(
+                g.value,
+                h,
+                a,
+                u
+              );
+              console.log("Prompt spec generated:", f), f && o.populateFromPromptSpec(
+                d.id,
+                f,
+                h,
+                a,
+                u
+              );
+            }
+          } catch (d) {
+            console.error("Failed to create dashboard:", d), alert(`Error creating dashboard: ${d instanceof Error ? d.message : String(d)}`);
+          }
+      },
+      cancel: () => {
+        v.value = "", g.value = "", n.value = "", e("close");
+      }
+    };
+  }
+}, U = {
+  key: 0,
+  class: "dashboard-creator"
+}, j = { class: "form-group" }, B = ["data-testid"], M = { class: "form-group" }, q = ["data-testid"], A = ["value"], K = {
+  key: 0,
+  class: "form-group"
+}, O = ["data-testid"], z = ["value"], L = {
+  key: 1,
+  class: "form-group"
+}, G = ["data-testid"], H = { class: "form-actions" }, J = ["disabled", "data-testid"], Q = ["data-testid"];
+function R(x, e, o, t, h, u) {
+  return o.visible ? (i(), l("div", U, [
+    e[11] || (e[11] = r("h4", null, "Create New Dashboard", -1)),
+    r("div", j, [
+      e[7] || (e[7] = r("label", { for: "dashboard-name" }, "Name", -1)),
+      y(r("input", {
+        id: "dashboard-name",
+        "onUpdate:modelValue": e[0] || (e[0] = (a) => t.dashboardName = a),
+        type: "text",
+        placeholder: "My Dashboard",
+        onKeyup: e[1] || (e[1] = E((...a) => t.createDashboard && t.createDashboard(...a), ["enter"])),
+        "data-testid": o.testTag ? `dashboard-creator-name-${o.testTag}` : "dashboard-creator-name"
+      }, null, 40, B), [
+        [_, t.dashboardName]
+      ])
+    ]),
+    r("div", M, [
+      e[8] || (e[8] = r("label", { for: "dashboard-connection" }, "Connection", -1)),
+      y(r("select", {
+        id: "dashboard-connection",
+        "onUpdate:modelValue": e[2] || (e[2] = (a) => t.selectedConnection = a),
+        "data-testid": o.testTag ? `dashboard-creator-connection-${o.testTag}` : "dashboard-creator-connection"
+      }, [
+        (i(!0), l(k, null, I(t.connections, (a) => (i(), l("option", {
+          key: a.name,
+          value: a.name
+        }, N(a.name), 9, A))), 128))
+      ], 8, q), [
+        [P, t.selectedConnection]
+      ])
+    ]),
+    t.selectedConnection && t.availableImports.length > 0 ? (i(), l("div", K, [
+      e[9] || (e[9] = r("label", { for: "dashboard-import" }, "Import", -1)),
+      y(r("select", {
+        id: "dashboard-import",
+        "onUpdate:modelValue": e[3] || (e[3] = (a) => t.selectedImport = a),
+        "data-testid": o.testTag ? `dashboard-creator-import-${o.testTag}` : "dashboard-creator-import"
+      }, [
+        (i(!0), l(k, null, I(t.availableImports, (a) => (i(), l("option", {
+          key: a.name,
+          value: a.id
+        }, N(a.name), 9, z))), 128))
+      ], 8, O), [
+        [P, t.selectedImport]
+      ])
+    ])) : C("", !0),
+    t.showPromptField ? (i(), l("div", L, [
+      e[10] || (e[10] = r("label", { for: "dashboard-prompt" }, "Dashboard Prompt", -1)),
+      y(r("textarea", {
+        id: "dashboard-prompt",
+        "onUpdate:modelValue": e[4] || (e[4] = (a) => t.dashboardPrompt = a),
+        placeholder: "Describe what you want to analyze...",
+        rows: "3",
+        "data-testid": o.testTag ? `dashboard-creator-prompt-${o.testTag}` : "dashboard-creator-prompt"
+      }, null, 8, G), [
+        [_, t.dashboardPrompt]
+      ])
+    ])) : C("", !0),
+    r("div", H, [
+      r("button", {
+        onClick: e[5] || (e[5] = (...a) => t.createDashboard && t.createDashboard(...a)),
+        disabled: !t.dashboardName || !t.selectedConnection || !t.selectedImport,
+        "data-testid": o.testTag ? `dashboard-creator-submit-${o.testTag}` : "dashboard-creator-submit",
+        class: "create-btn"
+      }, " Create ", 8, J),
+      r("button", {
+        onClick: e[6] || (e[6] = (...a) => t.cancel && t.cancel(...a)),
+        "data-testid": o.testTag ? `dashboard-creator-cancel-${o.testTag}` : "dashboard-creator-cancel",
+        class: "cancel-btn"
+      }, " Cancel ", 8, Q)
+    ])
+  ])) : C("", !0);
+}
+const $ = /* @__PURE__ */ V(F, [["render", R], ["__scopeId", "data-v-22061295"]]);
+export {
+  $ as D
+};

package/dist/DashboardMobile-BOrq0rBy.js

@@ -0,0 +1,310 @@
+import { defineComponent as he, computed as pe, createElementBlock as u, openBlock as d, createVNode as h, createCommentVNode as I, createBlock as R, unref as e, Fragment as k, renderList as be, normalizeStyle as fe, createElementVNode as r, Teleport as x, toDisplayString as ge, createTextVNode as A, nextTick as ve } from "vue";
+import { u as Ce, D as ye, _ as Ie, a as ke, b as we, C as Te, M as Me } from "./useDashboard-CPI83oAm.js";
+import { D as De } from "./DashboardCreatorInline-Do-CDJgS.js";
+import { r as Ee, J as g, a as Se } from "./main-oVvKtGNk.js";
+const Fe = {
+  key: 0,
+  class: "dashboard-mobile-container"
+}, Re = {
+  key: 0,
+  class: "empty-dashboard-wrapper"
+}, xe = {
+  key: 1,
+  class: "mobile-container"
+}, Ae = ["data-i"], Ne = {
+  key: 2,
+  class: "mobile-nav-bar"
+}, Be = {
+  key: 1,
+  class: "dashboard-not-found"
+}, _e = 400, He = /* @__PURE__ */ he({
+  __name: "DashboardMobile",
+  props: {
+    name: {},
+    connectionId: {},
+    viewMode: { type: Boolean }
+  },
+  setup(v) {
+    const p = v, w = Ee(), i = pe(() => {
+      const o = Object.values(w.dashboards).find((t) => t.id === p.name);
+      if (!o && p.connectionId)
+        try {
+          return w.newDashboard(p.name, p.connectionId);
+        } catch (t) {
+          return console.error("Failed to create dashboard:", t), null;
+        }
+      return o;
+    }), {
+      // State
+      sortedLayout: b,
+      editMode: N,
+      selectedConnection: B,
+      filter: _,
+      filterError: H,
+      globalCompletion: T,
+      showAddItemModal: $,
+      showQueryEditor: M,
+      showMarkdownEditor: q,
+      editingItem: s,
+      // Methods
+      handleFilterChange: L,
+      handleFilterClear: W,
+      handleImportChange: O,
+      validateFilter: U,
+      onConnectionChange: V,
+      toggleMode: z,
+      openAddItemModal: P,
+      addItem: Q,
+      clearItems: j,
+      removeItem: G,
+      copyItem: J,
+      closeAddModal: K,
+      openEditor: Y,
+      saveContent: D,
+      closeEditors: E,
+      getDashboardQueryExecutor: X,
+      getItemData: c,
+      setItemData: S,
+      handleRefresh: Z,
+      setCrossFilter: ee,
+      removeFilter: oe,
+      unSelect: te,
+      dashboardCreated: ne
+    } = Ce(
+      i,
+      {
+        connectionId: p.connectionId,
+        viewMode: p.viewMode,
+        isMobile: !0
+      },
+      {
+        layoutUpdated: () => {
+        },
+        // Not needed for mobile
+        dimensionsUpdate: (o) => C(o),
+        triggerResize: () => F(),
+        fullScreen: () => {
+        }
+        // Not needed for mobile
+      }
+    );
+    function C(o) {
+      if (!i.value) return;
+      const t = document.querySelector(`.mobile-item[data-i="${o}"] .grid-item-content`);
+      if (t) {
+        const n = t.getBoundingClientRect(), a = 36, l = Math.floor(n.width), m = Math.floor(n.height - a);
+        i.value.id && S(o, i.value.id, { width: l, height: m });
+      }
+    }
+    function F() {
+      i.value && b.value.forEach((o) => {
+        C(o.i);
+      });
+    }
+    function ie(o) {
+      return "100%";
+    }
+    function ae(o) {
+      var m, f;
+      let t = Math.min(window.innerWidth, 400);
+      if (!i.value || !i.value.gridItems[o.i])
+        return t;
+      let n = c(o.i, i.value.id);
+      if (n.type === g.MARKDOWN || n.type === g.FILTER)
+        return "100%";
+      if (n.type === g.CHART && ((m = n.chartConfig) == null ? void 0 : m.chartType) === "headline" && n.width)
+        return `${Math.max(n.width / 2, t)}px`;
+      let a = n.type === g.CHART ? 1200 : 600;
+      if (n.width && n.height) {
+        let y = o.h / (o.w * 2);
+        const me = window.innerWidth - 50;
+        ["point", "barh"].includes(((f = n.chartConfig) == null ? void 0 : f.chartType) || "") && (y = y * 1.2);
+        const ue = me * y;
+        return `${Math.max(Math.min(ue, a), t)}px`;
+      }
+      const l = o.h / o.w;
+      return `${Math.max(Math.min(l * 12 * 30, a), _e)}px`;
+    }
+    function re(o) {
+      z(o), ve(() => {
+        F();
+      });
+    }
+    function le() {
+      const o = document.getElementById("page-content");
+      o && o.scrollTo({ top: 0, behavior: "smooth" });
+    }
+    function de() {
+      const o = document.getElementById("page-content");
+      o && o.scrollTo({ top: o.scrollHeight, behavior: "smooth" });
+    }
+    function se() {
+      const o = document.getElementById("page-content");
+      if (!o) return;
+      const t = o.scrollTop, n = o.querySelectorAll(".mobile-item");
+      let a = null;
+      for (let l = n.length - 1; l >= 0; l--) {
+        const m = n[l];
+        if (m.offsetTop < t) {
+          a = m;
+          break;
+        }
+      }
+      a && o.scrollTo({
+        top: a.offsetTop - 15,
+        // Account for gap
+        behavior: "smooth"
+      });
+    }
+    function ce() {
+      const o = document.getElementById("page-content");
+      if (!o) return;
+      const t = o.scrollTop, n = o.querySelectorAll(".mobile-item");
+      let a = null;
+      for (let l = 0; l < n.length; l++) {
+        const m = n[l];
+        if (m.offsetTop > t + 50) {
+          a = m;
+          break;
+        }
+      }
+      a && o.scrollTo({
+        top: a.offsetTop - 15,
+        // Account for gap
+        behavior: "smooth"
+      });
+    }
+    return (o, t) => i.value ? (d(), u("div", Fe, [
+      h(ye, {
+        dashboard: i.value,
+        "edits-locked": i.value.state === "locked",
+        "selected-connection": e(B),
+        filterError: e(H),
+        globalCompletion: e(T),
+        validateFilter: e(U),
+        onConnectionChange: e(V),
+        onFilterChange: e(L),
+        onImportChange: e(O),
+        onAddItem: e(P),
+        onClearItems: e(j),
+        onModeChange: re,
+        onRefresh: e(Z),
+        onClearFilter: e(W)
+      }, null, 8, ["dashboard", "edits-locked", "selected-connection", "filterError", "globalCompletion", "validateFilter", "onConnectionChange", "onFilterChange", "onImportChange", "onAddItem", "onClearItems", "onRefresh", "onClearFilter"]),
+      i.value && e(b).length === 0 ? (d(), u("div", Re, [
+        h(Ie, {
+          "dashboard-id": i.value.id
+        }, null, 8, ["dashboard-id"])
+      ])) : (d(), u("div", xe, [
+        (d(!0), u(k, null, be(e(b), (n) => (d(), u("div", {
+          key: n.i,
+          "data-i": n.i,
+          class: "mobile-item",
+          style: fe({
+            height: `${ae(n)}`,
+            width: `${ie()}`
+          })
+        }, [
+          h(ke, {
+            "dashboard-id": i.value.id,
+            item: n,
+            "edit-mode": e(N),
+            filter: e(_),
+            "get-item-data": e(c),
+            symbols: e(T),
+            "get-dashboard-query-executor": e(X),
+            onDimensionClick: e(ee),
+            onBackgroundClick: e(te),
+            "set-item-data": e(S),
+            onEditContent: e(Y),
+            onRemoveFilter: e(oe),
+            onUpdateDimensions: C,
+            onRemoveItem: e(G),
+            onCopyItem: e(J)
+          }, null, 8, ["dashboard-id", "item", "edit-mode", "filter", "get-item-data", "symbols", "get-dashboard-query-executor", "onDimensionClick", "onBackgroundClick", "set-item-data", "onEditContent", "onRemoveFilter", "onRemoveItem", "onCopyItem"])
+        ], 12, Ae))), 128))
+      ])),
+      e(b).length > 1 ? (d(), u("div", Ne, [
+        r("button", {
+          onClick: le,
+          class: "nav-btn",
+          title: "Scroll to top"
+        }, [...t[0] || (t[0] = [
+          r("i", { class: "mdi mdi-chevron-double-up" }, null, -1)
+        ])]),
+        r("button", {
+          onClick: se,
+          class: "nav-btn",
+          title: "Previous item"
+        }, [...t[1] || (t[1] = [
+          r("i", { class: "mdi mdi-chevron-up" }, null, -1)
+        ])]),
+        r("button", {
+          onClick: ce,
+          class: "nav-btn",
+          title: "Next item"
+        }, [...t[2] || (t[2] = [
+          r("i", { class: "mdi mdi-chevron-down" }, null, -1)
+        ])]),
+        r("button", {
+          onClick: de,
+          class: "nav-btn",
+          title: "Scroll to bottom"
+        }, [...t[3] || (t[3] = [
+          r("i", { class: "mdi mdi-chevron-double-down" }, null, -1)
+        ])])
+      ])) : I("", !0),
+      h(we, {
+        show: e($),
+        onAdd: e(Q),
+        onClose: e(K)
+      }, null, 8, ["show", "onAdd", "onClose"]),
+      e(M) && e(s) ? (d(), R(x, {
+        key: 3,
+        to: "body"
+      }, [
+        h(Te, {
+          connectionName: e(c)(e(s).i, i.value.id).connectionName || "",
+          imports: e(c)(e(s).i, i.value.id).imports || [],
+          rootContent: e(c)(e(s).i, i.value.id).rootContent || [],
+          content: e(c)(e(s).i, i.value.id).content,
+          showing: e(M),
+          onSave: e(D),
+          onCancel: e(E)
+        }, null, 8, ["connectionName", "imports", "rootContent", "content", "showing", "onSave", "onCancel"])
+      ])) : I("", !0),
+      e(q) && e(s) ? (d(), R(x, {
+        key: 4,
+        to: "body"
+      }, [
+        h(Me, {
+          connectionName: e(c)(e(s).i, i.value.id).connectionName || "",
+          imports: e(c)(e(s).i, i.value.id).imports || [],
+          rootContent: e(c)(e(s).i, i.value.id).rootContent || [],
+          content: e(c)(e(s).i, i.value.id).structured_content,
+          onSave: e(D),
+          onCancel: e(E)
+        }, null, 8, ["connectionName", "imports", "rootContent", "content", "onSave", "onCancel"])
+      ])) : I("", !0)
+    ])) : (d(), u("div", Be, [
+      v.name ? (d(), u(k, { key: 0 }, [
+        t[4] || (t[4] = r("h2", null, "Dashboard Not Found", -1)),
+        r("p", null, 'The dashboard "' + ge(v.name) + '" could not be found.', 1)
+      ], 64)) : (d(), u(k, { key: 1 }, [
+        t[5] || (t[5] = r("h2", null, [
+          A("Ready to "),
+          r("i", { class: "mdi mdi-chart-line" }),
+          A("?")
+        ], -1)),
+        h(De, {
+          class: "inline-creator",
+          visible: !0,
+          onDashboardCreated: e(ne)
+        }, null, 8, ["onDashboardCreated"])
+      ], 64))
+    ]));
+  }
+}), Oe = /* @__PURE__ */ Se(He, [["__scopeId", "data-v-d92f9e7d"]]);
+export {
+  Oe as default
+};