fix(ui): Parentheses in step name crash graph in web UI #1434 #1440
Conversation
There was a problem hiding this comment.
@Tagnard Thanks a ton! Sorry, the UI code is a bit sloppy and we have multiple occurrences of the same regex. Could you fix them all? Also, feel free to refactor the code if you see a better way.
|
Hi @Tagnard, Thanks for the PR! Do you have time to work on this today? If you are busy, would you mind if I pushed changes to the branch? I'm planning to release the new version today and really want to get this fix included. |
Consolidate the repeated regex pattern for converting step names to valid Mermaid node IDs into a shared utility function. This improves maintainability by having a single source of truth for the conversion logic that handles spaces, dashes, and parentheses.
|
I understand you're busy, please don't mind that I push some changes. |
WalkthroughA new utility function Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
ui/src/features/dags/components/DAGStatus.tsx (1)
7-7: Consistent use oftoMermaidNodeIdfor graph node lookupsSwitching both
onSelectStepOnGraphandonRightClickStepOnGraphto usetoMermaidNodeId(n.step.name)keeps the lookup logic aligned with how node IDs are generated in the graph, which should eliminate the crash when step names contain parentheses or spaces/dashes.As a small follow‑up, you could tighten the comparisons to
===since both sides are strings and there’s no need for type coercion, but the current logic is correct.Also applies to: 100-103, 197-199
ui/src/lib/utils.ts (1)
8-16: Mermaid ID sanitizer looks good; consider more generalization laterThe new
toMermaidNodeIdcentralizes Mermaid ID normalization and directly handles the problematic characters (spaces, dashes, parentheses) that were crashing the graph, which is exactly what this bugfix needs.If you see more issues with other special characters in the future, a possible follow‑up would be to broaden the regex to normalize any non‑alphanumeric/underscore character or to prefix IDs with a fixed namespace to further reduce theoretical collision risk. Not a blocker for this PR.
ui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsx (1)
11-11: History view node matching correctly reusestoMermaidNodeIdHooking both
onSelectStepOnGraphandonRightClickStepOnGraphup totoMermaidNodeId(n.step.name)keeps the execution‑history graph interactions consistent with the main DAG view and the Graph component’s ID generation, so step names with parentheses or spaces now behave correctly here as well.The merged
subRunsarray using[...(n.subRuns ?? []), ...(n.subRunsRepeated ?? [])]is also a tidy improvement and avoids repeated conditional logic. As inDAGStatus.tsx, you could optionally switch==to===when comparing IDs, but the current code is functionally correct.Also applies to: 269-296, 301-327
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
ui/src/features/dags/components/DAGStatus.tsx(3 hunks)ui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsx(3 hunks)ui/src/features/dags/components/visualization/Graph.tsx(3 hunks)ui/src/lib/utils.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
ui/**/*.{ts,tsx,jsx,js}
📄 CodeRabbit inference engine (ui/CLAUDE.md)
ui/**/*.{ts,tsx,jsx,js}: Use developer-centric UI design with high information density, minimal whitespace, compact components, and no unnecessary decorations
Support both light and dark modes for all UI components using Tailwind CSS class pairs likedark:bg-slate-700
NEVER use full-page loading overlays or LoadingIndicator components that hide content - show stale data while fetching updates instead
Use compact modal design with small headers, minimal padding (p-2 or p-3), tight spacing, and support keyboard navigation (arrows, enter, escape)
Use small heights for form elements: select boxes h-7 or smaller, buttons h-7 or h-8, inputs with compact padding (py-0.5 or py-1)
Minimize row heights in tables and lists while maintaining readability, merge related columns, and always handle long text withwhitespace-normal break-words
Use consistent metadata styling withbg-slate-200 dark:bg-slate-700backgrounds and maintain text hierarchy with primary/secondary/muted text colors
Use flexbox-first layouts withmin-h-0andoverflow-hiddento prevent layout breaks, account for fixed elements when setting heights
Maintain keyboard navigation support in all interactive components with appropriate focus indicators and ARIA labels
Files:
ui/src/lib/utils.tsui/src/features/dags/components/DAGStatus.tsxui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsxui/src/features/dags/components/visualization/Graph.tsx
ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
ui/**/*.{ts,tsx}: The React + TypeScript frontend resides inui/, with production bundles copied tointernal/service/frontend/assetsbymake ui
UI code follows ESLint + Prettier (2-space indent) and Tailwind utilities; name React components in PascalCase (JobList.tsx) and hooks withuse*(useJobs.ts)
Files:
ui/src/lib/utils.tsui/src/features/dags/components/DAGStatus.tsxui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsxui/src/features/dags/components/visualization/Graph.tsx
🧬 Code graph analysis (3)
ui/src/features/dags/components/DAGStatus.tsx (1)
ui/src/lib/utils.ts (1)
toMermaidNodeId(14-16)
ui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsx (1)
ui/src/lib/utils.ts (1)
toMermaidNodeId(14-16)
ui/src/features/dags/components/visualization/Graph.tsx (1)
ui/src/lib/utils.ts (1)
toMermaidNodeId(14-16)
🔇 Additional comments (2)
ui/src/features/dags/components/DAGStatus.tsx (1)
107-107: Sub‑run merging is clearer and functionally equivalentUsing a single spread expression for
allSubRuns = [...(n.subRuns || []), ...(n.subRunsRepeated || [])]is a nice simplification and matches how other components in this PR merge sub‑runs. Behavior stays the same while improving readability.ui/src/features/dags/components/visualization/Graph.tsx (1)
7-7: Graph now aligns ID generation with shared sanitizerUsing
toMermaidNodeId(step.name)for both the nodeidand eachdepIdbrings the Mermaid definition in line with how the click/right‑click handlers resolve nodes, and removes the raw parentheses from identifiers that were previously breaking the graph rendering.This keeps the change tightly scoped to ID generation without affecting labels or layout, which is appropriate for the reported bug. If you later expand
toMermaidNodeId(e.g., to normalize more characters), this file won’t need further changes.Also applies to: 146-147, 187-190
|
PR merged, thank you very much @Tagnard ! |
fixes #1434
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.