feat: support rendering of 'flake mark', that can be used to indicate how frequently a 'changed item' (image) has recently flaked

src/components/Card/Card.stories.tsx

@@ -36,6 +36,17 @@ export const WithLongName: Story = {
   },
 };
 
+export const WithFlakeMark: Story = {
+  args: {
+    entity: {
+      ...defaultEntity,
+      modificationCount: 9,
+      totalCommitCount: 27,
+      periodInDays: 10,
+    },
+  },
+};
+
 export const WithNew: Story = {
   args: {
     entity: {

src/components/Card/Card.tsx

@@ -9,6 +9,7 @@ import { BaseButton } from '../internal/BaseButton';
 import { Ellipsis } from '../internal/Ellipsis';
 import { Transparent } from '../internal/Transparent';
 import { Color } from '../../styles/variables.css';
+import { FlakeMark } from '../FlakeMark';
 import * as styles from './Card.css';
 
 const imageSrc = (entity: RegEntity) => {
@@ -74,6 +75,7 @@ export const Card = ({ href, entity, menus, onCopy }: Props) => {
       >
         <div className={styles.sign}>
           <Sign variant={entity.variant} />
+          <FlakeMark {...entity} />
         </div>
 
         <div className={styles.image}>

src/components/FlakeMark.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { FlakeData } from '../types/reg';
+
+export const FlakeMark: FC<FlakeData> = ({
+  modificationCount,
+  totalCommitCount,
+  periodInDays,
+}) => {
+  const showFlakeMark = modificationCount !== undefined && modificationCount > 0;
+
+  if (!showFlakeMark) {
+    return null;
+  }
+
+  return (
+    <span style={{ margin: '0 16px' }}>
+      <strong>
+        {Math.round(((modificationCount || 1) * 100) / (totalCommitCount || 1))}
+        % flaky
+      </strong>
+      {periodInDays && ` over the past ${periodInDays} day(s)`}
+    </span>
+  );
+};

src/components/Header/Header.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { useMedia } from '../../hooks/useMedia';
 import type { RegVariant } from '../../types/reg';
 import { IconButton } from '../IconButton';
@@ -19,15 +20,16 @@ export type Props = {
   onMarkersToggle: () => void;
 };
 
-export const Header = ({
+export const Header: FC<PropsWithChildren<Props>> = ({
   variant,
   title,
   current,
   max,
   markersEnabled,
   onRequestClose,
   onMarkersToggle,
-}: Props) => {
+  children,
+}) => {
   const isSmallViewport = useMedia(`(max-width: ${BreakPoint.SMALL - 1}px)`);
 
   const handleCloseClick = useCallback(
@@ -72,6 +74,8 @@ export const Header = ({
             onChange={handleToggle}
           />
         </div>
+
+        {children}
       </div>
     </header>
   );

src/components/Viewer/Viewer.stories.tsx

@@ -61,6 +61,17 @@ export const Overview: Story = {
 
 export const WithChanged: Story = {};
 
+export const WithFlakeMark: Story = {
+  args: {
+    entity: {
+      ...defaultEntity,
+      modificationCount: 9,
+      totalCommitCount: 27,
+      periodInDays: 10,
+    },
+  },
+};
+
 export const WithNew: Story = {
   args: {
     entity: {

src/components/Viewer/Viewer.tsx

@@ -13,6 +13,7 @@ import { ArrowRightIcon } from '../icons/ArrowRightIcon';
 import { Portal } from '../internal/Portal';
 import { Transparent } from '../internal/Transparent';
 import { usePrevious } from '../../hooks/usePrevious';
+import { FlakeMark } from '../FlakeMark';
 import * as styles from './Viewer.css';
 import { OPEN_DELAY } from './constants';
 import { ComparisonView } from './internal/ComparisonView';
@@ -160,7 +161,9 @@ export const Viewer = ({
                   markersEnabled={markersEnabled}
                   onRequestClose={onRequestClose}
                   onMarkersToggle={onMarkersToggle}
-                />
+                >
+                  <FlakeMark {...displayEntity} />
+                </Header>
               )}
             </div>
 

src/types/reg.ts

@@ -5,10 +5,16 @@ export type XIMGDiffConfig = {
   workerUrl?: string;
 };
 
+export type FlakeData = {
+  modificationCount?: number;
+  totalCommitCount?: number;
+  periodInDays?: number;
+};
+
 export type RegItem = {
   raw: string;
   encoded: string;
-};
+} & FlakeData;
 
 export type RegLink = {
   href: string;
@@ -40,7 +46,7 @@ export type RegEntity = {
   diff: string;
   before: string;
   after: string;
-};
+} & FlakeData;
 
 export type RegStructualItem = {
   id: string;

src/utils/__tests__/transformer.test.ts

@@ -7,21 +7,31 @@ describe('transformer', () => {
     const variant = 'new';
     const raw = 'raw';
     const encoded = 'encoded.jpg';
+    const modificationCount = 9;
+    const totalCommitCount = 30;
+    const periodInDays = 10;
 
     let dirs = {
       diff: 'diff/',
       expected: 'expected/',
       actual: 'actual/',
     };
 
-    expect(toEntities(variant, dirs, [{ raw, encoded }])).toEqual([
+    expect(
+      toEntities(variant, dirs, [
+        { raw, encoded, modificationCount, totalCommitCount },
+      ]),
+    ).toEqual([
       {
         id: `${variant}-${encoded}`,
         variant,
         name: raw,
         diff: `${dirs.diff}encoded.png`,
         before: `${dirs.expected}${encoded}`,
         after: `${dirs.actual}${encoded}`,
+        modificationCount,
+        totalCommitCount,
+        periodInDays,
       },
     ]);
 

src/utils/transformer.ts

@@ -22,6 +22,7 @@ export const toEntities = (
 
   return items.map((item) => {
     const id = `${variant}-${item.encoded}`.replace(/[=?]/g, '-');
+    const { modificationCount, totalCommitCount, periodInDays } = item;
 
     return {
       id,
@@ -30,6 +31,9 @@ export const toEntities = (
       diff: join('diff', item.encoded).replace(/\.[^.]+$/, `.${diffExtension}`),
       before: join('expected', item.encoded),
       after: join('actual', item.encoded),
+      modificationCount,
+      totalCommitCount,
+      periodInDays,
     };
   });
 };