datajunction-ui 0.0.70 → 0.0.72

package/.env

@@ -1,3 +1,9 @@
 REACT_APP_DJ_URL=http://localhost:8000
 REACT_USE_SSE=true
-REACT_ENABLE_GOOGLE_OAUTH=true
+REACT_ENABLE_GOOGLE_OAUTH=true
+
+# Scan estimate warning thresholds (in GB)
+# Orange warning icon appears when scan > this value (default: 10 GB)
+REACT_APP_SCAN_WARNING_THRESHOLD_GB=10
+# Red critical icon appears when scan > this value (default: 100 GB)
+REACT_APP_SCAN_CRITICAL_THRESHOLD_GB=100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/constants.js

@@ -1,2 +1,19 @@
 export const AUTH_COOKIE = '__dj';
 export const LOGGED_IN_FLAG_COOKIE = '__djlif';
+
+// Scan estimate thresholds (in GB)
+// These determine the warning level colors in the UI
+const GB = 1024 * 1024 * 1024;
+
+export const SCAN_WARNING_THRESHOLD_GB = parseInt(
+  process.env.REACT_APP_SCAN_WARNING_THRESHOLD_GB || '10',
+  10,
+);
+export const SCAN_CRITICAL_THRESHOLD_GB = parseInt(
+  process.env.REACT_APP_SCAN_CRITICAL_THRESHOLD_GB || '100',
+  10,
+);
+
+// Export as bytes for internal use
+export const SCAN_WARNING_THRESHOLD = SCAN_WARNING_THRESHOLD_GB * GB;
+export const SCAN_CRITICAL_THRESHOLD = SCAN_CRITICAL_THRESHOLD_GB * GB;

package/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -39,10 +39,33 @@ export const FormikSelect = ({
     }
   };
 
+  // Convert Formik field value to React Select format
+  const getSelectValue = () => {
+    if (!field.value) {
+      return isMulti ? [] : null;
+    }
+
+    if (isMulti) {
+      // For multi-select, map array of values to option objects
+      return Array.isArray(field.value)
+        ? field.value.map(
+            val =>
+              selectOptions.find(opt => opt.value === val) || {
+                value: val,
+                label: val,
+              },
+          )
+        : [];
+    } else {
+      // For single-select, find the matching option
+      return selectOptions.find(opt => opt.value === field.value) || null;
+    }
+  };
+
   return (
     <Select
       className={className}
-      defaultValue={defaultValue}
+      value={getSelectValue()}
       options={selectOptions}
       name={field.name}
       placeholder={placeholder}

package/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx

@@ -14,7 +14,7 @@ describe('FormikSelect', () => {
 
   const singleSelect = () => {
     const utils = render(
-      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+      <Formik initialValues={{ namespace: '' }} onSubmit={jest.fn()}>
         <Form>
           <FormikSelect
             selectOptions={namespaces}
@@ -38,7 +38,7 @@ describe('FormikSelect', () => {
 
   const multiSelect = () => {
     const utils = render(
-      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+      <Formik initialValues={{ namespace: [] }} onSubmit={jest.fn()}>
         <Form>
           <FormikSelect
             selectOptions={namespaces}
@@ -61,15 +61,15 @@ describe('FormikSelect', () => {
     };
   };
 
-  it('renders the single select component with provided options', () => {
+  it('renders the single select component with provided options', async () => {
     singleSelect();
-    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    await userEvent.click(screen.getByRole('combobox')); // to open the dropdown
     expect(screen.getByText('basic.one')).toBeInTheDocument();
   });
 
-  it('renders the multi-select component with provided options', () => {
+  it('renders the multi-select component with provided options', async () => {
     multiSelect();
-    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    await userEvent.click(screen.getByRole('combobox')); // to open the dropdown
     expect(screen.getByText('basic.one')).toBeInTheDocument();
   });
 });

package/src/app/pages/NodePage/AddBackfillPopover.jsx

@@ -64,18 +64,25 @@ export default function AddBackfillPopover({
     );
     if (response.status === 200 || response.status === 201) {
       setStatus({ success: 'Saved!' });
+      return true;
     } else {
       setStatus({
         failure: `${response.json.message}`,
       });
+      return false;
     }
   };
 
   const submitBackfill = async (values, { setSubmitting, setStatus }) => {
-    await runBackfill(values, setStatus).then(_ => {
-      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-      setSubmitting(false);
-    });
+    const success = await runBackfill(values, setStatus);
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    setSubmitting(false);
+    if (success) {
+      setPopoverAnchor(false);
+      if (onSubmit) {
+        onSubmit();
+      }
+    }
   };
 
   return (

package/src/app/pages/NodePage/EditColumnPopover.jsx

@@ -63,7 +63,7 @@ export default function EditColumnPopover({ column, node, options, onSubmit }) {
           initialValues={{
             column: column.name,
             node: node.name,
-            attributes: [],
+            attributes: column.attributes.map(attr => attr.attribute_type.name),
           }}
           onSubmit={saveAttributes}
         >

package/src/app/pages/NodePage/NodeMaterializationTab.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import TableIcon from '../../icons/TableIcon';
 import AddMaterializationPopover from './AddMaterializationPopover';
 import * as React from 'react';
@@ -47,54 +47,56 @@ export default function NodeMaterializationTab({ node, djClient }) {
     }, {});
   }, [filteredMaterializations, node?.version]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (node) {
-        const data = await djClient.materializations(node.name);
-
-        // Store raw data
-        setRawMaterializations(data);
-
-        // Fetch availability states
-        const availabilityData = await djClient.availabilityStates(node.name);
-        setAvailabilityStates(availabilityData);
-
-        // Group availability states by version
-        const availabilityGrouped = availabilityData.reduce((acc, avail) => {
-          const version = avail.node_version || node.version;
-          if (!acc[version]) {
-            acc[version] = [];
-          }
-          acc[version].push(avail);
-          return acc;
-        }, {});
-
-        setAvailabilityStatesByRevision(availabilityGrouped);
-
-        // Clear rebuilding state once data is loaded after a page reload
-        if (localStorage.getItem(`rebuilding-${node.name}`) === 'true') {
-          localStorage.removeItem(`rebuilding-${node.name}`);
-          setIsRebuilding(false);
+  const fetchData = useCallback(async () => {
+    if (node) {
+      const data = await djClient.materializations(node.name);
+
+      // Store raw data
+      setRawMaterializations(data);
+
+      // Fetch availability states
+      const availabilityData = await djClient.availabilityStates(node.name);
+      setAvailabilityStates(availabilityData);
+
+      // Group availability states by version
+      const availabilityGrouped = availabilityData.reduce((acc, avail) => {
+        const version = avail.node_version || node.version;
+        if (!acc[version]) {
+          acc[version] = [];
         }
+        acc[version].push(avail);
+        return acc;
+      }, {});
+
+      setAvailabilityStatesByRevision(availabilityGrouped);
+
+      // Clear rebuilding state once data is loaded after a page reload
+      if (localStorage.getItem(`rebuilding-${node.name}`) === 'true') {
+        localStorage.removeItem(`rebuilding-${node.name}`);
+        setIsRebuilding(false);
       }
-    };
-    fetchData().catch(console.error);
+    }
   }, [djClient, node]);
 
-  // Separate useEffect to set default selected tab
   useEffect(() => {
+    fetchData().catch(console.error);
+  }, [fetchData]);
+
+  // Set default selected tab, or reset if current tab is no longer visible
+  useEffect(() => {
+    const versions = Object.keys(materializationsByRevision);
+    if (versions.length === 0) return;
+
     if (
-      !selectedRevisionTab &&
-      Object.keys(materializationsByRevision).length > 0
+      !selectedRevisionTab ||
+      !materializationsByRevision[selectedRevisionTab]
     ) {
       // First try to find current node version
       if (materializationsByRevision[node?.version]) {
         setSelectedRevisionTab(node.version);
       } else {
         // Otherwise, select the most recent version (sort by version string)
-        const sortedVersions = Object.keys(materializationsByRevision).sort(
-          (a, b) => b.localeCompare(a),
-        );
+        const sortedVersions = versions.sort((a, b) => b.localeCompare(a));
         setSelectedRevisionTab(sortedVersions[0]);
       }
     }
@@ -193,16 +195,17 @@ export default function NodeMaterializationTab({ node, djClient }) {
       return b.localeCompare(a);
     });
 
-    // Check if latest version has active materializations
-    const hasLatestVersionMaterialization =
-      materializationsByRevision[node?.version] &&
-      materializationsByRevision[node?.version].length > 0;
+    // Check if latest version has any materializations (including inactive ones)
+    const hasLatestVersionMaterialization = rawMaterializations.some(mat => {
+      const matVersion = mat.config?.cube?.version || node?.version;
+      return matVersion === node?.version;
+    });
 
     // Refresh latest materialization function
     const refreshLatestMaterialization = async () => {
       if (
         !window.confirm(
-          'This will create a new version of the cube and build new materialization workflows. The previous version of the cube and its materialization will be accessible using a specific version label. Would you like to continue?',
+          'This will rebuild the materialization workflows for the current cube version without creating a new version. Would you like to continue?',
         )
       ) {
         return;
@@ -286,7 +289,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                 tabIndex="0"
                 onClick={refreshLatestMaterialization}
                 disabled={isRebuilding}
-                title="Create a new version of the cube and re-create its materialization workflows."
+                title="Rebuild the materialization workflows for the current cube version (no version bump)."
                 style={{
                   opacity: isRebuilding ? 0.7 : 1,
                   cursor: isRebuilding ? 'not-allowed' : 'pointer',
@@ -398,6 +401,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                         <AddBackfillPopover
                           node={node}
                           materialization={materialization}
+                          onSubmit={fetchData}
                         />
                       </li>
                       {materialization.backfills.map(backfill => (

package/src/app/pages/NodePage/PartitionColumnPopover.jsx

@@ -141,6 +141,33 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                 >
                   Save
                 </button>
+                <button
+                  className="delete_button"
+                  type="button"
+                  aria-label="RemovePartition"
+                  aria-hidden="false"
+                  onClick={() => {
+                    setFieldValue('partition_type', '');
+                    setFieldValue('format', '');
+                    setFieldValue('granularity', '');
+                    savePartition(
+                      {
+                        node: node.name,
+                        column: column.name,
+                        partition_type: '',
+                        format: '',
+                        granularity: '',
+                      },
+                      { setSubmitting: () => {}, setStatus: s => {} },
+                    );
+                  }}
+                  style={{
+                    marginLeft: '10px',
+                    backgroundColor: '#dc3545',
+                  }}
+                >
+                  Remove Partition
+                </button>
               </Form>
             );
           }}

package/src/app/pages/QueryPlannerPage/PreAggDetailsPanel.jsx

@@ -2,6 +2,10 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/src/styles/hljs';
+import {
+  SCAN_WARNING_THRESHOLD,
+  SCAN_CRITICAL_THRESHOLD,
+} from '../../constants';
 
 /**
  * Helper to extract dimension node name from a dimension path
@@ -195,6 +199,63 @@ function inferGranularity(grainGroups) {
   return 'DAY'; // Default
 }
 
+/**
+ * Format bytes to human-readable string
+ */
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+
+/**
+ * Get warning level for scan size
+ */
+function getScanWarningLevel(bytes) {
+  if (bytes > SCAN_CRITICAL_THRESHOLD) return 'critical';
+  if (bytes > SCAN_WARNING_THRESHOLD) return 'warning';
+  return 'ok';
+}
+
+/**
+ * Format scan estimate for display
+ */
+function formatScanEstimate(scanEstimate) {
+  if (
+    !scanEstimate ||
+    !scanEstimate.sources ||
+    scanEstimate.sources.length === 0
+  ) {
+    return null;
+  }
+
+  // Check if any sources are missing size data
+  const hasMissingData = scanEstimate.sources.some(
+    s => s.total_bytes === null || s.total_bytes === undefined,
+  );
+
+  // Determine warning level based on total_bytes (if available)
+  let level = 'unknown';
+  let icon = 'ℹ️';
+  if (
+    scanEstimate.total_bytes !== null &&
+    scanEstimate.total_bytes !== undefined
+  ) {
+    level = getScanWarningLevel(scanEstimate.total_bytes);
+    icon = level === 'critical' ? '⚠️' : level === 'warning' ? '⚡' : '✓';
+  }
+
+  return {
+    icon,
+    level,
+    totalBytes: scanEstimate.total_bytes,
+    sources: scanEstimate.sources || [],
+    hasMissingData,
+  };
+}
+
 /**
  * CubeBackfillModal - Simple modal to collect start/end dates for backfill
  */
@@ -292,7 +353,6 @@ export function QueryOverviewPanel({
   onClearWorkflowUrls,
   loadedCubeName = null, // Existing cube name if loaded from preset
   cubeMaterialization = null, // Full cube materialization info {schedule, strategy, lookbackWindow, ...}
-  cubeAvailability = null, // Cube availability info for data freshness
   onUpdateCubeConfig,
   onRefreshCubeWorkflow,
   onRunCubeBackfill,
@@ -362,17 +422,17 @@ export function QueryOverviewPanel({
 
   // SQL view toggle state: 'optimized' (uses pre-aggs) or 'raw' (from source tables)
   const [sqlViewMode, setSqlViewMode] = useState('optimized');
-  const [rawSql, setRawSql] = useState(null);
+  const [rawResult, setRawResult] = useState(null);
   const [loadingRawSql, setLoadingRawSql] = useState(false);
 
   // Handle SQL view toggle
   const handleSqlViewToggle = async mode => {
     setSqlViewMode(mode);
     // Fetch raw SQL lazily when switching to raw mode
-    if (mode === 'raw' && !rawSql && onFetchRawSql) {
+    if (mode === 'raw' && !rawResult && onFetchRawSql) {
       setLoadingRawSql(true);
-      const sql = await onFetchRawSql();
-      setRawSql(sql);
+      const result = await onFetchRawSql();
+      setRawResult(result);
       setLoadingRawSql(false);
     }
   };
@@ -579,9 +639,6 @@ export function QueryOverviewPanel({
   const grainGroups = measuresResult.grain_groups || [];
   const metricFormulas = measuresResult.metric_formulas || [];
   const sql = metricsResult.sql || '';
-  const dialect = metricsResult.dialect || null;
-  const cubeName = metricsResult.cube_name || null;
-  const isFastQuery = !!cubeName; // Fast if using materialized cube
 
   // Determine if materialization is already configured (has active workflows)
   const isMaterialized =
@@ -613,29 +670,11 @@ export function QueryOverviewPanel({
       {/* Header */}
       <div className="details-header">
         <h2 className="details-title">Query Plan</h2>
-        <p className="details-info-row">
+        <p className="details-full-name">
           {selectedMetrics.length} metric
           {selectedMetrics.length !== 1 ? 's' : ''} ×{' '}
           {selectedDimensions.length} dimension
           {selectedDimensions.length !== 1 ? 's' : ''}
-          {isFastQuery && (
-            <>
-              {' · '}
-              <span className="info-materialized">
-                <span style={{ fontFamily: 'sans-serif' }}>⚡</span>{' '}
-                Materialized cube available
-              </span>
-              {cubeAvailability?.validThroughTs && (
-                <>
-                  {' '}
-                  · Valid thru{' '}
-                  {new Date(
-                    cubeAvailability.validThroughTs,
-                  ).toLocaleDateString()}
-                </>
-              )}
-            </>
-          )}
         </p>
       </div>
 
@@ -2220,29 +2259,6 @@ export function QueryOverviewPanel({
               <span className="section-icon">⌘</span>
               Generated SQL
             </h3>
-            <span className="sql-info-inline">
-              {sqlViewMode === 'optimized' && isFastQuery ? (
-                <>
-                  <span className="info-materialized">
-                    <span style={{ fontFamily: 'sans-serif' }}>⚡</span> Using
-                    materialized cube
-                  </span>
-                  {cubeAvailability?.validThroughTs && (
-                    <>
-                      {' · Valid thru '}
-                      {new Date(
-                        cubeAvailability.validThroughTs,
-                      ).toLocaleDateString()}
-                    </>
-                  )}
-                </>
-              ) : sqlViewMode === 'raw' ? (
-                <span className="info-base-tables">
-                  <span style={{ fontFamily: 'sans-serif' }}>⚠️</span> Using
-                  base tables
-                </span>
-              ) : null}
-            </span>
             <div className="sql-view-toggle">
               <button
                 className={`sql-toggle-btn ${
@@ -2267,6 +2283,65 @@ export function QueryOverviewPanel({
               </button>
             </div>
           </div>
+
+          {/* Scan Estimate Info */}
+          {(() => {
+            const currentScanEstimate =
+              sqlViewMode === 'raw'
+                ? rawResult?.scan_estimate
+                : metricsResult?.scan_estimate;
+            const scanInfo = formatScanEstimate(currentScanEstimate);
+
+            if (scanInfo) {
+              return (
+                <div
+                  className={`scan-estimate-banner scan-estimate-${scanInfo.level}`}
+                >
+                  <span className="scan-estimate-icon">{scanInfo.icon}</span>
+                  <div className="scan-estimate-content">
+                    <div className="scan-estimate-header">
+                      <strong>Scan Cost:</strong>{' '}
+                      {scanInfo.totalBytes !== null &&
+                      scanInfo.totalBytes !== undefined
+                        ? (scanInfo.hasMissingData ? '≥ ' : '') +
+                          formatBytes(scanInfo.totalBytes)
+                        : 'Unknown'}
+                    </div>
+                    <div className="scan-estimate-sources">
+                      {scanInfo.sources.map((source, idx) => {
+                        // Prefer schema.table display, fall back to node name
+                        let displayName = source.source_name;
+                        if (source.schema_ && source.table) {
+                          displayName = `${source.schema_}.${source.table}`;
+                        } else if (source.table) {
+                          displayName = source.table;
+                        }
+
+                        return (
+                          <div key={idx} className="scan-source-item">
+                            <span
+                              className="scan-source-name"
+                              title={source.source_name}
+                            >
+                              {displayName}
+                            </span>
+                            <span className="scan-source-size">
+                              {source.total_bytes !== null &&
+                              source.total_bytes !== undefined
+                                ? formatBytes(source.total_bytes)
+                                : 'no size data'}
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              );
+            }
+            return null;
+          })()}
+
           <div className="sql-code-wrapper">
             <SyntaxHighlighter
               language="sql"
@@ -2279,7 +2354,7 @@ export function QueryOverviewPanel({
                 border: '1px solid #e2e8f0',
               }}
             >
-              {sqlViewMode === 'raw' ? rawSql || 'Loading...' : sql}
+              {sqlViewMode === 'raw' ? rawResult?.sql || 'Loading...' : sql}
             </SyntaxHighlighter>
           </div>
         </div>
@@ -2767,4 +2842,16 @@ export function MetricDetailsPanel({ metric, grainGroups, onClose }) {
   );
 }
 
+// Export helper functions for testing
+export {
+  getDimensionNodeName,
+  normalizeGrain,
+  getScheduleSummary,
+  getStatusInfo,
+  inferGranularity,
+  formatBytes,
+  getScanWarningLevel,
+  formatScanEstimate,
+};
+
 export default PreAggDetailsPanel;

package/src/app/pages/QueryPlannerPage/__tests__/PreAggDetailsPanel.test.jsx

@@ -10,6 +10,14 @@ import {
   QueryOverviewPanel,
   PreAggDetailsPanel,
   MetricDetailsPanel,
+  getDimensionNodeName,
+  normalizeGrain,
+  getScheduleSummary,
+  getStatusInfo,
+  inferGranularity,
+  formatBytes,
+  getScanWarningLevel,
+  formatScanEstimate,
 } from '../PreAggDetailsPanel';
 import React from 'react';
 
@@ -2994,3 +3002,428 @@ describe('QueryOverviewPanel - Custom Schedule and Druid Config', () => {
     });
   });
 });
+
+// ============================================================================
+// Helper Function Tests
+// ============================================================================
+
+describe('Helper Functions', () => {
+  describe('getDimensionNodeName', () => {
+    it('extracts node name from dimension path', () => {
+      expect(getDimensionNodeName('v3.customer.name')).toBe('v3.customer');
+      expect(getDimensionNodeName('v3.date.month')).toBe('v3.date');
+    });
+
+    it('handles role suffix in dimension path', () => {
+      expect(getDimensionNodeName('v3.date.month[order]')).toBe('v3.date');
+      expect(getDimensionNodeName('v3.customer.id[billing]')).toBe(
+        'v3.customer',
+      );
+    });
+
+    it('returns path without role when no dots after removing role', () => {
+      expect(getDimensionNodeName('singlename[role]')).toBe('singlename');
+      expect(getDimensionNodeName('singlename')).toBe('singlename');
+    });
+  });
+
+  describe('normalizeGrain', () => {
+    it('extracts and sorts column short names', () => {
+      expect(normalizeGrain(['v3.date.id', 'v3.customer.name'])).toBe(
+        'id,name',
+      );
+      expect(normalizeGrain(['v3.customer.name', 'v3.date.id'])).toBe(
+        'id,name',
+      );
+    });
+
+    it('handles empty grain', () => {
+      expect(normalizeGrain([])).toBe('');
+      expect(normalizeGrain(null)).toBe('');
+    });
+  });
+
+  describe('getScheduleSummary', () => {
+    it('returns null for empty schedule', () => {
+      expect(getScheduleSummary(null)).toBeNull();
+      expect(getScheduleSummary('')).toBeNull();
+    });
+
+    it('returns original schedule for invalid format', () => {
+      expect(getScheduleSummary('0 0')).toBe('0 0');
+      expect(getScheduleSummary('invalid')).toBe('invalid');
+    });
+
+    it('parses daily schedule at specific hour', () => {
+      expect(getScheduleSummary('0 0 * * *')).toBe('Daily @ 12:00am');
+      expect(getScheduleSummary('0 14 * * *')).toBe('Daily @ 2:00pm');
+      expect(getScheduleSummary('30 9 * * *')).toBe('Daily @ 9:30am');
+      expect(getScheduleSummary('0 12 * * *')).toBe('Daily @ 12:00pm');
+    });
+
+    it('parses weekly schedule', () => {
+      expect(getScheduleSummary('0 0 * * 0')).toBe('Weekly on Sun');
+      expect(getScheduleSummary('0 0 * * 1')).toBe('Weekly on Mon');
+      expect(getScheduleSummary('0 0 * * 6')).toBe('Weekly on Sat');
+    });
+
+    it('returns original schedule for unrecognized patterns', () => {
+      expect(getScheduleSummary('0 0 1 * *')).toBe('0 0 1 * *');
+      expect(getScheduleSummary('0 0 * 1 *')).toBe('0 0 * 1 *');
+    });
+  });
+
+  describe('formatBytes', () => {
+    it('handles zero and null bytes', () => {
+      expect(formatBytes(0)).toBe('0 B');
+      expect(formatBytes(null)).toBe('0 B');
+      expect(formatBytes(undefined)).toBe('0 B');
+    });
+
+    it('formats bytes correctly', () => {
+      expect(formatBytes(1023)).toBe('1023 B');
+      expect(formatBytes(1024)).toBe('1 KB');
+      expect(formatBytes(1024 * 1024)).toBe('1 MB');
+      expect(formatBytes(1024 * 1024 * 1024)).toBe('1 GB');
+      expect(formatBytes(1024 * 1024 * 1024 * 1024)).toBe('1 TB');
+      expect(formatBytes(1024 * 1024 * 1024 * 1024 * 1024)).toBe('1 PB');
+    });
+
+    it('rounds to 2 decimal places', () => {
+      expect(formatBytes(1536)).toBe('1.5 KB');
+      expect(formatBytes(1024 * 1.234)).toBe('1.23 KB');
+      expect(formatBytes(5.5 * 1024 * 1024 * 1024)).toBe('5.5 GB');
+    });
+  });
+
+  describe('getScanWarningLevel', () => {
+    it('returns critical for very large scans', () => {
+      // Assuming SCAN_CRITICAL_THRESHOLD is 100GB = 107374182400
+      expect(getScanWarningLevel(200 * 1024 * 1024 * 1024)).toBe('critical');
+    });
+
+    it('returns warning for medium scans', () => {
+      // Assuming SCAN_WARNING_THRESHOLD is 10GB = 10737418240
+      expect(getScanWarningLevel(50 * 1024 * 1024 * 1024)).toBe('warning');
+    });
+
+    it('returns ok for small scans', () => {
+      expect(getScanWarningLevel(1 * 1024 * 1024 * 1024)).toBe('ok');
+      expect(getScanWarningLevel(1024)).toBe('ok');
+    });
+  });
+
+  describe('formatScanEstimate', () => {
+    it('returns null for empty scan estimate', () => {
+      expect(formatScanEstimate(null)).toBeNull();
+      expect(formatScanEstimate({})).toBeNull();
+      expect(formatScanEstimate({ sources: [] })).toBeNull();
+    });
+
+    it('formats scan estimate with total bytes', () => {
+      const estimate = {
+        total_bytes: 50 * 1024 * 1024 * 1024, // 50GB - warning level
+        sources: [
+          {
+            source_name: 'source.sales',
+            total_bytes: 30 * 1024 * 1024 * 1024,
+          },
+          {
+            source_name: 'source.orders',
+            total_bytes: 20 * 1024 * 1024 * 1024,
+          },
+        ],
+      };
+
+      const result = formatScanEstimate(estimate);
+      expect(result).not.toBeNull();
+      expect(result.level).toBe('warning');
+      expect(result.icon).toBe('⚡');
+      expect(result.totalBytes).toBe(50 * 1024 * 1024 * 1024);
+      expect(result.sources).toHaveLength(2);
+      expect(result.hasMissingData).toBe(false);
+    });
+
+    it('detects missing size data', () => {
+      const estimate = {
+        total_bytes: null,
+        sources: [
+          {
+            source_name: 'source.sales',
+            total_bytes: null,
+          },
+          {
+            source_name: 'source.orders',
+            total_bytes: undefined,
+          },
+        ],
+      };
+
+      const result = formatScanEstimate(estimate);
+      expect(result).not.toBeNull();
+      expect(result.level).toBe('unknown');
+      expect(result.icon).toBe('ℹ️');
+      expect(result.hasMissingData).toBe(true);
+    });
+
+    it('shows critical icon for very large scans', () => {
+      const estimate = {
+        total_bytes: 200 * 1024 * 1024 * 1024, // 200GB
+        sources: [
+          {
+            source_name: 'source.large_table',
+            total_bytes: 200 * 1024 * 1024 * 1024,
+          },
+        ],
+      };
+
+      const result = formatScanEstimate(estimate);
+      expect(result.level).toBe('critical');
+      expect(result.icon).toBe('⚠️');
+    });
+
+    it('shows ok icon for small scans', () => {
+      const estimate = {
+        total_bytes: 1 * 1024 * 1024 * 1024, // 1GB
+        sources: [
+          {
+            source_name: 'source.small_table',
+            total_bytes: 1 * 1024 * 1024 * 1024,
+          },
+        ],
+      };
+
+      const result = formatScanEstimate(estimate);
+      expect(result.level).toBe('ok');
+      expect(result.icon).toBe('✓');
+    });
+  });
+
+  describe('getStatusInfo', () => {
+    it('returns not-planned status for preagg without workflows', () => {
+      const result = getStatusInfo({
+        workflow_urls: [],
+      });
+
+      expect(result.text).toBe('Not planned');
+      expect(result.className).toBe('status-not-planned');
+      expect(result.icon).toBe('○');
+    });
+
+    it('returns not-planned status for null/undefined preagg', () => {
+      expect(getStatusInfo(null).text).toBe('Not planned');
+      expect(getStatusInfo(undefined).text).toBe('Not planned');
+    });
+
+    it('returns compatible status for superset preagg with availability', () => {
+      const result = getStatusInfo({
+        _isCompatible: true,
+        grain_columns: ['v3.date.id', 'v3.customer.name'],
+        availability: { valid_through_ts: '2024-01-01' },
+        workflow_urls: ['http://workflow.com/1'],
+      });
+
+      expect(result.text).toContain('Covered');
+      expect(result.text).toContain('id, name');
+      expect(result.className).toBe('status-compatible-materialized');
+      expect(result.isCompatible).toBe(true);
+    });
+
+    it('returns compatible status for superset preagg without availability', () => {
+      const result = getStatusInfo({
+        _isCompatible: true,
+        grain_columns: ['v3.date.id', 'v3.region.code'],
+        availability: null,
+        workflow_urls: ['http://workflow.com/1'],
+      });
+
+      expect(result.text).toContain('Covered');
+      expect(result.text).toContain('id, code');
+      expect(result.className).toBe('status-compatible');
+      expect(result.isCompatible).toBe(true);
+    });
+  });
+
+  describe('inferGranularity', () => {
+    it('infers HOUR granularity from hour columns', () => {
+      const grainGroups = [
+        {
+          grain: ['date_hour', 'customer_id'],
+        },
+      ];
+      expect(inferGranularity(grainGroups)).toBe('HOUR');
+    });
+
+    it('infers HOUR granularity from hour suffix', () => {
+      const grainGroups = [
+        {
+          grain: ['v3.date.hour_of_day', 'region'],
+        },
+      ];
+      expect(inferGranularity(grainGroups)).toBe('HOUR');
+    });
+
+    it('defaults to DAY granularity', () => {
+      const grainGroups = [
+        {
+          grain: ['date_id', 'customer_id'],
+        },
+      ];
+      expect(inferGranularity(grainGroups)).toBe('DAY');
+    });
+
+    it('handles empty grain groups', () => {
+      expect(inferGranularity([])).toBe('DAY');
+      expect(inferGranularity(null)).toBe('DAY');
+    });
+  });
+});
+
+// ============================================================================
+// Scan Estimation UI Tests
+// ============================================================================
+
+describe('Scan Estimation Features', () => {
+  const propsWithScanEstimate = {
+    measuresResult: mockMeasuresResult,
+    metricsResult: {
+      sql: 'SELECT * FROM orders',
+      scan_estimate: {
+        total_bytes: 50 * 1024 * 1024 * 1024, // 50GB
+        sources: [
+          {
+            source_name: 'source.sales_fact',
+            catalog: 'default',
+            schema_: 'prod',
+            table: 'sales',
+            total_bytes: 30 * 1024 * 1024 * 1024,
+            partition_columns: ['utc_date'],
+            total_partition_count: 365,
+          },
+          {
+            source_name: 'source.customers',
+            total_bytes: 20 * 1024 * 1024 * 1024,
+            partition_columns: [],
+            total_partition_count: null,
+          },
+        ],
+        has_materialization: false,
+      },
+    },
+    selectedMetrics: ['default.num_repair_orders'],
+    selectedDimensions: ['v3.date.id'],
+    loadingMetrics: false,
+    errorMetrics: null,
+    loadingMeasures: false,
+    errorMeasures: null,
+    onToggleMaterialization: jest.fn(),
+    onUpdateCubeConfig: jest.fn(),
+    onClearWorkflowUrls: jest.fn(),
+  };
+
+  it('displays scan estimate banner with warning level', async () => {
+    renderWithRouter(<QueryOverviewPanel {...propsWithScanEstimate} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/50 GB/)).toBeInTheDocument();
+    });
+  });
+
+  it('shows scan estimate icon based on size', async () => {
+    const criticalProps = {
+      ...propsWithScanEstimate,
+      metricsResult: {
+        ...propsWithScanEstimate.metricsResult,
+        scan_estimate: {
+          ...propsWithScanEstimate.metricsResult.scan_estimate,
+          total_bytes: 200 * 1024 * 1024 * 1024, // 200GB - critical
+        },
+      },
+    };
+
+    renderWithRouter(<QueryOverviewPanel {...criticalProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/200 GB/)).toBeInTheDocument();
+    });
+  });
+
+  it('handles scan estimate with missing size data', async () => {
+    const propsWithMissingData = {
+      ...propsWithScanEstimate,
+      metricsResult: {
+        ...propsWithScanEstimate.metricsResult,
+        scan_estimate: {
+          total_bytes: null,
+          sources: [
+            {
+              source_name: 'source.unknown',
+              total_bytes: null,
+              partition_columns: [],
+              total_partition_count: null,
+            },
+          ],
+          has_materialization: false,
+        },
+      },
+    };
+
+    renderWithRouter(<QueryOverviewPanel {...propsWithMissingData} />);
+
+    // Should still render but show unknown/info icon
+    await waitFor(() => {
+      expect(screen.getByText(/Generated SQL/)).toBeInTheDocument();
+    });
+  });
+
+  it('toggles between optimized and raw SQL views', async () => {
+    const mockFetchRawSql = jest.fn().mockResolvedValue({
+      sql: 'SELECT * FROM raw_tables',
+      scan_estimate: {
+        total_bytes: 100 * 1024 * 1024 * 1024, // 100GB
+        sources: [
+          {
+            source_name: 'source.large_raw_table',
+            total_bytes: 100 * 1024 * 1024 * 1024,
+          },
+        ],
+      },
+    });
+
+    renderWithRouter(
+      <QueryOverviewPanel
+        {...propsWithScanEstimate}
+        onFetchRawSql={mockFetchRawSql}
+      />,
+    );
+
+    // Click raw SQL toggle
+    const rawButton = screen.getByText('Raw');
+    await act(async () => {
+      fireEvent.click(rawButton);
+    });
+
+    await waitFor(() => {
+      expect(mockFetchRawSql).toHaveBeenCalled();
+    });
+  });
+
+  it('does not show scan estimate when not provided', async () => {
+    const propsWithoutScan = {
+      ...propsWithScanEstimate,
+      metricsResult: {
+        sql: 'SELECT * FROM orders',
+        // No scan_estimate field
+      },
+    };
+
+    renderWithRouter(<QueryOverviewPanel {...propsWithoutScan} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Generated SQL/)).toBeInTheDocument();
+    });
+
+    // Should not show scan estimate banner
+    expect(screen.queryByText(/GB/)).not.toBeInTheDocument();
+  });
+});

package/src/app/pages/QueryPlannerPage/index.jsx

@@ -1074,7 +1074,7 @@ export function QueryPlannerPage() {
         '',
         false, // useMaterialized = false for raw SQL
       );
-      return result.sql;
+      return result; // Return full result including scan_estimate
     } catch (err) {
       console.error('Failed to fetch raw SQL:', err);
       return null;

package/src/app/pages/QueryPlannerPage/styles.css

@@ -1540,6 +1540,87 @@
   background: #2563eb;
 }
 
+/* Scan Estimate Banner */
+.scan-estimate-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 0 16px 12px;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.scan-estimate-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.scan-estimate-content {
+  flex: 1;
+}
+
+.scan-estimate-header {
+  margin-bottom: 8px;
+}
+
+.scan-estimate-header strong {
+  font-weight: 600;
+}
+
+.scan-estimate-sources {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.scan-source-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  font-size: 11px;
+  font-family: var(--font-display);
+}
+
+.scan-source-name {
+  flex: 1;
+  color: var(--planner-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scan-source-size {
+  flex-shrink: 0;
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+/* Scan estimate warning levels */
+.scan-estimate-ok {
+  background: rgba(5, 150, 105, 0.08);
+  border: 1px solid rgba(5, 150, 105, 0.2);
+  color: var(--accent-success);
+}
+
+.scan-estimate-warning {
+  background: rgba(217, 119, 6, 0.08);
+  border: 1px solid rgba(217, 119, 6, 0.25);
+  color: var(--accent-warning);
+}
+
+.scan-estimate-critical {
+  background: rgba(220, 38, 38, 0.08);
+  border: 1px solid rgba(220, 38, 38, 0.25);
+  color: var(--accent-error);
+}
+
 .sql-code-wrapper {
   padding: 0 16px 16px;
 }
@@ -1689,6 +1770,49 @@
   white-space: nowrap;
 }
 
+/* Scan estimate styling */
+.preagg-summary-row .value.scan-estimate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+}
+
+.scan-estimate-icon {
+  font-size: 12px;
+  display: inline-block;
+  min-width: 14px;
+  text-align: center;
+}
+
+.scan-estimate-hint {
+  font-size: 10px;
+  color: var(--planner-text-dim);
+  font-style: italic;
+  font-weight: 400;
+}
+
+.scan-estimate-low {
+  color: #059669;
+}
+
+.scan-estimate-medium {
+  color: #d97706;
+}
+
+.scan-estimate-high {
+  color: #dc2626;
+}
+
+.scan-estimate-critical {
+  color: #991b1b;
+}
+
+.scan-estimate-unavailable {
+  color: var(--planner-text-dim);
+  font-style: italic;
+}
+
 .preagg-summary-status {
   display: flex;
   align-items: center;