chore: update replayed shreds colors

Author: asuzuki-jumptrading

src/colors.ts

@@ -143,12 +143,15 @@ export const nextSlotValueColor = "#CACACA";
 export const gridTicksColor = "#858585";
 export const gridLineColor = "#312D42";
 
-export const shredRepairRequestedColor = "#A34B4B";
-export const shredReceivedTurbineColor = "#106AA7";
-export const shredReceivedRepairColor = "#885D2D";
-export const shredReplayStartedColor = "#326E79";
-export const shredReplayedColor = "#1C443A";
-export const shredSkippedColor = "#FF5353";
+export const shredRepairRequestedColor = "#8B5148";
+export const shredReceivedTurbineColor = "#3E6883";
+export const shredReceivedRepairColor = "#896549";
+export const shredReplayStartedColor = "#3A7B84";
+export const shredReplayedTurbineColor = "#59A693";
+export const shredReplayedRepairColor = "#5C844B";
+export const shredReplayedNothingColor = "#616A68";
+export const shredSkippedColor = "#8B4648";
+export const shredPublishedColor = "#685C70";
 
 // epoch bar
 export const epochTextColor = "#FAFAFA";

src/features/Overview/ShredsProgression/const.ts

@@ -1,25 +1,8 @@
 import { ShredEvent } from "../../../api/entities";
-import {
-  shredRepairRequestedColor,
-  shredReceivedTurbineColor,
-  shredReceivedRepairColor,
-  shredReplayedColor,
-  shredReplayStartedColor,
-} from "../../../colors";
 
 export const xRangeMs = 10_000;
 export const delayMs = 50;
 
-export const shredColors: {
-  [key in Exclude<ShredEvent, ShredEvent.slot_complete>]: string;
-} = {
-  [ShredEvent.shred_repair_request]: shredRepairRequestedColor,
-  [ShredEvent.shred_received_turbine]: shredReceivedTurbineColor,
-  [ShredEvent.shred_received_repair]: shredReceivedRepairColor,
-  [ShredEvent.shred_replay_start]: shredReplayStartedColor,
-  [ShredEvent.shred_replayed]: shredReplayedColor,
-};
-
 /**
  * Draw highest to lowest priority events.
  * Ignore lower priority events that overlap.

src/features/Overview/ShredsProgression/shredsProgressionPlugin.ts

@@ -5,9 +5,18 @@ import {
   type ShredEventTsDeltas,
   type SlotsShreds,
 } from "./atoms";
-import { delayMs, shredColors, shredEventDescPriorities } from "./const";
+import { delayMs, shredEventDescPriorities } from "./const";
 import { showStartupProgressAtom } from "../../StartupProgress/atoms";
-import { shredSkippedColor } from "../../../colors";
+import {
+  shredReceivedRepairColor,
+  shredReceivedTurbineColor,
+  shredRepairRequestedColor,
+  shredReplayedNothingColor,
+  shredReplayedRepairColor,
+  shredReplayedTurbineColor,
+  shredReplayStartedColor,
+  shredSkippedColor,
+} from "../../../colors";
 import { skippedClusterSlotsAtom } from "../../../atoms";
 import { clamp } from "lodash";
 import { ShredEvent } from "../../../api/entities";
@@ -94,6 +103,13 @@ export function shredsProgressionPlugin(
 
           for (const slotNumber of orderedSlotNumbers) {
             const eventsByFillStyle: EventsByFillStyle = {};
+            const addEventPosition = (
+              fillStyle: string,
+              position: [x: number, y: number, width: number],
+            ) => {
+              eventsByFillStyle[fillStyle] ??= [];
+              eventsByFillStyle[fillStyle].push(position);
+            };
 
             const slot = liveShreds.slots.get(slotNumber);
             if (!slot) continue;
@@ -111,7 +127,7 @@ export function shredsProgressionPlugin(
               );
 
               addEventsForRow({
-                eventsByFillStyle,
+                addEventPosition,
                 u,
                 firstShredIdx,
                 lastShredIdx,
@@ -199,7 +215,10 @@ const getDrawInfo = (
 };
 
 interface AddEventsForRowArgs {
-  eventsByFillStyle: EventsByFillStyle;
+  addEventPosition: (
+    fillStyle: string,
+    position: [x: number, y: number, width: number],
+  ) => void;
   u: uPlot;
   firstShredIdx: number;
   lastShredIdx: number;
@@ -217,12 +236,11 @@ interface AddEventsForRowArgs {
   getXPos: (xVal: number) => number;
 }
 /**
- * Mutate eventsByFillStyle
  * Draw rows for shreds, with rectangles or dots for events.
  * Each row may represent partial or multiple shreds. Use the most completed shred.
  */
 function addEventsForRow({
-  eventsByFillStyle,
+  addEventPosition,
   u,
   firstShredIdx,
   lastShredIdx,
@@ -256,6 +274,11 @@ function addEventsForRow({
       : // event goes to slot completion or max x
         Math.min(getXPos(slotCompletionTsDelta - tsXValueOffset), maxXPos);
 
+  const eventPositions = new Map<
+    Exclude<ShredEvent, ShredEvent.slot_complete>,
+    [x: number, y: number, width: number]
+  >();
+
   // draw events from highest to lowest priority
   for (const eventType of shredEventDescPriorities) {
     const tsDelta = eventTsDeltas[eventType];
@@ -269,19 +292,49 @@ function addEventsForRow({
 
     const yOffset = getYOffset?.(eventType) ?? 0;
 
-    const fillStyle = isSlotSkipped
-      ? shredSkippedColor
-      : (shredColors[eventType] ?? "transparent");
-
-    eventsByFillStyle[fillStyle] ??= [];
-    eventsByFillStyle[fillStyle].push(
+    eventPositions.set(
+      eventType,
       drawOnlyDots || isSlotSkipped
         ? [startXPos, y + yOffset, dotWidth]
         : [startXPos, y + yOffset, endXPos - startXPos],
     );
-
     endXPos = startXPos;
   }
+
+  for (const [eventType, position] of eventPositions.entries()) {
+    if (isSlotSkipped) {
+      addEventPosition(shredSkippedColor, position);
+      continue;
+    }
+    switch (eventType) {
+      case ShredEvent.shred_repair_request: {
+        addEventPosition(shredRepairRequestedColor, position);
+        break;
+      }
+      case ShredEvent.shred_received_turbine: {
+        addEventPosition(shredReceivedTurbineColor, position);
+        break;
+      }
+      case ShredEvent.shred_received_repair: {
+        addEventPosition(shredReceivedRepairColor, position);
+        break;
+      }
+      case ShredEvent.shred_replay_start: {
+        addEventPosition(shredReplayStartedColor, position);
+        break;
+      }
+      case ShredEvent.shred_replayed: {
+        if (eventPositions.has(ShredEvent.shred_received_repair)) {
+          addEventPosition(shredReplayedRepairColor, position);
+        } else if (eventPositions.has(ShredEvent.shred_received_turbine)) {
+          addEventPosition(shredReplayedTurbineColor, position);
+        } else {
+          addEventPosition(shredReplayedNothingColor, position);
+        }
+        break;
+      }
+    }
+  }
 }
 
 function getMostCompletedShredIdx(