@gemx-dev/clarity-visualize 3.5.2 → 3.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gemx-dev/clarity-visualize
 
+## 3.5.4
+
+### Patch Changes
+
+- [#34](https://github.com/ducky0209/gemx-sdk/pull/34) [`ee65886`](https://github.com/ducky0209/gemx-sdk/commit/ee6588699a5be630fe8b688806f51c8417b73c4c) Thanks [@ducky0209](https://github.com/ducky0209)! - Update logic show heatmap
+
+## 3.5.3
+
+### Patch Changes
+
+- [`5e9d540`](https://github.com/ducky0209/gemx-sdk/commit/5e9d5401afda160251a62c6e0116e91d63f08ab9) Thanks [@ducky0209](https://github.com/ducky0209)! - Update contend readme
+
 ## 3.5.2
 
 ### Patch Changes

package/README.md

@@ -1,26 +1 @@
-# Clarity
-Clarity is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance. 
-
-It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.
-
-This package takes the decoded data from [clarity-decode](https://github.com/microsoft/clarity/tree/master/packages/clarity-decode) and turns it into pixel-perfect session replay, exactly how the user saw it.
-
-We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance. 
-
-## Examples
-Here are some example sessions on popular websites visualized to demonstrate the telemetry captured:
-1. CNN (Web)
-</br><a href="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif"><img src="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif" title="Clarity - CNN Example"/></a>
-
-2. Cook with Manali (Mobile)
-</br><a href="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif"><img src="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif" title="Clarity - Cook With Manali Example"/></a> 
-
-## Privacy Notice
-Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server.
-
-## Improving Clarity
-If you haven't already done so, start contributing by following instructions **[here](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**.
-
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
-
-Happy coding!
+## GemX Heatmap Visualize — `@gemx-dev/clarity-visualize`

package/package.json

@@ -1,31 +1,12 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "3.5.2",
-  "description": "An analytics library that uses web page interactions to generate aggregated insights",
-  "author": "Microsoft Corp.",
+  "version": "3.5.4",
+  "description": "GemX Heatmap Visualize (Clarity) fork",
   "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.8.38"
   },
@@ -46,6 +27,7 @@
   "scripts": {
     "build": "yarn build:clean && yarn build:main",
     "build:main": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "build:main:watch": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript --watch",
     "build:clean": "del-cli build/*",
     "tslint": "tslint --project ./",
     "tslint:fix": "tslint --fix --project ./ --force",

package/src/heatmap.ts

@@ -1,16 +1,9 @@
-import {
-  Activity,
-  Constant,
-  Heatmap,
-  Setting,
-  ScrollMapInfo,
-  PlaybackState,
-} from '@clarity-types/visualize';
-import { Data } from 'clarity-js';
-import { LayoutHelper } from './layout';
+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'];
+  static COLORS = ["blue", "cyan", "lime", "yellow", "red"];
   data: Activity = null;
   scrollData: ScrollMapInfo[] = null;
   max: number = null;
@@ -45,8 +38,8 @@ export class HeatmapHelper {
     // 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);
+      win.removeEventListener("scroll", this.redraw, true);
+      win.removeEventListener("resize", this.redraw, true);
     }
   };
 
@@ -75,23 +68,18 @@ export class HeatmapHelper {
     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,
-    );
+    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 huePercentView = 1 - currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum;
+          console.log(`🚀 🐥 ~ HeatmapHelper ~ huePercentView:`, huePercentView);
           const percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
           const hue = huePercentView * Setting.MaxHue;
+          console.log(`🚀 🐥 ~ HeatmapHelper ~ hue:`, hue);
           if (percentView <= 1) {
             grd.addColorStop(percentView, `hsla(${hue}, 100%, 50%, 0.6)`);
           }
@@ -101,52 +89,27 @@ export class HeatmapHelper {
         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,
-          );
+          this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
         }
       }
     }
   };
 
