@quantumwake/terminal-ux-dashboard-components 0.1.3 → 0.1.7

package/dist/index.d.cts

@@ -326,6 +326,9 @@ interface SqlConsoleColumn {
 interface SqlConsoleProps {
     columns?: SqlConsoleColumn[];
     stateId?: string;
+    defaultColumnsOpen?: boolean;
+    defaultSql?: string;
+    autoRun?: boolean;
 }
 /**
  * SqlConsole — a HuggingFace-style read-only SQL editor over a state's full
@@ -333,7 +336,7 @@ interface SqlConsoleProps {
  * in the viewer) as a view named `data`; queries run against the entire dataset,
  * not a client sample.
  */
-declare function SqlConsole({ columns, stateId }: SqlConsoleProps): react.JSX.Element;
+declare function SqlConsole({ columns, stateId, defaultColumnsOpen, defaultSql, autoRun }: SqlConsoleProps): react.JSX.Element;
 
 interface PanelConfig {
     sql?: string;
@@ -457,6 +460,7 @@ interface Dashboard {
     panels?: DashboardPanel[];
     [key: string]: unknown;
 }
+type Mode = 'dashboard' | 'builder' | 'sql';
 interface DataExplorerProps {
     /** All records for the active state (viz/builder source). Empty when not loaded. */
     records: Row[];
@@ -478,11 +482,17 @@ interface DataExplorerProps {
     loading?: boolean;
     /** True while the AI is generating/refining the dashboard. */
     analyzing?: boolean;
+    /** Initial mode tab. Defaults to 'dashboard'; the published viewer uses 'sql'
+     *  so the SQL console is the primary surface. Clamped to `tabs`. */
+    defaultMode?: Mode;
+    /** Which mode tabs to show, in order. Defaults to all three. Pass a subset to
+     *  turn tabs off (e.g. ['sql'] for a SQL-only explorer). */
+    tabs?: Mode[];
     /** Select a state (host fetches its profile/records). */
     onSelectState: (id: string) => void;
     /** Refresh the states catalog. */
     onRefreshStates?: () => void;
 }
-declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
+declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, 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 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

@@ -326,6 +326,9 @@ interface SqlConsoleColumn {
 interface SqlConsoleProps {
     columns?: SqlConsoleColumn[];
     stateId?: string;
+    defaultColumnsOpen?: boolean;
+    defaultSql?: string;
+    autoRun?: boolean;
 }
 /**
  * SqlConsole — a HuggingFace-style read-only SQL editor over a state's full
@@ -333,7 +336,7 @@ interface SqlConsoleProps {
  * in the viewer) as a view named `data`; queries run against the entire dataset,
  * not a client sample.
  */
-declare function SqlConsole({ columns, stateId }: SqlConsoleProps): react.JSX.Element;
+declare function SqlConsole({ columns, stateId, defaultColumnsOpen, defaultSql, autoRun }: SqlConsoleProps): react.JSX.Element;
 
 interface PanelConfig {
     sql?: string;
@@ -457,6 +460,7 @@ interface Dashboard {
     panels?: DashboardPanel[];
     [key: string]: unknown;
 }
+type Mode = 'dashboard' | 'builder' | 'sql';
 interface DataExplorerProps {
     /** All records for the active state (viz/builder source). Empty when not loaded. */
     records: Row[];
@@ -478,11 +482,17 @@ interface DataExplorerProps {
     loading?: boolean;
     /** True while the AI is generating/refining the dashboard. */
     analyzing?: boolean;
+    /** Initial mode tab. Defaults to 'dashboard'; the published viewer uses 'sql'
+     *  so the SQL console is the primary surface. Clamped to `tabs`. */
+    defaultMode?: Mode;
+    /** Which mode tabs to show, in order. Defaults to all three. Pass a subset to
+     *  turn tabs off (e.g. ['sql'] for a SQL-only explorer). */
+    tabs?: Mode[];
     /** Select a state (host fetches its profile/records). */
     onSelectState: (id: string) => void;
     /** Refresh the states catalog. */
     onRefreshStates?: () => void;
 }
-declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
+declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, 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 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, useRef, useEffect, Suspense } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -7,7 +7,9 @@ import { ResponsiveScatterPlot } from '@nivo/scatterplot';
 import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
-import { Loader2, Play, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, ChevronDown, Sparkles, X, RefreshCw, Minimize2, Maximize2, Terminal, Plus, Save, FolderOpen, Trash2, Filter, Database, Send, GripVertical } from 'lucide-react';
+import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, X, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, Filter, Database, Send, GripVertical } from 'lucide-react';
+import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -643,18 +645,19 @@ var renderCell = (v) => {
   if (typeof v === "boolean") return v ? "true" : "false";
   return String(v);
 };
-function SqlConsole({ columns = [], stateId }) {
+function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, defaultSql = DEFAULT_SQL, autoRun = false }) {
   const { theme, runQuery } = useDashboard();
-  const [sql, setSql] = useState(DEFAULT_SQL);
+  const [sql$1, setSql] = useState(defaultSql);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
-  const run = async () => {
-    if (running || !sql.trim()) return;
+  const [columnsOpen, setColumnsOpen] = useState(defaultColumnsOpen);
+  const run = async (text = sql$1) => {
+    if (running || !text.trim()) return;
     setRunning(true);
     setError(null);
     try {
-      const data = await runQuery(sql, stateId);
+      const data = await runQuery(text, stateId);
       setResult({ columns: data.columns || [], rows: data.rows || [] });
     } catch (err) {
       setResult(null);
@@ -663,12 +666,29 @@ function SqlConsole({ columns = [], stateId }) {
       setRunning(false);
     }
   };
-  const onKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      void run();
-    }
+  useEffect(() => {
+    if (!autoRun || !stateId) return;
+    setSql(defaultSql);
+    void run(defaultSql);
+  }, [stateId, autoRun, defaultSql]);
+  const runRef = useRef(() => {
+  });
+  runRef.current = () => {
+    void run();
   };
+  const schemaKey = columns.map((c) => c.name).join(",");
+  const extensions = useMemo(
+    () => [
+      sql({ schema: { data: columns.map((c) => c.name) }, upperCaseKeywords: true }),
+      EditorView.lineWrapping,
+      Prec.highest(keymap.of([{ key: "Mod-Enter", run: () => {
+        runRef.current();
+        return true;
+      } }]))
+    ],
+    [schemaKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
   const resultColumns = result?.columns || [];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: `border-b ${theme.border} bg-midnight-elevated p-3 shrink-0`, children: [
@@ -681,7 +701,7 @@ function SqlConsole({ columns = [], stateId }) {
           "button",
           {
             onClick: () => void run(),
-            disabled: running || !sql.trim(),
+            disabled: running || !sql$1.trim(),
             className: `flex items-center gap-1.5 px-3 py-1 border text-xs font-mono transition-colors ${running ? "border-midnight-border opacity-50" : "border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10"}`,
             children: [
               running ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
@@ -692,30 +712,46 @@ function SqlConsole({ columns = [], stateId }) {
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "textarea",
+        CodeMirror,
         {
-          value: sql,
-          onChange: (e) => setSql(e.target.value),
-          onKeyDown,
-          spellCheck: false,
-          rows: 5,
-          className: "w-full bg-midnight-surface border border-midnight-border px-3 py-2 text-sm font-mono outline-none text-midnight-text-body resize-y focus:border-midnight-accent transition-colors",
-          placeholder: "SELECT ... FROM data"
+          value: sql$1,
+          onChange: setSql,
+          extensions,
+          theme: "dark",
+          basicSetup: { lineNumbers: false, foldGutter: false, highlightActiveLine: false },
+          height: "120px",
+          placeholder: "SELECT ... FROM data",
+          className: "border border-midnight-border text-sm overflow-hidden focus-within:border-midnight-accent"
         }
       ),
-      columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          title: `Insert ${c.name}`,
-          onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
-          className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
-          children: [
-            c.name,
-            /* @__PURE__ */ jsx("span", { className: "opacity-50 ml-1", children: c.type })
-          ]
-        },
-        c.name
-      )) })
+      columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setColumnsOpen((o) => !o),
+            className: "flex items-center gap-1 text-[11px] font-mono text-midnight-text-muted hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 transition-transform ${columnsOpen ? "" : "-rotate-90"}` }),
+              "Columns (",
+              columns.length,
+              ")"
+            ]
+          }
+        ),
+        columnsOpen && /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            title: `Insert ${c.name}`,
+            onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
+            className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+            children: [
+              c.name,
+              /* @__PURE__ */ jsx("span", { className: "opacity-50 ml-1", children: c.type })
+            ]
+          },
+          c.name
+        )) })
+      ] })
     ] }),
     (result || error) && /* @__PURE__ */ jsx("div", { className: `flex items-center gap-4 px-3 py-1.5 border-b ${theme.border} text-xs font-mono shrink-0 ${error ? "text-red-400" : "text-midnight-text-muted"}`, children: error ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5" }),
@@ -1606,6 +1642,11 @@ function ModeTab({ active, onClick, icon: Icon, label }) {
     }
   );
 }
