@smallwebco/tinypivot-react 1.0.57 → 1.0.59

package/dist/index.d.cts

@@ -1,12 +1,18 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
 import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
 export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
 import * as react from 'react';
 import react__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
 
+/**
+ * TinyPivot React - AI Data Analyst Component
+ * Split-panel layout: 1/4 chat, 3/4 data preview
+ * Each query step shows data visually with expandable SQL
+ */
+
 interface AIAnalystProps {
     config: AIAnalystConfig;
     theme?: 'light' | 'dark';
@@ -19,7 +25,11 @@ interface AIAnalystProps {
         query: string;
     }) => void;
 }
-declare function AIAnalyst({ config, theme, onDataLoaded, onConversationUpdate, onQueryExecuted, onError, onViewResults, }: AIAnalystProps): react_jsx_runtime.JSX.Element;
+interface AIAnalystHandle {
+    loadFullData: () => Promise<Record<string, unknown>[] | null>;
+    selectedDataSource: string | undefined;
+}
+declare const AIAnalyst: react__default.ForwardRefExoticComponent<AIAnalystProps & react__default.RefAttributes<AIAnalystHandle>>;
 
 interface ColumnFilterProps {
     columnId: string;
@@ -172,6 +182,8 @@ declare function useAIAnalyst(options: UseAIAnalystOptions): {
     importConversation: (conv: AIConversation) => void;
     /** Refresh table list from endpoint */
     fetchTables: () => Promise<void>;
+    /** Load full data for the currently selected data source */
+    loadFullData: () => Promise<Record<string, unknown>[] | null>;
 };
 
 interface ExcelGridOptions<T> {

package/dist/index.d.ts

@@ -1,12 +1,18 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
 import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
 export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
 import * as react from 'react';
 import react__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
 
+/**
+ * TinyPivot React - AI Data Analyst Component
+ * Split-panel layout: 1/4 chat, 3/4 data preview
+ * Each query step shows data visually with expandable SQL
+ */
+
 interface AIAnalystProps {
     config: AIAnalystConfig;
     theme?: 'light' | 'dark';
@@ -19,7 +25,11 @@ interface AIAnalystProps {
         query: string;
     }) => void;
 }
-declare function AIAnalyst({ config, theme, onDataLoaded, onConversationUpdate, onQueryExecuted, onError, onViewResults, }: AIAnalystProps): react_jsx_runtime.JSX.Element;
+interface AIAnalystHandle {
+    loadFullData: () => Promise<Record<string, unknown>[] | null>;
+    selectedDataSource: string | undefined;
+}
+declare const AIAnalyst: react__default.ForwardRefExoticComponent<AIAnalystProps & react__default.RefAttributes<AIAnalystHandle>>;
 
 interface ColumnFilterProps {
     columnId: string;
@@ -172,6 +182,8 @@ declare function useAIAnalyst(options: UseAIAnalystOptions): {
     importConversation: (conv: AIConversation) => void;
     /** Refresh table list from endpoint */
     fetchTables: () => Promise<void>;
+    /** Load full data for the currently selected data source */
+    loadFullData: () => Promise<Record<string, unknown>[] | null>;
 };
 
 interface ExcelGridOptions<T> {

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/components/AIAnalyst.tsx
 import { stripSQLFromContent } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks/useAIAnalyst.ts
 import {
@@ -523,6 +523,82 @@ What would you like to know about this data?`
       setIsLoading(false);
     }
   }, [isLoading, schemas, effectiveDataSources, callAIEndpoint, executeQuery, handleDemoResponse, onConversationUpdate, onError]);
+  const loadFullData = useCallback(async () => {
+    const dataSourceId = conversation.dataSourceId;
+    if (!dataSourceId) {
+      return null;
+    }
+    const dataSource = effectiveDataSources.find((ds) => ds.id === dataSourceId);
+    if (!dataSource) {
+      return null;
+    }
+    const currentConfig = configRef.current;
+    if (currentConfig.dataSourceLoader) {
+      try {
+        const { data } = await currentConfig.dataSourceLoader(dataSourceId);
+        if (data && data.length > 0) {
+          return data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.queryExecutor) {
+      try {
+        const result = await currentConfig.queryExecutor(
+          `SELECT * FROM ${dataSource.table}`,
+          dataSource.table
+        );
+        if (result.data && result.data.length > 0) {
+          return result.data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data via query:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.endpoint) {
+      try {
+        const response = await fetch(currentConfig.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "query",
+            sql: `SELECT * FROM ${dataSource.table}`,
+            table: dataSource.table
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to load data: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data.data && data.data.length > 0) {
+          return data.data;
+        }
+      } catch (err) {
+        console.warn("Failed to load full data from endpoint:", err);
+        onError?.({
+          message: err instanceof Error ? err.message : "Failed to load full data",
+          type: "network"
+        });
+      }
+      return null;
+    }
+    if (currentConfig.demoMode) {
+      const initialData = getInitialDemoData(dataSourceId);
+      return initialData || null;
+    }
+    return null;
+  }, [conversation.dataSourceId, effectiveDataSources, onError]);
   const clearConversation = useCallback(() => {
     const newConv = createConversation(configRef.current.sessionId);
     setConversation(newConv);
@@ -558,13 +634,15 @@ What would you like to know about this data?`
     exportConversation,
     importConversation,
     /** Refresh table list from endpoint */
-    fetchTables
+    fetchTables,
+    /** Load full data for the currently selected data source */
+    loadFullData
   };
 }
 
 // src/components/AIAnalyst.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function AIAnalyst({
+var AIAnalyst = forwardRef(({
   config,
   theme = "light",
   onDataLoaded,
@@ -572,7 +650,7 @@ function AIAnalyst({
   onQueryExecuted,
   onError,
   onViewResults
-}) {
+}, ref) => {
   const {
     messages,
     hasMessages,
@@ -585,7 +663,8 @@ function AIAnalyst({
     dataSources,
     selectDataSource,
     sendMessage,
-    clearConversation
+    clearConversation,
+    loadFullData
   } = useAIAnalyst({
     config,
     onDataLoaded,
@@ -593,6 +672,10 @@ function AIAnalyst({
     onQueryExecuted,
     onError
   });
+  useImperativeHandle(ref, () => ({
+    loadFullData,
+    selectedDataSource
+  }), [loadFullData, selectedDataSource]);
   const [inputText, setInputText] = useState2("");
   const [searchQuery, setSearchQuery] = useState2("");
   const [selectedMessageId, setSelectedMessageId] = useState2(null);
@@ -1101,7 +1184,7 @@ function AIAnalyst({
       )
     ] })
   ] }) });
-}
+});
 
 // src/components/CalculatedFieldModal.tsx
 import { validateSimpleFormula } from "@smallwebco/tinypivot-core";
