@gemx-dev/clarity-visualize 0.8.62 → 0.8.64

package/build/clarity.visualize.module.js

@@ -67,105 +67,6 @@ function __generator(thisArg, body) {
     }
 }
 
-var _a$1;
-var DataHelper = /** @class */ (function () {
-    function DataHelper(state) {
-        var _this = this;
-        this.regionMap = {};
-        this.regions = {};
-        this.metrics = {};
-        this.lean = false;
-        this.reset = function () {
-            _this.metrics = {};
-            _this.lean = false;
-            _this.regions = {};
-            _this.regionMap = {};
-        };
-        this.metric = function (event) {
-            var _a;
-            if (_this.state.options.metadata) {
-                var metricMarkup = [];
-                var regionMarkup = [];
-                // Copy over metrics for future reference
-                for (var m in event.data) {
-                    var eventType = typeof event.data[m];
-                    if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
-                        if (!(m in _this.metrics)) {
-                            _this.metrics[m] = 0;
-                        }
-                        var key = parseInt(m, 10);
-                        var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
-                        if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
-                            _this.metrics[m] = value;
-                        }
-                        else {
-                            _this.metrics[m] += value;
-                        }
-                        _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
-                    }
-                }
-                for (var entry in _this.metrics) {
-                    if (entry in DataHelper.METRIC_MAP) {
-                        var m = _this.metrics[entry];
-                        var map = DataHelper.METRIC_MAP[entry];
-                        var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
-                        metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
-                    }
-                }
-                // Append region information to metadata
-                for (var name_1 in _this.regions) {
-                    var r = _this.regions[name_1];
-                    var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
-                    regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
-                }
-                _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
-            }
-        };
-        this.key = function (unit) {
-            switch (unit) {
-                case "html-price":
-                case "ld-price":
-                case "cls":
-                    return "" /* Data.Constant.Empty */;
-                default: return unit;
-            }
-        };
-        this.value = function (num, unit) {
-            switch (unit) {
-                case "KB": return Math.round(num / 1024);
-                case "s": return Math.round(num / 10) / 100;
-                case "cls": return num / 1000;
-                case "html-price": return num / 100;
-                default: return num;
-            }
-        };
-        this.state = state;
-    }
-    DataHelper.prototype.region = function (event) {
-        var data = event.data;
-        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-            var r = data_1[_i];
-            if (!(r.name in this.regions)) {
-                this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
-            }
-            this.regionMap[r.id] = r.name;
-        }
-    };
-    DataHelper.METRIC_MAP = (_a$1 = {},
-        _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
-        _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
-        _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
-        _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
-        _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
-        _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
-        _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
-        _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
-        _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
-        _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
-        _a$1);
-    return DataHelper;
-}());
-
 // tslint:disable: no-bitwise
 function hash (input, precision) {
     if (precision === void 0) { precision = null; }
@@ -186,12 +87,27 @@ function hash (input, precision) {
     hash = Math.abs(hashOne + (hashTwo * 11579));
     return (precision ? hash % Math.pow(2, precision) : hash).toString(36);
 }
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
 
 var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
+var extraExcludeClassNames = [];
 var selectorMap = {};
 function reset$8() {
     selectorMap = {};
 }
+function config$2(classNames) {
+    extraExcludeClassNames = classNames || [];
+    console.log("[Selector] config called \u2014 extraExcludeClassNames set to: [".concat(extraExcludeClassNames.join(', '), "]"));
+}
 function get$1(input, type) {
     var a = input.attributes;
     var prefix = input.prefix ? input.prefix[type] : null;
@@ -214,7 +130,13 @@ function get$1(input, type) {
             input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
             var selector = "".concat(prefix).concat(input.tag).concat(suffix);
             var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
-            var classes = input.tag !== "BODY" /* Constant.BodyTag */ && "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Constant.Period */) : null;
+            var rawClasses = "class" /* Constant.Class */ in a ? a["class" /* Constant.Class */].trim().split(/\s+/) : [];
+            var filteredClasses = rawClasses.filter(function (c) { return filter(c); });
+            var removedClasses = rawClasses.filter(function (c) { return !filter(c); });
+            if (removedClasses.length > 0) {
+                console.log("[Selector] tag=\"".concat(input.tag, "\" id=\"").concat(input.id, "\" \u2014 removed classes: [").concat(removedClasses.join(', '), "] | kept: [").concat(filteredClasses.join(', '), "] | extraExclude: [").concat(extraExcludeClassNames.join(', '), "]"));
+            }
+            var classes = input.tag !== "BODY" /* Constant.BodyTag */ && filteredClasses.length > 0 ? filteredClasses.join("." /* Constant.Period */) : null;
             if (classes && classes.length > 0) {
                 if (type === 0 /* Selector.Alpha */) {
                     // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
@@ -227,16 +149,19 @@ function get$1(input, type) {
                         selectorMap[key].push(input.id);
                     }
                     selector = "".concat(key).concat("~" /* Constant.Tilde */).concat(selectorMap[key].indexOf(input.id));
+                    console.log("\uD83D\uDE80 \uD83D\uDC25 ~ get ~ selector:", selector);
                 }
                 else {
                     // In Beta mode, we continue to look at query selectors in context of the full page
                     selector = "".concat(prefix).concat(input.tag, ".").concat(classes).concat(suffix);
+                    console.log("\uD83D\uDE80 \uD83D\uDC25 ~ get ~ selector:", selector);
                 }
             }
             // Update selector to use "id" field when available. There are two exceptions:
             // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
             // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
             selector = id && filter(id) ? "".concat(getDomPrefix(prefix)).concat("#" /* Constant.Hash */).concat(id) : selector;
+            console.log("\uD83D\uDE80 \uD83D\uDC25 ~ get ~ selector:", selector);
             return selector;
     }
 }
@@ -263,6 +188,8 @@ function filter(value) {
     if (!value) {
         return false;
     } // Do not process empty strings
+    var excludeClassNames = getExcludeClassNames();
+    console.log("\uD83D\uDE80 \uD83D\uDC25 ~ filter ~ excludeClassNames:", excludeClassNames);
     if (excludeClassNames.some(function (x) { return value.toLowerCase().indexOf(x) >= 0; })) {
         return false;
     }
@@ -274,9 +201,15 @@ function filter(value) {
     }
     return true;
 }
+function getExcludeClassNames() {
+    console.log("\uD83D\uDE80 \uD83D\uDC25 ~ getExcludeClassNames ~ extraExcludeClassNames:", extraExcludeClassNames);
+    console.log("\uD83D\uDE80 \uD83D\uDC25 ~ getExcludeClassNames ~ excludeClassNames:", excludeClassNames);
+    return __spreadArray(__spreadArray([], excludeClassNames, true), extraExcludeClassNames, true);
+}
 
 var selector = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    config: config$2,
     get: get$1,
     reset: reset$8
 });
