fix: handle early missing shred completion

Author: asuzuki-jumptrading

src/features/Overview/ShredsProgression/atoms.ts

@@ -30,12 +30,17 @@ export type SlotsShreds = {
  * Use reference / delta slot number and timestamp to minimize memory usage
  */
 export function createLiveShredsAtoms() {
+  const _minCompletedSlotAtom = atom<number>();
   const _liveShredsAtom = atom<SlotsShreds>();
   const _slotRangeAtom = atom<{
     min: number;
     max: number;
   }>();
   return {
+    /**
+     * min completed slot we've seen since we started collecting data
+     */
+    minCompletedSlot: atom((get) => get(_minCompletedSlotAtom)),
     range: atom((get) => get(_slotRangeAtom)),
     slotsShreds: atom((get) => get(_liveShredsAtom)),
     addShredEvents: atom(
@@ -53,6 +58,8 @@ export function createLiveShredsAtoms() {
         }: LiveShreds,
       ) => {
         let slotRange = get(_slotRangeAtom);
+        const minCompletedSlot = get(_minCompletedSlotAtom);
+        let newMinCompletedSlot = minCompletedSlot;
 
         set(_liveShredsAtom, (prev) => {
           const updated: SlotsShreds = prev ?? {
@@ -90,6 +97,13 @@ export function createLiveShredsAtoms() {
               ),
             );
 
+            if (ev === ShredEvent.slot_complete) {
+              newMinCompletedSlot = Math.min(
+                slotNumber,
+                minCompletedSlot ?? slotNumber,
+              );
+            }
+
             // update range
             slotRange = {
               min: Math.min(slotNumber, slotRange?.min ?? slotNumber),
@@ -101,6 +115,7 @@ export function createLiveShredsAtoms() {
         });
 
         set(_slotRangeAtom, slotRange);
+        set(_minCompletedSlotAtom, newMinCompletedSlot);
       },
     ),
 
@@ -112,6 +127,7 @@ export function createLiveShredsAtoms() {
       atom(null, (get, set, deleteAll: boolean, isStartup: boolean) => {
         if (deleteAll) {
           set(_slotRangeAtom, undefined);
+          set(_minCompletedSlotAtom, undefined);
           set(_liveShredsAtom, undefined);
           return;
         }

src/features/Overview/ShredsProgression/shredsProgressionPlugin.ts

@@ -39,21 +39,31 @@ export function shredsProgressionPlugin(
 
           const liveShreds = store.get(atoms.slotsShreds);
           const slotRange = store.get(atoms.range);
+          const minCompletedSlot = store.get(atoms.minCompletedSlot);
           const skippedSlotsCluster = store.get(skippedClusterSlotsAtom);
 
           if (!liveShreds || !slotRange) {
             return;
           }
 
-          if (!isOnStartupScreen && store.get(showStartupProgressAtom)) {
+          if (!isOnStartupScreen) {
             // if startup is running, prevent drawing non-startup screen chart
-            return;
+            if (store.get(showStartupProgressAtom)) return;
+            // Sometimes we've missed the completion event for the first slots
+            // depending on connection time. Ignore those slots, and only draw slots
+            // from min completed.
+            if (minCompletedSlot == null) return;
           }
 
           // Offset to convert shred event delta to chart x value
           const delayedNow = new Date().getTime() - delayMs;
           const tsXValueOffset = delayedNow - liveShreds.referenceTs;
 
+          const minSlot = isOnStartupScreen
+            ? slotRange.min
+            : Math.max(slotRange.min, minCompletedSlot ?? slotRange.min);
+          const maxSlot = slotRange.max;
+
           u.ctx.save();
           u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
           u.ctx.clip();
@@ -62,8 +72,8 @@ export function shredsProgressionPlugin(
           const getXPos = (xVal: number) => u.valToPos(xVal, xScaleKey, true);
 
           const { maxShreds, orderedSlotNumbers } = getDrawInfo(
-            slotRange.min,
-            slotRange.max,
+            minSlot,
+            maxSlot,
             liveShreds,
             u.scales[xScaleKey],
             tsXValueOffset,