Add composites subfield selection in the graph editor (#14931)

Closes https://github.com/twentyhq/core-team-issues/issues/1638
Closes https://github.com/twentyhq/core-team-issues/issues/1623



https://github.com/user-attachments/assets/2dddadaa-781b-497d-b454-0066d599bda3

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx

@@ -2,6 +2,7 @@ import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown';
 import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
 import { ChartTypeSelectionSection } from '@/command-menu/pages/page-layout/components/ChartTypeSelectionSection';
 import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
@@ -14,11 +15,10 @@ import {
   CHART_CONFIGURATION_SETTING_IDS,
   CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP,
 } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { getChartSettingsDropdownContent } from '@/command-menu/pages/page-layout/utils/getChartSettingsDropdownContent';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 
@@ -62,6 +62,10 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
 
   const chartSettings = GRAPH_TYPE_INFORMATION[currentGraphType].settings;
 
+  const { setSelectedItemId } = useSelectableList(
+    COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+  );
+
   return (
     <CommandMenuList
       commandGroups={[]}
@@ -91,6 +95,8 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                     ]
                   : item.id;
 
+              setSelectedItemId(item.id);
+
               updateCurrentWidgetConfig({
                 configToUpdate: {
                   [configKey]: !getChartSettingsValues(item.id),
@@ -131,9 +137,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                   dropdownId={item.id}
                   dropdownComponents={
                     <DropdownContent>
-                      <DropdownMenuItemsContainer>
-                        {getChartSettingsDropdownContent(item.id)}
-                      </DropdownMenuItemsContainer>
+                      {item.DropdownContent && <item.DropdownContent />}
                     </DropdownContent>
                   }
                   dropdownPlacement="bottom-end"

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx

@@ -19,7 +19,6 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronLeft } from 'twenty-ui/display';
@@ -116,7 +115,7 @@ export const ChartAggregateOperationSelectionDropdownContent = ({
           />
         }
       >
-        <Trans>Y-Axis Aggregate Operation</Trans>
+        {`${selectedField.label}`}
       </DropdownMenuHeader>
       <DropdownMenuSearchInput
         autoFocus

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx

@@ -2,7 +2,6 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -11,7 +10,6 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { Trans } from '@lingui/react/macro';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { AxisNameDisplay } from '~/generated/graphql';
 
@@ -60,9 +58,6 @@ export const ChartAxisNameSelectionDropdownContent = () => {
 
   return (
     <>
-      <DropdownMenuHeader>
-        <Trans>Axis Name</Trans>
-      </DropdownMenuHeader>
       <DropdownMenuItemsContainer>
         <SelectableList
           selectableListInstanceId={dropdownId}

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx

@@ -2,7 +2,6 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
@@ -13,7 +12,6 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { ColorSample } from 'twenty-ui/display';
@@ -75,9 +73,6 @@ export const ChartColorSelectionDropdownContent = () => {
 
   return (
     <>
-      <DropdownMenuHeader>
-        <Trans>Color</Trans>
-      </DropdownMenuHeader>
       <DropdownMenuSearchInput
         autoFocus
         type="text"

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx

@@ -3,7 +3,6 @@ import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/h
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -15,7 +14,6 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
@@ -74,9 +72,6 @@ export const ChartDataSourceDropdownContent = () => {
 
   return (
     <>
-      <DropdownMenuHeader>
-        <Trans>Source</Trans>
-      </DropdownMenuHeader>
       <DropdownMenuSearchInput
         autoFocus
         type="text"

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionDropdownContent.tsx

@@ -1,123 +0,0 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { useState } from 'react';
-import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
-
-export const ChartFieldSelectionDropdownContent = () => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const { objectMetadataItems } = useObjectMetadataItems();
-  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
-  const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
-
-  if (
-    widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' &&
-    widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration'
-  ) {
-    throw new Error('Invalid configuration type');
-  }
-
-  const currentXAxisFieldMetadataId =
-    widgetInEditMode.configuration.groupByFieldMetadataIdX;
-
-  const sourceObjectMetadataItem = objectMetadataItems.find(
-    (item) => item.id === widgetInEditMode.objectMetadataId,
-  );
-
-  const dropdownId = useAvailableComponentInstanceIdOrThrow(
-    DropdownComponentInstanceContext,
-  );
-
-  const selectedItemId = useRecoilComponentValue(
-    selectedItemIdComponentState,
-    dropdownId,
-  );
-
-  const availableFieldMetadataItems = filterBySearchQuery({
-    items: sourceObjectMetadataItem?.fields || [],
-    searchQuery,
-    getSearchableValues: (item) => [item.label, item.name],
-  });
-
-  const { updateCurrentWidgetConfig } =
-    useUpdateCurrentWidgetConfig(pageLayoutId);
-
-  const { closeDropdown } = useCloseDropdown();
-
-  const { getIcon } = useIcons();
-
-  if (!isDefined(sourceObjectMetadataItem)) {
-    return null;
-  }
-
-  const handleSelectField = (fieldMetadataId: string) => {
-    updateCurrentWidgetConfig({
-      configToUpdate: {
-        groupByFieldMetadataIdX: fieldMetadataId,
-      },
-    });
-    closeDropdown();
-  };
-
-  return (
-    <>
-      <DropdownMenuHeader>
-        <Trans>X-Axis Field</Trans>
-      </DropdownMenuHeader>
-      <DropdownMenuSearchInput
-        autoFocus
-        type="text"
-        placeholder={t`Search fields`}
-        onChange={(event) => setSearchQuery(event.target.value)}
-        value={searchQuery}
-      />
-      <DropdownMenuSeparator />
-      <DropdownMenuItemsContainer>
-        <SelectableList
-          selectableListInstanceId={dropdownId}
-          focusId={dropdownId}
-          selectableItemIdArray={availableFieldMetadataItems.map(
-            (item) => item.id,
-          )}
-        >
-          {availableFieldMetadataItems.map((fieldMetadataItem) => (
-            <SelectableListItem
-              key={fieldMetadataItem.id}
-              itemId={fieldMetadataItem.id}
-              onEnter={() => {
-                handleSelectField(fieldMetadataItem.id);
-              }}
-            >
-              <MenuItemSelect
-                text={fieldMetadataItem.label}
-                selected={currentXAxisFieldMetadataId === fieldMetadataItem.id}
-                focused={selectedItemId === fieldMetadataItem.id}
-                LeftIcon={getIcon(fieldMetadataItem.icon)}
-                onClick={() => {
-                  handleSelectField(fieldMetadataItem.id);
-                }}
-              />
-            </SelectableListItem>
-          ))}
-        </SelectableList>
-      </DropdownMenuItemsContainer>
-    </>
-  );
-};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx

@@ -2,7 +2,7 @@ import { ChartAggregateOperationSelectionDropdownContent } from '@/command-menu/
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -13,7 +13,6 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
@@ -59,7 +58,8 @@ export const ChartFieldSelectionForAggregateOperationDropdownContent = () => {
     items: sourceObjectMetadataItem?.fields || [],
     searchQuery,
     getSearchableValues: (item) => [item.label, item.name],
-  });
+    // TODO: remove this once group by is supported for relation fields
+  }).filter((field) => !isFieldRelation(field));
 
   const { getIcon } = useIcons();
 
@@ -78,9 +78,6 @@ export const ChartFieldSelectionForAggregateOperationDropdownContent = () => {
 
   return (
     <>
-      <DropdownMenuHeader>
-        <Trans>Y-Axis Field</Trans>
-      </DropdownMenuHeader>
       <DropdownMenuSearchInput
         autoFocus
         type="text"

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx

@@ -0,0 +1,94 @@
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
+import { ICON_NAME_BY_SUB_FIELD } from '@/object-record/record-filter/constants/IconNameBySubField';
+import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsCompositeFieldTypeConfigs';
+import { type CompositeFieldType } from '@/settings/data-model/types/CompositeFieldType';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { IconChevronLeft, useIcons } from 'twenty-ui/display';
+import { MenuItemSelect } from 'twenty-ui/navigation';
+
+type ChartGroupByFieldSelectionCompositeFieldViewProps = {
+  compositeField: FieldMetadataItem;
+  currentSubFieldName: string | undefined;
+  onBack: () => void;
+  onSelectSubField: (subFieldName: string) => void;
+};
+
+export const ChartGroupByFieldSelectionCompositeFieldView = ({
+  compositeField,
+  currentSubFieldName,
+  onBack,
+  onSelectSubField,
+}: ChartGroupByFieldSelectionCompositeFieldViewProps) => {
+  const { getIcon } = useIcons();
+
+  const dropdownId = useAvailableComponentInstanceIdOrThrow(
+    DropdownComponentInstanceContext,
+  );
+
+  const selectedItemId = useRecoilComponentValue(
+    selectedItemIdComponentState,
+    dropdownId,
+  );
+
+  const compositeFieldType = compositeField.type as CompositeFieldType;
+
+  const subFieldNames = SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS[
+    compositeFieldType
+  ].subFields.map((subField) => subField.subFieldName);
+
+  return (
+    <>
+      <DropdownMenuHeader
+        StartComponent={
+          <DropdownMenuHeaderLeftComponent
+            onClick={onBack}
+            Icon={IconChevronLeft}
+          />
+        }
+      >
+        {compositeField.label}
+      </DropdownMenuHeader>
+      <DropdownMenuItemsContainer>
+        <SelectableList
+          selectableListInstanceId={dropdownId}
+          focusId={dropdownId}
+          selectableItemIdArray={subFieldNames}
+        >
+          {subFieldNames.map((subFieldName) => (
+            <SelectableListItem
+              key={subFieldName}
+              itemId={subFieldName}
+              onEnter={() => {
+                onSelectSubField(subFieldName);
+              }}
+            >
+              <MenuItemSelect
+                text={getCompositeSubFieldLabel(
+                  compositeFieldType,
+                  subFieldName,
+                )}
+                selected={currentSubFieldName === subFieldName}
+                focused={selectedItemId === subFieldName}
+                onClick={() => {
+                  onSelectSubField(subFieldName);
+                }}
+                LeftIcon={getIcon(
+                  ICON_NAME_BY_SUB_FIELD[subFieldName] ?? compositeField.icon,
+                )}
+              />
+            </SelectableListItem>
+          ))}
+        </SelectableList>
+      </DropdownMenuItemsContainer>
+    </>
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx

@@ -1,125 +1,16 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
-import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { useState } from 'react';
-import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import {
+  type BarChartConfiguration,
+  type LineChartConfiguration,
+} from '~/generated/graphql';
 
 export const ChartGroupByFieldSelectionDropdownContent = () => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const { objectMetadataItems } = useObjectMetadataItems();
-  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
-  const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
-
-  if (
-    widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' &&
-    widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration'
-  ) {
-    throw new Error('Invalid configuration type');
-  }
-
-  const currentGroupByFieldMetadataId =
-    widgetInEditMode.configuration.groupByFieldMetadataIdY;
-
-  const sourceObjectMetadataItem = objectMetadataItems.find(
-    (item) => item.id === widgetInEditMode.objectMetadataId,
-  );
-
-  const dropdownId = useAvailableComponentInstanceIdOrThrow(
-    DropdownComponentInstanceContext,
-  );
-
-  const selectedItemId = useRecoilComponentValue(
-    selectedItemIdComponentState,
-    dropdownId,
-  );
-
-  const availableFieldMetadataItems = filterBySearchQuery({
-    items: sourceObjectMetadataItem?.fields || [],
-    searchQuery,
-    getSearchableValues: (item) => [item.label, item.name],
-  });
-
-  const { updateCurrentWidgetConfig } =
-    useUpdateCurrentWidgetConfig(pageLayoutId);
-
-  const { closeDropdown } = useCloseDropdown();
-
-  const { getIcon } = useIcons();
-
-  if (!isDefined(sourceObjectMetadataItem)) {
-    return null;
-  }
-
-  const handleSelectField = (fieldMetadataId: string) => {
-    updateCurrentWidgetConfig({
-      configToUpdate: {
-        groupByFieldMetadataIdY: fieldMetadataId,
-      },
-    });
-    closeDropdown();
-  };
-
   return (
-    <>
-      <DropdownMenuHeader>
-        <Trans>Y-Axis Group By Field</Trans>
-      </DropdownMenuHeader>
-      <DropdownMenuSearchInput
-        autoFocus
-        type="text"
-        placeholder={t`Search fields`}
-        onChange={(event) => setSearchQuery(event.target.value)}
-        value={searchQuery}
-      />
-      <DropdownMenuSeparator />
-      <DropdownMenuItemsContainer>
-        <SelectableList
-          selectableListInstanceId={dropdownId}
-          focusId={dropdownId}
-          selectableItemIdArray={availableFieldMetadataItems.map(
-            (item) => item.id,
-          )}
-        >
-          {availableFieldMetadataItems.map((fieldMetadataItem) => (
-            <SelectableListItem
-              key={fieldMetadataItem.id}
-              itemId={fieldMetadataItem.id}
-              onEnter={() => {
-                handleSelectField(fieldMetadataItem.id);
-              }}
-            >
-              <MenuItemSelect
-                text={fieldMetadataItem.label}
-                selected={
-                  currentGroupByFieldMetadataId === fieldMetadataItem.id
-                }
-                focused={selectedItemId === fieldMetadataItem.id}
-                LeftIcon={getIcon(fieldMetadataItem.icon)}
-                onClick={() => {
-                  handleSelectField(fieldMetadataItem.id);
-                }}
-              />
-            </SelectableListItem>
-          ))}
-        </SelectableList>
-      </DropdownMenuItemsContainer>
-    </>
+    <ChartGroupByFieldSelectionDropdownContentBase<
+      BarChartConfiguration | LineChartConfiguration
+    >
+      fieldMetadataIdKey="groupByFieldMetadataIdY"
+      subFieldNameKey="groupBySubFieldNameY"
+    />
   );
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx

@@ -0,0 +1,187 @@
+import { ChartGroupByFieldSelectionCompositeFieldView } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
+import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { t } from '@lingui/core/macro';
+import { useMemo, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+import { MenuItemSelect } from 'twenty-ui/navigation';
+import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
+
+type ChartGroupByFieldSelectionDropdownContentBaseProps<
+  T extends ChartConfiguration,
+> = {
+  fieldMetadataIdKey: keyof T;
+  subFieldNameKey: keyof T;
+};
+
+export const ChartGroupByFieldSelectionDropdownContentBase = <
+  T extends ChartConfiguration,
+>({
+  fieldMetadataIdKey,
+  subFieldNameKey,
+}: ChartGroupByFieldSelectionDropdownContentBaseProps<T>) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const [selectedCompositeField, setSelectedCompositeField] =
+    useState<FieldMetadataItem | null>(null);
+
+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
+
+  const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
+
+  const configuration = widgetInEditMode?.configuration as T;
+
+  const currentGroupByFieldMetadataId = configuration?.[fieldMetadataIdKey] as
+    | string
+    | undefined;
+  const currentSubFieldName = configuration?.[subFieldNameKey] as
+    | string
+    | undefined;
+
+  const sourceObjectMetadataItem = objectMetadataItems.find(
+    (item) => item.id === widgetInEditMode?.objectMetadataId,
+  );
+
+  const dropdownId = useAvailableComponentInstanceIdOrThrow(
+    DropdownComponentInstanceContext,
+  );
+
+  const selectedItemId = useRecoilComponentValue(
+    selectedItemIdComponentState,
+    dropdownId,
+  );
+
+  const availableFieldMetadataItems = useMemo(
+    () =>
+      filterBySearchQuery({
+        items: sourceObjectMetadataItem?.fields || [],
+        searchQuery,
+        getSearchableValues: (item) => [item.label, item.name],
+        // TODO: remove this once group by is supported for relation fields
+      }).filter((field) => !isFieldRelation(field)),
+    [sourceObjectMetadataItem?.fields, searchQuery],
+  );
+
+  const { updateCurrentWidgetConfig } =
+    useUpdateCurrentWidgetConfig(pageLayoutId);
+
+  const { closeDropdown } = useCloseDropdown();
+
+  const { getIcon } = useIcons();
+
+  if (!isDefined(sourceObjectMetadataItem)) {
+    return null;
+  }
+
+  const handleSelectField = (fieldMetadataItem: FieldMetadataItem) => {
+    if (isCompositeFieldType(fieldMetadataItem.type)) {
+      setSelectedCompositeField(fieldMetadataItem);
+    } else {
+      updateCurrentWidgetConfig({
+        configToUpdate: {
+          [fieldMetadataIdKey]: fieldMetadataItem.id,
+          [subFieldNameKey]: null,
+        },
+      });
+      closeDropdown();
+    }
+  };
+
+  const handleBack = () => {
+    setSelectedCompositeField(null);
+  };
+
+  const handleSelectSubField = (subFieldName: string) => {
+    if (!isDefined(selectedCompositeField)) {
+      return;
+    }
+
+    updateCurrentWidgetConfig({
+      configToUpdate: {
+        [fieldMetadataIdKey]: selectedCompositeField.id,
+        [subFieldNameKey]: subFieldName,
+      },
+    });
+    closeDropdown();
+  };
+
+  if (isDefined(selectedCompositeField)) {
+    return (
+      <ChartGroupByFieldSelectionCompositeFieldView
+        compositeField={selectedCompositeField}
+        currentSubFieldName={currentSubFieldName}
+        onBack={handleBack}
+        onSelectSubField={handleSelectSubField}
+      />
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenuSearchInput
+        autoFocus
+        type="text"
+        placeholder={t`Search fields`}
+        onChange={(event) => setSearchQuery(event.target.value)}
+        value={searchQuery}
+      />
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
+        {availableFieldMetadataItems.length === 0 ? (
+          <MenuItemSelect text={t`No fields found`} selected={false} disabled />
+        ) : (
+          <SelectableList
+            selectableListInstanceId={dropdownId}
+            focusId={dropdownId}
+            selectableItemIdArray={availableFieldMetadataItems.map(
+              (item) => item.id,
+            )}
+          >
+            {availableFieldMetadataItems.map((fieldMetadataItem) => (
+              <SelectableListItem
+                key={fieldMetadataItem.id}
+                itemId={fieldMetadataItem.id}
+                onEnter={() => {
+                  handleSelectField(fieldMetadataItem);
+                }}
+              >
+                <MenuItemSelect
+                  text={fieldMetadataItem.label}
+                  selected={
+                    !isCompositeFieldType(fieldMetadataItem.type) &&
+                    currentGroupByFieldMetadataId === fieldMetadataItem.id
+                  }
+                  focused={selectedItemId === fieldMetadataItem.id}
+                  LeftIcon={getIcon(fieldMetadataItem.icon)}
+                  hasSubMenu={isCompositeFieldType(fieldMetadataItem.type)}
+                  onClick={() => {
+                    handleSelectField(fieldMetadataItem);
+                  }}
+                />
+              </SelectableListItem>
+            ))}
+          </SelectableList>
+        )}
+      </DropdownMenuItemsContainer>
+    </>
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx

@@ -0,0 +1,11 @@
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import { type PieChartConfiguration } from '~/generated/graphql';
+
+export const ChartPieFieldSelectionDropdownContent = () => {
+  return (
+    <ChartGroupByFieldSelectionDropdownContentBase<PieChartConfiguration>
+      fieldMetadataIdKey="groupByFieldMetadataId"
+      subFieldNameKey="groupBySubFieldName"
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx

@@ -3,7 +3,6 @@ import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layou
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -21,13 +20,7 @@ import {
   type NumberChartConfiguration,
 } from '~/generated/graphql';
 
-type ChartSortByGroupByFieldDropdownContentProps = {
-  title: string;
-};
-
-export const ChartSortByGroupByFieldDropdownContent = ({
-  title,
-}: ChartSortByGroupByFieldDropdownContentProps) => {
+export const ChartSortByGroupByFieldDropdownContent = () => {
   const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
   const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
 
@@ -74,7 +67,6 @@ export const ChartSortByGroupByFieldDropdownContent = ({
 
   return (
     <>
-      <DropdownMenuHeader>{title}</DropdownMenuHeader>
       <DropdownMenuItemsContainer>
         <SelectableList
           selectableListInstanceId={dropdownId}

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx

@@ -0,0 +1,16 @@
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import {
+  type BarChartConfiguration,
+  type LineChartConfiguration,
+} from '~/generated/graphql';
+
+export const ChartXAxisFieldSelectionDropdownContent = () => {
+  return (
+    <ChartGroupByFieldSelectionDropdownContentBase<
+      BarChartConfiguration | LineChartConfiguration
+    >
+      fieldMetadataIdKey="groupByFieldMetadataIdX"
+      subFieldNameKey="groupBySubFieldNameX"
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisSortBySelectionDropdownContent.tsx

@@ -3,7 +3,6 @@ import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hook
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -12,7 +11,6 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { Trans } from '@lingui/react/macro';
 
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { type GraphOrderBy } from '~/generated/graphql';
@@ -59,46 +57,38 @@ export const ChartXAxisSortBySelectionDropdownContent = () => {
   });
 
   return (
-    <>
-      <DropdownMenuHeader>
-        <Trans>X-Axis Sort By</Trans>
-      </DropdownMenuHeader>
-      <DropdownMenuItemsContainer>
-        <SelectableList
-          selectableListInstanceId={dropdownId}
-          focusId={dropdownId}
-          selectableItemIdArray={X_SORT_BY_OPTIONS.map(
-            (option) => option.value,
-          )}
-        >
-          {X_SORT_BY_OPTIONS.map((sortOption) => (
-            <SelectableListItem
-              key={sortOption.value}
-              itemId={sortOption.value}
-              onEnter={() => {
+    <DropdownMenuItemsContainer>
+      <SelectableList
+        selectableListInstanceId={dropdownId}
+        focusId={dropdownId}
+        selectableItemIdArray={X_SORT_BY_OPTIONS.map((option) => option.value)}
+      >
+        {X_SORT_BY_OPTIONS.map((sortOption) => (
+          <SelectableListItem
+            key={sortOption.value}
+            itemId={sortOption.value}
+            onEnter={() => {
+              handleSelectSortOption(sortOption.value);
+            }}
+          >
+            <MenuItemSelect
+              text={getXSortOptionLabel({
+                graphOrderBy: sortOption.value,
+                groupByFieldMetadataIdX: configuration.groupByFieldMetadataIdX,
+                aggregateFieldMetadataId:
+                  configuration.aggregateFieldMetadataId,
+                aggregateOperation: configuration.aggregateOperation,
+              })}
+              selected={currentOrderByX === sortOption.value}
+              focused={selectedItemId === sortOption.value}
+              LeftIcon={sortOption.icon}
+              onClick={() => {
                 handleSelectSortOption(sortOption.value);
               }}
-            >
-              <MenuItemSelect
-                text={getXSortOptionLabel({
-                  graphOrderBy: sortOption.value,
-                  groupByFieldMetadataIdX:
-                    configuration.groupByFieldMetadataIdX,
-                  aggregateFieldMetadataId:
-                    configuration.aggregateFieldMetadataId,
-                  aggregateOperation: configuration.aggregateOperation,
-                })}
-                selected={currentOrderByX === sortOption.value}
-                focused={selectedItemId === sortOption.value}
-                LeftIcon={sortOption.icon}
-                onClick={() => {
-                  handleSelectSortOption(sortOption.value);
-                }}
-              />
-            </SelectableListItem>
-          ))}
-        </SelectableList>
-      </DropdownMenuItemsContainer>
-    </>
+            />
+          </SelectableListItem>
+        ))}
+      </SelectableList>
+    </DropdownMenuItemsContainer>
   );
 };