admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactored all FieldDisplay types for performance optimization (#5768)

Browse Source 
This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |
This commit is contained in:
Lucas Bordeau
2024-06-12 18:36:25 +02:00
committed by GitHub
parent 007e0e8b0e
commit 03b3c8a67a
101 changed files with 17167 additions and 15795 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
packages/twenty-front/src/testing/mock-data/objectMetadataItems.ts
View File

@ -1,8 +1,4 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import {
FieldMetadataType,
RelationMetadataType,
} from '~/generated-metadata/graphql';
import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/standard-metadata-query-result';
export const generatedMockObjectMetadataItems: ObjectMetadataItem[] =
@ -10,431 +6,3 @@ export const generatedMockObjectMetadataItems: ObjectMetadataItem[] =
...edge.node,
fields: edge.node.fields.edges.map((edge) => edge.node),
}));
export const mockObjectMetadataItem: ObjectMetadataItem = {
__typename: 'object',
id: 'b79a038c-b06b-4a5a-b7ee-f8ba412aa1c0',
nameSingular: 'company',
namePlural: 'companies',
labelSingular: 'Company',
labelPlural: 'Companies',
description: 'A company',
icon: 'IconBuildingSkyscraper',
isCustom: false,
isRemote: false,
isActive: true,
isSystem: false,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
labelIdentifierFieldMetadataId: null,
imageIdentifierFieldMetadataId: null,
fields: [
{
__typename: 'field',
id: '390eb5e5-d8d1-4064-bf75-3461251eb142',
type: FieldMetadataType.Boolean,
name: 'idealCustomerProfile',
label: 'ICP',
description:
'Ideal Customer Profile: Indicates whether the company is the most suitable and valuable customer for you',
icon: 'IconTarget',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: '72a43010-f236-4fa2-8ac4-a31e6b37d692',
type: FieldMetadataType.Relation,
name: 'people',
label: 'People',
description: 'People linked to the company.',
icon: 'IconUsers',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: {
id: 'f08943fe-e8a0-4747-951c-c3b391842453',
relationType: RelationMetadataType.OneToMany,
toObjectMetadata: {
id: 'fcccc985-5edf-405c-aa2b-80c82b230f35',
nameSingular: 'person',
namePlural: 'people',
isSystem: false,
isRemote: false,
},
toFieldMetadataId: 'c756f6ff-8c00-4fe5-a923-c6cfc7b1ac4a',
},
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: '51636fba-1bd9-4344-bba8-9639cbc8e134',
type: FieldMetadataType.Relation,
name: 'opportunities',
label: 'Opportunities',
description: 'Opportunities linked to the company.',
icon: 'IconTargetArrow',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: {
id: '7ffae8bb-b12b-4ad9-8922-da0d517b5612',
relationType: RelationMetadataType.OneToMany,
toObjectMetadata: {
id: '169e5b21-dc95-44a8-acd0-5e9447dd0784',
nameSingular: 'opportunity',
namePlural: 'opportunities',
isSystem: false,
isRemote: false,
},
toFieldMetadataId: '00468e2a-a601-4635-ae9c-a9bb826cc860',
},
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'd541f76b-d327-4dda-8ef8-81b60e5ad01e',
type: FieldMetadataType.Relation,
name: 'activityTargets',
label: 'Activities',
description: 'Activities tied to the company',
icon: 'IconCheckbox',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: {
id: 'bc42672b-350f-45c3-bd1f-4debb536ccd1',
relationType: RelationMetadataType.OneToMany,
toObjectMetadata: {
id: 'b87c6cac-a8e7-4156-a525-30ec536acd75',
nameSingular: 'activityTarget',
namePlural: 'activityTargets',
isSystem: true,
isRemote: false,
},
toFieldMetadataId: 'bba19feb-c248-487b-92d7-98df54c51e44',
},
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'dacb7562-497e-4080-8ef5-746d6786ed49',
type: FieldMetadataType.DateTime,
name: 'createdAt',
label: 'Creation date',
description: null,
icon: 'IconCalendar',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: false,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
type: 'now',
},
},
{
__typename: 'field',
id: 'f3b4ff22-800b-4f13-8262-8003da8eed5b',
type: FieldMetadataType.Number,
name: 'employees',
label: 'Employees',
description: 'Number of employees in the company',
icon: 'IconUsers',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'c3e64012-32cc-43f1-af2f-33b37cc4e59d',
type: FieldMetadataType.Link,
name: 'linkedinLink',
label: 'Linkedin',
description: 'The company Linkedin account',
icon: 'IconBrandLinkedin',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'fced9acc-0374-487d-9da4-579a17435df0',
type: FieldMetadataType.Link,
name: 'xLink',
label: 'X',
description: 'The company Twitter/X account',
icon: 'IconBrandX',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: '63db0a2f-ffb4-4ea1-98c7-f7e13ce75c38',
type: FieldMetadataType.Relation,
name: 'attachments',
label: 'Attachments',
description: 'Attachments linked to the company.',
icon: 'IconFileImport',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: {
id: '901fd405-c6bf-4559-9d1f-d0937b6f16d9',
relationType: RelationMetadataType.OneToMany,
toObjectMetadata: {
id: '77240b4b-6bcf-454d-a102-19bbba181716',
nameSingular: 'attachment',
namePlural: 'attachments',
isSystem: true,
isRemote: false,
},
toFieldMetadataId: '0880dac5-37d2-43a6-b143-722126d4923f',
},
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'e775ce12-87c0-4feb-bcfe-9af3d8ca117b',
type: FieldMetadataType.Uuid,
name: 'id',
label: 'Id',
description: null,
icon: null,
isCustom: false,
isActive: true,
isSystem: true,
isNullable: false,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
type: 'uuid',
},
},
{
__typename: 'field',
id: '2278ef91-3d6a-45cf-86f5-76b7bfa2bf32',
type: FieldMetadataType.Text,
name: 'domainName',
label: 'Domain Name',
description:
'The company website URL. We use this url to fetch the company icon',
icon: 'IconLink',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
value: '',
},
},
{
__typename: 'field',
id: '438291d7-18f4-48cf-8dca-05e96c5a0765',
type: FieldMetadataType.Currency,
name: 'annualRecurringRevenue',
label: 'ARR',
description:
'Annual Recurring Revenue: The actual or estimated annual revenue of the company',
icon: 'IconMoneybag',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'edb8475f-03fc-4ac1-9305-e9d4e2dacd11',
type: FieldMetadataType.DateTime,
name: 'updatedAt',
label: 'Update date',
description: null,
icon: 'IconCalendar',
isCustom: false,
isActive: true,
isSystem: true,
isNullable: false,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
type: 'now',
},
},
{
__typename: 'field',
id: 'e3c9ba7f-cecf-4ac6-a7b9-7a9987be0253',
type: FieldMetadataType.Relation,
name: 'accountOwner',
label: 'Account Owner',
description:
'Your team member responsible for managing the company account',
icon: 'IconUserCircle',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: {
id: '0317d74c-5187-491f-9e1d-d22f06ca2a38',
relationType: RelationMetadataType.OneToMany,
fromObjectMetadata: {
id: '92c306ce-ad06-4712-99d2-5d0daf13c95f',
nameSingular: 'workspaceMember',
namePlural: 'workspaceMembers',
isSystem: true,
isRemote: false,
},
fromFieldMetadataId: '0f3e456f-3bb4-4261-a436-95246dc0e159',
},
defaultValue: null,
},
{
__typename: 'field',
id: 'a34bd3b3-6949-4793-bac6-d2c054639c7f',
type: FieldMetadataType.Text,
name: 'address',
label: 'Address',
description: 'The company address',
icon: 'IconMap',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
value: '',
},
},
{
__typename: 'field',
id: '4b204845-f1fc-4fd8-8fdd-f4caeaab749f',
type: FieldMetadataType.Relation,
name: 'favorites',
label: 'Favorites',
description: 'Favorites linked to the company',
icon: 'IconHeart',
isCustom: false,
isActive: true,
isSystem: true,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: {
id: '8e0d3aa1-6135-4d65-aa28-15a5b6d1619c',
relationType: RelationMetadataType.OneToMany,
toObjectMetadata: {
id: '1415392e-0ecb-462e-aa67-001e424e6a37',
nameSingular: 'favorite',
namePlural: 'favorites',
isSystem: true,
isRemote: false,
},
toFieldMetadataId: '8fd8965b-bd4e-4a9b-90e9-c75652dadda1',
},
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: 'a795e81e-0bcf-4fd6-8f2f-b3764b990d2d',
type: FieldMetadataType.Uuid,
name: 'accountOwnerId',
label: 'Account Owner id (foreign key)',
description:
'Your team member responsible for managing the company account id foreign key',
icon: 'IconUserCircle',
isCustom: false,
isActive: true,
isSystem: true,
isNullable: true,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: null,
},
{
__typename: 'field',
id: '87887d23-f632-4d3e-840a-02fcee960660',
type: FieldMetadataType.Text,
name: 'name',
label: 'Name',
description: 'The company name',
icon: 'IconBuildingSkyscraper',
isCustom: false,
isActive: true,
isSystem: false,
isNullable: false,
createdAt: '2023-12-19T12:15:28.459Z',
updatedAt: '2023-12-19T12:15:28.459Z',
fromRelationMetadata: null,
toRelationMetadata: null,
defaultValue: {
value: '',
},
},
],
};