Added render breakdown

workspaces/common/src/ProjectPage/ProjectPageLink.tsx

@@ -6,9 +6,12 @@ type Props = {
   project: Project;
 };
 
-export default function ProjectPageLink({ project }: Props & LinkProps) {
+export default function ProjectPageLink({
+  project,
+  ...rest
+}: Props & LinkProps) {
   return (
-    <Link to={getProjectRoutePath(project)} underline>
+    <Link to={getProjectRoutePath(project)} underline {...rest}>
       '{project.name}'
     </Link>
   );

workspaces/tilings/src/Presentation/ArrangementStats/ArrangementStats.tsx

@@ -1,6 +1,7 @@
 import { Box } from 'preshape';
 import ArrangementStatsProvider from './ArrangementStatsProvider';
 import PolygonsBreakdown from './PolygonsBreakdown';
+import RenderDurationBreakdown from './RenderDurationBreakdown';
 import TotalDurationBreakdown from './TotalDurationBreakdown';
 import TransformDurationBreakdown from './TransformDurationBreakdown';
 import ValidationDurationBreakdown from './ValidationDurationBreakdown';
@@ -13,6 +14,7 @@ export default function ArrangementStats() {
         <PolygonsBreakdown />
         <TransformDurationBreakdown />
         <ValidationDurationBreakdown />
+        <RenderDurationBreakdown />
       </Box>
     </ArrangementStatsProvider>
   );

workspaces/tilings/src/Presentation/ArrangementStats/PolygonsBreakdown.tsx

@@ -44,12 +44,16 @@ export default function PolygonsBreakdown() {
             <SeriesChart>
               <SeriesChartLine
                 color={colors.colorAccentShade4}
+                id="polygons-added"
                 series={polygonsAddedSeries}
+                withGradientArea
               />
 
               <SeriesChartLine
                 color={colorNegativeShade4}
+                id="polygons-skipped"
                 series={polygonsSkippedSeries}
+                withGradientArea
               />
             </SeriesChart>
           </Box>

workspaces/tilings/src/Presentation/ArrangementStats/RenderDurationBreakdown.tsx

@@ -0,0 +1,116 @@
+import { Box, Separator, Text, useThemeContext } from 'preshape';
+import { formatMs, formatPercent } from '../utils/formatting';
+import BreakdownBar from './BreakdownBar/BreakdownBar';
+import StageCard from './StageCard';
+import StageCards from './StageCards';
+import { colorRender } from './constants';
+import { useArrangementStatsContext } from './useArrangementStatsContext';
+
+export default function RenderDurationBreakdown() {
+  const { colors } = useThemeContext();
+  const { totalDuration, stageDurationDraw, stageDurationRender } =
+    useArrangementStatsContext();
+  const stageDurationRenderTotal = stageDurationDraw + stageDurationRender;
+
+  const renders = [
+    {
+      label: 'Render',
+      description:
+        "Building the layers by iterating over the components of the tiling, it's at this stage sizes can be determined for scaling",
+      totalDuration: stageDurationRender,
+    },
+    {
+      label: 'Draw',
+      description:
+        'Drawing the layers to the canvas, this is the final stage of the rendering process',
+      totalDuration: stageDurationDraw,
+    },
+  ];
+
+  return (
+    <Box>
+      <StageCards>
+        <StageCard padding="x6">
+          <Box flex="horizontal" gap="x6">
+            <Text
+              align="start"
+              margin="x4"
+              size="x5"
+              weight="x2"
+              basis="0"
+              grow="3"
+            >
+              Render
+            </Text>
+
+            <Text basis="0" grow="1" weight="x2">
+              <Text align="end" margin="x2">
+                {formatMs(stageDurationRenderTotal)} |{' '}
+                {formatPercent(stageDurationRenderTotal / totalDuration)}
+              </Text>
+            </Text>
+          </Box>
+
+          <BreakdownBar
+            sections={[
+              {
+                color: colorRender,
+                value: stageDurationRenderTotal,
+              },
+              {
+                color: colors.colorBackgroundShade4,
+                value: totalDuration - stageDurationRenderTotal,
+              },
+            ]}
+          />
+
+          <Separator borderColor="background-shade-4" margin="x4" />
+
+          {renders
+            .sort((a, b) => b.totalDuration - a.totalDuration)
+            .map(({ label, description, totalDuration: renderDuration }) => (
+              <Text
+                borderBottom
+                borderColor="background-shade-4"
+                borderSize="x1"
+                flex="horizontal"
+                gap="x6"
+                key={label}
+                margin="x4"
+                paddingBottom="x4"
+                size="x3"
+              >
+                <Text basis="0" grow="3">
+                  <Text weight="x2" margin="x2">
+                    {label}
+                  </Text>
+
+                  <Text size="x2">{description}</Text>
+                </Text>
+
+                <Text basis="0" grow="1" weight="x2">
+                  <Text align="end" margin="x2">
+                    {formatMs(renderDuration)} |{' '}
+                    {formatPercent(renderDuration / totalDuration)}
+                  </Text>
+
+                  <BreakdownBar
+                    sections={[
+                      {
+                        color: colorRender,
+                        value: renderDuration,
+                      },
+                      {
+                        color: colors.colorBackgroundShade4,
+                        value: totalDuration - renderDuration,
+                      },
+                    ]}
+                  />
+                </Text>
+              </Text>
+            ))}
+        </StageCard>
+      </StageCards>
+    </Box>
+  );
+}

workspaces/tilings/src/Presentation/ArrangementStats/SeriesChart/SeriesChartLine.tsx

@@ -1,16 +1,25 @@
 import { curveMonotoneX } from '@visx/curve';
 import { scaleLinear } from '@visx/scale';
-import { LinePath } from '@visx/shape';
+import { LinePath, AreaClosed } from '@visx/shape';
 import { useMemo } from 'react';
 import { useSeriesChartContext } from './useSeriesChartContext';
 
 type Props = {
   color: string;
+  id: string;
   series: number[];
+  withGradientArea?: boolean;
 };
 
-export default function SeriesChartLine({ color, series, ...rest }: Props) {
+export default function SeriesChartLine({
+  color,
+  id,
+  series,
+  withGradientArea,
+  ...rest
+}: Props) {
   const { width, height } = useSeriesChartContext();
+
   const xScale = useMemo(
     () => scaleLinear({ domain: [0, series.length - 1], range: [0, width] }),
     [series, width]
@@ -29,27 +38,60 @@ export default function SeriesChartLine({ color, series, ...rest }: Props) {
     return null;
   }
 
+  const data = series.map((d, i) => ({ x: i, y: d }));
+  const x = (d: (typeof data)[number]) => xScale(d.x) ?? 0;
+  const y = (d: (typeof data)[number]) => yScale(d.y) ?? 0;
+
   return (
     <g>
+      {withGradientArea && (
+        <>
+          <defs>
+            <mask id={`fade-out-${id}`}>
+              <linearGradient id="horizontal-fade" x1="0" x2="1" y1="0" y2="0">
+                <stop offset="0%" stopColor="white" stopOpacity="1" />
+                <stop offset="100%" stopColor="white" stopOpacity="0" />
+              </linearGradient>
+
+              <rect width="100%" height="100%" fill="url(#horizontal-fade)" />
+            </mask>
+
+            <linearGradient id={`gradient-${id}`} x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity={0.75} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+
+          <AreaClosed
+            data={data}
+            fill={`url(#gradient-${id})`}
+            mask={`url(#fade-out-${id})`}
+            x={x}
+            y={y}
+            yScale={yScale}
+          />
+        </>
+      )}
+
       <LinePath
         {...rest}
         curve={curveMonotoneX}
-        data={series.map((d, i) => ({ x: i, y: d }))}
+        data={data}
         opacity={0.2}
         stroke={color}
         strokeWidth={5}
-        x={(d) => xScale(d.x) ?? 0}
-        y={(d) => yScale(d.y) ?? 0}
+        x={x}
+        y={y}
       />
 
       <LinePath
         {...rest}
         curve={curveMonotoneX}
-        data={series.map((d, i) => ({ x: i, y: d }))}
+        data={data}
         stroke={color}
         strokeWidth={1}
-        x={(d) => xScale(d.x) ?? 0}
-        y={(d) => yScale(d.y) ?? 0}
+        x={x}
+        y={y}
       />
     </g>
   );

workspaces/tilings/src/Presentation/ArrangementStats/TransformDurationBreakdown.tsx

@@ -1,8 +1,10 @@
 import { Box, Separator, Text, useThemeContext } from 'preshape';
 import TransformDescription from '../Notation/TransformDescription';
 import { useNotationContext } from '../Notation/useNotationContext';
-import { formatMs, formatPercent } from '../utils/formatting';
+import { formatMs, formatNumber, formatPercent } from '../utils/formatting';
 import BreakdownBar from './BreakdownBar/BreakdownBar';
+import SeriesChart from './SeriesChart/SeriesChart';
+import SeriesChartLine from './SeriesChart/SeriesChartLine';
 import StageCard from './StageCard';
 import StageCards from './StageCards';
 import { colorTransform } from './constants';
@@ -56,7 +58,10 @@ export default function TransformDurationBreakdown() {
           {transforms
             .sort((a, b) => b.totalDuration - a.totalDuration)
             .map(
-              ({ totalDuration: transformTotalDuration }, transformIndex) => (
+              (
+                { totalDuration: transformTotalDuration, totalDurationSeries },
+                transformIndex
+              ) => (
                 <Text
                   borderBottom
                   borderColor="background-shade-4"
@@ -73,14 +78,52 @@ export default function TransformDurationBreakdown() {
                       {notationTransforms[transformIndex]}
                     </Text>
 
-                    <Text size="x2">
+                    <Text size="x2" margin="x1">
                       <TransformDescription
                         transform={notationTransforms[transformIndex]}
                       />
                     </Text>
+
+                    <Text size="x2" margin="x1">
+                      Polygons added:{' '}
+                      <Text tag="span" textColor="accent-shade-4">
+                        {formatNumber(transforms[transformIndex].polygonsAdded)}
+                      </Text>{' '}
+                      | Polygons skipped:{' '}
+                      <Text tag="span" textColor="negative-shade-4">
+                        {formatNumber(
+                          transforms[transformIndex].polygonsSkipped
+                        )}
+                      </Text>
+                    </Text>
                   </Text>
 
-                  <Text basis="0" grow="1" weight="x2">
+                  <Text
+                    alignChildrenVertical="end"
+                    container
+                    basis="0"
+                    flex="vertical"
+                    grow="1"
+                    weight="x2"
+                    zIndex={0}
+                  >
+                    <Box
+                      absolute="edge-to-edge"
+                      flex="horizontal"
+                      paddingBottom="x4"
+                      style={{ opacity: 0.5 }}
+                      zIndex={-1}
+                    >
+                      <SeriesChart>
+                        <SeriesChartLine
+                          color={colorTransform}
+                          id={`transform-${transformIndex}`}
+                          series={totalDurationSeries}
+                          withGradientArea
+                        />
+                      </SeriesChart>
+                    </Box>
+
                     <Text align="end" margin="x2">
                       {formatMs(transformTotalDuration)} |{' '}
                       {formatPercent(transformTotalDuration / totalDuration)}

workspaces/tilings/src/Presentation/ArrangementStats/useArrangementStats.ts

@@ -14,6 +14,8 @@ export type ArrangementStats = {
   polygonsSkipped: number;
   polygonsSkippedSeries: number[];
   transforms: {
+    polygonsAdded: number;
+    polygonsSkipped: number;
     totalDuration: number;
     totalDurationSeries: number[];
   }[];
@@ -73,6 +75,8 @@ export default function useArrangementStats(): ArrangementStats {
 
         if (!stats.transforms[index]) {
           stats.transforms[index] = {
+            polygonsAdded: 0,
+            polygonsSkipped: 0,
             totalDuration: 0,
             totalDurationSeries: [],
           };
@@ -81,6 +85,9 @@ export default function useArrangementStats(): ArrangementStats {
         const transform = stats.transforms[index];
 
         if (transform) {
+          transform.polygonsAdded += event.counters.get('polygons_added') ?? 0;
+          transform.polygonsSkipped +=
+            event.counters.get('polygons_skipped') ?? 0;
           transform.totalDuration += event.duration;
           transform.totalDurationSeries.push(event.duration);
         }