⚡ Bolt: Cache font size calculation in Sunburst

google-labs-jules[bot] · google-labs-jules[bot] · commit ca125f45fdd2 · 2026-01-24T16:25:43.000Z
diff --git a/.jules/bolt.md b/.jules/bolt.md
@@ -0,0 +1,3 @@
+## 2024-05-23 - DOM Layout Thrashing in Sunburst
+**Learning:** `getComputedTextLength` causes synchronous layout thrashing and is a major bottleneck when called in loops (e.g. `renderText`).
+**Action:** Leverage the `DataNode.extra` property to memoize expensive calculations like text width. This avoids repeated layout thrashing on re-renders when data hasn't changed.
diff --git a/src/visualizations/sunburst/Sunburst.ts b/src/visualizations/sunburst/Sunburst.ts
@@ -417,8 +417,15 @@ export default class Sunburst {
             .attr("dy", ".2em")
             .text((d: HRN<DataNode>) => this.settings.getLabel(d.data))
             .style("font-size", function(this: SVGTextContentElement, d: HRN<DataNode>) {
+                const label = that.settings.getLabel(d.data);
+                if (d.data.extra.fontSizeCache && d.data.extra.fontSizeCache.label === label) {
+                    return d.data.extra.fontSizeCache.size;
+                }
+
                 const txtLength = offscreenCanvasSupported ? ctx.measureText(this.textContent!).width : this.getComputedTextLength();
-                return Math.floor(Math.min(((that.settings.radius / that.settings.levels) / txtLength * 10) + 1, 12)) + "px";
+                const fontSize = Math.floor(Math.min(((that.settings.radius / that.settings.levels) / txtLength * 10) + 1, 12)) + "px";
+                d.data.extra.fontSizeCache = { label, size: fontSize };
+                return fontSize;
             });
 
         // Somewhat of a hack as we rely on arcTween updating the scales.
diff --git a/src/visualizations/sunburst/__tests__/SunburstPerformance.spec.ts b/src/visualizations/sunburst/__tests__/SunburstPerformance.spec.ts
@@ -0,0 +1,69 @@
+import Sunburst from "./../Sunburst";
+import { waitForCondition } from "./../../../test/TestUtils";
+import SunburstSettings from "./../SunburstSettings";
+import { JSDOM } from "jsdom";
+import { describe, it, expect } from "vitest";
+import taxonomyObject from "./resources/taxonomy.json";
+
+describe("Sunburst Performance", () => {
+    function createJSDom() {
+        const dom = new JSDOM("<!DOCTYPE html><div id=\"visualization\"></div>");
+        return dom;
+    }
+
+    it("should reduce getComputedTextLength calls with caching", async () => {
+        let callCount = 0;
+
+        const dom = createJSDom();
+        // Mock getComputedTextLength on the prototype inside the JSDOM window
+        // @ts-ignore
+        dom.window.Element.prototype.getComputedTextLength = function() {
+            callCount++;
+            return 20;
+        };
+
+        const element = dom.window.document.getElementById("visualization")!;
+        const settings = new SunburstSettings();
+        settings.animationDuration = 0; // Disable animation for instant updates
+
+        // @ts-ignore
+        const sunburst = new Sunburst(element, taxonomyObject, settings);
+
+        // Wait for initial render
+        await waitForCondition(() => element.getElementsByTagName("text").length > 0, 2000, 100);
+
+        const initialCount = callCount;
+        console.log("Initial calls:", initialCount);
+
+        // Trigger click on a child (path-1)
+        const paths = element.getElementsByTagName("path");
+        const event = dom.window.document.createEvent("CustomEvent");
+        event.initEvent("click", true, true);
+        paths.item(1)!.dispatchEvent(event);
+
+        // Wait for re-render (allow some time for async renderText)
+        await new Promise(r => setTimeout(r, 200));
+
+        const afterDrillDownCount = callCount;
+        console.log("Calls after drill down:", afterDrillDownCount - initialCount);
+
+        // Reset to root (drill up)
+        sunburst.reset();
+
+        // Wait for re-render
+        await new Promise(r => setTimeout(r, 200));
+
+        const afterResetCount = callCount;
+        const resetCalls = afterResetCount - afterDrillDownCount;
+        console.log("Calls after reset:", resetCalls);
+
+        // We export the count so we can verify it in the prompt/journal.
+        // For the baseline, we expect resetCalls to be roughly equal to initialCount (re-measuring everything).
+        // We will fail this test purposely if we want to enforce "improvement",
+        // but for now let's just log it and maybe add an assertion that it IS high,
+        // then later update it to expect LOW.
+
+        // With optimization, resetCalls should be 0 because all nodes in the initial view have been cached.
+        expect(resetCalls).toBe(0);
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## 2024-05-23 - DOM Layout Thrashing in Sunburst`
	`2`	+Learning: `getComputedTextLength` causes synchronous layout thrashing and is a major bottleneck when called in loops (e.g. `renderText`).
	`3`	+Action: Leverage the `DataNode.extra` property to memoize expensive calculations like text width. This avoids repeated layout thrashing on re-renders when data hasn't changed.