Add Mermaid diagrams, telemetry, trace, and artifact registry refinements to enterprise showcase#70
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for comptext-v7 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request integrates the mermaid library into the showcase application to render visual diagrams for the deterministic replay pipeline and CI validation flows. It also expands the dashboard with additional KPIs, detailed artifact registry metadata, and a guided reviewer walkthrough. Feedback was provided regarding the MermaidDiagram component, specifically suggesting that mermaid.initialize be moved outside the useEffect hook or guarded to prevent inefficient re-initialization on every render.
| import('mermaid').then(({ default: mermaid }) => { | ||
| mermaid.initialize({ | ||
| startOnLoad: false, | ||
| securityLevel: 'strict', | ||
| theme: 'dark', | ||
| themeVariables: { | ||
| background: '#080d14', | ||
| primaryColor: '#0f1724', | ||
| primaryTextColor: '#e5edf7', | ||
| primaryBorderColor: '#3b82f6', | ||
| lineColor: '#60a5fa', | ||
| secondaryColor: '#111827', | ||
| tertiaryColor: '#0b1220', | ||
| fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif' | ||
| } | ||
| }); | ||
| return mermaid.render(`diagram-${id}`, chart); |
There was a problem hiding this comment.
The mermaid.initialize function is called on every render of the MermaidDiagram component when the chart prop changes. This is inefficient and could lead to unexpected behavior if the configuration is reset. Consider moving the initialization outside the useEffect or ensuring it only runs once.
1 participant
Motivation
Description
MermaidDiagramrenderer that keeps the source visible for reviewer inspection (showcase/app/src/main.tsx).showcase/app/src/main.tsx).showcase/app/src/main.tsx).showcase/app/src/main.tsx).mermaidruntime dependency and updated styles to include Mermaid panels, responsive grids, trace-tree styles, denser tables, and walkthrough index markers (showcase/app/package.json,showcase/app/package-lock.json,showcase/app/src/styles.css).Testing
npm run validatewhich passed the showcase copy/content validation.npm run buildwhich completed successfully; Vite emitted a large-chunk advisory because Mermaid’s runtime bundle is sizable (informational only).playwright, so browser capture did not run; the dev server itself started successfully during verification.Codex Task