WIP Time Grain

Author: cgivre

exec/java-exec/src/main/resources/webapp/src/api/queries.ts

@@ -25,14 +25,21 @@ export async function executeQuery(request: QueryRequest): Promise<QueryResult>
   // Strip trailing semicolons — Drill's SQL parser doesn't accept them
   // (the CLI strips them automatically, but the REST API passes them through)
   const query = request.query.replace(/;\s*$/, '');
-  const response = await apiClient.post<QueryResult>('/query.json', {
+  const body: Record<string, unknown> = {
     query,
     queryType: request.queryType || 'SQL',
     autoLimit: request.autoLimitRowCount ? String(request.autoLimitRowCount) : '',
-    userName: request.userName,
-    defaultSchema: request.defaultSchema,
-    options: request.options,
-  });
+  };
+  if (request.userName) {
+    body.userName = request.userName;
+  }
+  if (request.defaultSchema) {
+    body.defaultSchema = request.defaultSchema;
+  }
+  if (request.options) {
+    body.options = request.options;
+  }
+  const response = await apiClient.post<QueryResult>('/query.json', body);
 
   // Drill returns HTTP 200 even for failed queries — check queryState
   if (response.data.queryState === 'FAILED') {

exec/java-exec/src/main/resources/webapp/src/components/visualization/ChartPreview.tsx

@@ -28,7 +28,7 @@ interface ChartPreviewProps {
   config: VisualizationConfig;
   data: QueryResult | null;
   loading?: boolean;
-  height?: number;
+  height?: number | string;
   mini?: boolean;
 }
 
@@ -762,7 +762,7 @@ export default function ChartPreview({
       <Table
         dataSource={data.rows.map((row, idx) => ({ ...row, key: idx }))}
         columns={tableColumns}
-        scroll={{ y: height - 100 }}
+        scroll={{ y: typeof height === 'number' ? height - 100 : 'calc(100% - 100px)' }}
         size="small"
         pagination={{ pageSize: 50, showSizeChanger: true }}
       />

exec/java-exec/src/main/resources/webapp/src/components/visualization/VisualizationBuilder.tsx

@@ -162,7 +162,9 @@ export default function VisualizationBuilder({
       return;
     }
     const sourceSql = sql;
-    if (!sourceSql || !hasCompleteAggregationConfig(config.chartOptions, config.metrics)) {
+    const timeGrain = config.chartOptions?.timeGrain;
+    const hasAgg = hasCompleteAggregationConfig(config.chartOptions, config.metrics);
+    if (!sourceSql || (!hasAgg && !(timeGrain && config.xAxis))) {
       setAggregatedData(null);
       setAggregatedError(null);
       return;

exec/java-exec/src/main/resources/webapp/src/components/visualization/VisualizationEditor.tsx

@@ -83,6 +83,9 @@ export default function VisualizationEditor({
   const [sqlDirty, setSqlDirty] = useState(false);
   const [staleMapping, setStaleMapping] = useState(false);
 
+  // Guard: prevent effective query from firing before the saved config is loaded
+  const [configReady, setConfigReady] = useState(false);
+
   // Watch colorScheme from form so preview updates live
   const selectedColorScheme = Form.useWatch('colorScheme', form) || 'default';
 
@@ -100,6 +103,10 @@ export default function VisualizationEditor({
         colorScheme: visualization.config?.colorScheme || 'default',
         isPublic: visualization.isPublic || false,
       });
+      // Signal that the saved config has been fully loaded — the effective
+      // query effect is gated on this flag to avoid computing queries with
+      // stale/incomplete config (e.g. missing timeGrain).
+      setConfigReady(true);
     }
   }, [open, visualization, form]);
 
@@ -177,20 +184,28 @@ export default function VisualizationEditor({
 
   const [effectiveQuery, setEffectiveQuery] = useState<string>('');
 
-  // Compute effective query asynchronously (time grain via backend)
+  // Compute effective query asynchronously — gated on configReady so we don't
+  // fire with stale/incomplete config before the saved visualization is loaded.
   useEffect(() => {
-    if (!editedSql) {
+    if (!configReady || !editedSql) {
       setEffectiveQuery('');
       return;
     }
     let cancelled = false;
-    getEffectiveQuery(editedSql, config).then((result) => {
-      if (!cancelled) {
-        setEffectiveQuery(result);
-      }
-    });
+    getEffectiveQuery(editedSql, config)
+      .then((result) => {
+        if (!cancelled) {
+          setEffectiveQuery(result);
+        }
+      })
+      .catch((err) => {
+        console.error('[VisualizationEditor] getEffectiveQuery failed:', err);
+        if (!cancelled) {
+          setEffectiveQuery(editedSql);
+        }
+      });
     return () => { cancelled = true; };
-  }, [editedSql, config]);
+  }, [configReady, editedSql, config]);
 
   // Data for chart preview: prefer aggregated data when available
   const previewData = aggregatedData || baseData;
@@ -251,6 +266,7 @@ export default function VisualizationEditor({
   });
 
   const handleClose = () => {
+    setConfigReady(false);
     setChartType('bar');
     setConfig({});
     setBaseData(null);
@@ -439,7 +455,7 @@ export default function VisualizationEditor({
             </div>
 
             {/* Chart Preview */}
-            <div style={{ flex: 1, padding: 16, overflow: 'hidden' }}>
+            <div style={{ flex: 1, padding: 16, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
               {aggregatedError && (
                 <Alert
                   message="Aggregation Error"
@@ -452,16 +468,18 @@ export default function VisualizationEditor({
                   showIcon
                   closable
                   onClose={() => setAggregatedError(null)}
-                  style={{ marginBottom: 8 }}
+                  style={{ marginBottom: 8, flexShrink: 0 }}
                 />
               )}
-              <ChartPreview
-                chartType={chartType}
-                config={{ ...config, colorScheme: selectedColorScheme }}
-                data={previewData}
-                loading={dataLoading || aggregatedLoading}
-                height={showSql ? 250 : 450}
-              />
+              <div style={{ flex: 1, minHeight: 0 }}>
+                <ChartPreview
+                  chartType={chartType}
+                  config={{ ...config, colorScheme: selectedColorScheme }}
+                  data={previewData}
+                  loading={dataLoading || aggregatedLoading}
+                  height="100%"
+                />
+              </div>
             </div>
 
             {/* SQL Panel (collapsible) */}

exec/java-exec/src/main/resources/webapp/src/pages/VisualizationsPage.tsx

@@ -107,6 +107,10 @@ function MiniVizPreview({ viz }: { viz: Visualization }) {
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
 
+  // Serialize config to a stable string so the effect re-fires when config changes
+  // (e.g. time grain or aggregation settings updated)
+  const configKey = JSON.stringify(viz.config || {});
+
   useEffect(() => {
     if (!viz.sql) {
       setFailed(true);
@@ -145,7 +149,7 @@ function MiniVizPreview({ viz }: { viz: Visualization }) {
     return () => {
       cancelled = true;
     };
-  }, [viz.id, viz.sql, viz.defaultSchema]);
+  }, [viz.id, viz.sql, viz.defaultSchema, configKey]);
 
   // Fall back to icon on failure or no SQL
   if (failed || (!loading && !queryResult)) {