feat: Smart Group, aggregated data across all plots, toFixed fix

- Add Smart Group button in Data Explorer that groups by polar
  configuration (airfoil + Re + Mach + Ncrit + flap config) and
  auto-shows alpha_stall and alpha @ L/D_max summary columns
- Fix toFixed crash when grouping by non-numeric columns (all 11
  valueFormatters now guard with typeof check)
- Add flap_deflection and flap_hinge_x columns to Data Explorer
- Add Aggregated data source to Data Explorer correlogram
- Add aggregated scatter overlay (diamond markers) to Polar Plot
- Auto-switch correlogram to Aggregated when Smart Group activates
- Persist Smart Group state and data source in routeUiStore so they
  survive view switches and page reloads (ephemeral + URL)
- Update changelog with all new features

Made-with: Cursor

Author: aeronauty

flexfoil-ui/src/App.tsx

@@ -144,6 +144,8 @@ function AppContent() {
       dataExplorerSplomKeys: state.dataExplorerSplomKeys,
       dataExplorerColorBy: state.dataExplorerColorBy,
       dataExplorerFilterModel: state.dataExplorerFilterModel,
+      dataExplorerSmartGroup: state.dataExplorerSmartGroup,
+      dataExplorerDataSource: state.dataExplorerDataSource,
       activePanel: state.activePanel,
       layoutJson: state.layoutJson,
       viewport: state.viewport,

flexfoil-ui/src/components/panels/DataExplorerPanel.tsx

@@ -217,7 +217,8 @@ export function DataExplorerPanel() {
   const setColorBy = useRouteUiStore((state) => state.setDataExplorerColorBy);
   const filterModel = useRouteUiStore((state) => state.dataExplorerFilterModel);
   const setFilterModel = useRouteUiStore((state) => state.setDataExplorerFilterModel);
-  const [dataSource, setDataSource] = useState<DataSource>('full');
+  const dataSource = useRouteUiStore((state) => state.dataExplorerDataSource);
+  const setDataSource = useRouteUiStore((state) => state.setDataExplorerDataSource);
   const [showColumnEditor, setShowColumnEditor] = useState(false);
   const customColumns = useCustomColumnStore((s) => s.columns);
   const { numericFields: mergedNumericFields, encodingFields: mergedEncodingFields, getFieldLabel: mergedGetLabel, getFieldValue } = useAllPlotFields();
@@ -265,7 +266,11 @@ export function DataExplorerPanel() {
     if (filterModel) {
       e.api.setFilterModel(filterModel as GridFilterModel);
     }
-  }, [filterModel]);
+    if (smartGroupActive) {
+      e.api.setRowGroupColumns(['airfoil_name', 'reynolds', 'mach', 'ncrit', 'flap_deflection', 'flap_hinge_x']);
+      e.api.setColumnsVisible(['alpha_stall', 'alpha_ldmax'], true);
+    }
+  }, [filterModel, smartGroupActive]);
   const onFilterChanged = useCallback((e: FilterChangedEvent<RunRow>) => {
     const filtered: RunRow[] = [];
     e.api.forEachNodeAfterFilterAndSort(node => { if (node.data) filtered.push(node.data); });
@@ -336,23 +341,26 @@ export function DataExplorerPanel() {
   const outlierFilter = useRouteUiStore((state) => state.outlierFilterEnabled);
   const setOutlierFilter = useRouteUiStore((state) => state.setOutlierFilterEnabled);
 
-  const [smartGroupActive, setSmartGroupActive] = useState(false);
+  const smartGroupActive = useRouteUiStore((state) => state.dataExplorerSmartGroup);
+  const setSmartGroupActive = useRouteUiStore((state) => state.setDataExplorerSmartGroup);
 
   const applySmartGroup = useCallback(() => {
     const api = apiRef.current;
     if (!api) return;
     api.setRowGroupColumns(['airfoil_name', 'reynolds', 'mach', 'ncrit', 'flap_deflection', 'flap_hinge_x']);
     api.setColumnsVisible(['alpha_stall', 'alpha_ldmax'], true);
     setSmartGroupActive(true);
-  }, []);
+    setDataSource('aggregated');
+  }, [setSmartGroupActive, setDataSource]);
 
   const clearGroups = useCallback(() => {
     const api = apiRef.current;
     if (!api) return;
     api.setRowGroupColumns([]);
     api.setColumnsVisible(['alpha_stall', 'alpha_ldmax'], false);
     setSmartGroupActive(false);
-  }, []);
+    if (dataSource === 'aggregated') setDataSource('full');
+  }, [dataSource, setSmartGroupActive, setDataSource]);
 
   // ── Correlogram ──
   const data = dataSource === 'aggregated' ? aggregatedRuns

