virtualized logs

frontend/package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "react-resizable-panels": "^0.0.55",
+    "react-virtuoso": "^4.6.1",
     "reactflow": "^11.8.3",
     "socket.io-client": "^4.7.2",
     "uuid": "^9.0.0"

frontend/src/scenes/frame/panels/Logs/Logs.tsx

@@ -1,61 +1,76 @@
 import { useValues } from 'kea'
 import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { logsLogic } from './logsLogic'
 import { insertBreaks } from '../../../../utils/insertBreaks'
 import { frameLogic } from '../../frameLogic'
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
+import { Button } from '../../../../components/Button'
 
 export function Logs() {
   const { id } = useValues(frameLogic)
   const { logs, logsLoading } = useValues(logsLogic({ id }))
-  const [scrollDivRef, setScrollDivRef] = useState<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (scrollDivRef) {
-      scrollDivRef.scrollTop = scrollDivRef.scrollHeight
-    }
-  }, [scrollDivRef, logs])
+  const [atBottom, setAtBottom] = useState(false)
+  const virtuosoRef = useRef<VirtuosoHandle>(null)
 
   return logsLoading ? (
     <div>...</div>
   ) : logs.length === 0 ? (
     <div>No Logs yet</div>
   ) : (
-    <div className="h-full bg-black p-4 font-mono text-sm overflow-y-scroll overflow-x-hidden" ref={setScrollDivRef}>
-      {logs.map((log) => {
-        let logLine: string | JSX.Element = String(log.line)
-        if (log.type === 'webhook') {
-          try {
-            const { event, timestamp, ...rest } = JSON.parse(log.line)
-            logLine = (
-              <>
-                <span className="text-yellow-600 mr-2">{event}</span>
-                {Object.entries(rest).map(([key, value]) => (
-                  <span key={key} className="mr-2">
-                    <span className="text-gray-400">{key}=</span>
-                    <span>{insertBreaks(JSON.stringify(value))}</span>
-                  </span>
-                ))}
-              </>
-            )
-          } catch (e) {}
-        }
+    <div className="h-full bg-black p-2 relative">
+      <Virtuoso
+        className="h-full bg-black font-mono text-sm overflow-y-scroll overflow-x-hidden relative"
+        ref={virtuosoRef}
+        initialTopMostItemIndex={logs.length - 1}
+        data={logs}
+        followOutput={'auto'}
+        atBottomStateChange={(bottom) => setAtBottom(bottom)}
+        itemContent={(index, log) => {
+          let logLine: string | JSX.Element = String(log.line)
+          if (log.type === 'webhook') {
+            try {
+              const { event, timestamp, ...rest } = JSON.parse(log.line)
+              logLine = (
+                <>
+                  <span className="text-yellow-600 mr-2">{event}</span>
+                  {Object.entries(rest).map(([key, value]) => (
+                    <span key={key} className="mr-2">
+                      <span className="text-gray-400">{key}=</span>
+                      <span>{insertBreaks(JSON.stringify(value))}</span>
+                    </span>
+                  ))}
+                </>
+              )
+            } catch (e) {}
+          }
 
-        return (
-          <div
-            key={log.id}
-            className={clsx('flex sm:flex-row flex-col', {
-              'text-yellow-300': log.type === 'stdinfo',
-              'text-red-300': log.type === 'stderr',
-            })}
-          >
-            <div className="flex-0 mr-2 text-yellow-900 whitespace-nowrap">{log.timestamp.replace('T', ' ')}</div>
-            <div className="flex-1 break-words" style={{ wordBreak: 'break-word' }}>
-              {logLine}
+          return (
+            <div
+              key={log.id}
+              className={clsx('flex sm:flex-row flex-col', {
+                'text-yellow-300': log.type === 'stdinfo',
+                'text-red-300': log.type === 'stderr',
+              })}
+            >
+              <div className="flex-0 mr-2 text-yellow-900 whitespace-nowrap">{log.timestamp.replace('T', ' ')}</div>
+              <div className="flex-1 break-words" style={{ wordBreak: 'break-word' }}>
+                {logLine}
+              </div>
             </div>
-          </div>
-        )
-      })}
+          )
+        }}
+      />
+      {!atBottom && (
+        <Button
+          onClick={() => virtuosoRef.current?.scrollToIndex({ index: logs.length - 1, behavior: 'smooth' })}
+          color="light-gray"
+          size="small"
+          className="absolute right-6 bottom-2"
+        >
+          Scroll to latest
+        </Button>
+      )}
     </div>
   )
 }