resolve comments

packages/clarity-decode/src/layout.ts

@@ -1,6 +1,6 @@
 import { Constant } from "@clarity-types/data";
 import { helper, Data, Layout } from "clarity-js";
-import { DomData, LayoutEvent, Interaction, RegionVisibilityState  } from "../types/layout";
+import { DomData, LayoutEvent, Interaction, RegionVisibility  } from "../types/layout";
 
 const AverageWordLength = 6;
 const Space = " ";
@@ -29,8 +29,8 @@ export function decode(tokens: Data.Token[]): LayoutEvent {
                 if (typeof(tokens[i+2]) == Constant.Number) {
                     region = {
                         id: tokens[i] as number,
-                        interactionState: tokens[i + 1] as number,
-                        visibilityState: tokens[i + 2] as number,
+                        interaction: tokens[i + 1] as number,
+                        visibility: tokens[i + 2] as number,
                         name: tokens[i + 3] as string
                     };
                     increment = 4;
@@ -40,8 +40,8 @@ export function decode(tokens: Data.Token[]): LayoutEvent {
                         id: tokens[i] as number,
                         // For backward compatibility before 0.6.24 - where region states were sent as a single enum 
                         // we convert the value into the two states tracked after 0.6.24
-                        interactionState:  state >= Interaction.None ? state : Interaction.None,
-                        visibilityState: state <= RegionVisibilityState.ScrolledToEnd ? state : RegionVisibilityState.Rendered,
+                        interaction:  state >= Interaction.None ? state : Interaction.None,
+                        visibility: state <= RegionVisibility.ScrolledToEnd ? state : RegionVisibility.Rendered,
                         name: tokens[i + 2] as string
                     };
                     increment = 3;

packages/clarity-decode/types/layout.d.ts

@@ -12,7 +12,7 @@ export interface LayoutEvent extends PartialEvent {
 /* Redeclare enums */
 export import Constant = Layout.Constant;
 export import Interaction = Layout.InteractionState;
-export import RegionVisibilityState = Layout.RegionVisibilityState;
+export import RegionVisibility = Layout.RegionVisibility;
 
 /* Event Data */
 export interface DomData {

packages/clarity-js/src/layout/encode.ts

@@ -28,8 +28,8 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
             for (let r of region.state) {
                 tokens = [r.time, Event.Region];
                 tokens.push(r.data.id);
-                tokens.push(r.data.interactionState);
-                tokens.push(r.data.visibilityState);
+                tokens.push(r.data.interaction);
+                tokens.push(r.data.visibility);
                 tokens.push(r.data.name);
                 queue(tokens);
             }

packages/clarity-js/src/layout/region.ts

@@ -1,5 +1,5 @@
 import { Event, Setting } from "@clarity-types/data";
-import { InteractionState, RegionData, RegionState, RegionQueue, RegionVisibilityState } from "@clarity-types/layout";
+import { InteractionState, RegionData, RegionState, RegionQueue, RegionVisibility } from "@clarity-types/layout";
 import { time } from "@src/core/time";
 import * as dom from "@src/layout/dom";
 import encode from "@src/layout/encode";
@@ -46,16 +46,16 @@ export function exists(node: Node): boolean {
 
 export function track(id: number, event: Event): void {
     let node = dom.getNode(id);
-    let data = id in regions ? regions[id] : { id, visibilityState: RegionVisibilityState.Rendered, interactionState: InteractionState.None, name: regionMap.get(node) };
+    let data = id in regions ? regions[id] : { id, visibility: RegionVisibility.Rendered, interaction: InteractionState.None, name: regionMap.get(node) };
 
     // Determine the interaction state based on incoming event
-    let interactionState = InteractionState.None;
+    let interaction = InteractionState.None;
     switch (event) {
-        case Event.Click: interactionState = InteractionState.Clicked; break;
-        case Event.Input: interactionState = InteractionState.Input; break;
+        case Event.Click: interaction = InteractionState.Clicked; break;
+        case Event.Input: interaction = InteractionState.Input; break;
     }
     // Process updates to this region, if applicable
-    process(node, data, interactionState, data.visibilityState);
+    process(node, data, interaction, data.visibility);
 }
 
 export function compute(): void {
@@ -91,7 +91,7 @@ function handler(entries: IntersectionObserverEntry[]): void {
         // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
         if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
             let id = target ? dom.getId(target) : null;
-            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interactionState: InteractionState.None, visibilityState: RegionVisibilityState.Rendered };
+            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
 
             // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
             // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
@@ -100,25 +100,25 @@ function handler(entries: IntersectionObserverEntry[]): void {
             // If an element is either visible or was visible and has been scrolled to the end
             // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
             // Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
-            let scrolledToEnd = (visible || data.visibilityState == RegionVisibilityState.Visible) && Math.abs(rect.top) + viewport.height > rect.height;
+            let scrolledToEnd = (visible || data.visibility == RegionVisibility.Visible) && Math.abs(rect.top) + viewport.height > rect.height;
             // Process updates to this region, if applicable
-            process(target, data, data.interactionState, 
+            process(target, data, data.interaction, 
                         (scrolledToEnd ? 
-                            RegionVisibilityState.ScrolledToEnd :
-                            (visible ? RegionVisibilityState.Visible : RegionVisibilityState.Rendered)));
+                            RegionVisibility.ScrolledToEnd :
+                            (visible ? RegionVisibility.Visible : RegionVisibility.Rendered)));
 
             // Stop observing this element now that we have already received scrolled signal
-            if (data.visibilityState >= RegionVisibilityState.ScrolledToEnd && observer) { observer.unobserve(target); }
+            if (data.visibility >= RegionVisibility.ScrolledToEnd && observer) { observer.unobserve(target); }
         }
     }
     if (state.length > 0) { encode(Event.Region); }
 }
 
-function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibilityState): void {
+function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibility): void {
     // Check if received a state that supersedes existing state
-    let updated = s > d.interactionState || v > d.visibilityState;
-    d.interactionState = s > d.interactionState ? s : d.interactionState;
-    d.visibilityState = v > d.visibilityState ? v : d.visibilityState;
+    let updated = s > d.interaction || v > d.visibility;
+    d.interaction = s > d.interaction ? s : d.interaction;
+    d.visibility = v > d.visibility ? v : d.visibility;
     // If the corresponding node is already discovered, update the internal state
     // Otherwise, track it in a queue to reprocess later.
     if (d.id) {
@@ -130,7 +130,7 @@ function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibilit
 }
 
 function clone(r: RegionData): RegionState {
-    return { time: time(), data: { id: r.id, interactionState: r.interactionState, visibilityState: r.visibilityState, name: r.name }};
+    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name }};
 }
 
 export function reset(): void {

packages/clarity-js/types/layout.d.ts

@@ -17,7 +17,7 @@ export const enum InteractionState {
     Input = 30
 }
 
-export const enum RegionVisibilityState {
+export const enum RegionVisibility {
     Rendered = 0,
     Visible = 10,
     ScrolledToEnd = 13
@@ -186,8 +186,8 @@ export interface DocumentData {
 
 export interface RegionData {
     id: number;
-    visibilityState: RegionVisibilityState;
-    interactionState: InteractionState;
+    visibility: RegionVisibility;
+    interaction: InteractionState;
     name: string;    
 }
 

packages/clarity-visualize/src/data.ts

@@ -52,7 +52,7 @@ export function metric(event: Data.MetricEvent): void {
         // Append region information to metadata
         for (let name in regions) {
             let r = regions[name];
-            let className = (r.visibilityState === Layout.RegionVisibilityState.Visible ? "visible" : (r.interactionState === Layout.Interaction.Clicked ? "clicked" : Data.Constant.Empty));
+            let className = (r.visibility === Layout.RegionVisibility.Visible ? "visible" : (r.interaction === Layout.Interaction.Clicked ? "clicked" : Data.Constant.Empty));
             regionMarkup.push(`<span class="${className}">${name}</span>`);
         }
 
@@ -64,7 +64,7 @@ export function region(event: Layout.RegionEvent): void {
     let data = event.data;
     for (let r of data) {
         if (!(r.name in regions)) { 
-            regions[r.name] = { interactionState: r.interactionState , visibilityState: r.visibilityState }
+            regions[r.name] = { interaction: r.interaction , visibility: r.visibility }
         }
         regionMap[r.id] = r.name;
     }

packages/clarity-visualize/types/visualize.d.ts

@@ -39,8 +39,8 @@ export interface ScrollMapInfo {
 }
 
 export interface RegionState {
-    interactionState: Layout.Interaction,
-    visibilityState: Layout.RegionVisibility
+    interaction: Layout.Interaction,
+    visibility: Layout.RegionVisibility
  }
 
 export interface ElementData {