@magemetrics/ai 0.3.3 → 0.4.0

package/dist/react/index.d.ts

@@ -1,6 +1,7 @@
 import { AuthState } from '@magemetrics/core';
 import { CreateFlowParam } from '@magemetrics/core';
 import { default as default_2 } from 'react';
+import { Dispatch } from 'react';
 import { FetchNextPageOptions } from '@tanstack/react-query';
 import { ForwardRefExoticComponent } from 'react';
 import { GenerateInsightParam } from '@magemetrics/core';
@@ -8,8 +9,11 @@ import { InfiniteData } from '@tanstack/react-query';
 import { InfiniteQueryObserverResult } from '@tanstack/react-query';
 import { MageMetricsClient } from '@magemetrics/core';
 import { MageMetricsClientConfig } from '@magemetrics/core';
+import { OnChangeFn } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';
 import { RefAttributes } from 'react';
+import { SetStateAction } from 'react';
+import { SortingState as SortingState_2 } from '@tanstack/react-table';
 import { UseMutateAsyncFunction } from '@tanstack/react-query';
 import { UseMutateFunction } from '@tanstack/react-query';
 import { UseMutationOptions } from '@tanstack/react-query';
@@ -77,9 +81,18 @@ declare interface ConversationContentProps {
 
 export { CreateFlowParam }
 
-/** This component is not bounded in height and must be wrapped in a container to properly work */
+/**
+ * This component is not bounded in height and must be wrapped in a container to properly work
+ * @param props - props
+ * @param props.reportId - The ID of the report to display
+ * @param props.initialState - The initial state of data table
+ * @param props.onStateChange - Callback function to handle state changes
+ * @returns JSX.Element
+ */
 export declare const DataReport: React.FC<{
     reportId: number;
+    initialState?: DataTableState;
+    onStateChange?: (state: DataTableState) => void;
 }>;
 
 export declare interface DataReportMessageProps {
@@ -101,6 +114,13 @@ export declare interface DataReportMessageProps {
 
 export declare const DataTable: React.FC<DataReportMessageProps>;
 
+declare type DataTableState = {
+    pageIndex: number;
+    pageSize: number;
+    sorting: SortingState;
+    filters: TableFilters;
+};
+
 declare type DisplayControlProps = {
     /** Whether to display the recommendations section when the input is active */
     showRecommendations?: boolean;
@@ -357,6 +377,8 @@ declare interface ManagedModalProps extends ModalProps {
     apiUrl: string;
     /** Whether to disable canvas functionality in conversations */
     disableCanvas?: boolean;
+    /** Whether to render data freshness info in the conversation header */
+    showDataFreshness?: boolean;
     /** Where to persist modal state (localStorage, queryParam, or none) */
     persist?: PersistenceOptions;
     /** Custom component overrides for extending functionality */
@@ -372,18 +394,59 @@ declare interface ModalProps {
     startOptions?: StartOptions;
 }
 
+export declare const PaginatedDataTableUI: React.FC<PaginatedDataTableUIProps>;
+
+declare type PaginatedDataTableUIProps = {
+    reportId: number;
+    data: Record<string, unknown>[];
+    columns: FrontendReportColumns;
+    explainability: FrontendReportExplainability | null | undefined;
+    isFetching: boolean;
+    totalRows?: number;
+    pageIndex: number;
+    pageSize: number;
+    totalPages?: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    goToPage: (page: number) => void;
+    sorting: SortingState;
+    onSortingChange: OnChangeFn<SortingState>;
+    filters: TableFilters;
+    onFiltersChange: (filters: TableFilters) => void;
+    onCalculatedPageSize?: (pageSize: number) => void;
+    onStateChange?: (state: {
+        pageIndex: number;
+        pageSize: number;
+        sorting: SortingState;
+        filters: TableFilters;
+    }) => void;
+    emptyState?: React.ReactNode;
+};
+
 declare type PersistenceOptions = "queryParam" | "none";
 
 export declare const PublicCanvas: React.FC<React.ComponentProps<typeof PublicCanvasPanel>>;
 
-/** This component is not bounded in height and must be wrapped in a container to properly work */
-export declare const PublicCanvasDataReport: React.FC<{
+declare const PublicCanvasPanel: default_2.FC<{
     canvasId: string;
-    reportId: number;
 }>;
 
-declare const PublicCanvasPanel: default_2.FC<{
+/**
+ * This component is not bounded in height and must be wrapped in a container to properly work
+ * @param props - props
+ * @param props.canvasId - The ID of the canvas to display
+ * @param props.reportId - The ID of the report to display
+ * @param props.initialState - The initial state of data table
+ * @param props.onStateChange - Callback function to handle state changes
+ * @returns JSX.Element
+ */
+export declare const PublicDataReport: React.FC<{
     canvasId: string;
+    reportId: number;
+    initialState?: DataTableState;
+    onStateChange?: (state: DataTableState) => void;
 }>;
 
 declare type ReportDataFilters = {
@@ -402,6 +465,7 @@ declare type StandaloneConversationModalProps = {
     opened: boolean;
     flowId: string;
     disableCanvas?: boolean;
+    showDataFreshness?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
 
@@ -847,6 +911,79 @@ export declare const useMageMetricsClient: () => MageMetricsClient;
 
 export declare const useMageMetricsReady: () => false | MageMetricsClient;
 
+export declare const usePaginatedDataReport: (reportId: FrontendReport["id"], options?: {
+    pageSize?: number;
+    initialPageIndex?: number;
+    initialSorting?: SortingState_2;
+    initialFilters?: TableFilters;
+}) => {
+    columns: {
+        name: string;
+        data_type: string;
+        dataType: string;
+        renderType?: string;
+        unit?: string;
+    }[] | undefined;
+    isPendingColumns: boolean;
+    isPendingData: boolean;
+    isFetching: boolean;
+    data: {
+        [key: string]: unknown;
+    }[];
+    explainability: {
+        sql_explanation?: {
+            chunk_title: string;
+            chunk_explanation: string;
+            lines: {
+                sql: string;
+                explanation: string;
+            }[];
+        }[] | null;
+        business_explanation?: {
+            summary: string;
+            implementation: string[];
+            assumptions: {
+                type: "grain" | "completeness" | "transformation" | "relationship" | "other";
+                details: string;
+                explanation: string;
+            }[];
+        } | null;
+        columns_lineage?: {
+            [key: string]: {
+                nodes: {
+                    id: string;
+                    type: "entity" | "attribute" | "filter" | "process" | "combine" | "result";
+                    explanation: string;
+                }[];
+                edges: {
+                    source: string;
+                    target: string;
+                }[];
+            };
+        } | null;
+        confidence_score: number;
+        confidence_score_reason: string;
+        assumptions_score?: number;
+        assumptions_score_reason?: string;
+        friendliness_score?: number;
+        friendliness_score_reason?: string;
+        flow_data_id: number;
+    } | null | undefined;
+    totalRows: number | undefined;
+    pageIndex: number;
+    pageSize: number;
+    totalPages: number | undefined;
+    nextPage: () => void;
+    previousPage: () => void;
+    goToPage: (page: number) => void;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    sorting: SortingState_2;
+    setSorting: Dispatch<SetStateAction<SortingState_2>>;
+    filters: TableFilters;
+    setFilters: (newFilters: TableFilters) => void;
+};
+
 export declare const useRecentFlows: (limit?: number) => UseQueryResult<    {
 id: string;
 request: string;