-  private addInfoMarkers = (
-    context: CanvasRenderingContext2D,
-    scrollMapInfo: ScrollMapInfo[],
-    width: number,
-    height: number,
-    avgFold: number,
-  ): void => {
+  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 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 => {
+  private addMarker = (context: CanvasRenderingContext2D, heatmapWidth: number, label: string, markerY: number, markerWidth: number): void => {
     context.beginPath();
     context.moveTo(0, markerY);
     context.lineTo(heatmapWidth, markerY);
@@ -213,9 +176,9 @@ export class HeatmapHelper {
       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;
+      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);
@@ -276,7 +239,7 @@ export class HeatmapHelper {
       }
       this.timeout = setTimeout(this.click, Setting.Interval);
     } else if (this.scrollData) {
-      if (event.type != 'scroll') {
+      if (event.type != "scroll") {
         if (this.timeout) {
           clearTimeout(this.timeout);
         }
@@ -289,15 +252,12 @@ export class HeatmapHelper {
     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;
+    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;
       el && console.log(`🚀 🐥 ~ HeatmapHelper ~ el:`, el);
-      if (el && typeof el.getBoundingClientRect === 'function') {
+      if (el && typeof el.getBoundingClientRect === "function") {
         let r = el.getBoundingClientRect();
         let v = this.visible(el, r, height);
         // Process clicks for only visible elements
@@ -320,7 +280,7 @@ export class HeatmapHelper {
     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') {
+      if (parts[2] === "1") {
         output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
       }
     }
@@ -337,10 +297,7 @@ export class HeatmapHelper {
         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)
-          ) {
+          if (e.tagName === Constant.Canvas || (e.id && e.id.indexOf(Constant.ClarityPrefix) === 0)) {
             continue;
           }
           visibility = e === el;

package/src/layout.ts

@@ -1,114 +1,107 @@
-import { Data, Layout } from 'clarity-js';
-import type { Layout as DecodedLayout } from '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 sharedStyle from './styles/shared.css';
+import { Data, Layout } from "clarity-js";
+import type { Layout as DecodedLayout } from "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 sharedStyle from "./styles/shared.css";
 
 /* BEGIN blobUnavailableSvgs */
-import blobUnavailableSvgEnglish from './styles/blobUnavailable/english.svg';
-import blobUnavailableSvgSmall from './styles/blobUnavailable/iconOnly.svg';
-import blobUnavailableSvgChineseSimplified from './styles/blobUnavailable/chineseSimplified.svg';
-import blobUnavailableSvgChineseTraditional from './styles/blobUnavailable/chineseTraditional.svg';
-import blobUnavailableSvgJapanese from './styles/blobUnavailable/japanese.svg';
-import blobUnavailableSvgKorean from './styles/blobUnavailable/korean.svg';
-import blobUnavailableSvgRussian from './styles/blobUnavailable/russian.svg';
-import blobUnavailableSvgSpanish from './styles/blobUnavailable/spanish.svg';
-import blobUnavailableSvgTurkish from './styles/blobUnavailable/turkish.svg';
-import blobUnavailableSvgDutch from './styles/blobUnavailable/dutch.svg';
-import blobUnavailableSvgFrench from './styles/blobUnavailable/french.svg';
-import blobUnavailableSvgGerman from './styles/blobUnavailable/german.svg';
-import blobUnavailableSvgItalian from './styles/blobUnavailable/italian.svg';
-import blobUnavailableSvgPortuguese from './styles/blobUnavailable/portuguese.svg';
+import blobUnavailableSvgEnglish from "./styles/blobUnavailable/english.svg";
+import blobUnavailableSvgSmall from "./styles/blobUnavailable/iconOnly.svg";
+import blobUnavailableSvgChineseSimplified from "./styles/blobUnavailable/chineseSimplified.svg";
+import blobUnavailableSvgChineseTraditional from "./styles/blobUnavailable/chineseTraditional.svg";
+import blobUnavailableSvgJapanese from "./styles/blobUnavailable/japanese.svg";
+import blobUnavailableSvgKorean from "./styles/blobUnavailable/korean.svg";
+import blobUnavailableSvgRussian from "./styles/blobUnavailable/russian.svg";
+import blobUnavailableSvgSpanish from "./styles/blobUnavailable/spanish.svg";
+import blobUnavailableSvgTurkish from "./styles/blobUnavailable/turkish.svg";
+import blobUnavailableSvgDutch from "./styles/blobUnavailable/dutch.svg";
+import blobUnavailableSvgFrench from "./styles/blobUnavailable/french.svg";
+import blobUnavailableSvgGerman from "./styles/blobUnavailable/german.svg";
+import blobUnavailableSvgItalian from "./styles/blobUnavailable/italian.svg";
+import blobUnavailableSvgPortuguese from "./styles/blobUnavailable/portuguese.svg";
 const blobUnavailableSvg = {
-  'de-de': blobUnavailableSvgGerman,
-  'en-gb': blobUnavailableSvgEnglish,
-  'en-us': blobUnavailableSvgEnglish,
-  'es-es': blobUnavailableSvgSpanish,
-  'fr-fr': blobUnavailableSvgFrench,
-  'it-it': blobUnavailableSvgItalian,
-  'ja-jp': blobUnavailableSvgJapanese,
-  'ko-kr': blobUnavailableSvgKorean,
-  'nl-nl': blobUnavailableSvgDutch,
-  'pt-br': blobUnavailableSvgPortuguese,
-  'ru-ru': blobUnavailableSvgRussian,
-  'tr-tr': blobUnavailableSvgTurkish,
-  'zh-hans': blobUnavailableSvgChineseSimplified,
-  'zh-hant': blobUnavailableSvgChineseTraditional,
+  "de-de": blobUnavailableSvgGerman,
+  "en-gb": blobUnavailableSvgEnglish,
+  "en-us": blobUnavailableSvgEnglish,
+  "es-es": blobUnavailableSvgSpanish,
+  "fr-fr": blobUnavailableSvgFrench,
+  "it-it": blobUnavailableSvgItalian,
+  "ja-jp": blobUnavailableSvgJapanese,
+  "ko-kr": blobUnavailableSvgKorean,
+  "nl-nl": blobUnavailableSvgDutch,
+  "pt-br": blobUnavailableSvgPortuguese,
+  "ru-ru": blobUnavailableSvgRussian,
+  "tr-tr": blobUnavailableSvgTurkish,
+  "zh-hans": blobUnavailableSvgChineseSimplified,
+  "zh-hant": blobUnavailableSvgChineseTraditional,
 };
 /* END blobUnavailableSvgs */
 
 /* BEGIN iframeUnavailableSvgs */
-import iframeUnavailableSvgEnglish from './styles/iframeUnavailable/english.svg';
-import iframeUnavailableSvgSmall from './styles/iframeUnavailable/iconOnly.svg';
-import iframeUnavailableSvgChineseSimplified from './styles/iframeUnavailable/chineseSimplified.svg';
-import iframeUnavailableSvgChineseTraditional from './styles/iframeUnavailable/chineseTraditional.svg';
-import iframeUnavailableSvgJapanese from './styles/iframeUnavailable/japanese.svg';
-import iframeUnavailableSvgKorean from './styles/iframeUnavailable/korean.svg';
-import iframeUnavailableSvgRussian from './styles/iframeUnavailable/russian.svg';
-import iframeUnavailableSvgSpanish from './styles/iframeUnavailable/spanish.svg';
-import iframeUnavailableSvgTurkish from './styles/iframeUnavailable/turkish.svg';
-import iframeUnavailableSvgDutch from './styles/iframeUnavailable/dutch.svg';
-import iframeUnavailableSvgFrench from './styles/iframeUnavailable/french.svg';
-import iframeUnavailableSvgGerman from './styles/iframeUnavailable/german.svg';
-import iframeUnavailableSvgItalian from './styles/iframeUnavailable/italian.svg';
-import iframeUnavailableSvgPortuguese from './styles/iframeUnavailable/portuguese.svg';
+import iframeUnavailableSvgEnglish from "./styles/iframeUnavailable/english.svg";
+import iframeUnavailableSvgSmall from "./styles/iframeUnavailable/iconOnly.svg";
+import iframeUnavailableSvgChineseSimplified from "./styles/iframeUnavailable/chineseSimplified.svg";
+import iframeUnavailableSvgChineseTraditional from "./styles/iframeUnavailable/chineseTraditional.svg";
+import iframeUnavailableSvgJapanese from "./styles/iframeUnavailable/japanese.svg";
+import iframeUnavailableSvgKorean from "./styles/iframeUnavailable/korean.svg";
+import iframeUnavailableSvgRussian from "./styles/iframeUnavailable/russian.svg";
+import iframeUnavailableSvgSpanish from "./styles/iframeUnavailable/spanish.svg";
+import iframeUnavailableSvgTurkish from "./styles/iframeUnavailable/turkish.svg";
+import iframeUnavailableSvgDutch from "./styles/iframeUnavailable/dutch.svg";
+import iframeUnavailableSvgFrench from "./styles/iframeUnavailable/french.svg";
+import iframeUnavailableSvgGerman from "./styles/iframeUnavailable/german.svg";
+import iframeUnavailableSvgItalian from "./styles/iframeUnavailable/italian.svg";
+import iframeUnavailableSvgPortuguese from "./styles/iframeUnavailable/portuguese.svg";
 const iframeUnavailableSvg = {
-  'de-de': iframeUnavailableSvgGerman,
-  'en-gb': iframeUnavailableSvgEnglish,
-  'en-us': iframeUnavailableSvgEnglish,
-  'es-es': iframeUnavailableSvgSpanish,
-  'fr-fr': iframeUnavailableSvgFrench,
-  'it-it': iframeUnavailableSvgItalian,
-  'ja-jp': iframeUnavailableSvgJapanese,
-  'ko-kr': iframeUnavailableSvgKorean,
-  'nl-nl': iframeUnavailableSvgDutch,
-  'pt-br': iframeUnavailableSvgPortuguese,
-  'ru-ru': iframeUnavailableSvgRussian,
-  'tr-tr': iframeUnavailableSvgTurkish,
-  'zh-hans': iframeUnavailableSvgChineseSimplified,
-  'zh-hant': iframeUnavailableSvgChineseTraditional,
+  "de-de": iframeUnavailableSvgGerman,
+  "en-gb": iframeUnavailableSvgEnglish,
+  "en-us": iframeUnavailableSvgEnglish,
+  "es-es": iframeUnavailableSvgSpanish,
+  "fr-fr": iframeUnavailableSvgFrench,
+  "it-it": iframeUnavailableSvgItalian,
+  "ja-jp": iframeUnavailableSvgJapanese,
+  "ko-kr": iframeUnavailableSvgKorean,
+  "nl-nl": iframeUnavailableSvgDutch,
+  "pt-br": iframeUnavailableSvgPortuguese,
+  "ru-ru": iframeUnavailableSvgRussian,
+  "tr-tr": iframeUnavailableSvgTurkish,
+  "zh-hans": iframeUnavailableSvgChineseSimplified,
+  "zh-hant": iframeUnavailableSvgChineseTraditional,
 };
 /* END iframeUnavailableSvgs */
 
 /* BEGIN imageMaskedSvgs */
-import imageMaskedSvgEnglish from './styles/imageMasked/english.svg';
-import imageMaskedSvgSmall from './styles/imageMasked/iconOnly.svg';
-import imageMaskedSvgChineseSimplified from './styles/imageMasked/chineseSimplified.svg';
-import imageMaskedSvgChineseTraditional from './styles/imageMasked/chineseTraditional.svg';
-import imageMaskedSvgJapanese from './styles/imageMasked/japanese.svg';
-import imageMaskedSvgKorean from './styles/imageMasked/korean.svg';
-import imageMaskedSvgRussian from './styles/imageMasked/russian.svg';
-import imageMaskedSvgSpanish from './styles/imageMasked/spanish.svg';
-import imageMaskedSvgTurkish from './styles/imageMasked/turkish.svg';
-import imageMaskedSvgDutch from './styles/imageMasked/dutch.svg';
-import imageMaskedSvgFrench from './styles/imageMasked/french.svg';
-import imageMaskedSvgGerman from './styles/imageMasked/german.svg';
-import imageMaskedSvgItalian from './styles/imageMasked/italian.svg';
-import imageMaskedSvgPortuguese from './styles/imageMasked/portuguese.svg';
+import imageMaskedSvgEnglish from "./styles/imageMasked/english.svg";
+import imageMaskedSvgSmall from "./styles/imageMasked/iconOnly.svg";
+import imageMaskedSvgChineseSimplified from "./styles/imageMasked/chineseSimplified.svg";
+import imageMaskedSvgChineseTraditional from "./styles/imageMasked/chineseTraditional.svg";
+import imageMaskedSvgJapanese from "./styles/imageMasked/japanese.svg";
+import imageMaskedSvgKorean from "./styles/imageMasked/korean.svg";
+import imageMaskedSvgRussian from "./styles/imageMasked/russian.svg";
+import imageMaskedSvgSpanish from "./styles/imageMasked/spanish.svg";
+import imageMaskedSvgTurkish from "./styles/imageMasked/turkish.svg";
+import imageMaskedSvgDutch from "./styles/imageMasked/dutch.svg";
+import imageMaskedSvgFrench from "./styles/imageMasked/french.svg";
+import imageMaskedSvgGerman from "./styles/imageMasked/german.svg";
+import imageMaskedSvgItalian from "./styles/imageMasked/italian.svg";
+import imageMaskedSvgPortuguese from "./styles/imageMasked/portuguese.svg";
 const imageMaskedSvg = {
-  'de-de': imageMaskedSvgGerman,
-  'en-gb': imageMaskedSvgEnglish,
-  'en-us': imageMaskedSvgEnglish,
-  'es-es': imageMaskedSvgSpanish,
-  'fr-fr': imageMaskedSvgFrench,
-  'it-it': imageMaskedSvgItalian,
-  'ja-jp': imageMaskedSvgJapanese,
-  'ko-kr': imageMaskedSvgKorean,
-  'nl-nl': imageMaskedSvgDutch,
-  'pt-br': imageMaskedSvgPortuguese,
-  'ru-ru': imageMaskedSvgRussian,
-  'tr-tr': imageMaskedSvgTurkish,
-  'zh-hans': imageMaskedSvgChineseSimplified,
-  'zh-hant': imageMaskedSvgChineseTraditional,
+  "de-de": imageMaskedSvgGerman,
+  "en-gb": imageMaskedSvgEnglish,
+  "en-us": imageMaskedSvgEnglish,
+  "es-es": imageMaskedSvgSpanish,
+  "fr-fr": imageMaskedSvgFrench,
+  "it-it": imageMaskedSvgItalian,
+  "ja-jp": imageMaskedSvgJapanese,
+  "ko-kr": imageMaskedSvgKorean,
+  "nl-nl": imageMaskedSvgDutch,
+  "pt-br": imageMaskedSvgPortuguese,
+  "ru-ru": imageMaskedSvgRussian,
+  "tr-tr": imageMaskedSvgTurkish,
+  "zh-hans": imageMaskedSvgChineseSimplified,
+  "zh-hant": imageMaskedSvgChineseTraditional,
 };
 /* END imageMaskedSvgs */
 
@@ -127,23 +120,12 @@ export class LayoutHelper {
   animations = {};
   state: PlaybackState = null;
   stylesToApply: { [id: string]: string[] } = {};
-  BackgroundImageEligibleElements = [
-    'DIV',
-    'SECTION',
-    'ARTICLE',
-    'HEADER',
-    'FOOTER',
-    'ASIDE',
-    'NAV',
-    'SPAN',
-    'P',
-    'MAIN',
-  ];
+  BackgroundImageEligibleElements = ["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "ASIDE", "NAV", "SPAN", "P", "MAIN"];
   MaskedBackgroundImageStyle = `#CCC no-repeat center url("${Asset.Hide}")`;
   vNext: boolean;
   locale: string;
 
-  constructor(state: PlaybackState, isMobile = false, vNext = false, locale = 'en-us') {
+  constructor(state: PlaybackState, isMobile = false, vNext = false, locale = "en-us") {
     this.state = state;
     this.isMobile = isMobile;
     this.vNext = vNext;
@@ -199,10 +181,7 @@ export class LayoutHelper {
         let target = this.element(event.data.targetId);
         // only create the animation if we successfully found the target, an animation without a target will throw an error
         if (target) {
-          this.animations[event.data.id] = (target as HTMLElement).animate(
-            JSON.parse(event.data.keyFrames),
-            JSON.parse(event.data.timing),
-          );
+          this.animations[event.data.id] = (target as HTMLElement).animate(JSON.parse(event.data.keyFrames), JSON.parse(event.data.timing));
         }
         break;
       case AnimationOperation.Cancel:
@@ -267,16 +246,12 @@ export class LayoutHelper {
 
   public customElement = (event: DecodedLayout.CustomElementEvent): void => {
     if (!this.state.window.customElements.get(event.data.name)) {
-      this.state.window.customElements.define(
-        event.data.name,
-        class extends (this.state.window as typeof window).HTMLElement {},
-      );
+      this.state.window.customElements.define(event.data.name, class extends (this.state.window as typeof window).HTMLElement {});
     }
   };
 
   private setDocumentStyles(documentId: number, styleIds: string[]) {
-    let targetDocument =
-      documentId === -1 ? this.state.window.document : (this.element(documentId) as Document);
+    let targetDocument = documentId === -1 ? this.state.window.document : (this.element(documentId) as Document);
 
     if (!targetDocument) {
       if (!this.stylesToApply[documentId]) {
@@ -325,7 +300,7 @@ export class LayoutHelper {
       if (tag && tag.indexOf(Layout.Constant.IFramePrefix) === 0) {
         tag = node.tag.substr(Layout.Constant.IFramePrefix.length);
       }
-      if (parent === null && node.parent !== null && node.parent > -1 && tag !== 'HTML') {
+      if (parent === null && node.parent !== null && node.parent > -1 && tag !== "HTML") {
         // We are referencing a parent for this node that hasn't been created yet. Push it to a list of nodes to
         // try once we are finished with other nodes within this event. Though we don't require HTML tags to
         // have a parent as they are typically the root.
@@ -334,26 +309,13 @@ export class LayoutHelper {
       }
       switch (tag) {
         case Layout.Constant.DocumentTag:
-          let tagDoc =
-            tag !== node.tag
-              ? parent
-                ? (parent as HTMLIFrameElement).contentDocument
-                : null
-              : doc;
+          let tagDoc = tag !== node.tag ? (parent ? (parent as HTMLIFrameElement).contentDocument : null) : doc;
           if (tagDoc && tagDoc === doc && type === Data.Event.Discover) {
             this.reset();
           }
-          if (typeof XMLSerializer !== 'undefined' && tagDoc) {
+          if (typeof XMLSerializer !== "undefined" && tagDoc) {
             tagDoc.open();
-            tagDoc.write(
-              new XMLSerializer().serializeToString(
-                tagDoc.implementation.createDocumentType(
-                  node.attributes['name'],
-                  node.attributes['publicId'],
-                  node.attributes['systemId'],
-                ),
-              ),
-            );
+            tagDoc.write(new XMLSerializer().serializeToString(tagDoc.implementation.createDocumentType(node.attributes["name"], node.attributes["publicId"], node.attributes["systemId"])));
             tagDoc.close();
           }
           break;
@@ -366,9 +328,7 @@ export class LayoutHelper {
         case Layout.Constant.ShadowDomTag:
           if (parent) {
             let shadowRoot = this.element(node.id);
-            shadowRoot = shadowRoot
-              ? shadowRoot
-              : (parent as HTMLElement).attachShadow({ mode: 'open' });
+            shadowRoot = shadowRoot ? shadowRoot : (parent as HTMLElement).attachShadow({ mode: "open" });
             this.nodes[node.id] = shadowRoot;
             this.addToHashMap(node, shadowRoot);
             this.addStyles(node.id);
@@ -386,7 +346,7 @@ export class LayoutHelper {
             (suspendedElement as HTMLElement).setAttribute(Constant.Suspend, Layout.Constant.Empty);
           }
           break;
-        case 'HTML':
+        case "HTML":
           if (this.primaryHtmlNodeId === null) {
             this.primaryHtmlNodeId = node.id;
           }
@@ -398,11 +358,7 @@ export class LayoutHelper {
             this.insertDefaultElement(node, parent, pivot, doc, insert);
             break;
           }
-          let htmlDoc = isIframe
-            ? parent
-              ? (parent as HTMLIFrameElement).contentDocument
-              : null
-            : doc;
+          let htmlDoc = isIframe ? (parent ? (parent as HTMLIFrameElement).contentDocument : null) : doc;
           if (htmlDoc !== null) {
             let docElement = this.element(node.id) as HTMLElement;
             if (docElement === null) {
@@ -421,75 +377,60 @@ export class LayoutHelper {
             // If we are still processing discover events, keep the markup hidden until we are done
             if (type === Data.Event.Discover && !parent) {
               htmlDoc.documentElement.style.visibility = Constant.Hidden;
+              htmlDoc.documentElement.style.opacity = `${Constant.VisibleOpacity} !important`;
             }
             this.nodes[node.id] = htmlDoc.documentElement;
             this.addToHashMap(node, htmlDoc.documentElement);
           }
           break;
-        case 'HEAD':
+        case "HEAD":
           let headElement = this.element(node.id);
           if (headElement === null) {
             headElement = doc.createElement(node.tag);
             if (node.attributes && Layout.Constant.Base in node.attributes) {
-              let base = doc.createElement('base');
+              let base = doc.createElement("base");
               base.href = node.attributes[Layout.Constant.Base];
               headElement.appendChild(base);
             }
 
             // Add custom styles to assist with visualization
-            let custom = doc.createElement('style');
-            custom.setAttribute(Constant.CustomStyleTag, 'true');
+            let custom = doc.createElement("style");
+            custom.setAttribute(Constant.CustomStyleTag, "true");
             custom.innerText = this.getCustomStyle();
             headElement.appendChild(custom);
           }
           this.setAttributes(headElement as HTMLElement, node);
           insert(node, parent, headElement, pivot);
           break;
-        case 'LINK':
+        case "LINK":
           let linkElement = this.element(node.id) as HTMLLinkElement;
-          linkElement = linkElement
-            ? linkElement
-            : (this.createElement(doc, node.tag) as HTMLLinkElement);
+          linkElement = linkElement ? linkElement : (this.createElement(doc, node.tag) as HTMLLinkElement);
           if (!node.attributes) {
             node.attributes = {};
           }
           this.setAttributes(linkElement, node);
-          if ('rel' in node.attributes) {
-            if (node.attributes['rel'] === Constant.StyleSheet) {
+          if ("rel" in node.attributes) {
+            if (node.attributes["rel"] === Constant.StyleSheet) {
               this.stylesheets.push(
                 new Promise((resolve: () => void): void => {
                   const proxy = useproxy ?? this.state.options.useproxy;
                   if (proxy) {
                     if (linkElement.integrity) {
-                      linkElement.removeAttribute('integrity');
+                      linkElement.removeAttribute("integrity");
                     }
 
                     linkElement.href = proxy(linkElement.href, linkElement.id, Constant.StyleSheet);
                   }
-                  linkElement.onload = linkElement.onerror = this.style.bind(
-                    this,
-                    linkElement,
-                    resolve,
-                  );
+                  linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
                   setTimeout(resolve, LayoutHelper.TIMEOUT);
                 }),
               );
-            } else if (
-              (node.attributes['rel'].includes('preload') ||
-                node.attributes['rel'].includes('preconnect')) &&
-              (node.attributes?.as === 'style' || node.attributes?.as === 'font')
-            ) {
+            } 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,
-                  );
+                  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);
                 }),
               );
@@ -498,35 +439,25 @@ export class LayoutHelper {
           insert(node, parent, linkElement, pivot);
           break;
         case Layout.Constant.ImageTag:
-          let imgElement =
-            (this.element(node.id) as HTMLImageElement) ??
-            (this.createElement(doc, node.tag) as HTMLImageElement);
+          let imgElement = (this.element(node.id) as HTMLImageElement) ?? (this.createElement(doc, node.tag) as HTMLImageElement);
           const proxy = useproxy ?? this.state.options.useproxy;
           if (proxy && !!node.attributes?.src) {
-            node.attributes.src = proxy(
-              node.attributes.src,
-              node.attributes.id,
-              Layout.Constant.ImageTag,
-            );
+            node.attributes.src = proxy(node.attributes.src, node.attributes.id, Layout.Constant.ImageTag);
           }
           this.setAttributes(imgElement, node);
           this.resize(imgElement, node.width, node.height);
           insert(node, parent, imgElement, pivot);
           break;
-        case 'STYLE':
-          let styleElement =
-            (this.element(node.id) as HTMLStyleElement) ??
-            (doc.createElement(node.tag) as HTMLStyleElement);
+        case "STYLE":
+          let styleElement = (this.element(node.id) as HTMLStyleElement) ?? (doc.createElement(node.tag) as HTMLStyleElement);
           this.setAttributes(styleElement, node);
           styleElement.textContent = node.value;
           insert(node, parent, styleElement, pivot);
           this.style(styleElement);
           break;
-        case 'IFRAME':
+        case "IFRAME":
           let iframeElement = this.element(node.id) as HTMLIFrameElement;
-          iframeElement = iframeElement
-            ? iframeElement
-            : (this.createElement(doc, node.tag) as HTMLIFrameElement);
+          iframeElement = iframeElement ? iframeElement : (this.createElement(doc, node.tag) as HTMLIFrameElement);
           if (!node.attributes) {
             node.attributes = {};
           }
@@ -549,13 +480,7 @@ export class LayoutHelper {
     }
   };
 
-  private insertDefaultElement = (
-    node: DecodedLayout.DomData,
-    parent: Node,
-    pivot: Node,
-    doc: Document,
-    insert: (data: DecodedLayout.DomData, parent: Node, node: Node, previous: Node) => void,
-  ): void => {
+  private insertDefaultElement = (node: DecodedLayout.DomData, parent: Node, pivot: Node, doc: Document, insert: (data: DecodedLayout.DomData, parent: Node, node: Node, previous: Node) => void): void => {
     let domElement = this.element(node.id) as HTMLElement;
     domElement = domElement ? domElement : this.createElement(doc, node.tag);
     this.setAttributes(domElement as HTMLElement, node);
@@ -596,10 +521,7 @@ export class LayoutHelper {
 
   private createElement = (doc: Document, tag: string): HTMLElement => {
     if (tag && tag.indexOf(Layout.Constant.SvgPrefix) === 0) {
-      return doc.createElementNS(
-        Layout.Constant.SvgNamespace as string,
-        tag.substr(Layout.Constant.SvgPrefix.length),
-      ) as HTMLElement;
+      return doc.createElementNS(Layout.Constant.SvgNamespace as string, tag.substr(Layout.Constant.SvgPrefix.length)) as HTMLElement;
     }
     try {
       return doc.createElement(tag);
@@ -610,26 +532,14 @@ export class LayoutHelper {
     }
   };
 
-  private insertAfter = (
-    data: DecodedLayout.DomData,
-    parent: Node,
-    node: Node,
-    previous: Node,
-  ): void => {
+  private insertAfter = (data: DecodedLayout.DomData, parent: Node, node: Node, previous: Node): void => {
     // Skip over no-op changes where parent and previous element is still the same
     // In case of IFRAME, re-adding DOM at the exact same place will lead to loss of state and the markup inside will be destroyed
-    if (
-      this.events[data.id] &&
-      this.events[data.id].parent === data.parent &&
-      this.events[data.id].previous === data.previous
-    ) {
+    if (this.events[data.id] && this.events[data.id].parent === data.parent && this.events[data.id].previous === data.previous) {
       return;
     }
     // In case parent is a Shadow DOM, previous.parentElement will return null but previous.parentNode will return a valid node
-    let next =
-      previous && (previous.parentElement === parent || previous.parentNode === parent)
-        ? previous.nextSibling
-        : null;
+    let next = previous && (previous.parentElement === parent || previous.parentNode === parent) ? previous.nextSibling : null;
     next = previous === null && parent ? this.firstChild(parent) : next;
     this.insertBefore(data, parent, node, next);
   };
@@ -637,12 +547,8 @@ export class LayoutHelper {
   private firstChild = (node: Node): ChildNode => {
     let child = node.firstChild;
     // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
-    if (
-      child &&
-      child.nodeType === NodeType.ELEMENT_NODE &&
-      (child as HTMLElement).tagName === Layout.Constant.BaseTag
-    ) {
-      if ((child.nextSibling as HTMLElement)?.hasAttribute('clarity-custom-styles')) {
+    if (child && child.nodeType === NodeType.ELEMENT_NODE && (child as HTMLElement).tagName === Layout.Constant.BaseTag) {
+      if ((child.nextSibling as HTMLElement)?.hasAttribute("clarity-custom-styles")) {
         // Keep the custom style tag on top of the head to let client tags override its values.
         return child.nextSibling.nextSibling;
       }
@@ -653,17 +559,10 @@ export class LayoutHelper {
 
   // Mask images within a masked ancestor element in the node has a background image.
   private mask = (node: HTMLElement) => {
-    if (
-      node &&
-      this.BackgroundImageEligibleElements.includes(node.nodeName) &&
-      'getComputedStyle' in window &&
-      'closest' in node
-    ) {
+    if (node && this.BackgroundImageEligibleElements.includes(node.nodeName) && "getComputedStyle" in window && "closest" in node) {
       const urlPattern = /url\(['"]?([^'")]+)['"]?\)/;
       const computedStyles = window.getComputedStyle(node);
-      const hasBackgroundImage =
-        computedStyles.backgroundImage?.match(urlPattern) ||
-        computedStyles.background?.match(urlPattern);
+      const hasBackgroundImage = computedStyles.backgroundImage?.match(urlPattern) || computedStyles.background?.match(urlPattern);
       const masked = node.closest?.(`[${LayoutConstants.MaskData}]`);
 
       if (hasBackgroundImage && masked) {
@@ -672,12 +571,7 @@ export class LayoutHelper {
     }
   };
 
-  private insertBefore = (
-    data: DecodedLayout.DomData,
-    parent: Node,
-    node: Node,
-    next: Node,
-  ): void => {
+  private insertBefore = (data: DecodedLayout.DomData, parent: Node, node: Node, next: Node): void => {
     if (parent !== null) {
       // Compare against both parentNode and parentElement to ensure visualization works correctly for shadow DOMs
       next = next && next.parentElement !== parent && next.parentNode !== parent ? null : next;
@@ -685,8 +579,8 @@ export class LayoutHelper {
         parent.insertBefore(node, next);
         this.mask(node as HTMLElement);
       } catch (ex) {
-        console.warn('Node: ' + node + ' | Parent: ' + parent + ' | Data: ' + JSON.stringify(data));
-        console.warn('Exception encountered while inserting node: ' + ex);
+        console.warn("Node: " + node + " | Parent: " + parent + " | Data: " + JSON.stringify(data));
+        console.warn("Exception encountered while inserting node: " + ex);
       }
     } else if (parent === null && node.parentElement !== null) {
       node.parentElement.removeChild(node);
@@ -725,25 +619,17 @@ export class LayoutHelper {
       if (attributes[attribute] !== undefined) {
         try {
           let v = attributes[attribute];
-          if (attribute.indexOf('xlink:') === 0) {
-            node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, v);
+          if (attribute.indexOf("xlink:") === 0) {
+            node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
           } else if (attribute.indexOf(Layout.Constant.SameOrigin) === 0) {
             sameorigin = true;
-          } else if (attribute.indexOf('*') === 0) {
+          } else if (attribute.indexOf("*") === 0) {
             // Do nothing if we encounter internal Clarity attributes
-          } else if (
-            (tag === Constant.IFrameTag &&
-              (attribute.indexOf('src') === 0 || attribute.indexOf('allow') === 0)) ||
-            attribute === 'sandbox'
-          ) {
+          } else if ((tag === Constant.IFrameTag && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0)) || attribute === "sandbox") {
             node.setAttribute(`data-clarity-${attribute}`, v);
-          } else if (
-            tag === Constant.ImageTag &&
-            attribute.indexOf('src') === 0 &&
-            (v === null || v.length === 0 || v?.startsWith('blob:'))
-          ) {
+          } 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 {
@@ -760,12 +646,7 @@ export class LayoutHelper {
               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;
+                size = data.width <= Setting.Medium ? Constant.Medium : data.width <= Setting.Small ? Constant.Small : size;
               }
               node.setAttribute(Constant.Hide, size);
             }
@@ -773,17 +654,13 @@ export class LayoutHelper {
             node.setAttribute(attribute, v);
           }
         } catch (ex) {
-          console.warn('Node: ' + node + ' | ' + JSON.stringify(attributes));
-          console.warn('Exception encountered while adding attributes: ' + ex);
+          console.warn("Node: " + node + " | " + JSON.stringify(attributes));
+          console.warn("Exception encountered while adding attributes: " + ex);
         }
       }
     }
 
-    if (
-      sameorigin === false &&
-      tag === Constant.IFrameTag &&
-      typeof node.setAttribute === Constant.Function
-    ) {
+    if (sameorigin === false && tag === Constant.IFrameTag && typeof node.setAttribute === Constant.Function) {
       if (this.svgFitsText(node)) {
         node.setAttribute(Constant.Unavailable, Layout.Constant.Empty);
       } else {
@@ -810,7 +687,7 @@ export class LayoutHelper {
       return `*{scrollbar-width: none; scrollbar-gutter: unset;};`;
     }
 
-    return '';
+    return "";
   };
 
   private getCustomStyle = (): string => {
@@ -835,10 +712,7 @@ export class LayoutHelper {
 
   private getIframeUnavailableCss = (): string => {
     if (this.vNext) {
-      return (
-        `${Constant.IFrameTag}[${Constant.UnavailableSmall}] { ${iframeUnavailableSvgSmall} }` +
-        `${Constant.IFrameTag}[${Constant.Unavailable}] { ${iframeUnavailableSvg[this.locale]} }`
-      );
+      return `${Constant.IFrameTag}[${Constant.UnavailableSmall}] { ${iframeUnavailableSvgSmall} }` + `${Constant.IFrameTag}[${Constant.Unavailable}] { ${iframeUnavailableSvg[this.locale]} }`;
     } else {
       return `${Constant.IFrameTag}[${Constant.Unavailable}] { background: url(${Asset.Unavailable}) no-repeat center center, url('${Asset.Cross}'); }`;
     }
@@ -846,20 +720,14 @@ 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]} }`
-      );
+      return `${Constant.ImageTag}[${Constant.BlobUnavailable}=${Constant.Small}${Constant.Beta}] { ${blobUnavailableSvgSmall} }` + `${Constant.ImageTag}[${Constant.BlobUnavailable}=${Constant.Large}${Constant.Beta}] { ${blobUnavailableSvg[this.locale]} }`;
     }
-    return '';
+    return "";
   };
 
   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]} }`
-      );
+      return `${Constant.ImageTag}[${Constant.Hide}=${Constant.Small}${Constant.Beta}] { ${imageMaskedSvgSmall} }` + `${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; }` +
@@ -874,6 +742,6 @@ export class LayoutHelper {
     if (this.vNext) {
       return sharedStyle;
     }
-    return '';
+    return "";
   };
 }

package/src/visualizer.ts

@@ -1,24 +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 { 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 { 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 { 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";
 
 export class Visualizer implements VisualizerType {
   _state: PlaybackState = null;
@@ -43,11 +31,7 @@ export class Visualizer implements VisualizerType {
     return this.layout?.get(hash);
   };
 
-  private shortCircuitRendering = (
-    strategy: ShortCircuitStrategy,
-    domEvent: Layout.DomEvent,
-    hash: string,
-  ) => {
+  private shortCircuitRendering = (strategy: ShortCircuitStrategy, domEvent: Layout.DomEvent, hash: string) => {
     switch (strategy) {
       case ShortCircuitStrategy.HashFirstTimestamp:
         return this.layout.exists(hash);
@@ -55,10 +39,7 @@ export class Visualizer implements VisualizerType {
         if (this.hashFoundTime === -1 && this.layout.exists(hash)) {
           this.hashFoundTime = domEvent.time;
         }
-        return (
-          this.hashFoundTime > -1 &&
-          domEvent.time > this.hashFoundTime + Setting.VisualizationSettleBuffer
-        );
+        return this.hashFoundTime > -1 && domEvent.time > this.hashFoundTime + Setting.VisualizationSettleBuffer;
       case ShortCircuitStrategy.HashBeforeDeleted:
         for (let node of domEvent.data) {
           if ((node.hashAlpha === hash || node.hashBeta === hash) && node.parent === null) {
@@ -72,14 +53,7 @@ export class Visualizer implements VisualizerType {
     }
   };
 
-  public html = async (
-    decoded: DecodedData.DecodedPayload[],
-    target: Window,
-    hash: string = null,
-    useproxy?: LinkHandler,
-    logerror?: ErrorLogger,
-    shortCircuitStrategy: ShortCircuitStrategy = ShortCircuitStrategy.None,
-  ): Promise<Visualizer> => {
+  public html = async (decoded: DecodedData.DecodedPayload[], target: Window, hash: string = null, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy: ShortCircuitStrategy = ShortCircuitStrategy.None): Promise<Visualizer> => {
     if (decoded && decoded.length > 0 && target) {
       try {
         // Flatten the payload and parse all events out of them, sorted by time
@@ -132,6 +106,7 @@ export class Visualizer implements VisualizerType {
   };
 
   public clearmap = (): void => {
+    console.log(`🚀 🐥 ~ Visualizer ~ this.state:`, this.state);
     if (this.state === null) {
       throw new Error(`Initialize heatmap by calling "html" or "setup" prior to making this call.`);
     }
@@ -185,8 +160,8 @@ export class Visualizer implements VisualizerType {
   public setup = async (target: Window, options: Options): Promise<Visualizer> => {
     this.reset();
     // Infer options
-    options.canvas = 'canvas' in options ? options.canvas : true;
-    options.keyframes = 'keyframes' in options ? options.keyframes : false;
+    options.canvas = "canvas" in options ? options.canvas : true;
+    options.keyframes = "keyframes" in options ? options.keyframes : false;
 
     // Set visualization state
     this._state = { window: target, options };