Merge pull request #569 from microsoft/zoeyang/attentionmap

recording start & end element hash while scrolling

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.7.29",
+  "version": "0.7.30",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-decode/src/interaction.ts

@@ -72,7 +72,9 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
             let scrollData: Interaction.ScrollData = {
                 target: tokens[2] as number,
                 x: tokens[3] as number,
-                y: tokens[4] as number
+                y: tokens[4] as number,
+                top: tokens[5] as string,
+                bottom: tokens[6] as string
             };
             return { time, event, data: scrollData };
         case Data.Event.Timeline:

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.7.29";
+let version = "0.7.30";
 export default version;

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

@@ -5,6 +5,7 @@ import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import { iframe } from "@src/layout/dom";
+import * as dom from "../layout/dom";
 import { target } from "@src/layout/target";
 import encode from "./encode";
 
@@ -39,7 +40,16 @@ 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);
-    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y} };
+    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 = getPositionHash(xPosition, startYPosition);
+    const bottom = getPositionHash(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; }
@@ -53,6 +63,23 @@ function recompute(event: UIEvent = null): void {
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
 
+function getPositionHash(x: number, y: number): string {
+    let node: Node;
+    if ("caretPositionFromPoint" in document) {
+        node = (document as any).caretPositionFromPoint(x, y)?.offsetNode;
+    } else if ("caretRangeFromPoint" in document) {
+        node = document.caretRangeFromPoint(x, y)?.startContainer;
+    }
+    if (!node) {
+        node = document.elementFromPoint(x, y) as Node;
+    }
+    if (node && node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    return dom.get(node)?.hash?.[1];
+}
+
 export function reset(): void {
     state = [];
 }

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

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

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",