@quantumwake/terminal-ux-dashboard-components 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -38,6 +38,7 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
 }
@@ -1020,6 +1021,8 @@ var ChartPreview = ({
 };
 function ChartBuilder({ records, columns, stateId, onSave }) {
   const { theme, runQuery } = useDashboard();
+  const runQueryRef = react.useRef(runQuery);
+  runQueryRef.current = runQuery;
   const [chartType, setChartType] = react.useState("bar");
   const [xFields, setXFields] = react.useState([]);
   const [yFields, setYFields] = react.useState([]);
@@ -1053,7 +1056,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
     let cancelled = false;
     setSqlLoading(true);
     setSqlError(null);
-    runQuery(generatedSql, stateId).then((res) => {
+    runQueryRef.current(generatedSql, stateId).then((res) => {
       if (cancelled) return;
       setSqlLoading(false);
       setSqlRows(res.rows || []);
@@ -1066,7 +1069,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
     return () => {
       cancelled = true;
     };
-  }, [engineMode, generatedSql, runQuery, stateId]);
+  }, [engineMode, generatedSql, stateId]);
   const addField = (zone, field) => {
     switch (zone) {
       case "x":
@@ -1349,6 +1352,8 @@ function ViewLoading() {
 }
 function SqlPanel({ panel }) {
   const { runQuery } = useDashboard();
+  const runQueryRef = react.useRef(runQuery);
+  runQueryRef.current = runQuery;
   const config = panel.config || {};
   const chartType = config.chartType || panel.type;
   const [rows, setRows] = react.useState(null);
@@ -1359,7 +1364,7 @@ function SqlPanel({ panel }) {
     setLoading(true);
     setError(null);
     const sql = config.sql || "";
-    runQuery(sql).then(
+    runQueryRef.current(sql).then(
       (res) => {
         if (cancelled) return;
         setLoading(false);
@@ -1375,7 +1380,7 @@ function SqlPanel({ panel }) {
     return () => {
       cancelled = true;
     };
-  }, [config.sql, runQuery]);
+  }, [config.sql]);
   if (loading && !rows) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Running\u2026" });
   }
@@ -1620,7 +1625,7 @@ function DataExplorer({
   onSelectState,
   onRefreshStates
 }) {
-  const { theme, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
+  const { theme, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
   const caps = useCapabilities();
   const [mode, setMode] = react.useState("dashboard");
   const [fullscreen, setFullscreen] = react.useState(false);
@@ -1758,7 +1763,7 @@ function DataExplorer({
           )
         ] }, d.id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0, onSave: addPanel }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-8 h-8" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [