Spaces:
Running
Running
File size: 2,298 Bytes
44072a9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import React, { useRef, useEffect, useState } from 'react'
import { InformationCircleIcon, DocumentTextIcon } from '@heroicons/react/24/outline'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'
import Descriptions from '../Descriptions'
interface MetricInfoIconProps {
metricName: string
}
const MetricInfoIcon: React.FC<MetricInfoIconProps> = ({ metricName }) => {
const [descriptionsLoaded, setDescriptionsLoaded] = useState(false)
const descriptions = useRef(Descriptions.getInstance())
useEffect(() => {
descriptions.current.load().then(() => setDescriptionsLoaded(true))
}, [])
const fullName = descriptions.current.getFullName(metricName) || metricName
const description = descriptions.current.getDescription(metricName)
const paperUrl = descriptions.current.getUrl(metricName)
if (!description) return null
return (
<>
<span
className="ml-1 cursor-pointer"
data-tooltip-id={`tooltip-metric-${metricName}`}
tabIndex={0}
aria-label={`Show info for ${metricName}`}
role="button"
>
<InformationCircleIcon className="h-4 w-4 text-blue-400 hover:text-blue-600" />
</span>
<ReactTooltip
id={`tooltip-metric-${metricName}`}
place="top"
className="z-[10000] max-w-xs !opacity-100 bg-base-100 text-base-content"
style={{
boxShadow: '0 0 10px rgba(0,0,0,0.2)',
zIndex: 10000, // Ensure tooltips appear above sticky elements
}}
positionStrategy="fixed"
clickable={true}
>
<div className="p-2 text-xs text-left relative z-[10000]">
<div className="font-semibold mb-1">{fullName}</div>
<div className="whitespace-pre-line mb-2">{description}</div>
{paperUrl && (
<div>
<a
href={paperUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 underline flex items-center"
>
<DocumentTextIcon className="h-3 w-3 mr-1" />
Link
</a>
</div>
)}
</div>
</ReactTooltip>
</>
)
}
export default MetricInfoIcon
|