From 710d17a2650ea1a91d3d8ff11479d78ebec2309b Mon Sep 17 00:00:00 2001
From: dylandefaoite <dylan.defaoite@embl.de>
Date: Thu, 21 Aug 2025 15:48:36 +0200
Subject: [PATCH] PATCH erratic movement bug

---
 app/package-lock.json      | 14 ++++++++++++++
 app/package.json           |  2 ++
 app/src/pages/StatView.tsx | 24 +++++++++++++-----------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 6982a72..7bb1a2b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.12",
         "idb": "^8.0.3",
+        "lodash": "^4.17.21",
+        "lodash.debounce": "^4.0.8",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-range-slider-input": "^3.2.1",
@@ -3146,6 +3148,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/app/package.json b/app/package.json
index 28db1c5..403a892 100644
--- a/app/package.json
+++ b/app/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.12",
     "idb": "^8.0.3",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-range-slider-input": "^3.2.1",
diff --git a/app/src/pages/StatView.tsx b/app/src/pages/StatView.tsx
index 45b280c..33bfbe6 100644
--- a/app/src/pages/StatView.tsx
+++ b/app/src/pages/StatView.tsx
@@ -32,8 +32,8 @@ const StatView = () => {
     }, []);
 
     useEffect(() => {
-        setMostListenedSongs(getListenedTracks(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 20));
-        setMostListenedArtists(getListenedArtists(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 20));
+        setMostListenedSongs(getListenedTracks(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 100));
+        setMostListenedArtists(getListenedArtists(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 100));
     }, [dateRange]);
 
     if (streams.length === 0 || !firstStreamDate || !lastStreamDate) {
@@ -41,29 +41,31 @@ const StatView = () => {
     }
 
     return (
-        <div className="w-full">
-            <div className="w-full flex flex-row items-center">
-                <div className="w-full">
+        <div>
+            <div className="flex flex-row justify-between items-start gap-4 p-4">
+
+                <div className="w-150 h-180 overflow-auto">
                     <h1>Track Statistics</h1>
-                    <ul>
+                    <ul className="truncate">
                         {mostListenedSongs.map((track, index) => (
-                            <li key={index}>
+                            <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
                                 {track.master_metadata_track_name} - {formatSeconds(track.ms_played/1000)}
                             </li>
                         ))}
                     </ul>
                 </div>
 
-                <div className="w-full ml-4"> 
+                <div className="w-150 h-180 overflow-auto"> 
                     <h1>Artist Statistics</h1>
-                    <ul>
+                    <ul className="truncate">
                         {mostListenedArtists.map((artist, index) => (
-                            <li key={index}>
+                            <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
                                 {artist.master_metadata_album_artist_name} - {formatSeconds(artist.ms_played/1000)}
                             </li>
                         ))}
                     </ul>
                 </div>
+
             </div>
             
             <RangeSlider
@@ -79,7 +81,7 @@ const StatView = () => {
             />
 
             <p className="text-center">
-                {dateRange[0].toLocaleDateString()} - {dateRange[1].toLocaleDateString()}
+                {dateRange[0].toUTCString()} - {dateRange[1].toUTCString()} ({getDaysBetween(dateRange[0], dateRange[1])} days)
             </p>
         </div>
     )