From 86aff36035f2fb37122755ec79223891556f4845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 24 Nov 2025 17:44:28 +0100
Subject: [PATCH] Fix and improve chart type selection (#16033)

The new version of the side panel is smaller so it introduced a
regression on the chart type selection because there was not enough
space for all the chart types to fit with the label.

This PR removes the label to gain some space and display the chart type
label in a tooltip.

## Before

<img width="834" height="1406" alt="CleanShot 2025-11-24 at 17 33 45@2x"
src="https://github.com/user-attachments/assets/76bbea54-af16-4643-9de6-ab3da6741e11"
/>


## After

### Without disabled charts


https://github.com/user-attachments/assets/74d62b86-e440-41f5-a3e6-c5754940c28e

### With disabled charts


https://github.com/user-attachments/assets/f4ce3a3a-5dee-4f41-8b96-5f671794197d
---
 .../components/ChartTypeSelectionSection.tsx  |  7 +-
 .../constants/GraphTypeInformation.ts         | 12 ++--
 .../components/SidePanelInformationBanner.tsx |  3 +-
 .../navigation/menu/components/MenuPicker.tsx | 70 +++++++++++++------
 .../__stories__/MenuPicker.stories.tsx        | 35 ++++++++--
 5 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
index 0beed69933..8657148271 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
@@ -47,17 +47,18 @@ export const ChartTypeSelectionSection = ({
 
         return (
           <MenuPicker
+            id={graphType}
             selected={currentGraphType === graphType}
             key={graphType}
             icon={GRAPH_TYPE_INFORMATION[graphType].icon}
             onClick={() => {
               setCurrentGraphType(graphType);
             }}
-            label={
-              isDisabled ? t`Soon` : t(GRAPH_TYPE_INFORMATION[graphType].label)
-            }
             showLabel
             disabled={isDisabled}
+            tooltipContent={
+              isDisabled ? t`Soon` : t(GRAPH_TYPE_INFORMATION[graphType].label)
+            }
           />
         );
       })}
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
index b3a7e3b883..3a06372484 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
@@ -26,32 +26,32 @@ export const GRAPH_TYPE_INFORMATION: Record<
   }
 > = {
   [GraphType.VERTICAL_BAR]: {
-    label: msg`Vertical`,
+    label: msg`Vertical Bar Chart`,
     icon: IconChartBar,
     settings: getBarChartSettings(GraphType.VERTICAL_BAR),
   },
   [GraphType.HORIZONTAL_BAR]: {
-    label: msg`Horizontal`,
+    label: msg`Horizontal Bar Chart`,
     icon: IconChartBarHorizontal,
     settings: getBarChartSettings(GraphType.HORIZONTAL_BAR),
   },
   [GraphType.PIE]: {
-    label: msg`Pie`,
+    label: msg`Pie Chart`,
     icon: IconChartPie,
     settings: PIE_CHART_SETTINGS,
   },
   [GraphType.LINE]: {
-    label: msg`Line`,
+    label: msg`Line Chart`,
     icon: IconChartLine,
     settings: LINE_CHART_SETTINGS,
   },
   [GraphType.AGGREGATE]: {
-    label: msg`Aggregate`,
+    label: msg`Aggregate Chart`,
     icon: IconSum,
     settings: AGGREGATE_CHART_SETTINGS,
   },
   [GraphType.GAUGE]: {
-    label: msg`Gauge`,
+    label: msg`Gauge Chart`,
     icon: IconGauge,
     settings: GAUGE_CHART_SETTINGS,
   },
diff --git a/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx b/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx
index 1e4cba49fe..2f2c3241e6 100644
--- a/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx
+++ b/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared/utils';
 import {
   IconAlertTriangle,
   IconInfoCircle,
@@ -66,7 +67,7 @@ export const SidePanelInformationBanner = ({
         )}
       </StyledIconContainer>
       <StyledMessage>{message}</StyledMessage>
-      {tooltipMessage && (
+      {isDefined(tooltipMessage) && (
         <AppTooltip
           anchorSelect={`[data-tooltip-id='${tooltipId}']`}
           content={tooltipMessage}
diff --git a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx
index e88fd2c167..83929d0aa9 100644
--- a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx
+++ b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx
@@ -1,6 +1,13 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { type IconComponent } from '@ui/display';
+import { isNonEmptyString } from '@sniptt/guards';
+import {
+  AppTooltip,
+  TooltipDelay,
+  TooltipPosition,
+  type IconComponent,
+} from '@ui/display';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledMenuPicker = styled.button<{
   selected: boolean;
@@ -101,17 +108,22 @@ const StyledLabel = styled.div<{
 `;
 
 export type MenuPickerProps = {
+  id: string;
   className?: string;
   disabled?: boolean;
   icon: IconComponent;
-  label: string;
+  label?: string;
   onClick?: () => void;
   selected?: boolean;
   showLabel?: boolean;
   testId?: string;
+  tooltipContent?: string;
+  tooltipDelay?: TooltipDelay;
+  tooltipOffset?: number;
 };
 
 export const MenuPicker = ({
+  id,
   icon: Icon,
   label,
   selected = false,
@@ -120,29 +132,47 @@ export const MenuPicker = ({
   onClick,
   className,
   testId,
+  tooltipContent,
+  tooltipDelay = TooltipDelay.noDelay,
+  tooltipOffset = 5,
 }: MenuPickerProps) => {
   const theme = useTheme();
 
   return (
-    <StyledMenuPicker
-      selected={selected}
-      disabled={disabled}
-      onClick={onClick}
-      className={className}
-      data-testid={testId}
-      aria-pressed={selected}
-      aria-disabled={disabled}
-      aria-label={label}
-    >
-      <StyledIconContainer>
-        <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
-      </StyledIconContainer>
+    <>
+      <StyledMenuPicker
+        id={id}
+        selected={selected}
+        disabled={disabled}
+        onClick={onClick}
+        className={className}
+        data-testid={testId}
+        aria-pressed={selected}
+        aria-disabled={disabled}
+        aria-label={label}
+      >
+        <StyledIconContainer>
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        </StyledIconContainer>
 
-      {showLabel && (
-        <StyledLabel selected={selected} disabled={disabled}>
-          {label}
-        </StyledLabel>
+        {isDefined(label) && showLabel && (
+          <StyledLabel selected={selected} disabled={disabled}>
+            {label}
+          </StyledLabel>
+        )}
+      </StyledMenuPicker>
+
+      {isNonEmptyString(tooltipContent) && (
+        <AppTooltip
+          anchorSelect={`#${id}`}
+          offset={tooltipOffset}
+          content={tooltipContent}
+          place={TooltipPosition.Bottom}
+          positionStrategy="fixed"
+          delay={tooltipDelay}
+          noArrow
+        />
       )}
-    </StyledMenuPicker>
+    </>
   );
 };
diff --git a/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx
index d167edaa12..351126f368 100644
--- a/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { IconChartPie } from '@ui/display';
+import { IconChartPie, TooltipDelay } from '@ui/display';
 import { MenuPicker } from '@ui/navigation/menu/components/MenuPicker';
 import { ComponentDecorator } from '@ui/testing';
 
@@ -67,19 +67,44 @@ export const AllStates: Story = {
     >
       <div>
         <StyledTitle>Default</StyledTitle>
-        <MenuPicker icon={IconChartPie} label="Default" />
+        <MenuPicker id="default" icon={IconChartPie} label="Default" />
       </div>
       <div>
         <StyledTitle>Selected</StyledTitle>
-        <MenuPicker icon={IconChartPie} label="Selected" selected />
+        <MenuPicker
+          id="selected"
+          icon={IconChartPie}
+          label="Selected"
+          selected
+        />
       </div>
       <div>
         <StyledTitle>Disabled</StyledTitle>
-        <MenuPicker icon={IconChartPie} label="Disabled" disabled />
+        <MenuPicker
+          id="disabled"
+          icon={IconChartPie}
+          label="Disabled"
+          disabled
+        />
       </div>
       <div>
         <StyledTitle>No Label</StyledTitle>
-        <MenuPicker icon={IconChartPie} label="No Label" showLabel={false} />
+        <MenuPicker
+          id="no-label"
+          icon={IconChartPie}
+          label="No Label"
+          showLabel={false}
+        />
+      </div>
+      <div>
+        <StyledTitle> With Tooltip</StyledTitle>
+        <MenuPicker
+          id="tooltip"
+          icon={IconChartPie}
+          label="Tooltip"
+          tooltipContent="Tooltip"
+          tooltipDelay={TooltipDelay.mediumDelay}
+        />
       </div>
     </div>
   ),