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

package/dist/index.d.cts

@@ -11,6 +11,13 @@ interface SavedDashboard {
     name: string;
     [key: string]: unknown;
 }
+interface PanelInput {
+    title: string;
+    type: string;
+    config: Record<string, unknown>;
+    width: number;
+    height: number;
+}
 interface DashboardCapabilities {
     runQuery: (sql: string, stateId?: string) => Promise<QueryResult>;
     saveDashboard?: (name?: string) => Promise<void> | void;
@@ -20,6 +27,7 @@ interface DashboardCapabilities {
     deleteDashboard?: (id: string) => Promise<void> | void;
     analyzeDataset?: () => Promise<void> | void;
     refineDashboard?: (prompt: string) => Promise<void> | void;
+    addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
 }
 interface DashboardContextValue extends DashboardCapabilities {
@@ -40,6 +48,7 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canAddPanel: boolean;
     canEditPanels: boolean;
 };
 
@@ -474,4 +483,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.d.ts

@@ -11,6 +11,13 @@ interface SavedDashboard {
     name: string;
     [key: string]: unknown;
 }
+interface PanelInput {
+    title: string;
+    type: string;
+    config: Record<string, unknown>;
+    width: number;
+    height: number;
+}
 interface DashboardCapabilities {
     runQuery: (sql: string, stateId?: string) => Promise<QueryResult>;
     saveDashboard?: (name?: string) => Promise<void> | void;
@@ -20,6 +27,7 @@ interface DashboardCapabilities {
     deleteDashboard?: (id: string) => Promise<void> | void;
     analyzeDataset?: () => Promise<void> | void;
     refineDashboard?: (prompt: string) => Promise<void> | void;
+    addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
 }
 interface DashboardContextValue extends DashboardCapabilities {
@@ -40,6 +48,7 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canAddPanel: boolean;
     canEditPanels: boolean;
 };
 
@@ -474,4 +483,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, Suspense } from 'react';
+import { createContext, useContext, useMemo, useState, useRef, useEffect, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -32,6 +32,7 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
 }
@@ -1014,6 +1015,8 @@ var ChartPreview = ({
 };
 function ChartBuilder({ records, columns, stateId, onSave }) {
   const { theme, runQuery } = useDashboard();
+  const runQueryRef = useRef(runQuery);
+  runQueryRef.current = runQuery;
   const [chartType, setChartType] = useState("bar");
   const [xFields, setXFields] = useState([]);
   const [yFields, setYFields] = useState([]);
@@ -1047,7 +1050,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 || []);
@@ -1060,7 +1063,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":
@@ -1343,6 +1346,8 @@ function ViewLoading() {
 }
 function SqlPanel({ panel }) {
   const { runQuery } = useDashboard();
+  const runQueryRef = useRef(runQuery);
+  runQueryRef.current = runQuery;
   const config = panel.config || {};
   const chartType = config.chartType || panel.type;
   const [rows, setRows] = useState(null);
@@ -1353,7 +1358,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);
@@ -1369,7 +1374,7 @@ function SqlPanel({ panel }) {
     return () => {
       cancelled = true;
     };
-  }, [config.sql, runQuery]);
+  }, [config.sql]);
   if (loading && !rows) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Running\u2026" });
   }
@@ -1614,7 +1619,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] = useState("dashboard");
   const [fullscreen, setFullscreen] = useState(false);
@@ -1752,7 +1757,7 @@ function DataExplorer({
           )
         ] }, d.id))
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0, onSave: addPanel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "w-8 h-8" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxs(Fragment, { children: [