Anchored tooltip (#15568)

Issue - 
- tooltip gets too long when groupby has too much data points
- we need max height on tooltips
- we need to be able to scroll inside the tooltip
- not possible if the tooltip is following the cursor (which library
enforces)
- its not easy to customize Nivo's own tooltip to make it work how we
want it

what we want - 
- let the tooltip anchor to the bar in such a way -- that the top of the
bar aligns with the vertical middle of the tooltip
- add max height to the tooltip

what I did - 
- use floating portal from floating-ui/react
- get the hover datum (ie hovered bars) dimensions on mouse enter to
render the tooltip
- anchor the tooltip at the calculated position
- floating-ui handles the basic things like flipping/offset/shift
- clear the states as required

---------

Co-authored-by: Lucas Bordeau <[email protected]>

Author: ehconitin

packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx

@@ -118,7 +118,7 @@ export const GraphWidget = ({
             yScale={data.yScale}
             curve={data.curve}
             stackedArea={data.stackedArea}
-            enableSlices={data.enableSlices}
+            enableSlices={'x'}
           />
         </Suspense>
       );

packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetFloatingTooltip.tsx

@@ -0,0 +1,77 @@
+import {
+  GraphWidgetTooltip,
+  type GraphWidgetTooltipItem,
+} from '@/page-layout/widgets/graph/components/GraphWidgetTooltip';
+import { useGraphWidgetTooltipFloating } from '@/page-layout/widgets/graph/hooks/useGraphWidgetTooltipFloating';
+import { useTheme } from '@emotion/react';
+import { FloatingPortal, type VirtualElement } from '@floating-ui/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { isDefined } from 'twenty-shared/utils';
+
+type GraphWidgetFloatingTooltipProps = {
+  reference: Element | VirtualElement;
+  boundary: Element;
+  items: GraphWidgetTooltipItem[];
+  indexLabel?: string;
+  highlightedKey?: string;
+  linkTo?: string;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+};
+
+export const GraphWidgetFloatingTooltip = ({
+  reference,
+  boundary,
+  items,
+  indexLabel,
+  highlightedKey,
+  linkTo,
+  onMouseEnter,
+  onMouseLeave,
+}: GraphWidgetFloatingTooltipProps) => {
+  const theme = useTheme();
+
+  const { refs, floatingStyles } = useGraphWidgetTooltipFloating(
+    reference,
+    boundary,
+  );
+
+  if (!isDefined(boundary) || !(boundary instanceof HTMLElement)) {
+    return null;
+  }
+
+  return (
+    <FloatingPortal root={boundary}>
+      <div
+        ref={refs.setFloating}
+        style={{ ...floatingStyles, zIndex: theme.lastLayerZIndex }}
+        role="tooltip"
+        aria-live="polite"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <AnimatePresence>
+          <motion.div
+            initial={{
+              opacity: 0,
+              scale: 0.95,
+            }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{
+              duration: theme.animation.duration.fast,
+              ease: 'easeInOut',
+            }}
+          >
+            <GraphWidgetTooltip
+              items={items}
+              indexLabel={indexLabel}
+              highlightedKey={highlightedKey}
+              linkTo={linkTo}
+            />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </FloatingPortal>
+  );
+};

packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx

@@ -1,3 +1,6 @@
+import { GRAPH_TOOLTIP_MAX_WIDTH_PX } from '@/page-layout/widgets/graph/components/constants/GraphTooltipMaxWidthPx';
+import { GRAPH_TOOLTIP_MIN_WIDTH_PX } from '@/page-layout/widgets/graph/components/constants/GraphTooltipMinWidthPx';
+import { GRAPH_TOOLTIP_SCROLL_MAX_HEIGHT_PX } from '@/page-layout/widgets/graph/components/constants/GraphTooltipScrollMaxHeightPx';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
@@ -12,9 +15,9 @@ const StyledTooltip = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
-  max-width: min(300px, calc(100vw - 40px));
-  min-width: 160px;
-  pointer-events: none;
+  max-width: min(${GRAPH_TOOLTIP_MAX_WIDTH_PX}px, calc(100vw - 40px));
+  min-width: ${GRAPH_TOOLTIP_MIN_WIDTH_PX}px;
+  pointer-events: auto;
 `;
 
 const StyledTooltipContent = styled.div`
@@ -35,10 +38,12 @@ const StyledTooltipRowContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
+  max-height: ${GRAPH_TOOLTIP_SCROLL_MAX_HEIGHT_PX}px;
+  overflow-y: auto;
 `;
 
-const StyledDot = styled.div<{ $color: string }>`
-  background: ${({ $color }) => $color};
+const StyledDot = styled.div<{ color: string }>`
+  background: ${({ color }) => color};
   border-radius: 50%;
   height: 6px;
   width: 6px;
@@ -48,7 +53,7 @@ const StyledDot = styled.div<{ $color: string }>`
 const StyledTooltipLink = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.light};
-  cursor: default;
+  cursor: pointer;
   display: flex;
   justify-content: space-between;
   height: ${({ theme }) => theme.spacing(6)};
@@ -85,32 +90,39 @@ const StyledTooltipRowRightContent = styled.div`
   width: 100%;
 `;
 
-const StyledTooltipLabel = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
+const StyledTooltipLabel = styled.span<{ isHighlighted?: boolean }>`
+  color: ${({ theme, isHighlighted }) =>
+    isHighlighted ? theme.font.color.secondary : theme.font.color.tertiary};
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: ${({ theme, isHighlighted }) =>
+    isHighlighted ? theme.font.weight.medium : theme.font.weight.regular};
 `;
 
-const StyledTooltipValue = styled.span`
+const StyledTooltipValue = styled.span<{ isHighlighted?: boolean }>`
+  color: ${({ theme, isHighlighted }) =>
+    isHighlighted ? theme.font.color.tertiary : theme.font.color.extraLight};
   flex-shrink: 0;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
+  font-weight: ${({ theme, isHighlighted }) =>
+    isHighlighted ? theme.font.weight.semiBold : theme.font.weight.medium};
   white-space: nowrap;
 `;
 
 const StyledHorizontalSectionPadding = styled.div<{
-  $addTop?: boolean;
-  $addBottom?: boolean;
+  addTop?: boolean;
+  addBottom?: boolean;
 }>`
   padding-inline: ${({ theme }) => theme.spacing(1)};
-  margin-top: ${({ $addTop, theme }) => ($addTop ? theme.spacing(1) : 0)};
-  margin-bottom: ${({ $addBottom, theme }) =>
-    $addBottom ? theme.spacing(1) : 0};
+  margin-top: ${({ addTop, theme }) => (addTop ? theme.spacing(1) : 0)};
+  margin-bottom: ${({ addBottom, theme }) =>
+    addBottom ? theme.spacing(1) : 0};
 `;
 
 export type GraphWidgetTooltipItem = {
+  key: string;
   label: string;
   formattedValue: string;
   value: number;
@@ -119,46 +131,63 @@ export type GraphWidgetTooltipItem = {
 
 type GraphWidgetTooltipProps = {
   items: GraphWidgetTooltipItem[];
-  showClickHint?: boolean;
   indexLabel?: string;
+  highlightedKey?: string;
+  linkTo?: string;
 };
 
 export const GraphWidgetTooltip = ({
   items,
-  showClickHint = false,
   indexLabel,
+  highlightedKey,
+  linkTo,
 }: GraphWidgetTooltipProps) => {
   const theme = useTheme();
 
   const filteredItems = items.filter(
     (item) => item.value !== 0 && isNonEmptyString(item.formattedValue),
   );
 
+  const shouldHighlight = filteredItems.length > 1;
+  const hasLink = isNonEmptyString(linkTo);
+
   return (
     <StyledTooltip>
-      <StyledHorizontalSectionPadding $addTop $addBottom={!showClickHint}>
+      <StyledHorizontalSectionPadding addTop addBottom={!hasLink}>
         <StyledTooltipContent>
           {indexLabel && (
             <StyledTooltipHeader>{indexLabel}</StyledTooltipHeader>
           )}
           <StyledTooltipRowContainer>
-            {filteredItems.map((item, index) => (
-              <StyledTooltipRow key={index}>
-                <StyledDot $color={item.dotColor} />
-                <StyledTooltipRowRightContent>
-                  <StyledTooltipLabel>{item.label}</StyledTooltipLabel>
-                  <StyledTooltipValue>{item.formattedValue}</StyledTooltipValue>
-                </StyledTooltipRowRightContent>
-              </StyledTooltipRow>
-            ))}
+            {filteredItems.map((item) => {
+              const isHighlighted =
+                shouldHighlight && highlightedKey === item.key;
+              return (
+                <StyledTooltipRow key={item.key}>
+                  <StyledDot color={item.dotColor} />
+                  <StyledTooltipRowRightContent>
+                    <StyledTooltipLabel isHighlighted={isHighlighted}>
+                      {item.label}
+                    </StyledTooltipLabel>
+                    <StyledTooltipValue isHighlighted={isHighlighted}>
+                      {item.formattedValue}
+                    </StyledTooltipValue>
+                  </StyledTooltipRowRightContent>
+                </StyledTooltipRow>
+              );
+            })}
           </StyledTooltipRowContainer>
         </StyledTooltipContent>
       </StyledHorizontalSectionPadding>
-      {showClickHint && (
+      {hasLink && (
         <>
           <StyledTooltipSeparator />
-          <StyledHorizontalSectionPadding $addBottom>
-            <StyledTooltipLink>
+          <StyledHorizontalSectionPadding addBottom>
+            <StyledTooltipLink
+              onClick={() => {
+                window.location.href = String(linkTo);
+              }}
+            >
               <span>{t`Click to see data`}</span>
               <IconArrowUpRight size={theme.icon.size.sm} />
             </StyledTooltipLink>