@@ -312,6 +245,105 @@ function lookup(hash) {
 
 var helper = { hash: hash, selector: selector, get: get$2, getNode: getNode, lookup: lookup };
 
+var _a$1;
+var DataHelper = /** @class */ (function () {
+    function DataHelper(state) {
+        var _this = this;
+        this.regionMap = {};
+        this.regions = {};
+        this.metrics = {};
+        this.lean = false;
+        this.reset = function () {
+            _this.metrics = {};
+            _this.lean = false;
+            _this.regions = {};
+            _this.regionMap = {};
+        };
+        this.metric = function (event) {
+            var _a;
+            if (_this.state.options.metadata) {
+                var metricMarkup = [];
+                var regionMarkup = [];
+                // Copy over metrics for future reference
+                for (var m in event.data) {
+                    var eventType = typeof event.data[m];
+                    if (eventType === "number" || (event.event === 1 /* Data.Event.Dimension */ && m === 37 /* Data.Dimension.InteractionNextPaint */.toString())) {
+                        if (!(m in _this.metrics)) {
+                            _this.metrics[m] = 0;
+                        }
+                        var key = parseInt(m, 10);
+                        var value = eventType === "object" ? Number((_a = event.data[m]) === null || _a === void 0 ? void 0 : _a[0]) : event.data[m];
+                        if (m in DataHelper.METRIC_MAP && (DataHelper.METRIC_MAP[m].unit === "html-price" || DataHelper.METRIC_MAP[m].unit === "ld-price")) {
+                            _this.metrics[m] = value;
+                        }
+                        else {
+                            _this.metrics[m] += value;
+                        }
+                        _this.lean = key === 1 /* Data.Metric.Playback */ && value === 0 ? true : _this.lean;
+                    }
+                }
+                for (var entry in _this.metrics) {
+                    if (entry in DataHelper.METRIC_MAP) {
+                        var m = _this.metrics[entry];
+                        var map = DataHelper.METRIC_MAP[entry];
+                        var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
+                        metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
+                    }
+                }
+                // Append region information to metadata
+                for (var name_1 in _this.regions) {
+                    var r = _this.regions[name_1];
+                    var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.InteractionState.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
+                    regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
+                }
+                _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
+            }
+        };
+        this.key = function (unit) {
+            switch (unit) {
+                case "html-price":
+                case "ld-price":
+                case "cls":
+                    return "" /* Data.Constant.Empty */;
+                default: return unit;
+            }
+        };
+        this.value = function (num, unit) {
+            switch (unit) {
+                case "KB": return Math.round(num / 1024);
+                case "s": return Math.round(num / 10) / 100;
+                case "cls": return num / 1000;
+                case "html-price": return num / 100;
+                default: return num;
+            }
+        };
+        this.state = state;
+    }
+    DataHelper.prototype.region = function (event) {
+        var data = event.data;
+        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+            var r = data_1[_i];
+            if (!(r.name in this.regions)) {
+                this.regions[r.name] = { interaction: r.interaction, visibility: r.visibility };
+            }
+            this.regionMap[r.id] = r.name;
+        }
+    };
+    DataHelper.METRIC_MAP = (_a$1 = {},
+        _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
+        _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
+        _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
+        _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
+        _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
+        _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
+        _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
+        _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
+        _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
+        _a$1[37 /* Data.Dimension.InteractionNextPaint */] = { name: "INP", unit: "ms" },
+        _a$1);
+    return DataHelper;
+}());
+
 var EnrichHelper = /** @class */ (function () {
     function EnrichHelper() {
         var _this = this;
@@ -356,6 +388,10 @@ var EnrichHelper = /** @class */ (function () {
                 var selectorBeta = helper.selector.get(input, 1 /* Layout.Selector.Beta */);
                 d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
                 d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
+                var rawClass = (d.attributes || {})['class'] || '';
+                if (rawClass.includes('gp_ls-is-cached')) {
+                    console.log("[Enrich] id=".concat(d.id, " tag=").concat(d.tag, " | class=\"").concat(rawClass, "\" | selectorBeta=\"").concat(selectorBeta, "\" | hashBeta=").concat(d.hashBeta));
+                }
                 /* Track state for future reference */
                 node.alpha = selectorAlpha;
                 node.beta = selectorBeta;
@@ -882,12 +918,28 @@ var HeatmapHelper = /** @class */ (function () {
             var points = {};
             var localMax = 0;
             var height = _this.state.window && _this.state.window.document ? _this.state.window.document.documentElement.clientHeight : 0;
+            // DEBUG LOG
+            console.group("[Heatmap] transform \u2014 total elements: ".concat(_this.data.length, ", height: ").concat(height, ", max: ").concat(_this.max));
             for (var _i = 0, _a = _this.data; _i < _a.length; _i++) {
                 var element = _a[_i];
                 var el = _this.layout.get(element.hash);
+                if (!el) {
+                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 element not found in DOM"));
+                    continue;
+                }
+                if (typeof el.getBoundingClientRect !== "function") {
+                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 getBoundingClientRect not available"), el);
+                    continue;
+                }
+                var r = el.getBoundingClientRect();
+                var isDebugHash = element.hash === "270qs0pw7";
+                var v = _this.visible(el, r, height, isDebugHash ? element.hash : undefined);
+                if (!v && _this.max !== null) {
+                    console.warn("[Heatmap] SKIP hash=\"".concat(element.hash, "\" \u2014 not visible on re-render"), { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: _this.max !== null });
+                    continue;
+                }
                 if (el && typeof el.getBoundingClientRect === "function") {
-                    var r = el.getBoundingClientRect();
-                    var v = _this.visible(el, r, height);
+                    console.log("[Heatmap] PROCESS hash=\"".concat(element.hash, "\" visible=").concat(v, " points=").concat(element.points), { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
                     // Process clicks for only visible elements
                     if (_this.max === null || v) {
                         for (var i = 0; i < element.points; i++) {
@@ -896,6 +948,7 @@ var HeatmapHelper = /** @class */ (function () {
                             var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
                             points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
                             localMax = Math.max(points[k], localMax);
+                            console.log("  point[".concat(i, "] x=").concat(x, " y=").concat(y, " visible=").concat(v, " clicks=").concat(element.clicks[i]));
                         }
                     }
                 }
@@ -903,6 +956,7 @@ var HeatmapHelper = /** @class */ (function () {
             // Set the max value from the firs t
             _this.max = _this.max ? _this.max : localMax;
             // Once all points are accounted for, convert everything into absolute (x, y)
+            var skippedInvisible = 0;
             for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
                 var coordinates = _c[_b];
                 var parts = coordinates.split("X" /* Constant.Separator */);
@@ -910,16 +964,36 @@ var HeatmapHelper = /** @class */ (function () {
                 if (parts[2] === "1") {
                     output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
                 }
+                else {
+                    skippedInvisible++;
+                }
             }
+            console.log("[Heatmap] Result \u2014 drawn: ".concat(output.length, ", skipped invisible: ").concat(skippedInvisible, ", max: ").concat(_this.max));
+            console.groupEnd();
             return output;
         };
-        this.visible = function (el, r, height) {
+        this.visible = function (el, r, height, debugHash) {
             var doc = _this.state.window.document;
             var visibility = r.height > height ? true : false;
+            if (debugHash) {
+                console.group("[Heatmap visible] hash=".concat(debugHash, " tag=").concat(el === null || el === void 0 ? void 0 : el.tagName));
+                console.log("  rect: top=".concat(r.top.toFixed(1), " bottom=").concat(r.bottom.toFixed(1), " left=").concat(r.left.toFixed(1), " width=").concat(r.width.toFixed(1), " height=").concat(r.height.toFixed(1)));
+                console.log("  viewport height=".concat(height, " | r.height > height? ").concat(r.height > height));
+            }
             if (visibility === false && r.width > 0 && r.height > 0) {
+                var checkX = r.left + (r.width / 2);
+                var checkY = r.top + (r.height / 2);
+                if (debugHash) {
+                    console.log("  elementsFromPoint(".concat(checkX.toFixed(1), ", ").concat(checkY.toFixed(1), ")"));
+                }
                 while (!visibility && doc) {
                     var shadowElement = null;
-                    var elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
+                    var elements = doc.elementsFromPoint(checkX, checkY);
+                    if (debugHash) {
+                        var topElements = elements.slice(0, 5).map(function (e) { return "".concat(e.tagName).concat(e.id ? '#' + e.id : '').concat(e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''); });
+                        console.log("  top elements at center: [".concat(topElements.join(', '), "]"));
+                        console.log("  is el in top elements? ".concat(elements.includes(el), " | el matches first non-canvas? ").concat(elements.find(function (e) { return !(e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)); }) === el));
+                    }
                     for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                         var e = elements_1[_i];
                         // Ignore if top element ends up being the canvas element we added for heatmap visualization
@@ -933,7 +1007,18 @@ var HeatmapHelper = /** @class */ (function () {
                     doc = shadowElement;
                 }
             }
-            return visibility && r.bottom >= 0 && r.top <= height;
+            else if (debugHash) {
+                if (r.width === 0 || r.height === 0) {
+                    console.log("  SKIP elementsFromPoint \u2014 zero dimension: width=".concat(r.width, " height=").concat(r.height));
+                }
+            }
+            var result = visibility && r.bottom >= 0 && r.top <= height;
+            if (debugHash) {
+                console.log("  visibility=".concat(visibility, " | r.bottom(").concat(r.bottom.toFixed(1), ") >= 0? ").concat(r.bottom >= 0, " | r.top(").concat(r.top.toFixed(1), ") <= height(").concat(height, ")? ").concat(r.top <= height));
+                console.log("  => final result: ".concat(result));
+                console.groupEnd();
+            }
+            return result;
         };
         this.waitForDialogs = function () { return __awaiter(_this, void 0, void 0, function () {
             var isPortalCanvas;
@@ -1682,6 +1767,9 @@ var LayoutHelper = /** @class */ (function () {
             // In case of selector collision, prefer the first inserted node
             _this.hashMapAlpha[data.hashAlpha] = _this.get(data.hashAlpha) || parent;
             _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
+            if (data.hashBeta === '2e36mrf7c' || data.hashBeta === '19lq10ve5') {
+                console.log("[Layout] addToHashMap hashBeta=".concat(data.hashBeta, " | hashAlpha=").concat(data.hashAlpha, " | tag=").concat(parent === null || parent === void 0 ? void 0 : parent.tagName));
+            }
         };
         this.resize = function (el, width, height) {
             if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
@@ -2310,6 +2398,11 @@ var Visualizer = /** @class */ (function () {
         this._state = null;
         this.renderTime = 0;
         this.hashFoundTime = -1;
+        this._excludeClassNames = [];
+        this.configure = function (opts) {
+            _this._excludeClassNames = opts.excludeClassNames || [];
+            helper.selector.configure(_this._excludeClassNames);
+        };
         this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -2346,25 +2439,33 @@ var Visualizer = /** @class */ (function () {
                     return false;
             }
         };
-        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) {
+        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy, signal) {
             if (hash === void 0) { hash = null; }
             if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
             return __awaiter(_this, void 0, void 0, function () {
-                var merged, entry, _a, domEvent, e_1;
+                var merged, CHUNK_BUDGET_MS, chunkStart, entry, _a, domEvent, e_1;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
+                            if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 13];
                             _b.label = 1;
                         case 1:
-                            _b.trys.push([1, 10, , 11]);
+                            _b.trys.push([1, 12, , 13]);
                             merged = this.merge(decoded);
+                            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+                                return [2 /*return*/, this];
                             return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvasId: portalCanvasId })];
                         case 2:
                             _b.sent();
+                            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+                                return [2 /*return*/, this];
+                            CHUNK_BUDGET_MS = 8;
+                            chunkStart = performance.now();
                             _b.label = 3;
                         case 3:
-                            if (!(merged.events.length > 0)) return [3 /*break*/, 9];
+                            if (!(merged.events.length > 0)) return [3 /*break*/, 11];
+                            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+                                return [2 /*return*/, this];
                             entry = merged.events.shift();
                             _a = entry.event;
                             switch (_a) {
@@ -2390,15 +2491,22 @@ var Visualizer = /** @class */ (function () {
                         case 7:
                             _b.sent();
                             return [3 /*break*/, 8];
-                        case 8: return [3 /*break*/, 3];
-                        case 9: return [3 /*break*/, 11];
-                        case 10:
+                        case 8:
+                            if (!(performance.now() - chunkStart >= CHUNK_BUDGET_MS)) return [3 /*break*/, 10];
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                        case 9:
+                            _b.sent();
+                            chunkStart = performance.now();
+                            _b.label = 10;
+                        case 10: return [3 /*break*/, 3];
+                        case 11: return [3 /*break*/, 13];
+                        case 12:
                             e_1 = _b.sent();
                             if (logerror) {
                                 logerror(e_1);
                             }
-                            return [3 /*break*/, 11];
-                        case 11: return [2 /*return*/, this];
+                            return [3 /*break*/, 13];
+                        case 13: return [2 /*return*/, this];
                     }
                 });
             });
@@ -2430,6 +2538,7 @@ var Visualizer = /** @class */ (function () {
             decoded = decoded.sort(_this.sortPayloads);
             // Re-initialize enrich class if someone ends up calling merge function directly
             _this.enrich = _this.enrich || new EnrichHelper();
+            helper.selector.configure(_this._excludeClassNames);
             _this.enrich.reset();
             // Walk through payloads and generate merged payload from an array of decoded payloads
             for (var _i = 0, decoded_1 = decoded; _i < decoded_1.length; _i++) {
@@ -2468,6 +2577,10 @@ var Visualizer = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         this.reset();
+                        if (options.excludeClassNames) {
+                            this._excludeClassNames = options.excludeClassNames;
+                            helper.selector.configure(options.excludeClassNames);
+                        }
                         // Infer options
                         options.pointer = "pointer" in options ? options.pointer : true;
                         options.canvas = "canvas" in options ? options.canvas : true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.62",
+  "version": "0.8.64",
   "description": "Clarity visualize",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "unpkg": "build/clarity.visualize.min.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@gemx-dev/clarity-decode": "^0.8.62"
+    "@gemx-dev/clarity-decode": "^0.8.64"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/heatmap.ts

@@ -276,11 +276,32 @@ export class HeatmapHelper {
         let points: { [key: string]: number } = {};
         let localMax = 0;
         let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
+
+        // DEBUG LOG
+        console.group(`[Heatmap] transform — total elements: ${this.data.length}, height: ${height}, max: ${this.max}`);
+
         for (let element of this.data) {
             let el = this.layout.get(element.hash) as HTMLElement;
+            if (!el) {
+                console.warn(`[Heatmap] SKIP hash="${element.hash}" — element not found in DOM`);
+                continue;
+            }
+            if (typeof el.getBoundingClientRect !== "function") {
+                console.warn(`[Heatmap] SKIP hash="${element.hash}" — getBoundingClientRect not available`, el);
+                continue;
+            }
+
+            let r = el.getBoundingClientRect();
+            const isDebugHash = element.hash === "270qs0pw7";
+            let v = this.visible(el, r, height, isDebugHash ? element.hash : undefined);
+
+            if (!v && this.max !== null) {
+                console.warn(`[Heatmap] SKIP hash="${element.hash}" — not visible on re-render`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height }, maxIsSet: this.max !== null });
+                continue;
+            }
+
             if (el && typeof el.getBoundingClientRect === "function") {
-                let r = el.getBoundingClientRect();
-                let v = this.visible(el, r, height);
+                console.log(`[Heatmap] PROCESS hash="${element.hash}" visible=${v} points=${element.points}`, { rect: { top: r.top, left: r.left, width: r.width, height: r.height } });
                 // Process clicks for only visible elements
                 if (this.max === null || v) {
                     for(let i = 0; i < element.points; i++) {
@@ -289,6 +310,7 @@ export class HeatmapHelper {
                         let k = `${x}${Constant.Separator}${y}${Constant.Separator}${v ? 1 : 0}`;
                         points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
                         localMax = Math.max(points[k], localMax);
+                        console.log(`  point[${i}] x=${x} y=${y} visible=${v} clicks=${element.clicks[i]}`);
                     }
                 }
             }
@@ -298,23 +320,49 @@ export class HeatmapHelper {
         this.max = this.max ? this.max : localMax;
 
         // Once all points are accounted for, convert everything into absolute (x, y)
+        let skippedInvisible = 0;
         for (let coordinates of Object.keys(points)) {
             let parts = coordinates.split(Constant.Separator);
             let alpha = Math.min((points[coordinates] / this.max) + Setting.AlphaBoost, 1);
-            if (parts[2] === "1") { output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha }); }
+            if (parts[2] === "1") {
+                output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
+            } else {
+                skippedInvisible++;
+            }
         }
 
+        console.log(`[Heatmap] Result — drawn: ${output.length}, skipped invisible: ${skippedInvisible}, max: ${this.max}`);
+        console.groupEnd();
+
         return output;
     }
 
-    private visible = (el: HTMLElement, r: DOMRect, height: number): boolean => {
+    private visible = (el: HTMLElement, r: DOMRect, height: number, debugHash?: string): boolean => {
         let doc: Document | ShadowRoot = this.state.window.document;
         let visibility = r.height > height ? true : false;
+
+        if (debugHash) {
+            console.group(`[Heatmap visible] hash=${debugHash} tag=${el?.tagName}`);
+            console.log(`  rect: top=${r.top.toFixed(1)} bottom=${r.bottom.toFixed(1)} left=${r.left.toFixed(1)} width=${r.width.toFixed(1)} height=${r.height.toFixed(1)}`);
+            console.log(`  viewport height=${height} | r.height > height? ${r.height > height}`);
+        }
+
         if (visibility === false && r.width > 0 && r.height > 0) {
+            const checkX = r.left + (r.width / 2);
+            const checkY = r.top + (r.height / 2);
+            if (debugHash) { console.log(`  elementsFromPoint(${checkX.toFixed(1)}, ${checkY.toFixed(1)})`); }
+
             while (!visibility && doc)
             {
                 let shadowElement = null;
-                let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
+                let elements = doc.elementsFromPoint(checkX, checkY);
+
+                if (debugHash) {
+                    const topElements = elements.slice(0, 5).map(e => `${e.tagName}${e.id ? '#' + e.id : ''}${e.className ? '.' + String(e.className).trim().split(/\s+/).slice(0, 2).join('.') : ''}`);
+                    console.log(`  top elements at center: [${topElements.join(', ')}]`);
+                    console.log(`  is el in top elements? ${elements.includes(el)} | el matches first non-canvas? ${elements.find(e => !(e.tagName === Constant.Canvas || (e.id && e.id.indexOf(Constant.ClarityPrefix) === 0))) === el}`);
+                }
+
                 for (let e of elements) {
                     // Ignore if top element ends up being the canvas element we added for heatmap visualization
                     if (e.tagName === Constant.Canvas || (e.id && e.id.indexOf(Constant.ClarityPrefix) === 0)) { continue; }
@@ -324,8 +372,19 @@ export class HeatmapHelper {
                 }
                 doc = shadowElement;
             }
+        } else if (debugHash) {
+            if (r.width === 0 || r.height === 0) {
+                console.log(`  SKIP elementsFromPoint — zero dimension: width=${r.width} height=${r.height}`);
+            }
+        }
+
+        const result = visibility && r.bottom >= 0 && r.top <= height;
+        if (debugHash) {
+            console.log(`  visibility=${visibility} | r.bottom(${r.bottom.toFixed(1)}) >= 0? ${r.bottom >= 0} | r.top(${r.top.toFixed(1)}) <= height(${height})? ${r.top <= height}`);
+            console.log(`  => final result: ${result}`);
+            console.groupEnd();
         }
-        return visibility && r.bottom >= 0 && r.top <= height;
+        return result;
     }
     
     private waitForDialogs = async (): Promise<void> => {