From fd17cdd6893ae2a7b5ae566b2954a8c312a98f09 Mon Sep 17 00:00:00 2001
From: marhaupe <marhaupe97@gmail.com>
Date: Mon, 26 Aug 2024 19:17:38 +0200
Subject: [PATCH] big things coming

---
 packages/cli/testlogger.js          |  2 +-
 packages/frontend/src/App.tsx       | 19 ++++++++++++++++---
 packages/frontend/src/Histogram.tsx | 17 +++++++++++++++--
 packages/frontend/src/SearchBar.tsx |  3 ++-
 4 files changed, 34 insertions(+), 7 deletions(-)

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" />