@gemx-dev/clarity-visualize 0.8.64 → 0.8.66

package/build/clarity.visualize.module.js

@@ -388,10 +388,6 @@ 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;
@@ -1000,7 +996,9 @@ var HeatmapHelper = /** @class */ (function () {
                         if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
                             continue;
                         }
-                        visibility = e === el;
+                        // Consider visible if the top element is the element itself OR a descendant of it
+                        // (e.g. a BUTTON containing P/SPAN children — children will appear on top in elementsFromPoint)
+                        visibility = e === el || el.contains(e);
                         shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
                         break;
                     }
@@ -1767,9 +1765,6 @@ 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) {
@@ -2401,7 +2396,7 @@ var Visualizer = /** @class */ (function () {
         this._excludeClassNames = [];
         this.configure = function (opts) {
             _this._excludeClassNames = opts.excludeClassNames || [];
-            helper.selector.configure(_this._excludeClassNames);
+            helper.selector.config(_this._excludeClassNames);
         };
         this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -2439,33 +2434,25 @@ var Visualizer = /** @class */ (function () {
                     return false;
             }
         };
-        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy, signal) {
+        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) {
             if (hash === void 0) { hash = null; }
             if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
             return __awaiter(_this, void 0, void 0, function () {
-                var merged, CHUNK_BUDGET_MS, chunkStart, entry, _a, domEvent, e_1;
+                var merged, entry, _a, domEvent, e_1;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 13];
+                            if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 11];
                             _b.label = 1;
                         case 1:
-                            _b.trys.push([1, 12, , 13]);
+                            _b.trys.push([1, 10, , 11]);
                             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*/, 11];
-                            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
-                                return [2 /*return*/, this];
+                            if (!(merged.events.length > 0)) return [3 /*break*/, 9];
                             entry = merged.events.shift();
                             _a = entry.event;
                             switch (_a) {
@@ -2491,22 +2478,15 @@ var Visualizer = /** @class */ (function () {
                         case 7:
                             _b.sent();
                             return [3 /*break*/, 8];
-                        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:
+                        case 8: return [3 /*break*/, 3];
+                        case 9: return [3 /*break*/, 11];
+                        case 10:
                             e_1 = _b.sent();
                             if (logerror) {
                                 logerror(e_1);
                             }
-                            return [3 /*break*/, 13];
-                        case 13: return [2 /*return*/, this];
+                            return [3 /*break*/, 11];
+                        case 11: return [2 /*return*/, this];
                     }
                 });
             });
@@ -2538,7 +2518,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);
+            helper.selector.config(_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++) {
@@ -2579,7 +2559,7 @@ var Visualizer = /** @class */ (function () {
                         this.reset();
                         if (options.excludeClassNames) {
                             this._excludeClassNames = options.excludeClassNames;
-                            helper.selector.configure(options.excludeClassNames);
+                            helper.selector.config(options.excludeClassNames);
                         }
                         // Infer options
                         options.pointer = "pointer" in options ? options.pointer : true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.64",
+  "version": "0.8.66",
   "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.64"
+    "@gemx-dev/clarity-decode": "^0.8.66"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/heatmap.ts

@@ -366,7 +366,9 @@ export class HeatmapHelper {
                 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; }
-                    visibility = e === el;
+                    // Consider visible if the top element is the element itself OR a descendant of it
+                    // (e.g. a BUTTON containing P/SPAN children — children will appear on top in elementsFromPoint)
+                    visibility = e === el || el.contains(e);
                     shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
                     break;
                 }

package/src/visualizer.ts

@@ -27,7 +27,7 @@ export class Visualizer implements VisualizerType {
 
     public configure = (opts: { excludeClassNames?: string[] }): void => {
         this._excludeClassNames = opts.excludeClassNames || [];
-        helper.selector.configure(this._excludeClassNames);
+        helper.selector.config(this._excludeClassNames);
     }
 
     public dom = async (event: Layout.DomEvent): Promise<void> => {
@@ -123,7 +123,7 @@ export class Visualizer implements VisualizerType {
         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);
+        helper.selector.config(this._excludeClassNames);
         this.enrich.reset();
         // Walk through payloads and generate merged payload from an array of decoded payloads
         for (let payload of decoded) {
@@ -158,7 +158,7 @@ export class Visualizer implements VisualizerType {
         this.reset();
         if (options.excludeClassNames) {
             this._excludeClassNames = options.excludeClassNames;
-            helper.selector.configure(options.excludeClassNames);
+            helper.selector.config(options.excludeClassNames);
         }
         // Infer options
         options.pointer = "pointer" in options ? options.pointer : true;