diff --git a/packages/cli/testlogger.js b/packages/cli/testlogger.js index 02c7c85..1ac366e 100644 --- a/packages/cli/testlogger.js +++ b/packages/cli/testlogger.js @@ -8,7 +8,7 @@ async function main() { console.log(`dev: dev`, { dev: "dev", }); - await new Promise((resolve) => setTimeout(resolve, Math.random() * 1000)); + await new Promise((resolve) => setTimeout(resolve, Math.random() * 4000)); } } diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index e502cf4..5574dbe 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -4,7 +4,13 @@ import { useEffect, useState, useRef } from "react"; import { Static, Type } from "@sinclair/typebox"; import { Value } from "@sinclair/typebox/value"; import { nanoid } from "nanoid"; -import { ChevronsDown, ChevronsUp, LucideLoaderCircle } from "lucide-react"; +import { + ChevronsDown, + ChevronsUp, + LucideLoaderCircle, + PauseIcon, + PlayIcon, +} from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { FilterState, SearchQueryBuilder } from "@/SearchBar"; import { Histogram } from "@/Histogram"; @@ -98,10 +104,15 @@ export function App() { <Card className="mb-4 relative"> <CardContent className="p-2"> <Button + variant="ghost" className="p-2 absolute top-2 right-2 z-40" onClick={() => setIsPaused((prev) => !prev)} > - {isPaused ? "Resume" : "Pause"} + {isPaused ? ( + <PlayIcon className="h-6 w-6" /> + ) : ( + <PauseIcon className="h-6 w-6" /> + )} </Button> <Histogram logs={logs} @@ -116,14 +127,16 @@ export function App() { </CardContent> </Card> <Card className="relative flex flex-col flex-1"> - <div className="fixed bottom-4 right-4 flex-row"> + <div className="flex fixed bottom-4 right-4 flex-row gap-1"> <Button + variant="outline" className="p-2" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} > <ChevronsUp /> </Button> <Button + variant="outline" className="p-2" onClick={() => window.scrollTo({ diff --git a/packages/frontend/src/Histogram.tsx b/packages/frontend/src/Histogram.tsx index a591b26..d78dfa6 100644 --- a/packages/frontend/src/Histogram.tsx +++ b/packages/frontend/src/Histogram.tsx @@ -1,4 +1,4 @@ -import { Bar, BarChart, XAxis } from "recharts"; +import { Bar, BarChart, XAxis, YAxis } from "recharts"; import { ChartConfig, ChartContainer, @@ -59,13 +59,14 @@ export function Histogram({ logs, onTimeframeSelect }: HistogramProps) { }); } setBuckets(buckets); - }, 1000), + }, 2500), [setBuckets], ); useEffect(() => throttledSetBuckets(logs), [logs, throttledSetBuckets]); const chartConfig = {} satisfies ChartConfig; + const maxBucketCount = Math.max(...buckets.map((b) => b.count)); return ( <div className="flex flex-row justify-center"> @@ -89,6 +90,18 @@ export function Histogram({ logs, onTimeframeSelect }: HistogramProps) { axisLine={false} tickFormatter={(time) => format(time, "HH:mm:ss:SS")} /> + <YAxis + domain={[ + 0, + maxBucketCount > 500 + ? 500 + : maxBucketCount > 250 + ? 250 + : maxBucketCount > 100 + ? 100 + : 50, + ]} + /> <ChartTooltip labelFormatter={(time) => format(new Date(time), "HH:mm:ss:SS")} diff --git a/packages/frontend/src/SearchBar.tsx b/packages/frontend/src/SearchBar.tsx index 1f17185..4892f37 100644 --- a/packages/frontend/src/SearchBar.tsx +++ b/packages/frontend/src/SearchBar.tsx @@ -17,7 +17,7 @@ export type FilterState = { export const SearchQueryBuilder = forwardRef(function SearchQueryBuilder( props: Props, - ref + ref, ) { const { register, handleSubmit, formState, setFocus } = useForm(); @@ -46,6 +46,7 @@ export const SearchQueryBuilder = forwardRef(function SearchQueryBuilder( <Button disabled={formState.isSubmitting} className="p-2 rounded-l-none" + variant="outline" type="submit" > <TextSearchIcon className="size-6" />