@@ -4640,7 +4723,9 @@ function DataGrid({
   const [showCopyToast, setShowCopyToast] = useState13(false);
   const [copyToastMessage, setCopyToastMessage] = useState13("");
   const [viewMode, setViewMode] = useState13("grid");
+  const aiAnalystRef = useRef4(null);
   const [aiLoadedData, setAiLoadedData] = useState13(null);
+  const [isLoadingFullData, setIsLoadingFullData] = useState13(false);
   const displayData = useMemo13(() => aiLoadedData || data, [aiLoadedData, data]);
   const [_chartConfig, setChartConfig] = useState13(null);
   const handleChartConfigChange = useCallback13((config) => {
@@ -4998,9 +5083,27 @@ function DataGrid({
     [isSelecting]
   );
   const isShowingAIData = aiLoadedData !== null;
-  const resetToFullData = useCallback13(() => {
-    setAiLoadedData(null);
-  }, []);
+  const resetToFullData = useCallback13(async () => {
+    if (aiAnalystRef.current?.selectedDataSource) {
+      setIsLoadingFullData(true);
+      try {
+        const fullData = await aiAnalystRef.current.loadFullData();
+        if (fullData && fullData.length > 0) {
+          setAiLoadedData(fullData);
+        } else {
+          setAiLoadedData(null);
+        }
+      } catch (err) {
+        console.warn("Failed to load full data:", err);
+        setAiLoadedData(null);
+      } finally {
+        setIsLoadingFullData(false);
+      }
+    } else {
+      setAiLoadedData(null);
+    }
+    clearAllFilters();
+  }, [clearAllFilters]);
   const handleAIDataLoaded = useCallback13(
     (payload) => {
       setAiLoadedData(payload.data);
@@ -5418,11 +5521,12 @@ function DataGrid({
             viewMode === "grid" && isShowingAIData && /* @__PURE__ */ jsxs8(
               "button",
               {
-                className: "vpg-reset-data-btn",
+                className: `vpg-reset-data-btn${isLoadingFullData ? " vpg-loading-btn" : ""}`,
+                disabled: isLoadingFullData,
                 title: "Reset to full dataset",
                 onClick: resetToFullData,
                 children: [
-                  /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx8("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5431,7 +5535,7 @@ function DataGrid({
                       d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx8("span", { children: "Full Data" })
+                  /* @__PURE__ */ jsx8("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
                 ]
               }
             ),
@@ -5499,6 +5603,7 @@ function DataGrid({
         showAIAnalyst && aiAnalyst && /* @__PURE__ */ jsx8("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ jsx8(
           AIAnalyst,
           {
+            ref: aiAnalystRef,
             config: aiAnalyst,
             theme: currentTheme,
             onDataLoaded: handleAIDataLoaded,