flexfoil-ui/src/components/panels/PolarPanel.tsx

@@ -7,12 +7,13 @@
 
 import { useRef, useEffect, useCallback, useMemo, useState } from 'react';
 import { useAirfoilStore } from '../../stores/airfoilStore';
+import { useRunStore } from '../../stores/runStore';
 import { useRouteUiStore } from '../../stores/routeUiStore';
 import { usePolarOutlierStore } from '../../stores/polarOutlierStore';
 import { colorForKey } from '../../lib/plotStyling';
 import { buildFence, isInlier } from '../../lib/outlierFilter';
 import { OutlierContextMenu } from '../OutlierContextMenu';
-import type { AxisVariable, PolarPoint } from '../../types';
+import type { AxisVariable, PolarPoint, RunRow } from '../../types';
 
 const PLOT_MARGIN = { top: 20, right: 20, bottom: 40, left: 50 };
 const HIT_RADIUS = 8;
@@ -38,6 +39,22 @@ function getValue(point: PolarPoint, variable: AxisVariable): number {
   return (point as Record<string, number | undefined>)[variable] ?? 0;
 }
 
+function getRunValue(row: RunRow, axis: AxisVariable): number | null {
+  switch (axis) {
+    case 'alpha': return row.alpha;
+    case 'cl': return row.cl;
+    case 'cd': return row.cd;
+    case 'cm': return row.cm;
+    case 'ld': return row.ld;
+    case 'reynolds': return row.reynolds;
+    case 'mach': return row.mach;
+    case 'ncrit': return row.ncrit;
+    case 'flapDeflection': return row.flap_deflection;
+    case 'flapHingeX': return row.flap_hinge_x;
+    default: return null;
+  }
+}
+
 function getAxisBounds(values: number[]): [number, number] {
   if (values.length === 0) return [0, 1];
   const min = Math.min(...values);
@@ -78,6 +95,7 @@ interface DisplaySeries {
 
 export function PolarPanel() {
   const { polarData, removePolar, clearAllPolars } = useAirfoilStore();
+  const aggregatedRuns = useRunStore((s) => s.aggregatedRuns);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -88,6 +106,7 @@ export function PolarPanel() {
   const outlierFilter = useRouteUiStore((state) => state.outlierFilterEnabled);
   const setOutlierFilter = useRouteUiStore((state) => state.setOutlierFilterEnabled);
   const [canvasSize, setCanvasSize] = useState({ width: 400, height: 300 });
+  const [showAggregated, setShowAggregated] = useState(false);
 
   const outlierRevision = usePolarOutlierStore((s) => s.revision);
   const toggleFlag = usePolarOutlierStore((s) => s.toggleFlag);
@@ -141,6 +160,18 @@ export function PolarPanel() {
   );
   const removedCount = rawTotalPoints - totalVisible;
 
+  const aggOverlayPoints = useMemo(() => {
+    if (!showAggregated || aggregatedRuns.length === 0) return [];
+    return aggregatedRuns
+      .map((row) => {
+        const x = getRunValue(row, xAxis);
+        const y = getRunValue(row, yAxis);
+        if (x == null || y == null) return null;
+        return { x, y, label: row.airfoil_name };
+      })
+      .filter((p): p is { x: number; y: number; label: string } => p !== null);
+  }, [showAggregated, aggregatedRuns, xAxis, yAxis]);
+
   const { xBounds, yBounds } = useMemo(() => {
     const allX: number[] = [];
     const allY: number[] = [];
@@ -150,11 +181,15 @@ export function PolarPanel() {
         allY.push(getValue(ap.point, yAxis));
       }
     }
+    for (const pt of aggOverlayPoints) {
+      allX.push(pt.x);
+      allY.push(pt.y);
+    }
     return {
       xBounds: getAxisBounds(allX),
       yBounds: getAxisBounds(allY),
     };
-  }, [displayData, xAxis, yAxis]);
+  }, [displayData, xAxis, yAxis, aggOverlayPoints]);
 
   const makeToCanvasX = useCallback(
     (width: number) => {
@@ -256,6 +291,7 @@ export function PolarPanel() {
     ctx.restore();
 
     // Draw each series
+    const hasContent = totalVisible > 0 || aggOverlayPoints.length > 0;
     if (totalVisible > 0) {
       displayData.forEach((series) => {
         const color = colorForKey(series.key);
@@ -285,7 +321,6 @@ export function PolarPanel() {
           const cy = toCanvasY(getValue(ap.point, yAxis));
 
           if (ap.isFlagged) {
-            // Red X mark for manually flagged points
             const s = 4;
             ctx.strokeStyle = '#ef4444';
             ctx.lineWidth = 2;
@@ -303,15 +338,39 @@ export function PolarPanel() {
           }
         }
       });
-    } else {
+    }
+
+    // Draw aggregated overlay as diamond markers
+    if (aggOverlayPoints.length > 0) {
+      const accentColor = getComputedStyle(document.documentElement)
+        .getPropertyValue('--accent-secondary').trim() || '#f59e0b';
+      const s = 6;
+      for (const pt of aggOverlayPoints) {
+        const cx = toCanvasX(pt.x);
+        const cy = toCanvasY(pt.y);
+        ctx.fillStyle = accentColor;
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - s);
+        ctx.lineTo(cx + s, cy);
+        ctx.lineTo(cx, cy + s);
+        ctx.lineTo(cx - s, cy);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+
+    if (!hasContent) {
       ctx.fillStyle = getComputedStyle(document.documentElement)
         .getPropertyValue('--text-secondary').trim() || '#888888';
       ctx.font = '14px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText('No polar data. Run a polar sweep in the Solve panel.', width / 2, height / 2);
     }
-  }, [canvasSize, displayData, totalVisible, xAxis, yAxis, xBounds, yBounds, makeToCanvasX, makeToCanvasY]);
+  }, [canvasSize, displayData, totalVisible, xAxis, yAxis, xBounds, yBounds, makeToCanvasX, makeToCanvasY, aggOverlayPoints]);
 
   // Canvas hit-testing for right-click context menu
   const handleContextMenu = useCallback(
@@ -426,6 +485,22 @@ export function PolarPanel() {
           />
           Remove Outliers
         </label>
+
+        {aggregatedRuns.length > 0 && (
+          <label style={{
+            display: 'flex', alignItems: 'center', gap: '4px', fontSize: '11px',
+            color: showAggregated ? 'var(--accent-secondary, #f59e0b)' : 'var(--text-secondary)',
+            cursor: 'pointer', userSelect: 'none',
+          }}>
+            <input
+              type="checkbox"
+              checked={showAggregated}
+              onChange={(e) => setShowAggregated(e.target.checked)}
+              style={{ margin: 0, accentColor: 'var(--accent-secondary, #f59e0b)' }}
+            />
+            Aggregated ({aggregatedRuns.length})
+          </label>
+        )}
 
         <span style={{ 
           marginLeft: 'auto', 

flexfoil-ui/src/lib/ephemeralState.ts

@@ -48,6 +48,8 @@ export function saveEphemeralState(snapshot: {
         dataExplorerSplomKeys: snapshot.ui.dataExplorerSplomKeys,
         dataExplorerColorBy: snapshot.ui.dataExplorerColorBy,
         dataExplorerFilterModel: snapshot.ui.dataExplorerFilterModel,
+        dataExplorerSmartGroup: snapshot.ui.dataExplorerSmartGroup,
+        dataExplorerDataSource: snapshot.ui.dataExplorerDataSource,
         layoutJson: snapshot.layoutJson ?? snapshot.ui.layoutJson,
         viewport: snapshot.ui.viewport,
       },

flexfoil-ui/src/lib/routeState.ts

@@ -455,6 +455,8 @@ export function parseRouteStateFromLocation(
       dataExplorerSplomKeys: splom ? (splom.split(',').filter(Boolean) as (keyof RunRow)[]) : undefined,
       dataExplorerColorBy: (params.get('colorBy') as keyof RunRow | null) ?? undefined,
       dataExplorerFilterModel: filterModel,
+      dataExplorerSmartGroup: params.get('smartGroup') === '1' ? true : undefined,
+      dataExplorerDataSource: (params.get('deData') as RouteUiSnapshot['dataExplorerDataSource'] | null) ?? undefined,
       activePanel: panel,
       viewport: Object.keys(viewport).length > 0 ? (viewport as RouteViewportState) : undefined,
       layoutJson: layoutJson ?? undefined,

flexfoil-ui/src/lib/version.ts

@@ -37,6 +37,11 @@ export const CHANGELOG: ChangelogEntry[] = [
       { category: 'added', text: 'Python API: PolarResult now exposes cl_max, alpha_stall, ld_max, cd_min, and generic argmax/argmin/column_mean/column_median' },
       { category: 'added', text: 'Selig airfoil database browser with ~1,600 airfoils from the UIUC database — search and load any airfoil' },
       { category: 'added', text: 'Random Foil button to load a surprise airfoil from the Selig database' },
+      { category: 'added', text: 'Smart Group button in Data Explorer — one click groups by polar configuration (airfoil + Re + Mach + Ncrit + flap) to see CL_max, L/D_max, α_stall per group' },
+      { category: 'added', text: 'Aggregated data source in Data Explorer correlogram and Polar Plot overlay — plot group-level statistics across all plotting surfaces' },
+      { category: 'added', text: '"Show Me" interactive tutorials in the What\'s New dialog — guided walkthroughs for new features powered by the tour system' },
+      { category: 'fixed', text: 'Data Explorer crashed with toFixed error when grouping by airfoil or other non-numeric columns' },
+      { category: 'changed', text: 'Smart Group and correlogram data source now persist across view switches and page reloads' },
     ],
   },
   {

flexfoil-ui/src/stores/routeUiStore.ts

@@ -45,6 +45,8 @@ export interface RouteUiSnapshot {
   dataExplorerSplomKeys: (keyof RunRow)[];
   dataExplorerColorBy: keyof RunRow | '';
   dataExplorerFilterModel: unknown | null;
+  dataExplorerSmartGroup: boolean;
+  dataExplorerDataSource: DataSource;
   outlierFilterEnabled: boolean;
   activePanel: PanelId;
   layoutJson: IJsonModel | null;
@@ -81,6 +83,8 @@ interface RouteUiStore extends RouteUiSnapshot {
   setDataExplorerSplomKeys: (value: (keyof RunRow)[]) => void;
   setDataExplorerColorBy: (value: keyof RunRow | '') => void;
   setDataExplorerFilterModel: (value: unknown | null) => void;
+  setDataExplorerSmartGroup: (value: boolean) => void;
+  setDataExplorerDataSource: (value: DataSource) => void;
   setOutlierFilterEnabled: (value: boolean) => void;
   setViewport: (value: RouteViewportState) => void;
   applyRouteViewport: (value: Partial<RouteViewportState>) => void;
@@ -116,6 +120,8 @@ export const DEFAULT_ROUTE_UI_STATE: RouteUiSnapshot = {
   dataExplorerSplomKeys: ['alpha', 'cl', 'cd', 'cm'],
   dataExplorerColorBy: '',
   dataExplorerFilterModel: null,
+  dataExplorerSmartGroup: false,
+  dataExplorerDataSource: 'full',
   outlierFilterEnabled: false,
   activePanel: 'canvas',
   layoutJson: null,
@@ -159,6 +165,8 @@ export const useRouteUiStore = create<RouteUiStore>((set) => ({
   setDataExplorerSplomKeys: (dataExplorerSplomKeys) => set({ dataExplorerSplomKeys }),
   setDataExplorerColorBy: (dataExplorerColorBy) => set({ dataExplorerColorBy }),
   setDataExplorerFilterModel: (dataExplorerFilterModel) => set({ dataExplorerFilterModel }),
+  setDataExplorerSmartGroup: (dataExplorerSmartGroup) => set({ dataExplorerSmartGroup }),
+  setDataExplorerDataSource: (dataExplorerDataSource) => set({ dataExplorerDataSource }),
   setOutlierFilterEnabled: (outlierFilterEnabled) => set({ outlierFilterEnabled }),
   setViewport: (viewport) => set({ viewport }),
   applyRouteViewport: (value) =>