@gemx-dev/clarity-visualize 0.8.42 → 0.8.45

package/package.json

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

package/src/data.ts

@@ -1,5 +1,5 @@
-import { Data, Layout } from "clarity-js";
-import type { Data as DecodedData, Layout as DecodedLayout } from "clarity-decode";
+import { Data, Layout } from "@gemx-dev/clarity-js";
+import type { Data as DecodedData, Layout as DecodedLayout } from "@gemx-dev/clarity-decode";
 import { PlaybackState, RegionState } from "@clarity-types/visualize";
 
 export class DataHelper {
@@ -34,17 +34,17 @@ export class DataHelper {
     }
 
     public metric = (event: DecodedData.MetricEvent): void => {
-        if (this.state.options.metadata) { 
+        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]; 
+                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")) { 
+                    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;
@@ -74,7 +74,7 @@ export class DataHelper {
     public region(event: DecodedLayout.RegionEvent): void {
         let data = event.data;
         for (let r of data) {
-            if (!(r.name in this.regions)) { 
+            if (!(r.name in this.regions)) {
                 this.regions[r.name] = { interaction: r.interaction , visibility: r.visibility }
             }
             this.regionMap[r.id] = r.name;
@@ -83,8 +83,8 @@ export class DataHelper {
 
     private key = (unit: string): string => {
         switch (unit) {
-            case "html-price": 
-            case "ld-price": 
+            case "html-price":
+            case "ld-price":
             case "cls":
                 return Data.Constant.Empty;
             default: return unit;

package/src/enrich.ts

@@ -1,12 +1,12 @@
-import { helper, Layout } from "clarity-js";
-import { Layout as DecodedLayout } from "clarity-decode";
+import { helper, Layout } from "@gemx-dev/clarity-js";
+import { Layout as DecodedLayout } from "@gemx-dev/clarity-decode";
 import { NodeData } from "@clarity-types/visualize";
 
 export class EnrichHelper {
-        
+
     children: { [key: number]: number[] };
     nodes: { [key: number]: NodeData };
-    
+
     constructor() {
         this.reset();
     }
@@ -51,7 +51,7 @@ export class EnrichHelper {
             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;
@@ -61,11 +61,11 @@ export class EnrichHelper {
             node.alpha = selectorAlpha;
             node.beta = selectorBeta;
             this.nodes[d.id] = node;
-            if (d.parent) { this.children[d.parent] = children; }                             
+            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;

package/src/heatmap.ts

@@ -1,5 +1,5 @@
 import { Activity, Constant, Heatmap, Setting, ScrollMapInfo, PlaybackState } from "@clarity-types/visualize";
-import { Data } from "clarity-js";
+import { Data } from "@gemx-dev/clarity-js";
 import { LayoutHelper } from "./layout";
 
 export class HeatmapHelper {

package/src/interaction.ts

@@ -1,11 +1,11 @@
 import { Asset, Constant, PlaybackState, Point, Setting } from "@clarity-types/visualize";
-import { Data, Layout } from "clarity-js";
-import type { Interaction } from "clarity-decode"
+import { Data, Layout } from "@gemx-dev/clarity-js";
+import type { Interaction } from "@gemx-dev/clarity-decode"
 import { LayoutHelper } from "./layout";
 import pointerSvg from "./styles/pointer/pointerIcon.svg";
 import clickStyle from "./styles/pointer/click.css";
-import { BooleanFlag } from "clarity-decode/types/data";
-import { ClickVizualizationData } from "clarity-decode/types/interaction";
+import { BooleanFlag } from "@gemx-dev/clarity-decode/types/data";
+import { ClickVizualizationData } from "@gemx-dev/clarity-decode/types/interaction";
 
 export class InteractionHelper {
     static TRAIL_START_COLOR = [242, 97, 12]; // rgb(242,97,12)
@@ -54,8 +54,8 @@ export class InteractionHelper {
 
         // Position canvas relative to scroll events on the parent page
         if (scrollTarget === de || scrollTarget === doc.body) {
-            if (!scrollable) { 
-                this.state.window.scrollTo(data.x, data.y); 
+            if (!scrollable) {
+                this.state.window.scrollTo(data.x, data.y);
             }
             let canvas = this.overlay();
             if (canvas) {
@@ -115,6 +115,9 @@ export class InteractionHelper {
                 case "radio":
                     el.checked = data.value === "true";
                     break;
+                case "file":
+                    // We cannot set value for files, only allowed to be an empty string when programatically set
+                    break;
                 default:
                     el.value = data.value;
                     break;
@@ -192,11 +195,11 @@ export class InteractionHelper {
                         this.state.options.onclickMismatch({
                             time: event.time,
                             x: data.x,
-                            y: data.y, 
+                            y: data.y,
                             nodeId: data.target as number});
                     }
                 }
-                
+
                 p.className = Constant.PointerNone;
                 break;
             case Data.Event.DoubleClick:
@@ -248,7 +251,7 @@ export class InteractionHelper {
                 this.fadeOutElement(click.click, click.doc);
                 this.visualizedClicks.splice(this.visualizedClicks.indexOf(click), 1);
             });
-        }        
+        }
     }
 
     private fadeOutElement = (element: HTMLElement, document: HTMLElement): void => {
@@ -313,7 +316,7 @@ export class InteractionHelper {
         let de = doc.documentElement;
         let click = doc.createElement("DIV");
         click.className = Constant.ClickLayer;
-        
+
         click.setAttribute(Constant.Title, `${title} (${x}${Constant.Pixel}, ${y}${Constant.Pixel})`);
         click.style.left = (x - Setting.ClickRadius / 2) + Constant.Pixel;
         click.style.top = (y - Setting.ClickRadius / 2) + Constant.Pixel
@@ -331,18 +334,18 @@ export class InteractionHelper {
             let center = doc.createElement("DIV");
             center.className = `${Constant.ClickLayer}-center`;
             click.appendChild(center);
-        } else {    
+        } else {
             // Second pulsating ring
             let ringTwo = ringOne.cloneNode() as HTMLElement;
             ringTwo.style.animation = "pulsate-two 1 1s";
             click.appendChild(ringTwo);
         }
         de.appendChild(click);
-        
+
         // Play sound
         if (typeof Audio !== Constant.Undefined) {
-            if (this.clickAudio === null) { 
-                this.clickAudio = new Audio(Asset.Sound); 
+            if (this.clickAudio === null) {
+                this.clickAudio = new Audio(Asset.Sound);
                 click.appendChild(this.clickAudio);
             }
             this.clickAudio.play();
@@ -501,7 +504,7 @@ export class InteractionHelper {
             return clickStyle;
         } else {
             return  `.${Constant.ClickLayer}, .${Constant.ClickRing}, .${Constant.TouchLayer}, .${Constant.TouchRing} { position: absolute; z-index: ${Setting.ZIndex}; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ${Setting.ClickRadius}px; height: ${Setting.ClickRadius}px;}` +
-                    `.${Constant.ClickRing} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
+                `.${Constant.ClickRing} { background: transparent; border: 1px solid rgba(0,90,158,0.8); }`;
         }
     }
 }

package/src/layout.ts

@@ -1,9 +1,9 @@
-import { Data, Layout } from "clarity-js";
-import type { Layout as DecodedLayout } from "clarity-decode";
+import { Data, Layout } from "@gemx-dev/clarity-js";
+import type { Layout as DecodedLayout } from "@gemx-dev/clarity-decode";
 import { Asset, Constant, type LinkHandler, NodeType, type PlaybackState, Setting } from "@clarity-types/visualize";
-import { StyleSheetOperation } from "clarity-js/types/layout";
-import { AnimationOperation } from "clarity-js/types/layout";
-import { Constant as LayoutConstants } from "clarity-js/types/layout";
+import { StyleSheetOperation } from "@gemx-dev/clarity-js/types/layout";
+import { AnimationOperation } from "@gemx-dev/clarity-js/types/layout";
+import { Constant as LayoutConstants } from "@gemx-dev/clarity-js/types/layout";
 import sharedStyle from "./styles/shared.css";
 
 /* BEGIN blobUnavailableSvgs */
@@ -418,13 +418,13 @@ export class LayoutHelper {
                             }));
                         } else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
                             && (node.attributes?.as === "style" || node.attributes?.as === "font")) {
-                                this.fonts.push(new Promise((resolve: () => void): void => {
-                                    const proxy = useproxy ?? this.state.options.useproxy;
-                                    linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
-                                    linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
-                                    setTimeout(resolve, LayoutHelper.TIMEOUT);
-                                }));
-                            }
+                            this.fonts.push(new Promise((resolve: () => void): void => {
+                                const proxy = useproxy ?? this.state.options.useproxy;
+                                linkElement.href = proxy ? proxy(linkElement.href, linkElement.id, node.attributes.as) : linkElement.href;
+                                linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
+                                setTimeout(resolve, LayoutHelper.TIMEOUT);
+                            }));
+                        }
                     }
                     insert(node, parent, linkElement, pivot);
                     break;
@@ -612,7 +612,7 @@ export class LayoutHelper {
                         node.setAttribute(`data-clarity-${attribute}`, v);
                     } else if (tag === Constant.ImageTag && attribute.indexOf("src") === 0 && ((v === null || v.length === 0 || v?.startsWith('blob:')))) {
                         if (this.vNext) {
-                            if (v.startsWith('blob:')) { 
+                            if (v.startsWith('blob:')) {
                                 if (data.width >= Setting.LargeSvg && data.height >= Setting.LargeSvg) {
                                     node.setAttribute(Constant.BlobUnavailable, `${Constant.Large}${Constant.Beta}`);
                                 } else {
@@ -626,12 +626,12 @@ export class LayoutHelper {
                                 }
                             }
                         } else {
-                                node.setAttribute(attribute, Asset.Transparent);
-                                let size = Constant.Large;
-                                if (data.width) {
-                                    size = data.width <= Setting.Medium ? Constant.Medium : (data.width <= Setting.Small ? Constant.Small : size);
-                                }
-                                node.setAttribute(Constant.Hide, size);
+                            node.setAttribute(attribute, Asset.Transparent);
+                            let size = Constant.Large;
+                            if (data.width) {
+                                size = data.width <= Setting.Medium ? Constant.Medium : (data.width <= Setting.Small ? Constant.Small : size);
+                            }
+                            node.setAttribute(Constant.Hide, size);
                         }
                     } else {
                         node.setAttribute(attribute, v);
@@ -692,7 +692,7 @@ export class LayoutHelper {
     private getIframeUnavailableCss = (): string => {
         if (this.vNext) {
             return `${Constant.IFrameTag}[${Constant.UnavailableSmall}] { ${iframeUnavailableSvgSmall} }` +
-                    `${Constant.IFrameTag}[${Constant.Unavailable}] { ${iframeUnavailableSvg[this.locale]} }`;
+                `${Constant.IFrameTag}[${Constant.Unavailable}] { ${iframeUnavailableSvg[this.locale]} }`;
         } else {
             return `${Constant.IFrameTag}[${Constant.Unavailable}] { background: url(${Asset.Unavailable}) no-repeat center center, url('${Asset.Cross}'); }`;
         }
@@ -701,7 +701,7 @@ export class LayoutHelper {
     private getBlobUnavailableCss = (): string => {
         if (this.vNext) {
             return  `${Constant.ImageTag}[${Constant.BlobUnavailable}=${Constant.Small}${Constant.Beta}] { ${blobUnavailableSvgSmall} }` +
-                    `${Constant.ImageTag}[${Constant.BlobUnavailable}=${Constant.Large}${Constant.Beta}] { ${blobUnavailableSvg[this.locale]} }`;
+                `${Constant.ImageTag}[${Constant.BlobUnavailable}=${Constant.Large}${Constant.Beta}] { ${blobUnavailableSvg[this.locale]} }`;
         }
         return '';
     }
@@ -709,12 +709,12 @@ export class LayoutHelper {
     private getImageHiddenCss = (): string => {
         if (this.vNext) {
             return  `${Constant.ImageTag}[${Constant.Hide}=${Constant.Small}${Constant.Beta}] { ${imageMaskedSvgSmall} }` +
-                    `${Constant.ImageTag}[${Constant.Hide}=${Constant.Large}${Constant.Beta}] { ${imageMaskedSvg[this.locale]} }`;
+                `${Constant.ImageTag}[${Constant.Hide}=${Constant.Large}${Constant.Beta}] { ${imageMaskedSvg[this.locale]} }`;
         } else {
             return  `${Constant.ImageTag}[${Constant.Hide}] { background-color: #CCC; background-image: url(${Asset.Hide}); background-repeat:no-repeat; background-position: center; }` +
-                    `${Constant.ImageTag}[${Constant.Hide}=${Constant.Small}] { background-size: 18px 18px; }` +
-                    `${Constant.ImageTag}[${Constant.Hide}=${Constant.Medium}] { background-size: 24px 24px; }` +
-                    `${Constant.ImageTag}[${Constant.Hide}=${Constant.Large}] { background-size: 36px 36px; }`;
+                `${Constant.ImageTag}[${Constant.Hide}=${Constant.Small}] { background-size: 18px 18px; }` +
+                `${Constant.ImageTag}[${Constant.Hide}=${Constant.Medium}] { background-size: 24px 24px; }` +
+                `${Constant.ImageTag}[${Constant.Hide}=${Constant.Large}] { background-size: 36px 36px; }`;
         }
     }
 

package/src/visualizer.ts

@@ -1,12 +1,12 @@
 import { Activity, Constant, ErrorLogger, LinkHandler, MergedPayload, Options, PlaybackState, ScrollMapInfo, Setting, ShortCircuitStrategy, Visualizer as VisualizerType } from "@clarity-types/visualize";
-import { Data } from "clarity-js";
-import type { Data as DecodedData, Interaction, Layout } from "clarity-decode";
+import { Data } from "@gemx-dev/clarity-js";
+import type { Data as DecodedData, Interaction, Layout } from "@gemx-dev/clarity-decode";
 import { DataHelper } from "./data";
 import { EnrichHelper } from "./enrich";
 import { HeatmapHelper } from "./heatmap";
 import { InteractionHelper } from "./interaction";
 import { LayoutHelper } from "./layout";
-import { Dimension } from "clarity-js/types/data";
+import { Dimension } from "@gemx-dev/clarity-js/types/data";
 
 export class Visualizer implements VisualizerType {
     _state: PlaybackState = null;
@@ -164,75 +164,79 @@ export class Visualizer implements VisualizerType {
         this.interaction = new InteractionHelper(this.state, this.layout, options.vNext);
 
         // If discover event was passed, render it now
-        if (options.dom) { 
+        if (options.dom) {
             await this.layout.dom(options.dom, options.useproxy);
         }
 
         return this;
     }
 
-    public render = async (events: DecodedData.DecodedEvent[]): Promise<void> => {
+    public render = (events: DecodedData.DecodedEvent[]): void => {
         if (this.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;
-            this.interaction.clearOldClickVisualizations(time);
-            switch (entry.event) {
-                case Data.Event.Metric:
-                    this.data.metric(entry as DecodedData.MetricEvent);
-                    break;
-                case Data.Event.Dimension:
-                    if(entry.data[Dimension.InteractionNextPaint]){
+        for (const entry of events) {
+            try {
+                time = entry.time;
+                this.interaction.clearOldClickVisualizations(time);
+                switch (entry.event) {
+                    case Data.Event.Metric:
                         this.data.metric(entry as DecodedData.MetricEvent);
-                    }
-                    break;
-                case Data.Event.Region:
-                    this.data.region(entry as Layout.RegionEvent);
-                    break;
-                case Data.Event.Mutation:
-                case Data.Event.Snapshot:
-                    await this.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:
-                    this.interaction.pointer(entry as Interaction.PointerEvent);
-                    break;
-                case Data.Event.Visibility:
-                    this.interaction.visibility(entry as Interaction.VisibilityEvent);
-                    break;
-                case Data.Event.Input:
-                    this.interaction.input(entry as Interaction.InputEvent);
-                    break;
-                case Data.Event.Selection:
-                    this.interaction.selection(entry as Interaction.SelectionEvent);
-                    break;
-                case Data.Event.Resize:
-                    this.interaction.resize(entry as Interaction.ResizeEvent);
-                    break;
-                case Data.Event.Scroll:
-                    this.interaction.scroll(entry as Interaction.ScrollEvent);
-                    break;
-                case Data.Event.StyleSheetAdoption:
-                case Data.Event.StyleSheetUpdate:
-                    this.layout.styleChange(entry as Layout.StyleSheetEvent);
-                    break;                
-                case Data.Event.Animation:
-                    this.layout.animateChange(entry as Layout.AnimationEvent);
-                    break;
-                case Data.Event.CustomElement:
-                    this.layout.customElement(entry as Layout.CustomElementEvent);
-                    break;
+                        break;
+                    case Data.Event.Dimension:
+                        if(entry.data[Dimension.InteractionNextPaint]){
+                            this.data.metric(entry as DecodedData.MetricEvent);
+                        }
+                        break;
+                    case Data.Event.Region:
+                        this.data.region(entry as Layout.RegionEvent);
+                        break;
+                    case Data.Event.Mutation:
+                    case Data.Event.Snapshot:
+                        this.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:
+                        this.interaction.pointer(entry as Interaction.PointerEvent);
+                        break;
+                    case Data.Event.Visibility:
+                        this.interaction.visibility(entry as Interaction.VisibilityEvent);
+                        break;
+                    case Data.Event.Input:
+                        this.interaction.input(entry as Interaction.InputEvent);
+                        break;
+                    case Data.Event.Selection:
+                        this.interaction.selection(entry as Interaction.SelectionEvent);
+                        break;
+                    case Data.Event.Resize:
+                        this.interaction.resize(entry as Interaction.ResizeEvent);
+                        break;
+                    case Data.Event.Scroll:
+                        this.interaction.scroll(entry as Interaction.ScrollEvent);
+                        break;
+                    case Data.Event.StyleSheetAdoption:
+                    case Data.Event.StyleSheetUpdate:
+                        this.layout.styleChange(entry as Layout.StyleSheetEvent);
+                        break;
+                    case Data.Event.Animation:
+                        this.layout.animateChange(entry as Layout.AnimationEvent);
+                        break;
+                    case Data.Event.CustomElement:
+                        this.layout.customElement(entry as Layout.CustomElementEvent);
+                        break;
+                }
+            }
+            catch (e) {
+                this._state.options.logerror?.(e);
             }
         }
-
         if (events.length > 0) {
             // Update pointer trail at the end of every frame
             this.interaction.trail(time);

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import { MergedPayload, ResizeHandler, Visualize, Visualizer, ShortCircuitStrategy } from "./visualize";
-import { Data, Diagnostic, Interaction, Layout } from "clarity-decode"
+import { Data, Diagnostic, Interaction, Layout } from "@gemx-dev/clarity-decode"
 
 /**
  * @deprecated Use Visualizer instead.

package/types/visualize.d.ts

@@ -1,4 +1,4 @@
-import { Data, Layout } from "clarity-decode";
+import { Data, Layout } from "@gemx-dev/clarity-decode";
 
 /**
  * @deprecated Use Visualizer instead.
@@ -25,7 +25,7 @@ export class Visualizer {
     clearmap: () => void;
     scrollmap: (data?: ScrollMapInfo[], averageFold?: number, addMarkers?: boolean) => void;
     merge: (decoded: Data.DecodedPayload[]) => MergedPayload;
-    render: (events: Data.DecodedEvent[]) =>  Promise<void>;
+    render: (events: Data.DecodedEvent[]) =>  void;
     setup: (target: Window, options: Options) => Promise<Visualizer>;
     time: () => number;
     get: (hash: string) => HTMLElement;
@@ -154,7 +154,7 @@ export const enum Constant {
     Region = "clarity-region",
     AdoptedStyleSheet = "clarity-adopted-style",
     CustomStyleTag = "clarity-custom-styles",
-    Id = "data-clarity-id", 
+    Id = "data-clarity-id",
     HashAlpha = "data-clarity-hashalpha",
     HashBeta = "data-clarity-hashbeta",
     Hide = "data-clarity-hide",
@@ -164,14 +164,14 @@ export const enum Constant {
     Suspend = "data-clarity-suspend",
     Hidden = "hidden",
     Visible = "visible",
-    None = "none",    
+    None = "none",
     Small = "s",
     Medium = "m",
     Large = "l",
     Beta = "b",
     Dom = "dom",
     Context = "2d",
-    Pixel = "px",    
+    Pixel = "px",
     Separator = "X",
     Absolute = "absolute",
     Black = "black",