feat(step updates): group/pivot/join

Author: jedwin3210

apps/web/package-lock.json

@@ -23,6 +23,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "baseline-browser-mapping": "^2.9.19",
     "eslint": "^8.57.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.37.0",

apps/web/package.json

@@ -5,6 +5,7 @@ import './App.css';
 import { Editor } from '@monaco-editor/react';
 import TracePanel from './components/TracePanel';
 import { StepCard } from './components/StepSlideshow';
+import { expandTraceToDisplaySteps } from './lib/displaySteps';
 import ExamplesGallery from './components/ExamplesGallery';
 import { initPyodide, runPythonCode, type PyodideOutput } from './lib/pyodide';
 import { type Example } from './lib/examples';
@@ -388,28 +389,31 @@ function App() {
       </div>
 
       {/* Hidden container for multi-step PDF export (off-screen, same layout as panel) */}
-      {isExportingPdf && output.trace && output.trace.length > 0 && (
-        <div
-          ref={exportContainerRef}
-          className="export-pdf-container"
-          style={{
-            position: 'absolute',
-            left: '-9999px',
-            top: 0,
-            width: 640,
-            zIndex: -1,
-          }}
-        >
-          {output.trace.map((record, i) => (
-            <StepCard
-              key={i}
-              record={record}
-              stepIndex={i}
-              totalSteps={output.trace!.length}
-            />
-          ))}
-        </div>
-      )}
+      {isExportingPdf && output.trace && output.trace.length > 0 && (() => {
+        const exportDisplaySteps = expandTraceToDisplaySteps(output.trace!);
+        return (
+          <div
+            ref={exportContainerRef}
+            className="export-pdf-container"
+            style={{
+              position: 'absolute',
+              left: '-9999px',
+              top: 0,
+              width: 640,
+              zIndex: -1,
+            }}
+          >
+            {exportDisplaySteps.map((step, i) => (
+              <StepCard
+                key={i}
+                step={step}
+                stepIndex={i}
+                totalSteps={exportDisplaySteps.length}
+              />
+            ))}
+          </div>
+        );
+      })()}
 
       {/* Examples Gallery Modal */}
       {showGallery && (

apps/web/src/App.tsx

@@ -18,6 +18,11 @@
   transform: translateY(0);
 }
 
+/* Join: left table | right table | result */
+.data-transformation.join-three-panel {
+  grid-template-columns: 1fr 1fr auto 1fr;
+}
+
 /* Transform Sections */
 .transform-section {
   display: flex;
@@ -150,6 +155,38 @@
   font-weight: 500;
 }
 
+/* Group/Join: highlight key column (group column or join column) */
+.data-table.compact th.highlight-col,
+.data-table.compact td.highlight-col {
+  background-color: rgba(59, 126, 161, 0.35) !important;
+  border-left: 3px solid rgba(255, 198, 70, 0.6);
+  border-right: 1px solid rgba(59, 126, 161, 0.4);
+  color: var(--text-primary);
+}
+
+/* Row highlight (e.g. group matching rows) */
+.data-table.compact tr.highlight-row td {
+  background-color: rgba(59, 126, 161, 0.4) !important;
+  border-left: 2px solid rgba(255, 198, 70, 0.5);
+}
+
+/* Cell highlight (e.g. pivot cell) */
+.data-table.compact td.highlight-cell {
+  background-color: rgba(255, 198, 70, 0.2) !important;
+  border: 1px solid rgba(255, 198, 70, 0.5);
+}
+
+.unique-values-callout {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: 'Source Code Pro', 'Courier New', monospace;
+  background-color: rgba(0, 40, 80, 0.6);
+  border-radius: 6px;
+  margin-top: 0.5rem;
+  border: 1px solid rgba(59, 126, 161, 0.35);
+}
+
 /* Step 1 (empty → with_columns): higher contrast so table is easy to read */
 .data-transformation .after.initialization-result .data-table.compact td {
   color: var(--text-primary);
@@ -253,6 +290,11 @@
     grid-template-rows: auto auto auto;
   }
 
+  .data-transformation.join-three-panel {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto auto;
+  }
+
   .transform-arrow-container {
     transform: rotate(90deg);
     margin: 1rem 0;