Add initial keyboard shortcuts

frontend/src/components/ui/DataTable.tsx

@@ -8,6 +8,8 @@ import {
 } from "@tanstack/react-table";
 import { clsx } from "clsx";
 
+import { useKeySequence } from "@/hooks";
+
 import {
   Table,
   TableBody,
@@ -16,6 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useCallback, useState } from "react";
 
 // Extend the ColumnMeta type to include headerClassName and cellClassName
 //
@@ -67,6 +70,37 @@ export function DataTable<TData, TValue>({
     }),
   });
 
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number | null>(null);
+  const rows = table.getRowModel().rows;
+
+  const handleNextRow = useCallback(() => {
+    setSelectedRowIndex((prevIndex) => {
+      if (prevIndex === null) return 0;
+      if (prevIndex + 1 >= rows.length) return prevIndex;
+
+      return prevIndex + 1;
+    });
+  }, [rows]);
+
+  const handlePrevRow = useCallback(() => {
+    setSelectedRowIndex((prevIndex) => {
+      if (prevIndex === null) return 0;
+      if (prevIndex - 1 < 0) return prevIndex;
+      return prevIndex - 1;
+    });
+  }, []);
+
+  const handleRowSelect = useCallback(() => {
+    if (selectedRowIndex !== null && rows.length > 0) {
+      const selectedRow = rows[selectedRowIndex];
+      handleRowClick?.(selectedRow);
+    }
+  }, [selectedRowIndex, rows, handleRowClick]);
+
+  useKeySequence(["j"], handleNextRow);
+  useKeySequence(["k"], handlePrevRow);
+  useKeySequence(["Enter"], handleRowSelect);
+
   return (
     <div className="rounded-md border">
       <Table>
@@ -95,25 +129,34 @@ export function DataTable<TData, TValue>({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                onClick={() => handleRowClick?.(row)}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    className={clsx(
-                      "py-1",
-                      cell.column.columnDef.meta?.cellClassName,
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
+            table.getRowModel().rows.map((row, rowIdx) => {
+              // console.log("row", row.getIsSelected(), row.id)
+              return (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  onClick={() => handleRowClick?.(row)}
+                  onMouseEnter={() => setSelectedRowIndex(rowIdx)}
+                  onMouseLeave={() => setSelectedRowIndex(null)}
+                  className={`${rowIdx === selectedRowIndex ? "bg-muted/50" : ""} transition-none`}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={clsx(
+                        "py-1",
+                        cell.column.columnDef.meta?.cellClassName,
+                      )}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              );
+            })
           ) : (
             <TableRow>
               <TableCell

frontend/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeySequence } from "./keyboard.ts";

frontend/src/hooks/keyboard.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Define a sequence of keys to be pressed in order to trigger a callback. Note that it should be used only for sequences, not chords. TODO: create a hook for chords.
+ *
+ * @param sequence - An array of keys to be pressed in order to trigger the callback.
+ * @param callback - The callback to be executed when the sequence of keys is pressed.
+ * @param timeout - The timeout in milliseconds to wait before executing the callback. Default is 2000.
+ * @returns keySequence - An array of the keys that were pressed in order to trigger the callback. This is useful for debugging purposes.
+ *
+ */
+export function useKeySequence(
+  sequence: string[],
+  callback: () => void,
+  timeout: number = 2000,
+) {
+  const [keySequence, setKeySequence] = useState<string[]>([]);
+  const timeoutRef = useRef<number | undefined>(undefined);
+  const callbackRef = useRef(callback);
+  const sequenceRef = useRef(sequence);
+
+  // ensure that the callback and sequence are updated when they change
+  useEffect(() => {
+    sequenceRef.current = sequence;
+  }, [sequence]);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  // create and persist the callback across re-renders
+  const handleKeyPress = useCallback((event: KeyboardEvent) => {
+    setKeySequence((prevKeySequence) => {
+      const updatedSequence = [...prevKeySequence, event.key].slice(
+        -sequenceRef.current.length,
+      );
+
+      return updatedSequence;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (keySequence.join("") === sequenceRef.current.join("")) {
+      callbackRef.current();
+      setKeySequence([]);
+    }
+  }, [keySequence]);
+
+  useEffect(() => {
+    const resetSequence = () => setKeySequence([]);
+
+    if (keySequence.length > 0) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(
+        resetSequence,
+        timeout,
+      ) as unknown as number;
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [keySequence, timeout]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyPress);
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  return keySequence;
+}

frontend/src/pages/RequestDetailsPage/RequestDetails.tsx

@@ -179,7 +179,6 @@ const FetchRequestLog = ({ log }: { log: MizuLog }) => {
     ? log?.message?.url
     : "UNKNOWN_URL";
   const description = `Fetch Request: ${url}`;
-  console.log("FETCH REQUEST", log.args);
 
   return (
     <LogCard>
@@ -202,7 +201,6 @@ const FetchResponseLog = ({ log }: { log: MizuLog }) => {
     ? log?.message?.url
     : "UNKNOWN_URL";
   const description = `Fetch Response: ${url}`;
-  console.log("FETCH RESPONSE", url, log.args);
 
   return (
     <LogCard>

frontend/src/pages/RequestDetailsPage/RequestDetailsPage.tsx

@@ -12,8 +12,9 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useMizuTraces } from "@/queries";
 import { isError } from "react-query";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
+import { useKeySequence } from "@/hooks";
 import { TraceDetails } from "./RequestDetails";
 
 function useRequestDetails(traceId?: string) {
@@ -30,6 +31,12 @@ export function RequestDetailsPage() {
   const { traceId } = useParams<{ traceId: string }>();
   const { trace } = useRequestDetails(traceId);
 
+  const nav = useNavigate();
+
+  useKeySequence(["Escape"], () => {
+    nav("/requests");
+  });
+
   return (
     <Tabs defaultValue="all">
       <div className="flex items-center">

frontend/src/pages/RequestsPage/Requests.tsx

@@ -4,7 +4,7 @@ import {
   TrashIcon,
   // ListBulletIcon as ListFilter, // FIXME
 } from "@radix-ui/react-icons";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 
@@ -29,6 +29,7 @@ import { DataTable } from "@/components/ui/DataTable";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type MizuTrace, useMizuTraces } from "@/queries";
+import { Row } from "@tanstack/react-table";
 import { columns } from "./columns";
 
 type LevelFilter = "all" | "error" | "warning" | "info" | "debug";
@@ -48,11 +49,18 @@ const RequestsTable = ({
     );
   }, [traces, filter]);
 
+  const handleRowClick = useCallback(
+    (row: Row<MizuTrace>) => {
+      navigate(`/requests/${row.id}`);
+    },
+    [navigate],
+  );
+
   return (
     <DataTable
       columns={columns}
       data={filteredTraces ?? []}
-      handleRowClick={(row) => navigate(`/requests/${row.id}`)}
+      handleRowClick={handleRowClick}
     />
   );
 };