update top & bottom & dimension logging

packages/clarity-decode/src/interaction.ts

@@ -75,8 +75,6 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
                 y: tokens[4] as number,
                 top: tokens.length > 5 ? tokens[5] as string : null,
                 bottom: tokens.length > 6 ? tokens[6] as string : null,
-                topNode: null,
-                bottomNode: null
             };
             return { time, event, data: scrollData };
         case Data.Event.Timeline:

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

@@ -1,4 +1,4 @@
-import { Constant, Dimension, Event, Token } from "@clarity-types/data";
+import { Constant, Event, Token } from "@clarity-types/data";
 import * as scrub from "@src/core/scrub";
 import { time } from "@src/core/time";
 import * as baseline from "@src/data/baseline";
@@ -16,7 +16,6 @@ import * as submit from "@src/interaction/submit";
 import * as timeline from "@src/interaction/timeline";
 import * as unload from "@src/interaction/unload";
 import * as visibility from "@src/interaction/visibility";
-import * as dimension from "@src/data/dimension";
 
 export default async function (type: Event, ts: number = null): Promise<void> {
     let t = ts || time();
@@ -118,8 +117,8 @@ export default async function (type: Event, ts: number = null): Promise<void> {
         case Event.Scroll:
             for (let entry of scroll.state) {
                 let sTarget = metadata(entry.data.target as Node, entry.event);
-                const top = metadata(entry.data.topNode, entry.event);
-                const bottom = metadata(entry.data.bottomNode, entry.event);
+                const top = metadata(entry.data.top as Node, entry.event);
+                const bottom = metadata(entry.data.bottom as Node, entry.event);
                 if (sTarget.id > 0) {
                     tokens = [entry.time, entry.event];
                     tokens.push(sTarget.id);
@@ -131,10 +130,6 @@ export default async function (type: Event, ts: number = null): Promise<void> {
                     baseline.track(entry.event, entry.data.x, entry.data.y, entry.time);
                 }
             }
-            const initTop = metadata(scroll.initElement?.topNode, null);
-            const initBottom = metadata(scroll.initElement?.bottomNode, null);
-            dimension.log(Dimension.InitialTop, initTop?.hash?.[1]);
-            dimension.log(Dimension.InitialBottom, initBottom?.hash?.[1]);
             scroll.reset();
             break;
         case Event.Change:

packages/clarity-js/src/interaction/scroll.ts

@@ -1,5 +1,5 @@
 import { Event } from "@clarity-types/data";
-import { ScrollData, ScrollState, Setting } from "@clarity-types/interaction";
+import { ScrollState, Setting } from "@clarity-types/interaction";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -9,7 +9,6 @@ import { target } from "@src/layout/target";
 import encode from "./encode";
 
 export let state: ScrollState[] = [];
-export let initElement: ScrollData;
 let timeout: number = null;
 
 export function start(): void {
@@ -40,23 +39,12 @@ function recompute(event: UIEvent = null): void {
     // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
     let x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round((element as HTMLElement).scrollLeft);
     let y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round((element as HTMLElement).scrollTop);
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    const xPosition = width / 3;
-    const yOffset = width > height ? height * 0.15 : height * 0.2;
-    const startYPosition = yOffset;
-    const endYPosition = height - yOffset;
-    const topNode = getPositionNode(xPosition, startYPosition);
-    const bottomNode = getPositionNode(xPosition, endYPosition);
+    const nodes = getTopAndBottomNodes();
 
-    let current: ScrollState =
-        { time: time(event), event: Event.Scroll, data: {target: element, x, y, topNode, bottomNode, top: null, bottom: null} };
+    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top: nodes[0], bottom: nodes[1]} };
 
     // We don't send any scroll events if this is the first event and the current position is top (0,0)
-    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
-        initElement = {target: element, x, y, topNode, bottomNode, top: null, bottom: null};
-        return;
-    }
+    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) { return; }
 
     let length = state.length;
     let last = length > 1 ? state[length - 2] : null;
@@ -67,6 +55,18 @@ function recompute(event: UIEvent = null): void {
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
 
+export function getTopAndBottomNodes(): Node[] {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const xPosition = width / 3;
+    const yOffset = width > height ? height * 0.15 : height * 0.2;
+    const startYPosition = yOffset;
+    const endYPosition = height - yOffset;
+    const top = getPositionNode(xPosition, startYPosition);
+    const bottom = getPositionNode(xPosition, endYPosition);
+    return [top, bottom];
+}
+
 function getPositionNode(x: number, y: number): Node {
     let node: Node;
     if ("caretPositionFromPoint" in document) {

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

@@ -1,5 +1,5 @@
 import { Priority, Timer } from "@clarity-types/core";
-import { Event, Metric } from "@clarity-types/data";
+import { Dimension, Event, Metric } from "@clarity-types/data";
 import { Source } from "@clarity-types/layout";
 import measure from "@src/core/measure";
 import * as task from "@src/core/task";
@@ -10,6 +10,9 @@ import encode from "@src/layout/encode";
 import * as region from "@src/layout/region";
 import traverse from "@src/layout/traverse";
 import { checkDocumentStyles } from "@src/layout/style";
+import * as scroll from "@src/interaction/scroll";
+import { metadata } from "@src/layout/target";
+import * as dimension from "@src/data/dimension";
 
 export function start(): void {
     task.schedule(discover, Priority.High).then((): void => {
@@ -20,11 +23,19 @@ export function start(): void {
 
 async function discover(): Promise<void> {
     let ts = time();
-    
     let timer: Timer = { id: id(), cost: Metric.LayoutCost };
     task.start(timer);
     await traverse(document, timer, Source.Discover, ts);
+    logInitial();
     checkDocumentStyles(document, ts);
     await encode(Event.Discover, timer, ts);
     task.stop(timer);
 }
+
+async function logInitial(): Promise<void> {
+    const nodes = scroll.getTopAndBottomNodes();
+    const initTop = metadata(nodes[0] as Node, null);
+    const initBottom = metadata(nodes[1] as Node, null);
+    dimension.log(Dimension.InitialTop, initTop?.hash?.[1]);
+    dimension.log(Dimension.InitialBottom, initBottom?.hash?.[1]);
+}

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

@@ -134,10 +134,8 @@ export interface ScrollData {
     target: Target;
     x: number;
     y: number;
-    topNode: Node;
-    bottomNode: Node;
-    top: string;
-    bottom: string;
+    top: Node | string;
+    bottom: Node | string;
 }
 
 export interface SelectionData {