Skip to content

perf(ui): cache Mermaid renders across remounts - #4977

Open
liuxiaocs7 wants to merge 2 commits into
apache:mainfrom
liuxiaocs7:perf/mermaid-render-cache
Open

perf(ui): cache Mermaid renders across remounts#4977
liuxiaocs7 wants to merge 2 commits into
apache:mainfrom
liuxiaocs7:perf/mermaid-render-cache

Conversation

@liuxiaocs7

Copy link
Copy Markdown
Member

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 lint
  • npm run format:check
  • npm run build
  • npm run typecheck
  • npm --workspace @maka/ui run test:dist (407 passed)
  • npx knip --workspace apps/desktop
  • npx knip --workspace packages/ui

No 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 actor1 and root-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:

  • No generative tool made a substantive contribution
  • Generative tooling made a substantive contribution

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

  • Tests cover the change and fail without it
  • Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

  • Yes — described under Summary above
  • No

Automated submission by Codex on behalf of @liuxiaocs7.

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
@github-actions github-actions Bot added the effort/L Under 1000 readable lines label Sep 7, 2026

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 与主审复核。

Comment thread packages/ui/src/mermaid-diagram.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/L Under 1000 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

perf(ui): cache sanitized Mermaid renders across remounts

2 participants