@gemx-dev/clarity-visualize 3.5.3 → 3.5.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "GemX Heatmap Visualize (Clarity) fork",
   "license": "MIT",
   "main": "build/clarity.visualize.js",
@@ -27,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 };