Fix logs page jitter, timestamps, handle disabling auto-scroll (#898)

* Fix timestamps for new log lines

* Fix logs page jitter and disable auto scroll on manual scroll

src/core/react-query/logs/queries.ts

@@ -47,7 +47,7 @@ const useLogsSubscription = () => {
       'Log',
       (line: LogLineType) => {
         queryClient.setQueryData(logsQueryKey, (oldData: LogLineType[] | undefined) => {
-          const newData = { ...line, timeStamp: formatStamp(line.TimeStamp) };
+          const newData = { ...line, TimeStamp: formatStamp(line.TimeStamp) };
           return oldData ? [...oldData, newData] : [newData];
         });
       },

src/pages/logs/LogsPage.tsx

@@ -1,36 +1,55 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { mdiArrowVerticalLock, mdiCogOutline, mdiFilterOutline, mdiLoading, mdiMagnify } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cx from 'classnames';
+import { throttle } from 'lodash';
 
 import Button from '@/components/Input/Button';
 import Input from '@/components/Input/Input';
 import { useLogsQuery } from '@/core/react-query/logs/queries';
 
 const LogsPage = () => {
   const logLines = useLogsQuery().data;
-  // TODO: Turn off scroll to bottom if user scrolls
-  const [isScrollToBottom, setScrollToBottom] = useState(true);
+  const [scrollToBottom, setScrollToBottom] = useState(true);
   const [search, setSearch] = useState('');
 
   const parentRef = React.useRef<HTMLDivElement>(null);
   const rowVirtualizer = useVirtualizer({
     count: logLines.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 32,
+    estimateSize: () => 34,
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
   // Magic code stolen from https://github.com/TanStack/virtual/issues/634
   // Fixes autoscroll issue in firefox
+  // and now apparently chrome too
   if (parentRef.current) {
     rowVirtualizer.scrollRect = { height: parentRef.current.clientHeight, width: parentRef.current.clientWidth };
   }
 
   useEffect(() => {
-    if (!isScrollToBottom || logLines.length === 0) return;
-    rowVirtualizer.scrollToIndex(logLines.length - 1, { align: 'start' }); // 'start' scrolls to end and 'end' scrolls to start. ¯\_(ツ)_/¯
-  }, [logLines.length, isScrollToBottom, rowVirtualizer]);
+    if (!rowVirtualizer || !scrollToBottom || logLines.length === 0) return;
+    rowVirtualizer.scrollToIndex(logLines.length - 1);
+  }, [logLines, scrollToBottom, rowVirtualizer]);
+
+  // Taken from ChatGPT...
+  // Disables auto scroll when user scrolls up
+  const checkScrollDirection = useRef(
+    throttle(() => {
+      if (!parentRef.current) return;
+      const currentScroll = parentRef.current.scrollTop;
+
+      setTimeout(() => {
+        if (parentRef.current && parentRef.current.scrollTop < currentScroll) setScrollToBottom(false);
+      }, 50);
+    }, 1000),
+  ).current;
+
+  // This exists because the value of scrollToBottom won't change inside checkScrollDirection
+  const handleScroll = () => {
+    if (scrollToBottom) checkScrollDirection();
+  };
 
   return (
     <div className="flex grow flex-col gap-y-6">
@@ -53,11 +72,10 @@ const LogsPage = () => {
           <Button buttonType="secondary" buttonSize="normal" disabled>
             <Icon path={mdiCogOutline} size={1} />
           </Button>
-          {/* TODO: To be moved into settings modal */}
           <Button
             buttonType="secondary"
             buttonSize="normal"
-            className={cx(isScrollToBottom ? 'text-panel-text-primary' : '!text-panel-text')}
+            className={cx(scrollToBottom ? 'text-panel-text-primary' : '!text-panel-text')}
             onClick={() => setScrollToBottom(prev => !prev)}
           >
             <Icon path={mdiArrowVerticalLock} size={1} />
@@ -69,6 +87,7 @@ const LogsPage = () => {
         <div
           className="w-full overflow-y-auto rounded-lg border-16 border-panel-input bg-panel-input contain-strict"
           ref={parentRef}
+          onScroll={handleScroll}
         >
           {logLines.length === 0
             ? (
@@ -89,7 +108,7 @@ const LogsPage = () => {
                     const row = logLines[virtualRow.index];
                     return (
                       <div
-                        className="mt-2 flex gap-x-6"
+                        className="flex gap-x-6 pt-2"
                         key={virtualRow.key}
                         data-index={virtualRow.index}
                         ref={rowVirtualizer.measureElement}