clarity-visualize 0.6.23

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "clarity-visualize",
+  "version": "0.6.23",
+  "description": "An analytics library that uses web page interactions to generate aggregated insights",
+  "author": "Microsoft Corp.",
+  "license": "MIT",
+  "main": "build/clarity.visualize.js",
+  "module": "build/clarity.visualize.module.js",
+  "unpkg": "build/clarity.visualize.min.js",
+  "types": "types/index.d.ts",
+  "keywords": [
+    "clarity",
+    "Microsoft",
+    "interactions",
+    "cursor",
+    "pointer",
+    "instrumentation",
+    "analytics",
+    "visualization"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/clarity.git",
+    "directory": "packages/clarity-visualize"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/clarity/issues"
+  },
+  "dependencies": {
+    "clarity-decode": "^0.6.23"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "del-cli": "^4.0.1",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.0.1",
+    "rollup": "^2.53.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "ts-node": "^10.1.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.3.5"
+  },
+  "scripts": {
+    "build": "yarn build:clean && yarn build:main",
+    "build:main": "rollup -c rollup.config.ts",
+    "build:clean": "del-cli build/*",
+    "tslint": "tslint --project ./",
+    "tslint:fix": "tslint --fix --project ./ --force"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "tslint --format codeFrame"
+    ]
+  }
+}

package/rollup.config.ts

@@ -0,0 +1,42 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import { terser } from "rollup-plugin-terser";
+import pkg from "./package.json";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      { file: pkg.main, format: "cjs", exports: "named" },
+      { file: pkg.module, format: "es", exports: "named" }
+    ],
+    plugins: [
+      resolve(),
+      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      commonjs({ include: ["node_modules/**"] })
+    ],
+    onwarn(message, warn) {
+      if (message.code === 'NON_EXISTENT_EXPORT') { return; }
+      if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
+      if (message.code === 'SOURCEMAP_ERROR') { return; }
+      warn(message);
+    }
+  },
+  {
+    input: "src/global.ts",
+    output: [ { file: pkg.unpkg, format: "iife", exports: "named" } ],
+    plugins: [
+      resolve(),
+      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      terser({output: {comments: false}}),
+      commonjs({ include: ["node_modules/**"] })
+    ],
+    onwarn(message, warn) {
+      if (message.code === 'NON_EXISTENT_EXPORT') { return; }
+      if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
+      if (message.code === 'SOURCEMAP_ERROR') { return; }
+      warn(message);
+    }
+  }
+];

package/src/clarity.ts

