Merge pull request #587 from microsoft/zoeyang/logInitial

tracking initial top & bottom elements

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

@@ -117,13 +117,17 @@ 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.top as Node, entry.event);
+                const bottom = metadata(entry.data.bottom as Node, entry.event);
+                const sTopHash = top?.hash ? top.hash.join(Constant.Dot) : Constant.Empty;
+                const sBottomHash = bottom?.hash ? bottom.hash.join(Constant.Dot) : Constant.Empty;
                 if (sTarget.id > 0) {
                     tokens = [entry.time, entry.event];
                     tokens.push(sTarget.id);
                     tokens.push(entry.data.x);
                     tokens.push(entry.data.y);
-                    tokens.push(entry.data.top);
-                    tokens.push(entry.data.bottom);
+                    tokens.push(sTopHash);
+                    tokens.push(sBottomHash);
                     queue(tokens);
                     baseline.track(entry.event, entry.data.x, entry.data.y, entry.time);
                 }

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

@@ -1,14 +1,17 @@
-import { Event } from "@clarity-types/data";
+import { Constant, Dimension, Event } from "@clarity-types/data";
 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";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
-import { iframe, get } from "@src/layout/dom";
-import { target } from "@src/layout/target";
+import { iframe } from "@src/layout/dom";
+import { target, metadata } from "@src/layout/target";
 import encode from "./encode";
+import * as dimension from "@src/data/dimension";
 
 export let state: ScrollState[] = [];
+let initialTop: Node = null;
+let initialBottom: Node = null;
 let timeout: number = null;
 
 export function start(): void {
@@ -45,13 +48,17 @@ function recompute(event: UIEvent = null): void {
     const yOffset = width > height ? height * 0.15 : height * 0.2;
     const startYPosition = yOffset;
     const endYPosition = height - yOffset;
-    const top = getPositionHash(xPosition, startYPosition);
-    const bottom = getPositionHash(xPosition, endYPosition);
+    const top = getPositionNode(xPosition, startYPosition);
+    const bottom = getPositionNode(xPosition, endYPosition);
 
     let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y, top, bottom} };
 
     // 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)) { return; }
+    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
+        initialTop = top;
+        initialBottom = bottom;
+        return;
+    }
 
     let length = state.length;
     let last = length > 1 ? state[length - 2] : null;
@@ -62,7 +69,7 @@ function recompute(event: UIEvent = null): void {
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
 
-function getPositionHash(x: number, y: number): string {
+function getPositionNode(x: number, y: number): Node {
     let node: Node;
     if ("caretPositionFromPoint" in document) {
         node = (document as any).caretPositionFromPoint(x, y)?.offsetNode;
@@ -76,11 +83,13 @@ function getPositionHash(x: number, y: number): string {
         node = node.parentNode;
     }
 
-    return get(node)?.hash?.[1];
+    return node;
 }
 
 export function reset(): void {
     state = [];
+    initialTop = null;
+    initialBottom = null;
 }
 
 function process(event: Event): void {
@@ -93,7 +102,20 @@ function similar(last: ScrollState, current: ScrollState): boolean {
     return (dx * dx + dy * dy < Setting.Distance * Setting.Distance) && (current.time - last.time < Setting.Interval);
 }
 
+export function compute(): void {
+    if (initialTop) {
+        const top = metadata(initialTop, null);
+        dimension.log(Dimension.InitialScrollTop, top?.hash?.join(Constant.Dot));
+    }
+    if (initialBottom) {
+        const bottom = metadata(initialBottom, null);
+        dimension.log(Dimension.InitialScrollBottom, bottom?.hash?.join(Constant.Dot));
+    }
+}
+
 export function stop(): void {
     clearTimeout(timeout);
     state = [];
+    initialTop = null;
+    initialBottom = null;
 }

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

@@ -10,17 +10,18 @@ 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";
 
 export function start(): void {
     task.schedule(discover, Priority.High).then((): void => {
         measure(doc.compute)();
         measure(region.compute)();
+        measure(scroll.compute)();
     });
 }
 
 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);

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

@@ -145,7 +145,9 @@ export const enum Dimension {
     ConnectionType = 27,
     Dob = 28,
     CookieVersion = 29,
-    DeviceFamily = 30 // Allows iOS SDK to override the DeviceFamily value parsed from UserAgent.
+    DeviceFamily = 30, // Allows iOS SDK to override the DeviceFamily value parsed from UserAgent.
+    InitialScrollTop = 31,
+    InitialScrollBottom = 32
 }
 
 export const enum Check {

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

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