Merge pull request #3744 from ag-grid/ag-14117/fix-tooltip-size-forcing-relayout

AG-14117 - Fix tooltip forced relayout + misc optimisations.

Author: alantreadway

packages/ag-charts-community/src/chart/data/dataModel.ts

@@ -889,7 +889,9 @@ export class DataModel<
             const columnScopes = new Set(def.scopes);
             const columnScope = first(def.scopes);
             const columnSource = sources.get(columnScope) as unknown[];
-            const column = columnSource.map((valueDatum, datumIndex) => {
+            const column = new Array<unknown>();
+            for (let datumIndex = 0; datumIndex < columnSource.length; datumIndex++) {
+                const valueDatum = columnSource[datumIndex];
                 const invalidKey = invalidKeys.get(columnScope)?.[datumIndex];
 
                 const result = processValue(def, valueDatum, datumIndex, def.scopes);
@@ -907,8 +909,8 @@ export class DataModel<
                     value = invalidValue;
                 }
 
-                return value;
-            });
+                column[datumIndex] = value;
+            }
 
             columns.push(column);
             allColumnScopes.push(columnScopes);

packages/ag-charts-community/src/chart/tooltip/tooltip.ts

@@ -5,6 +5,7 @@ import type { DOMManager } from '../../dom/domManager';
 import type { LocaleManager } from '../../locale/localeManager';
 import { type Bounds, type Placement, calculatePlacement } from '../../util/placement';
 import { BaseProperties } from '../../util/properties';
+import { SizeMonitor } from '../../util/sizeMonitor';
 import {
     ARRAY_OF,
     BOOLEAN,
@@ -372,7 +373,6 @@ export class Tooltip extends BaseProperties {
             }
 
             element.innerHTML = html;
-            this._elementSize = { width: element.clientWidth, height: element.clientHeight };
         } else if (element == null || element.innerHTML === '') {
             this.toggle(false);
             return;
@@ -454,9 +454,17 @@ export class Tooltip extends BaseProperties {
         }
 
         if (visible) {
-            // We can only measure the element when it's actually visible
-            // This removes a possible jump for the tooltip
-            this.updateTooltipPosition();
+            // Avoid reading the tooltip size immediately after a DOM mutation, wait for
+            // a natural layout before positioning the tooltip.
+            SizeMonitor.singleShot(this.element, (size) => {
+                if (!this._visible) return;
+
+                this._elementSize = size;
+
+                // We can only measure the element when it's actually visible
+                // This removes a possible jump for the tooltip
+                this.updateTooltipPosition();
+            });
         }
     }
 

packages/ag-charts-community/src/scene/shape/text.ts

@@ -94,7 +94,16 @@ export class Text<D = any> extends Shape<D> {
         const { fill, stroke, strokeWidth } = this;
         const { pixelRatio } = this.layerManager.canvas;
 
-        ctx.font = TextUtils.toFontString(this);
+        if (!fill && !(stroke != null && strokeWidth > 0)) {
+            // Short circuit early if nothing will be rendered.
+            return super.render(renderCtx);
+        }
+
+        const font = TextUtils.toFontString(this);
+        // Try to avoid this assignment, which typically always incurs a font switch cost.
+        if (ctx.font !== font) {
+            ctx.font = font;
+        }
         ctx.textAlign = this.textAlign;
         ctx.textBaseline = this.textBaseline;
 

packages/ag-charts-community/src/util/sizeMonitor.ts

@@ -20,6 +20,29 @@ export class SizeMonitor {
     private documentReady = false;
     private queuedObserveRequests: [HTMLElement, OnSizeChange][] = [];
 
+    static singleShot(element: HTMLElement, cb: OnSizeChange) {
+        if (typeof ResizeObserver === 'undefined') {
+            // Fallback to using clientWidth + clientHeight, which will force a layout.
+            cb({ width: element.clientWidth, height: element.clientHeight, pixelRatio: 1 }, element);
+            return;
+        }
+
+        const observer = new ResizeObserver((entries) => {
+            try {
+                for (const {
+                    contentRect: { width, height },
+                    target,
+                } of entries) {
+                    // Round to mimic Element.clientWidth + Element.clientHeight.
+                    cb({ width: Math.round(width), height: Math.round(height), pixelRatio: 1 }, target as HTMLElement);
+                }
+            } finally {
+                observer.disconnect();
+            }
+        });
+        observer.observe(element);
+    }
+
     constructor() {
         if (typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver((entries) => {

packages/ag-charts-enterprise/src/features/error-bar/__snapshots__/errorBar.test.ts.snap

@@ -4,7 +4,7 @@ exports[`ErrorBars AG-10525 should render tooltips with no errorbars 1`] = `
 NodeList [
   <div
     aria-hidden="true"
-    class="ag-charts-tooltip ag-charts-tooltip--no-interaction ag-charts-tooltip--arrow-bottom ag-charts-tooltip--wrap-hyphenate"
+    class="ag-charts-tooltip ag-charts-tooltip--no-interaction ag-charts-tooltip--wrap-hyphenate ag-charts-tooltip--arrow-bottom"
     data-presented-as-popover=""
     popover="manual"
     style="pointer-events: none; --top: 0px; --left: 0px;"
@@ -36,7 +36,7 @@ exports[`ErrorBars should render default tooltips 1`] = `
 NodeList [
   <div
     aria-hidden="true"
-    class="ag-charts-tooltip ag-charts-tooltip--no-interaction ag-charts-tooltip--arrow-bottom ag-charts-tooltip--wrap-hyphenate"
+    class="ag-charts-tooltip ag-charts-tooltip--no-interaction ag-charts-tooltip--wrap-hyphenate ag-charts-tooltip--arrow-bottom"
     data-presented-as-popover=""
     popover="manual"
     style="pointer-events: none; --top: 0px; --left: 0px;"