feat: shreds chart legend

src/colors.ts

@@ -153,6 +153,16 @@ export const shredReplayedNothingColor = "#616A68";
 export const shredSkippedColor = "#8B4648";
 export const shredPublishedColor = "#685C70";
 
+export const shredLabelRepairRequestedColor = "#8B5148";
+export const shredLabelReceivedTurbineColor = "#3E6883";
+export const shredLabelReceivedRepairColor = "#896549";
+export const shredLabelReplayStartedColor = "#3A7B84";
+export const shredLabelReplayedTurbineColor = "#59A693";
+export const shredLabelReplayedRepairColor = "#5C844B";
+export const shredLabelReplayedNothingColor = "#616A68";
+export const shredLabelSkippedColor = "#8B4648";
+export const shredLabelPublishedColor = "#685C70";
+
 // epoch bar
 export const epochTextColor = "#FAFAFA";
 export const epochNotLiveColor = "#3CB4FF";

src/features/Overview/ShredsProgression/ShredsChartLegend.tsx

@@ -0,0 +1,21 @@
+import { Flex, Box, Text } from "@radix-ui/themes";
+import { legend } from "./const";
+import styles from "./shreds.module.css";
+
+export function ShredsChartLegend() {
+  return (
+    <Flex gap="15px" wrap="wrap">
+      {Object.entries(legend).map(([label, color]) => {
+        return (
+          <Flex key={label} gap="5px" flexShrink="0">
+            <Box
+              className={styles.legendColorBox}
+              style={{ backgroundColor: color }}
+            />
+            <Text className={styles.legendLabel}>{label}</Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}

src/features/Overview/ShredsProgression/const.ts

@@ -1,4 +1,15 @@
 import { ShredEvent } from "../../../api/entities";
+import {
+  shredLabelRepairRequestedColor,
+  shredLabelReceivedTurbineColor,
+  shredLabelReceivedRepairColor,
+  shredLabelReplayStartedColor,
+  shredLabelReplayedTurbineColor,
+  shredLabelReplayedRepairColor,
+  shredLabelReplayedNothingColor,
+  shredLabelSkippedColor,
+  shredLabelPublishedColor,
+} from "../../../colors";
 
 export const xRangeMs = 10_000;
 export const delayMs = 50;
@@ -18,3 +29,15 @@ export const shredEventDescPriorities: Exclude<
   ShredEvent.shred_received_turbine,
   ShredEvent.shred_repair_request,
 ];
+
+export const legend = {
+  "Repair Requested": shredLabelRepairRequestedColor,
+  "Received Turbine": shredLabelReceivedTurbineColor,
+  "Received Repair": shredLabelReceivedRepairColor,
+  "Replay Started": shredLabelReplayStartedColor,
+  "Replayed Turbine": shredLabelReplayedTurbineColor,
+  "Replayed Repair": shredLabelReplayedRepairColor,
+  "Replayed Nothing": shredLabelReplayedNothingColor,
+  Skipped: shredLabelSkippedColor,
+  Published: shredLabelPublishedColor,
+};

src/features/Overview/ShredsProgression/index.tsx

@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 import { ClientEnum } from "../../../api/entities";
 import { clientAtom } from "../../../atoms";
 import ShredsChart from "./ShredsChart";
+import { ShredsChartLegend } from "./ShredsChartLegend";
 
 export default function ShredsProgression() {
   const client = useAtomValue(clientAtom);
@@ -15,7 +16,10 @@ export default function ShredsProgression() {
   return (
     <Card>
       <Flex direction="column" gap="4">
-        <CardHeader text="Shreds" />
+        <Flex gap="15px" align="center" wrap="wrap">
+          <CardHeader text="Shreds" />
+          <ShredsChartLegend />
+        </Flex>
         <Box height="400px">
           <ShredsChart
             chartId="overview-shreds-chart"

src/features/Overview/ShredsProgression/shreds.module.css

@@ -0,0 +1,10 @@
+.legend-color-box {
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+
+.legend-label {
+  font-size: 10px;
+  color: var(--header-label-text-color);
+}

src/features/StartupProgress/Firedancer/CatchingUp/index.tsx

@@ -10,6 +10,7 @@ import CatchingUpTiles from "./CatchingUpTiles";
 import { PhaseHeader } from "../PhaseHeader";
 import useEstimateTotalSlots from "./useCatchingUpRates";
 import { BarsStats } from "./BarsStats";
+import { ShredsChartLegend } from "../../../Overview/ShredsProgression/ShredsChartLegend";
 
 export default function CatchingUp() {
   const setContainerEl = useSetAtom(catchingUpContainerElAtom);
@@ -30,7 +31,10 @@ export default function CatchingUp() {
         )}
 
         <Card className={styles.card} mb="14px">
-          <Text className={styles.title}>Shreds</Text>
+          <Flex gap="15px" align="center" wrap="wrap">
+            <Text className={styles.title}>Shreds</Text>
+            <ShredsChartLegend />
+          </Flex>
           <Box flexGrow="1" minHeight="280px">
             <ShredsChart chartId="catching-up-shreds" isOnStartupScreen />
           </Box>