feat: Added log features and elements.

src/components/DownloadButton.jsx

@@ -3,7 +3,6 @@ import { getTranslation } from "../core/i18n/I18NHandler";
 import { getSensorLog } from "../core/log/SensorLogger";
 import { Button } from "@geist-ui/core";
 import { getUserID } from "./RandomIDComponent";
-import { PARTICIPANT_NUMBER } from "../core/Constants";
 
 function DownloadButton() {
   const downloadFile = ({ data, fileName, fileType }) => {
@@ -23,7 +22,6 @@ function DownloadButton() {
   const userData = {
     participantId: getUserID(),
     sensorLog: getSensorLog(),
-    participantNumber: PARTICIPANT_NUMBER,
   };
 
   const exportToJson = (e) => {

src/components/webpage_container/StudySite.jsx

@@ -48,7 +48,15 @@ export function StudySite(props) {
       var y = event.pageY;
 
       // Add data to the heatmap
-      heatmapInstance.addData({ x: x, y: y, value: 1 });
+      const currentTime = new Date();
+      const websiteLocation = window.location.href;
+      heatmapInstance.addData({
+        x: x,
+        y: y,
+        value: 1,
+        timestamp: currentTime,
+        url: websiteLocation,
+      });
     });
 
     document.addEventListener("scroll", function (event) {
@@ -61,7 +69,15 @@ export function StudySite(props) {
       var y = event.pageY;
 
       // Add more value for clicks
-      heatmapInstance.addData({ x: x, y: y, value: 5 });
+      const currentTime = new Date();
+      const websiteLocation = window.location.href;
+      heatmapInstance.addData({
+        x: x,
+        y: y,
+        value: 5,
+        timestamp: currentTime,
+        url: websiteLocation,
+      });
       updateHeatmapSize();
     });
 
@@ -97,10 +113,14 @@ export function StudySite(props) {
 
       for (let i = 0; i < touches.length; i++) {
         ongoingTouches.push(copyTouch(touches[i]));
+        const currentTime = new Date();
+        const websiteLocation = window.location.href;
         heatmapInstance.addData({
           x: touches[i].pageX,
           y: touches[i].pageY,
           value: 5,
+          timestamp: currentTime,
+          url: websiteLocation,
         });
       }
     };
@@ -112,10 +132,14 @@ export function StudySite(props) {
         const idx = ongoingTouchIndexById(touches[i].identifier);
 
         if (idx >= 0) {
+          const currentTime = new Date();
+          const websiteLocation = window.location.href;
           heatmapInstance.addData({
             x: touches[i].pageX,
             y: touches[i].pageY,
             value: 5,
+            timestamp: currentTime,
+            url: websiteLocation,
           });
 
           ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
@@ -132,10 +156,14 @@ export function StudySite(props) {
         let idx = ongoingTouchIndexById(touches[i].identifier);
 
         if (idx >= 0) {
+          const currentTime = new Date();
+          const websiteLocation = window.location.href;
           heatmapInstance.addData({
             x: touches[i].pageX,
             y: touches[i].pageY,
             value: 5,
+            timestamp: currentTime,
+            url: websiteLocation,
           });
 
           ongoingTouches.splice(idx, 1); // remove it; we're done

src/core/Constants.jsx

@@ -1,4 +1,4 @@
 export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
 
-export const PARTICIPANT_NUMBER = 9;
+export const PARTICIPANT_NUMBER = 1;

src/core/log/SensorLogger.jsx

@@ -3,9 +3,11 @@ import { getState, setState } from "../../App";
 export function pushToMouseLog(logElement) {
   const sensorLog = getState().sensorLog;
   const currentTime = new Date();
+  const websiteLocation = window.location.href;
   const mouseLogElement = {
     mouseLog: logElement,
     timestamp: currentTime,
+    url: websiteLocation
   };
   sensorLog.mouseLog.push(mouseLogElement);
   setState({ sensorLog: sensorLog });
@@ -19,12 +21,14 @@ export function pushToClickLog(logElement) {
 
   const generateLogElement = (el) => {
     const currentTime = new Date();
+    const websiteLocation = window.location.href;
     return {
       target: el.target.outerHTML,
       type: el.type,
       x: el.x,
       y: el.y,
       timestamp: currentTime,
+      url: websiteLocation
     };
   };
 
@@ -66,9 +70,11 @@ export function pushToVisitLog(logElement) {
 export function pushToSonificationLog(logElement) {
   const sensorLog = getState().sensorLog;
   const currentTime = new Date();
+  const websiteLocation = window.location.href;
   const sonificationLogElement = {
     sonificationLog: logElement,
     timestamp: currentTime,
+    url: websiteLocation
   };
   sensorLog.playedSonifications.push(sonificationLogElement);
   setState({ sensorLog: sensorLog });