chore: address comments

Author: asuzuki-jumptrading

src/features/Overview/ShredsProgression/ShredsChart.tsx

@@ -8,7 +8,7 @@ import { xRangeMs } from "./const";
 import { useMedia, useRafLoop } from "react-use";
 import {
   shredsProgressionPlugin,
-  type LabelPositions,
+  shredsXScaleKey,
 } from "./shredsProgressionPlugin";
 import { Box, Flex } from "@radix-ui/themes";
 import ShredsSlotLabels from "./ShredsSlotLabels";
@@ -69,7 +69,6 @@ export default function ShredsChart({
 
   const uplotRef = useRef<uPlot>();
   const lastRedrawRef = useRef(0);
-  const labelPositionsRef = useRef<LabelPositions>();
 
   const handleCreate = useCallback((u: uPlot) => {
     uplotRef.current = u;
@@ -94,24 +93,25 @@ export default function ShredsChart({
       width: 0,
       height: 0,
       scales: {
-        x: { time: false },
+        [shredsXScaleKey]: { time: false },
         y: {
           time: false,
           range: [0, 1],
         },
       },
-      series: [{}, {}],
+      series: [{ scale: shredsXScaleKey }, {}],
       cursor: {
         show: false,
         drag: {
           // disable zoom
-          x: false,
+          [shredsXScaleKey]: false,
           y: false,
         },
       },
       legend: { show: false },
       axes: [
         {
+          scale: shredsXScaleKey,
           incrs: xIncrs,
           size: 30,
           ticks: {
@@ -141,7 +141,7 @@ export default function ShredsChart({
           },
         },
       ],
-      plugins: [shredsProgressionPlugin(isOnStartupScreen, labelPositionsRef)],
+      plugins: [shredsProgressionPlugin(isOnStartupScreen)],
     };
   }, [isOnStartupScreen, xIncrs]);
 

src/features/Overview/ShredsProgression/ShredsSlotLabels.tsx

@@ -11,8 +11,6 @@ import PeerIcon from "../../../components/PeerIcon";
 import { skippedClusterSlotsAtom } from "../../../atoms";
 import { isStartupProgressVisibleAtom } from "../../StartupProgress/atoms";
 
-const height = 30;
-
 /**
  * Labels for shreds slots.
  * Don't render during startup, because there will be multiple overlapping slots
@@ -26,10 +24,10 @@ export default function ShredsSlotLabels() {
 
   return (
     <Flex
-      overflow="hidden"
+      overflowX="hidden"
       position="relative"
       // extra space for borders
-      height={`${height + 2}px`}
+      height="30px"
       style={{ opacity: 0.8 }}
     >
       {groupLeaderSlots.map((slot) => (
@@ -61,31 +59,28 @@ function SlotGroupLabel({ firstSlot }: SlotGroupLabelProps) {
 
   return (
     <Flex
-      height={`${height}px`}
+      height="100%"
       direction="column"
       gap="2px"
       position="absolute"
-      align="center"
-      overflow="hidden"
       id={getSlotGroupLabelId(firstSlot)}
       className={clsx(styles.slotGroupLabel, {
         [styles.you]: isLeader,
       })}
     >
       <Flex
-        align="center"
+        justify="center"
         flexGrow="1"
+        minWidth="0"
         px="2px"
         className={clsx(styles.slotGroupTopContainer, {
           [styles.skipped]: skippedSlots.size > 0,
         })}
       >
         <Flex
-          justify="center"
           align="center"
-          width="100%"
           gap="4px"
-          wrap="nowrap"
+          minWidth="0"
           className={styles.slotGroupNameContainer}
         >
           <PeerIcon
@@ -99,10 +94,8 @@ function SlotGroupLabel({ firstSlot }: SlotGroupLabelProps) {
       </Flex>
 
       <Flex
-        width="100%"
         height="3px"
         position="relative"
-        overflow="hidden"
         className={styles.slotBarsContainer}
       >
         {slots.map((slot) => (

src/features/Overview/ShredsProgression/atoms.ts

@@ -13,8 +13,11 @@ type ShredEventTsDeltaMs = number | undefined;
  */
 export type ShredEventTsDeltas = ShredEventTsDeltaMs[];
 
-type Slot = {
+export type Slot = {
   shreds: (ShredEventTsDeltas | undefined)[];
+  /**
+   * earliest event (start) of the slot
+   */
   minEventTsDelta?: number;
   maxEventTsDelta?: number;
   completionTsDelta?: number;