@elastic/charts 50.1.0 → 51.0.0

package/dist/chart_types/flame_chart/flame_api.d.ts

@@ -29,10 +29,11 @@ export interface ControlReceiverCallbacks {
  *   - label: array of N strings
  *   - value: Float64Array of N numbers, for tooltip value display
  *   - color: Float32Array of 4 * N numbers, eg. green[i] = color[4 * i + 1]
- *   - position0: Float32Array of 2 * N numbers with unit coordinates [x0, y0, x1, y1, ..., xN-1, yN-1]
- *   - position1: for now, the same typed array for position0 to be used
- *   - size0: Float32Array of N numbers with unit widths [width0, width1, ... , widthN-1]
- *   - size1: for now, the same typed array for size0 to be used
+ *   - position0: Tween from: Float32Array of 2 * N numbers with unit coordinates [x0, y0, x1, y1, ..., xN-1, yN-1]
+ *   - position1: Tween to: Float32Array of 2 * N numbers with unit coordinates [x0, y0, x1, y1, ..., xN-1, yN-1]
+ *   - size0: Tween from: Float32Array of N numbers with unit widths [width0, width1, ... , widthN-1]
+ *   - size1: Tween to: Float32Array of N numbers with unit widths [width0, width1, ... , widthN-1]
+ * If position0 === position1 and size0 === size1, then the nodes are not animated
  * @public
  */
 export interface ColumnarViewModel {

package/dist/chart_types/flame_chart/flame_api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flame_api.d.ts","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAgB,OAAO,EAAkB,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,KAAK,EAAkB,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1F;;;GAGG;AACH,oBAAY,kBAAkB,GAAG,MAAM,IAAI,CAAC;AAE5C;;;GAGG;AACH,oBAAY,gBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,YAAY,CAAC;IACxB,SAAS,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,KAAK,CAAE,SAAQ,IAAI,EAAE,qBAAqB;IACzF,QAAQ,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IACjC,SAAS,EAAE,OAAO,SAAS,CAAC,KAAK,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,uBAAuB,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAC3D,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,QAAA,MAAM,UAAU,qNAWf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,yNAYjB,CAAC"}
+{"version":3,"file":"flame_api.d.ts","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAgB,OAAO,EAAkB,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,KAAK,EAAkB,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1F;;;GAGG;AACH,oBAAY,kBAAkB,GAAG,MAAM,IAAI,CAAC;AAE5C;;;GAGG;AACH,oBAAY,gBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,YAAY,CAAC;IACxB,SAAS,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,KAAK,CAAE,SAAQ,IAAI,EAAE,qBAAqB;IACzF,QAAQ,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IACjC,SAAS,EAAE,OAAO,SAAS,CAAC,KAAK,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,uBAAuB,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAC3D,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,QAAA,MAAM,UAAU,qNAWf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,yNAYjB,CAAC"}

package/dist/chart_types/flame_chart/flame_api.js.map

@@ -1 +1 @@
-{"version":3,"file":"flame_api.js","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,wBAA+B;AAG/B,mDAAiD;AACjD,yDAAiF;AACjF,6CAA0F;AA4D1F,IAAM,UAAU,GAAG,IAAA,2BAAY,GAAa,CAC1C;IACE,SAAS,EAAE,aAAS,CAAC,KAAK;IAC1B,QAAQ,EAAE,oBAAQ,CAAC,MAAM;CAC1B,EACD;IACE,aAAa,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAA/B,CAA+B;IACrD,WAAW,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC;IACrB,cAAc,EAAE,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,EAAT,CAAS;IAChC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;CAC3B,CACF,CAAC;AAMK,IAAM,KAAK,GAAG,UACnB,KAMC;IAEO,IAAA,QAAQ,GAAgB,UAAU,SAA1B,EAAE,SAAS,GAAK,UAAU,UAAf,CAAgB;IAC3C,IAAA,6BAAc,iCAAoB,QAAQ,GAAK,IAAA,uBAAc,EAAC,KAAK,CAAC,GAAK,SAAS,EAAG,CAAC;IACtF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAZW,QAAA,KAAK,SAYhB"}
+{"version":3,"file":"flame_api.js","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,wBAA+B;AAG/B,mDAAiD;AACjD,yDAAiF;AACjF,6CAA0F;AA6D1F,IAAM,UAAU,GAAG,IAAA,2BAAY,GAAa,CAC1C;IACE,SAAS,EAAE,aAAS,CAAC,KAAK;IAC1B,QAAQ,EAAE,oBAAQ,CAAC,MAAM;CAC1B,EACD;IACE,aAAa,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAA/B,CAA+B;IACrD,WAAW,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC;IACrB,cAAc,EAAE,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,EAAT,CAAS;IAChC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;CAC3B,CACF,CAAC;AAMK,IAAM,KAAK,GAAG,UACnB,KAMC;IAEO,IAAA,QAAQ,GAAgB,UAAU,SAA1B,EAAE,SAAS,GAAK,UAAU,UAAf,CAAgB;IAC3C,IAAA,6BAAc,iCAAoB,QAAQ,GAAK,IAAA,uBAAc,EAAC,KAAK,CAAC,GAAK,SAAS,EAAG,CAAC;IACtF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAZW,QAAA,KAAK,SAYhB"}

package/dist/chart_types/flame_chart/flame_chart.js

@@ -95,6 +95,7 @@ var SHOULD_DISABLE_WOBBLE = (typeof process === 'object' && process.env && proce
 var WOBBLE_DURATION = SHOULD_DISABLE_WOBBLE ? 0 : 1000;
 var WOBBLE_REPEAT_COUNT = 2;
 var WOBBLE_FREQUENCY = SHOULD_DISABLE_WOBBLE ? 0 : 2 * Math.PI * (WOBBLE_REPEAT_COUNT / WOBBLE_DURATION);
+var NODE_TWEEN_DURATION_MS = 500;
 var unitRowPitch = function (position) { return (position.length >= 4 ? position[1] - position[3] : 1); };
 var initialPixelRowPitch = function () { return 16; };
 var specValueFormatter = function (d) { return d; };
@@ -168,9 +169,15 @@ var FlameComponent = (function (_super) {
         _this.pinchZoomSetInterval = NaN;
         _this.pointerX = NaN;
         _this.pointerY = NaN;
+        _this.pinnedPointerX = NaN;
+        _this.pinnedPointerY = NaN;
+        _this.tooltipPinned = false;
+        _this.tooltipSelectedSeries = [];
         _this.hoverIndex = NaN;
+        _this.tooltipValues = [];
         _this.animationRafId = NaN;
-        _this.prevT = NaN;
+        _this.prevFocusTime = NaN;
+        _this.prevNodeTweenTime = NaN;
         _this.startOfDragX = NaN;
         _this.startOfDragY = NaN;
         _this.startOfDragFocusLeft = NaN;
@@ -183,6 +190,24 @@ var FlameComponent = (function (_super) {
         _this.focusedMatchIndex = NaN;
         _this.wobbleTimeLeft = 0;
         _this.wobbleIndex = NaN;
+        _this.pinTooltip = function (pinned) {
+            if (!pinned) {
+                _this.unpinTooltip(true);
+                return;
+            }
+            _this.tooltipPinned = true;
+            _this.tooltipSelectedSeries = _this.tooltipValues;
+        };
+        _this.toggleSelectedTooltipItem = function (tooltipValue) {
+            if (!_this.tooltipPinned)
+                return;
+            _this.tooltipSelectedSeries = _this.tooltipSelectedSeries.length === 0 ? [tooltipValue] : [];
+            _this.setState({});
+        };
+        _this.setSelectedTooltipItems = function (tooltipValues) {
+            _this.tooltipSelectedSeries = tooltipValues;
+            _this.setState({});
+        };
         _this.setupDevicePixelRatioChangeListener = function () {
             window.matchMedia("(resolution: ".concat(window.devicePixelRatio, "dppx)")).addEventListener('change', function () {
                 _this.setState({});
@@ -212,9 +237,13 @@ var FlameComponent = (function (_super) {
             _this.ensurePickTexture();
             _this.drawCanvas();
         };
-        _this.componentDidUpdate = function () {
+        _this.componentDidUpdate = function (_a) {
+            var chartDimensions = _a.chartDimensions;
             if (!_this.ctx)
                 _this.tryCanvasContext();
+            if (_this.tooltipPinned && _this.chartDimensionsChanged(chartDimensions)) {
+                _this.unpinTooltip();
+            }
             _this.bindControls();
             _this.ensureTextureAndDraw();
         };
@@ -227,9 +256,9 @@ var FlameComponent = (function (_super) {
         };
         _this.getHoveredDatumIndex = function () {
             var pr = window.devicePixelRatio * _this.pinchZoomScale;
-            return {
-                datumIndex: _this.datumAtXY(pr * _this.pointerX, pr * (_this.props.chartDimensions.height - _this.pointerY)),
-            };
+            var x = _this.tooltipPinned ? _this.pinnedPointerX : _this.pointerX;
+            var y = _this.tooltipPinned ? _this.pinnedPointerY : _this.pointerY;
+            return _this.datumAtXY(pr * x, pr * (_this.props.chartDimensions.height - y));
         };
         _this.getDragDistanceX = function () { return _this.pointerX - _this.startOfDragX; };
         _this.getDragDistanceY = function () { return -(_this.pointerY - _this.startOfDragY); };
@@ -241,20 +270,8 @@ var FlameComponent = (function (_super) {
             if (!_this.isDragging(e)) {
                 e.stopPropagation();
                 _this.updatePointerLocation(e);
-                var hovered = _this.getHoveredDatumIndex();
-                var prevHoverIndex = _this.hoverIndex >= 0 ? _this.hoverIndex : NaN;
-                if (hovered) {
-                    _this.hoverIndex = hovered.datumIndex;
-                    if (!Object.is(_this.hoverIndex, prevHoverIndex)) {
-                        if (Number.isFinite(hovered.datumIndex)) {
-                            _this.props.onElementOver([{ vmIndex: hovered.datumIndex }]);
-                        }
-                        else {
-                            _this.hoverIndex = NaN;
-                            _this.props.onElementOut();
-                        }
-                    }
-                    _this.setState({});
+                if (!_this.tooltipPinned) {
+                    _this.updateHoverIndex();
                 }
             }
         };
@@ -311,43 +328,84 @@ var FlameComponent = (function (_super) {
         };
         _this.handleMouseDown = function (e) {
             e.stopPropagation();
+            if (e.button === constants_1.SECONDARY_BUTTON || e.ctrlKey)
+                return;
             if (Number.isNaN(_this.pointerX + _this.pointerY))
                 return;
+            if (_this.tooltipPinned)
+                return;
             _this.resetDrag();
             window.addEventListener('mousemove', _this.handleMouseDragMove, { passive: true });
             window.addEventListener('mouseup', _this.handleMouseUp, { passive: true });
         };
+        _this.handleContextMenu = function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (_this.tooltipPinned) {
+                _this.handleUnpinningTooltip();
+                return;
+            }
+            if (!Number.isFinite(_this.getHoveredDatumIndex())) {
+                return;
+            }
+            window.addEventListener('keyup', _this.handleKeyUp);
+            window.addEventListener('click', _this.handleUnpinningTooltip);
+            window.addEventListener('visibilitychange', _this.handleUnpinningTooltip);
+            _this.pinTooltip(true);
+            _this.setState({});
+        };
         _this.handleMouseUp = function (e) {
             e.stopPropagation();
             window.removeEventListener('mousemove', _this.handleMouseDragMove);
             window.removeEventListener('mouseup', _this.handleMouseUp);
+            if (_this.tooltipPinned) {
+                _this.unpinTooltip();
+                _this.clearDrag();
+                return;
+            }
             _this.updatePointerLocation(e);
             var dragDistanceX = _this.getDragDistanceX();
             var dragDistanceY = _this.getDragDistanceY();
             if (!dragDistanceX && !dragDistanceY) {
-                var hovered = _this.getHoveredDatumIndex();
+                var hoveredDatumIndex = _this.getHoveredDatumIndex();
                 var isDoubleClick = e.detail > 1;
-                var hasClickedOnRectangle = Number.isFinite(hovered === null || hovered === void 0 ? void 0 : hovered.datumIndex);
+                var hasClickedOnRectangle = Number.isFinite(hoveredDatumIndex);
                 var mustFocus = SINGLE_CLICK_EMPTY_FOCUS || isDoubleClick !== hasClickedOnRectangle;
-                if (mustFocus && !_this.pointerInMinimap(_this.pointerX, _this.pointerY)) {
-                    var datumIndex = hovered.datumIndex;
-                    var rect = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, datumIndex);
-                    _this.navigator.add(__assign(__assign({}, rect), { index: datumIndex }));
-                    _this.focusOnNode(datumIndex);
-                    _this.props.onElementClick([{ vmIndex: datumIndex }]);
+                var isContextClick = e.button === constants_1.SECONDARY_BUTTON || e.ctrlKey;
+                if (mustFocus && !isContextClick && !_this.pointerInMinimap(_this.pointerX, _this.pointerY)) {
+                    var rect = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, hoveredDatumIndex);
+                    _this.navigator.add(__assign(__assign({}, rect), { index: hoveredDatumIndex }));
+                    _this.focusOnNode(hoveredDatumIndex);
+                    _this.props.onElementClick([{ vmIndex: hoveredDatumIndex }]);
                 }
             }
             _this.clearDrag();
             _this.setState({});
         };
+        _this.handleUnpinningTooltip = function () {
+            window.removeEventListener('keyup', _this.handleKeyUp);
+            window.removeEventListener('click', _this.handleUnpinningTooltip);
+            window.removeEventListener('visibilitychange', _this.handleUnpinningTooltip);
+            _this.pinTooltip(false);
+        };
+        _this.handleKeyUp = function (_a) {
+            var key = _a.key;
+            if (!FlameComponent.watchedKeys.includes(key))
+                return;
+            window.removeEventListener('keyup', _this.handleKeyUp);
+            _this.unpinTooltip();
+        };
         _this.handleMouseLeave = function (e) {
             e.stopPropagation();
-            _this.smartDraw();
+            if (!_this.tooltipPinned) {
+                _this.smartDraw();
+            }
         };
         _this.preventScroll = function (e) { return e.metaKey === IS_META_REQUIRED_FOR_ZOOM && e.preventDefault(); };
         _this.handleWheel = function (e) {
             if (e.metaKey !== IS_META_REQUIRED_FOR_ZOOM)
                 return;
+            _this.unpinTooltip();
             _this.updatePointerLocation(e);
             var _a = _this.currentFocus, x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
             var wheelDelta = -e.deltaY;
@@ -460,7 +518,6 @@ var FlameComponent = (function (_super) {
             _this.searchForText(false);
         };
         _this.handleEscapeKey = function (e) {
-            e.stopPropagation();
             if (e.key === 'Escape') {
                 _this.clearSearchText();
             }
@@ -493,7 +550,7 @@ var FlameComponent = (function (_super) {
                 }
                 if (hitEnumerator >= 0) {
                     _this.targetFocus = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, datumIndex);
-                    _this.prevT = NaN;
+                    _this.prevFocusTime = NaN;
                     _this.hoverIndex = NaN;
                     _this.wobbleTimeLeft = WOBBLE_DURATION;
                     _this.wobbleIndex = datumIndex;
@@ -537,18 +594,17 @@ var FlameComponent = (function (_super) {
                 margin: 0,
                 border: 0,
                 position: 'absolute',
-                cursor: _this.startOfDragX ? 'grab' : _this.hoverIndex >= 0 ? 'pointer' : constants_1.DEFAULT_CSS_CURSOR,
+                cursor: _this.getActiveCursor(),
             };
             var dpr = window.devicePixelRatio * _this.pinchZoomScale;
             var canvasWidth = width * dpr;
             var canvasHeight = height * dpr;
-            var columns = _this.props.columnarViewModel;
             var hitCount = _this.currentSearchHitCount;
             var _c = theme.navigation, textColor = _c.textColor, buttonDisabledTextColor = _c.buttonDisabledTextColor, buttonBackgroundColor = _c.buttonBackgroundColor, buttonDisabledBackgroundColor = _c.buttonDisabledBackgroundColor, buttonTextColor = _c.buttonTextColor;
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("figure", { "aria-labelledby": a11ySettings.labelId, "aria-describedby": a11ySettings.descriptionId },
                     react_1.default.createElement("canvas", { ref: _this.glCanvasRef, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, style: style, role: "presentation" }),
-                    react_1.default.createElement("canvas", { ref: forwardStageRef, tabIndex: 0, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, onMouseMove: _this.handleMouseHoverMove, onMouseDown: _this.handleMouseDown, onMouseLeave: _this.handleMouseLeave, onKeyPress: _this.handleEnterKey, onKeyUp: _this.handleEscapeKey, onWheel: _this.handleWheel, style: __assign(__assign({}, style), { outline: 'none' }), role: "presentation" })),
+                    react_1.default.createElement("canvas", { ref: forwardStageRef, tabIndex: 0, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, onMouseMove: _this.handleMouseHoverMove, onMouseDown: _this.handleMouseDown, onContextMenu: _this.props.pinnableTooltip ? _this.handleContextMenu : undefined, onMouseLeave: _this.handleMouseLeave, onKeyPress: _this.handleEnterKey, onKeyUp: _this.handleEscapeKey, onWheel: _this.handleWheel, style: __assign(__assign({}, style), { outline: 'none' }), role: "presentation" })),
                 react_1.default.createElement("div", { style: {
                         position: 'absolute',
                         transform: "translateY(".concat(_this.props.chartDimensions.height - draw_a_frame_1.PADDING_BOTTOM + 4, "px)"),
@@ -681,22 +737,11 @@ var FlameComponent = (function (_super) {
                             transition: 'opacity 250ms ease-in-out',
                             color: textColor,
                         } }, "Match".concat(Number.isNaN(_this.focusedMatchIndex) ? 'es:' : ": ".concat(_this.focusedMatchIndex + 1, " /"), " ").concat(hitCount))),
-                react_1.default.createElement(tooltip_1.BasicTooltip, { onPointerMove: function () { return ({ type: mouse_1.ON_POINTER_MOVE, position: { x: NaN, y: NaN }, time: NaN }); }, position: { x: _this.pointerX, y: _this.pointerY, width: 0, height: 0 }, visible: _this.props.tooltipRequired && _this.hoverIndex >= 0 && !(_this.wobbleTimeLeft > 0), info: {
+                react_1.default.createElement(tooltip_1.BasicTooltip, { canPinTooltip: true, onPointerMove: function () { return ({ type: mouse_1.ON_POINTER_MOVE, position: { x: NaN, y: NaN }, time: NaN }); }, position: _this.tooltipPinned
+                        ? { x: _this.pinnedPointerX, y: _this.pinnedPointerY, width: 0, height: 0 }
+                        : { x: _this.pointerX, y: _this.pointerY, width: 0, height: 0 }, pinned: _this.tooltipPinned, selected: _this.tooltipSelectedSeries, pinTooltip: _this.pinTooltip, toggleSelectedTooltipItem: _this.toggleSelectedTooltipItem, setSelectedTooltipItems: _this.setSelectedTooltipItems, visible: _this.tooltipPinned || (_this.props.tooltipRequired && _this.hoverIndex >= 0 && !(_this.wobbleTimeLeft > 0)), info: {
                         header: null,
-                        values: _this.hoverIndex >= 0
-                            ? [
-                                {
-                                    label: columns.label[_this.hoverIndex],
-                                    color: getColor(columns.color, _this.hoverIndex),
-                                    isHighlighted: false,
-                                    isVisible: true,
-                                    seriesIdentifier: { specId: '', key: '' },
-                                    value: columns.value[_this.hoverIndex],
-                                    formattedValue: "".concat(specValueFormatter(columns.value[_this.hoverIndex])),
-                                    valueAccessor: _this.hoverIndex,
-                                },
-                            ]
-                            : [],
+                        values: _this.tooltipValues,
                     }, getChartContainerRef: _this.props.containerRef }),
                 debugHistory && (react_1.default.createElement("div", { style: {
                         position: 'absolute',
@@ -714,8 +759,12 @@ var FlameComponent = (function (_super) {
                 return;
             var renderFrame = (0, draw_a_frame_1.drawFrame)(_this.ctx, _this.glContext, _this.props.chartDimensions.width, _this.props.chartDimensions.height, _this.getMinimapWidth(), _this.getMinimapHeight(), _this.getMinimapLeft(), _this.getMinimapTop(), window.devicePixelRatio * _this.pinchZoomScale, _this.props.columnarViewModel, _this.pickTexture, _this.glResources.pickTextureRenderer, _this.glResources.roundedRectRenderer, _this.hoverIndex, unitRowPitch(_this.props.columnarViewModel.position1), _this.currentColor, _this.props.theme);
             var anim = function (t) {
-                var msDeltaT = Number.isNaN(_this.prevT) ? 0 : t - _this.prevT;
-                _this.prevT = t;
+                var focusTimeDeltaMs = Number.isNaN(_this.prevFocusTime) ? 0 : t - _this.prevFocusTime;
+                _this.prevFocusTime = t;
+                if (_this.prevNodeTweenTime === Infinity)
+                    _this.prevNodeTweenTime = t;
+                var nodeTweenTime = (0, common_1.clamp)((t - _this.prevNodeTweenTime) / NODE_TWEEN_DURATION_MS, 0, 1);
+                var nodeTweenInProgress = nodeTweenTime < 1;
                 var dx0 = _this.targetFocus.x0 - _this.currentFocus.x0;
                 var dx1 = _this.targetFocus.x1 - _this.currentFocus.x1;
                 var dy0 = _this.targetFocus.y0 - _this.currentFocus.y0;
@@ -725,22 +774,23 @@ var FlameComponent = (function (_super) {
                 var relativeExpansionX = Math.max(1, (currentExtentX + dx1 - dx0) / currentExtentX);
                 var relativeExpansionY = Math.max(1, (currentExtentX + dy1 - dy0) / currentExtentY);
                 var jointRelativeExpansion = (relativeExpansionX + relativeExpansionY) / 2;
-                var convergenceRateX = Math.min(1, msDeltaT * RECURRENCE_ALPHA_PER_MS_X) / jointRelativeExpansion;
-                var convergenceRateY = Math.min(1, msDeltaT * RECURRENCE_ALPHA_PER_MS_Y) / jointRelativeExpansion;
+                var convergenceRateX = Math.min(1, focusTimeDeltaMs * RECURRENCE_ALPHA_PER_MS_X) / jointRelativeExpansion;
+                var convergenceRateY = Math.min(1, focusTimeDeltaMs * RECURRENCE_ALPHA_PER_MS_Y) / jointRelativeExpansion;
                 _this.currentFocus.x0 += convergenceRateX * dx0;
                 _this.currentFocus.x1 += convergenceRateX * dx1;
                 _this.currentFocus.y0 += convergenceRateY * dy0;
                 _this.currentFocus.y1 += convergenceRateY * dy1;
-                _this.wobbleTimeLeft -= msDeltaT;
-                var shouldWobble = _this.wobbleTimeLeft > 0;
+                _this.wobbleTimeLeft -= focusTimeDeltaMs;
+                var wobbleAnimationInProgress = _this.wobbleTimeLeft > 0;
                 var timeFromWobbleStart = (0, common_1.clamp)(WOBBLE_DURATION - _this.wobbleTimeLeft, 0, WOBBLE_DURATION);
-                renderFrame([_this.currentFocus.x0, _this.currentFocus.x1, _this.currentFocus.y0, _this.currentFocus.y1], _this.wobbleIndex, shouldWobble ? 0.01 + 0.99 * (0.5 - 0.5 * Math.cos(timeFromWobbleStart * WOBBLE_FREQUENCY)) : 0);
+                renderFrame([_this.currentFocus.x0, _this.currentFocus.x1, _this.currentFocus.y0, _this.currentFocus.y1], _this.wobbleIndex, wobbleAnimationInProgress ? 0.01 + 0.99 * (0.5 - 0.5 * Math.cos(timeFromWobbleStart * WOBBLE_FREQUENCY)) : 0, nodeTweenTime);
                 var maxDiff = Math.max(Math.abs(dx0), Math.abs(dx1), Math.abs(dy0), Math.abs(dy1));
-                if (maxDiff > 1e-12 || shouldWobble) {
+                var focusAnimationInProgress = maxDiff > 1e-12;
+                if (focusAnimationInProgress || wobbleAnimationInProgress || nodeTweenInProgress) {
                     _this.animationRafId = window.requestAnimationFrame(anim);
                 }
                 else {
-                    _this.prevT = NaN;
+                    _this.prevFocusTime = NaN;
                     _this.currentFocus.x0 = _this.targetFocus.x0;
                     _this.currentFocus.x1 = _this.targetFocus.x1;
                     _this.currentFocus.y0 = _this.targetFocus.y0;
@@ -840,6 +890,8 @@ var FlameComponent = (function (_super) {
         _this.pinchZoomScale = (_b = (_a = browserRootWindow().visualViewport) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1;
         _this.setupViewportScaleChangeListener();
         _this.currentColor = columns.color;
+        _this.prevNodeTweenTime =
+            columns.position0 === columns.position1 && columns.size0 === columns.size1 ? -Infinity : Infinity;
         return _this;
     }
     FlameComponent.prototype.focusOnNavElement = function (element) {
@@ -883,7 +935,7 @@ var FlameComponent = (function (_super) {
     FlameComponent.prototype.wobble = function (nodeIndex) {
         this.wobbleTimeLeft = WOBBLE_DURATION;
         this.wobbleIndex = nodeIndex;
-        this.prevT = NaN;
+        this.prevFocusTime = NaN;
         this.hoverIndex = NaN;
         this.setState({});
     };
@@ -894,12 +946,73 @@ var FlameComponent = (function (_super) {
         var _a;
         (_a = this.props.containerRef().current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', this.preventScroll);
     };
+    FlameComponent.prototype.chartDimensionsChanged = function (_a) {
+        var height = _a.height, width = _a.width;
+        return this.props.chartDimensions.height !== height || this.props.chartDimensions.width !== width;
+    };
     FlameComponent.prototype.updatePointerLocation = function (e) {
         if (!this.props.forwardStageRef.current || !this.ctx)
             return;
         var box = this.props.forwardStageRef.current.getBoundingClientRect();
         this.pointerX = e.clientX - box.left;
         this.pointerY = e.clientY - box.top;
+        if (!this.tooltipPinned) {
+            this.pinnedPointerX = this.pointerX;
+            this.pinnedPointerY = this.pointerY;
+        }
+    };
+    FlameComponent.prototype.unpinTooltip = function (redraw) {
+        if (redraw === void 0) { redraw = false; }
+        this.pinnedPointerX = NaN;
+        this.pinnedPointerY = NaN;
+        this.tooltipPinned = false;
+        this.tooltipSelectedSeries = [];
+        this.updateHoverIndex();
+        if (redraw) {
+            this.smartDraw();
+        }
+    };
+    FlameComponent.prototype.updateHoverIndex = function () {
+        var hoveredDatumIndex = this.getHoveredDatumIndex();
+        var prevHoverIndex = this.hoverIndex >= 0 ? this.hoverIndex : NaN;
+        this.hoverIndex = hoveredDatumIndex;
+        if (!Object.is(this.hoverIndex, prevHoverIndex)) {
+            if (Number.isFinite(hoveredDatumIndex)) {
+                this.props.onElementOver([{ vmIndex: hoveredDatumIndex }]);
+            }
+            else {
+                this.hoverIndex = NaN;
+                this.props.onElementOut();
+            }
+        }
+        if (prevHoverIndex !== this.hoverIndex) {
+            var columns = this.props.columnarViewModel;
+            this.tooltipValues =
+                this.hoverIndex >= 0
+                    ? [
+                        {
+                            label: columns.label[this.hoverIndex],
+                            color: getColor(columns.color, this.hoverIndex),
+                            isHighlighted: false,
+                            isVisible: true,
+                            seriesIdentifier: { specId: '', key: '' },
+                            value: columns.value[this.hoverIndex],
+                            formattedValue: "".concat(specValueFormatter(columns.value[this.hoverIndex])),
+                            valueAccessor: this.hoverIndex,
+                        },
+                    ]
+                    : [];
+        }
+        this.setState({});
+    };
+    FlameComponent.prototype.getActiveCursor = function () {
+        if (this.tooltipPinned)
+            return constants_1.DEFAULT_CSS_CURSOR;
+        if (this.startOfDragX)
+            return 'grabbing';
+        if (this.hoverIndex >= 0)
+            return 'pointer';
+        return 'grab';
     };
     FlameComponent.prototype.smartDraw = function () {
         if (Number.isFinite(this.hoverIndex)) {
@@ -911,12 +1024,14 @@ var FlameComponent = (function (_super) {
         }
     };
     FlameComponent.displayName = 'Flame';
+    FlameComponent.watchedKeys = ['Escape'];
     return FlameComponent;
 }(react_1.default.Component));
 var mapStateToProps = function (state) {
     var _a, _b, _c, _d, _e, _f, _g;
     var flameSpec = (0, utils_1.getSpecsFromStore)(state.specs, __1.ChartType.Flame, specs_1.SpecType.Series)[0];
     var settingsSpec = (0, get_settings_spec_1.getSettingsSpecSelector)(state);
+    var tooltipSpec = (0, get_tooltip_spec_1.getTooltipSpecSelector)(state);
     return {
         theme: (0, get_chart_theme_1.getChartThemeSelector)(state).flamegraph,
         debugHistory: settingsSpec.debug,
@@ -925,7 +1040,8 @@ var mapStateToProps = function (state) {
         animationDuration: (_c = flameSpec === null || flameSpec === void 0 ? void 0 : flameSpec.animation.duration) !== null && _c !== void 0 ? _c : 0,
         chartDimensions: state.parentDimensions,
         a11ySettings: (0, get_accessibility_config_1.getA11ySettingsSelector)(state),
-        tooltipRequired: (0, get_tooltip_spec_1.getTooltipSpecSelector)(state).type !== specs_1.TooltipType.None,
+        tooltipRequired: tooltipSpec.type !== specs_1.TooltipType.None,
+        pinnableTooltip: tooltipSpec.actions.length > 0,
         onElementOver: (_d = settingsSpec.onElementOver) !== null && _d !== void 0 ? _d : (function () { }),
         onElementClick: (_e = settingsSpec.onElementClick) !== null && _e !== void 0 ? _e : (function () { }),
         onElementOut: (_f = settingsSpec.onElementOut) !== null && _f !== void 0 ? _f : (function () { }),