@elastic/charts 46.2.0 → 46.5.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [46.5.0](https://github.com/elastic/elastic-charts/compare/v46.4.0...v46.5.0) (2022-05-26)
+
+
+### Features
+
+* **flame:** context loss handling ([#1682](https://github.com/elastic/elastic-charts/issues/1682)) ([0e32209](https://github.com/elastic/elastic-charts/commit/0e3220955661348c6cf02d4e379ddec340f0ccfc))
+
+# [46.4.0](https://github.com/elastic/elastic-charts/compare/v46.3.0...v46.4.0) (2022-05-24)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @elastic/eui to v58 ([#1677](https://github.com/elastic/elastic-charts/issues/1677)) ([69ad62b](https://github.com/elastic/elastic-charts/commit/69ad62bf57d880f45a5250b8ccfb75da54c8f205))
+
+
+### Features
+
+* **flame:** minimap pan ([#1678](https://github.com/elastic/elastic-charts/issues/1678)) ([fc81ada](https://github.com/elastic/elastic-charts/commit/fc81ada306c042b751a523588bf0eead43881327))
+
+# [46.3.0](https://github.com/elastic/elastic-charts/compare/v46.2.0...v46.3.0) (2022-05-19)
+
+
+### Features
+
+* **flame:** search and other utilities ([#1676](https://github.com/elastic/elastic-charts/issues/1676)) ([b8eaa1f](https://github.com/elastic/elastic-charts/commit/b8eaa1f6266e150cf7153c30c5d7a1c6e21bbac4))
+
 # [46.2.0](https://github.com/elastic/elastic-charts/compare/v46.1.0...v46.2.0) (2022-05-18)
 
 

package/dist/chart_types/flame_chart/flame_chart.js

@@ -52,6 +52,7 @@ var redux_1 = require("redux");
 var __1 = require("..");
 var constants_1 = require("../../common/constants");
 var kingly_1 = require("../../common/kingly");
+var webgl_constants_1 = require("../../common/webgl_constants");
 var tooltip_1 = require("../../components/tooltip/tooltip");
 var specs_1 = require("../../specs");
 var chart_1 = require("../../state/actions/chart");
@@ -68,13 +69,19 @@ var types_1 = require("./types");
 var PINCH_ZOOM_CHECK_INTERVAL_MS = 100;
 var SIDE_OVERSHOOT_RATIO = 0.05;
 var RECURRENCE_ALPHA_PER_MS_X = 0.01;
-var RECURRENCE_ALPHA_PER_MS_Y = 0.01;
+var RECURRENCE_ALPHA_PER_MS_Y = 0.0062;
 var SINGLE_CLICK_EMPTY_FOCUS = true;
 var IS_META_REQUIRED_FOR_ZOOM = false;
 var ZOOM_SPEED = 0.0015;
 var DEEPEST_ZOOM_RATIO = 1e-7;
 var ZOOM_FROM_EDGE_BAND = 16;
+var ZOOM_FROM_EDGE_BAND_LEFT = ZOOM_FROM_EDGE_BAND + draw_a_frame_1.PADDING_LEFT;
+var ZOOM_FROM_EDGE_BAND_RIGHT = ZOOM_FROM_EDGE_BAND + draw_a_frame_1.PADDING_RIGHT;
+var ZOOM_FROM_EDGE_BAND_TOP = ZOOM_FROM_EDGE_BAND + draw_a_frame_1.PADDING_TOP;
+var ZOOM_FROM_EDGE_BAND_BOTTOM = ZOOM_FROM_EDGE_BAND + draw_a_frame_1.PADDING_BOTTOM;
 var LEFT_MOUSE_BUTTON = 1;
+var MINIMAP_SIZE_RATIO_X = 3;
+var MINIMAP_SIZE_RATIO_Y = 3;
 var unitRowPitch = function (position) { return (position.length >= 4 ? position[1] - position[3] : 1); };
 var initialPixelRowPitch = function () { return 16; };
 var specValueFormatter = function (d) { return d; };
@@ -93,21 +100,21 @@ var columnToRowPositions = function (_a, i) {
         y1: position1[i * 2 + 1] + unitRowPitch(position1),
     });
 };
-var focusRect = function (columnarViewModel, chartHeight, drilldownDatumIndex, drilldownTimestamp) {
-    var _a = columnToRowPositions(columnarViewModel, drilldownDatumIndex || 0), x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
+var focusForArea = function (chartHeight, _a) {
+    var x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
     var sideOvershoot = SIDE_OVERSHOOT_RATIO * (x1 - x0);
     var unitHeight = (chartHeight / initialPixelRowPitch()) * (y1 - y0);
     var intendedY0 = y1 - unitHeight;
     var bottomOvershoot = Math.max(0, -intendedY0);
     var top = Math.min(1, y1 + bottomOvershoot);
     return {
-        timestamp: drilldownTimestamp,
         x0: Math.max(0, x0 - sideOvershoot),
         x1: Math.min(1, x1 + sideOvershoot),
         y0: Math.max(0, intendedY0),
         y1: Math.min(1, top),
     };
 };
+var focusRect = function (columnarViewModel, chartHeight, drilldownDatumIndex, drilldownTimestamp) { return (__assign({ timestamp: drilldownTimestamp }, focusForArea(chartHeight, columnToRowPositions(columnarViewModel, drilldownDatumIndex || 0)))); };
 var getColor = function (c, i) {
     var r = Math.round(255 * c[4 * i]);
     var g = Math.round(255 * c[4 * i + 1]);
@@ -119,14 +126,29 @@ var colorToDatumIndex = function (pixel) {
     var isEmptyArea = pixel[0] + pixel[1] + pixel[2] + pixel[3] < shaders_1.GEOM_INDEX_OFFSET;
     return isEmptyArea ? NaN : pixel[3] + 256 * (pixel[2] + 256 * (pixel[1] + 256 * pixel[0])) - shaders_1.GEOM_INDEX_OFFSET;
 };
+var getRegExp = function (searchString) {
+    var regex;
+    try {
+        regex = new RegExp(searchString);
+    }
+    catch (_a) {
+        return new RegExp('iIUiUYIuiGjhG678987gjhgfytr678576');
+    }
+    return regex;
+};
 var FlameComponent = (function (_super) {
     __extends(FlameComponent, _super);
     function FlameComponent(props) {
         var _this = _super.call(this, props) || this;
         _this.startOfDragX = NaN;
-        _this.startOfDragX0 = NaN;
         _this.startOfDragY = NaN;
-        _this.startOfDragY0 = NaN;
+        _this.startOfDragFocusLeft = NaN;
+        _this.startOfDragFocusTop = NaN;
+        _this.currentSearchString = '';
+        _this.currentSearchHitCount = 0;
+        _this.caseSensitive = false;
+        _this.useRegex = false;
+        _this.focusedMatchIndex = NaN;
         _this.setupDevicePixelRatioChangeListener = function () {
             window.matchMedia("(resolution: " + window.devicePixelRatio + "dppx)").addEventListener('change', function () {
                 _this.setState({});
@@ -151,11 +173,18 @@ var FlameComponent = (function (_super) {
             _this.setupDevicePixelRatioChangeListener();
             (_a = _this.props.containerRef().current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', _this.preventScroll, { passive: false });
         };
+        _this.ensureTextureAndDraw = function () {
+            _this.ensurePickTexture();
+            _this.drawCanvas();
+        };
         _this.componentDidUpdate = function () {
             if (!_this.ctx)
                 _this.tryCanvasContext();
-            _this.ensurePickTexture();
-            _this.drawCanvas();
+            _this.ensureTextureAndDraw();
+        };
+        _this.pointerInMinimap = function (x, y) {
+            return x === (0, common_1.clamp)(x, _this.getMinimapLeft(), _this.getMinimapLeft() + _this.getMinimapWidth()) &&
+                y === (0, common_1.clamp)(y, _this.getMinimapTop(), _this.getMinimapTop() + _this.getMinimapHeight());
         };
         _this.datumAtXY = function (x, y) {
             return _this.glContext ? colorToDatumIndex((0, kingly_1.readPixel)(_this.glContext, x, y)) : NaN;
@@ -198,42 +227,47 @@ var FlameComponent = (function (_super) {
             e.stopPropagation();
             _this.updatePointerLocation(e);
             if (_this.isDragging(e)) {
+                var dragInMinimap = _this.pointerInMinimap(_this.startOfDragX, _this.startOfDragY);
+                var focusMoveDirection = dragInMinimap ? 1 : -1;
                 var _a = _this.currentFocus, x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
                 var focusWidth = x1 - x0;
                 var focusHeight = y1 - y0;
-                if (Number.isNaN(_this.startOfDragX0))
-                    _this.startOfDragX0 = x0;
-                if (Number.isNaN(_this.startOfDragY0))
-                    _this.startOfDragY0 = y0;
+                if (Number.isNaN(_this.startOfDragFocusLeft))
+                    _this.startOfDragFocusLeft = x0;
+                if (Number.isNaN(_this.startOfDragFocusTop))
+                    _this.startOfDragFocusTop = y0;
                 var dragDistanceX = _this.getDragDistanceX();
                 var dragDistanceY = _this.getDragDistanceY();
                 var _b = _this.props.chartDimensions, chartWidth = _b.width, chartHeight = _b.height;
-                var deltaIntentX = (-dragDistanceX / chartWidth) * focusWidth;
-                var deltaIntentY = (-dragDistanceY / chartHeight) * focusHeight;
+                var focusChartWidth = chartWidth - draw_a_frame_1.PADDING_LEFT - draw_a_frame_1.PADDING_RIGHT;
+                var focusChartHeight = chartHeight - draw_a_frame_1.PADDING_TOP - draw_a_frame_1.PADDING_BOTTOM;
+                var dragSpeedX = (dragInMinimap ? MINIMAP_SIZE_RATIO_X / focusWidth : 1) / focusChartWidth;
+                var dragSpeedY = (dragInMinimap ? MINIMAP_SIZE_RATIO_Y / focusHeight : 1) / focusChartHeight;
+                var deltaIntentX = focusMoveDirection * dragDistanceX * dragSpeedX * focusWidth;
+                var deltaIntentY = focusMoveDirection * dragDistanceY * dragSpeedY * focusHeight;
                 var deltaCorrectionX = deltaIntentX > 0
-                    ? Math.min(0, 1 - (_this.startOfDragX0 + focusWidth + deltaIntentX))
-                    : -Math.min(0, _this.startOfDragX0 + deltaIntentX);
+                    ? Math.min(0, 1 - (_this.startOfDragFocusLeft + focusWidth + deltaIntentX))
+                    : -Math.min(0, _this.startOfDragFocusLeft + deltaIntentX);
                 var deltaCorrectionY = deltaIntentY > 0
-                    ? Math.min(0, 1 - (_this.startOfDragY0 + focusHeight + deltaIntentY))
-                    : -Math.min(0, _this.startOfDragY0 + deltaIntentY);
+                    ? Math.min(0, 1 - (_this.startOfDragFocusTop + focusHeight + deltaIntentY))
+                    : -Math.min(0, _this.startOfDragFocusTop + deltaIntentY);
                 var deltaX = deltaIntentX + deltaCorrectionX;
                 var deltaY = deltaIntentY + deltaCorrectionY;
-                var newX0 = (0, common_1.clamp)(_this.startOfDragX0 + deltaX, 0, 1);
-                var newX1 = (0, common_1.clamp)(_this.startOfDragX0 + focusWidth + deltaX, 0, 1);
-                var newY0 = (0, common_1.clamp)(_this.startOfDragY0 + deltaY, 0, 1);
-                var newY1 = (0, common_1.clamp)(_this.startOfDragY0 + focusHeight + deltaY, 0, 1);
+                var newX0 = (0, common_1.clamp)(_this.startOfDragFocusLeft + deltaX, 0, 1);
+                var newX1 = (0, common_1.clamp)(_this.startOfDragFocusLeft + focusWidth + deltaX, 0, 1);
+                var newY0 = (0, common_1.clamp)(_this.startOfDragFocusTop + deltaY, 0, 1);
+                var newY1 = (0, common_1.clamp)(_this.startOfDragFocusTop + focusHeight + deltaY, 0, 1);
                 var newFocus = { x0: newX0, x1: newX1, y0: newY0, y1: newY1, timestamp: e.timeStamp };
                 _this.currentFocus = newFocus;
                 _this.targetFocus = newFocus;
-                _this.hoverIndex = NaN;
-                _this.setState({});
+                _this.smartDraw();
             }
         };
         _this.clearDrag = function () {
             _this.startOfDragX = NaN;
-            _this.startOfDragX0 = NaN;
             _this.startOfDragY = NaN;
-            _this.startOfDragY0 = NaN;
+            _this.startOfDragFocusLeft = NaN;
+            _this.startOfDragFocusTop = NaN;
         };
         _this.resetDrag = function () {
             _this.startOfDragX = _this.pointerX;
@@ -241,6 +275,8 @@ var FlameComponent = (function (_super) {
         };
         _this.handleMouseDown = function (e) {
             e.stopPropagation();
+            if (Number.isNaN(_this.pointerX + _this.pointerY))
+                return;
             _this.resetDrag();
             window.addEventListener('mousemove', _this.handleMouseDragMove, { passive: true });
             window.addEventListener('mouseup', _this.handleMouseUp, { passive: true });
@@ -257,7 +293,7 @@ var FlameComponent = (function (_super) {
                 var isDoubleClick = e.detail > 1;
                 var hasClickedOnRectangle = Number.isFinite(hovered === null || hovered === void 0 ? void 0 : hovered.datumIndex);
                 var mustFocus = SINGLE_CLICK_EMPTY_FOCUS || isDoubleClick !== hasClickedOnRectangle;
-                if (mustFocus) {
+                if (mustFocus && !_this.pointerInMinimap(_this.pointerX, _this.pointerY)) {
                     _this.targetFocus = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, hovered.datumIndex, hovered.timestamp);
                     _this.prevT = NaN;
                     _this.hoverIndex = NaN;
@@ -270,10 +306,7 @@ var FlameComponent = (function (_super) {
         };
         _this.handleMouseLeave = function (e) {
             e.stopPropagation();
-            if (Number.isFinite(_this.hoverIndex)) {
-                _this.hoverIndex = NaN;
-                _this.setState({});
-            }
+            _this.smartDraw();
         };
         _this.preventScroll = function (e) { return e.metaKey === IS_META_REQUIRED_FOR_ZOOM && e.preventDefault(); };
         _this.handleWheel = function (e) {
@@ -286,14 +319,16 @@ var FlameComponent = (function (_super) {
             var unitX = _this.pointerX / _this.props.chartDimensions.width;
             var unitY = (_this.props.chartDimensions.height - _this.pointerY) / _this.props.chartDimensions.height;
             var zoomOut = delta <= 0;
-            var midX = x0 === 0 && (zoomOut || _this.pointerX < ZOOM_FROM_EDGE_BAND)
+            var midX = Math.abs(x0) < draw_a_frame_1.EPSILON && (zoomOut || _this.pointerX < ZOOM_FROM_EDGE_BAND_LEFT)
                 ? 0
-                : x1 === 1 && (zoomOut || _this.pointerX > _this.props.chartDimensions.width - ZOOM_FROM_EDGE_BAND)
+                : Math.abs(x1 - 1) < draw_a_frame_1.EPSILON &&
+                    (zoomOut || _this.pointerX > _this.props.chartDimensions.width - ZOOM_FROM_EDGE_BAND_RIGHT)
                     ? 1
                     : (0, common_1.clamp)(x0 + unitX * Math.abs(x1 - x0), 0, 1);
-            var midY = y0 === 0 && (zoomOut || _this.pointerY > _this.props.chartDimensions.height - ZOOM_FROM_EDGE_BAND)
+            var midY = Math.abs(y0) < draw_a_frame_1.EPSILON &&
+                (zoomOut || _this.pointerY > _this.props.chartDimensions.height - ZOOM_FROM_EDGE_BAND_BOTTOM)
                 ? 0
-                : y1 === 1 && (zoomOut || _this.pointerY < ZOOM_FROM_EDGE_BAND)
+                : Math.abs(y1 - 1) < draw_a_frame_1.EPSILON && (zoomOut || _this.pointerY < ZOOM_FROM_EDGE_BAND_TOP)
                     ? 1
                     : (0, common_1.clamp)(y0 + unitY * Math.abs(y1 - y0), 0, 1);
             var targetX0 = (0, common_1.clamp)(x0 - delta * (x0 - midX), 0, 1);
@@ -317,9 +352,89 @@ var FlameComponent = (function (_super) {
                 _this.currentFocus = newFocus;
                 _this.targetFocus = newFocus;
             }
-            _this.hoverIndex = NaN;
+            _this.smartDraw();
+        };
+        _this.focusOnAllMatches = function () {
+            _this.currentSearchHitCount = 0;
+            var searchString = _this.currentSearchString;
+            var customizedSearchString = _this.caseSensitive ? searchString : searchString.toLowerCase();
+            var regex = _this.useRegex && getRegExp(searchString);
+            var columns = _this.props.columnarViewModel;
+            _this.currentColor = new Float32Array(columns.color);
+            var labels = columns.label;
+            var size = columns.size1;
+            var position = columns.position1;
+            var rowHeight = unitRowPitch(position);
+            var datumCount = labels.length;
+            var x0 = Infinity;
+            var x1 = -Infinity;
+            var y0 = Infinity;
+            var y1 = -Infinity;
+            for (var i = 0; i < datumCount; i++) {
+                var label = _this.caseSensitive ? labels[i] : labels[i].toLowerCase();
+                if (regex ? label.match(regex) : label.includes(customizedSearchString)) {
+                    _this.currentSearchHitCount++;
+                    x0 = Math.min(x0, position[2 * i]);
+                    x1 = Math.max(x1, position[2 * i] + size[i]);
+                    y0 = Math.min(y0, position[2 * i + 1]);
+                    y1 = Math.max(y1, position[2 * i + 1] + rowHeight);
+                }
+                else {
+                    _this.currentColor[4 * i + 3] *= 0.25;
+                }
+            }
+            if (Number.isFinite(x0)) {
+                Object.assign(_this.targetFocus, focusForArea(_this.props.chartDimensions.height, { x0: x0, x1: x1, y0: y0, y1: y1 }));
+            }
+        };
+        _this.uploadSearchColors = function () {
+            var colorSetter = _this.glResources.attributes.get('color');
+            if (_this.glContext && colorSetter && _this.currentColor.length === _this.props.columnarViewModel.color.length) {
+                (0, ensure_webgl_1.uploadToWebgl)(_this.glContext, new Map([['color', colorSetter]]), { color: _this.currentColor });
+            }
+        };
+        _this.searchForText = function (force) {
+            var input = _this.searchInputRef.current;
+            var searchString = input === null || input === void 0 ? void 0 : input.value;
+            if (!input || typeof searchString !== 'string' || (searchString === _this.currentSearchString && !force))
+                return;
+            _this.currentSearchString = searchString;
+            _this.focusOnAllMatches();
+            _this.uploadSearchColors();
+            _this.focusedMatchIndex = NaN;
             _this.setState({});
         };
+        _this.handleKeyPress = function (e) {
+            e.stopPropagation();
+            _this.searchForText(false);
+        };
+        _this.focusOnHit = function (timestamp) {
+            if (Number.isNaN(_this.focusedMatchIndex)) {
+                _this.focusOnAllMatches();
+            }
+            else {
+                var datumIndex = NaN;
+                var hitEnumerator = -1;
+                var searchString = _this.currentSearchString;
+                var customizedSearchString = _this.caseSensitive ? searchString : searchString.toLowerCase();
+                var regex = _this.useRegex && getRegExp(searchString);
+                var labels = _this.props.columnarViewModel.label;
+                for (var i = 0; i < labels.length; i++) {
+                    var label = _this.caseSensitive ? labels[i] : labels[i].toLowerCase();
+                    if (regex ? label.match(regex) : label.includes(customizedSearchString)) {
+                        datumIndex = i;
+                        hitEnumerator++;
+                        if (hitEnumerator === _this.focusedMatchIndex)
+                            break;
+                    }
+                }
+                if (hitEnumerator >= 0) {
+                    _this.targetFocus = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, datumIndex, timestamp);
+                    _this.prevT = NaN;
+                    _this.hoverIndex = NaN;
+                }
+            }
+        };
         _this.render = function () {
             var _a = _this.props, forwardStageRef = _a.forwardStageRef, _b = _a.chartDimensions, requestedWidth = _b.width, requestedHeight = _b.height, a11ySettings = _a.a11ySettings;
             var width = (0, common_2.roundUpSize)(requestedWidth);
@@ -339,10 +454,100 @@ var FlameComponent = (function (_super) {
             var canvasWidth = width * dpr;
             var canvasHeight = height * dpr;
             var columns = _this.props.columnarViewModel;
+            var hitCount = _this.currentSearchHitCount;
             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, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, onMouseMove: _this.handleMouseHoverMove, onMouseDown: _this.handleMouseDown, onMouseLeave: _this.handleMouseLeave, onWheel: _this.handleWheel, 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, onWheel: _this.handleWheel, style: style, role: "presentation" })),
+                react_1.default.createElement("div", { style: {
+                        position: 'absolute',
+                        transform: "translateY(" + (_this.props.chartDimensions.height - draw_a_frame_1.PADDING_BOTTOM + 4) + "px)",
+                    } },
+                    react_1.default.createElement("input", { ref: _this.searchInputRef, title: "Search string or regex pattern", type: "text", tabIndex: 0, placeholder: "Enter search string", onKeyPress: _this.handleKeyPress, onKeyUp: _this.handleKeyPress, style: {
+                            border: '0px solid lightgray',
+                            padding: 3,
+                            outline: 'none',
+                            background: 'rgba(255,0,255,0)',
+                        } }),
+                    react_1.default.createElement("label", { title: "Case sensitivity (highlighted: case sensitive)", style: {
+                            color: _this.caseSensitive && !_this.useRegex ? 'black' : 'darkgrey',
+                            backgroundColor: 'rgb(228, 228, 228)',
+                            fontWeight: 'bolder',
+                            paddingInline: 4,
+                            marginInline: 4,
+                            borderRadius: 4,
+                            opacity: _this.currentSearchString ? 1 : 0,
+                            transition: 'opacity 250ms ease-in-out',
+                        } },
+                        "Cc",
+                        react_1.default.createElement("input", { type: "checkbox", tabIndex: 0, onClick: function () {
+                                if (!_this.currentSearchString)
+                                    return;
+                                _this.caseSensitive = !_this.caseSensitive;
+                                _this.searchForText(true);
+                            }, style: { display: 'none' } })),
+                    react_1.default.createElement("label", { title: "Regex matching (highlighted: use regex)", style: {
+                            color: _this.useRegex ? 'black' : 'darkgrey',
+                            backgroundColor: 'rgb(228, 228, 228)',
+                            fontWeight: 'bolder',
+                            paddingInline: 4,
+                            marginInline: 4,
+                            borderRadius: 4,
+                            opacity: _this.currentSearchString ? 1 : 0,
+                            transition: 'opacity 250ms ease-in-out',
+                        } },
+                        ". *",
+                        react_1.default.createElement("input", { type: "checkbox", tabIndex: 0, onClick: function () {
+                                if (!_this.currentSearchString)
+                                    return;
+                                _this.useRegex = !_this.useRegex;
+                                _this.searchForText(true);
+                            }, style: { display: 'none' } })),
+                    react_1.default.createElement("label", { title: "Previous hit", style: {
+                            color: hitCount ? 'black' : 'darkgrey',
+                            fontWeight: 'bolder',
+                            paddingLeft: 16,
+                            paddingRight: 4,
+                            opacity: _this.currentSearchString ? 1 : 0,
+                            transition: 'opacity 250ms ease-in-out',
+                        } },
+                        "\u25C0",
+                        react_1.default.createElement("input", { type: "checkbox", tabIndex: 0, onClick: function (e) {
+                                if (!_this.currentSearchString)
+                                    return;
+                                _this.focusedMatchIndex = Number.isNaN(_this.focusedMatchIndex)
+                                    ? hitCount - 1
+                                    : _this.focusedMatchIndex === 0
+                                        ? NaN
+                                        : _this.focusedMatchIndex - 1;
+                                _this.focusOnHit(e.timeStamp);
+                                _this.setState({});
+                            }, style: { display: 'none' } })),
+                    react_1.default.createElement("label", { title: "Next hit", style: {
+                            color: hitCount ? 'black' : 'darkgrey',
+                            fontWeight: 'bolder',
+                            paddingInline: 4,
+                            opacity: _this.currentSearchString ? 1 : 0,
+                            transition: 'opacity 250ms ease-in-out',
+                        } },
+                        "\u25B6",
+                        react_1.default.createElement("input", { type: "checkbox", tabIndex: 0, onClick: function (e) {
+                                if (!_this.currentSearchString)
+                                    return;
+                                _this.focusedMatchIndex = _this.focusedMatchIndex = Number.isNaN(_this.focusedMatchIndex)
+                                    ? 0
+                                    : _this.focusedMatchIndex === hitCount - 1
+                                        ? NaN
+                                        : _this.focusedMatchIndex + 1;
+                                _this.focusOnHit(e.timeStamp);
+                                _this.setState({});
+                            }, style: { display: 'none' } })),
+                    react_1.default.createElement("p", { style: {
+                            float: 'right',
+                            padding: 3,
+                            opacity: _this.currentSearchString ? 1 : 0,
+                            transition: 'opacity 250ms ease-in-out',
+                        } }, "Match" + (Number.isNaN(_this.focusedMatchIndex) ? 'es:' : ": " + (_this.focusedMatchIndex + 1) + " /") + " " + 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, info: {
                         header: null,
                         values: _this.hoverIndex >= 0
@@ -364,7 +569,7 @@ var FlameComponent = (function (_super) {
         _this.drawCanvas = function () {
             if (!_this.ctx || !_this.glContext || !_this.pickTexture)
                 return;
-            var renderFrame = (0, draw_a_frame_1.drawFrame)(_this.ctx, _this.glContext, _this.props.chartDimensions.width, _this.props.chartDimensions.height, window.devicePixelRatio * _this.pinchZoomScale, _this.props.columnarViewModel, _this.pickTexture, _this.glResources.pickTextureRenderer, _this.glResources.roundedRectRenderer, _this.hoverIndex, unitRowPitch(_this.props.columnarViewModel.position1));
+            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);
             var anim = function (t) {
                 var msDeltaT = Number.isNaN(_this.prevT) ? 0 : t - _this.prevT;
                 _this.prevT = t;
@@ -376,7 +581,7 @@ var FlameComponent = (function (_super) {
                 var currentExtentY = _this.currentFocus.y1 - _this.currentFocus.y0;
                 var relativeExpansionX = Math.max(1, (currentExtentX + dx1 - dx0) / currentExtentX);
                 var relativeExpansionY = Math.max(1, (currentExtentX + dy1 - dy0) / currentExtentY);
-                var jointRelativeExpansion = relativeExpansionX * relativeExpansionY;
+                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;
                 _this.currentFocus.x0 += convergenceRateX * dx0;
@@ -385,13 +590,21 @@ var FlameComponent = (function (_super) {
                 _this.currentFocus.y1 += convergenceRateY * dy1;
                 renderFrame([_this.currentFocus.x0, _this.currentFocus.x1, _this.currentFocus.y0, _this.currentFocus.y1]);
                 var maxDiff = Math.max(Math.abs(dx0), Math.abs(dx1), Math.abs(dy0), Math.abs(dy1));
-                if (maxDiff > 1e-12)
+                if (maxDiff > 1e-12) {
                     _this.animationRafId = window.requestAnimationFrame(anim);
+                }
+                else {
+                    _this.prevT = NaN;
+                }
             };
             window.cancelAnimationFrame(_this.animationRafId);
             _this.animationRafId = window.requestAnimationFrame(anim);
             _this.props.onRenderChange(true);
         };
+        _this.getMinimapWidth = function () { return _this.props.chartDimensions.width / MINIMAP_SIZE_RATIO_X; };
+        _this.getMinimapHeight = function () { return _this.props.chartDimensions.height / MINIMAP_SIZE_RATIO_Y; };
+        _this.getMinimapLeft = function () { return _this.props.chartDimensions.width - _this.getMinimapWidth(); };
+        _this.getMinimapTop = function () { return _this.props.chartDimensions.height - _this.getMinimapHeight(); };
         _this.ensurePickTexture = function () {
             var _a;
             var _b = _this.props.chartDimensions, width = _b.width, height = _b.height;
@@ -407,20 +620,47 @@ var FlameComponent = (function (_super) {
                         textureIndex: 0,
                         width: textureWidth,
                         height: textureHeight,
-                        internalFormat: _this.glContext.RGBA8,
+                        internalFormat: webgl_constants_1.GL.RGBA8,
                         data: null,
                     })) !== null && _a !== void 0 ? _a : kingly_1.NullTexture;
-                (0, kingly_1.bindFramebuffer)(_this.glContext, kingly_1.GL_READ_FRAMEBUFFER, _this.pickTexture.target());
+                (0, kingly_1.bindFramebuffer)(_this.glContext, webgl_constants_1.GL.READ_FRAMEBUFFER, _this.pickTexture.target());
             }
         };
+        _this.initializeGL = function (gl) {
+            _this.glResources = (0, ensure_webgl_1.ensureWebgl)(gl, Object.keys(_this.props.columnarViewModel));
+            (0, ensure_webgl_1.uploadToWebgl)(gl, _this.glResources.attributes, _this.props.columnarViewModel);
+        };
+        _this.restoreGL = function (gl) {
+            _this.initializeGL(gl);
+            _this.pickTexture = kingly_1.NullTexture;
+            _this.uploadSearchColors();
+            _this.ensureTextureAndDraw();
+        };
         _this.tryCanvasContext = function () {
             var canvas = _this.props.forwardStageRef.current;
             var glCanvas = _this.glCanvasRef.current;
             _this.ctx = canvas && canvas.getContext('2d');
             _this.glContext = glCanvas && glCanvas.getContext('webgl2');
             _this.ensurePickTexture();
-            if (_this.glContext && _this.glResources === types_1.NULL_GL_RESOURCES) {
-                _this.glResources = (0, ensure_webgl_1.ensureWebgl)(_this.glContext, _this.props.columnarViewModel);
+            if (glCanvas && _this.glContext && _this.glResources === types_1.NULL_GL_RESOURCES) {
+                glCanvas.addEventListener('webglcontextlost', function (event) {
+                    window.cancelAnimationFrame(_this.animationRafId);
+                    event.preventDefault();
+                }, false);
+                glCanvas.addEventListener('webglcontextrestored', function () {
+                    if (!glCanvas || !_this.glContext)
+                        return;
+                    _this.restoreGL(_this.glContext);
+                    var widthCss = glCanvas.style.width;
+                    var widthNum = parseFloat(widthCss);
+                    glCanvas.style.width = widthNum + 0.1 + "px";
+                    window.setTimeout(function () {
+                        glCanvas.style.width = widthCss;
+                        if (_this.glContext)
+                            _this.restoreGL(_this.glContext);
+                    }, 0);
+                }, false);
+                _this.initializeGL(_this.glContext);
             }
         };
         _this.ctx = null;
@@ -428,16 +668,18 @@ var FlameComponent = (function (_super) {
         _this.pickTexture = kingly_1.NullTexture;
         _this.glResources = types_1.NULL_GL_RESOURCES;
         _this.glCanvasRef = (0, react_1.createRef)();
+        _this.searchInputRef = (0, react_1.createRef)();
         _this.animationRafId = NaN;
         _this.prevT = NaN;
         _this.currentFocus = focusRect(_this.props.columnarViewModel, props.chartDimensions.height, 0, -Infinity);
         _this.targetFocus = __assign({}, _this.currentFocus);
         _this.hoverIndex = NaN;
-        _this.pointerX = -10000;
-        _this.pointerY = -10000;
+        _this.pointerX = NaN;
+        _this.pointerY = NaN;
         _this.pinchZoomSetInterval = NaN;
         _this.pinchZoomScale = browserRootWindow().visualViewport.scale;
         _this.setupViewportScaleChangeListener();
+        _this.currentColor = _this.props.columnarViewModel.color;
         return _this;
     }
     FlameComponent.prototype.componentWillUnmount = function () {
@@ -451,6 +693,15 @@ var FlameComponent = (function (_super) {
         this.pointerX = e.clientX - box.left;
         this.pointerY = e.clientY - box.top;
     };
+    FlameComponent.prototype.smartDraw = function () {
+        if (Number.isFinite(this.hoverIndex)) {
+            this.hoverIndex = NaN;
+            this.setState({});
+        }
+        else {
+            this.drawCanvas();
+        }
+    };
     FlameComponent.displayName = 'Flame';
     return FlameComponent;
 }(react_1.default.Component));