@gemx-dev/clarity-visualize 0.8.39

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@gemx-dev/clarity-visualize",
+  "version": "0.8.39",
+  "description": "Clarity visualize",
+  "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",
+  "dependencies": {
+    "@gemx-dev/clarity-decode": "^0.8.39"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup-plugin-string-import": "^1.2.5",
+    "del-cli": "^5.0.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.0",
+    "rollup": "^3.0.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 --configPlugin @rollup/plugin-typescript",
+    "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,79 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import { importAsString } from 'rollup-plugin-string-import';
+import { readFileSync } from "fs";
+
+const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
+
+function wrapWithBackground(svg){
+  return `background: url("data:image/svg+xml,${svg}") no-repeat center center;`;
+}
+
+function regexEncode(svg){
+  svg = svg.replace(/>\s{1,}</g, `><`);
+  svg = svg.replace(/\s{2,}/g, ` `);
+  return svg.replace(/[\r\n%#()<>?[\\\]^`{|}]/g, encodeURIComponent)
+}
+
+function doublesToSingles(svg){
+  return svg.replace(/"/g, "'")
+}
+
+function preprocessFile(content: string, fileName: string): string {
+  if (fileName.endsWith(".css")) {
+    // remove comments/newlines
+    return content.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, "").replace(/\r\n/g, "");
+  }
+  else if (fileName.endsWith(".svg")) {
+    // removes comments/newlines while also encoding the svg and adding some scaffolding to import it
+    return wrapWithBackground(regexEncode(doublesToSingles(content)));
+  }
+  return "";
+}
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      { file: pkg.main, format: "cjs", exports: "named" },
+      { file: pkg.module, format: "es", exports: "named" }
+    ],
+    plugins: [
+      resolve(),
+      importAsString({ 
+        include: ["**/*.css", "**/*.svg"],
+        transform: preprocessFile,
+      }),
+      typescript(),
+      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(),      
+      importAsString({ 
+        include: ["**/*.css", "**/*.svg"],
+        transform: preprocessFile,
+      }),
+      typescript(),
+      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,3 @@
+import { Visualizer } from "./visualizer";
+
+export const { state, dom, get, html, time, clickmap, clearmap, scrollmap, merge, setup, render } = new Visualizer();

package/src/data.ts

@@ -0,0 +1,103 @@
+import { Data, Layout } from "clarity-js";
+import type { Data as DecodedData, Layout as DecodedLayout } from "clarity-decode";
+import { PlaybackState, RegionState } from "@clarity-types/visualize";
+
+export class DataHelper {
+    regionMap = {};
+    regions: { [key: string]:  RegionState} = {};
+    metrics: {[key: number]: number} = {};
+    lean = false;
+    state: PlaybackState;
+
+    constructor(state: PlaybackState) {
+        this.state = state;
+    }
+
+    static METRIC_MAP = {
+        [Data.Metric.TotalBytes]: { name: "Total Bytes", unit: "KB" },
+        [Data.Metric.TotalCost]: { name: "Total Cost", unit: "ms" },
+        [Data.Metric.LayoutCost]: { name: "Layout Cost", unit: "ms" },
+        [Data.Metric.LargestPaint]: { name: "LCP", unit: "s" },
+        [Data.Metric.CumulativeLayoutShift]: { name: "CLS", unit: "cls" },
+        [Data.Metric.LongTaskCount]: { name: "Long Tasks" },
+        [Data.Metric.CartTotal]: { name: "Cart Total", unit: "html-price" },
+        [Data.Metric.ProductPrice]: { name: "Product Price", unit: "ld-price" },
+        [Data.Metric.ThreadBlockedTime]: { name: "Thread Blocked", unit: "ms" },
+        [Data.Dimension.InteractionNextPaint]: { name: "INP", unit: "ms" }
+    };
+
+    public reset = (): void => {
+        this.metrics = {};
+        this.lean = false;
+        this.regions = {};
+        this.regionMap = {};
+    }
+
+    public metric = (event: DecodedData.MetricEvent): void => {
+        if (this.state.options.metadata) { 
+            let metricMarkup = [];
+            let regionMarkup = [];
+            // Copy over metrics for future reference
+            for (let m in event.data) {
+                const eventType = typeof event.data[m]; 
+                if (eventType === "number" || (event.event === Data.Event.Dimension && m === Data.Dimension.InteractionNextPaint.toString())) {
+                    if (!(m in this.metrics)) { this.metrics[m] = 0; }
+                    let key = parseInt(m, 10);
+                    let value =  eventType === "object" ? Number(event.data[m]?.[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 === Data.Metric.Playback && value === 0 ? true : this.lean;
+                }
+            }
+
+            for (let entry in this.metrics) {
+                if (entry in DataHelper.METRIC_MAP) {
+                    let m = this.metrics[entry];
+                    let map = DataHelper.METRIC_MAP[entry];
+                    let unit = "unit" in map ? map.unit : Data.Constant.Empty;
+                    metricMarkup.push(`<li><h2>${this.value(m, unit)}<span>${this.key(unit)}</span></h2>${map.name}</li>`);
+                }
+            }
+
+            // Append region information to metadata
+            for (let name in this.regions) {
+                let r = this.regions[name];
+                let className = (r.visibility === Layout.RegionVisibility.Visible ? "visible" : (r.interaction === Layout.InteractionState.Clicked ? "clicked" : Data.Constant.Empty));
+                regionMarkup.push(`<span class="${className}">${name}</span>`);
+            }
+
+            this.state.options.metadata.innerHTML = `<ul>${metricMarkup.join(Data.Constant.Empty)}</ul><div>${regionMarkup.join(Data.Constant.Empty)}</div>`;
+        }
+    }
+
+    public region(event: DecodedLayout.RegionEvent): void {
+        let data = event.data;
+        for (let r of data) {
+            if (!(r.name in this.regions)) { 
+                this.regions[r.name] = { interaction: r.interaction , visibility: r.visibility }
+            }
+            this.regionMap[r.id] = r.name;
+        }
+    }
+
+    private key = (unit: string): string => {
+        switch (unit) {
+            case "html-price": 
+            case "ld-price": 
+            case "cls":
+                return Data.Constant.Empty;
+            default: return unit;
+        }
+    }
+
+    private 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/enrich.ts

@@ -0,0 +1,80 @@
+import { helper, Layout } from "clarity-js";
+import { Layout as DecodedLayout } from "clarity-decode";
+import { NodeData } from "@clarity-types/visualize";
+
+export class EnrichHelper {
+        
+    children: { [key: number]: number[] };
+    nodes: { [key: number]: NodeData };
+    
+    constructor() {
+        this.reset();
+    }
+
+    public reset = (): void => {
+        this.children = {};
+        this.nodes = {};
+        helper.selector.reset();
+    }
+
+    public selectors = (event: DecodedLayout.DomEvent): DecodedLayout.DomEvent => {
+        event.data.forEach && event.data.forEach(d => {
+            let parent = this.nodes[d.parent];
+            let children = this.children[d.parent] || [];
+            let node = this.nodes[d.id] || { tag: d.tag, parent: d.parent, previous: d.previous };
+            let attributes = d.attributes || {};
+
+            /* Track parent-child relationship for this element */
+            if (node.parent !== d.parent) {
+                let childIndex = d.previous === null ? 0 : children.indexOf(d.previous) + 1;
+                children.splice(childIndex, 0, d.id);
+
+                // Stop tracking this node from children of previous parent
+                if (node.parent !== d.parent) {
+                    let exParent = this.children[node.parent];
+                    let nodeIndex = exParent ? exParent.indexOf(d.id) : -1;
+                    if (nodeIndex >= 0) {
+                        this.children[node.parent].splice(nodeIndex, 1);
+                    }
+                }
+                node.parent = d.parent;
+            } else if (children.indexOf(d.id) < 0) { children.push(d.id); }
+
+            /* Get current position */
+            node.position = this.position(d.id, d.tag, node, children, children.map(c => this.nodes[c]));
+
+            /* For backward compatibility, continue populating current selector and hash like before in addition to beta selector and hash */
+            let input: Layout.SelectorInput = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes };
+
+            // Get stable selector
+            // We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
+            let selectorAlpha = helper.selector.get(input, Layout.Selector.Alpha);
+            d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
+            d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
+            
+            // Get beta selector
+            let selectorBeta = helper.selector.get(input, Layout.Selector.Beta);
+            d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
+            d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
+
+            /* Track state for future reference */
+            node.alpha = selectorAlpha;
+            node.beta = selectorBeta;
+            this.nodes[d.id] = node;
+            if (d.parent) { this.children[d.parent] = children; }                             
+        });
+        return event;
+    }
+    
+    private position = (id: number, tag: string, child: NodeData, children: number[], siblings: NodeData[]): number => {
+        child.position = 1;
+        let idx = children ? children.indexOf(id) : -1;
+        while (idx-- > 0) {
+            if (tag === siblings[idx].tag) {
+                child.position = siblings[idx].position + 1;
+                break;
+            }
+        }
+        return child.position;
+    }
+}

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,299 @@
+import { Activity, Constant, Heatmap, Setting, ScrollMapInfo, PlaybackState } from "@clarity-types/visualize";
+import { Data } from "clarity-js";
+import { LayoutHelper } from "./layout";
+
+export class HeatmapHelper {
+    static COLORS = ["blue", "cyan", "lime", "yellow", "red"];
+    data: Activity = null;
+    scrollData: ScrollMapInfo[] = null;
+    max: number = null;
+    offscreenRing: HTMLCanvasElement = null;
+    gradientPixels: ImageData = null;
+    timeout = null;
+    observer: ResizeObserver = null;
+    state: PlaybackState = null;
+    layout: LayoutHelper = null;
+    scrollAvgFold: number = null;
+    addScrollMakers: boolean = false;
+
+    constructor(state: PlaybackState, layout: LayoutHelper) {
+        this.state = state;
+        this.layout = layout;
+    }
+
+    public reset = (): void => {
+        this.data = null;
+        this.scrollData = null;
+        this.max = null;
+        this.offscreenRing = null;
+        this.gradientPixels = null;
+        this.timeout = null;
+
+        // Reset resize observer
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+
+        // Remove scroll and resize event listeners
+        if (this.state && this.state.window) {
+            let win = this.state.window;
+            win.removeEventListener("scroll", this.redraw, true);
+            win.removeEventListener("resize", this.redraw, true);
+        }
+    }
+
+    public clear = (): void => {
+        let doc = this.state.window.document;
+        let win = this.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);
+        }
+        this.reset();
+    }
+
+    public scroll = (activity: ScrollMapInfo[], avgFold: number, addMarkers: boolean): void => {
+        this.scrollData = this.scrollData || activity;
+        this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
+        this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
+
+        let canvas = this.overlay();
+        let context = canvas.getContext(Constant.Context);
+        let doc = this.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);
+        canvas.style.top = 0 + Constant.Pixel;
+        if (canvas.width > 0 && canvas.height > 0) {
+            if (this.scrollData) {
+                const grd = context.createLinearGradient(0, 0, 0, canvas.height);
+                for (const currentCombination of this.scrollData) {
+                    const huePercentView = 1 - (currentCombination.cumulativeSum / this.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);
+                if (this.addScrollMakers) {
+                    this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
+                }
+            }
+        };
+    }
+
+    private addInfoMarkers = (context: CanvasRenderingContext2D, scrollMapInfo: ScrollMapInfo[], width: number, height: number, avgFold: number): void => {
+        this.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;
+                this.addMarker(context, width, `${marker}%`, markerLine, Setting.MarkerSmallWidth);
+            }
+        }
+    }
+
+    private 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);
+    }
+
+    public click = (activity: Activity): void => {
+        this.data = this.data || activity;
+        let heat = this.transform();
+        let canvas = this.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 = this.getRing();
+            let gradient = this.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);
+        };
+    }
+
+    private overlay = (): HTMLCanvasElement => {
+        // Create canvas for visualizing heatmap
+        let doc = this.state.window.document;
+        let win = this.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", this.redraw, true);
+            win.addEventListener("resize", this.redraw, true);
+            this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
+
+            if (this.observer) { this.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;
+    }
+
+    private getRing = (): HTMLCanvasElement => {
+        if (this.offscreenRing === null) {
+            let doc = this.state.window.document;
+            this.offscreenRing = doc.createElement(Constant.Canvas) as HTMLCanvasElement;
+            this.offscreenRing.width = Setting.Radius * 2;
+            this.offscreenRing.height = Setting.Radius * 2;
+            let ctx = this.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 this.offscreenRing;
+    }
+
+    private getGradient = (): ImageData => {
+        if (this.gradientPixels === null) {
+            let doc = this.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 / HeatmapHelper.COLORS.length;
+            for (let i = 0; i < HeatmapHelper.COLORS.length; i++) {
+                gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
+            }
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, 1, Setting.Colors);
+            this.gradientPixels = ctx.getImageData(0, 0, 1, Setting.Colors);
+        }
+        return this.gradientPixels;
+    }
+
+    private redraw = (event): void => {
+        if (this.data) {
+            if (this.timeout) { clearTimeout(this.timeout); }
+            this.timeout = setTimeout(this.click, Setting.Interval);
+        }
+        else if (this.scrollData) {
+            if (event.type != 'scroll') {
+                if (this.timeout) { clearTimeout(this.timeout); }
+                this.timeout = setTimeout(this.scroll, Setting.Interval);
+            }
+        }
+    }
+
+    private transform = (): Heatmap[] => {
+        let output: Heatmap[] = [];
+        let points: { [key: string]: number } = {};
+        let localMax = 0;
+        let height = this.state.window && this.state.window.document ? this.state.window.document.documentElement.clientHeight : 0;
+        for (let element of this.data) {
+            let el = this.layout.get(element.hash) as HTMLElement;
+            if (el && typeof el.getBoundingClientRect === "function") {
+                let r = el.getBoundingClientRect();
+                let v = this.visible(el, r, height);
+                // Process clicks for only visible elements
+                if (this.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
+        this.max = this.max ? this.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] / this.max) + Setting.AlphaBoost, 1);
+            if (parts[2] === "1") { output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha }); }
+        }
+
+        return output;
+    }
+
+    private visible = (el: HTMLElement, r: DOMRect, height: number): boolean => {
+        let doc: Document | ShadowRoot = this.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 @@
+export * as visualize from "./clarity";
+export { Visualizer } from "./visualizer";