fix #35, add cancel query button

Author: caioricciuti

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gigapi-ui",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "type": "module",
   "description": "UI interface for GigAPI: The Infinite Timeseries Lakehouse. GigAPI UI provides a slick web interface to query time-series using GigAPI Catalog Metadata + DuckDB",
   "scripts": {
@@ -16,7 +16,7 @@
   "author": "",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@hookform/resolvers": "^5.2.1",
+    "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -36,7 +36,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@types/react-grid-layout": "^1.3.5",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -45,17 +45,17 @@
     "highlight.js": "^11.11.1",
     "jotai": "^2.14.0",
     "katex": "^0.16.22",
-    "lucide-react": "^0.543.0",
+    "lucide-react": "^0.544.0",
     "pako": "^2.1.0",
     "react": "^19.1.1",
-    "react-day-picker": "^9.9.0",
+    "react-day-picker": "^9.11.0",
     "react-dom": "^19.1.1",
     "react-grid-layout": "^1.5.2",
-    "react-hook-form": "^7.62.0",
+    "react-hook-form": "^7.63.0",
     "react-markdown": "^10.1.0",
     "react-resizable": "^3.0.5",
-    "react-resizable-panels": "^3.0.5",
-    "react-router-dom": "^7.8.2",
+    "react-resizable-panels": "^3.0.6",
+    "react-router-dom": "^7.9.1",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
@@ -65,16 +65,16 @@
     "tw-animate-css": "^1.3.8",
     "uplot": "^1.6.32",
     "uuid": "^13.0.0",
-    "vite": "^7.1.5",
-    "zod": "^4.1.7"
+    "vite": "^7.1.7",
+    "zod": "^4.1.11"
   },
   "devDependencies": {
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.5.2",
     "@types/pako": "^2.0.4",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.2",
-    "knip": "^5.63.1",
+    "@vitejs/plugin-react": "^5.0.3",
+    "knip": "^5.64.0",
     "typescript": "^5.9.2"
   }
 }

src/atoms/query-atoms.ts

@@ -45,11 +45,43 @@ export const processedQueryAtom = currentTabProcessedQueryAtom;
 // Alias the tab-aware query history atom for backward compatibility
 export const queryHistoryAtom = currentTabQueryHistoryAtom;
 
+// Store abort controllers for each tab's running query
+const abortControllersAtom = atom<Map<string, AbortController>>(new Map());
+
 // Actions
 export const setQueryAtom = atom(null, (_get, set, query: string) => {
   set(queryAtom, query);
 });
 
