Skip to content

Commit fa6eae1

Browse files
wcchang1115wcchang1115
authored
Merge branch 'main' into feature/smoke-test-recce-cloud
2 parents f5ca438 + aeb90a6 commit fa6eae1

56 files changed

Lines changed: 915 additions & 287 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ When asked to "publish ui" or "release ui package":
5050

5151
## Commit and PR Workflow
5252

53-
**Commits:** Always use `--signoff` and include `Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>`
53+
**Commits:** Always use `--signoff` and include a `Co-Authored-By: Claude <noreply@anthropic.com>` trailer (version pin optional — if included, use the current model)
5454

5555
**PRs:** Follow `.github/PULL_REQUEST_TEMPLATE.md`:
5656
- PR checklist (tests, DCO)

‎js/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
"@fontsource/montserrat": "^5.2.8",
4040
"@hello-pangea/dnd": "^18.0.1",
4141
"@jeromefitz/date-fns-tz": "3.0.0-canary.8",
42-
"@mui/material": "^7.3.9",
43-
"@mui/system": "^7.3.9",
42+
"@mui/material": "^9.0.0",
43+
"@mui/system": "^9.0.0",
4444
"@next/third-parties": "16.2.4",
4545
"@sentry/nextjs": "^10.49.0",
4646
"@sentry/react": "^10.49.0",
@@ -126,8 +126,8 @@
126126
"@testing-library/react": "16.3.2",
127127
"happy-dom": "^20.9.0",
128128
"@emotion/styled": "^11.14.1",
129-
"@mui/material": "^7.3.9",
130-
"@mui/system": "^7.3.9",
129+
"@mui/material": "^9.0.0",
130+
"@mui/system": "^9.0.0",
131131
"@xyflow/react": "^12.10.2",
132132
"@dagrejs/dagre": "3.0.0",
133133
"html-to-image": "1.11.13",

