Skip to content

fix: move epoch check to selected slot getter #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 21, 2025
+155 −148
Merged

fix: move epoch check to selected slot getter #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3c8a9d
fix: move epoch check to selected slot getter
asuzuki-jumptrading Aug 19, 2025
526b538
fix: initial scroll position
asuzuki-jumptrading Aug 21, 2025
3e1ef08
fix: increaseViewportBy future slot for RT jitter
asuzuki-jumptrading Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 13 additions & 40 deletions src/atoms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import type {
SlotLevel,
SlotResponse,
} from "./api/types";
import { merge } from "lodash";
import { clamp, merge } from "lodash";
import { getLeaderSlots, getSlotGroupLeader, getStake } from "./utils";
import { searchLeaderSlotsAtom } from "./features/LeaderSchedule/atoms";
import { selectedSlotAtom } from "./features/Overview/SlotPerformance/atoms";
Expand Down Expand Up @@ -58,54 +58,27 @@ export const nextEpochAtom = atom((get) => {
return nextEpoch;
});

export const [slotOverrideAtom, setSlotScrollListFnAtom, autoScrollAtom] =
export const [slotOverrideAtom, autoScrollAtom] =
(function getSlotOverrideAtom() {
const _slotOverrideAtom = atom<number>();
const _scrollSlotListFn = atom<{
fn?: (slotOverride: number | undefined) => void;
}>({});

let rafId: number | undefined = undefined;

return [
atom(
(get) => get(_slotOverrideAtom),
(
get,
set,
slot: number | undefined,
skipScrollList: boolean = false,
) => {
(get, set, slot: number | undefined) => {
const epoch = get(epochAtom);
if (!epoch) return;

let startOverrideSlot = slot ? getSlotGroupLeader(slot) : slot;

if (startOverrideSlot !== undefined) {
startOverrideSlot = Math.min(
epoch.end_slot,
Math.max(startOverrideSlot, epoch.start_slot),
);
}

set(_slotOverrideAtom, startOverrideSlot);
if (!skipScrollList) {
const { fn } = get(_scrollSlotListFn);
if (rafId) cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(() => {
fn?.(startOverrideSlot);
});
}
},
),
atom(
null,
(
_,
set,
scrollFn: ((slotOverride: number | undefined) => void) | undefined,
) => {
set(_scrollSlotListFn, { fn: scrollFn });
const clampedSlot =
slot === undefined
? undefined
: clamp(
getSlotGroupLeader(slot),
epoch.start_slot,
epoch.end_slot,
);

set(_slotOverrideAtom, clampedSlot);
},
),
atom((get) => get(_slotOverrideAtom) === undefined),
Expand Down
202 changes: 113 additions & 89 deletions src/features/Navigation/SlotsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,48 @@ import {
leaderSlotsAtom,
SlotNavFilter,
slotNavFilterAtom,
setSlotScrollListFnAtom,
slotOverrideAtom,
} from "../../atoms";
import { Box } from "@radix-ui/themes";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { RefObject } from "react";
import { memo, useCallback, useEffect, useMemo, useRef } from "react";
import styles from "./slotsList.module.css";
import { slotsListPinnedSlotOffset, slotsPerLeader } from "../../consts";
import { clamp, throttle } from "lodash";
import { throttle } from "lodash";
import SlotsRenderer, { SlotsPlaceholder } from "./SlotsRenderer";
import type { ScrollSeekConfiguration, VirtuosoHandle } from "react-virtuoso";
import { Virtuoso } from "react-virtuoso";
import { selectedSlotAtom } from "../Overview/SlotPerformance/atoms";
import { baseSelectedSlotAtom } from "../Overview/SlotPerformance/atoms";
import ResetLive from "./ResetLive";
import type { DebouncedState } from "use-debounce";
import { useDebouncedCallback } from "use-debounce";
import { useCurrentRoute } from "../../hooks/useCurrentRoute";

const computeItemKey = (slot: number) => slot;

// Add one future slot to prevent current leader transition from flickering
const increaseViewportBy = { top: 24, bottom: 0 };

interface SlotsListProps {
width: number;
height: number;
}

export default function SlotsList({ width, height }: SlotsListProps) {
const currentRoute = useCurrentRoute();
const navFilter = useAtomValue(slotNavFilterAtom);
const epoch = useAtomValue(epochAtom);
const isSelectionInitialized =
useAtomValue(baseSelectedSlotAtom).isInitialized;

if (!epoch || (currentRoute === "Slot Details" && !isSelectionInitialized)) {
return null;
}

return navFilter === SlotNavFilter.MySlots ? (
<MySlotsList width={width} height={height} />
<MySlotsList key={epoch.epoch} width={width} height={height} />
) : (
<AllSlotsList width={width} height={height} />
<AllSlotsList key={epoch.epoch} width={width} height={height} />
);
}

Expand All @@ -55,51 +69,16 @@ function InnerSlotsList({
const listRef = useRef<VirtuosoHandle>(null);
const visibleStartIndexRef = useRef<number | null>(null);

const selectedSlot = useAtomValue(selectedSlotAtom);
const currentLeaderSlot = useAtomValue(currentLeaderSlotAtom);

const setSlotOverride = useSetAtom(slotOverrideAtom);
const autoScroll = useAtomValue(autoScrollAtom);
const setSlotScrollListFn = useSetAtom(setSlotScrollListFnAtom);

const slotsCount = slotGroupsDescending.length;

useEffect(() => {
Copy link
Collaborator Author

@asuzuki-jumptrading asuzuki-jumptrading Aug 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to SlotOverrideScroll component. No longer scrolling from inside an atom

// set scroll function, called when slot override is updated
setSlotScrollListFn((startOverrideSlot: number | undefined) => {
if (!listRef.current || !startOverrideSlot) return;

const slotIndex = getIndexForSlot(startOverrideSlot);

listRef.current.scrollToIndex({
index: slotIndex - slotsListPinnedSlotOffset,
align: "start",
});
});

return () => {
setSlotScrollListFn(undefined);
};
}, [getIndexForSlot, setSlotScrollListFn]);

// Determine initial scroll position
const initialTopMostItemIndex = useMemo(() => {
let slotIndex = -1;

if (selectedSlot !== undefined) {
slotIndex = getIndexForSlot(selectedSlot);
} else if (currentLeaderSlot !== undefined) {
slotIndex = getIndexForSlot(currentLeaderSlot);
}

if (slotIndex === -1) return -1;

return clamp(slotIndex - slotsListPinnedSlotOffset, 0, slotsCount - 1);
}, [selectedSlot, currentLeaderSlot, slotsCount, getIndexForSlot]);
const debouncedScroll = useDebouncedCallback(() => {}, 100);

const { rangeChanged, scrollSeekConfiguration } = useMemo(() => {
const rangeChangedFn = ({ startIndex }: { startIndex: number }) =>
(visibleStartIndexRef.current = startIndex);
const rangeChangedFn = ({ startIndex }: { startIndex: number }) => {
// account for increaseViewportBy
visibleStartIndexRef.current = startIndex + 1;
};

const config: ScrollSeekConfiguration = {
enter: (velocity) => Math.abs(velocity) > 1500,
Expand All @@ -118,13 +97,15 @@ function InnerSlotsList({
() => {
if (visibleStartIndexRef.current === null) return;

debouncedScroll();

const slotIndex = Math.min(
visibleStartIndexRef.current + slotsListPinnedSlotOffset,
slotsCount - 1,
);

const slot = getSlotAtIndex(slotIndex);
setSlotOverride(slot, true);
setSlotOverride(slot);
},
50,
{ leading: true, trailing: true },
Expand All @@ -141,36 +122,22 @@ function InnerSlotsList({
container.removeEventListener("wheel", handleScroll);
container.removeEventListener("touchmove", handleScroll);
};
}, [getSlotAtIndex, setSlotOverride, slotsCount, visibleStartIndexRef]);

// Auto scroll enabled (live scrolling)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to RTAutoScroll component

useEffect(() => {
if (
!autoScroll ||
currentLeaderSlot === undefined ||
!listRef.current ||
!slotsCount
)
return;

const slotIndex = getIndexForSlot(currentLeaderSlot);
const visibleStartIndex = slotIndex - slotsListPinnedSlotOffset;

listRef.current.scrollToIndex({
index: visibleStartIndex > 0 ? visibleStartIndex : 0,
align: "start",
});
}, [autoScroll, currentLeaderSlot, getIndexForSlot, listRef, slotsCount]);

const debouncedHeight = useDebouncedHeight(height);

const increaseViewportBy = useMemo(() => {
// top must be 0, to prevent rangeChange startIndex offset
return { top: 0, bottom: debouncedHeight };
}, [debouncedHeight]);
}, [
getSlotAtIndex,
debouncedScroll,
setSlotOverride,
slotsCount,
visibleStartIndexRef,
]);

return (
<Box ref={listContainerRef} width={`${width}px`} height={`${height}px`}>
<RTAutoScroll listRef={listRef} getIndexForSlot={getIndexForSlot} />
<SlotOverrideScroll
listRef={listRef}
getIndexForSlot={getIndexForSlot}
debouncedScroll={debouncedScroll}
/>
<SlotsPlaceholder width={width} height={height} />
<ResetLive />
<Virtuoso
Expand All @@ -180,7 +147,6 @@ function InnerSlotsList({
height={height}
data={slotGroupsDescending}
totalCount={slotsCount}
initialTopMostItemIndex={initialTopMostItemIndex}
increaseViewportBy={increaseViewportBy}
// height of past slots that the user is most likely to scroll through
defaultItemHeight={42}
Expand All @@ -200,6 +166,76 @@ const MScrollSeekPlaceHolder = memo(function ScrollSeekPlaceholder() {
return null;
});

interface RTAutoScrollProps {
listRef: RefObject<VirtuosoHandle>;
getIndexForSlot: (slot: number) => number;
}
function RTAutoScroll({ listRef, getIndexForSlot }: RTAutoScrollProps) {
const currentLeaderSlot = useAtomValue(currentLeaderSlotAtom);
const autoScroll = useAtomValue(autoScrollAtom);

useEffect(() => {
if (!autoScroll || currentLeaderSlot === undefined || !listRef.current)
return;

// scroll to new current leader slot
const slotIndex = getIndexForSlot(currentLeaderSlot);
const visibleStartIndex = slotIndex - slotsListPinnedSlotOffset;

listRef.current.scrollToIndex({
index: visibleStartIndex > 0 ? visibleStartIndex : 0,
align: "start",
});
}, [autoScroll, currentLeaderSlot, getIndexForSlot, listRef]);

return null;
}

interface SlotOverrideScrollProps {
listRef: RefObject<VirtuosoHandle>;
getIndexForSlot: (slot: number) => number;
debouncedScroll: DebouncedState<() => void>;
}
function SlotOverrideScroll({
listRef,
getIndexForSlot,
debouncedScroll,
}: SlotOverrideScrollProps) {
const rafIdRef = useRef<number | null>(null);
const slotOverride = useAtomValue(slotOverrideAtom);

useEffect(() => {
if (!slotOverride || !listRef.current || debouncedScroll.isPending())
return;

const targetIndex = Math.max(
0,
getIndexForSlot(slotOverride) - slotsListPinnedSlotOffset,
);

const prevRafId = rafIdRef.current;
rafIdRef.current = requestAnimationFrame(() => {
if (prevRafId !== null) {
cancelAnimationFrame(prevRafId);
}

listRef.current?.scrollToIndex({
index: targetIndex,
align: "start",
});
});

return () => {
if (rafIdRef.current !== null) {
cancelAnimationFrame(rafIdRef.current);
rafIdRef.current = null;
}
};
}, [getIndexForSlot, slotOverride, listRef, debouncedScroll]);

return null;
}

function AllSlotsList({ width, height }: SlotsListProps) {
const epoch = useAtomValue(epochAtom);

Expand Down Expand Up @@ -258,6 +294,8 @@ function MySlotsList({ width, height }: SlotsListProps) {
[slotGroupsDescending],
);

if (!leaderSlots) return null;

return (
<InnerSlotsList
width={width}
Expand All @@ -268,17 +306,3 @@ function MySlotsList({ width, height }: SlotsListProps) {
/>
);
}

function useDebouncedHeight(height: number) {
const [debouncedHeight, setDebouncedHeight] = useState(height);

const updateDebouncedHeight = useDebouncedCallback((h: number) => {
setDebouncedHeight((prev) => (Math.abs(h - prev) >= 100 ? h : prev));
}, 80);

useMemo(() => {
updateDebouncedHeight(height);
}, [height, updateDebouncedHeight]);

return debouncedHeight;
}
Loading