+var MODE_TABS = [
+  { mode: "dashboard", icon: Sparkles, label: "Dashboard" },
+  { mode: "builder", icon: BarChart3, label: "Chart Builder" },
+  { mode: "sql", icon: Terminal, label: "SQL" }
+];
 function DataExplorer({
   records,
   columns,
@@ -1617,12 +1658,15 @@ function DataExplorer({
   savedDashboards = [],
   loading = false,
   analyzing = false,
+  defaultMode = "dashboard",
+  tabs = ["dashboard", "builder", "sql"],
   onSelectState,
   onRefreshStates
 }) {
   const { theme, newDashboard, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
   const caps = useCapabilities();
-  const [mode, setMode] = useState("dashboard");
+  const visibleTabs = MODE_TABS.filter((t) => tabs.includes(t.mode));
+  const [mode, setMode] = useState(tabs.includes(defaultMode) ? defaultMode : tabs[0] ?? "sql");
   const [fullscreen, setFullscreen] = useState(false);
   const [showSaved, setShowSaved] = useState(false);
   const [saveName, setSaveName] = useState("");
@@ -1687,9 +1731,7 @@ function DataExplorer({
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-3 shrink-0", children: [
-        /* @__PURE__ */ jsx(ModeTab, { active: mode === "dashboard", onClick: () => setMode("dashboard"), icon: Sparkles, label: "Dashboard" }),
-        /* @__PURE__ */ jsx(ModeTab, { active: mode === "builder", onClick: () => setMode("builder"), icon: BarChart3, label: "Chart Builder" }),
-        /* @__PURE__ */ jsx(ModeTab, { active: mode === "sql", onClick: () => setMode("sql"), icon: Terminal, label: "SQL" }),
+        visibleTabs.map((t) => /* @__PURE__ */ jsx(ModeTab, { active: mode === t.mode, onClick: () => setMode(t.mode), icon: t.icon, label: t.label }, t.mode)),
         caps.canNew && /* @__PURE__ */ jsxs(
           "button",
           {