Refactored all FieldDisplay types for performance optimization (#5768)

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 |
2024-06-12 18:36:25 +02:00
parent 007e0e8b0e
commit 03b3c8a67a
101 changed files with 17167 additions and 15795 deletions
--- a/packages/twenty-ui/src/display/chip/components/Chip.module.css
+++ b/packages/twenty-ui/src/display/chip/components/Chip.module.css
@ -1,84 +0,0 @@
-.label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chip {
-  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-  --chip-vertical-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-
-  align-items: center;
-  border-radius: var(--twentycrm-border-radius-sm);
-
-  color: var(--twentycrm-font-color-secondary);
-
-  display: inline-flex;
-  justify-content: center;
-
-  gap: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-  height: calc(var(--twentycrm-spacing-multiplicator) * 3px);
-
-  max-width: calc(100% - var(--chip-horizontal-padding) * 2px);
-  overflow: hidden;
-
-  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
-
-  user-select: none;
-}
-
-.disabled {
-  cursor: not-allowed;
-
-  color: var(--twentycrm-font-color-light);
-
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.accent-text-primary {
-  color: var(--twentycrm-font-color-primary);
-}
-
-.accent-text-secondary {
-  font-weight: var(--twentycrm-font-weight-medium);
-}
-
-.size-large {
-  height: calc(var(--twentycrm-spacing-multiplicator) * 4px);
-}
-
-.variant-regular:hover {
-  background-color: var(--twentycrm-background-transparent-light);
-}
-
-.variant-regular:active {
-  background-color: var(--twentycrm-background-transparent-medium);
-}
-
-.variant-highlighted {
-  background-color: var(--twentycrm-background-transparent-light);
-}
-
-.variant-highlighted:hover {
-  background-color: var(--twentycrm-background-transparent-medium);
-}
-
-.variant-highlighted:active {
-  background-color: var(--twentycrm-background-transparent-strong);
-}
-
-.variant-rounded {
-  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 2px);
-  --chip-vertical-padding: 1px;
-
-  background-color: var(--twentycrm-background-transparent-light);
-  border: 1px solid var(--twentycrm-border-color-medium);
-  border-radius: 50px;
-}
-
-.variant-transparent {
-  cursor: inherit;
-}
--- a/packages/twenty-ui/src/display/chip/components/Chip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx
@ -1,10 +1,9 @@
 import { MouseEvent, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { Theme, withTheme } from '@emotion/react';
+import { styled } from '@linaria/react';

 import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';

-import styles from './Chip.module.css';
-
 export enum ChipSize {
  Large = 'large',
  Small = 'small',
@ -34,9 +33,86 @@ type ChipProps = {
  rightComponent?: ReactNode;
  className?: string;
  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  to?: string;
 };

+const StyledContainer = withTheme(styled.div<
+  Pick<
+    ChipProps,
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+  > & { theme: Theme }
+>`
+  --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  text-decoration: none;
+  align-items: center;
+
+  color: ${({ theme, accent, disabled }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
+
+  cursor: ${({ clickable, disabled, variant }) =>
+    variant === ChipVariant.Transparent
+      ? 'inherit'
+      : clickable
+        ? 'pointer'
+        : disabled
+          ? 'not-allowed'
+          : 'inherit'};
+
+  display: inline-flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(3)};
+  max-width: ${({ maxWidth }) =>
+    maxWidth
+      ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
+      : '200px'};
+
+  overflow: hidden;
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
+  user-select: none;
+
+  font-weight: ${({ theme, accent }) =>
+    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
+
+  &:hover {
+    background-color: ${({ theme, variant, disabled }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.light
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.medium
+          : 'inherit'};
+  }
+
+  &:active {
+    background-color: ${({ theme, disabled, variant }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.medium
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.strong
+          : 'inherit'};
+  }
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+        ? theme.background.transparent.lighter
+        : 'inherit'};
+
+  border: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded
+      ? `1px solid ${theme.border.color.medium}`
+      : 'none'};
+
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+`);
+
 export const Chip = ({
  size = ChipSize.Small,
  label,
@ -49,30 +125,21 @@ export const Chip = ({
  onClick,
 }: ChipProps) => {
  return (
-    <div
+    <StyledContainer
      data-testid="chip"
-      className={clsx({
-        [styles.chip]: true,
-        [styles.clickable]: clickable,
-        [styles.disabled]: disabled,
-        [styles.accentTextPrimary]: accent === ChipAccent.TextPrimary,
-        [styles.accentTextSecondary]: accent === ChipAccent.TextSecondary,
-        [styles.sizeLarge]: size === ChipSize.Large,
-        [styles.variantRegular]: variant === ChipVariant.Regular,
-        [styles.variantHighlighted]: variant === ChipVariant.Highlighted,
-        [styles.variantRounded]: variant === ChipVariant.Rounded,
-        [styles.variantTransparent]: variant === ChipVariant.Transparent,
-      })}
+      accent={accent}
+      clickable={clickable}
+      disabled={disabled}
+      size={size}
+      variant={variant}
      onClick={onClick}
    >
      {leftComponent}
-      <div className={styles.label}>
-        <OverflowingTextWithTooltip
-          size={size === ChipSize.Large ? 'large' : 'small'}
-          text={label}
-        />
-      </div>
+      <OverflowingTextWithTooltip
+        size={size === ChipSize.Large ? 'large' : 'small'}
+        text={label}
+      />
      {rightComponent}
-    </div>
+    </StyledContainer>
  );
 };
--- a/packages/twenty-ui/src/display/tag/components/Tag.tsx
+++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx
@ -1,16 +1,28 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { useContext } from 'react';
+import { styled } from '@linaria/react';

 import { IconComponent, OverflowingTextWithTooltip } from '@ui/display';
-import { ThemeColor, themeColorSchema } from '@ui/theme';
+import {
+  BORDER_COMMON,
+  THEME_COMMON,
+  ThemeColor,
+  ThemeContext,
+  ThemeType,
+} from '@ui/theme';
+
+const spacing5 = THEME_COMMON.spacing(5);
+const spacing2 = THEME_COMMON.spacing(2);
+const spacing1 = THEME_COMMON.spacing(1);

 const StyledTag = styled.h3<{
+  theme: ThemeType;
  color: ThemeColor;
  weight: TagWeight;
+  preventShrink?: boolean;
 }>`
  align-items: center;
  background: ${({ color, theme }) => theme.tag.background[color]};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-radius: ${BORDER_COMMON.radius.sm};
  color: ${({ color, theme }) => theme.tag.text[color]};
  display: inline-flex;
  font-size: ${({ theme }) => theme.font.size.md};
@ -19,10 +31,15 @@ const StyledTag = styled.h3<{
    weight === 'regular'
      ? theme.font.weight.regular
      : theme.font.weight.medium};
-  height: ${({ theme }) => theme.spacing(5)};
+  height: ${spacing5};
  margin: 0;
  overflow: hidden;
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  padding: 0 ${spacing2};
+
+  gap: ${spacing1};
+
+  min-width: ${({ preventShrink }) =>
+    preventShrink ? 'fit-content' : 'none;'};
 `;

 const StyledContent = styled.span`
@ -31,9 +48,13 @@ const StyledContent = styled.span`
  white-space: nowrap;
 `;

+const StyledNonShrinkableText = styled.span`
+  white-space: nowrap;
+  width: fit-content;
+`;
+
 const StyledIconContainer = styled.div`
  display: flex;
-  margin-right: ${({ theme }) => theme.spacing(1)};
 `;

 type TagWeight = 'regular' | 'medium';
@ -45,8 +66,10 @@ type TagProps = {
  Icon?: IconComponent;
  onClick?: () => void;
  weight?: TagWeight;
+  preventShrink?: boolean;
 };

+// TODO: Find a way to have ellipsis and shrinkable tag in tag list while keeping good perf for table cells
 export const Tag = ({
  className,
  color,
@ -54,23 +77,31 @@ export const Tag = ({
  Icon,
  onClick,
  weight = 'regular',
+  preventShrink,
 }: TagProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
+
  return (
    <StyledTag
+      theme={theme}
      className={className}
-      color={themeColorSchema.catch('gray').parse(color)}
+      color={color}
      onClick={onClick}
      weight={weight}
+      preventShrink={preventShrink}
    >
      {!!Icon && (
        <StyledIconContainer>
          <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
        </StyledIconContainer>
      )}
-      <StyledContent>
-        <OverflowingTextWithTooltip text={text} />
-      </StyledContent>
+      {preventShrink ? (
+        <StyledNonShrinkableText>{text}</StyledNonShrinkableText>
+      ) : (
+        <StyledContent>
+          <OverflowingTextWithTooltip text={text} />
+        </StyledContent>
+      )}
    </StyledTag>
  );
 };
--- a/packages/twenty-ui/src/display/tag/components/stories/Tag.stories.tsx
+++ b/packages/twenty-ui/src/display/tag/components/stories/Tag.stories.tsx
@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';

+import { IconUser } from '@ui/display/icon/components/TablerIcons';
 import {
  CatalogDecorator,
  CatalogStory,
@ -48,6 +49,30 @@ export const WithLongText: Story = {
  },
 };

+export const WithIcon: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    Icon: IconUser,
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
+export const DontShrink: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    preventShrink: true,
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
 export const Catalog: CatalogStory<Story, typeof Tag> = {
  argTypes: {
    color: { control: false },
--- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
@ -1,11 +1,38 @@
 import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import clsx from 'clsx';
-import { v4 as uuidV4 } from 'uuid';
+import { styled } from '@linaria/react';
+
+import { THEME_COMMON } from '@ui/theme';

 import { AppTooltip } from './AppTooltip';

-import styles from './OverflowingTextWithTooltip.module.css';
+const spacing4 = THEME_COMMON.spacing(4);
+
+const StyledOverflowingText = styled.div<{
+  cursorPointer: boolean;
+  size: 'large' | 'small';
+}>`
+  cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
+  font-family: inherit;
+  font-size: inherit;
+
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: inherit;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
+
+  & :hover {
+    text-overflow: ${({ cursorPointer }) =>
+      cursorPointer ? 'clip' : 'ellipsis'};
+    white-space: ${({ cursorPointer }) =>
+      cursorPointer ? 'normal' : 'nowrap'};
+  }
+`;

 export const OverflowingTextWithTooltip = ({
  size = 'small',
@ -16,7 +43,7 @@ export const OverflowingTextWithTooltip = ({
  text: string | null | undefined;
  mutliline?: boolean;
 }) => {
-  const textElementId = `title-id-${uuidV4()}`;
+  const textElementId = `title-id-${+new Date()}`;

  const textRef = useRef<HTMLDivElement>(null);

@ -43,20 +70,17 @@ export const OverflowingTextWithTooltip = ({

  return (
    <>
-      <div
+      <StyledOverflowingText
        data-testid="tooltip"
-        className={clsx({
-          [styles.main]: true,
-          [styles.cursor]: isTitleOverflowing,
-          [styles.large]: size === 'large',
-        })}
+        cursorPointer={isTitleOverflowing}
+        size={size}
        ref={textRef}
        id={textElementId}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        {text}
-      </div>
+      </StyledOverflowingText>
      {isTitleOverflowing &&
        createPortal(
          <div onClick={handleTooltipClick}>
--- a/packages/twenty-ui/src/theme/index.ts
+++ b/packages/twenty-ui/src/theme/index.ts
@ -34,6 +34,7 @@ export * from './constants/TextInputStyle';
 export * from './constants/ThemeCommon';
 export * from './constants/ThemeDark';
 export * from './constants/ThemeLight';
+export * from './provider/ThemeContextProvider';
 export * from './provider/ThemeProvider';
 export * from './types/ThemeType';
 export * from './utils/getNextThemeColor';
--- a/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx
+++ b/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx
@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import { ThemeType } from '@ui/theme/types/ThemeType';
+
+export type ThemeContextType = {
+  theme: ThemeType;
+};
+
+export const ThemeContext = createContext<ThemeContextType>(
+  {} as ThemeContextType,
+);
+
+export const ThemeContextProvider = ({
+  children,
+  theme,
+}: {
+  children: React.ReactNode;
+  theme: ThemeType;
+}) => {
+  return (
+    <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
+  );
+};
--- a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
+++ b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
@ -1,6 +1,8 @@
 import { ReactNode, useEffect } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';

+import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
+
 import { ThemeType } from '..';

 import './theme.css';
@ -16,7 +18,11 @@ const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
      theme.name === 'dark' ? 'dark' : 'light';
  }, [theme]);

-  return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>
+    </EmotionThemeProvider>
+  );
 };

 export default ThemeProvider;