‎js/packages/storybook/stories/lineage/CllExperience.stories.tsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,13 @@ function NodeComparisonDemo() {
152152
<Typography variant="h6">Light Mode</Typography>
153153
<Box sx={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
154154
<Box>
155-
<Typography variant="caption" color="text.secondary" gutterBottom>
155+
<Typography
156+
variant="caption"
157+
gutterBottom
158+
sx={{
159+
color: "text.secondary",
160+
}}
161+
>
156162
Modified (changed)
157163
</Typography>
158164
<NodeWithColumns
@@ -170,7 +176,13 @@ function NodeComparisonDemo() {
170176
</Box>
171177

172178
<Box>
173-
<Typography variant="caption" color="text.secondary" gutterBottom>
179+
<Typography
180+
variant="caption"
181+
gutterBottom
182+
sx={{
183+
color: "text.secondary",
184+
}}
185+
>
174186
Added
175187
</Typography>
176188
<NodeWithColumns
@@ -188,7 +200,13 @@ function NodeComparisonDemo() {
188200
</Box>
189201

190202
<Box>
191-
<Typography variant="caption" color="text.secondary" gutterBottom>
203+
<Typography
204+
variant="caption"
205+
gutterBottom
206+
sx={{
207+
color: "text.secondary",
208+
}}
209+
>
192210
Removed
193211
</Typography>
194212
<NodeWithColumns
@@ -206,7 +224,13 @@ function NodeComparisonDemo() {
206224
</Box>
207225

208226
<Box>
209-
<Typography variant="caption" color="text.secondary" gutterBottom>
227+
<Typography
228+
variant="caption"
229+
gutterBottom
230+
sx={{
231+
color: "text.secondary",
232+
}}
233+
>
210234
Impacted (downstream)
211235
</Typography>
212236
<NodeWithColumns
@@ -225,7 +249,13 @@ function NodeComparisonDemo() {
225249
</Box>
226250

227251
<Box>
228-
<Typography variant="caption" color="text.secondary" gutterBottom>
252+
<Typography
253+
variant="caption"
254+
gutterBottom
255+
sx={{
256+
color: "text.secondary",
257+
}}
258+
>
229259
Unchanged
230260
</Typography>
231261
<NodeWithColumns
@@ -243,12 +273,10 @@ function NodeComparisonDemo() {
243273
/>
244274
</Box>
245275
</Box>
246-
247276
<Typography variant="h6" sx={{ mt: 2 }}>
248277
Schema Sidebar — Light Mode
249278
</Typography>
250279
<SidebarRowsDemo />
251-
252280
<Typography variant="h6" sx={{ mt: 2 }}>
253281
Dark Mode
254282
</Typography>
@@ -364,7 +392,6 @@ function NodeComparisonDemo() {
364392
/>
365393
</Box>
366394
</Box>
367-
368395
<Typography variant="h6" sx={{ mt: 2 }}>
369396
Schema Sidebar — Dark Mode
370397
</Typography>

‎js/packages/storybook/stories/lineage/LineageCanvas.stories.tsx‎

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,12 @@ function CllToggleDemo() {
353353
}
354354
label="Column-Level Lineage"
355355
/>
356-
<Typography variant="body2" color="text.secondary">
356+
<Typography
357+
variant="body2"
358+
sx={{
359+
color: "text.secondary",
360+
}}
361+
>
357362
{cllEnabled
358363
? "CLL enabled - columns visible inside nodes"
359364
: "CLL disabled - positions should be preserved"}
@@ -524,12 +529,16 @@ function ColumnClickingReflowDemo() {
524529
>
525530
<Typography variant="h6">Column Clicking Reflow</Typography>
526531
{reflowDetected && (
527-
<Typography variant="body2" color="error.contrastText">
532+
<Typography
533+
variant="body2"
534+
sx={{
535+
color: "error.contrastText",
536+
}}
537+
>
528538
⚠️ REFLOW DETECTED! Count: {reflowCount}
529539
</Typography>
530540
)}
531541
</Box>
532-
533542
{/* Main content */}
534543
<Box sx={{ flex: 1, display: "flex", minHeight: 0 }}>
535544
{/* Lineage Canvas */}
@@ -557,10 +566,20 @@ function ColumnClickingReflowDemo() {
557566
}}
558567
>
559568
<Box sx={{ p: 2, borderBottom: 1, borderColor: "divider" }}>
560-
<Typography variant="subtitle1" fontWeight="bold">
569+
<Typography
570+
variant="subtitle1"
571+
sx={{
572+
fontWeight: "bold",
573+
}}
574+
>
561575
stg_orders
562576
</Typography>
563-
<Typography variant="caption" color="text.secondary">
577+
<Typography
578+
variant="caption"
579+
sx={{
580+
color: "text.secondary",
581+
}}
582+
>
564583
Click columns to view their lineage
565584
</Typography>
566585
</Box>
@@ -572,7 +591,12 @@ function ColumnClickingReflowDemo() {
572591
onClick={handleClearSelection}
573592
style={{ cursor: "pointer" }}
574593
>
575-
<Typography variant="body2" color="text.secondary">
594+
<Typography
595+
variant="body2"
596+
sx={{
597+
color: "text.secondary",
598+
}}
599+
>
576600
Clear selection
577601
</Typography>
578602
</Box>
@@ -607,13 +631,20 @@ function ColumnClickingReflowDemo() {
607631
<Box>
608632
<Typography
609633
variant="body2"
610-
fontWeight={isSelected ? "bold" : "normal"}
634+
sx={{
635+
fontWeight: isSelected ? "bold" : "normal",
636+
}}
611637
>
612638
{index + 1}. {columnName}
613639
{!isClickable && " (no CLL data)"}
614640
</Typography>
615641
</Box>
616-
<Typography variant="caption" color="text.secondary">
642+
<Typography
643+
variant="caption"
644+
sx={{
645+
color: "text.secondary",
646+
}}
647+
>
617648
{columnName === "order_id"
618649
? "BIGINT"
619650
: columnName === "customer_id"
@@ -629,7 +660,12 @@ function ColumnClickingReflowDemo() {
629660

630661
{/* Instructions */}
631662
<Box sx={{ p: 2, borderTop: 1, borderColor: "divider" }}>
632-
<Typography variant="body2" color="text.secondary">
663+
<Typography
664+
variant="body2"
665+
sx={{
666+
color: "text.secondary",
667+
}}
668+
>
633669
<strong>How to reproduce:</strong>
634670
<br />
635671
1. Click on &quot;customer_id&quot; column
@@ -800,12 +836,16 @@ function LargeGraphReflowDemo() {
800836
>
801837
<Typography variant="h6">Large Graph Reflow</Typography>
802838
{reflowDetected && (
803-
<Typography variant="body2" color="error.contrastText">
839+
<Typography
840+
variant="body2"
841+
sx={{
842+
color: "error.contrastText",
843+
}}
844+
>
804845
⚠️ REFLOW DETECTED! Count: {reflowCount}
805846
</Typography>
806847
)}
807848
</Box>
808-
809849
{/* Main content */}
810850
<Box sx={{ flex: 1, display: "flex", minHeight: 0 }}>
811851
{/* Lineage Canvas */}
@@ -833,10 +873,20 @@ function LargeGraphReflowDemo() {
833873
}}
834874
>
835875
<Box sx={{ p: 2, borderBottom: 1, borderColor: "divider" }}>
836-
<Typography variant="subtitle1" fontWeight="bold">
876+
<Typography
877+
variant="subtitle1"
878+
sx={{
879+
fontWeight: "bold",
880+
}}
881+
>
837882
order_items
838883
</Typography>
839-
<Typography variant="caption" color="text.secondary">
884+
<Typography
885+
variant="caption"
886+
sx={{
887+
color: "text.secondary",
888+
}}
889+
>
840890
Click columns to view their lineage
841891
</Typography>
842892
</Box>
@@ -848,7 +898,12 @@ function LargeGraphReflowDemo() {
848898
onClick={handleClearSelection}
849899
style={{ cursor: "pointer" }}
850900
>
851-
<Typography variant="body2" color="text.secondary">
901+
<Typography
902+
variant="body2"
903+
sx={{
904+
color: "text.secondary",
905+
}}
906+
>
852907
Clear selection
853908
</Typography>
854909
</Box>
@@ -884,13 +939,20 @@ function LargeGraphReflowDemo() {
884939
<Box>
885940
<Typography
886941
variant="body2"
887-
fontWeight={isSelected ? "bold" : "normal"}
942+
sx={{
943+
fontWeight: isSelected ? "bold" : "normal",
944+
}}
888945
>
889946
{index + 1}. {columnName}
890947
{!isClickable && " (no CLL data)"}
891948
</Typography>
892949
</Box>
893-
<Typography variant="caption" color="text.secondary">
950+
<Typography
951+
variant="caption"
952+
sx={{
953+
color: "text.secondary",
954+
}}
955+
>
894956
TEXT
895957
</Typography>
896958
</Box>
@@ -900,7 +962,12 @@ function LargeGraphReflowDemo() {
900962

901963
{/* Instructions */}
902964
<Box sx={{ p: 2, borderTop: 1, borderColor: "divider" }}>
903-
<Typography variant="body2" color="text.secondary">
965+
<Typography
966+
variant="body2"
967+
sx={{
968+
color: "text.secondary",
969+
}}
970+
>
904971
<strong>How to reproduce:</strong>
905972
<br />
906973
1. Click on &quot;ORDER_ID&quot; column

‎js/packages/storybook/stories/lineage/NodeView.stories.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ import { fn } from "storybook/test";
2323
function StubSchemaView({ base, current }: SchemaViewProps) {
2424
return (
2525
<Box sx={{ p: 2 }}>
26-
<Typography variant="body2" color="text.secondary">
26+
<Typography
27+
variant="body2"
28+
sx={{
29+
color: "text.secondary",
30+
}}
31+
>
2732
Schema diff view — base has{" "}
2833
{base?.columns ? Object.keys(base.columns).length : 0} columns, current
2934
has {current?.columns ? Object.keys(current.columns).length : 0} columns

‎js/packages/storybook/stories/lineage/ZoomLegibility.stories.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,12 @@ function FitToChangedDemo() {
254254
color="warning"
255255
size="small"
256256
/>
257-
<Typography variant="body2" color="text.secondary">
257+
<Typography
258+
variant="body2"
259+
sx={{
260+
color: "text.secondary",
261+
}}
262+
>
258263
Initial view centers on changed (modified/added/removed) nodes only,
259264
not the full graph. Labels are readable immediately.
260265
</Typography>
@@ -322,7 +327,12 @@ function SideBySideDemo() {
322327
}}
323328
>
324329
<Typography variant="h6">Side-by-Side: Before vs After</Typography>
325-
<Typography variant="body2" color="text.secondary">
330+
<Typography
331+
variant="body2"
332+
sx={{
333+
color: "text.secondary",
334+
}}
335+
>
326336
Left: old behavior (no zoom floor). Right: new behavior (minZoom =
327337
{LEGIBLE_MIN_ZOOM}).
328338
</Typography>

‎js/packages/ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@
147147
"@emotion/react": "^11.14.0",
148148
"@emotion/styled": "^11.14.0",
149149
"@hello-pangea/dnd": "^18.0.0",
150-
"@mui/material": "^7.3.9",
151-
"@mui/system": "^7.3.9",
150+
"@mui/material": "^9.0.0",
151+
"@mui/system": "^9.0.0",
152152
"@tanstack/react-query": "^5.0.0",
153153
"@uiw/codemirror-theme-github": "^4.25.7",
154154
"@uiw/react-codemirror": "^4.25.7",

‎js/packages/ui/src/components/app/AuthModal.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,13 @@ export default function AuthModal({
169169
) : (
170170
<>
171171
<DialogContent className="space-y-2 self-center font-light">
172-
<Stack spacing={2} alignItems="center" sx={{ pt: "1rem" }}>
172+
<Stack
173+
spacing={2}
174+
sx={{
175+
alignItems: "center",
176+
pt: "1rem",
177+
}}
178+
>
173179
<Box
174180
component="img"
175181
sx={{ height: "6rem", objectFit: "contain", mx: "auto", mb: 1 }}

0 commit comments

Comments
 (0)