fix scroll to top / bottom buttons

marhaupe · Sep 6, 2024 · 30f4cee · 30f4cee
1 parent 55b978b
commit 30f4cee
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -9,7 +9,7 @@ import { Histogram } from "@/Histogram";
 import { Button } from "@/components/ui/button";
 import { config } from "./config";
 import { useHotkeys } from "react-hotkeys-hook";
-import { LogList } from "./components/LogList";
+import { LogList, LogListRef } from "./components/LogList";
 
 const logSchema = Type.Object({
   timestamp: Type.String(),
@@ -29,6 +29,8 @@ export function App() {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const [eventSource, setEventSource] = useState<EventSource>();
 
+  const logListRef = useRef<LogListRef>(null);
+
   useEffect(() => {
     const url = new URL(config.agentUrl);
     url.searchParams.set("stream", nanoid());
@@ -107,19 +109,14 @@ export function App() {
             <Button
               variant="outline"
               className="p-2"
-              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+              onClick={() => logListRef.current?.scrollToTop()}
             >
               <ChevronsUp />
             </Button>
             <Button
               variant="outline"
               className="p-2"
-              onClick={() =>
-                window.scrollTo({
-                  top: document.body.scrollHeight,
-                  behavior: "smooth",
-                })
-              }
+              onClick={() => logListRef.current?.scrollToBottom()}
             >
               <ChevronsDown />
             </Button>
@@ -129,7 +126,7 @@ export function App() {
             ref={searchInputRef}
             onFilterStateChange={(query) => setFilterState(query)}
           />
-          <LogList logs={logs} />
+          <LogList ref={logListRef} logs={logs} />
         </Card>
       </div>
     </div>

diff --git a/packages/frontend/src/LogEntry.tsx b/packages/frontend/src/LogEntry.tsx
@@ -31,10 +31,10 @@ export function LogEntry({
   const [selectedMenuItem, setSelectedMenuItem] = useState<number>(0);
   const menuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
-  const handleDropdownOpenChange = (isOpen: boolean) => {
+  function handleDropdownOpenChange(isOpen: boolean) {
     setSelectedMenuItem(0);
     onDropdownOpenChange(isOpen);
-  };
+  }
 
   useHotkeys(
     "l,ArrowRight",

diff --git a/packages/frontend/src/components/LogList.tsx b/packages/frontend/src/components/LogList.tsx
@@ -1,19 +1,32 @@
-import { useRef, useState, useEffect, useMemo, memo } from "react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  memo,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { LogEntry } from "../LogEntry";
 import { Log } from "../App";
 import { CardContent } from "./ui/card";
 import { LucideLoaderCircle } from "lucide-react";
 import { VariableSizeList as List, areEqual } from "react-window";
 
+export interface LogListRef {
+  scrollToTop: () => void;
+  scrollToBottom: () => void;
+}
+
 interface LogListProps {
   logs: Log[];
 }
 
 const REM_IN_PX = 4;
 const LINE_HEIGHT = 5 * REM_IN_PX;
 
-export function LogList({ logs }: LogListProps) {
+export const LogList = forwardRef<LogListRef, LogListProps>(({ logs }, ref) => {
   const [selectedLogIndex, setSelectedLogIndex] = useState<number | null>(null);
   const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(
     null
@@ -35,19 +48,24 @@ export function LogList({ logs }: LogListProps) {
     return () => window.removeEventListener("resize", updateHeight);
   }, []);
 
-  const getItemSize = (index: number) => {
+  function getItemSize(index: number) {
     const lineCount = logs[index].message.split("\n").length;
     return lineCount * LINE_HEIGHT;
-  };
+  }
+
+  function scrollToIndex(index: number) {
+    listRef.current?.scrollToItem(index, "start");
+    setSelectedLogIndex(index);
+  }
 
   useHotkeys(
     "g,shift+g",
     ({ key }) => {
       const newIndex = key === "g" ? 0 : logs.length - 1;
-      listRef.current?.scrollToItem(newIndex, "start");
-      setSelectedLogIndex(newIndex);
+      scrollToIndex(newIndex);
     },
-    { enabled: openDropdownIndex === null }
+    { enabled: openDropdownIndex === null },
+    [logs.length]
   );
 
   useHotkeys(
@@ -86,6 +104,19 @@ export function LogList({ logs }: LogListProps) {
     [logs, selectedLogIndex, openDropdownIndex]
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToTop: () => {
+        scrollToIndex(0);
+      },
+      scrollToBottom: () => {
+        scrollToIndex(logs.length - 1);
+      },
+    }),
+    [logs.length]
+  );
+
   return (
     <div ref={containerRef} style={{ height: "100%" }}>
       {logs.length > 0 ? (
@@ -107,7 +138,7 @@ export function LogList({ logs }: LogListProps) {
       )}
     </div>
   );
-}
+});
 
 interface RowData {
   logs: Log[];