@@ -0,0 +1,159 @@
+import { Visualize } from "@clarity-types/index";
+import { Activity, Constant, MergedPayload, Options, PlaybackState, ScrollMapInfo } from "@clarity-types/visualize";
+import { Data, Interaction, Layout } from "clarity-decode";
+import * as data from "./data";
+import * as heatmap from "./heatmap";
+import * as interaction from "./interaction";
+import * as layout from "./layout";
+export { dom, get } from "./layout";
+
+export let state: PlaybackState = null;
+let renderTime = 0;
+
+export function html(decoded: Data.DecodedPayload[], target: Window, hash: string = null, time : number): Visualize {
+    if (decoded && decoded.length > 0 && target) {
+        // Flatten the payload and parse all events out of them, sorted by time
+        let merged = merge(decoded);
+    
+        setup(target, { version: decoded[0].envelope.version, dom: merged.dom });
+
+        // Render all mutations on top of the initial markup
+        while (merged.events.length > 0 && layout.exists(hash) === false) {
+            let entry = merged.events.shift();
+            switch (entry.event) {
+                case Data.Event.Mutation:
+                    let domEvent = entry as Layout.DomEvent;
+                    renderTime = domEvent.time;
+                    if (time && renderTime > time) {
+                        break;
+                    }
+
+                    layout.markup(domEvent);
+                    break;
+            }
+        }
+    }
+
+    return this;
+}
+
+export function time(): number {
+    return renderTime;
+}
+
+export function clickmap(activity: Activity): void {
+    if (state === null) { throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`); }
+    heatmap.click(activity);
+}
+
+export function clearmap(): void {
+    if (state === null) { throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`); }
+    heatmap.clear();
+}
+
+export function scrollmap(scrollData: ScrollMapInfo[], avgFold: number): void {
+    if (state === null) { throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`); }
+    heatmap.scroll(scrollData, avgFold);
+}
+
+export function merge(decoded: Data.DecodedPayload[]): MergedPayload {
+    let merged: MergedPayload = { timestamp: null, envelope: null, dom: null, events: [] };
+    for (let payload of decoded) {
+        merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
+        merged.envelope = payload.envelope;
+        for (let key of Object.keys(payload)) {
+            let p = payload[key];
+            if (Array.isArray(p)) {
+                for (let entry of p) {
+                    if (key === Constant.Dom && entry.event === Data.Event.Discover) {
+                        merged.dom = entry;
+                    } else { merged.events.push(entry); }
+                }
+            }
+        }
+    }
+    merged.events = merged.events.sort(sort);
+    return merged;
+}
+
+export function setup(target: Window, options: Options): Visualize {
+    reset();
+    // Infer options
+    options.canvas = "canvas" in options ? options.canvas : true;
+    options.keyframes = "keyframes" in options ? options.keyframes : false;
+
+    // Set visualization state
+    state = { window: target, options };
+
+    // If discover event was passed, render it now
+    if (options.dom) { layout.dom(options.dom); }
+
+    return this;
+}
+
+export function render(events: Data.DecodedEvent[]): void {
+    if (state === null) { throw new Error(`Initialize visualization by calling "setup" prior to making this call.`); }
+    let time = 0;
+    for (let entry of events) {
+        time = entry.time;
+        switch (entry.event) {
+            case Data.Event.Metric:
+                data.metric(entry as Data.MetricEvent);
+                break;
+            case Data.Event.Region:
+                data.region(entry as Layout.RegionEvent);
+                break;
+            case Data.Event.Box:
+                layout.box(entry as Layout.BoxEvent);
+                break;
+            case Data.Event.Mutation:
+                layout.markup(entry as Layout.DomEvent);
+                break;
+            case Data.Event.MouseDown:
+            case Data.Event.MouseUp:
+            case Data.Event.MouseMove:
+            case Data.Event.MouseWheel:
+            case Data.Event.Click:
+            case Data.Event.DoubleClick:
+            case Data.Event.TouchStart:
+            case Data.Event.TouchCancel:
+            case Data.Event.TouchEnd:
+            case Data.Event.TouchMove:
+                interaction.pointer(entry as Interaction.PointerEvent);
+                break;
+            case Data.Event.Visibility:
+                interaction.visibility(entry as Interaction.VisibilityEvent);
+                break;
+            case Data.Event.Input:
+                interaction.input(entry as Interaction.InputEvent);
+                break;
+            case Data.Event.Selection:
+                interaction.selection(entry as Interaction.SelectionEvent);
+                break;
+            case Data.Event.Resize:
+                interaction.resize(entry as Interaction.ResizeEvent);
+                break;
+            case Data.Event.Scroll:
+                interaction.scroll(entry as Interaction.ScrollEvent);
+                break;
+        }
+    }
+
+    if (events.length > 0) {
+        // Update pointer trail at the end of every frame
+        interaction.trail(time);
+    }
+}
+
+function reset(): void {
+    data.reset();
+    interaction.reset();
+    layout.reset();
+    heatmap.reset();
+    state = null;
+    renderTime = 0;
+}
+
+function sort(a: Data.DecodedEvent, b: Data.DecodedEvent): number {
+    return a.time - b.time;
+}

package/src/data.ts

@@ -0,0 +1,90 @@
+import { Data, Layout } from "clarity-decode";
+import { state } from "./clarity";
+
+export let lean = false;
+
+let regionMap = {};
+let regions: { [key: string]: Layout.Interaction } = {};
+let metrics: {[key: number]: number} = null;
+const METRIC_MAP = {};
+METRIC_MAP[Data.Metric.TotalBytes] = { name: "Total Bytes", unit: "KB" };
+METRIC_MAP[Data.Metric.TotalCost] = { name: "Total Cost", unit: "ms" };
+METRIC_MAP[Data.Metric.LayoutCost] = { name: "Layout Cost", unit: "ms" };
+METRIC_MAP[Data.Metric.LargestPaint] = { name: "LCP", unit: "s" };
+METRIC_MAP[Data.Metric.CumulativeLayoutShift] = { name: "CLS", unit: "cls" };
+METRIC_MAP[Data.Metric.LongTaskCount] = { name: "Long Tasks" };
+METRIC_MAP[Data.Metric.CartTotal] = { name: "Cart Total", unit: "html-price" };
+METRIC_MAP[Data.Metric.ProductPrice] = { name: "Product Price", unit: "ld-price" };
+METRIC_MAP[Data.Metric.ThreadBlockedTime] = { name: "Thread Blocked", unit: "ms" };
+
+export function reset(): void {
+    metrics = {};
+    lean = false;
+    regions = {};
+    regionMap = {};
+}
+
+export function metric(event: Data.MetricEvent): void {
+    if (state.options.metadata) { 
+        let metricMarkup = [];
+        let regionMarkup = [];
+        // Copy over metrics for future reference
+        for (let m in event.data) {
+            if (typeof event.data[m] === "number") {
+                if (!(m in metrics)) { metrics[m] = 0; }
+                let key = parseInt(m, 10);
+                if (m in METRIC_MAP && (METRIC_MAP[m].unit === "html-price" || METRIC_MAP[m].unit === "ld-price")) { 
+                    metrics[m] = event.data[m];
+                } else { metrics[m] += event.data[m]; }
+                lean = key === Data.Metric.Playback && event.data[m] === 0 ? true : lean;
+            }
+        }
+
+        for (let entry in metrics) {
+            if (entry in METRIC_MAP) {
+                let m = metrics[entry];
+                let map = METRIC_MAP[entry];
+                let unit = "unit" in map ? map.unit : Data.Constant.Empty;
+                metricMarkup.push(`<li><h2>${value(m, unit)}<span>${key(unit)}</span></h2>${map.name}</li>`);
+            }
+        }
+
+        // Append region information to metadata
+        for (let name in regions) {
+            let r = regions[name];
+            let className = r === Layout.Interaction.Visible ? "visible" : (r === Layout.Interaction.Clicked ? "clicked" : Data.Constant.Empty);
+            regionMarkup.push(`<span class="${className}">${name}</span>`);
+        }
+
+        state.options.metadata.innerHTML = `<ul>${metricMarkup.join(Data.Constant.Empty)}</ul><div>${regionMarkup.join(Data.Constant.Empty)}</div>`;
+    }
+}
+
+export function region(event: Layout.RegionEvent): void {
+    let data = event.data;
+    for (let r of data) {
+        if (!(r.name in regions)) { regions[r.name] = Layout.Interaction.Rendered; }
+        regions[r.name] = r.state;
+        regionMap[r.id] = r.name;
+    }
+}
+
+function key(unit: string): string {
+    switch (unit) {
+        case "html-price": 
+        case "ld-price": 
+        case "cls":
+            return Data.Constant.Empty;
+        default: return unit;
+    }
+}
+
+function value(num: number, unit: string): number {
+    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;
+    }
+}

package/src/global.ts

@@ -0,0 +1,9 @@
+import * as visualize from "@src/clarity";
+
+// Expose clarity variable globally to allow access to public interface in a browser
+if (typeof window !== "undefined") {
+    if ((window as any).clarity === undefined || (window as any).clarity === null) {
+        (window as any).clarity = {};
+    }
+    (window as any).clarity.visualize = visualize;
+}

package/src/heatmap.ts

@@ -0,0 +1,279 @@
+import { Activity, Constant, Heatmap, Setting, ScrollMapInfo } from "@clarity-types/visualize";
+import { Data } from "clarity-decode";
+import { state } from "./clarity";
+import * as layout from "./layout";
+
+const COLORS = ["blue", "cyan", "lime", "yellow", "red"];
+
+let data: Activity = null;
+let scrollData: ScrollMapInfo[] = null;
+let max: number = null;
+let offscreenRing: HTMLCanvasElement = null;
+let gradientPixels: ImageData = null;
+let timeout = null;
+let observer: ResizeObserver = null;
+
+export function reset(): void {
+    data = null;
+    scrollData = null;
+    max = null;
+    offscreenRing = null;
+    gradientPixels = null;
+    timeout = null;
+
+    // Reset resize observer
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+
+    // Remove scroll and resize event listeners
+    if (state && state.window) {
+        let win = state.window;
+        win.removeEventListener("scroll", redraw, true);
+        win.removeEventListener("resize", redraw, true);
+    }
+}
+
+export function clear() : void {
+    let doc = state.window.document;
+    let win = state.window;
+    let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
+    let de = doc.documentElement;
+    if (canvas) {
+        canvas.width = de.clientWidth;
+        canvas.height = de.clientHeight;
+        canvas.style.left = win.pageXOffset + Constant.Pixel;
+        canvas.style.top = win.pageYOffset + Constant.Pixel;
+        canvas.getContext(Constant.Context).clearRect(0, 0, canvas.width, canvas.height);
+    }
+    reset();
+}
+
+export function scroll(activity: ScrollMapInfo[], avgFold: number): void {
+    scrollData = scrollData || activity;
+    let canvas = overlay();
+    let context = canvas.getContext(Constant.Context);
+    let doc = state.window.document;
+    var body = doc.body;
+    var de = doc.documentElement;
+    var height = Math.max( body.scrollHeight, body.offsetHeight, 
+        de.clientHeight, de.scrollHeight, de.offsetHeight );
+    canvas.height = Math.min(height, Setting.ScrollCanvasMaxHeight);
+    if (canvas.width > 0 && canvas.height > 0) {
+        if (scrollData) {
+            const grd = context.createLinearGradient(0, 0, 0, canvas.height);
+            for (const currentCombination of scrollData) {
+                const huePercentView = 1 - (currentCombination.cumulativeSum / scrollData[0].cumulativeSum);
+                const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
+                const hue = huePercentView * Setting.MaxHue;
+                if (percentView < 1) {
+                    grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
+                }
+            }
+
+            // Fill with gradient
+            context.fillStyle = grd;
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            addInfoMarkers(context, scrollData, canvas.width, canvas.height, avgFold);
+        }
+    };
+}
+
+function addInfoMarkers(context: CanvasRenderingContext2D, scrollMapInfo: ScrollMapInfo[], width: number, height: number, avgFold: number): void {
+    addMarker(context, width, Constant.AverageFold, avgFold, Setting.MarkerMediumWidth);
+    const markers = [75, 50, 25];
+    for (const marker of markers) {
+        const closest = scrollMapInfo.reduce((prev: ScrollMapInfo, curr: ScrollMapInfo): ScrollMapInfo => {
+            return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
+        });
+        if (closest.percUsers >= marker - Setting.MarkerRange || closest.percUsers <= marker + Setting.MarkerRange) {
+            const markerLine = (closest.scrollReachY / 100) * height;
+            addMarker(context, width, `${marker}%`, markerLine, Setting.MarkerSmallWidth);
+        }
+    }
+}
+
+function addMarker(context: CanvasRenderingContext2D, heatmapWidth: number, label: string, markerY: number, markerWidth: number): void 
+{
+    context.beginPath();
+    context.moveTo(0, markerY);
+    context.lineTo(heatmapWidth, markerY);
+    context.setLineDash([2, 2]);
+    context.lineWidth = Setting.MarkerLineHeight;
+    context.strokeStyle = Setting.MarkerColor;
+    context.stroke();
+    context.fillStyle = Setting.CanvasTextColor;
+    context.fillRect(0, (markerY - Setting.MarkerHeight / 2), markerWidth, Setting.MarkerHeight);
+    context.fillStyle = Setting.MarkerColor;
+    context.font = Setting.CanvasTextFont;
+    context.fillText(label, Setting.MarkerPadding, markerY + Setting.MarkerPadding);
+}
+
+export function click(activity: Activity): void {
+    data = data || activity;
+    let heat = transform();
+    let canvas = overlay();
+    let ctx = canvas.getContext(Constant.Context);
+
+    if (canvas.width > 0 && canvas.height > 0) {
+        // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
+        // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
+        // Pre-render similar primitives or repeating objects on an offscreen canvas
+        let ring = getRing();
+        let gradient = getGradient();
+
+        // Render activity for each (x,y) coordinate in our data
+        for (let entry of heat) {
+            ctx.globalAlpha = entry.a;
+            ctx.drawImage(ring, entry.x - Setting.Radius, entry.y - Setting.Radius);
+        }
+
+        // Add color to the canvas based on alpha value of each pixel
+        let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        for (let i = 0; i < pixels.data.length; i += 4) {
+            // For each pixel, we have 4 entries in data array: (r,g,b,a)
+            // To pick the right color from gradient pixels, we look at the alpha value of the pixel
+            // Alpha value ranges from 0-255
+            let alpha = pixels.data[i+3];
+            if (alpha > 0) {
+                let offset = (alpha - 1) * 4;
+                pixels.data[i] = gradient.data[offset];
+                pixels.data[i + 1] = gradient.data[offset + 1];
+                pixels.data[i + 2] = gradient.data[offset + 2];
+            }
+        }
+        ctx.putImageData(pixels, 0, 0);
+    };
+}
+
+function overlay(): HTMLCanvasElement {
+    // Create canvas for visualizing heatmap
+    let doc = state.window.document;
+    let win = state.window;
+    let de = doc.documentElement;
+    let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
+    if (canvas === null) {
+        canvas = doc.createElement(Constant.Canvas) as HTMLCanvasElement;
+        canvas.id = Constant.HeatmapCanvas;
+        canvas.width = 0;
+        canvas.height = 0;
+        canvas.style.position = Constant.Absolute;
+        canvas.style.zIndex = `${Setting.ZIndex}`;
+        de.appendChild(canvas);
+        win.addEventListener("scroll", redraw, true);
+        win.addEventListener("resize", redraw, true);
+        observer = state.window["ResizeObserver"] ? new ResizeObserver(redraw) : null;
+        if (observer) { observer.observe(doc.body); }
+    }
+
+    // Ensure canvas is positioned correctly
+    canvas.width = de.clientWidth;
+    canvas.height = de.clientHeight;
+    canvas.style.left = win.pageXOffset + Constant.Pixel;
+    canvas.style.top = win.pageYOffset + Constant.Pixel;
+    canvas.getContext(Constant.Context).clearRect(0, 0, canvas.width, canvas.height);
+
+    return canvas;
+}
+
+function getRing(): HTMLCanvasElement {
+    if (offscreenRing === null) {
+        let doc = state.window.document;
+        offscreenRing = doc.createElement(Constant.Canvas) as HTMLCanvasElement;
+        offscreenRing.width = Setting.Radius * 2;
+        offscreenRing.height = Setting.Radius * 2;
+        let ctx = offscreenRing.getContext(Constant.Context);
+        ctx.shadowOffsetX = Setting.Radius * 2;
+        ctx.shadowBlur = Setting.Radius / 2;
+        ctx.shadowColor = Constant.Black;
+        ctx.beginPath();
+        ctx.arc(-Setting.Radius, Setting.Radius, Setting.Radius / 2, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.fill();
+    }
+    return offscreenRing;
+}
+
+function getGradient(): ImageData {
+    if (gradientPixels === null) {
+        let doc = state.window.document;
+        let offscreenGradient = doc.createElement(Constant.Canvas) as HTMLCanvasElement;
+        offscreenGradient.width = 1;
+        offscreenGradient.height = Setting.Colors;
+        let ctx = offscreenGradient.getContext(Constant.Context);
+        let gradient = ctx.createLinearGradient(0, 0, 0, Setting.Colors);
+        let step = 1 / COLORS.length;
+        for (let i = 0; i < COLORS.length; i++) {
+            gradient.addColorStop(step * (i + 1), COLORS[i]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 1, Setting.Colors);
+        gradientPixels = ctx.getImageData(0, 0, 1, Setting.Colors);
+    }
+    return gradientPixels;
+}
+
+function redraw(): void {
+    if (data) {
+        if (timeout) { clearTimeout(timeout); }
+        timeout = setTimeout(click, Setting.Interval);
+    }
+}
+
+function transform(): Heatmap[] {
+    let output: Heatmap[] = [];
+    let points: { [key: string]: number } = {};
+    let localMax = 0;
+    let height = state.window && state.window.document ? state.window.document.documentElement.clientHeight : 0;
+    for (let element of data) {
+        let el = layout.get(element.hash) as HTMLElement;
+        if (el && typeof el.getBoundingClientRect === "function") {
+            let r = el.getBoundingClientRect();
+            let v = visible(el, r, height);
+            // Process clicks for only visible elements
+            if (max === null || v) {
+                for(let i = 0; i < element.points; i++) {
+                    let x = Math.round(r.left + (element.x[i] / Data.Setting.ClickPrecision) * r.width);
+                    let y = Math.round(r.top + (element.y[i] / Data.Setting.ClickPrecision) * r.height);
+                    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);
+                }
+            }
+        }
+    }
+
+    // Set the max value from the firs t
+    max = max ? max : localMax;
+
+    // Once all points are accounted for, convert everything into absolute (x, y)
+    for (let coordinates of Object.keys(points)) {
+        let parts = coordinates.split(Constant.Separator);
+        let alpha = Math.min((points[coordinates] / max) + Setting.AlphaBoost, 1);
+        if (parts[2] === "1") { output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha }); }
+    }
+
+    return output;
+}
+
+function visible(el: HTMLElement, r: DOMRect, height: number): boolean {
+    let doc: Document | ShadowRoot = state.window.document;
+    let visibility = r.height > height ? true : false;
+    if (visibility === false && r.width > 0 && r.height > 0) {
+        while (!visibility && doc)
+        {
+            let shadowElement = null;
+            let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
+            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;
+                shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
+                break;
+            }
+            doc = shadowElement;
+        }
+    }
+    return visibility && r.bottom >= 0 && r.top <= height;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+import * as visualize from "./clarity";
+export { visualize };