From 7e85253aa4c2f0cc5837e8175dc639c7c6d02386 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Tue, 18 Jun 2024 15:34:49 +0200
Subject: [PATCH] feat: Added tap log as a backup measure.

---
 src/App.js                                    |  1 +
 .../webpage_container/StudySite.jsx           | 31 +++++++++++++------
 src/core/log/SensorLogger.jsx                 | 15 +++++++--
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2edf7ff..d856604 100644
--- a/src/App.js
+++ b/src/App.js
@@ -63,6 +63,7 @@ export const sensorLogState = createStore(
     () => ({
       sensorLog: {
         mouseLog: [],
+        tapLog: [],
         clickedElements: [],
         visitedSites: [],
         playedSonifications: [],
diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx
index 0d6a9e1..21bc777 100644
--- a/src/components/webpage_container/StudySite.jsx
+++ b/src/components/webpage_container/StudySite.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import h337 from "heatmap.js";
 import { HEATMAP_MAX } from "../../core/Constants";
+import { pushToTapLog } from "../../core/log/SensorLogger";
 
 var stopInput = false;
 
@@ -50,13 +51,15 @@ export function StudySite(props) {
       // Add data to the heatmap
       const currentTime = new Date();
       const websiteLocation = window.location.href;
-      heatmapInstance.addData({
+      const data = {
         x: x,
         y: y,
         value: 1,
         timestamp: currentTime,
         url: websiteLocation,
-      });
+      };
+      heatmapInstance.addData(data);
+      pushToTapLog(data);
     });
 
     document.addEventListener("scroll", function (event) {
@@ -71,13 +74,15 @@ export function StudySite(props) {
       // Add more value for clicks
       const currentTime = new Date();
       const websiteLocation = window.location.href;
-      heatmapInstance.addData({
+      const data = {
         x: x,
         y: y,
         value: 5,
         timestamp: currentTime,
         url: websiteLocation,
-      });
+      };
+      heatmapInstance.addData(data);
+      pushToTapLog(data);
       updateHeatmapSize();
     });
 
@@ -115,13 +120,15 @@ export function StudySite(props) {
         ongoingTouches.push(copyTouch(touches[i]));
         const currentTime = new Date();
         const websiteLocation = window.location.href;
-        heatmapInstance.addData({
+        const data = {
           x: touches[i].pageX,
           y: touches[i].pageY,
           value: 5,
           timestamp: currentTime,
           url: websiteLocation,
-        });
+        };
+        heatmapInstance.addData(data);
+        pushToTapLog(data);
       }
     };
 
@@ -134,13 +141,15 @@ export function StudySite(props) {
         if (idx >= 0) {
           const currentTime = new Date();
           const websiteLocation = window.location.href;
-          heatmapInstance.addData({
+          const data = {
             x: touches[i].pageX,
             y: touches[i].pageY,
             value: 5,
             timestamp: currentTime,
             url: websiteLocation,
-          });
+          };
+          heatmapInstance.addData(data);
+          pushToTapLog(data);
 
           ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
         } else {
@@ -158,13 +167,15 @@ export function StudySite(props) {
         if (idx >= 0) {
           const currentTime = new Date();
           const websiteLocation = window.location.href;
-          heatmapInstance.addData({
+          const data = {
             x: touches[i].pageX,
             y: touches[i].pageY,
             value: 5,
             timestamp: currentTime,
             url: websiteLocation,
-          });
+          };
+          heatmapInstance.addData(data);
+          pushToTapLog(data);
 
           ongoingTouches.splice(idx, 1); // remove it; we're done
         } else {
diff --git a/src/core/log/SensorLogger.jsx b/src/core/log/SensorLogger.jsx
index 0efa82c..7fae537 100644
--- a/src/core/log/SensorLogger.jsx
+++ b/src/core/log/SensorLogger.jsx
@@ -7,12 +7,20 @@ export function pushToMouseLog(logElement) {
   const mouseLogElement = {
     mouseLog: logElement,
     timestamp: currentTime,
-    url: websiteLocation
+    url: websiteLocation,
   };
   sensorLog.mouseLog.push(mouseLogElement);
   setState({ sensorLog: sensorLog });
 }
 
+// Only exists as a backup for tracking, due to heatmap.js deleting other values in object.
+export function pushToTapLog(logElement) {
+  const sensorLog = getState().sensorLog;
+  // It already has time and URL data at this point. :)
+  sensorLog.tapLog.push(logElement);
+  setState({ sensorLog: sensorLog });
+}
+
 export function pushToClickLog(logElement) {
   // Filter out dummy body objects
   if (logElement.target.localName === "body") {
@@ -28,7 +36,7 @@ export function pushToClickLog(logElement) {
       x: el.x,
       y: el.y,
       timestamp: currentTime,
-      url: websiteLocation
+      url: websiteLocation,
     };
   };
 
@@ -74,7 +82,7 @@ export function pushToSonificationLog(logElement) {
   const sonificationLogElement = {
     sonificationLog: logElement,
     timestamp: currentTime,
-    url: websiteLocation
+    url: websiteLocation,
   };
   sensorLog.playedSonifications.push(sonificationLogElement);
   setState({ sensorLog: sensorLog });
@@ -88,6 +96,7 @@ export function resetSensorLog() {
   setState({
     sensorLog: {
       mouseLog: [],
+      tapLog: [],
       clickedElements: [],
       visitedSites: [],
       playedSonifications: [],