From 264dd0e22ab431ecac9eb4b767041e5fcc1a8f97 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Fri, 7 Jun 2024 11:54:52 +0200
Subject: [PATCH] fix: Not sure what I did, but fixed some of the mouse
 tracking issues.

---
 src/App.js                                    |  2 +-
 src/components/ScrollableTab.jsx              |  2 +-
 .../webpage_container/StudySite.jsx           | 27 +++++++++++++++++--
 src/index.css                                 |  5 ++++
 src/pages/study_site_2/StartPage2.jsx         |  9 ++-----
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 360b5c9..1c42811 100644
--- a/src/App.js
+++ b/src/App.js
@@ -180,7 +180,7 @@ function App() {
             path="/study-page-2"
             element={
               <React.Suspense fallback={<>...</>}>
-                <StartPage2 redirectLoc={latinSquareOrder[2]} />
+                <StartPage2 />
               </React.Suspense>
             }
           />
diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx
index 39896b9..9408802 100644
--- a/src/components/ScrollableTab.jsx
+++ b/src/components/ScrollableTab.jsx
@@ -114,7 +114,7 @@ function ScrollableTab({ onActiveTabChange, children }) {
     );
   });
 
-  const tabsStyle = {}; //{position: "fixed", bottom: "0"};
+  const tabsStyle = { position: "absolute", bottom: "0", width: "100vw" };
 
   return (
     <div style={tabsStyle}>
diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx
index fcd5bd2..5809216 100644
--- a/src/components/webpage_container/StudySite.jsx
+++ b/src/components/webpage_container/StudySite.jsx
@@ -35,6 +35,7 @@ export function StudySite(props) {
     document.documentElement.style.height = height;
 
     if (heatmapInstance === undefined) {
+      document.getElementById("studySiteContainer").style.height = height;
       heatmapInstance = h337.create({
         container: document.getElementById("studySiteContainer"),
         radius: 40,
@@ -50,6 +51,10 @@ export function StudySite(props) {
       heatmapInstance.addData({ x: x, y: y, value: 1 });
     });
 
+    document.addEventListener("scroll", function (event) {
+      updateHeatmapSize();
+    });
+
     // Function to capture clicks
     document.addEventListener("click", function (event) {
       var x = event.pageX;
@@ -57,13 +62,31 @@ export function StudySite(props) {
 
       // Add more value for clicks
       heatmapInstance.addData({ x: x, y: y, value: 5 });
+      updateHeatmapSize();
     });
 
     // Function to update heatmap container size on resize
     function updateHeatmapSize() {
       var container = document.getElementById("heatmapOverlay");
-      container.style.width = document.body.scrollWidth + "px";
+      container.style.width =
+        document.getElementById("root").style.width + "px";
       container.style.height = document.body.scrollHeight + "px";
+
+      document.getElementById("studySiteContainer").style.width =
+        document.getElementById("root").style.width + "px";
+      document.getElementById("studySiteContainer").style.height =
+        document.body.scrollHeight + "px";
+
+      const heatmapData = heatmapInstance.getData();
+      for (var el of document.getElementsByTagName("canvas")) {
+        el.remove();
+      }
+      heatmapInstance = h337.create({
+        container: document.getElementById("studySiteContainer"),
+        radius: 40,
+      });
+      heatmapInstance.setData(heatmapData);
+      heatmapInstance.setDataMax(HEATMAP_MAX);
     }
 
     const handleStart = (evt) => {
@@ -162,5 +185,5 @@ export function StudySite(props) {
 }
 
 export function getHeatmapData() {
-  return (heatmapInstance !== undefined) ? heatmapInstance.getData() : {};
+  return heatmapInstance !== undefined ? heatmapInstance.getData() : {};
 }
diff --git a/src/index.css b/src/index.css
index 7a99ae5..d601ddb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,6 +31,11 @@ canvas {
   opacity: 0;
 }
 
+#studySiteContainer {
+  min-height: 100vh;
+  width: 95%;
+}
+
 .centeredLogo {
   display: block;
   margin: 0 auto;
diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx
index b2b4410..c349225 100644
--- a/src/pages/study_site_2/StartPage2.jsx
+++ b/src/pages/study_site_2/StartPage2.jsx
@@ -42,14 +42,10 @@ const tabContent = [
   (<HotelInformation />),
 ];
 
-function StartPage2({ redirectLoc }) {
+function StartPage2() {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
-  var saveMouseLog = function () {
-    pushToMouseLog(getHeatmapData());
-  };
-
-  var onActiveTabChange = (index) => {
+  const onActiveTabChange = (index) => {
     setActiveTabIndex(index);
   };
 
@@ -68,7 +64,6 @@ function StartPage2({ redirectLoc }) {
       />
       <Spacer h={3} />
       <h4>Hotel Le Laboratoire</h4>
-      <Spacer h={3} />
       {tabContent[activeTabIndex]}
       <ScrollableTab onActiveTabChange={onActiveTabChange}>
         <Tab actionType="text">