dosubot[bot] commented on issue #38926: URL: https://github.com/apache/superset/issues/38926#issuecomment-4164172592
<!-- Answer --> Thanks for the detailed write-up, @MouhibKhammassi. I took a look at the actual source of `superset-frontend/src/utils/downloadAsImage.ts` and have some observations: **The file doesn't contain the code described in the issue.** The current implementation is a straightforward ~89-line file [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/utils/downloadAsImage.ts) that: 1. Locates the target DOM element via a CSS selector 2. Calls `domToImage.toJpeg()` from the `dom-to-image-more` library 3. Triggers a browser download via a temporary `<a>` element There is **no `styleCache` WeakMap**, no `createEnhancedClone` function, and no cleanup callback with `styleCache.delete()` anywhere in this file [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/utils/downloadAsImage.ts). The file has no caching layer at all — it's a thin wrapper around `dom-to-image-more`. That said, the core performance concern is still valid — `dom-to-image-more` does perform expensive operations (walking the DOM, calling `getComputedStyle` on every element, inlining styles into an SVG, rendering to canvas) and this work is done **synchronously on the main thread**, which explains the UI freeze. The library itself doesn't cache across invocations. A few possible directions for a real fix: - **Offload to a Web Worker** or use `requestIdleCallback` to avoid blocking the main thread - **Use `html-to-image`** (a more modern alternative) which may have better performance characteristics - **Show a loading indicator** before calling `domToImage.toJpeg()` so the freeze is at least communicated to the user - **Explore server-side rendering** of the chart image (e.g., via a headless browser) to avoid client-side DOM traversal entirely Could you share which version/branch you're actually looking at? The code you referenced (323 lines, `styleCache`, `createEnhancedClone`) doesn't match what's currently on `master`, so it's possible you're working from a fork or a local modification. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=brand-link).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=great_response&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=irrelevant_answer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=incorrect_sources&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=too_verbose&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/eeecf9d0-a221 -4fbc-a0b5-88fe1bfec5ae?feedback_type=hallucination&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=bug_report&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-bug_report) | [Other](https://app.dosu.dev/response-feedback/eeecf9d0-a221-4fbc-a0b5-88fe1bfec5ae?feedback_type=other&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=chat-badge) [](https://cursor.com/link/prompt?text=Thanks%20for%20the%20detailed%20write-up%2C%20%40MouhibKhammassi.%20I%20took%20a%20look%20at%20the%20actual%20source%20of%20%60superset-frontend/src/utils/downloadAsImage.ts%60%20and%20have%20some%20observations%3A%0A%0A%2A%2AThe%20file%20doesn%27t%20contain%20the%20code%20described%20in%20the%20issue.%2A%2A%20The%20current%20implementation%20is%20a%20straightforward%20~89-line%20file%20%5B%5B1%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/utils/downloadAsImage.ts%29%20that%3A%0A%0A1.%20Locates%20the%20target%20DOM%20element%20via%20a%20CSS%20selector%0A2.%20Calls%20%60domToImage.toJpeg%28%29%60%20from%20the %20%60dom-to-image-more%60%20library%0A3.%20Triggers%20a%20browser%20download%20via%20a%20temporary%20%60%26lt%3Ba%26gt%3B%60%20element%0A%0AThere%20is%20%2A%2Ano%20%60styleCache%60%20WeakMap%2A%2A%2C%20no%20%60createEnhancedClone%60%20function%2C%20and%20no%20cleanup%20callback%20with%20%60styleCache.delete%28%29%60%20anywhere%20in%20this%20file%20%5B%5B1%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/utils/downloadAsImage.ts%29.%20The%20file%20has%20no%20caching%20layer%20at%20all%20%E2%80%94%20it%27s%20a%20thin%20wrapper%20around%20%60dom-to-image-more%60.%0A%0AThat%20said%2C%20the%20core%20performance%20concern%20is%20still%20valid%20%E2%80%94%20%60dom-to-image-more%60%20does%20perform%20expensive%20operations%20%28walking%20the%20DOM%2C%20calling%20%60getComputedStyle%60%20on%20every%20element%2C%20inlining%20styles%20into%20an%20SVG%2C%20rendering%20to%20canvas%29%20and%20this%20work%20is%20done%20%2A%2Asynchron ously%20on%20the%20main%20thread%2A%2A%2C%20which%20explains%20the%20UI%20freeze.%20The%20library%20itself%20doesn%27t%20cache%20across%20invocations.%0A%0AA%20few%20possible%20directions%20for%20a%20real%20fix%3A%0A%0A-%20%2A%2AOffload%20to%20a%20Web%20Worker%2A%2A%20or%20use%20%60requestIdleCallback%60%20to%20avoid%20blocking%20the%20main%20thread%0A-%20%2A%2AUse%20%60html-to-image%60%2A%2A%20%28a%20more%20modern%20alternative%29%20which%20may%20have%20better%20performance%20characteristics%0A-%20%2A%2AShow%20a%20loading%20indicator%2A%2A%20before%20calling%20%60domToImage.toJpeg%28%29%60%20so%20the%20freeze%20is%20at%20least%20communicated%20to%20the%20user%0A-%20%2A%2AExplore%20server-side%20rendering%2A%2A%20of%20the%20chart%20image%20%28e.g.%2C%20via%20a%20headless%20browser%29%20to%20avoid%20client-side%20DOM%20traversal%20entirely%0A%0ACould%20you%20share%20which%20version/branch%20you%27re%20actually%20looking%20at%3F%20The%20code%20you%20referenced%20%28323%20lines%2C%20%6 0styleCache%60%2C%20%60createEnhancedClone%60%29%20doesn%27t%20match%20what%27s%20currently%20on%20%60master%60%2C%20so%20it%27s%20possible%20you%27re%20working%20from%20a%20fork%20or%20a%20local%20modification.) [](https://go.dosu.dev/discord-bot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=join-discord) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/38926) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
