feat(logs): tooltip improvements (break out, no delay)

This commit is contained in:
Nicholas Penree
2024-12-12 22:59:03 -05:00
parent 37ee89e6ab
commit 22a2e64563
2 changed files with 29 additions and 15 deletions

View File

@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipPortal,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
@@ -46,22 +47,28 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
); );
}; };
const tooltip = (color: string, timestamp: string | null) => { const tooltip = (color: string, timestamp: string) => {
return ( const square = (
<TooltipProvider> <div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
);
return timestamp ? (
<TooltipProvider delayDuration={0} disableHoverableContent>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>{square}</TooltipTrigger>
<div <TooltipPortal>
className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} <TooltipContent
/> sideOffset={5}
</TooltipTrigger> className="bg-popover border-border z-[99999]"
<TooltipContent> >
<p className="text text-xs text-muted-foreground break-all max-w-md"> <p className="text text-xs text-muted-foreground break-all max-w-md">
{timestamp || "--- No time found ---"} <pre>{timestamp}</pre>
</p> </p>
</TooltipContent> </TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
) : (
square
); );
}; };
@@ -89,7 +96,6 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
</span> </span>
)} )}
<Badge <Badge
variant={variant} variant={variant}
className="w-14 justify-center text-[10px] px-1 py-0" className="w-14 justify-center text-[10px] px-1 py-0"

View File

@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger; const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipPortal = TooltipPrimitive.Portal;
const TooltipContent = React.forwardRef< const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>, React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
)); ));
TooltipContent.displayName = TooltipPrimitive.Content.displayName; TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; export {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
TooltipPortal,
};