+// Cancel query action
+export const cancelQueryAtom = atom(null, (get, set, tabId?: string) => {
+  const activeTabId = tabId || get(activeTabIdAtom);
+  if (!activeTabId) return;
+
+  const controllers = get(abortControllersAtom);
+  const controller = controllers.get(activeTabId);
+
+  if (controller) {
+    // Actual query is running, cancel it
+    controller.abort();
+    controllers.delete(activeTabId);
+    set(abortControllersAtom, new Map(controllers));
+    toast.info("Query cancelled");
+  } else {
+    // No controller means it's a stale loading state
+    // Just reset the UI state
+    const getTabById = get(getTabByIdAtom);
+    const tab = getTabById(activeTabId);
+    if (tab?.queryLoading) {
+      toast.info("Clearing stale query state");
+    }
+  }
+
+  // Always update UI state, whether there was a controller or not
+  set(updateTabQueryLoadingByIdAtom, { tabId: activeTabId, loading: false });
+  set(removeRunningQueryAtom, activeTabId);
+});
+
 export const executeQueryAtom = atom(null, async (get, set) => {
   // Capture the tab ID at the start of execution
   const executeTabId = get(activeTabIdAtom);
@@ -94,6 +126,12 @@ export const executeQueryAtom = atom(null, async (get, set) => {
   // Mark this tab as having a running query
   set(addRunningQueryAtom, executeTabId);
 
+  // Create abort controller for this query
+  const abortController = new AbortController();
+  const controllers = get(abortControllersAtom);
+  controllers.set(executeTabId, abortController);
+  set(abortControllersAtom, new Map(controllers));
+
   const startTime = Date.now();
 
   try {
@@ -158,7 +196,11 @@ export const executeQueryAtom = atom(null, async (get, set) => {
       {
         query: processedQuery,
       },
-      { headers }
+      {
+        headers,
+        signal: abortController.signal,
+        timeout: 300000 // 5 minute timeout
+      }
     );
 
     const result = response.data;
@@ -248,6 +290,12 @@ export const executeQueryAtom = atom(null, async (get, set) => {
     // Add to the specific tab's history
     set(addToTabQueryHistoryByIdAtom, { tabId: executeTabId, historyItem });
   } catch (error: any) {
+    // Handle cancellation
+    if (axios.isCancel(error)) {
+      // Query was cancelled, don't show error
+      return;
+    }
+
     let errorMessage = "Query failed";
 
     // Extract detailed error message from axios response
@@ -266,22 +314,43 @@ export const executeQueryAtom = atom(null, async (get, set) => {
             const parsed = JSON.parse(error.response.data);
             if (parsed.error) {
               errorMessage = parsed.error;
+            } else {
+              // Use the string as is if no error field
+              errorMessage = error.response.data || "Query failed with unknown error";
             }
           } catch {
             // If not JSON, use as is
-            errorMessage = error.response.data;
+            errorMessage = error.response.data || "Query failed with unknown error";
           }
+        } else {
+          // If data is another type, try to stringify it
+          errorMessage = JSON.stringify(error.response.data) || "Query failed with unknown error";
         }
       } else if (error.response.statusText) {
         errorMessage = `${error.response.status}: ${error.response.statusText}`;
+      } else {
+        errorMessage = `HTTP Error ${error.response.status || 'unknown'}`;
       }
     } else if (error.message) {
       errorMessage = error.message;
     }
 
+    // Ensure errorMessage is never empty
+    if (!errorMessage || errorMessage.trim() === "") {
+      errorMessage = "Query failed with unknown error";
+      console.error("Query execution error:", error); // Log full error for debugging
+    }
+
     set(updateTabQueryErrorByIdAtom, { tabId: executeTabId, error: errorMessage });
     set(updateTabQueryResultsByIdAtom, { tabId: executeTabId, results: null }); // Clear results on error
 
+    // Show toast with validated error message
+    if (errorMessage && errorMessage.trim() !== "") {
+      toast.error(errorMessage);
+    } else {
+      toast.error("Query failed. Check console for details.");
+    }
+
     // Add failed query to history with full context
     const historyItem: QueryHistoryItem = {
       id: uuidv4(),
@@ -301,9 +370,14 @@ export const executeQueryAtom = atom(null, async (get, set) => {
   } finally {
     // Update loading state for the specific tab
     set(updateTabQueryLoadingByIdAtom, { tabId: executeTabId, loading: false });
-    
+
     // Remove this tab from running queries
     set(removeRunningQueryAtom, executeTabId);
+
+    // Clean up abort controller
+    const controllers = get(abortControllersAtom);
+    controllers.delete(executeTabId);
+    set(abortControllersAtom, new Map(controllers));
   }
 });
 

src/atoms/tab-atoms.ts

@@ -26,7 +26,18 @@ function migrateOldData(): TabsState {
   const existingTabs = localStorage.getItem("gigapi_tabs");
   if (existingTabs) {
     try {
-      return JSON.parse(existingTabs);
+      const state = JSON.parse(existingTabs);
+      // ALWAYS reset loading states on app initialization to prevent stale state
+      if (state.tabs) {
+        state.tabs = state.tabs.map((tab: QueryTab) => ({
+          ...tab,
+          queryLoading: false, // Always reset loading state on page refresh
+          queryError: null // Also clear any stale errors
+        }));
+      }
+      // Save the cleaned state back to localStorage
+      localStorage.setItem("gigapi_tabs", JSON.stringify(state));
+      return state;
     } catch (e) {
       console.error("Failed to parse existing tabs:", e);
     }
@@ -552,7 +563,19 @@ export const currentTabQueryErrorAtom = atom(
 
 // Current tab's query loading state
 export const currentTabQueryLoadingAtom = atom(
-  (get) => get(activeTabAtom)?.queryLoading || false,
+  (get) => {
+    const activeTab = get(activeTabAtom);
+    if (!activeTab) return false;
+
+    // Check for stale loading state - if loading but no running query, it's stale
+    const runningQueries = get(runningQueriesAtom);
+    if (activeTab.queryLoading && !runningQueries.has(activeTab.id)) {
+      // Stale loading state detected, return false
+      return false;
+    }
+
+    return activeTab.queryLoading || false;
+  },
   (get, set, loading: boolean) => {
     const state = get(tabsStateAtom);
     const activeTab = get(activeTabAtom);
@@ -716,8 +739,27 @@ export const currentTabAvailableFieldsAtom = atom(
 // ============================================================================
 
 // Track which tabs have running queries
+// Always starts empty on page load to prevent stale state
 export const runningQueriesAtom = atom<Set<string>>(new Set<string>());
 
+// Reset all stale loading states on initialization
+export const resetStaleLoadingStatesAtom = atom(null, (get, set) => {
+  const state = get(tabsStateAtom);
+  const runningQueries = get(runningQueriesAtom);
+
+  // Clear loading state for all tabs that aren't actually running
+  const updatedTabs = state.tabs.map((tab) => {
+    if (tab.queryLoading && !runningQueries.has(tab.id)) {
+      return { ...tab, queryLoading: false };
+    }
+    return tab;
+  });
+
+  if (JSON.stringify(updatedTabs) !== JSON.stringify(state.tabs)) {
+    set(tabsStateAtom, { ...state, tabs: updatedTabs });
+  }
+});
+
 // Add a tab to running queries
 export const addRunningQueryAtom = atom(null, (get, set, tabId: string) => {
   const running = new Set(get(runningQueriesAtom));

src/components/query/MonacoSqlEditor.tsx

@@ -379,12 +379,18 @@ export default function MonacoSqlEditor({
   const editorTheme = theme === "light" ? "light" : "vs-dark";
 
   return (
-    <div className="h-full w-full border rounded-md overflow-hidden bg-background relative">
+    <div className={`h-full w-full border rounded-md overflow-hidden bg-background relative ${isLoading ? 'border-blue-500 animate-pulse' : ''}`}>
       {!isEditorReady && (
         <div className="absolute inset-0 z-10">
           <Skeleton className="h-full w-full" />
         </div>
       )}
+      {isLoading && (
+        <div className="absolute top-2 right-2 z-20 bg-blue-500/90 text-white px-3 py-1 rounded-md text-xs font-medium flex items-center gap-2">
+          <Loader className="h-3 w-3" />
+          Query running...
+        </div>
+      )}
       <Editor
         height="100%"
         defaultLanguage="sql"
@@ -407,7 +413,7 @@ export default function MonacoSqlEditor({
           tabSize: 2,
           wordWrap: "on",
           automaticLayout: true,
-          readOnly: isLoading,
+          // Remove readOnly: isLoading to allow editing during query execution
         }}
         loading={<Loader className="h-10 w-10" />}
       />

src/components/query/QueryEditor.tsx

@@ -4,6 +4,7 @@ import {
   queryAtom,
   queryResultsAtom,
   executeQueryAtom,
+  cancelQueryAtom,
   queryLoadingAtom,
   setQueryAtom,
   selectedDbAtom,
@@ -37,6 +38,7 @@ export default function QueryEditor() {
   const [autoCompleteSchema] = useAtom(autoCompleteSchemaAtom);
   const setQuery = useSetAtom(setQueryAtom);
   const executeQuery = useSetAtom(executeQueryAtom);
+  const cancelQuery = useSetAtom(cancelQueryAtom);
   const setSelectedTableAction = useSetAtom(setSelectedTableAtom);
   const setSelectedTimeField = useSetAtom(setSelectedTimeFieldAtom);
   const setHasTimeVariables = useSetAtom(setHasTimeVariablesAtom);
@@ -80,26 +82,33 @@ export default function QueryEditor() {
   // Handle time range change
   const setTimeRange = useSetAtom(setTimeRangeAtom);
   const [shouldAutoExecute, setShouldAutoExecute] = useState(false);
-  
+  const [isInitialMount, setIsInitialMount] = useState(true);
+
   const handleTimeRangeChange = useCallback(
     (newTimeRange: any) => {
       setTimeRange(newTimeRange);
-      
+
       // Mark that we should auto-execute if conditions are met
-      if (queryResults && queryResults.length > 0 && hasTimeVariables && query.trim()) {
+      // But not on initial mount to prevent auto-execution on page refresh
+      if (!isInitialMount && queryResults && queryResults.length > 0 && hasTimeVariables && query.trim()) {
         setShouldAutoExecute(true);
       }
     },
-    [setTimeRange, queryResults, hasTimeVariables, query]
+    [setTimeRange, queryResults, hasTimeVariables, query, isInitialMount]
   );
-  
+
+  // Mark initial mount as complete after first render
+  useEffect(() => {
+    setIsInitialMount(false);
+  }, []);
+
   // Auto-execute query when time range changes and conditions are met
   useEffect(() => {
-    if (shouldAutoExecute) {
+    if (shouldAutoExecute && !isInitialMount && !isLoading) {
       handleRunQuery();
       setShouldAutoExecute(false);
     }
-  }, [shouldAutoExecute]);
+  }, [shouldAutoExecute, isInitialMount, isLoading]);
 
   // Handle running query with timeout protection - NOT using useCallback to avoid stale closures
   const handleRunQuery = async () => {
@@ -135,6 +144,11 @@ export default function QueryEditor() {
     }
   }, [setQuery]);
 
+  // Handle canceling query
+  const handleCancelQuery = useCallback(() => {
+    cancelQuery();
+  }, [cancelQuery]);
+
   // Handle refreshing schema
   const handleRefreshSchema = useCallback(() => {
     forceReloadSchema();
@@ -251,6 +265,7 @@ export default function QueryEditor() {
           showChatPanel={showChatPanel}
           chatSessionsCount={0}
           onRunQuery={handleRunQuery}
+          onCancelQuery={handleCancelQuery}
           onClearQuery={handleClearQuery}
           onToggleChat={() => {
             setShowChatPanel(!showChatPanel);