gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(Tooltip): fix truncated content and add scrollbar in property tooltips

Browse Source
This commit is contained in:
yangdx
2025-03-12 04:59:18 +08:00
parent a124c2d391
commit 32e7fdc4fc
6 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lightrag/api/webui/assets/index-CH-3l4_Z.css
View File

File diff suppressed because one or more lines are too long

4
lightrag/api/webui/assets/index-BlVvSIic.js → lightrag/api/webui/assets/index-DB4_OcJk.js
View File

File diff suppressed because one or more lines are too long

1
lightrag/api/webui/assets/index-kBxU9cG3.css Normal file
View File

File diff suppressed because one or more lines are too long

4
lightrag/api/webui/index.html
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="./logo.png" /> <link rel="icon" type="image/svg+xml" href="./logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title> <title>Lightrag</title>
<script type="module" crossorigin src="./assets/index-BlVvSIic.js"></script> <script type="module" crossorigin src="./assets/index-DB4_OcJk.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CH-3l4_Z.css"> <link rel="stylesheet" crossorigin href="./assets/index-kBxU9cG3.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
lightrag_webui/src/components/graph/PropertiesView.tsx
View File

@@ -138,7 +138,7 @@ const PropertyRow = ({
className="hover:bg-primary/20 rounded p-1 text-ellipsis" className="hover:bg-primary/20 rounded p-1 text-ellipsis"
tooltipClassName="max-w-80" tooltipClassName="max-w-80"
text={value} text={value}
tooltip={tooltip || value} tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
side="left" side="left"
onClick={onClick} onClick={onClick}
/> />

53
lightrag_webui/src/components/ui/Tooltip.tsx
View File

@@ -10,30 +10,43 @@ const TooltipTrigger = TooltipPrimitive.Trigger
const processTooltipContent = (content: string) => { const processTooltipContent = (content: string) => {
if (typeof content !== 'string') return content if (typeof content !== 'string') return content
return content.split('\\n').map((line, i) => ( return (
<React.Fragment key={i}> <div className="relative top-0 pt-1 whitespace-pre-wrap break-words">
{line} {content}
{i < content.split('\\n').length - 1 && <br />} </div>
</React.Fragment> )
))
} }
const TooltipContent = React.forwardRef< const TooltipContent = React.forwardRef<
React.ComponentRef<typeof TooltipPrimitive.Content>, React.ComponentRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
>(({ className, sideOffset = 4, children, ...props }, ref) => ( side?: 'top' | 'right' | 'bottom' | 'left'
<TooltipPrimitive.Content align?: 'start' | 'center' | 'end'
ref={ref} }
sideOffset={sideOffset} >(({ className, side = 'left', align = 'start', children, ...props }, ref) => {
className={cn( const contentRef = React.useRef<HTMLDivElement>(null);
'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-1 max-w-sm overflow-hidden rounded-md border px-3 py-2 text-sm shadow-md',
className React.useEffect(() => {
)} if (contentRef.current) {
{...props} contentRef.current.scrollTop = 0;
> }
{typeof children === 'string' ? processTooltipContent(children) : children} }, [children]);
</TooltipPrimitive.Content>
)) return (
<TooltipPrimitive.Content
ref={ref}
side={side}
align={align}
className={cn(
'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[60vh] overflow-y-auto whitespace-pre-wrap break-words rounded-md border px-3 py-2 text-sm shadow-md',
className
)}
{...props}
>
{typeof children === 'string' ? processTooltipContent(children) : children}
</TooltipPrimitive.Content>
);
})
TooltipContent.displayName = TooltipPrimitive.Content.displayName TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }