[Dashboards] Relation fields groupby

[ehconitin]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds support for grouping charts by relation fields (MANY_TO_ONE only), including nested composite fields within relations (e.g., company.address.addressCity).

Key Changes:

• Added new ChartGroupByFieldSelectionRelationFieldView component for selecting subfields from related objects
• Enhanced buildGroupByFieldObject to construct nested GraphQL query structures for relation fields with subfields
• Created new utilities (getFieldOrderBy, getRelationFieldOrderBy, mapOrderByToDirection) to handle order-by logic for different field types
• Refactored getGroupByOrderBy to delegate field-type-specific logic to new utility functions
• Added getRelationFieldLabel utility to generate human-readable labels for relation field selections
• Date fields within relations are temporarily excluded due to backend limitations (noted in TODO comment)
• Date granularity settings are hidden for relation fields in the UI

Implementation Notes:

• Only MANY_TO_ONE relations are supported (filtering happens in line 89 of ChartGroupByFieldSelectionDropdownContentBase.tsx)
• Relation fields can have deeply nested subfields (relation → composite → subfield), properly handled via dot notation splitting
• Comprehensive test coverage added for relation field scenarios

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is well-structured with proper separation of concerns, comprehensive test coverage for new functionality, and appropriate handling of edge cases. The code follows existing patterns, has clear TODOs for known limitations, and properly filters unsupported field types. The refactoring improves maintainability by extracting reusable utilities.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx	4/5	New component for selecting relation field subfields in chart group-by dropdown. Filters out system fields, relation fields, and date fields (temporary limitation noted in TODO).
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx	5/5	Added support for MANY_TO_ONE relation fields in chart group-by selection, with proper state management and navigation handlers.
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/buildGroupByFieldObject.ts	5/5	Enhanced to handle relation fields with subfields, including nested composite fields (e.g., company.address.addressCity).
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/getRelationFieldOrderBy.ts	5/5	New utility to construct order-by objects for relation fields, supporting both simple and nested composite subfields.
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/getFieldOrderBy.ts	5/5	New utility to dispatch order-by construction based on field type (composite, date, relation, or scalar).

Sequence Diagram

sequenceDiagram
    participant User
    participant DropdownBase as ChartGroupByFieldSelectionDropdownContentBase
    participant RelationView as ChartGroupByFieldSelectionRelationFieldView
    participant CompositeView as ChartGroupByFieldSelectionCompositeFieldView
    participant Utils as Utility Functions
    participant Config as Widget Config

    User->>DropdownBase: Select Group By Field
    alt Field is Relation (MANY_TO_ONE)
        DropdownBase->>RelationView: Navigate to relation field view
        RelationView->>RelationView: Fetch target object metadata
        RelationView->>RelationView: Filter available subfields<br/>(exclude system, relations, dates)
        User->>RelationView: Select subfield
        alt Subfield is Composite
            RelationView->>CompositeView: Navigate to composite view
            User->>CompositeView: Select composite subfield
            CompositeView->>RelationView: Return "fieldName.subFieldName"
        else Subfield is Scalar
            RelationView->>DropdownBase: Return subfield name
        end
        DropdownBase->>Config: Update with field ID + subfield name
    else Field is Composite
        DropdownBase->>CompositeView: Navigate to composite view
        User->>CompositeView: Select composite subfield
        CompositeView->>DropdownBase: Return subfield name
        DropdownBase->>Config: Update with field ID + subfield name
    else Field is Scalar
        DropdownBase->>Config: Update with field ID only
    end
    
    Config->>Utils: generateGroupByQueryVariables()
    Utils->>Utils: buildGroupByFieldObject()<br/>(handles nested relations)
    Utils->>Utils: getGroupByOrderBy()
    Utils->>Utils: getFieldOrderBy()<br/>(dispatches by field type)
    alt Field is Relation with Subfield
        Utils->>Utils: getRelationFieldOrderBy()<br/>(builds nested structure)
    end
    Utils-->>Config: GraphQL query variables

Loading

[greptile-apps]

_{16 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:25967

This environment will automatically shut down when the PR is closed or after 5 hours.

[greptile-apps]

_{16 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[bosiraphael]

LGTM, just remove the double dropdown closure

[github-actions]

Thanks @ehconitin for your contribution!
This marks your 261st PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter