perf(ui): cache Mermaid renders across remounts - #4977
Conversation
Reuse sanitized Mermaid SVG templates by renderer version, theme, and source while bounding cache memory and preserving instance-local SVG references. Coalesce identical in-flight renders and cover remounts, theme changes, cancellation, ID isolation, and LRU eviction. Fixes apache#4976 Generated-by: Codex
Astro-Han
left a comment
There was a problem hiding this comment.
Thanks for addressing the repeat-render path in #4976. Reviewed fc4c96b6 with two independent reviewer lanes and primary-agent reconciliation. The bounded cache, coalescing and cancellation behavior fit the problem and do not introduce another authority. One P2 remains in SVG selector preservation, detailed inline.
The four cache/component cases passed in an exact-head source-loader probe. An independent probe using real Mermaid 11.17.2 under a DOM polyfill confirmed the supported themeCSS output involved in the finding; a primary-agent probe of the exact namespace implementation confirmed the selector stops matching after rewriting. The React/Mermaid dependencies used match the PR lockfile. These are source/DOM probes, not a fresh workspace build or real Desktop renderer acceptance. Current CI is green.
Please fix the selector contract and verify actual light/dark rendering of repeated flowchart/sequence diagrams, including the custom themeCSS case, before UI approval. No broader cache framework or unrelated restructuring is needed.
AI-assisted review with independent reviewers and primary-agent verification.
中文
感谢修复 #4976 的重复渲染。两个 reviewer 独立检查并经主审复核 fc4c96b;有界缓存、合并并发和取消逻辑符合问题,没有新增权威。仍有一项 P2:SVG 选择器语义未完整保留,见行内。
四个缓存/组件用例通过 exact-head 源码加载验证;真实 Mermaid 11.17.2 配合 DOM polyfill 复现了相关 themeCSS 输出,主审用当前 namespace 源码确认重写后选择器失配。React/Mermaid 版本与 PR lock 一致。这不是重新构建 workspace,也不代表真实 Desktop renderer 验收;当前 CI 绿色。
请修复选择器契约,并验收实际 light/dark 下重复 flowchart/sequence 及自定义 themeCSS。无需新增缓存框架或扩大重构。此次为 AI 辅助评审,经独立 reviewer 与主审复核。
Generated-by: Codex
Summary
Cache sanitized Mermaid render templates by Mermaid version, theme, and source so unchanged diagrams do not repeat parse, layout, render, and sanitization work after remounts. The cache is bounded to 24 entries and 4 MiB, coalesces identical in-flight renders, excludes failures, and gives every mounted SVG instance its own rewritten ID namespace.
Fixes #4976
Verification
npm run lintnpm run format:checknpm run buildnpm run typechecknpm --workspace @maka/ui run test:dist(407 passed)npx knip --workspace apps/desktopnpx knip --workspace packages/uiNo screenshot is included because this is a performance-only change with no intended visual difference; the component regressions assert cache reuse, theme isolation, in-flight coalescing, cancellation behavior, SVG ID/reference isolation, and LRU eviction.
Review focus
Mermaid sequence diagrams emit fixed IDs such as
actor1androot-1. Cached templates therefore namespace every internal ID and rewrite local URL, ARIA, href, animation, and CSS references before per-instance namespace substitution.AI use
Select exactly one:
Tool(s) and scope: Codex diagnosed the repeated-render path, implemented the bounded cache and SVG ID isolation, and authored the regression tests under human direction and review.
Checklist
Does this PR entail a change in behavior?
Automated submission by Codex on behalf of @liuxiaocs7.