@gemx-dev/clarity-visualize 0.8.63 → 0.8.65

package/build/clarity.visualize.module.js

@@ -104,8 +104,9 @@ var selectorMap = {};
 function reset$8() {
     selectorMap = {};
 }
-function configure(classNames) {
+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;
@@ -129,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.
@@ -142,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;
     }
 }
@@ -178,7 +188,9 @@ function filter(value) {
     if (!value) {
         return false;
     } // Do not process empty strings
-    if (getExcludeClassNames().some(function (x) { return value.toLowerCase().indexOf(x) >= 0; })) {
+    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;
     }
     for (var i = 0; i < value.length; i++) {
@@ -190,12 +202,14 @@ 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,
-    configure: configure,
+    config: config$2,
     get: get$1,
     reset: reset$8
 });
@@ -914,7 +928,8 @@ var HeatmapHelper = /** @class */ (function () {
                     continue;
                 }
                 var r = el.getBoundingClientRect();
-                var v = _this.visible(el, r, height);
+                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;
@@ -953,13 +968,28 @@ var HeatmapHelper = /** @class */ (function () {
             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
@@ -973,7 +1003,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;
@@ -2353,7 +2394,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) {
@@ -2475,7 +2516,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++) {
@@ -2516,7 +2557,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.63",
+  "version": "0.8.65",
   "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.63"
+    "@gemx-dev/clarity-decode": "^0.8.65"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/heatmap.ts

@@ -292,7 +292,8 @@ export class HeatmapHelper {
             }
 
             let r = el.getBoundingClientRect();
-            let v = this.visible(el, r, height);
+            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 });
@@ -336,14 +337,32 @@ export class HeatmapHelper {
         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; }
@@ -353,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> => {

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;