Time grain working

cgivre · cgivre · commit 28fc2ef29995 · 2026-02-18T17:30:59.000-05:00
diff --git a/exec/java-exec/src/main/resources/webapp/src/api/queries.ts b/exec/java-exec/src/main/resources/webapp/src/api/queries.ts
@@ -41,23 +41,40 @@ export async function executeQuery(request: QueryRequest): Promise<QueryResult>
   }
   const response = await apiClient.post<QueryResult>('/query.json', body);
 
-  // Drill returns HTTP 200 even for failed queries — check queryState
-  if (response.data.queryState === 'FAILED') {
+  // Drill returns HTTP 200 even for failed queries — check queryState.
+  // However, when autoLimit is used, Drill may set queryState to FAILED
+  // even though it successfully returned partial results (the auto-limit
+  // interrupted the query).  If we got rows back, treat it as a success.
+  const hasData = response.data.rows && response.data.rows.length > 0;
+  if (response.data.queryState === 'FAILED' && !hasData) {
     const queryId = response.data.queryId;
+    console.error('[executeQuery] FAILED — queryId=%s, queryState=%s, errorMessage=%s, exception=%s, cols=%d, rows=%d, allKeys=%s, query=%s',
+      queryId, response.data.queryState, response.data.errorMessage,
+      response.data.exception,
+      response.data.columns?.length ?? -1,
+      response.data.rows?.length ?? -1,
+      Object.keys(response.data).join(','),
+      query.substring(0, 200));
     let detail = response.data.errorMessage || response.data.exception || '';
 
     // If no error detail in the query response, try fetching the profile
     if (!detail && queryId) {
       try {
         const profile = await apiClient.get(`/profiles/${queryId}.json`);
         const profileData = profile.data;
+        console.error('[executeQuery] profile keys=%s', Object.keys(profileData || {}));
+        console.error('[executeQuery] profile verboseError=%s', profileData?.verboseError);
+        console.error('[executeQuery] profile error=%s', profileData?.error);
+        console.error('[executeQuery] profile errorId=%s planEnd=%s state=%s',
+          profileData?.errorId, profileData?.planEnd, profileData?.state);
         // Prefer verboseError (detailed) over error (concise)
         if (profileData?.verboseError) {
           detail = profileData.verboseError;
         } else if (profileData?.error) {
           detail = profileData.error;
         }
-      } catch {
+      } catch (profileErr) {
+        console.error('[executeQuery] profile fetch failed:', profileErr);
         // Profile fetch failed — fall through to generic message
       }
     }
diff --git a/exec/java-exec/src/main/resources/webapp/src/components/visualization/VisualizationEditor.tsx b/exec/java-exec/src/main/resources/webapp/src/components/visualization/VisualizationEditor.tsx
@@ -38,7 +38,7 @@ import { executeQuery } from '../../api/queries';
 import ChartTypeSelector from './ChartTypeSelector';
 import ColumnMapper from './ColumnMapper';
 import ChartPreview from './ChartPreview';
-import { getEffectiveQuery } from '../../utils/sqlTransformations';
+import { computeEffectiveQuery } from '../../utils/sqlTransformations';
 import type { ChartType, VisualizationConfig, QueryResult, VisualizationCreate, Visualization } from '../../types';
 
 const { Text } = Typography;
@@ -118,13 +118,16 @@ export default function VisualizationEditor({
     }
     setDataLoading(true);
     setDataError(null);
+    console.debug('[VizEditor:fetchData] sending base query, defaultSchema=%s, sql=%s',
+      visualization?.defaultSchema, editedSql.substring(0, 120));
     try {
       const result = await executeQuery({
         query: editedSql,
         queryType: 'SQL',
         autoLimitRowCount: 10000,
         defaultSchema: visualization?.defaultSchema,
       });
+      console.debug('[VizEditor:fetchData] SUCCESS rows=%d cols=%s', result.rows?.length, result.columns);
       setBaseData(result);
       setSqlDirty(false);
     } catch (err: unknown) {
@@ -148,7 +151,7 @@ export default function VisualizationEditor({
   }, [open, visualization, editedSql, fetchData]);
 
   // Extract column info from base data (always the full column set)
-  const columns = useMemo(() => {
+  const baseColumns = useMemo(() => {
     if (!baseData || !baseData.columns || !baseData.metadata) {
       return [];
     }
@@ -158,6 +161,45 @@ export default function VisualizationEditor({
     }));
   }, [baseData]);
 
+  // Fallback columns: when the base query fails, derive columns from
+  // the aggregated query result or the saved config so the ColumnMapper
+  // (and time grain selector) can still render.
+  const columns = useMemo(() => {
+    if (baseColumns.length > 0) {
+      return baseColumns;
+    }
+    // Try aggregated data first — it has real type metadata
+    if (aggregatedData?.columns && aggregatedData?.metadata) {
+      return aggregatedData.columns.map((name, idx) => ({
+        name,
+        type: aggregatedData.metadata[idx] || 'VARCHAR',
+      }));
+    }
+    // Last resort: reconstruct from saved config with assumed types
+    const cols: { name: string; type: string }[] = [];
+    if (config.xAxis) {
+      cols.push({ name: config.xAxis, type: 'DATE' });
+    }
+    if (config.yAxis) {
+      cols.push({ name: config.yAxis, type: 'DOUBLE' });
+    }
+    if (config.metrics) {
+      config.metrics.forEach(m => {
+        if (!cols.some(c => c.name === m)) {
+          cols.push({ name: m, type: 'DOUBLE' });
+        }
+      });
+    }
+    if (config.dimensions) {
+      config.dimensions.forEach(d => {
+        if (!cols.some(c => c.name === d)) {
+          cols.push({ name: d, type: 'VARCHAR' });
+        }
+      });
+    }
+    return cols;
+  }, [baseColumns, aggregatedData, config.xAxis, config.yAxis, config.metrics, config.dimensions]);
+
   // Detect stale column mappings after data changes
   useEffect(() => {
     if (columns.length === 0) {
@@ -182,34 +224,33 @@ export default function VisualizationEditor({
     setStaleMapping(hasStale);
   }, [columns, config.xAxis, config.yAxis, config.metrics, config.dimensions]);
 
-  const [effectiveQuery, setEffectiveQuery] = useState<string>('');
-
-  // Compute effective query asynchronously — gated on configReady so we don't
-  // fire with stale/incomplete config before the saved visualization is loaded.
-  useEffect(() => {
+  // Compute effective query synchronously — gated on configReady so we don't
+  // compute with stale/incomplete config before the saved visualization is loaded.
+  const effectiveQuery = useMemo(() => {
     if (!configReady || !editedSql) {
-      setEffectiveQuery('');
-      return;
+      return '';
     }
-    let cancelled = false;
-    getEffectiveQuery(editedSql, config)
-      .then((result) => {
-        if (!cancelled) {
-          setEffectiveQuery(result);
-        }
-      })
-      .catch((err) => {
-        console.error('[VisualizationEditor] getEffectiveQuery failed:', err);
-        if (!cancelled) {
-          setEffectiveQuery(editedSql);
-        }
-      });
-    return () => { cancelled = true; };
+    return computeEffectiveQuery(editedSql, config);
   }, [configReady, editedSql, config]);
 
   // Data for chart preview: prefer aggregated data when available
   const previewData = aggregatedData || baseData;
 
+  // Loading state for chart: when aggregation is active, only wait for the
+  // aggregated query (don't block the chart on the base-data fetch which is
+  // only needed for ColumnMapper's column list).  Matches VisualizationBuilder.
+  const chartLoading = (effectiveQuery && effectiveQuery !== editedSql)
+    ? aggregatedLoading
+    : dataLoading;
+
+  console.debug('[VizEditor] render — chartType=%s, xAxis=%s, metrics=%s, dims=%s, timeGrain=%s, dataLoading=%s, aggLoading=%s, chartLoading=%s, previewData=%s, rows=%d, effectiveQuery=%s',
+    chartType, config.xAxis, JSON.stringify(config.metrics), JSON.stringify(config.dimensions),
+    config.chartOptions?.timeGrain || '(none)',
+    dataLoading, aggregatedLoading, chartLoading,
+    aggregatedData ? 'aggregated' : baseData ? 'base' : 'none',
+    previewData?.rows?.length ?? 0,
+    effectiveQuery ? effectiveQuery.substring(0, 80) : '(empty)');
+
   // Fetch aggregated data when the effective query differs from the base SQL
   useEffect(() => {
     if (!open || !editedSql) {
@@ -344,28 +385,30 @@ export default function VisualizationEditor({
 
             {/* Data Mapping Section */}
             <Card size="small" title="Data Mapping" style={{ marginBottom: 12 }}>
-              {dataLoading ? (
+              {dataLoading && columns.length === 0 ? (
                 <div style={{ padding: 16, textAlign: 'center' }}>
                   <Spin size="small" />
                   <div style={{ marginTop: 8 }}>
                     <Text type="secondary">Loading columns...</Text>
                   </div>
                 </div>
-              ) : dataError ? (
-                <Alert
-                  type="warning"
-                  message="Could not load data"
-                  description={dataError}
-                  showIcon
-                  style={{ marginBottom: 8 }}
-                  action={
-                    <Button size="small" icon={<ReloadOutlined />} onClick={fetchData}>
-                      Retry
-                    </Button>
-                  }
-                />
               ) : (
                 <>
+                  {dataError && (
+                    <Alert
+                      type="warning"
+                      message="Could not load base data"
+                      description={dataError}
+                      showIcon
+                      closable
+                      style={{ marginBottom: 8 }}
+                      action={
+                        <Button size="small" icon={<ReloadOutlined />} onClick={fetchData}>
+                          Retry
+                        </Button>
+                      }
+                    />
+                  )}
                   {staleMapping && (
                     <Alert
                       type="warning"
@@ -476,7 +519,7 @@ export default function VisualizationEditor({
                   chartType={chartType}
                   config={{ ...config, colorScheme: selectedColorScheme }}
                   data={previewData}
-                  loading={dataLoading || aggregatedLoading}
+                  loading={chartLoading}
                   height="100%"
                 />
               </div>
@@ -505,7 +548,7 @@ export default function VisualizationEditor({
                       <WarningOutlined /> SQL modified but not yet run. Click Run to refresh the preview.
                     </Text>
                   )}
-                  {effectiveQuery !== editedSql && editedSql && (
+                  {effectiveQuery && effectiveQuery !== editedSql && editedSql && (
                     <>
                       <Text type="secondary" style={{ fontSize: 11, display: 'block', marginBottom: 4 }}>
                         Effective Query (with aggregation)
diff --git a/exec/java-exec/src/main/resources/webapp/src/utils/sqlTransformations.ts b/exec/java-exec/src/main/resources/webapp/src/utils/sqlTransformations.ts
@@ -489,22 +489,31 @@ export function buildAggregationQuery(
   return parts.join('\n');
 }
 
+export type EffectiveQueryConfig = {
+  xAxis?: string;
+  metrics?: string[];
+  dimensions?: string[];
+  chartOptions?: Record<string, unknown>;
+};
+
 /**
- * Returns the effective SQL query for a visualization, wrapping the original
- * SQL with aggregation/time grain when the config requires it.
+ * Synchronous version of getEffectiveQuery. Computes the effective SQL query
+ * for a visualization, wrapping the original SQL with aggregation/time grain
+ * when the config requires it.
  *
  * When time grain is set, data is aggregated with DATE_TRUNC + GROUP BY.
  * If the user hasn't set explicit aggregation functions, SUM is used as the
  * default for each metric so the chart shows meaningful grouped results.
  *
  * All transformations are done client-side (no backend API dependency).
  *
- * Shared by VisualizationBuilder, VisualizationEditor, and VisualizationsPage.
+ * Prefer this over getEffectiveQuery in useMemo / render paths to avoid
+ * unnecessary async state transitions.
  */
-export async function getEffectiveQuery(
+export function computeEffectiveQuery(
   originalSql: string,
-  cfg: { xAxis?: string; metrics?: string[]; dimensions?: string[]; chartOptions?: Record<string, unknown> }
-): Promise<string> {
+  cfg: EffectiveQueryConfig
+): string {
   const timeGrain = cfg.chartOptions?.timeGrain as TimeGrain | undefined;
   const hasExplicitAgg = hasCompleteAggregationConfig(cfg.chartOptions, cfg.metrics);
 
@@ -551,6 +560,17 @@ export async function getEffectiveQuery(
   return wrapped || originalSql;
 }
 
+/**
+ * Async wrapper around computeEffectiveQuery for use in async contexts
+ * (useEffect chains, event handlers, etc.).
+ */
+export async function getEffectiveQuery(
+  originalSql: string,
+  cfg: EffectiveQueryConfig
+): Promise<string> {
+  return computeEffectiveQuery(originalSql, cfg);
+}
+
 export function calculateColumnStats(
   rowData: Record<string, unknown>[],
   columnName: string
diff --git a/exec/java-exec/src/main/resources/webapp/vite.config.ts b/exec/java-exec/src/main/resources/webapp/vite.config.ts
@@ -51,6 +51,10 @@ export default defineConfig({
         target: 'http://localhost:8047',
         changeOrigin: true,
       },
+      '/profiles': {
+        target: 'http://localhost:8047',
+        changeOrigin: true,
+      },
     },
   },
 });
