Skip to content

Feature/Save_Table_Results_To_API #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AminKhorramii wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feature/Save_Table_Results_To_API #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 21 additions & 24 deletions frontend/src/components/tabs/ai/ResultsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { useTranslation } from 'react-i18next';

import { useAIStore } from "@/store/aiStore";
import { useQueryResultsImport } from "@/hooks/query/useQueryResultsImport";
import { useExportProvider } from "@/hooks/query/useExportProvider";
import QueryResults from "@/components/tabs/query/query-results/QueryResults";
import SaveAsTableModal from "@/components/tabs/query/query-results/SaveAsTableModal";
import ExportResultsModal from "@/components/tabs/query/query-results/ExportResultsModal";

interface ResultsPanelProps {
height: number;
Expand All @@ -21,31 +22,24 @@ const ResultsPanel: React.FC<ResultsPanelProps> = ({ height, activeFile }) => {
const { queryResults } = useAIStore();
const { isImporting, importQueryResultsAsTable } = useQueryResultsImport();
const [showSaveAsTableModal, setShowSaveAsTableModal] = useState(false);

// Hook for export functionality
const { handleExportWithProvider } = useExportProvider(
{
results: queryResults?.data || [],
columns: queryResults?.columns || [],
query: queryResults?.executedSQL,
sourceFileName: activeFile?.fileName || activeFile?.tableName || 'ai_query_results'
},
activeFile,
() => setShowSaveAsTableModal(false)
);

// Handle opening the save as table modal
const handleImportAsTable = useCallback(() => {
setShowSaveAsTableModal(true);
}, []);

// Handle confirming table import with custom name
const handleConfirmImportAsTable = useCallback(async (tableName: string) => {
if (!queryResults?.data || !queryResults?.columns) return;


// Use dynamic source file name based on active file or fallback to ai_query_results
const sourceFileName = activeFile?.fileName || activeFile?.tableName || 'ai_query_results';
// Pass the executed SQL for VIEW creation of large datasets and the custom table name
const success = await importQueryResultsAsTable(
queryResults.data,
queryResults.columns,
sourceFileName,
queryResults.executedSQL,
tableName
);
if (success) {
setShowSaveAsTableModal(false);
}
}, [queryResults, importQueryResultsAsTable, activeFile]);

if (!queryResults) {
return (
Expand Down Expand Up @@ -95,12 +89,15 @@ const ResultsPanel: React.FC<ResultsPanelProps> = ({ height, activeFile }) => {
/>
</div>

{/* Save As Table Modal */}
<SaveAsTableModal
{/* Export Modal */}
<ExportResultsModal
isOpen={showSaveAsTableModal}
onClose={() => setShowSaveAsTableModal(false)}
onConfirm={handleConfirmImportAsTable}
isImporting={isImporting}
onConfirm={handleExportWithProvider}
isExporting={isImporting}
results={queryResults.data}
columns={queryResults.columns}
query={queryResults.executedSQL}
rowCount={queryResults.totalRows}
columnCount={queryResults.columns?.length || 0}
sourceFileName={activeFile?.fileName || activeFile?.tableName || 'ai_query_results'}
Expand Down
38 changes: 22 additions & 16 deletions frontend/src/components/tabs/query/QueryWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import SchemaBrowser from "./SchemaBrowser";
import MonacoEditor from "./MonacoEditor";
import QueryHistory from "./QueryHistory";
import QueryResults from "./query-results/QueryResults";
import SaveAsTableModal from "./query-results/SaveAsTableModal";
import ExportResultsModal from "./query-results/ExportResultsModal";
import { DraftBadge } from "@/components/tabs/query/DraftBadge";
import { Button } from "@/components/ui/Button";

Expand All @@ -39,6 +39,7 @@ import { useQueryExecution } from "@/hooks/query/useQueryExecution";
import { useQueryHistory } from "@/hooks/query/useQueryHistory";
import { useQueryOptimization } from "@/hooks/query/useQueryOptimization";
import { useQueryResultsImport } from "@/hooks/query/useQueryResultsImport";
import { useExportProvider } from "@/hooks/query/useExportProvider";
import { useWorkspaceUIState } from "./useWorkspaceUIState";

// Constants for panel dimensions
Expand Down Expand Up @@ -136,7 +137,19 @@ const QueryWorkspace: React.FC = () => {
useQueryOptimization();

// Hook for importing query results as table
const { isImporting: isImportingAsTable, importQueryResultsAsTable } = useQueryResultsImport();
const { isImporting: isImportingAsTable } = useQueryResultsImport();

// Hook for export functionality
const { handleExportWithProvider } = useExportProvider(
{
results,
columns,
query,
sourceFileName: activeFile?.fileName || activeFile?.tableName
},
activeFile,
() => setShowSaveAsTableModal(false)
);

// Schema browser width state
const [schemaBrowserWidth, setSchemaBrowserWidth] = useState(() => {
Expand Down Expand Up @@ -242,16 +255,6 @@ const QueryWorkspace: React.FC = () => {
setShowSaveAsTableModal(true);
}, []);

// Handle confirming table import with custom name
const handleConfirmImportAsTable = useCallback(async (tableName: string) => {
// Get the source file name from active file context
const sourceFileName = activeFile?.fileName || activeFile?.tableName;
// Pass the current query for VIEW creation of large datasets and the custom table name
const success = await importQueryResultsAsTable(results, columns, sourceFileName, query, tableName);
if (success) {
setShowSaveAsTableModal(false);
}
}, [results, columns, activeFile, query, importQueryResultsAsTable]);

// Memoized event handlers to prevent unnecessary re-renders
const handleExecuteQuery = useCallback(async () => {
Expand Down Expand Up @@ -836,12 +839,15 @@ const QueryWorkspace: React.FC = () => {
</div>
)}

{/* Save As Table Modal */}
<SaveAsTableModal
{/* Export Modal */}
<ExportResultsModal
isOpen={showSaveAsTableModal}
onClose={() => setShowSaveAsTableModal(false)}
onConfirm={handleConfirmImportAsTable}
isImporting={isImportingAsTable}
onConfirm={handleExportWithProvider}
isExporting={isImportingAsTable}
results={results}
columns={columns}
query={query}
rowCount={totalRows}
columnCount={columns?.length || 0}
sourceFileName={activeFile?.fileName || activeFile?.tableName}
Expand Down
Loading