Skip to content

Commit

Permalink
Merge pull request #1866 from Shoaibdev7/On-hover-render-description-…
Browse files Browse the repository at this point in the history
…of-the-entity

On hover - render description of the entity
  • Loading branch information
Rassl authored Jul 18, 2024
2 parents 7b1e0b1 + 26fd0d0 commit 97a7c1b
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from 'styled-components'
import { Tooltip } from '~/components/common/ToolTip'
import { ExtractedEntity } from '~/types'
import { colors } from '~/utils'
import { ExtractedEntity } from '~/types/index'

export function highlightAiSummary(
sDescription: string,
Expand All @@ -25,18 +26,21 @@ export function highlightAiSummary(
return (
<>
{parts.map((part) => {
if (regex.test(part) && !highlighted.has(part.toLowerCase())) {
const entity = entities.find((e) => e.entity.toLowerCase() === part.toLowerCase())

if (entity && !highlighted.has(part.toLowerCase())) {
highlighted.add(part.toLowerCase())

return (
<Highlight
key={part}
onClick={() => {
handleSubmit(part)
}}
>
{part}
</Highlight>
<StyledTooltip key={part} content={entity.description}>
<Highlight
onClick={() => {
handleSubmit(part)
}}
>
{part}
</Highlight>
</StyledTooltip>
)
}

Expand All @@ -60,3 +64,24 @@ const Highlight = styled.span`
cursor: pointer;
}
`

const StyledTooltip = styled(({ className, ...props }) => (
<Tooltip
{...props}
backgroundColor={colors.BG2}
borderRadius="6px"
className={className}
color="white"
fontSize="12px"
fontWeight="500"
minWidth="160px"
padding="10px"
position="top"
textAlign="start"
whiteSpace="normal"
/>
))`
& .tooltip-content {
color: white;
}
`
2 changes: 1 addition & 1 deletion src/components/App/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Leva } from 'leva'
import { lazy, Suspense, useCallback, useEffect } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useSearchParams } from 'react-router-dom'
import 'react-toastify/dist/ReactToastify.css'
import { Socket } from 'socket.io-client'
import styled from 'styled-components'
Expand Down Expand Up @@ -34,7 +35,6 @@ import { DeviceCompatibilityNotice } from './DeviceCompatibilityNotification'
import { Helper } from './Helper'
import { SecondarySideBar } from './SecondarySidebar'
import { Toasts } from './Toasts'
import { useSearchParams } from 'react-router-dom'

const Wrapper = styled(Flex)`
height: 100%;
Expand Down
75 changes: 63 additions & 12 deletions src/components/common/ToolTip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ interface TooltipProps {
content: string
children: React.ReactNode
margin?: string
backgroundColor?: string
color?: string
padding?: string
fontSize?: string
fontWeight?: string
borderRadius?: string
position?: string
minWidth?: string
whiteSpace?: string
textAlign?: string
}

const TooltipContainer = styled.div`
Expand All @@ -12,37 +22,78 @@ const TooltipContainer = styled.div`
align-items: center;
`

const TooltipText = styled.div<{ margin?: string }>`
const TooltipText = styled.div<{
margin?: string
backgroundColor?: string
color?: string
padding?: string
fontSize?: string
fontWeight?: string
borderRadius?: string
position?: string
minWidth?: string
whiteSpace?: string
textAlign?: string
}>`
visibility: hidden;
width: auto;
background-color: white;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px 8px;
background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
color: ${({ color }) => color || 'black'};
text-align: ${({ textAlign }) => textAlign || 'center'};
min-width: ${({ minWidth }) => minWidth || 'auto'};
border-radius: ${({ borderRadius }) => borderRadius || '4px'};
padding: ${({ padding }) => padding || '5px 8px'};
position: absolute;
z-index: 1;
top: 100%;
${({ position }) => (position === 'top' ? 'bottom: 100%;' : 'top: 100%;')}
left: 50%;
transform: translateX(-50%);
margin-top: ${({ margin }) => margin || '0px'};
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap;
white-space: ${({ whiteSpace }) => whiteSpace || 'nowrap'};
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 600;
font-size: ${({ fontSize }) => fontSize || '12px'};
font-weight: ${({ fontWeight }) => fontWeight || '600'};
${TooltipContainer}:hover & {
visibility: visible;
opacity: 1;
}
`

export const Tooltip = ({ content, children, margin }: TooltipProps) => (
export const Tooltip = ({
content,
children,
margin,
backgroundColor,
color,
padding,
fontSize,
fontWeight,
borderRadius,
minWidth,
whiteSpace,
position,
textAlign,
}: TooltipProps) => (
<TooltipContainer>
{children}
<TooltipText margin={margin}>{content}</TooltipText>
<TooltipText
backgroundColor={backgroundColor}
borderRadius={borderRadius}
color={color}
fontSize={fontSize}
fontWeight={fontWeight}
margin={margin}
minWidth={minWidth}
padding={padding}
position={position}
textAlign={textAlign}
whiteSpace={whiteSpace}
>
{content}
</TooltipText>
</TooltipContainer>
)

0 comments on commit 97a7c1b

Please sign in to comment.