{
@@ -164,7 +158,7 @@ function dtTextReducer(_: string, timeTill: Duration | undefined) {
}
function timeTillTextReducer(_: string, timeTill: Duration | undefined) {
- return getTimeTillText(timeTill);
+ return getDurationText(timeTill);
}
function getDtText(timeTill?: Duration) {
diff --git a/src/features/LeaderSchedule/Slots/cardValidatorSummary.module.css b/src/features/LeaderSchedule/Slots/cardValidatorSummary.module.css
index 9532f0da..17d3558c 100644
--- a/src/features/LeaderSchedule/Slots/cardValidatorSummary.module.css
+++ b/src/features/LeaderSchedule/Slots/cardValidatorSummary.module.css
@@ -1,7 +1,7 @@
.my-slots {
color: var(--summary-my-slots-color);
border-radius: 10px;
- background: rgba(250, 250, 250, 0.05);
+ background: var(--container-background-color);
padding: 2px 5px;
}
diff --git a/src/features/LeaderSchedule/Slots/resetLive.module.css b/src/features/LeaderSchedule/Slots/resetLive.module.css
index d98c4929..bd098cef 100644
--- a/src/features/LeaderSchedule/Slots/resetLive.module.css
+++ b/src/features/LeaderSchedule/Slots/resetLive.module.css
@@ -1,14 +1,17 @@
.container {
- /* width: 100%; */
display: flex;
justify-content: center;
.button {
position: absolute;
- /* z-index: 1; */
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
- border-radius: 16px;
- background: rgba(37, 100, 89, 0.9);
- padding: var(--space-1, 4px) 8px;
+ width: 115px;
+ height: 18px;
+ padding: 2px 4px 2px 6px;
+ align-items: center;
+ border-radius: 40px;
+ background: #174e45;
+ box-shadow: 0 4px 4px 0 rgba(28, 82, 73, 0.4);
+ font-size: 12px;
+ font-weight: 600;
}
}
diff --git a/src/features/LeaderSchedule/Slots/slotCardGrid.module.css b/src/features/LeaderSchedule/Slots/slotCardGrid.module.css
index e0d23be6..9b32d065 100644
--- a/src/features/LeaderSchedule/Slots/slotCardGrid.module.css
+++ b/src/features/LeaderSchedule/Slots/slotCardGrid.module.css
@@ -72,16 +72,11 @@
font-variant-numeric: tabular-nums;
&.active {
- background: rgba(250, 250, 250, 0.05);
+ background: var(--container-background-color);
color: var(--primary-text-color);
}
&.narrow-screen {
padding-left: 0;
}
-
- .icon {
- height: 14px;
- width: 14px;
- }
}
diff --git a/src/features/LeaderSchedule/index.tsx b/src/features/LeaderSchedule/index.tsx
index fb75eb25..14023b53 100644
--- a/src/features/LeaderSchedule/index.tsx
+++ b/src/features/LeaderSchedule/index.tsx
@@ -1,14 +1,19 @@
import { Flex } from "@radix-ui/themes";
import Slots from "./Slots";
import { useAtomValue, useSetAtom } from "jotai";
-import { epochAtom, slotOverrideAtom } from "../../atoms";
+import { epochAtom, slotNavFilterAtom, slotOverrideAtom } from "../../atoms";
import { useMount } from "react-use";
+import { clusterIndicatorHeight, headerHeight } from "../../consts";
export function LeaderSchedule() {
const epoch = useAtomValue(epochAtom);
const setSlotOverride = useSetAtom(slotOverrideAtom);
+ const setSlotNavFilter = useSetAtom(slotNavFilterAtom);
- useMount(() => setSlotOverride(undefined));
+ useMount(() => {
+ setSlotOverride(undefined);
+ setSlotNavFilter(undefined);
+ });
const handleMouseDown = (e: React.MouseEvent) => {
if (e.button === 1) {
@@ -22,9 +27,9 @@ export function LeaderSchedule() {
diff --git a/src/features/Navigation/EpochSlider.tsx b/src/features/Navigation/EpochSlider.tsx
new file mode 100644
index 00000000..2f424520
--- /dev/null
+++ b/src/features/Navigation/EpochSlider.tsx
@@ -0,0 +1,576 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { RefObject } from "react";
+import { memo, useCallback, useEffect } from "react";
+import type { Epoch } from "../../api/types";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import {
+ currentLeaderSlotAtom,
+ epochAtom,
+ firstProcessedSlotAtom,
+ isNavCollapsedAtom,
+ leaderSlotsAtom,
+ mostRecentSlotLeaderAtom,
+ SlotNavFilter,
+ slotNavFilterAtom,
+ slotOverrideAtom,
+} from "../../atoms";
+import { skippedSlotsAtom } from "../../api/atoms";
+import type React from "react";
+import { startTransition, useMemo, useReducer, useRef, useState } from "react";
+import { Slider } from "radix-ui";
+import warning from "../../assets/warning_16dp_FF5353_FILL1_wght400_GRAD0_opsz20.svg";
+import green_flag from "../../assets/flag.svg";
+import styles from "./epochSlider.module.css";
+import { useInterval, useMeasure } from "react-use";
+import clsx from "clsx";
+import { useThrottledCallback } from "use-debounce";
+import {
+ autoUpdate,
+ FloatingPortal,
+ offset,
+ useFloating,
+} from "@floating-ui/react";
+import { isScrollingAtom } from "./atoms";
+import { useEventListener } from "../../hooks/useEventListener";
+
+// 1 tick about 10 leaders or 40 slots
+const sliderMaxValue = 10_800;
+
+function slotToEpochPct({
+ slot,
+ epochStartSlot,
+ epochEndSlot,
+}: {
+ slot?: number;
+ epochStartSlot?: number;
+ epochEndSlot?: number;
+}) {
+ if (
+ !slot ||
+ epochStartSlot === undefined ||
+ epochEndSlot === undefined ||
+ epochStartSlot === epochEndSlot
+ )
+ return 0;
+
+ slot = Math.min(Math.max(slot, epochStartSlot), epochEndSlot);
+ const totalEpochSlots = epochEndSlot - epochStartSlot;
+ const epochSlotProgress = slot - epochStartSlot;
+ return epochSlotProgress / totalEpochSlots;
+}
+
+function pctToValue(pct: number) {
+ return Math.trunc(pct * sliderMaxValue);
+}
+
+function valueToSlot(
+ value?: number,
+ epochStartSlot?: number,
+ epochEndSlot?: number,
+) {
+ if (
+ value === undefined ||
+ epochStartSlot === undefined ||
+ epochEndSlot === undefined
+ )
+ return;
+
+ const pct = value / sliderMaxValue;
+ const totalEpochSlots = epochEndSlot - epochStartSlot;
+ return Math.trunc(totalEpochSlots * pct) + epochStartSlot;
+}
+
+function epochProgressPctReducer(
+ _: number,
+ params: { slot?: number; epochStartSlot?: number; epochEndSlot?: number },
+): number {
+ return slotToEpochPct(params);
+}
+
+function getRefreshInterval(epoch: Epoch | undefined, pct: number) {
+ if (!epoch || !pct) return 3_000;
+
+ const epochSlots = epoch.end_slot - epoch.start_slot;
+ if (epochSlots < 10_000) return 300;
+ if (epochSlots < 50_000) return 1_000;
+ if (epochSlots < 100_000) return 3_000;
+ if (epochSlots < 200_000) return 5_000;
+ if (epochSlots < 300_000) return 10_000;
+ if (epochSlots < 400_000) return 15_000;
+ return 30_000;
+}
+
+function removeNearbyPct(
+ pcts: { pct: number; slot: number }[],
+ pctBound: number,
+) {
+ if (!pcts.length) return pcts;
+
+ return pcts.reduce(
+ (acc, cur, i) => {
+ if (i === 0) return acc;
+
+ const prev = acc[acc.length - 1];
+ if (Math.abs(cur.pct - prev.pct) < pctBound) {
+ return acc;
+ }
+
+ acc.push(cur);
+ return acc;
+ },
+ [pcts[0]],
+ );
+}
+
+export default memo(EpochSlider);
+
+function EpochSlider() {
+ const epoch = useAtomValue(epochAtom);
+ const setSlotOverride = useSetAtom(slotOverrideAtom);
+ const [value, setValue] = useState([0]);
+ const isSliderChangingValueRef = useRef(false);
+ const setIsScrolling = useSetAtom(isScrollingAtom);
+
+ const [measureRef, { height }] = useMeasure
();
+ const slotHeight = Math.trunc(height / 175);
+
+ const [tooltipOpen, setTooltipOpen] = useState(false);
+ useEffect(() => {
+ if (tooltipOpen) {
+ const timeoutId = setTimeout(() => {
+ setTooltipOpen(false);
+ }, 100);
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }
+ }, [tooltipOpen]);
+ const updateSlot = useCallback(
+ (slot: number | undefined) => {
+ setSlotOverride(slot);
+ setTooltipOpen(true);
+ },
+ [setSlotOverride],
+ );
+
+ const handleValueChange = useCallback(
+ (newValue: number[]) => {
+ const slot = valueToSlot(newValue[0], epoch?.start_slot, epoch?.end_slot);
+ if (slot !== undefined) {
+ updateSlot(slot);
+ }
+ },
+ [epoch?.end_slot, epoch?.start_slot, updateSlot],
+ );
+ const throttledHandleValueChange = useThrottledCallback(
+ handleValueChange,
+ 100,
+ {
+ trailing: true,
+ },
+ );
+
+ useEventListener("pointerup", () => {
+ isSliderChangingValueRef.current = false;
+ setIsScrolling(false);
+ });
+
+ return (
+
+ {
+ isSliderChangingValueRef.current = true;
+ setValue(newValue);
+ throttledHandleValueChange(newValue);
+ setIsScrolling(true);
+ }}
+ onValueCommit={() => {
+ isSliderChangingValueRef.current = false;
+ throttledHandleValueChange.flush();
+ setIsScrolling(false);
+ }}
+ max={sliderMaxValue}
+ >
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function SliderEpochProgress({
+ isSliderChangingValueRef,
+ setSliderValue,
+}: {
+ isSliderChangingValueRef: RefObject;
+ setSliderValue: React.Dispatch>;
+}) {
+ const epoch = useAtomValue(epochAtom);
+ const mostRecentSlotLeader = useAtomValue(mostRecentSlotLeaderAtom);
+ const currentLeaderSlot = useAtomValue(currentLeaderSlotAtom);
+ const slotOverride = useAtomValue(slotOverrideAtom);
+ const navFilter = useAtomValue(slotNavFilterAtom);
+
+ const [epochProgressPct, updateEpochProgressPct] = useReducer(
+ epochProgressPctReducer,
+ {
+ slot: currentLeaderSlot,
+ epochStartSlot: epoch?.start_slot,
+ epochEndSlot: epoch?.end_slot,
+ },
+ slotToEpochPct,
+ );
+
+ const refreshInterval = useMemo(
+ () => getRefreshInterval(epoch, epochProgressPct),
+ [epoch, epochProgressPct],
+ );
+
+ useInterval(() => {
+ startTransition(() => {
+ updateEpochProgressPct({
+ slot: currentLeaderSlot,
+ epochStartSlot: epoch?.start_slot,
+ epochEndSlot: epoch?.end_slot,
+ });
+ });
+ }, refreshInterval);
+
+ // Sync the slider position with the slot override updating or the epoch progressing
+ useEffect(() => {
+ if (isSliderChangingValueRef.current) return;
+
+ const pct = slotOverride
+ ? slotToEpochPct({
+ slot: slotOverride,
+ epochStartSlot: epoch?.start_slot,
+ epochEndSlot: epoch?.end_slot,
+ })
+ : navFilter === SlotNavFilter.MySlots
+ ? slotToEpochPct({
+ slot: mostRecentSlotLeader,
+ epochStartSlot: epoch?.start_slot,
+ epochEndSlot: epoch?.end_slot,
+ })
+ : epochProgressPct;
+ const value = pctToValue(pct);
+
+ setSliderValue((prev) => {
+ return prev[0] === value ? prev : [value];
+ });
+ }, [
+ epoch?.end_slot,
+ epoch?.start_slot,
+ epochProgressPct,
+ isSliderChangingValueRef,
+ setSliderValue,
+ slotOverride,
+ navFilter,
+ mostRecentSlotLeader,
+ ]);
+
+ return (
+
+ );
+}
+const MSliderEpochProgress = memo(SliderEpochProgress);
+
+function SliderThumbTooltip({ isOpen }: { isOpen: boolean }) {
+ const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
+ const { refs, elements, floatingStyles, update } = useFloating({
+ placement: "right",
+ middleware: [offset(5)],
+ });
+
+ useEffect(() => {
+ if (elements.reference && elements.floating) {
+ const cleanup = autoUpdate(
+ elements.reference,
+ elements.floating,
+ update,
+ { animationFrame: true },
+ );
+ return cleanup;
+ }
+ }, [elements, update]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
+
+function SlotOverrideText() {
+ const slotOverride = useAtomValue(slotOverrideAtom);
+
+ return (
+
+ {slotOverride}
+
+ );
+}
+
+const isFutureSlotAtom = (slot: number) =>
+ atom((get) => {
+ const currentSlot = get(currentLeaderSlotAtom);
+ return slot > (currentSlot ?? 0);
+ });
+
+interface LeaderSlotProps {
+ slot: number;
+ pct: number;
+ height: number;
+ updateSlot: (slot: number | undefined) => void;
+}
+
+function LeaderSlot({ slot, pct, height, updateSlot }: LeaderSlotProps) {
+ const firstProcessedSlot = useAtomValue(firstProcessedSlotAtom);
+ const isFutureSlot = useAtomValue(
+ useMemo(() => isFutureSlotAtom(slot), [slot]),
+ );
+ const onLeaderSlotClicked = (slot: number) => (e: React.PointerEvent) => {
+ e.stopPropagation();
+ e.preventDefault();
+ updateSlot(slot);
+ };
+
+ const slotBeforeFirstProcessedSlot = firstProcessedSlot
+ ? slot < firstProcessedSlot
+ : false;
+
+ return (
+
+ );
+}
+const MLeaderSlot = memo(LeaderSlot);
+
+function SliderLeaderSlots({
+ updateSlot,
+ slotHeight,
+}: {
+ updateSlot: (slot: number | undefined) => void;
+ slotHeight: number;
+}) {
+ const epoch = useAtomValue(epochAtom);
+ const leaderSlots = useAtomValue(leaderSlotsAtom);
+
+ const leaderSlotPcts = useMemo(() => {
+ if (!epoch || !leaderSlots?.length) return;
+
+ const pcts = leaderSlots.map((slot) => ({
+ slot,
+ pct: slotToEpochPct({
+ slot,
+ epochStartSlot: epoch.start_slot,
+ epochEndSlot: epoch.end_slot,
+ }),
+ }));
+
+ return removeNearbyPct(pcts, 0.005);
+ }, [epoch, leaderSlots]);
+
+ return (
+ <>
+ {leaderSlotPcts?.map(({ slot, pct }) => (
+
+ ))}
+
+ );
+}
+const MSliderLeaderSlots = memo(SliderLeaderSlots);
+
+interface SkippedSlotProps {
+ slot: number;
+ pct: number;
+ updateSlot: (slot: number | undefined) => void;
+}
+
+function SkippedSlot({ slot, pct, updateSlot }: SkippedSlotProps) {
+ const onLeaderSlotClicked = (slot: number) => (e: React.PointerEvent) => {
+ e.stopPropagation();
+ e.preventDefault();
+ updateSlot(slot);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function SliderFirstProcessedSlot({
+ updateSlot,
+}: {
+ updateSlot: (slot: number | undefined) => void;
+}) {
+ const epoch = useAtomValue(epochAtom);
+ const firstProcessedSlot = useAtomValue(firstProcessedSlotAtom);
+ const firstProcessedSlotPct = useMemo(() => {
+ if (!firstProcessedSlot || !epoch) return;
+ return slotToEpochPct({
+ slot: firstProcessedSlot,
+ epochStartSlot: epoch.start_slot,
+ epochEndSlot: epoch.end_slot,
+ });
+ }, [epoch, firstProcessedSlot]);
+
+ if (!firstProcessedSlotPct || !firstProcessedSlot) return null;
+ return (
+
+ );
+}
+const MSliderFirstProcessedSlot = memo(SliderFirstProcessedSlot);
diff --git a/src/features/Navigation/NavBlur.tsx b/src/features/Navigation/NavBlur.tsx
new file mode 100644
index 00000000..11d1856f
--- /dev/null
+++ b/src/features/Navigation/NavBlur.tsx
@@ -0,0 +1,17 @@
+import { useSetAtom } from "jotai";
+import { isNavCollapsedAtom } from "../../atoms";
+import { maxZIndex } from "../../consts";
+
+export default function NavBlur() {
+ const setIsNavCollapsed = useSetAtom(isNavCollapsedAtom);
+
+ return (
+ setIsNavCollapsed(true)}
+ className="blur"
+ style={{
+ zIndex: maxZIndex - 2,
+ }}
+ />
+ );
+}
diff --git a/src/features/Navigation/NavCollapseToggle.tsx b/src/features/Navigation/NavCollapseToggle.tsx
new file mode 100644
index 00000000..a84d7c90
--- /dev/null
+++ b/src/features/Navigation/NavCollapseToggle.tsx
@@ -0,0 +1,43 @@
+import { IconButton } from "@radix-ui/themes";
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { isNavCollapsedAtom } from "../../atoms";
+import styles from "./navigation.module.css";
+import ReadMore from "@material-design-icons/svg/filled/read_more.svg?react";
+import { largeNavToggleHeight, navToggleHeight } from "../../consts";
+
+interface NavCollapseToggleProps {
+ isFloating?: boolean;
+ isLarge?: boolean;
+}
+
+export default function NavCollapseToggle({
+ isFloating,
+ isLarge,
+}: NavCollapseToggleProps) {
+ const [isNavCollapsed, setIsNavCollapsed] = useAtom(isNavCollapsedAtom);
+
+ const buttonSize = `${isLarge ? largeNavToggleHeight : navToggleHeight}px`;
+ const iconSize = isLarge ? "18px" : "15px";
+
+ return (
+
setIsNavCollapsed((prev) => !prev)}
+ className={clsx(styles.toggleButton, { [styles.floating]: isFloating })}
+ style={{
+ height: buttonSize,
+ width: buttonSize,
+ }}
+ >
+
+
+ );
+}
diff --git a/src/features/Navigation/NavFilterToggles.tsx b/src/features/Navigation/NavFilterToggles.tsx
new file mode 100644
index 00000000..2ab5bdc3
--- /dev/null
+++ b/src/features/Navigation/NavFilterToggles.tsx
@@ -0,0 +1,49 @@
+import { Flex, Text } from "@radix-ui/themes";
+import { ToggleGroup } from "radix-ui";
+import { useCallback } from "react";
+
+import { useAtom } from "jotai";
+import { SlotNavFilter, slotNavFilterAtom } from "../../atoms";
+import styles from "./navigation.module.css";
+import { navToggleHeight } from "../../consts";
+
+export default function NavFilterToggles() {
+ const [navFilter, setNavFilter] = useAtom(slotNavFilterAtom);
+
+ const onValueChange = useCallback(
+ (value: SlotNavFilter) => {
+ if (!value) return;
+
+ setNavFilter(value);
+ },
+ [setNavFilter],
+ );
+
+ return (
+
+
+
+ All Slots
+
+
+
+ My Slots
+
+
+
+ );
+}
diff --git a/src/features/Navigation/ResetLive.tsx b/src/features/Navigation/ResetLive.tsx
new file mode 100644
index 00000000..63d6edf9
--- /dev/null
+++ b/src/features/Navigation/ResetLive.tsx
@@ -0,0 +1,29 @@
+import { useAtomValue, useSetAtom } from "jotai";
+import { slotOverrideAtom, statusAtom } from "../../atoms";
+import styles from "./resetLive.module.css";
+import { Button, Text } from "@radix-ui/themes";
+import { ArrowDownIcon, ArrowUpIcon } from "@radix-ui/react-icons";
+
+export default function ResetLive() {
+ const setSlotOverride = useSetAtom(slotOverrideAtom);
+ const status = useAtomValue(statusAtom);
+
+ if (status === "Live") return null;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/features/Navigation/SlotsList.tsx b/src/features/Navigation/SlotsList.tsx
new file mode 100644
index 00000000..9a0f184c
--- /dev/null
+++ b/src/features/Navigation/SlotsList.tsx
@@ -0,0 +1,348 @@
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+ autoScrollAtom,
+ currentLeaderSlotAtom,
+ epochAtom,
+ leaderSlotsAtom,
+ SlotNavFilter,
+ slotNavFilterAtom,
+ slotOverrideAtom,
+} from "../../atoms";
+import { Box } from "@radix-ui/themes";
+import type { RefObject } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styles from "./slotsList.module.css";
+import { slotsListPinnedSlotOffset, slotsPerLeader } from "../../consts";
+import { throttle } from "lodash";
+import SlotsRenderer, { SlotsPlaceholder } from "./SlotsRenderer";
+import type { ScrollSeekConfiguration, VirtuosoHandle } from "react-virtuoso";
+import { Virtuoso } from "react-virtuoso";
+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";
+import { getSlotGroupLeader } from "../../utils";
+import clsx from "clsx";
+
+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 ? (
+
+ ) : (
+
+ );
+}
+
+interface InnerSlotsListProps {
+ width: number;
+ height: number;
+ slotGroupsDescending: number[];
+ getSlotAtIndex: (index: number) => number;
+ getIndexForSlot: (slot: number) => number;
+}
+function InnerSlotsList({
+ width,
+ height,
+ slotGroupsDescending,
+ getSlotAtIndex,
+ getIndexForSlot,
+}: InnerSlotsListProps) {
+ const listContainerRef = useRef
(null);
+ const listRef = useRef(null);
+ const visibleStartIndexRef = useRef(null);
+
+ const [hideList, setHideList] = useState(true);
+
+ useEffect(() => {
+ // initially hide list to
+ const timeout = setTimeout(() => {
+ setHideList(false);
+ }, 100);
+
+ return () => clearTimeout(timeout);
+ }, []);
+
+ const setSlotOverride = useSetAtom(slotOverrideAtom);
+ const slotsCount = slotGroupsDescending.length;
+
+ const debouncedScroll = useDebouncedCallback(() => {}, 100);
+
+ const { rangeChanged, scrollSeekConfiguration } = useMemo(() => {
+ const rangeChangedFn = ({ startIndex }: { startIndex: number }) => {
+ // account for increaseViewportBy
+ visibleStartIndexRef.current = startIndex + 1;
+ };
+
+ const config: ScrollSeekConfiguration = {
+ enter: (velocity) => Math.abs(velocity) > 1500,
+ exit: (velocity) => Math.abs(velocity) < 500,
+ change: (_, range) => rangeChangedFn(range),
+ };
+ return { rangeChanged: rangeChangedFn, scrollSeekConfiguration: config };
+ }, [visibleStartIndexRef]);
+
+ // Setup user scroll handling
+ useEffect(() => {
+ if (!listContainerRef.current) return;
+ const container = listContainerRef.current;
+
+ const handleSlotOverride = throttle(
+ () => {
+ if (visibleStartIndexRef.current === null) return;
+
+ debouncedScroll();
+
+ const slotIndex = Math.min(
+ visibleStartIndexRef.current + slotsListPinnedSlotOffset,
+ slotsCount - 1,
+ );
+
+ const slot = getSlotAtIndex(slotIndex);
+ setSlotOverride(slot);
+ },
+ 50,
+ { leading: true, trailing: true },
+ );
+
+ const handleScroll = () => {
+ handleSlotOverride();
+ };
+
+ container.addEventListener("wheel", handleScroll);
+ container.addEventListener("touchmove", handleScroll);
+
+ return () => {
+ container.removeEventListener("wheel", handleScroll);
+ container.removeEventListener("touchmove", handleScroll);
+ };
+ }, [
+ getSlotAtIndex,
+ debouncedScroll,
+ setSlotOverride,
+ slotsCount,
+ visibleStartIndexRef,
+ ]);
+
+ return (
+
+
+
+
+
+ }
+ rangeChanged={rangeChanged}
+ components={{ ScrollSeekPlaceholder: MScrollSeekPlaceHolder }}
+ scrollSeekConfiguration={scrollSeekConfiguration}
+ />
+
+ );
+}
+
+// Render nothing when scrolling quickly to improve performance
+const MScrollSeekPlaceHolder = memo(function ScrollSeekPlaceholder() {
+ return null;
+});
+
+interface RTAutoScrollProps {
+ listRef: RefObject;
+ 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;
+ getIndexForSlot: (slot: number) => number;
+ debouncedScroll: DebouncedState<() => void>;
+}
+function SlotOverrideScroll({
+ listRef,
+ getIndexForSlot,
+ debouncedScroll,
+}: SlotOverrideScrollProps) {
+ const rafIdRef = useRef(null);
+ const slotOverride = useAtomValue(slotOverrideAtom);
+
+ useEffect(() => {
+ if (
+ slotOverride === undefined ||
+ !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);
+
+ const slotGroupsDescending = useMemo(() => {
+ if (!epoch) return [];
+
+ const numSlotsInEpoch = epoch.end_slot - epoch.start_slot + 1;
+ return Array.from(
+ { length: Math.ceil(numSlotsInEpoch / slotsPerLeader) },
+ (_, i) => epoch.end_slot - i * slotsPerLeader - (slotsPerLeader - 1),
+ );
+ }, [epoch]);
+
+ const getSlotAtIndex = useCallback(
+ (index: number) => slotGroupsDescending[index],
+ [slotGroupsDescending],
+ );
+
+ const getIndexForSlot = useCallback(
+ (slot: number) => {
+ if (!epoch || slot < epoch.start_slot || slot > epoch.end_slot) return -1;
+ return Math.trunc((epoch.end_slot - slot) / slotsPerLeader);
+ },
+ [epoch],
+ );
+
+ return (
+
+ );
+}
+
+function MySlotsList({ width, height }: SlotsListProps) {
+ const mySlots = useAtomValue(leaderSlotsAtom);
+
+ const slotGroupsDescending = useMemo(
+ () => mySlots?.toReversed() ?? [],
+ [mySlots],
+ );
+
+ const slotToIndexMapping = useMemo(() => {
+ return slotGroupsDescending.reduce<{ [slot: number]: number }>(
+ (acc, slot, index) => {
+ acc[slot] = index;
+ return acc;
+ },
+ {},
+ );
+ }, [slotGroupsDescending]);
+
+ const getSlotAtIndex = useCallback(
+ (index: number) => slotGroupsDescending[index],
+ [slotGroupsDescending],
+ );
+
+ // Get the slot index, or if unavailable, the closest past index
+ const getClosestIndexForSlot = useCallback(
+ (slot: number) => {
+ if (!slotGroupsDescending.length) return 0;
+ if (slot >= slotGroupsDescending[0]) return 0;
+ if (slot <= slotGroupsDescending[slotGroupsDescending.length - 1])
+ return slotGroupsDescending.length - 1;
+
+ return (
+ slotToIndexMapping[getSlotGroupLeader(slot)] ??
+ slotGroupsDescending.findIndex((s) => s <= slot)
+ );
+ },
+ [slotGroupsDescending, slotToIndexMapping],
+ );
+
+ if (!mySlots) return null;
+
+ return (
+
+ );
+}
diff --git a/src/features/Navigation/SlotsRenderer.tsx b/src/features/Navigation/SlotsRenderer.tsx
new file mode 100644
index 00000000..049fce89
--- /dev/null
+++ b/src/features/Navigation/SlotsRenderer.tsx
@@ -0,0 +1,403 @@
+import { atom, useAtomValue } from "jotai";
+import {
+ currentLeaderSlotAtom,
+ currentSlotAtom,
+ earliestProcessedSlotLeaderAtom,
+ nextLeaderSlotAtom,
+ slotDurationAtom,
+} from "../../atoms";
+import { Box, Flex, Progress, Text } from "@radix-ui/themes";
+import { useSlotQueryPublish } from "../../hooks/useSlotQuery";
+import type React from "react";
+import { memo, useMemo } from "react";
+import styles from "./slotsRenderer.module.css";
+import PeerIcon from "../../components/PeerIcon";
+import { slotsPerLeader } from "../../consts";
+import { useSlotInfo } from "../../hooks/useSlotInfo";
+import clsx from "clsx";
+import { Link } from "@tanstack/react-router";
+import { getSlotGroupLeader } from "../../utils";
+import { selectedSlotAtom } from "../Overview/SlotPerformance/atoms";
+import {
+ slotStatusBlue,
+ slotStatusDullTeal,
+ slotStatusGreen,
+ slotStatusRed,
+ slotStatusTeal,
+} from "../../colors";
+import SlotClient from "../../components/SlotClient";
+import { useIsLeaderGroupSkipped } from "../../hooks/useIsLeaderGroupSkipped";
+import { isScrollingAtom } from "./atoms";
+import useNextSlot from "../../hooks/useNextSlot";
+
+export default function SlotsRenderer(props: { leaderSlotForGroup: number }) {
+ const isScrolling = useAtomValue(isScrollingAtom);
+
+ if (isScrolling) return ;
+
+ return ;
+}
+
+const getStatusAtom = atom((get) => {
+ const currentLeaderSlot = get(currentLeaderSlotAtom);
+ const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+ if (
+ currentLeaderSlot === undefined ||
+ earliestProcessedSlotLeader === undefined
+ )
+ return;
+
+ const nextLeaderSlot = get(nextLeaderSlotAtom);
+
+ return function getStatus(slot: number) {
+ return {
+ isCurrentSlotGroup:
+ currentLeaderSlot <= slot && slot < currentLeaderSlot + slotsPerLeader,
+ isFutureSlotGroup: currentLeaderSlot + slotsPerLeader <= slot,
+ isProcessedSlotGroup:
+ earliestProcessedSlotLeader <= slot && slot <= currentLeaderSlot,
+ isYourNextLeaderGroup:
+ nextLeaderSlot &&
+ nextLeaderSlot <= slot &&
+ slot < nextLeaderSlot + slotsPerLeader,
+ };
+ };
+});
+
+const MSlotsRenderer = memo(function SlotsRenderer({
+ leaderSlotForGroup,
+}: {
+ leaderSlotForGroup: number;
+}) {
+ const getStatus = useAtomValue(getStatusAtom);
+ const status = getStatus?.(leaderSlotForGroup);
+ if (!status) return ;
+
+ const { isFutureSlotGroup, isCurrentSlotGroup, isYourNextLeaderGroup } =
+ status;
+
+ return (
+
+ {isCurrentSlotGroup ? (
+
+ ) : isYourNextLeaderGroup ? (
+
+ ) : isFutureSlotGroup ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ );
+ }, [status]);
+
+ if (!status) return null;
+
+ return (
+
+ {text}
+ {icon}
+
+ );
+}
diff --git a/src/features/Navigation/atoms.ts b/src/features/Navigation/atoms.ts
new file mode 100644
index 00000000..942ae2cd
--- /dev/null
+++ b/src/features/Navigation/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const isScrollingAtom = atom(false);
diff --git a/src/features/EpochBar/epochSlider.module.css b/src/features/Navigation/epochSlider.module.css
similarity index 53%
rename from src/features/EpochBar/epochSlider.module.css
rename to src/features/Navigation/epochSlider.module.css
index d22ac335..0b282305 100644
--- a/src/features/EpochBar/epochSlider.module.css
+++ b/src/features/Navigation/epochSlider.module.css
@@ -1,25 +1,19 @@
-@import "@radix-ui/colors/black-alpha.css";
-@import "@radix-ui/colors/violet.css";
-
-.container {
- /* width: "100%"; */
- position: relative;
- flex-grow: 1;
-}
-
.epoch-progress {
- height: 100%;
+ width: 100%;
background: var(--epoch-slider-progress-color);
- border-top-left-radius: 9999px;
- border-bottom-left-radius: 9999px;
+ position: absolute;
+ bottom: 0;
+}
+
+.clickable {
+ cursor: pointer;
}
.leader-slot {
- height: 100%;
- background: var(--my-slots-color);
- width: 5px;
+ width: 100%;
+ background: #2a7edf;
+ height: 5px;
position: absolute;
- top: 0px;
opacity: 0.5;
&:hover {
filter: brightness(1.5);
@@ -30,40 +24,39 @@
}
.skipped-slot {
- height: 100%;
- background: var(--epoch-skipped-slot-color);
- width: 3px;
+ width: 100%;
+ background: #ff5353;
+ height: 3px;
position: absolute;
- top: 0px;
&:hover {
filter: brightness(1.5);
}
}
.skipped-slot-icon {
- width: 12px;
+ height: 10px;
position: absolute;
- top: -15px;
+ left: 11px;
&:hover {
filter: brightness(1.5);
}
}
.first-processed-slot {
- height: 100%;
- background: var(--header-color);
- width: 3px;
+ width: 100%;
+ background: #bdf3ff;
+ height: 3px;
position: absolute;
- top: 0px;
+ right: 0px;
&:hover {
filter: brightness(1.5);
}
}
.first-processed-slot-icon {
- width: 12px;
+ height: 10px;
position: absolute;
- top: -15px;
+ left: 11px;
&:hover {
filter: brightness(1.5);
}
@@ -71,37 +64,55 @@
.slider-root {
position: relative;
+ flex-grow: 1;
+ width: 10px;
display: flex;
+ flex-direction: column;
align-items: center;
user-select: none;
touch-action: none;
}
.slider-track {
- background: var(--dropdown-background-color);
- position: relative;
+ background: #24262b;
flex-grow: 1;
- border-radius: 9999px;
- height: 10px;
- /* To round leader slots markers at beginning/end of epoch slider */
- overflow: hidden;
+ width: 100%;
}
.slider-thumb {
display: block;
- width: 10px;
- height: 20px;
- box-shadow: 0 2px 8px var(--black-a7);
- background: var(--gray-7);
- border: 1px solid var(--gray-12);
+ position: relative;
+ height: 10px;
+ width: 20px;
+ background: rgba(100, 101, 101, 0.5);
+ border: 1px solid #a4a4a4;
border-radius: 2px;
- opacity: 0.5;
+ cursor: grab;
+
+ &.collapsed {
+ border-left-width: 0;
+ transition: border-width 0s linear 0.2s;
+ }
}
.slider-thumb:hover {
- background: var(--gray-3);
+ background: rgba(100, 101, 101, 0.3);
}
.slider-thumb:focus {
outline: none;
box-shadow: 0 0 0 2px var(--gray-a8);
}
+
+.hide {
+ opacity: 0;
+ display: none;
+ transition:
+ opacity 0.5s ease-out 1s,
+ display 0s 1.5s;
+ transition-behavior: allow-discrete;
+}
+
+.show {
+ opacity: 1;
+ display: block;
+}
diff --git a/src/features/Navigation/index.tsx b/src/features/Navigation/index.tsx
new file mode 100644
index 00000000..d66bae3f
--- /dev/null
+++ b/src/features/Navigation/index.tsx
@@ -0,0 +1,111 @@
+import { Flex } from "@radix-ui/themes";
+import { useMemo } from "react";
+
+import SlotsList from "./SlotsList";
+
+import {
+ clusterIndicatorHeight,
+ headerHeight,
+ logoRightSpacing,
+ logoWidth,
+ narrowNavMedia,
+ slotsNavSpacing,
+ navToggleHeight,
+ maxZIndex,
+ slotsListWidth,
+ epochThumbPadding,
+ slotNavWidth,
+ slotNavWithoutListWidth,
+} from "../../consts";
+import { StatusIndicator } from "./Status";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { useCurrentRoute } from "../../hooks/useCurrentRoute";
+import NavFilterToggles from "./NavFilterToggles";
+import EpochSlider from "./EpochSlider";
+import { isNavCollapsedAtom } from "../../atoms";
+import { useAtomValue } from "jotai";
+import clsx from "clsx";
+import styles from "./navigation.module.css";
+import NavCollapseToggle from "./NavCollapseToggle";
+import { useMedia } from "react-use";
+
+const top = clusterIndicatorHeight + headerHeight;
+
+/**
+ * On narrow screens, container width is 0
+ * On collapse, content width shrinks to 0
+ */
+export default function Navigation() {
+ const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
+ const isNarrow = useMedia(narrowNavMedia);
+
+ // padding to make sure epoch thumb is visible,
+ // as it is positioned slightly outside of the container
+ const thumbPadding = isNavCollapsed ? 0 : epochThumbPadding;
+
+ const currentRoute = useCurrentRoute();
+ const width = useMemo(() => {
+ return currentRoute === "Schedule" ? slotNavWithoutListWidth : slotNavWidth;
+ }, [currentRoute]);
+
+ return (
+
+
+
+ {isNarrow && (
+
+
+
+ )}
+
+
+
+
+
+ {currentRoute !== "Schedule" && (
+
+
+
+
+ {({ height, width }) => (
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function CurrentSlotText() {
+ const epoch = useAtomValue(epochAtom);
+
+ return (
+
+
+
+ );
+}
+
+function NextEpochTimeText() {
+ const slot = useAtomValue(currentSlotAtom);
+ const epoch = useAtomValue(epochAtom);
+ const slotDuration = useAtomValue(slotDurationAtom);
+
+ const nextEpochText = useMemo(() => {
+ if (epoch === undefined || slot === undefined) return "";
+
+ const endDiffMs = (epoch.end_slot - slot) * slotDuration;
+
+ const durationLeft = Duration.fromMillis(endDiffMs).rescale();
+ return getDurationText(durationLeft);
+ }, [epoch, slot, slotDuration]);
+
+ const progressSinceLastEpoch = useMemo(() => {
+ if (epoch === undefined || slot === undefined) return 0;
+ const currentSlotDiff = slot - epoch.start_slot;
+ const epochDiff = epoch.end_slot - epoch.start_slot;
+ const progress = (currentSlotDiff / epochDiff) * 100;
+ if (progress < 0 || progress > 100) return 0;
+ return progress;
+ }, [epoch, slot]);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/features/Overview/SlotPerformance/ComputeUnitsCard/index.tsx b/src/features/Overview/SlotPerformance/ComputeUnitsCard/index.tsx
index e265fd0b..524616a6 100644
--- a/src/features/Overview/SlotPerformance/ComputeUnitsCard/index.tsx
+++ b/src/features/Overview/SlotPerformance/ComputeUnitsCard/index.tsx
@@ -35,7 +35,7 @@ export default function ComputeUnitsCard() {
return (
<>
-
+
@@ -52,11 +52,11 @@ export default function ComputeUnitsCard() {
bankTileCount={bankTileCount}
onCreate={handleCreate}
/>
+
- next leader slot
-
- );
-}
diff --git a/src/features/Overview/SlotPerformance/NavigateNext.tsx b/src/features/Overview/SlotPerformance/NavigateNext.tsx
deleted file mode 100644
index 85b5b42c..00000000
--- a/src/features/Overview/SlotPerformance/NavigateNext.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, Text } from "@radix-ui/themes";
-import chevronRight from "../../../assets/chevron_right_18dp_F7F7F7_FILL1_wght400_GRAD0_opsz20.svg";
-import styles from "./navigate.module.css";
-
-interface NavigateNextProps {
- nav: (count: number) => void;
- disabled?: boolean;
-}
-
-export default function NavigateNext({ nav, disabled }: NavigateNextProps) {
- return (
- <>
-
-
-
- );
-}
diff --git a/src/features/Overview/SlotPerformance/NavigatePrev.tsx b/src/features/Overview/SlotPerformance/NavigatePrev.tsx
deleted file mode 100644
index 0ed31ffb..00000000
--- a/src/features/Overview/SlotPerformance/NavigatePrev.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, Text } from "@radix-ui/themes";
-import chevronLeft from "../../../assets/chevron_left_18dp_F7F7F7_FILL1_wght400_GRAD0_opsz20.svg";
-import styles from "./navigate.module.css";
-
-interface NavigatePrevProps {
- nav: (count: number) => void;
- disabled?: boolean;
-}
-
-export default function NavigatePrev({ nav, disabled }: NavigatePrevProps) {
- return (
- <>
-
-
-
- );
-}
diff --git a/src/features/Overview/SlotPerformance/NextSlotStatus.tsx b/src/features/Overview/SlotPerformance/NextSlotStatus.tsx
index a4b7fc17..11d80602 100644
--- a/src/features/Overview/SlotPerformance/NextSlotStatus.tsx
+++ b/src/features/Overview/SlotPerformance/NextSlotStatus.tsx
@@ -3,8 +3,11 @@ import styles from "./nextSlotStatus.module.css";
import useNextSlot from "../../../hooks/useNextSlot";
export default function NextSlotStatus() {
- const { progressSinceLastLeader, nextSlotText, nextLeaderSlot } =
- useNextSlot();
+ const { progressSinceLastLeader, nextSlotText, nextLeaderSlot } = useNextSlot(
+ {
+ showNowIfCurrent: true,
+ },
+ );
const slotText = nextLeaderSlot !== undefined ? ` (${nextLeaderSlot})` : "";
diff --git a/src/features/Overview/SlotPerformance/ResetLive.tsx b/src/features/Overview/SlotPerformance/ResetLive.tsx
deleted file mode 100644
index d5813cde..00000000
--- a/src/features/Overview/SlotPerformance/ResetLive.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useSetAtom } from "jotai";
-import { slotOverrideAtom } from "../../../atoms";
-import styles from "./resetLive.module.css";
-import { Button } from "@radix-ui/themes";
-import { useSlotSearchParam } from "../useSearchParams";
-
-export default function ResetLive() {
- const setSlotOverride = useSetAtom(slotOverrideAtom);
- const { selectedSlot, setSelectedSlot } = useSlotSearchParam();
-
- if (!selectedSlot) return null;
-
- return (
-
-
-
- );
-}
diff --git a/src/features/Overview/SlotPerformance/SlotSankey/slotSankey.module.css b/src/features/Overview/SlotPerformance/SlotSankey/slotSankey.module.css
index dbab3d5b..ae8ad727 100644
--- a/src/features/Overview/SlotPerformance/SlotSankey/slotSankey.module.css
+++ b/src/features/Overview/SlotPerformance/SlotSankey/slotSankey.module.css
@@ -6,6 +6,7 @@
position: relative;
aspect-ratio: 4.5;
min-height: 250px;
+ overflow: hidden;
.slot-sankey-container {
height: 100%;
diff --git a/src/features/Overview/SlotPerformance/SlotSelector.tsx b/src/features/Overview/SlotPerformance/SlotSelector.tsx
deleted file mode 100644
index 8660c162..00000000
--- a/src/features/Overview/SlotPerformance/SlotSelector.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import { Flex, RadioCards, Text, Tooltip } from "@radix-ui/themes";
-import { useAtom, useAtomValue } from "jotai";
-import {
- leaderSlotsAtom,
- currentSlotAtom,
- isCurrentlyLeaderAtom,
- nextLeaderSlotAtom,
- slotOverrideAtom,
- getIsSkippedAtom,
- epochAtom,
- nextEpochLeaderSlotsAtom,
- nextEpochLeaderSlotAtom,
-} from "../../../atoms";
-import { useMeasure } from "react-use";
-import styles from "./slotSelector.module.css";
-import { useEffect, useMemo, useRef, useState } from "react";
-import NavigatePrev from "./NavigatePrev";
-import NavigateNext from "./NavigateNext";
-import skippedIcon from "../../../assets/Skipped.svg";
-import { useSlotSearchParam } from "../useSearchParams";
-
-function getAllLeaderSlots(leaderSlots?: number[]) {
- return leaderSlots?.reduce<{ slot: number; order: number }[]>((acc, slot) => {
- return acc.concat(
- ...[
- { slot, order: 1 },
- { slot: slot + 1, order: 2 },
- { slot: slot + 2, order: 3 },
- { slot: slot + 3, order: 4 },
- ],
- );
- }, []);
-}
-
-function getValidIndex({
- index,
- maxIndex,
-}: {
- index?: number;
- maxIndex?: number;
-}) {
- index = index ?? maxIndex ?? 0;
- if (maxIndex === undefined) return Math.max(index, 0);
- return Math.max(Math.min(index ?? maxIndex, maxIndex), 0);
-}
-
-export default function SlotSelector() {
- const leaderStartSlots = useAtomValue(leaderSlotsAtom);
- const nextEpochLeaderStartSlots = useAtomValue(nextEpochLeaderSlotsAtom);
- const _nextLeaderSlot = useAtomValue(nextLeaderSlotAtom);
- const nextEpochLeaderSlot = useAtomValue(nextEpochLeaderSlotAtom);
- const nextLeaderSlot = _nextLeaderSlot ?? nextEpochLeaderSlot;
- const currentSlot = useAtomValue(currentSlotAtom);
- const isCurrentlyLeader = useAtomValue(isCurrentlyLeaderAtom);
- const [slotOverride, setSlotOverride] = useAtom(slotOverrideAtom);
-
- const { selectedSlot, setSelectedSlot } = useSlotSearchParam();
-
- const [indexOverride, setIndexOverride] = useState();
-
- const [ref, { width }] = useMeasure();
- const [slotWidth, setSlotWidth] = useState(95);
- const viewableSlotCount = Math.ceil(width / slotWidth);
-
- const allLeaderSlots = useMemo(
- () => {
- if (!leaderStartSlots) return;
-
- const slots = [...leaderStartSlots];
- if (nextEpochLeaderStartSlots?.length) {
- slots.push(nextEpochLeaderStartSlots[0]);
- }
-
- return getAllLeaderSlots(slots);
- }, //, nextLeaderSlot),
- [leaderStartSlots, nextEpochLeaderStartSlots],
- );
-
- const liveSlot = isCurrentlyLeader ? currentSlot : nextLeaderSlot;
- const { overflowIndex, maxIndex } = useMemo(() => {
- if (!allLeaderSlots?.length)
- return { maxIndex: undefined, overflowIndex: 0 };
- if (!viewableSlotCount) return { maxIndex: undefined, overflowIndex: 0 };
-
- let maxIndex = allLeaderSlots.length - 1 - viewableSlotCount - 1;
- let overflowIndex = maxIndex;
- if (maxIndex < 0) {
- maxIndex = 0;
- }
-
- while (
- allLeaderSlots[overflowIndex + viewableSlotCount - 1] !== undefined &&
- allLeaderSlots[overflowIndex + viewableSlotCount - 1].slot >
- (liveSlot ?? 0)
- ) {
- if (maxIndex > 0) {
- maxIndex--;
- }
- overflowIndex--;
- }
-
- if (overflowIndex > 0) {
- overflowIndex = 0;
- }
-
- return { maxIndex, overflowIndex };
- }, [allLeaderSlots, liveSlot, viewableSlotCount]);
-
- // maxIndex will get recalc'd on screen size changes which requires an index change
- if (
- indexOverride !== undefined &&
- maxIndex !== undefined &&
- indexOverride > maxIndex
- ) {
- setIndexOverride(undefined);
- }
-
- const index =
- (indexOverride === undefined && maxIndex !== undefined
- ? maxIndex
- : indexOverride) ?? 0;
-
- const isLiveSelectorVisible =
- indexOverride === undefined || index === maxIndex;
-
- const settingSlotOverrideRef = useRef();
- const setSlotOverrideTimeout = () => {
- if (settingSlotOverrideRef.current) {
- clearTimeout(settingSlotOverrideRef.current);
- }
- settingSlotOverrideRef.current = setTimeout(
- () => (settingSlotOverrideRef.current = undefined),
- 250,
- );
- };
-
- // syncs slot selector to epoch slider changes
- useEffect(() => {
- if (!allLeaderSlots) return;
- if (settingSlotOverrideRef.current) return;
-
- if (slotOverride) {
- const slotDiffs = allLeaderSlots.map(({ slot }) =>
- Math.abs(slot - slotOverride),
- );
- const minDiff = Math.min(...slotDiffs);
- const newIndex = getValidIndex({
- index: slotDiffs.indexOf(minDiff),
- maxIndex,
- });
-
- if (newIndex === maxIndex) {
- setIndexOverride(undefined);
- } else {
- setIndexOverride(newIndex);
- }
- } else {
- setIndexOverride(undefined);
- }
- }, [slotOverride, allLeaderSlots, maxIndex]);
-
- const viewableSlots = allLeaderSlots?.slice(
- index,
- index + viewableSlotCount + overflowIndex,
- );
-
- const selected =
- selectedSlot !== undefined
- ? `${selectedSlot}`
- : isLiveSelectorVisible && viewableSlots?.length
- ? `${viewableSlots?.[viewableSlots.length - 1].slot}`
- : undefined;
-
- const isPrevDisabled = indexOverride !== undefined && indexOverride <= 0;
- const isNextDisabled = isLiveSelectorVisible;
-
- return (
- <>
-
- {
- if (isPrevDisabled) return;
- setIndexOverride((prev) => {
- prev = prev ?? index;
- const newIndex = prev - count;
- const newValidIndex = getValidIndex({
- index: newIndex,
- maxIndex,
- });
- setSlotOverrideTimeout();
- setSlotOverride(allLeaderSlots?.[newValidIndex + count]?.slot);
- return newValidIndex;
- });
- }}
- disabled={isPrevDisabled}
- />
- {
- value = value.trim();
- if (
- isLiveSelectorVisible &&
- value === `${viewableSlots?.[viewableSlots.length - 1].slot}`
- ) {
- setSelectedSlot(undefined);
- setIndexOverride(undefined);
- setSlotOverrideTimeout();
- setSlotOverride(undefined);
- } else {
- setSelectedSlot(isNaN(Number(value)) ? undefined : Number(value));
- setIndexOverride(index);
- setSlotOverrideTimeout();
- setSlotOverride(allLeaderSlots?.[index]?.slot);
- }
- }}
- >
- {viewableSlots?.map(({ slot, order }, i) => (
-
- ))}
-
- {
- if (isNextDisabled) return;
-
- setIndexOverride((prev) => {
- if (prev === undefined) return prev;
-
- const newIndex = prev + count;
- const newValidIndex = getValidIndex({
- index: newIndex,
- maxIndex,
- });
- setSlotOverrideTimeout();
-
- if (newValidIndex === maxIndex) {
- setSlotOverride(undefined);
- return undefined;
- }
-
- setSlotOverride(allLeaderSlots?.[newValidIndex + count]?.slot);
- return newValidIndex;
- });
- }}
- disabled={isNextDisabled}
- />
-
-
-
- );
-}
-
-interface RadioItemProps {
- slot: number;
- order: number;
- isLive?: boolean;
-}
-
-function RadioItem({ slot, order, isLive }: RadioItemProps) {
- const isSkipped =
- useAtomValue(useMemo(() => getIsSkippedAtom(slot), [slot])) && !isLive;
-
- return (
- <>
- {order === 1 && }
-
-
- {isLive ? "next" : slot}
- {/* {slot} */}
- {isLive && ⬤
}
- {isSkipped && (
-
- 
-
- )}
-
-
-
- );
-}
-
-interface SetSlotWidthProps {
- setSlotWidth: (width: number) => void;
-}
-
-function SetSlotWidth({ setSlotWidth }: SetSlotWidthProps) {
- const epoch = useAtomValue(epochAtom);
- const slot = epoch?.end_slot ?? 1_000_000;
-
- const [ref, { width }] = useMeasure();
-
- useEffect(() => {
- setSlotWidth(Math.max(Math.trunc(width + 12), 30));
- }, [setSlotWidth, width]);
-
- return (
-
-
-
-
-
- );
-}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx
index 1dedfcac..b1fcfe50 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx
@@ -9,24 +9,19 @@ import AutoSizer from "react-virtualized-auto-sizer";
import type { SlotTransactions } from "../../../../api/types";
import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "./chartTooltipAtoms";
import { timeScaleDragPlugin } from "./scaleDragPlugin";
-import { getChartData } from "./chartUtils";
+import { getChartData, getUplotId } from "./chartUtils";
import { addPrevSeries, barCountAtom, chartFiltersAtom } from "./atoms";
import { safeDivide } from "../../../../mathUtils";
import { txnBarsTooltipPlugin } from "./txnBarsTooltipPlugin";
import { wheelZoomPlugin } from "../../../../uplotReact/wheelZoomPlugin";
-import { txnBarsUplotIdPrefix } from "./consts";
import { syncXScalePlugin } from "../../../../uplotReact/syncXScalePlugin";
import { leftAxisSizeAtom, rightAxisSizeAtom } from "../ComputeUnitsCard/atoms";
import { touchPlugin } from "../../../../uplotReact/touchPlugin";
-import { chartAxisColor } from "../../../../colors";
+import { chartAxisColor, chartGridStrokeColor } from "../../../../colors";
/** Buffer of the canvas past the axes of the chart to prevent the first and last tick labels from being cut off */
const xBuffer = 20;
-function getUplotId(bankIdx: number) {
- return `${txnBarsUplotIdPrefix}${bankIdx}`;
-}
-
interface BarsChartProps {
bankIdx: number;
transactions: SlotTransactions;
@@ -81,8 +76,6 @@ export default function BarsChart({
[bankIdx, maxTs, transactions],
);
- const chartId = getUplotId(bankIdx);
-
const options = useMemo(() => {
if (!chartData?.length) return;
@@ -102,7 +95,7 @@ export default function BarsChart({
},
size: isFirstOrLastChart ? 40 : 0,
space: 100,
- grid: { stroke: "rgba(250, 250, 250, 0.05)" },
+ grid: { stroke: chartGridStrokeColor },
border: {
show: true,
width: 1 / devicePixelRatio,
@@ -181,7 +174,7 @@ export default function BarsChart({
return (
<>
-
+
ReactNode;
+ signatureLower: string;
+ signature: string;
+}
+
+interface SimpleCommandOption extends BaseOption {
+ label: string;
+}
+
+interface IpCommandOption extends SimpleCommandOption {
+ getLabelEl: (searchValue: string) => ReactNode;
+ queryValue: string;
+}
+
+interface SearchCommandProps {
+ transactions: SlotTransactions;
+ size?: "sm" | "lg";
+}
+
+export default function SearchCommand({
+ transactions,
+ size = "lg",
+}: SearchCommandProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+ const [dInputValue, setDInputValue] = useDebounce(inputValue, 500);
+ const [searchIdx, setSearchIdx] = useState<{
+ current: number;
+ total: number;
+ txnIdxs: number[];
+ }>();
+ const [searchMode, setSearchMode] = useState(SearchMode.TxnSignature);
+ const filteredTxnIdx = useAtomValue(filteredTxnIdxAtom);
+ const peers = useAtomValue(peersAtom);
+ const containerEl = useAtomValue(containerElAtom);
+ const uplotAction = useSetAtom(txnBarsUplotActionAtom);
+
+ const commandRef = useRef(null);
+ const commandListRef = useRef(null);
+ const focusedChartElRef = useRef();
+
+ // For resetting focus when user starts typing in input
+ const resetChartElFocus = useCallback(() => {
+ if (focusedChartElRef.current) {
+ focusedChartElRef.current.style.border = "";
+ focusedChartElRef.current = undefined;
+ }
+ highlightTxnIdx(undefined);
+ setSearchIdx(undefined);
+ }, []);
+
+ const resetFocus = useCallback(() => {
+ resetChartElFocus();
+ setInputValue("");
+ setDInputValue("");
+ uplotAction((u, _bankIdx) => {
+ u.setScale(xScaleKey, {
+ min: u.data[0][0],
+ max: u.data[0][u.data[0].length - 1],
+ });
+ });
+ }, [resetChartElFocus, setDInputValue, uplotAction]);
+
+ useEffect(() => {
+ if (
+ filteredTxnIdx &&
+ searchIdx?.txnIdxs.some((txnIdx) => !filteredTxnIdx.has(txnIdx))
+ ) {
+ resetFocus();
+ }
+ }, [filteredTxnIdx, resetFocus, searchIdx?.txnIdxs]);
+
+ useEffect(() => {
+ if (searchIdx === undefined && rankModes.includes(searchMode)) {
+ setSearchMode(dropdownModes[0]);
+ }
+ }, [searchIdx, searchMode]);
+
+ const getOptionMap = useCallback(
+ (
+ values: T[],
+ getOption: (value: T, txnIdxs: number[]) => Option,
+ skipTxn?: (value: T) => boolean,
+ ) => {
+ return values.reduce(
+ (optionMap, value, txnIdx) => {
+ if (filteredTxnIdx && !filteredTxnIdx.has(txnIdx)) return optionMap;
+ if (skipTxn?.(value)) return optionMap;
+
+ const txnIdxs = optionMap[value]?.txnIdxs ?? [];
+ txnIdxs.push(txnIdx);
+ const option = getOption(value, txnIdxs);
+ optionMap[value] = option;
+ return optionMap;
+ },
+ {} as Record,
+ );
+ },
+ [filteredTxnIdx],
+ );
+
+ const signatureOptionMap = useMemo(
+ () =>
+ getOptionMap(transactions.txn_signature, (signature, txnIdxs) => {
+ const signatureLower = signature.toLowerCase();
+ return {
+ getLabelEl: getSignatureLabelFn(
+ signature,
+ signatureLower,
+ txnIdxs.length,
+ ),
+ txnIdxs,
+ signatureLower,
+ signature,
+ };
+ }),
+ [getOptionMap, transactions.txn_signature],
+ );
+
+ const errorOptionMap = useMemo(
+ () =>
+ getOptionMap(
+ transactions.txn_error_code,
+ (errorCode, txnIdxs) => {
+ return {
+ txnIdxs,
+ label: txnErrorCodeMap[errorCode],
+ };
+ },
+ (errorCode) => errorCode === 0,
+ ),
+ [getOptionMap, transactions.txn_error_code],
+ );
+
+ const ipOptionMap = useMemo(() => {
+ const ipToName = Object.values(peers).reduce((map, peer) => {
+ if (!peer.gossip) return map;
+ if (!peer.info?.name) return map;
+
+ const ips = Object.values(peer.gossip.sockets);
+
+ for (const ip of ips) {
+ map.set(ip.split(":")[0], peer.info?.name);
+ }
+
+ return map;
+ }, new Map());
+
+ return getOptionMap(
+ transactions.txn_source_ipv4,
+ (ip, txnIdxs) => {
+ return {
+ getLabelEl: getIpLabelFn(ip, txnIdxs.length, ipToName.get(ip)),
+ txnIdxs,
+ label: ip,
+ queryValue: `${ip}${(ipToName.get(ip) ?? "")?.toLowerCase()}`,
+ };
+ },
+ );
+ }, [getOptionMap, peers, transactions.txn_source_ipv4]);
+
+ const tpuOptionMap = useMemo(
+ () =>
+ getOptionMap(
+ transactions.txn_source_tpu,
+ (tpu, txnIdxs) => {
+ return {
+ txnIdxs,
+ label: tpu,
+ };
+ },
+ ),
+ [getOptionMap, transactions.txn_source_tpu],
+ );
+
+ const incomeRankings = useMemo(() => {
+ const incomes = transactions.txn_transaction_fee.reduce<
+ { txnIdx: number; income: number }[]
+ >((options, _, txnIdx) => {
+ if (filteredTxnIdx && !filteredTxnIdx.has(txnIdx)) return options;
+
+ options.push({ txnIdx, income: getIncome(transactions, txnIdx) });
+ return options;
+ }, []);
+
+ return incomes.sort(
+ ({ income: incomeA }, { income: incomeB }) => incomeB - incomeA,
+ );
+ }, [filteredTxnIdx, transactions]);
+
+ const focusTxn = useCallback(
+ (txnIdx: number) => {
+ const bankIdx = transactions.txn_bank_idx[txnIdx];
+
+ const chartEl = document.getElementById(getUplotId(bankIdx));
+ const chartBorderEl = chartEl?.getElementsByClassName("u-over")?.[0] as
+ | HTMLElement
+ | undefined;
+ const canvasEl = chartEl?.getElementsByTagName("canvas")?.[0] as
+ | HTMLElement
+ | undefined;
+ if (chartEl && chartBorderEl && canvasEl) {
+ if (!isElementFullyInView(canvasEl)) {
+ canvasEl.scrollIntoView({ block: "nearest" });
+ // setTimeout(() => {
+ const canvasRect = canvasEl.getBoundingClientRect();
+ const headerRect = document
+ .getElementById("transaction-bars-controls")
+ ?.getBoundingClientRect();
+ // Check if the element is hidden behind the sticky header
+ if (headerRect && canvasRect.top < headerRect.bottom) {
+ document.getElementById("scroll-container")?.scrollBy({
+ top: -headerRect.bottom - canvasRect.top,
+ });
+ }
+ }
+
+ if (focusedChartElRef.current) {
+ focusedChartElRef.current.style.border = "";
+ }
+ chartBorderEl.style.border = "1px solid #1d6fba";
+ focusedChartElRef.current = chartBorderEl;
+ }
+
+ uplotAction((u, _bankIdx) => {
+ if (bankIdx !== _bankIdx) return;
+
+ const scale = u.scales[xScaleKey];
+ const scaleMin = scale.min ?? -Infinity;
+ const scaleMax = scale.max ?? Infinity;
+ const scaleTotal = scaleMax - scaleMin;
+
+ const zeroLength =
+ transactions.txn_preload_end_timestamps_nanos[txnIdx] ===
+ transactions.txn_end_timestamps_nanos[txnIdx];
+ const startTs = Number(
+ (transactions.txn_from_bundle[txnIdx] && !zeroLength
+ ? transactions.txn_preload_end_timestamps_nanos[txnIdx]
+ : transactions.txn_mb_start_timestamps_nanos[txnIdx]) -
+ transactions.start_timestamp_nanos,
+ );
+ const endTs = Number(
+ (transactions.txn_from_bundle[txnIdx] && !zeroLength
+ ? transactions.txn_end_timestamps_nanos[txnIdx]
+ : transactions.txn_mb_end_timestamps_nanos[txnIdx]) -
+ transactions.start_timestamp_nanos,
+ );
+ const desiredScaleTotal =
+ (endTs - startTs) * desiredScaleTotalMultiplier;
+
+ const notWithinScale = endTs < scaleMin || startTs > scaleMax;
+
+ u.batch(() => {
+ if (notWithinScale || scaleTotal > desiredScaleTotalMultiplier) {
+ let min = Math.max(u.data[0][0], startTs - desiredScaleTotal / 2);
+ const max = min + desiredScaleTotal;
+ if (max > u.data[0][u.data[0].length - 1]) {
+ min = max - desiredScaleTotal;
+ }
+
+ u.setScale(xScaleKey, { min, max });
+ }
+
+ highlightTxnIdx(txnIdx);
+ });
+ });
+ },
+ [transactions, uplotAction],
+ );
+
+ const handleItemSelect = useCallback(
+ (inputValue: string, optionValue?: number | string) => {
+ setInputValue(inputValue);
+ setDInputValue(inputValue);
+ setIsOpen(false);
+
+ switch (searchMode) {
+ case SearchMode.TxnSignature: {
+ const txnIdxs = signatureOptionMap[inputValue].txnIdxs;
+ const searchIdx = { current: 0, total: txnIdxs.length - 1, txnIdxs };
+ setSearchIdx(searchIdx);
+
+ const txnIdx = txnIdxs[searchIdx.current];
+ focusTxn(txnIdx);
+ break;
+ }
+ case SearchMode.Error: {
+ if (optionValue !== undefined) {
+ const txnIdxs = errorOptionMap[Number(optionValue)].txnIdxs;
+ const searchIdx = {
+ current: 0,
+ total: txnIdxs.length - 1,
+ txnIdxs,
+ };
+ setSearchIdx(searchIdx);
+
+ const txnIdx = txnIdxs[searchIdx.current];
+ focusTxn(txnIdx);
+ }
+ break;
+ }
+ case SearchMode.Ip: {
+ const option = ipOptionMap[inputValue];
+ if (option) {
+ const txnIdxs = option.txnIdxs;
+ const searchIdx = {
+ current: 0,
+ total: txnIdxs.length - 1,
+ txnIdxs,
+ };
+ setSearchIdx(searchIdx);
+
+ const txnIdx = txnIdxs[searchIdx.current];
+ focusTxn(txnIdx);
+ }
+ break;
+ }
+ case SearchMode.Tpu: {
+ if (optionValue !== undefined) {
+ const txnIdxs = tpuOptionMap[optionValue].txnIdxs;
+ const searchIdx = {
+ current: 0,
+ total: txnIdxs.length - 1,
+ txnIdxs,
+ };
+ setSearchIdx(searchIdx);
+
+ const txnIdx = txnIdxs[searchIdx.current];
+ focusTxn(txnIdx);
+ }
+ break;
+ }
+ // No selectable items for income
+ case SearchMode.Income: {
+ break;
+ }
+ }
+ },
+ [
+ setDInputValue,
+ searchMode,
+ signatureOptionMap,
+ focusTxn,
+ errorOptionMap,
+ ipOptionMap,
+ tpuOptionMap,
+ ],
+ );
+
+ const focusNextTxn = (dir: "prev" | "next") => () => {
+ setSearchIdx((prev) => {
+ if (!prev) return undefined;
+
+ let { current, total, txnIdxs } = prev;
+ if (dir === "prev") {
+ current--;
+ } else if (dir === "next") {
+ current++;
+ }
+
+ if (current > total) current = 0;
+ if (current < 0) current = total;
+
+ const txnIdx = txnIdxs[current];
+ focusTxn(txnIdx);
+
+ return { current, total, txnIdxs };
+ });
+ };
+
+ const handleDropdownSelect = (mode: SearchMode) => () => {
+ setSearchMode(mode);
+ resetFocus();
+
+ switch (mode) {
+ case SearchMode.TxnSignature:
+ case SearchMode.Ip:
+ case SearchMode.Error:
+ case SearchMode.Tpu: {
+ pendingPopoverFocusRef.current = true;
+ setIsOpen(true);
+ setTimeout(() => {
+ inputRef.current?.focus();
+ }, 250);
+ break;
+ }
+ case SearchMode.Income: {
+ const txnIdxs = incomeRankings.map(({ txnIdx }) => txnIdx);
+ setSearchIdx({
+ current: 0,
+ total: txnIdxs.length,
+ txnIdxs,
+ });
+
+ const txnIdx = txnIdxs[0];
+ focusTxn(txnIdx);
+ break;
+ }
+ }
+ };
+
+ const isQueryMode = queryModes.includes(searchMode);
+ const isLoading = isQueryMode && inputValue !== dInputValue;
+ const showList =
+ (isOpen && !isQueryMode) ||
+ (dInputValue.length >= searchLengthThreshold && !isLoading);
+ const showSearchArrows = searchIdx && searchIdx.total > 0;
+ const showResetButton = inputValue || rankModes.includes(searchMode);
+ const isInputDisabled = !queryModes.includes(searchMode);
+ const isInputDisabledRef = useRef(isInputDisabled);
+ isInputDisabledRef.current = isInputDisabled;
+
+ const inputRef = useRef(null);
+ const pendingPopoverFocusRef = useRef(false);
+
+ return (
+
+
+
+
+
+ e.preventDefault()}>
+ {dropdownModes.map((mode) => {
+ return (
+
+ {mode}
+
+ );
+ })}
+
+
+
+ {
+ setIsOpen(open);
+ }}
+ >
+
+
+ {
+ setIsOpen(true);
+ }}
+ value={inputValue}
+ onValueChange={(value) => {
+ setInputValue(value);
+ resetChartElFocus();
+ // To re-open dialog after selection if input stays focused
+ setIsOpen(true);
+ }}
+ readOnly={isInputDisabled}
+ ref={inputRef}
+ />
+ {(showSearchArrows || showResetButton) && (
+
+ {showSearchArrows && (
+ <>
+
+ {searchIdx.current + 1} of
+ {searchIdx.total + 1}
+
+ {
+ if (e.key === "Enter") {
+ focusNextTxn("prev")();
+ }
+ }}
+ >
+
+
+ {
+ if (e.key === "Enter") {
+ focusNextTxn("next")();
+ }
+ }}
+ >
+
+
+
+ )}
+ {showResetButton && (
+ {
+ if (e.key === "Enter") {
+ resetFocus();
+ }
+ }}
+ >
+
+
+ )}
+
+ )}
+
+
+
+
+ {
+ // Prevent stealing focus unless explicitly flagged
+ if (pendingPopoverFocusRef.current) {
+ setTimeout(() => {
+ pendingPopoverFocusRef.current = false;
+ }, 250);
+ } else {
+ e.preventDefault();
+ }
+ }}
+ onInteractOutside={(e) => {
+ // Don't close if clicking on the input
+ if (
+ e.target === inputRef.current ||
+ pendingPopoverFocusRef.current
+ ) {
+ e.preventDefault();
+ }
+ }}
+ // avoid focus styling
+ style={{ outline: "unset" }}
+ >
+
+ {
+ // Check inputValue to hide loading state when input is empty
+ inputValue.length > 1 && isLoading && (
+
+ Loading...
+
+ )
+ }
+ {showList && (
+ <>
+ {searchMode === SearchMode.TxnSignature && (
+
+ )}
+ {searchMode === SearchMode.Error && (
+
+ )}
+ {searchMode === SearchMode.Ip && (
+
+ )}
+ {searchMode === SearchMode.Tpu && (
+
+ )}
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+interface CommandItemProps {
+ onSelect: (inputValue: string, optionValue?: string | number) => void;
+}
+
+const TxnSigCommandItems = memo(function CommandItems({
+ optionMap,
+ inputValue,
+ onSelect,
+}: CommandItemProps & {
+ inputValue: string;
+ optionMap: Record;
+}) {
+ const options = useMemo(() => Object.entries(optionMap), [optionMap]);
+ const searchValue = inputValue.toLowerCase();
+
+ function filterOption([, { signatureLower }]: [
+ string,
+ SignatureCommandOption,
+ ]) {
+ return signatureLower.includes(searchValue);
+ }
+
+ function getRank([, { signatureLower }]: [string, SignatureCommandOption]) {
+ if (signatureLower === searchValue) return 3;
+ if (
+ signatureLower.startsWith(searchValue) ||
+ signatureLower.endsWith(searchValue)
+ )
+ return 2;
+ if (signatureLower.includes(searchValue)) return 1;
+ return 0;
+ }
+
+ function sortOption(
+ a: [string, SignatureCommandOption],
+ b: [string, SignatureCommandOption],
+ ) {
+ return getRank(b) - getRank(a);
+ }
+
+ return (
+ <>
+ {!!options.length && (
+
+ {options
+ .filter(filterOption)
+ .sort(sortOption)
+ .map(([, { getLabelEl, signatureLower, signature }], i) => {
+ if (i > 100) return;
+ return (
+ {
+ onSelect(signature);
+ }}
+ >
+ {getLabelEl(inputValue)}
+
+ );
+ })}
+
+ )}
+ No results found.
+
+ );
+});
+
+const IpCommandItems = memo(function CommandItems({
+ optionMap,
+ inputValue,
+ onSelect,
+}: CommandItemProps & {
+ inputValue: string;
+ optionMap: Record;
+}) {
+ const options = useMemo(() => Object.entries(optionMap), [optionMap]);
+ const searchValue = inputValue.trim().toLowerCase();
+
+ function filterOption([, { label: ip, queryValue }]: [
+ string,
+ IpCommandOption,
+ ]) {
+ return !!findIpMatch(ip, searchValue) || queryValue.includes(searchValue);
+ }
+
+ function getRank([, { label: ip, txnIdxs }]: [string, IpCommandOption]) {
+ if (ip === searchValue) return 100;
+ if (txnIdxs.length > 1) return 3 + txnIdxs.length;
+ if (ip.startsWith(searchValue) || ip.endsWith(searchValue)) return 2;
+ if (ip.includes(searchValue)) return 1;
+ return 0;
+ }
+
+ function sortOption(
+ a: [string, IpCommandOption],
+ b: [string, IpCommandOption],
+ ) {
+ return getRank(b) - getRank(a);
+ }
+
+ return (
+ <>
+ {!!options.length && (
+
+ {options
+ .filter(filterOption)
+ .sort(sortOption)
+ .map(([, { getLabelEl, label: ip }], i) => {
+ if (i > 100) return;
+ return (
+ {
+ onSelect(ip);
+ }}
+ >
+ {getLabelEl(inputValue)}
+
+ );
+ })}
+
+ )}
+ No results found.
+
+ );
+});
+
+const SimpleCommandItems = memo(function CommandItems({
+ onSelect,
+ optionMap,
+}: CommandItemProps & {
+ optionMap: Record;
+}) {
+ const options = useMemo(() => Object.entries(optionMap), [optionMap]);
+
+ return options.map(([code, { label: errorLabel, txnIdxs }], i) => {
+ return (
+ {
+ onSelect(errorLabel, code);
+ }}
+ >
+
+ {errorLabel} ({txnIdxs.length})
+
+
+ );
+ });
+});
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleControl.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleControl.tsx
new file mode 100644
index 00000000..4a2e580b
--- /dev/null
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleControl.tsx
@@ -0,0 +1,31 @@
+import { Flex, Switch, Text } from "@radix-ui/themes";
+import styles from "./toggleControl.module.css";
+
+interface ToggleControlProps {
+ checked: boolean;
+ onCheckedChange: (checked: boolean) => void;
+ label: string;
+ color?: string;
+}
+
+export default function ToggleControl({
+ checked,
+ onCheckedChange,
+ label,
+ color,
+}: ToggleControlProps) {
+ return (
+
+
+
+
+ {label}
+
+
+
+ );
+}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ToggleGroupControl.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleGroupControl.tsx
similarity index 100%
rename from src/features/Overview/SlotPerformance/TransactionBarsCard/ToggleGroupControl.tsx
rename to src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleGroupControl.tsx
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartControl.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/chartControl.module.css
similarity index 96%
rename from src/features/Overview/SlotPerformance/TransactionBarsCard/chartControl.module.css
rename to src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/chartControl.module.css
index 074886b3..6e47ab5a 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartControl.module.css
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/chartControl.module.css
@@ -73,3 +73,9 @@
color: #ffffff;
font-size: 12px;
}
+
+.minimize-button {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx
similarity index 82%
rename from src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls.tsx
rename to src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx
index 75a5e4a4..fb12cbb7 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls.tsx
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx
@@ -1,6 +1,19 @@
-import { Flex, Select, Separator, Slider, Text } from "@radix-ui/themes";
-import { focusedErrorCode, highlightErrorCode } from "./txnBarsPlugin";
-import type { SlotTransactions } from "../../../../api/types";
+import {
+ Flex,
+ IconButton,
+ Select,
+ Separator,
+ Slider,
+ Text,
+} from "@radix-ui/themes";
+import { CaretDownIcon, CaretUpIcon } from "@radix-ui/react-icons";
+import {
+ focusedErrorCode,
+ focusedTpu,
+ highlightErrorCode,
+ highlightTpu,
+} from "../txnBarsPlugin";
+import type { SlotTransactions } from "../../../../../api/types";
import { useAtomValue, useSetAtom } from "jotai";
import {
addCuRequestedSeriesAtom,
@@ -19,32 +32,36 @@ import {
barCountAtom,
selectedBankAtom,
filterArrivalDataAtom,
-} from "./atoms";
+ filteredTxnIdxAtom,
+} from "../atoms";
import { groupBy, max } from "lodash";
import type { CSSProperties } from "react";
import { useEffect, useMemo, useState } from "react";
import ToggleGroupControl from "./ToggleGroupControl";
import { useMeasure, useMedia, useUnmount } from "react-use";
-import { errorCodeMap, FilterEnum, TxnState } from "./consts";
-import ToggleControl from "../../../../components/ToggleControl";
-import toggleControlStyles from "../../../../components/toggleControl.module.css";
+import { FilterEnum, TxnState } from "../consts";
+import ToggleControl from "./ToggleControl";
+import toggleControlStyles from "./toggleControl.module.css";
import styles from "./chartControl.module.css";
-import { txnBarsUplotActionAtom } from "./uplotAtoms";
+import { txnBarsUplotActionAtom } from "../uplotAtoms";
import {
chartBufferMs,
getMaxTsWithBuffer,
-} from "../../../../transactionUtils";
-import { xScaleKey } from "../ComputeUnitsCard/consts";
-import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "./chartTooltipAtoms";
+} from "../../../../../transactionUtils";
+import { xScaleKey } from "../../ComputeUnitsCard/consts";
+import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "../chartTooltipAtoms";
+import SearchCommand from "./SearchCommand";
import {
- computeUnitsColor,
+ successToggleColor,
errorToggleColor,
feesColor,
- successToggleColor,
tipsColor,
+ computeUnitsColor,
requestedToggleControlColor,
incomePerCuToggleControlColor,
-} from "../../../../colors";
+} from "../../../../../colors";
+import { uplotActionAtom } from "../../../../../uplotReact/uplotAtoms";
+import { txnErrorCodeMap } from "../../../../../consts";
import { useThrottledCallback } from "use-debounce";
interface ChartControlsProps {
@@ -53,6 +70,24 @@ interface ChartControlsProps {
}
export default function ChartControls(props: ChartControlsProps) {
+ const [isMinimized, setIsMinimized] = useState(false);
+
+ return (
+ <>
+
+ setIsMinimized((prev) => !prev)}
+ >
+ {isMinimized ? : }
+
+
+ {!isMinimized && }
+
+ );
+}
+
+function ChartControlsContent(props: ChartControlsProps) {
const { transactions, maxTs } = props;
const setChartFilters = useSetAtom(chartFiltersAtom);
const setBarCount = useSetAtom(barCountAtom);
@@ -90,6 +125,10 @@ export default function ChartControls(props: ChartControlsProps) {
+
+
+
+
);
}
@@ -103,7 +142,11 @@ function MobileViewChartControls({ transactions, maxTs }: ChartControlsProps) {
-
+
+
+
);
}
@@ -153,31 +196,20 @@ function HighlightErrorControl({
transactions,
isDisabled,
}: HighlightErrorControlProps) {
- const chartFilters = useAtomValue(chartFiltersAtom);
- const uplotAction = useSetAtom(txnBarsUplotActionAtom);
+ const uplotAction = useSetAtom(uplotActionAtom);
+ const filteredTxnIdx = useAtomValue(filteredTxnIdxAtom);
const [value, setValue] = useState("0");
const errorCodeCount = useMemo(() => {
- if (Object.keys(chartFilters).length) {
- const filteredTxnIds = new Set();
- uplotAction((u) => {
- if (!u.data[1]?.length) return;
-
- for (let i = 0; i < u.data[1].length; i++) {
- const txnId = u.data[1][i];
- if (txnId != null) {
- filteredTxnIds.add(txnId);
- }
- }
- });
+ if (filteredTxnIdx?.size) {
const filteredErrorCodes = transactions.txn_error_code.filter((_, i) =>
- filteredTxnIds.has(i),
+ filteredTxnIdx.has(i),
);
return groupBy(filteredErrorCodes);
}
return groupBy(transactions.txn_error_code);
- }, [chartFilters, transactions, uplotAction]);
+ }, [filteredTxnIdx, transactions.txn_error_code]);
useEffect(() => {
if (!errorCodeCount[focusedErrorCode]) {
@@ -209,7 +241,7 @@ function HighlightErrorControl({
if (err === "0") return null;
return (
- {errorCodeMap[err]} ({errorCodeCount[err].length})
+ {txnErrorCodeMap[err]} ({errorCodeCount[err].length})
);
})}
@@ -219,6 +251,64 @@ function HighlightErrorControl({
);
}
+const noneValue = "none";
+
+function TpuControl({ transactions, maxTs }: ToggleGroupControlProps) {
+ const uplotAction = useSetAtom(uplotActionAtom);
+ const filteredTxnIdx = useAtomValue(filteredTxnIdxAtom);
+ const [value, setValue] = useState(noneValue);
+
+ const tpuCount = useMemo(() => {
+ if (filteredTxnIdx?.size) {
+ const filteredTpu = transactions.txn_source_tpu.filter((_, i) =>
+ filteredTxnIdx.has(i),
+ );
+ return groupBy(filteredTpu);
+ }
+
+ return groupBy(transactions.txn_source_tpu);
+ }, [filteredTxnIdx, transactions.txn_source_tpu]);
+
+ useEffect(() => {
+ if (!tpuCount[focusedTpu]) {
+ setValue("");
+ highlightTpu("");
+ }
+ }, [tpuCount]);
+
+ return (
+
+ TPU
+ {
+ setValue(value);
+ highlightTpu(value === noneValue ? "" : value);
+ uplotAction((u) => u.redraw());
+ }}
+ size="1"
+ value={value}
+ >
+
+
+
+ None
+ {Object.keys(tpuCount).map((tpu) => {
+ return (
+
+ {tpu} ({tpuCount[tpu].length})
+
+ );
+ })}
+
+
+
+
+ );
+}
+
function BundleControl({
transactions,
maxTs,
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommand.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommand.module.css
new file mode 100644
index 00000000..32f5e855
--- /dev/null
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommand.module.css
@@ -0,0 +1,153 @@
+.dropdownButton {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.input-container {
+ box-sizing: border-box;
+ --text-field-height: var(--space-6);
+ --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
+ --text-field-border-radius: max(var(--radius-2), var(--radius-full));
+ --text-field-native-icon-size: var(--space-4);
+ height: var(--text-field-height);
+ padding: var(--text-field-border-width);
+ border-radius: 0 var(--text-field-border-radius)
+ var(--text-field-border-radius) 0;
+ font-size: var(--font-size-2);
+ letter-spacing: var(--letter-spacing-2);
+ width: 240px;
+
+ &.sm {
+ width: 180px;
+ }
+
+ button {
+ box-sizing: content-box;
+ --margin-left-override: 0px;
+ --margin-right-override: 0px;
+ }
+
+ @supports selector(:has(*)) {
+ &:has(input:focus) {
+ outline: 2px solid var(--text-field-focus-color);
+ outline-offset: -1px;
+ }
+ }
+
+ @supports not selector(:has(*)) {
+ &:where(:focus-within) {
+ outline: 2px solid var(--text-field-focus-color);
+ outline-offset: -1px;
+ }
+ }
+
+ [cmdk-input] {
+ flex: 1;
+ /* Clip text to the border radius of the Root */
+ border-radius: calc(
+ var(--text-field-border-radius) - var(--text-field-border-width)
+ );
+
+ border: none;
+ outline: none;
+ width: 100%;
+ padding: 0 var(--space-2);
+ font-size: var(--font-size-2);
+ letter-spacing: var(--letter-spacing-2);
+ background: rgba(0, 0, 0, 0);
+ border-radius: 0;
+ caret-color: #6e5ed2;
+ margin: 0;
+
+ &::placeholder {
+ color: var(--gray-a10);
+ }
+ }
+}
+
+.content {
+ background: var(--gray-4);
+ width: var(--radix-popover-trigger-width);
+ max-height: 400px;
+
+ &:has(> [cmdk-list] > [cmdk-list-sizer]:not(:empty)) {
+ padding-bottom: var(--space-1);
+ }
+
+ [cmdk-list] {
+ height: min(300px, var(--cmdk-list-height));
+ max-height: 400px;
+ overflow: auto;
+ overscroll-behavior: contain;
+ }
+
+ [cmdk-group-heading] {
+ user-select: none;
+ font-size: 14px;
+ color: var(--slate-11);
+ padding: 0 8px;
+ display: flex;
+ align-items: center;
+ padding: var(--space-1) var(--space-3);
+ }
+
+ [cmdk-item] {
+ span {
+ color: var(--gray-12);
+ font-size: var(--font-size-2);
+ text-wrap: nowrap;
+
+ &.faded {
+ color: #84858a;
+ .highlight {
+ color: var(--gray-12);
+ }
+ }
+ }
+
+ .ellipsis {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ [cmdk-empty],
+ [cmdk-loading] {
+ color: rgba(241, 247, 254, 0.71);
+ padding-bottom: 0 !important;
+ }
+
+ [cmdk-item],
+ [cmdk-empty],
+ [cmdk-loading] {
+ content-visibility: auto;
+
+ cursor: pointer;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: var(--space-1) var(--space-3);
+ border-radius: 4px;
+ user-select: none;
+ position: relative;
+
+ &[data-selected="true"] {
+ background: var(--teal-5);
+ }
+
+ &[data-disabled="true"] {
+ color: var(--gray-8);
+ cursor: not-allowed;
+ }
+
+ &:active {
+ background: var(--gray-4);
+ }
+
+ & + [cmdk-item] {
+ margin-top: 4px;
+ }
+ }
+}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommandUtils.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommandUtils.tsx
new file mode 100644
index 00000000..a13162a5
--- /dev/null
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/searchCommandUtils.tsx
@@ -0,0 +1,149 @@
+import styles from "./searchCommand.module.css";
+import { Flex, Text } from "@radix-ui/themes";
+import clsx from "clsx";
+
+export const desiredScaleTotalMultiplier = 30;
+// How many characters to wait before showing search results
+export const searchLengthThreshold = 0;
+// How many characters to show at the start and end of the txn signature
+export const startEndCharCount = 10;
+// How much of a buffer between search index and the start/end of the txn signature
+export const ellipsisCount = 3;
+
+export function getSignatureLabelFn(
+ signature: string,
+ optionValue: string,
+ txnIdxCount: number,
+) {
+ return function getLabel(searchValue: string) {
+ searchValue = searchValue.trim();
+ if (searchValue.length < searchLengthThreshold) {
+ return "";
+ }
+
+ const searchStartIdx = optionValue.indexOf(searchValue.toLowerCase());
+ if (searchStartIdx < 0) {
+ return "";
+ }
+
+ if (searchValue.length === optionValue.length || searchValue.length > 10) {
+ return (
+
+ {signature.substring(0, startEndCharCount)}...
+ {signature.substring(signature.length - startEndCharCount)}
+
+ );
+ }
+
+ const searchEndIdx = searchStartIdx + searchValue.length;
+
+ let startIdx = Math.min(startEndCharCount - 1, searchStartIdx);
+ let endIdx = Math.max(
+ optionValue.length - startEndCharCount - 1,
+ searchEndIdx,
+ );
+ let startEllipsis = true;
+ let endEllipsis = true;
+
+ // Extending/reducing the start/end idx if the ellipsis would cover less than ellipsisCount characters
+ if (startIdx + ellipsisCount >= searchStartIdx) {
+ startIdx = searchStartIdx;
+ startEllipsis = false;
+ }
+ if (endIdx - ellipsisCount <= searchEndIdx) {
+ endIdx = searchEndIdx;
+ endEllipsis = false;
+ }
+
+ const hasMultiple = txnIdxCount > 1;
+
+ return (
+
+
+ {signature.substring(0, startIdx)}
+ {startEllipsis && "..."}
+ {/* Extends out the start if search text is smaller than startEndCharCount and is within start of signature */}
+ {searchStartIdx > signature.length - startEndCharCount &&
+ signature.substring(
+ signature.length - startEndCharCount,
+ searchStartIdx,
+ )}
+
+ {signature.substring(searchStartIdx, searchEndIdx)}
+
+ {/* Extends out the end if search text is smaller than startEndCharCount and is within end of signature */}
+ {searchEndIdx < startEndCharCount &&
+ signature.substring(searchEndIdx, startEndCharCount)}
+ {endEllipsis && "..."}
+ {signature.substring(endIdx)}
+ {hasMultiple ? ` (${txnIdxCount})` : ""}
+
+
+ );
+ };
+}
+
+export function findIpMatch(ip: string, searchValue: string) {
+ searchValue = searchValue.trim();
+ if (!searchValue) return;
+
+ if (searchValue.includes(".")) {
+ const idx = ip.indexOf(searchValue);
+ if (idx < 0) return;
+ return { startIdx: idx, endIdx: idx + searchValue.length };
+ }
+
+ // Build digits-only string and map digit index -> original index
+ const digitToOrig: number[] = [];
+ let digitsOnly = "";
+ for (let i = 0; i < ip.length; i++) {
+ const ch = ip[i];
+ if (ch >= "0" && ch <= "9") {
+ digitsOnly += ch;
+ digitToOrig.push(i);
+ }
+ }
+
+ const idx = digitsOnly.indexOf(searchValue);
+ if (idx < 0) return;
+
+ const startIdx = digitToOrig[idx];
+ const endIdx = digitToOrig[idx + searchValue.length - 1] + 1;
+ return { startIdx, endIdx };
+}
+
+export function getIpLabelFn(
+ ip: string,
+ txnIdxCount: number,
+ peerName?: string | null,
+) {
+ return function getLabel(searchValue: string) {
+ if (searchValue.length < searchLengthThreshold) {
+ return "";
+ }
+
+ const ipMatch = findIpMatch(ip, searchValue);
+ const hasMultiple = txnIdxCount > 1;
+
+ const startIdx = ipMatch?.startIdx ?? -1;
+ const endIdx = ipMatch?.endIdx ?? -1;
+
+ return (
+
+
+ {ip.substring(0, startIdx)}
+
+ {ip.substring(startIdx, endIdx)}
+
+ {ip.substring(endIdx)}
+ {hasMultiple ? ` (${txnIdxCount})` : ""}
+
+ {peerName && (
+
+ {peerName}
+
+ )}
+
+ );
+ };
+}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleControl.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleControl.module.css
new file mode 100644
index 00000000..8491f22c
--- /dev/null
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleControl.module.css
@@ -0,0 +1,4 @@
+.label {
+ font-size: 14px;
+ color: #ffffff;
+}
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/toggleGroupControl.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleGroupControl.module.css
similarity index 100%
rename from src/features/Overview/SlotPerformance/TransactionBarsCard/toggleGroupControl.module.css
rename to src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleGroupControl.module.css
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
index bbbea1d2..8507ec6b 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx
@@ -3,12 +3,11 @@ import styles from "./chartTooltip.module.css";
import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "./chartTooltipAtoms";
import type { SlotTransactions } from "../../../../api/types";
import { Button, Flex, Text } from "@radix-ui/themes";
-import { errorCodeMap, stateTextColors, TxnState } from "./consts";
+import { stateTextColors, TxnState } from "./consts";
import type { CSSProperties } from "react";
import { useMemo, useState } from "react";
import { useSlotQueryResponseTransactions } from "../../../../hooks/useSlotQuery";
import { selectedSlotAtom } from "../atoms";
-import { chartFiltersAtom } from "./atoms";
import UplotTooltip from "../../../../uplotReact/UplotTooltip";
import { calcTxnIncome, getCuIncomeRankings } from "./txnBarsPluginUtils";
import { Cross2Icon, CopyIcon, CheckIcon } from "@radix-ui/react-icons";
@@ -27,6 +26,8 @@ import {
incomePerCuToggleControlColor,
iconButtonColor,
} from "../../../../colors";
+import { txnErrorCodeMap } from "../../../../consts";
+import { peersAtom } from "../../../../atoms";
export default function ChartTooltip() {
const slot = useAtomValue(selectedSlotAtom);
@@ -48,15 +49,6 @@ export default function ChartTooltip() {
bundleTxnIdx.push(i);
}
- bundleTxnIdx.sort((a, b) => {
- const diff =
- transactions.txn_preload_end_timestamps_nanos[a] -
- transactions.txn_preload_end_timestamps_nanos[b];
- if (diff > 0) return 1;
- if (diff < 0) return -1;
- return 0;
- });
-
return {
totalCount: bundleTxnIdx.length,
order: bundleTxnIdx.indexOf(txnIdx) + 1,
@@ -126,6 +118,7 @@ export default function ChartTooltip() {
label="Age since slot start"
value={`${(Number(transactions.txn_arrival_timestamps_nanos[txnIdx] - transactions.start_timestamp_nanos) / 1_000_000).toLocaleString()}ms`}
/>
+
Object.values(peers), [peers]);
+ const displayIp = transactions.txn_source_ipv4[txnIdx];
+ const validatorDisplay = useMemo(() => {
+ const peer = peersList.find((peer) => {
+ if (!peer.gossip) return false;
+ const ips = Object.values(peer.gossip.sockets);
+ return ips.some((peerIp) => peerIp.split(":")[0] === displayIp);
+ });
+
+ if (!peer) return;
+ if (peer.info?.name) {
+ if (peer.info.name.length > 20) {
+ return `${peer.info.name.substring(0, 20)}...`;
+ } else {
+ return peer.info.name;
+ }
+ }
+
+ return `${peer.identity_pubkey.substring(0, 8)}...`;
+ }, [displayIp, peersList]);
+
+ return (
+ <>
+
+ {validatorDisplay && (
+
+ )}
+
+ );
+}
+
+function IncomeDisplay({ transactions, txnIdx }: DisplayProps) {
const { rankings, totalRanks } = useMemo(
- () => getCuIncomeRankings(transactions, Object.values(filters)),
- [filters, transactions],
+ () => getCuIncomeRankings(transactions),
+ [transactions],
);
- const rankText = rankings[txnIdx]
- ? ` (${rankings[txnIdx]} of ${totalRanks})`
+ const rankText = rankings.has(txnIdx)
+ ? ` (${rankings.get(txnIdx)} of ${totalRanks})`
: "";
return (
@@ -173,12 +202,7 @@ function IncomeDisplay({ transactions, txnIdx }: IncomeDisplayProps) {
);
}
-interface CuDisplayProps {
- transactions: SlotTransactions;
- txnIdx: number;
-}
-
-function CuDisplay({ transactions, txnIdx }: CuDisplayProps) {
+function CuDisplay({ transactions, txnIdx }: DisplayProps) {
const consumedPct = transactions.txn_compute_units_requested[txnIdx]
? Math.trunc(
(transactions.txn_compute_units_consumed[txnIdx] /
@@ -291,11 +315,20 @@ function StateDurationDisplay({
if (!durations) return;
const total = Number(durations.total);
- const preLoading = (Number(durations.preLoading) / total) * 100;
- const validating = (Number(durations.validating) / total) * 100;
- const loading = (Number(durations.loading) / total) * 100;
- const execute = (Number(durations.execute) / total) * 100;
- const postExecute = (Number(durations.postExecute) / total) * 100;
+ const preLoading = Math.max(
+ 0,
+ (Number(durations.preLoading) / total) * 100,
+ );
+ const validating = Math.max(
+ 0,
+ (Number(durations.validating) / total) * 100,
+ );
+ const loading = Math.max(0, (Number(durations.loading) / total) * 100);
+ const execute = Math.max(0, (Number(durations.execute) / total) * 100);
+ const postExecute = Math.max(
+ 0,
+ (Number(durations.postExecute) / total) * 100,
+ );
return { preLoading, validating, loading, execute, postExecute };
}, [durations]);
@@ -431,7 +464,7 @@ function SuccessErrorDisplay({
return (
);
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/atoms.ts b/src/features/Overview/SlotPerformance/TransactionBarsCard/atoms.ts
index c4bac251..5f30ca5b 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/atoms.ts
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/atoms.ts
@@ -5,6 +5,8 @@ import type { SlotTransactions } from "../../../../api/types";
import { setBarCount } from "./txnBarsPlugin";
import { getChartData } from "./chartUtils";
import { FilterEnum } from "./consts";
+import { getIncome } from "../../../../utils";
+import { txnBarsUplotActionAtom } from "./uplotAtoms";
const landedKey = "landed";
function landedFilter(transactions: SlotTransactions, txnIdx: number) {
@@ -17,9 +19,53 @@ export const baseChartDataAtom = atom([]);
export const defaultChartFilters = {};
// export const defaultChartFilters = { [landedKey]: landedFilter };
-export const chartFiltersAtom = atom<
- Record boolean>
->({ ...defaultChartFilters });
+export const [chartFiltersAtom, filteredTxnIdxAtom] =
+ (function getChartFiltersAtom() {
+ const baseAtom = atom<
+ Record<
+ string,
+ (transactions: SlotTransactions, txnIdx: number) => boolean
+ >
+ >({ ...defaultChartFilters });
+
+ const filteredTxnIdxAtom = atom>();
+
+ return [
+ atom(
+ (get) => get(baseAtom),
+ (
+ get,
+ set,
+ filters: Record<
+ string,
+ (transactions: SlotTransactions, txnIdx: number) => boolean
+ >,
+ ) => {
+ set(baseAtom, filters);
+
+ if (Object.keys(filters).length) {
+ const filteredTxnIds = new Set();
+
+ set(txnBarsUplotActionAtom, (u) => {
+ if (!u.data[1]?.length) return;
+
+ for (let i = 0; i < u.data[1].length; i++) {
+ const txnId = u.data[1][i];
+ if (txnId != null) {
+ filteredTxnIds.add(txnId);
+ }
+ }
+ });
+
+ set(filteredTxnIdxAtom, filteredTxnIds);
+ } else {
+ set(filteredTxnIdxAtom, undefined);
+ }
+ },
+ ),
+ atom((get) => get(filteredTxnIdxAtom)),
+ ];
+ })();
function getNewDataSeries({
baseChartData,
@@ -264,11 +310,7 @@ export const addIncomeCuSeriesAtom = addSeriesAtom(
(transactions, idx) => {
return (
transactions.txn_compute_units_consumed[idx] > 0 &&
- Number(
- transactions.txn_priority_fee[idx] +
- transactions.txn_transaction_fee[idx] +
- transactions.txn_tips[idx],
- ) /
+ getIncome(transactions, idx) /
transactions.txn_compute_units_consumed[idx] >
0
);
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/barChartFloatingAction.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/barChartFloatingAction.module.css
index 6a54dee7..44e50836 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/barChartFloatingAction.module.css
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/barChartFloatingAction.module.css
@@ -1,6 +1,6 @@
.container {
position: absolute;
- z-index: 100;
+ z-index: 3;
right: 5px;
top: 5px;
display: flex;
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartTooltip.module.css b/src/features/Overview/SlotPerformance/TransactionBarsCard/chartTooltip.module.css
index 8eedd21a..548d0cff 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartTooltip.module.css
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/chartTooltip.module.css
@@ -3,10 +3,10 @@
z-index: 3;
position: absolute;
background: var(--Colors-Gray-1, #111);
- padding: 6px 8px;
border-radius: 8px;
max-height: none !important;
max-width: none !important;
+ margin: 6px 8px;
.state {
font-weight: 700;
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartUtils.ts b/src/features/Overview/SlotPerformance/TransactionBarsCard/chartUtils.ts
index edabb5c1..7e2ea406 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/chartUtils.ts
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/chartUtils.ts
@@ -1,6 +1,11 @@
import type { SlotTransactions } from "../../../../api/types";
import type uPlot from "uplot";
import { chartBufferMs } from "../../../../transactionUtils";
+import { txnBarsUplotIdPrefix } from "./consts";
+
+export function getUplotId(bankIdx: number) {
+ return `${txnBarsUplotIdPrefix}${bankIdx}`;
+}
export function getSlotStateTs(transactions: SlotTransactions, txnIdx: number) {
if (txnIdx < 0) return;
@@ -113,8 +118,11 @@ export function getChartData(
return res as uPlot.AlignedData;
}
-export function getDurationWithUnits(value: bigint) {
+export function getDurationWithUnits(value: bigint, allowNegatives = true) {
let formatted = Number(value);
+ if (!allowNegatives) {
+ formatted = Math.abs(formatted);
+ }
if (Math.abs(formatted) < 1_000) {
return { value: Math.round(formatted), unit: "ns" };
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/consts.ts b/src/features/Overview/SlotPerformance/TransactionBarsCard/consts.ts
index c62dcb56..d7ac335c 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/consts.ts
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/consts.ts
@@ -51,47 +51,4 @@ export const enum FilterEnum {
INCOME_CUS,
}
-export const errorCodeMap: Record = {
- 0: "Success", // The transaction successfully executed
- 1: "Account In Use", // Includes a writable account that was already in use at the time this transaction was executed
- 2: "Account Loaded Twice", // Lists at least one account pubkey more than once
- 3: "Account Not Found", // Lists at least one account pubkey that was not found in the accounts database
- 4: "Program Account Not Found", // Could not find or parse a listed program account
- 5: "Insufficient Funds For Fee", // Lists a fee payer that does not have enough SOL to fund this transaction
- 6: "Invalid Account For Fee", // Lists a fee payer that may not be used to pay transaction fees
- 7: "Already Processed", // This transaction has been processed before (e.g. the transaction was sent twice)
- 8: "Blockhash Not Found", // Provides a block hash of a recent block in the chain, b, that this validator has not seen yet, or that is so old it has been discarded
- 9: "Instruction Error", // Includes an instruction that failed to process
- 10: "Call Chain Too Deep", // Includes a cross program invocation (CPI) chain that exceeds the maximum depth allowed
- 11: "Missing Signature For Fee", // Requires a fee but has no signature present
- 12: "Invalid Account Index", // Contains an invalid account reference in one of its instructions
- 13: "Signature Failure", // Includes a signature that did not pass verification
- 14: "Invalid Program For Execution", // Includes a program that may not be used for executing transactions
- 15: "Sanitize Failure", // Failed to parse a portion of the transaction payload
- 16: "Cluster Maintenance", // Cluster is undergoing an active maintenance window
- 17: "Account Borrow Outstanding", // Transaction processing left an account with an outstanding borrowed reference
- 18: "Would Exceed Max Block Cost Limit", // Exceeded the maximum compute unit cost allowed for this slot
- 19: "Unsupported Version", // Includes a transaction version that is not supported by this validator
- 20: "Invalid Writable Account", // Includes an account marked as writable that is not in fact writable
- 21: "Would Exceed Max Account Cost Limit", // Exceeded the maximum per-account compute unit cost allowed for this slot
- 22: "Would Exceed Account Data Block Limit", // Retrieved accounts data size exceeds the limit imposed for this slot
- 23: "Too Many Account Locks", // Locked too many accounts
- 24: "Address Lookup Table Not Found", // Loads an address table account that doesn't exist
- 25: "Invalid Address Lookup Table Owner", // Loads an address table account with an invalid owner
- 26: "Invalid Address Lookup Table Data", // Loads an address table account with invalid data
- 27: "Invalid Address Lookup Table Index", // Address table lookup uses an invalid index
- 28: "Invalid Rent Paying Account", // Deprecated
- 29: "Would Exceed Max Vote Cost Limit", // Exceeded the maximum vote compute unit cost allowed for this slot
- 30: "Would Exceed Account Data Total Limit", // Deprecated
- 31: "Duplicate Instruction", // Contains duplicate instructions
- 32: "Insufficient Funds For Rent", // Deprecated
- 33: "Max Loaded Accounts Data Size Exceeded", // Retrieved accounts data size exceeds the limit imposed for this transaction
- 34: "Invalid Loaded Accounts Data Size Limit", // Requested an invalid data size (i.e. 0)
- 35: "Resanitization Needed", // Sanitized transaction differed before/after feature activation. Needs to be resanitized
- 36: "Program Execution Temporarily Restricted", // Execution of a program referenced by this transaciton is restricted
- 37: "Unbalanced Transaction", // The total accounts balance before the transaction does not equal the total balance after
- 38: "Program Cache Hit Max Limit", // The program cache allocated for transaction batch for this transaction hit its load limit
- 39: "Commit Cancelled", // This transaction was part of a bundle that failed
-};
-
export const txnBarsUplotIdPrefix = "bank-";
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/index.tsx b/src/features/Overview/SlotPerformance/TransactionBarsCard/index.tsx
index bd5de60d..c448ab27 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/index.tsx
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/index.tsx
@@ -1,9 +1,9 @@
import BarsChartContainer from "./BarsChartContainer";
-import { Card } from "@radix-ui/themes";
import ChartTooltip from "./ChartTooltip";
import { useAtomValue } from "jotai";
import { useSlotQueryResponseTransactions } from "../../../../hooks/useSlotQuery";
import { selectedSlotAtom } from "../atoms";
+import Card from "../../../../components/Card";
export default function TransactionsBarsCard() {
const slot = useAtomValue(selectedSlotAtom);
@@ -12,15 +12,7 @@ export default function TransactionsBarsCard() {
return (
<>
-
+
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPlugin.ts b/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPlugin.ts
index d844867c..229d3a31 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPlugin.ts
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPlugin.ts
@@ -30,11 +30,24 @@ const laneDistr = SPACE_BETWEEN;
let stateSeriesHgt = 0;
+const outOfFocusBrightness = 0.5;
+const focusBrightness = 1.3;
+
export let focusedErrorCode: number;
export function highlightErrorCode(errorCode: number) {
focusedErrorCode = errorCode;
}
+export let focusedTpu = "";
+export function highlightTpu(tpu: string) {
+ focusedTpu = tpu;
+}
+
+let focusedTxnIdx: number | undefined;
+export function highlightTxnIdx(txnIdx: number | undefined) {
+ focusedTxnIdx = txnIdx;
+}
+
let barCount = 0;
export const setBarCount = (count: number) => {
barCount = count - 1;
@@ -51,7 +64,7 @@ export function txnBarsPlugin(
let maxTips = 0n;
let maxCuConsumed = 0;
let maxCuRequested = 0;
- let cuIncomeRankingRatios: Record = {};
+ let cuIncomeRankingRatios: Map = new Map();
function setMaxFees() {
maxFees = getMaxFees(transactionsRef);
@@ -78,18 +91,24 @@ export function txnBarsPlugin(
seriesIdx: number,
dataIdx: number,
value: number,
- ) => {
- if (!transactionsRef.current) return "";
+ ): { fill: string; brightness?: number } => {
+ if (!transactionsRef.current) return { fill: "" };
- if (isTimeSeries(seriesIdx)) return "";
+ if (isTimeSeries(seriesIdx)) return { fill: "" };
if (isTxnIdxSeries(seriesIdx)) {
- return stateColors[
- getChartTxnState(data, dataIdx, transactionsRef.current, value)
- ];
+ return {
+ fill: stateColors[
+ getChartTxnState(data, dataIdx, transactionsRef.current, value)
+ ],
+ brightness:
+ focusedTxnIdx === data[txnIdxSidx][dataIdx]
+ ? focusBrightness
+ : undefined,
+ };
}
if (isMicroblockSeries(seriesIdx)) {
- return "";
+ return { fill: "" };
}
if (value === FilterEnum.FEES) {
@@ -97,54 +116,54 @@ export function txnBarsPlugin(
const fees =
transactionsRef.current.txn_priority_fee[txnIdx] +
transactionsRef.current.txn_transaction_fee[txnIdx];
- if (!fees) return "";
+ if (!fees) return { fill: "" };
const ratio = bigIntRatio(fees, maxFees, 4);
const ratioScaled = Math.max(Math.min(0.8, ratio * 4), 0.3);
- return `rgba(76, 204, 230, ${ratioScaled})`;
+ return { fill: `rgba(76, 204, 230, ${ratioScaled})` };
}
if (value === FilterEnum.TIPS) {
const txnIdx = data[txnIdxSidx][dataIdx] ?? -1;
const tips = transactionsRef.current?.txn_tips[txnIdx];
- if (!tips) return "";
+ if (!tips) return { fill: "" };
const ratio = bigIntRatio(tips, maxTips, 4);
const ratioScaled = Math.max(Math.min(0.8, ratio * 4), 0.3);
- return `rgba(31, 216, 164, ${ratioScaled})`;
+ return { fill: `rgba(31, 216, 164, ${ratioScaled})` };
}
if (value === FilterEnum.CUS_REQUESTED) {
const txnIdx = data[txnIdxSidx][dataIdx] ?? -1;
const cuRequested =
transactionsRef.current?.txn_compute_units_requested[txnIdx];
- if (!cuRequested) return "";
+ if (!cuRequested) return { fill: "" };
const ratio = cuRequested / maxCuRequested;
const ratioScaled = Math.max(Math.min(0.85, ratio), 0.2);
- return `rgba(255, 141, 204, ${ratioScaled})`;
+ return { fill: `rgba(255, 141, 204, ${ratioScaled})` };
}
if (value === FilterEnum.CUS_CONSUMED) {
const txnIdx = data[txnIdxSidx][dataIdx] ?? -1;
const cuConsumed =
transactionsRef.current?.txn_compute_units_consumed[txnIdx];
- if (!cuConsumed) return "";
+ if (!cuConsumed) return { fill: "" };
const ratio = cuConsumed / maxCuConsumed;
const ratioScaled = Math.max(Math.min(0.85, ratio), 0.2);
- return `rgba(209, 157, 255, ${ratioScaled})`;
+ return { fill: `rgba(209, 157, 255, ${ratioScaled})` };
}
if (value === FilterEnum.INCOME_CUS) {
const txnIdx = data[txnIdxSidx][dataIdx] ?? -1;
- const ratio = cuIncomeRankingRatios[txnIdx] ?? 0;
+ const ratio = cuIncomeRankingRatios.get(txnIdx) ?? 0;
const ratioScaled = Math.max(Math.min(0.8, ratio), 0.3);
- return `rgba(158, 177, 255, ${ratioScaled})`;
+ return { fill: `rgba(158, 177, 255, ${ratioScaled})` };
}
- return "";
+ return { fill: "" };
},
stroke: (
data: AlignedData,
@@ -162,12 +181,28 @@ export function txnBarsPlugin(
const txnIdx = data[txnIdxSidx][dataIdx] ?? -1;
const errorCode = transactionsRef.current?.txn_error_code[txnIdx];
if (focusedErrorCode) {
- if (errorCode === focusedErrorCode) {
+ if (
+ errorCode === focusedErrorCode &&
+ (!focusedTpu ||
+ transactionsRef.current?.txn_source_tpu[txnIdx] === focusedTpu)
+ ) {
return "rgba(162,5,8, .8)";
}
return errorCode ? "rgba(162,5,8, .1)" : "rgba(19,173,79, .1)";
}
+
+ if (focusedTpu) {
+ if (
+ transactionsRef.current?.txn_source_tpu[txnIdx] === focusedTpu &&
+ (!focusedErrorCode || errorCode === focusedErrorCode)
+ ) {
+ return errorCode ? "rgba(162,5,8, .8)" : "rgba(19,173,79, .8)";
+ }
+
+ return errorCode ? "rgba(162,5,8, .1)" : "rgba(19,173,79, .1)";
+ }
+
return errorCode ? "rgba(162,5,8, .5)" : "rgba(19,173,79, .5)";
}
@@ -216,16 +251,33 @@ export function txnBarsPlugin(
recalcDppxVars();
- const fillPaths = new Map();
+ const fillPaths = new Map<
+ string,
+ { fill: string; path: Path2D; brightness?: number }
+ >();
const strokePaths = new Map();
function drawBoxes(ctx: CanvasRenderingContext2D) {
- fillPaths.forEach((fillPath, fillStyle) => {
- if (fillStyle) {
- ctx.fillStyle = fillStyle;
- ctx.fill(fillPath);
+ let prevBrightness: number | undefined;
+ const isFocusMode = focusedTxnIdx !== undefined;
+ if (isFocusMode) {
+ ctx.filter = `brightness(${outOfFocusBrightness})`;
+ }
+
+ fillPaths.forEach(({ path, brightness, fill }) => {
+ if (fill) {
+ if (isFocusMode) {
+ // Ok to change canvas context on the fly as expecations are that there will only be a couple distinct fitler styles
+ if (brightness !== prevBrightness) {
+ ctx.filter = `brightness(${brightness ?? outOfFocusBrightness})`;
+ prevBrightness = brightness;
+ }
+ }
+ ctx.fillStyle = fill;
+ ctx.fill(path);
}
});
+ ctx.filter = "";
strokePaths.forEach((strokePath, strokeStyle) => {
if (strokeStyle) {
@@ -257,7 +309,7 @@ export function txnBarsPlugin(
const sidx = iy + 1;
const fillStyle = fill(data, sidx, ix, value);
- let fillPath = fillPaths.get(fillStyle);
+ let fillPath = fillPaths.get(fillStyle.fill + fillStyle.brightness);
const txnIdx = data[txnIdxSidx][ix];
// txn series should always be populated if we want to draw an additional series at that ts
@@ -322,7 +374,7 @@ export function txnBarsPlugin(
}
if (value === FilterEnum.INCOME_CUS) {
- let ratio = cuIncomeRankingRatios[txnIdx] ?? 0;
+ let ratio = cuIncomeRankingRatios.get(txnIdx) ?? 0;
if (ratio > 0.9) ratio = 0.95;
if (ratio < 0.1) ratio = 0.1;
const ratioHgt = hgt * ratio;
@@ -332,8 +384,17 @@ export function txnBarsPlugin(
}
}
- if (fillPath == null) fillPaths.set(fillStyle, (fillPath = new Path2D()));
- rect(fillPath, lft, top, wid, hgt);
+ if (fillPath == null) {
+ fillPaths.set(
+ fillStyle.fill + fillStyle.brightness,
+ (fillPath = {
+ path: new Path2D(),
+ fill: fillStyle.fill,
+ brightness: fillStyle.brightness,
+ }),
+ );
+ }
+ rect(fillPath.path, lft, top, wid, hgt);
if (strokeWidth) {
const strokeStyle = stroke(data, sidx, ix, value);
@@ -366,12 +427,6 @@ export function txnBarsPlugin(
function drawPaths(u: uPlot, sidx: number, idx0: number, idx1: number) {
if (pauseDrawing) return;
- // setMaxFees();
- // setMaxTips();
- // setMaxCuConsumed();
- // setMaxCuRequested();
- // setCuIncomeRankingRatios();
-
uPlot.orient(
u,
sidx,
@@ -726,6 +781,9 @@ export function txnBarsPlugin(
if (i > 0) {
uPlot.assign(s, {
paths: drawPaths,
+ points: {
+ show: false,
+ },
});
}
});
diff --git a/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPluginUtils.ts b/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPluginUtils.ts
index cdeb3160..366bef09 100644
--- a/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPluginUtils.ts
+++ b/src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPluginUtils.ts
@@ -1,11 +1,8 @@
import type uPlot from "uplot";
import type { MutableRefObject } from "react";
import type { SlotTransactions } from "../../../../api/types";
-import { getDefaultStore } from "jotai";
-import { chartFiltersAtom } from "./atoms";
import { TxnState } from "./consts";
-
-const store = getDefaultStore();
+import { getIncome } from "../../../../utils";
export function getTxnState(
ts: number,
@@ -142,22 +139,13 @@ export const getMaxCuRequested = getMax(
export function calcTxnIncome(transactions: SlotTransactions, txnIdx: number) {
if (!transactions.txn_landed[txnIdx]) return 0;
- const feesAndTips = Number(
- transactions.txn_priority_fee[txnIdx] +
- transactions.txn_transaction_fee[txnIdx] +
- transactions.txn_tips[txnIdx],
- );
-
const cus = transactions.txn_compute_units_consumed[txnIdx];
if (!cus) return 0;
- return feesAndTips / cus;
+ return getIncome(transactions, txnIdx) / cus;
}
-export function getCuIncomeRankings(
- transactions: SlotTransactions,
- filters: ((transactions: SlotTransactions, txnIdx: number) => boolean)[],
-) {
+export function getCuIncomeRankings(transactions: SlotTransactions) {
const incomeToTxnIds = transactions.txn_priority_fee.reduce<
Record
>((incomeToTxnIds, _, txnIdx) => {
@@ -179,16 +167,16 @@ export function getCuIncomeRankings(
);
return {
- rankings: sortedIncome.reduce>(
- (txnIdRank, income, rank) => {
- const txnIds = incomeToTxnIds[income];
- for (const txnId of txnIds) {
+ rankings: sortedIncome.reduce>(
+ (txnIdxRank, income, rank) => {
+ const txnIdxs = incomeToTxnIds[income];
+ for (const txnIdx of txnIdxs) {
// Rank starts at 1 instead of 0
- txnIdRank[txnId] = rank + 1;
+ txnIdxRank.set(txnIdx, rank + 1);
}
- return txnIdRank;
+ return txnIdxRank;
},
- {},
+ new Map(),
),
totalRanks: sortedIncome.length,
};
@@ -196,20 +184,13 @@ export function getCuIncomeRankings(
export function getCuIncomeRankingRatios(
transactionsRef: MutableRefObject,
-) {
- if (!transactionsRef.current) return {};
-
- const filterFunctions = Object.values(store.get(chartFiltersAtom));
- const { rankings, totalRanks } = getCuIncomeRankings(
- transactionsRef.current,
- filterFunctions,
- );
+): Map {
+ if (!transactionsRef.current) return new Map();
- const keys = Object.keys(rankings);
+ const { rankings, totalRanks } = getCuIncomeRankings(transactionsRef.current);
- for (const key of keys) {
- rankings[key] = (totalRanks - rankings[key] + 1) / totalRanks;
+ for (const [txnIdx, rank] of rankings) {
+ rankings.set(txnIdx, (totalRanks - rank + 1) / totalRanks);
}
-
return rankings;
}
diff --git a/src/features/Overview/SlotPerformance/atoms.ts b/src/features/Overview/SlotPerformance/atoms.ts
index 8b5d1c55..88c09014 100644
--- a/src/features/Overview/SlotPerformance/atoms.ts
+++ b/src/features/Overview/SlotPerformance/atoms.ts
@@ -4,13 +4,115 @@ import {
tilesAtom,
tileTimerAtom,
} from "../../../api/atoms";
-import type { TxnWaterfall } from "../../../api/types";
+import type { Epoch, TxnWaterfall } from "../../../api/types";
import { atomWithImmer } from "jotai-immer";
import { produce } from "immer";
import { countBy } from "lodash";
+import {
+ currentSlotAtom,
+ earliestProcessedSlotLeaderAtom,
+ epochAtom,
+ leaderSlotsAtom,
+ slotOverrideAtom,
+} from "../../../atoms";
+import { getSlotGroupLeader } from "../../../utils";
+
+export enum SelectedSlotValidityState {
+ Valid = "valid",
+ NotReady = "invalid",
+ OutsideEpoch = "outside-epoch",
+ BeforeFirstProcessed = "before-first-processed",
+ Future = "future",
+ NotYou = "not-you",
+}
+
+function getSlotState(
+ slot?: number,
+ epoch?: Epoch,
+ leaderSlots?: number[],
+ earliestProcessedSlotLeader?: number,
+ currentSlot?: number,
+) {
+ if (slot === undefined) return SelectedSlotValidityState.Valid;
+ if (
+ !epoch ||
+ !leaderSlots ||
+ earliestProcessedSlotLeader === undefined ||
+ currentSlot === undefined
+ )
+ return SelectedSlotValidityState.NotReady;
+ if (slot < epoch.start_slot || epoch.end_slot < slot)
+ return SelectedSlotValidityState.OutsideEpoch;
+ if (!leaderSlots.includes(getSlotGroupLeader(slot)))
+ return SelectedSlotValidityState.NotYou;
+ if (slot < earliestProcessedSlotLeader)
+ return SelectedSlotValidityState.BeforeFirstProcessed;
+ if (slot >= currentSlot) return SelectedSlotValidityState.Future;
+ return SelectedSlotValidityState.Valid;
+}
+
+export const baseSelectedSlotAtom = (function () {
+ const _baseSelectedSlotAtom = atom();
+ const _isInitializedAtom = atom(false);
+
+ return atom(
+ (get) => {
+ const epoch = get(epochAtom);
+ const slot = get(_baseSelectedSlotAtom);
+ const leaderSlots = get(leaderSlotsAtom);
+ const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+ const currentSlot = get(currentSlotAtom);
+ const state = getSlotState(
+ slot,
+ epoch,
+ leaderSlots,
+ earliestProcessedSlotLeader,
+ currentSlot,
+ );
+ return {
+ slot,
+ state,
+ isValid: state === SelectedSlotValidityState.Valid,
+ isInitialized: get(_isInitializedAtom),
+ };
+ },
+ (get, set, slot?: number, epoch?: Epoch) => {
+ const leaderSlots = get(leaderSlotsAtom);
+ const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+ const currentSlot = get(currentSlotAtom);
+ if (
+ !epoch ||
+ !leaderSlots ||
+ earliestProcessedSlotLeader === undefined ||
+ currentSlot === undefined
+ ) {
+ set(_baseSelectedSlotAtom, undefined);
+ return;
+ }
-// Note: do not user setter directly as it's derived from search params
-export const selectedSlotAtom = atom();
+ set(_baseSelectedSlotAtom, slot);
+ set(_isInitializedAtom, true);
+ const isValid =
+ getSlotState(
+ slot,
+ epoch,
+ leaderSlots,
+ earliestProcessedSlotLeader,
+ currentSlot,
+ ) === SelectedSlotValidityState.Valid;
+
+ if (isValid && slot !== undefined) {
+ // Scroll to selected slot if new selection is defined
+ set(slotOverrideAtom, slot);
+ }
+ },
+ );
+})();
+
+export const selectedSlotAtom = atom((get) => {
+ const { slot, isValid } = get(baseSelectedSlotAtom);
+ return isValid ? slot : undefined;
+});
export enum DisplayType {
Count = "Count",
diff --git a/src/features/Overview/SlotPerformance/index.tsx b/src/features/Overview/SlotPerformance/index.tsx
index 58692dca..b47ae9c7 100644
--- a/src/features/Overview/SlotPerformance/index.tsx
+++ b/src/features/Overview/SlotPerformance/index.tsx
@@ -3,11 +3,8 @@ import CardHeader from "../../../components/CardHeader";
import SlotSankey from "./SlotSankey";
import TilesPerformance from "./TilesPerformance";
import Card from "../../../components/Card";
-import SlotSelector from "./SlotSelector";
import SankeyControls from "./SankeyControls";
import styles from "./SlotSankey/slotSankey.module.css";
-import ResetLive from "./ResetLive";
-import LiveSankeyIndicator from "./LiveSankeyIndicator";
export default function SlotPerformance() {
return (
@@ -19,9 +16,7 @@ export default function SlotPerformance() {
>
-
-
@@ -32,7 +27,6 @@ export default function SlotPerformance() {
function SankeyContainer() {
return (
-
diff --git a/src/features/Overview/SlotPerformance/liveSankeyIndicator.module.css b/src/features/Overview/SlotPerformance/liveSankeyIndicator.module.css
deleted file mode 100644
index da03b988..00000000
--- a/src/features/Overview/SlotPerformance/liveSankeyIndicator.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.indicator {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 2px 10px;
- border-radius: 5px;
- background: rgba(197, 103, 234, 0.1);
-}
-
-.text {
- color: var(--next-color);
- font-size: 12px;
- line-height: normal;
-}
diff --git a/src/features/Overview/SlotPerformance/navigate.module.css b/src/features/Overview/SlotPerformance/navigate.module.css
deleted file mode 100644
index f53389ae..00000000
--- a/src/features/Overview/SlotPerformance/navigate.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.nav-btn {
- border-radius: 5px;
- background: rgba(255, 255, 255, 0.1);
- padding: 0 2px;
- color: var(--nav-button-text-color);
- gap: 0px;
- height: unset;
-
- &:hover {
- filter: brightness(2);
- /* cursor: pointer; */
- }
-
- &[data-disabled="true"] {
- filter: brightness(0.5);
- }
-
- .span {
- font-size: 12px;
- color: var(--nav-button-text-color);
- }
-}
diff --git a/src/features/Overview/SlotPerformance/resetLive.module.css b/src/features/Overview/SlotPerformance/resetLive.module.css
deleted file mode 100644
index 0533a7d9..00000000
--- a/src/features/Overview/SlotPerformance/resetLive.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.container {
- /* width: 100%; */
- display: flex;
- justify-content: center;
- top: 10px;
-
- .button {
- position: absolute;
- /* z-index: 1; */
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
- border-radius: 16px;
- background: rgba(37, 100, 89, 0.9);
- padding: var(--space-1, 4px) 8px;
- }
-}
diff --git a/src/features/Overview/SlotPerformance/slotSelector.module.css b/src/features/Overview/SlotPerformance/slotSelector.module.css
deleted file mode 100644
index b1e9b841..00000000
--- a/src/features/Overview/SlotPerformance/slotSelector.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.root {
- flex: 1;
- display: flex;
- overflow: hidden;
- gap: 2px;
- padding: 0 1px;
-
- .item {
- flex: 1;
- background: var(--slot-selector-item-background-color);
- border: 0px solid #900;
- border: solid 1px transparent;
- justify-content: "left";
- padding: var(--space-1, 4px);
- flex-direction: column;
- justify-content: center;
- align-items: stretch;
- gap: 2px;
-
- .order {
- color: var(--next-slot-value-color);
- font-size: 12px;
- line-height: normal;
- }
-
- .slot-text {
- color: var(--slot-selector-text-color);
- line-height: normal;
- flex: 1;
- text-align: center;
- }
-
- &[data-state="checked"] {
- border: 1px solid #1d6fba;
- background: #29699766;
-
- &::after {
- outline: unset;
- }
- }
-
- &.live {
- background: #351d3f;
- &[data-state="checked"] {
- border: 1px solid var(--next-color);
- }
- }
-
- &.skipped {
- background: #3c2525;
- }
-
- .live-icon {
- color: var(--next-color);
- font-size: 6px;
- line-height: normal;
- position: absolute;
- top: 2px;
- right: 5px;
- }
-
- .skipped-icon {
- height: 8px;
- }
- }
-
- .divider {
- height: 100%;
- width: 1px;
- background: #717c98;
- margin: 0px 4px;
- }
-}
diff --git a/src/features/Overview/StatusCard/chart.module.css b/src/features/Overview/StatusCard/chart.module.css
index 4a939d66..44505f72 100644
--- a/src/features/Overview/StatusCard/chart.module.css
+++ b/src/features/Overview/StatusCard/chart.module.css
@@ -4,6 +4,6 @@
column-gap: 4px;
padding: 4px;
border-radius: 8px;
- border: 1px solid rgba(250, 250, 250, 0.12);
+ border: 1px solid var(--container-border-color);
background: #070b14;
}
diff --git a/src/features/Overview/StatusCard/index.tsx b/src/features/Overview/StatusCard/index.tsx
index b7b703bd..d583828f 100644
--- a/src/features/Overview/StatusCard/index.tsx
+++ b/src/features/Overview/StatusCard/index.tsx
@@ -50,7 +50,9 @@ function CurrentSlotText() {
}
function UpcomingSlotText() {
- const { nextLeaderSlot } = useNextSlot();
+ const { nextLeaderSlot } = useNextSlot({
+ showNowIfCurrent: true,
+ });
return (
diff --git a/src/features/Overview/StatusCard/statusCard.module.css b/src/features/Overview/StatusCard/statusCard.module.css
index 37778b6b..eff20581 100644
--- a/src/features/Overview/StatusCard/statusCard.module.css
+++ b/src/features/Overview/StatusCard/statusCard.module.css
@@ -12,14 +12,12 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
+ width: 100%;
> div {
flex: 1 1 auto;
min-width: 180px;
}
-
- /* display: grid;
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
}
.vote-distance {
diff --git a/src/features/Overview/TransactionsCard/chart.module.css b/src/features/Overview/TransactionsCard/chart.module.css
index 4a939d66..44505f72 100644
--- a/src/features/Overview/TransactionsCard/chart.module.css
+++ b/src/features/Overview/TransactionsCard/chart.module.css
@@ -4,6 +4,6 @@
column-gap: 4px;
padding: 4px;
border-radius: 8px;
- border: 1px solid rgba(250, 250, 250, 0.12);
+ border: 1px solid var(--container-border-color);
background: #070b14;
}
diff --git a/src/features/Overview/TransactionsCard/index.tsx b/src/features/Overview/TransactionsCard/index.tsx
index 6358d965..fb90f922 100644
--- a/src/features/Overview/TransactionsCard/index.tsx
+++ b/src/features/Overview/TransactionsCard/index.tsx
@@ -13,7 +13,7 @@ export default function TransactionsCard() {
-
+
diff --git a/src/features/Overview/ValidatorsCard/validatorsCard.module.css b/src/features/Overview/ValidatorsCard/validatorsCard.module.css
index b6a9ea82..e4e0a6ce 100644
--- a/src/features/Overview/ValidatorsCard/validatorsCard.module.css
+++ b/src/features/Overview/ValidatorsCard/validatorsCard.module.css
@@ -2,6 +2,7 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
+ width: 100%;
> div {
flex: 1 1 auto;
diff --git a/src/features/Overview/index.tsx b/src/features/Overview/index.tsx
index 7a4d3365..b1e2d08c 100644
--- a/src/features/Overview/index.tsx
+++ b/src/features/Overview/index.tsx
@@ -1,54 +1,20 @@
import { Flex } from "@radix-ui/themes";
import TransactionsCard from "./TransactionsCard";
import SlotPerformance from "./SlotPerformance";
-import styles from "./overview.module.css";
-import { useAtomValue, useSetAtom } from "jotai";
-import { epochAtom, slotOverrideAtom } from "../../atoms";
import ValidatorsCard from "./ValidatorsCard";
import SlotStatusCard from "./StatusCard";
-import ComputeUnitsCard from "./SlotPerformance/ComputeUnitsCard";
-import { useSlotSearchParam } from "./useSearchParams";
-import { useEffect } from "react";
-import { selectedSlotAtom } from "./SlotPerformance/atoms";
-import TransactionBarsCard from "./SlotPerformance/TransactionBarsCard";
+import EpochCard from "./EpochCard";
export default function Overview() {
return (
-
-
-
+
+
+
-
-
+
+
-
-
);
}
-
-export function Setup() {
- const { selectedSlot } = useSlotSearchParam();
- const setSelectedSlotAtom = useSetAtom(selectedSlotAtom);
- const setSlotOverride = useSetAtom(slotOverrideAtom);
- const epoch = useAtomValue(epochAtom);
-
- useEffect(() => {
- // To initially sync atom to search param
- setSelectedSlotAtom(selectedSlot);
- }, [selectedSlot, setSelectedSlotAtom]);
-
- useEffect(() => {
- // To set the epoch bar / slot selector positions on mount from search param
- setSlotOverride(selectedSlot);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [epoch, setSlotOverride]);
-
- return null;
-}
diff --git a/src/features/Overview/overview.module.css b/src/features/Overview/overview.module.css
deleted file mode 100644
index a10ed876..00000000
--- a/src/features/Overview/overview.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.container {
- padding: 4px 12px;
-}
-
-.card-container {
- display: flex;
- align-items: stretch;
- flex-wrap: wrap;
-
- /* display: grid; */
- /* grid: repeat(auto-fill, 186px) / 1fr 1fr 1fr 1fr; */
- /* grid: auto-flow / repeat(auto-fill, 186px); */
- /* repeat(4, minmax(200px,1fr)); */
- /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 2 */
- /* grid-template-columns: auto 1fr auto; */
- gap: 16px;
-
- /* div {
- height: max-content;
- flex: 1
- } */
-}
diff --git a/src/features/Overview/useSearchParams.ts b/src/features/Overview/useSearchParams.ts
deleted file mode 100644
index 53457d8b..00000000
--- a/src/features/Overview/useSearchParams.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
-import { useCallback } from "react";
-import { Route as OverviewRoute } from "../../routes";
-import { Route as SlotRoute } from "../../routes/slotDetails";
-
-export function useSlotSearchParam() {
- const location = useLocation();
- // TODO: fix assumption that it has to be these 2 routes. This PR doesn't work: https://github.com/TanStack/router/pull/3642
- const search = useSearch({ from: location.pathname as "/" | "/slotDetails" });
- const navigate = useNavigate({
- from: location.pathname.startsWith("/slot")
- ? SlotRoute.fullPath
- : OverviewRoute.fullPath,
- });
-
- const setSelectedSlot = useCallback(
- (slot?: number) => {
- void navigate({ search: { slot }, replace: true });
- },
- [navigate],
- );
-
- return { selectedSlot: search?.slot, setSelectedSlot };
-}
diff --git a/src/features/SlotDetails/index.tsx b/src/features/SlotDetails/index.tsx
index c1735282..22efefca 100644
--- a/src/features/SlotDetails/index.tsx
+++ b/src/features/SlotDetails/index.tsx
@@ -1,13 +1,466 @@
-import { Flex } from "@radix-ui/themes";
+import { Flex, TextField, Text, IconButton } from "@radix-ui/themes";
import SlotPerformance from "../Overview/SlotPerformance";
import ComputeUnitsCard from "../Overview/SlotPerformance/ComputeUnitsCard";
import TransactionBarsCard from "../Overview/SlotPerformance/TransactionBarsCard";
-import { Setup } from "../Overview";
+import { useSlotSearchParam } from "./useSearchParams";
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+ selectedSlotAtom,
+ baseSelectedSlotAtom,
+ SelectedSlotValidityState,
+} from "../Overview/SlotPerformance/atoms";
+import type { FC, SVGProps } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useUnmount } from "react-use";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useSlotInfo } from "../../hooks/useSlotInfo";
+import styles from "./slotDetails.module.css";
+import PeerIcon from "../../components/PeerIcon";
+import {
+ earliestProcessedSlotLeaderAtom,
+ epochAtom,
+ mostRecentSlotLeaderAtom,
+} from "../../atoms";
+import {
+ clusterIndicatorHeight,
+ headerHeight,
+ maxZIndex,
+ slotNavHeight,
+ slotsPerLeader,
+} from "../../consts";
+import { useSlotQueryPublish } from "../../hooks/useSlotQuery";
+import { getLeaderSlots, getSlotGroupLeader } from "../../utils";
+import { SkippedIcon, StatusIcon } from "../../components/StatusIcon";
+import clsx from "clsx";
+import {
+ slotDetailsEarliestSlotColor,
+ slotDetailsLastSkippedSlotColor,
+ slotDetailsMostRecentSlotColor,
+ slotDetailsQuickSearchTextPrimaryColor,
+ slotDetailsQuickSearchTextSecondaryColor,
+} from "../../colors";
+
+import skippedIcon from "../../assets/Skipped.svg?react";
+import history from "../../assets/history.svg?react";
+import checkFill from "../../assets/checkFill.svg?react";
+
+import { skippedSlotsAtom } from "../../api/atoms";
+import { useTimeAgo } from "../../hooks/useTimeAgo";
+import SlotClient from "../../components/SlotClient";
+import { Link } from "@tanstack/react-router";
export default function SlotDetails() {
+ const selectedSlot = useAtomValue(selectedSlotAtom);
+
return (
-
+
+ {selectedSlot === undefined ? : }
+
+ );
+}
+
+function Setup() {
+ const { selectedSlot } = useSlotSearchParam();
+ const epoch = useAtomValue(epochAtom);
+ const setBaseSelectedSlot = useSetAtom(baseSelectedSlotAtom);
+
+ // To sync atom to search param
+ useEffect(() => {
+ setBaseSelectedSlot(selectedSlot, epoch);
+ }, [selectedSlot, setBaseSelectedSlot, epoch]);
+
+ useUnmount(() => {
+ setBaseSelectedSlot(undefined);
+ });
+
+ return null;
+}
+
+function Errors() {
+ const { slot, state } = useAtomValue(baseSelectedSlotAtom);
+
+ const epoch = useAtomValue(epochAtom);
+ const message = useMemo(() => {
+ switch (state) {
+ case SelectedSlotValidityState.NotReady:
+ return `Slot ${slot} validity cannot be determined because epoch and leader slot data is not available yet.`;
+ case SelectedSlotValidityState.OutsideEpoch:
+ return `Slot ${slot} is outside this epoch. Please try again with a different ID between ${epoch?.start_slot} - ${epoch?.end_slot}.`;
+ case SelectedSlotValidityState.NotYou:
+ return `Slot ${slot} belongs to another validator. Please try again with a slot number processed by you.`;
+ case SelectedSlotValidityState.BeforeFirstProcessed:
+ return `Slot ${slot} is in this epoch but its details are unavailable because it was processed before the restart.`;
+ case SelectedSlotValidityState.Future:
+ return `Slot ${slot} is valid but in the future. To view details, check again after it has been processed.`;
+ case SelectedSlotValidityState.Valid:
+ return "";
+ }
+ }, [epoch?.end_slot, epoch?.start_slot, slot, state]);
+
+ return (
+
+ {message}
+
+ );
+}
+
+function SlotSearch() {
+ const { selectedSlot, setSelectedSlot } = useSlotSearchParam();
+ const [searchSlot, setSearchSlot] = useState("");
+ const epoch = useAtomValue(epochAtom);
+ const { isValid } = useAtomValue(baseSelectedSlotAtom);
+
+ const submitSearch = useCallback(() => {
+ if (searchSlot === "") setSelectedSlot(undefined);
+ else setSelectedSlot(Number(searchSlot));
+ }, [searchSlot, setSelectedSlot]);
+
+ useEffect(() => {
+ if (selectedSlot === undefined) setSearchSlot("");
+ else setSearchSlot(String(selectedSlot));
+ }, [selectedSlot]);
+
+ return (
+
+
+ {!isValid && }
+
+
+ );
+}
+
+function QuickSearch() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function EarliestProcessedSlotSearch() {
+ const earliestProcessedSlotLeader = useAtomValue(
+ earliestProcessedSlotLeaderAtom,
+ );
+ return (
+
+ );
+}
+
+function MostRecentSlotSearch() {
+ const mostRecentSlotLeader = useAtomValue(mostRecentSlotLeaderAtom);
+
+ return (
+
+ );
+}
+
+function LastSkippedSlotSearch() {
+ const skippedSlots = useAtomValue(skippedSlotsAtom);
+ const slot = useMemo(
+ () => (skippedSlots ? skippedSlots[skippedSlots?.length - 1] : undefined),
+ [skippedSlots],
+ );
+
+ return (
+
+ );
+}
+
+function QuickSearchCard({
+ Icon,
+ label,
+ color,
+ slot,
+ disabled = false,
+}: {
+ Icon: FC>;
+ label: string;
+ color: string;
+ slot?: number;
+ disabled?: boolean;
+}) {
+ const { setSelectedSlot } = useSlotSearchParam();
+
+ return (
+ setSelectedSlot(slot)}
+ aria-disabled={disabled}
+ >
+
+
+ {label}
+
+
+
+ {slot ?? "--"}
+
+ {slot && }
+
+
+ );
+}
+
+function TimeAgo({ slot }: { slot: number }) {
+ const { timeAgoText } = useTimeAgo(slot, {
+ showOnlyTwoSignificantUnits: true,
+ });
+
+ return (
+
+ {timeAgoText}
+
+ );
+}
+
+const navigationTop = clusterIndicatorHeight + headerHeight;
+
+function SlotNavigation({ slot }: { slot: number }) {
+ const { pubkey } = useSlotInfo(slot);
+ const epoch = useAtomValue(epochAtom);
+ const earliestProcessedSlotLeader = useAtomValue(
+ earliestProcessedSlotLeaderAtom,
+ );
+ const mostRecentSlotLeader = useAtomValue(mostRecentSlotLeaderAtom);
+
+ const {
+ previousSlotGroupLastSlot,
+ isPreviousDisabled,
+ nextSlotGroupLeader,
+ isNextDisabled,
+ } = useMemo(() => {
+ const leaderSlotsForValidator =
+ epoch && pubkey ? getLeaderSlots(epoch, pubkey) : [];
+ const slotIndexForValidator = leaderSlotsForValidator
+ ? leaderSlotsForValidator.indexOf(slot)
+ : undefined;
+ if (slotIndexForValidator === undefined) return {};
+
+ const previousSlotGroupLeader =
+ leaderSlotsForValidator[slotIndexForValidator - 1];
+ const previousSlotGroupLastSlot = previousSlotGroupLeader
+ ? previousSlotGroupLeader + (slotsPerLeader - 1)
+ : undefined;
+ const isPreviousDisabled =
+ previousSlotGroupLastSlot === undefined ||
+ earliestProcessedSlotLeader === undefined ||
+ previousSlotGroupLastSlot < earliestProcessedSlotLeader;
+
+ const nextSlotGroupLeader =
+ leaderSlotsForValidator[slotIndexForValidator + 1];
+ const isNextDisabled =
+ nextSlotGroupLeader === undefined ||
+ mostRecentSlotLeader === undefined ||
+ mostRecentSlotLeader + slotsPerLeader <= nextSlotGroupLeader;
+
+ return {
+ previousSlotGroupLastSlot,
+ isPreviousDisabled,
+ nextSlotGroupLeader,
+ isNextDisabled,
+ };
+ }, [earliestProcessedSlotLeader, epoch, mostRecentSlotLeader, pubkey, slot]);
+
+ return (
+
+
+ {previousSlotGroupLastSlot && (
+
+ )}
+
+
+ {Array.from({ length: slotsPerLeader }).map((_, slotIdx) => {
+ const slotNumber = slot + slotIdx;
+ return (
+
+ );
+ })}
+
+
+ {nextSlotGroupLeader && (
+
+ )}
+
+
+ );
+}
+
+function SlotHeader({ slot }: { slot: number }) {
+ const { peer, isLeader, name } = useSlotInfo(slot);
+
+ return (
+
+
+ {name}
+
+
+
+
+ );
+}
+
+function SlotStatus({
+ slot,
+ searchSlot,
+ disabled = false,
+}: {
+ slot: number;
+ searchSlot: number;
+ disabled?: boolean;
+}) {
+ const selectedSlot = useAtomValue(selectedSlotAtom);
+ const queryPublish = useSlotQueryPublish(slot);
+ const isSelected = useMemo(() => slot === selectedSlot, [slot, selectedSlot]);
+
+ const isSkipped = useMemo(
+ () => queryPublish.publish?.skipped,
+ [queryPublish.publish?.skipped],
+ );
+
+ return (
+
+
+ {slot !== undefined && (
+
+ {slot}
+
+ )}
+ {queryPublish.publish?.skipped ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
+
+function SlotContent() {
+ const slot = useAtomValue(selectedSlotAtom);
+ if (slot === undefined) return;
+ const slotGroupLeader = getSlotGroupLeader(slot);
+
+ return (
+
+
+
diff --git a/src/features/SlotDetails/slotDetails.module.css b/src/features/SlotDetails/slotDetails.module.css
new file mode 100644
index 00000000..bed8e308
--- /dev/null
+++ b/src/features/SlotDetails/slotDetails.module.css
@@ -0,0 +1,125 @@
+.search {
+ text-align: center;
+}
+
+.error-text {
+ color: var(--failure-color);
+}
+
+.clickable {
+ cursor: pointer;
+}
+
+.quick-search-row {
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.quick-search {
+ width: 164px;
+ padding: 15px;
+ flex-direction: column;
+ gap: 10px;
+ border-radius: 8px;
+ border: 1px solid var(--container-border-color);
+ background: var(--container-background-color);
+
+ &:not(.clickable) {
+ cursor: not-allowed;
+ pointer-events: none;
+ opacity: 0.6;
+ }
+}
+
+.slot-name {
+ font-size: 18px;
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.slot-navigation-container {
+ height: 36.5px;
+ box-shadow: 0 4px 4px 0 var(--color-background);
+}
+
+.slot-navigation {
+ padding: 3px;
+ align-items: center;
+ gap: 3px;
+ border-radius: 5px;
+ border: 1px solid var(--slot-details-my-slots-color);
+ border-top-width: 3px;
+
+ & .link {
+ text-decoration: none;
+ flex: 1;
+ }
+
+ & .slot-status {
+ padding: 3px 10px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ flex: 1 0 0;
+ font-size: 12px;
+ font-weight: 400;
+ border-radius: 3px;
+ background: var(--slot-details-background-color);
+ color: var(--slot-details-color);
+
+ &.selected-slot {
+ font-weight: 600;
+ background: var(--slot-details-selected-background-color);
+ color: var(--slot-details-selected-color);
+ }
+
+ &.skipped-slot {
+ background: var(--slot-details-skipped-background-color);
+ }
+
+ &.skipped-slot.selected-slot {
+ background: var(--slot-details-skipped-selected-background-color);
+ }
+ }
+
+ &.previous-navigation,
+ &.next-navigation {
+ width: 125px;
+
+ &.disabled {
+ border: 1px solid var(--slot-details-disabled-slot-border-color);
+ }
+
+ & a {
+ height: 100%;
+ }
+
+ & .slot-status {
+ height: 100%;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ }
+
+ &.previous-navigation {
+ justify-content: end;
+ mask-image: linear-gradient(to right, transparent 0%, black 100%);
+ }
+
+ &.next-navigation {
+ justify-content: start;
+ mask-image: linear-gradient(to left, transparent 0%, black 100%);
+ }
+}
+
+.header {
+ display: flex;
+ padding: 10px;
+ border-radius: 8px;
+ border: 1px solid var(--container-border-color);
+ background: var(--container-background-color);
+}
diff --git a/src/features/SlotDetails/useSearchParams.ts b/src/features/SlotDetails/useSearchParams.ts
new file mode 100644
index 00000000..451f5ca2
--- /dev/null
+++ b/src/features/SlotDetails/useSearchParams.ts
@@ -0,0 +1,19 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { Route } from "../../routes/slotDetails";
+
+export function useSlotSearchParam() {
+ const search = Route.useSearch();
+ const navigate = useNavigate({
+ from: Route.fullPath,
+ });
+
+ const setSelectedSlot = useCallback(
+ (slot?: number) => {
+ void navigate({ search: { slot }, replace: true });
+ },
+ [navigate],
+ );
+
+ return { selectedSlot: search?.slot, setSelectedSlot };
+}
diff --git a/src/features/StartupProgress/SnapshotProgress.tsx b/src/features/StartupProgress/SnapshotProgress.tsx
index e69998e6..835130f0 100644
--- a/src/features/StartupProgress/SnapshotProgress.tsx
+++ b/src/features/StartupProgress/SnapshotProgress.tsx
@@ -1,7 +1,7 @@
import { Box, Flex, Progress, Text } from "@radix-ui/themes";
import styles from "./startupProgress.module.css";
import { Duration } from "luxon";
-import { getTimeTillText } from "../../utils";
+import { getDurationText } from "../../utils";
import byteSize from "byte-size";
interface SnapshotProgressProps {
@@ -46,7 +46,7 @@ export default function SnapshotProgress({
{getFormattedSize()}
- ~{getTimeTillText(remainingDuration)}
+ ~{getDurationText(remainingDuration)}
diff --git a/src/features/StartupProgress/container.module.css b/src/features/StartupProgress/container.module.css
new file mode 100644
index 00000000..0f84bce5
--- /dev/null
+++ b/src/features/StartupProgress/container.module.css
@@ -0,0 +1,7 @@
+.container {
+ transition: filter 0.5s;
+
+ &.blur {
+ filter: blur(10px);
+ }
+}
diff --git a/src/features/StartupProgress/index.tsx b/src/features/StartupProgress/index.tsx
index 4f58161c..98435074 100644
--- a/src/features/StartupProgress/index.tsx
+++ b/src/features/StartupProgress/index.tsx
@@ -1,35 +1,23 @@
import { useAtomValue } from "jotai";
import type { PropsWithChildren } from "react";
-import { useEffect } from "react";
import { showStartupProgressAtom } from "./atoms";
import Body from "./Body";
-import { animated, useSpring } from "@react-spring/web";
+import styles from "./container.module.css";
+import clsx from "clsx";
export default function StartupProgress({ children }: PropsWithChildren) {
const showStartupProgress = useAtomValue(showStartupProgressAtom);
- const [springs, api] = useSpring(() => ({
- from: showStartupProgress ? { filter: "blur(10px)" } : undefined,
- }));
-
- useEffect(() => {
- api.stop();
- if (showStartupProgress) {
- void api.start({
- to: { filter: "blur(10px)" },
- });
- } else {
- void api.start({
- from: { filter: "blur(10px)" },
- to: { filter: "blur(0px)" },
- });
- }
- }, [api, showStartupProgress]);
-
return (
<>
- {children}
+
+ {children}
+
);
}
diff --git a/src/features/StartupProgress/inprogressStep.module.css b/src/features/StartupProgress/inprogressStep.module.css
index 93917de7..1c8951ac 100644
--- a/src/features/StartupProgress/inprogressStep.module.css
+++ b/src/features/StartupProgress/inprogressStep.module.css
@@ -1,8 +1,8 @@
.container {
padding: 8px 14px;
border-radius: 12px;
- border: 1px solid rgba(250, 250, 250, 0.12);
- background: rgba(250, 250, 250, 0.05);
+ border: 1px solid var(--container-border-color);
+ background: var(--container-background-color);
display: grid;
grid: auto-flow / auto 1fr;
column-gap: 10px;
diff --git a/src/hooks/useCurrentRoute.ts b/src/hooks/useCurrentRoute.ts
new file mode 100644
index 00000000..3b0594ee
--- /dev/null
+++ b/src/hooks/useCurrentRoute.ts
@@ -0,0 +1,23 @@
+import { useLocation } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+export type RouteLabel = "Overview" | "Schedule" | "Gossip" | "Slot Details";
+export const RouteLabelToPath: Record = {
+ Overview: "/",
+ Schedule: "/leaderSchedule",
+ Gossip: "/gossip",
+ "Slot Details": "/slotDetails",
+};
+
+export function useCurrentRoute() {
+ const location = useLocation();
+
+ const currentRoute: RouteLabel = useMemo(() => {
+ const match = Object.entries(RouteLabelToPath).find(
+ ([_, path]) => location.pathname === path,
+ );
+ return match ? (match[0] as RouteLabel) : "Overview";
+ }, [location.pathname]);
+
+ return currentRoute;
+}
diff --git a/src/hooks/useIsLeaderGroupSkipped.tsx b/src/hooks/useIsLeaderGroupSkipped.tsx
new file mode 100644
index 00000000..e3924d95
--- /dev/null
+++ b/src/hooks/useIsLeaderGroupSkipped.tsx
@@ -0,0 +1,23 @@
+import { slotsPerLeader } from "../consts";
+import { atom, useAtomValue } from "jotai";
+import { slotPublishAtomFamily } from "../atoms";
+import memoize from "micro-memoize";
+import { getSlotGroupLeader } from "../utils";
+
+const leaderGroupSkippedAtom = memoize(
+ (slot: number) =>
+ atom((get) => {
+ const slotGroupLeader = getSlotGroupLeader(slot);
+ for (let i = 0; i < slotsPerLeader; i++) {
+ if (get(slotPublishAtomFamily(slotGroupLeader + i))?.skipped)
+ return true;
+ }
+ return false;
+ }),
+ { maxSize: 500 },
+);
+
+/** Hook does not query for slot status, assumes another component will fill the status cache */
+export function useIsLeaderGroupSkipped(slot: number) {
+ return useAtomValue(leaderGroupSkippedAtom(slot));
+}
diff --git a/src/hooks/useNextSlot.ts b/src/hooks/useNextSlot.ts
index 025b34e9..1bfc0c70 100644
--- a/src/hooks/useNextSlot.ts
+++ b/src/hooks/useNextSlot.ts
@@ -9,10 +9,17 @@ import {
slotDurationAtom,
nextEpochLeaderSlotAtom,
} from "../atoms";
-import { getTimeTillText } from "../utils";
+import type { DurationOptions } from "../utils";
+import { getDurationText } from "../utils";
import { useInterval } from "react-use";
-export default function useNextSlot() {
+export default function useNextSlot({
+ showNowIfCurrent,
+ durationOptions,
+}: {
+ showNowIfCurrent: boolean;
+ durationOptions?: DurationOptions;
+}) {
const prevLeaderSlot = useAtomValue(prevLeaderSlotAtom);
const _nextLeaderSlot = useAtomValue(nextLeaderSlotAtom);
const nextEpochLeaderSlot = useAtomValue(nextEpochLeaderSlotAtom);
@@ -72,9 +79,17 @@ export default function useNextSlot() {
return progress;
}, [estimatedSlot, nextLeaderSlot, prevLeaderSlot]);
+ if (showNowIfCurrent && isLeader) {
+ return {
+ progressSinceLastLeader: 100,
+ nextSlotText: "Now",
+ nextLeaderSlot: currentSlot,
+ };
+ }
+
return {
- progressSinceLastLeader: isLeader ? 100 : (progressSinceLastLeader ?? 0),
- nextSlotText: isLeader ? "Now" : getTimeTillText(nextSlotDuration),
- nextLeaderSlot: isLeader ? currentSlot : nextLeaderSlot,
+ progressSinceLastLeader: progressSinceLastLeader ?? 0,
+ nextSlotText: getDurationText(nextSlotDuration, durationOptions),
+ nextLeaderSlot,
};
}
diff --git a/src/hooks/usePeer.ts b/src/hooks/usePeer.ts
index 55b3f653..a8433246 100644
--- a/src/hooks/usePeer.ts
+++ b/src/hooks/usePeer.ts
@@ -1,14 +1,7 @@
import { useAtomValue } from "jotai";
-import { focusAtom } from "jotai-optics";
-import { peersAtom } from "../atoms";
-import { useMemo } from "react";
+import { peersAtomFamily } from "../atoms";
import type { Peer } from "../api/types";
export function usePeer(identity?: string): Peer | undefined {
- const atom = useMemo(
- () => focusAtom(peersAtom, (optic) => optic.prop(identity ?? "")),
- [identity],
- );
-
- return useAtomValue(atom);
+ return useAtomValue(peersAtomFamily(identity));
}
diff --git a/src/hooks/useSlotInfo.ts b/src/hooks/useSlotInfo.ts
new file mode 100644
index 00000000..951fe67e
--- /dev/null
+++ b/src/hooks/useSlotInfo.ts
@@ -0,0 +1,21 @@
+import { useAtomValue } from "jotai";
+import { identityKeyAtom } from "../api/atoms";
+import { usePubKey } from "./usePubKey";
+import { usePeer } from "./usePeer";
+
+export function useSlotInfo(slot: number) {
+ const myPubkey = useAtomValue(identityKeyAtom);
+ const pubkey = usePubKey(slot);
+ const peer = usePeer(pubkey ?? "");
+
+ const isLeader = myPubkey === pubkey;
+ const name = peer?.info?.name ?? (isLeader ? "You" : "Private");
+ const version = peer?.gossip?.version;
+ const client = version
+ ? version[0] === "0"
+ ? "Frankendancer"
+ : "Agave"
+ : undefined;
+
+ return { pubkey, peer, isLeader, name, client, version };
+}
diff --git a/src/hooks/useSlotQuery.ts b/src/hooks/useSlotQuery.ts
index 7be989d3..4a1a6d3e 100644
--- a/src/hooks/useSlotQuery.ts
+++ b/src/hooks/useSlotQuery.ts
@@ -1,11 +1,11 @@
import { useAtomValue } from "jotai";
import {
getIsFutureSlotAtom,
- getSlotPublishAtom,
- getSlotResponseAtom,
+ slotPublishAtomFamily,
+ slotResponseAtomFamily,
} from "../atoms";
import { useMount } from "react-use";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useWebSocketSend } from "../api/ws/utils";
import memoize from "micro-memoize";
import type { SendMessage } from "../api/ws/types";
@@ -71,9 +71,7 @@ function useSlotQuery(
) {
const wsSend = useWebSocketSend();
- const isFutureSlot = useAtomValue(
- useMemo(() => getIsFutureSlotAtom(slot), [slot]),
- );
+ const isFutureSlot = useAtomValue(getIsFutureSlotAtom(slot));
const query = useCallback(() => {
if (!slot) return;
@@ -84,7 +82,12 @@ function useSlotQuery(
sendQuery();
}, [query_type, isFutureSlot, slot, skipQuery, wsSend]);
- useEffect(query, [query]);
+ useEffect(() => {
+ const queryTimeout = setTimeout(() => query(), 250);
+ return () => {
+ clearTimeout(queryTimeout);
+ };
+ }, [query]);
const [waitingForData, setWaitingForData] = useState(true);
useMount(() => {
@@ -97,7 +100,7 @@ function useSlotQuery(
}
export function useSlotQueryPublish(slot?: number) {
- const publish = useAtomValue(useMemo(() => getSlotPublishAtom(slot), [slot]));
+ const publish = useAtomValue(slotPublishAtomFamily(slot));
const skipQuery = !!publish;
@@ -111,9 +114,8 @@ export function useSlotQueryPublish(slot?: number) {
}
export function useSlotQueryResponseDetailed(slot?: number) {
- const response = useAtomValue(
- useMemo(() => getSlotResponseAtom(slot), [slot]),
- );
+ const response = useAtomValue(slotResponseAtomFamily(slot));
+
const skipQuery =
!!response?.waterfall &&
!!response?.tile_timers &&
@@ -129,9 +131,8 @@ export function useSlotQueryResponseDetailed(slot?: number) {
}
export function useSlotQueryResponseTransactions(slot?: number) {
- const response = useAtomValue(
- useMemo(() => getSlotResponseAtom(slot), [slot]),
- );
+ const response = useAtomValue(slotResponseAtomFamily(slot));
+
const skipQuery = !!response?.transactions;
const { hasWaitedForData } = useSlotQuery(
diff --git a/src/hooks/useTimeAgo.ts b/src/hooks/useTimeAgo.ts
new file mode 100644
index 00000000..df4381d0
--- /dev/null
+++ b/src/hooks/useTimeAgo.ts
@@ -0,0 +1,39 @@
+import { useHarmonicIntervalFn, useUpdate } from "react-use";
+import { useSlotQueryPublish } from "./useSlotQuery";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+import type { DurationOptions } from "../utils";
+import { getDurationText, slowDateTimeNow } from "../utils";
+
+export function useTimeAgo(slot: number, options?: DurationOptions) {
+ const query = useSlotQueryPublish(slot);
+ const update = useUpdate();
+
+ useHarmonicIntervalFn(update, 1_000);
+
+ const [slotDateTime, setSlotDateTime] = useState();
+
+ useEffect(() => {
+ if (!query.publish?.completed_time_nanos) return;
+
+ setSlotDateTime(
+ DateTime.fromMillis(
+ Math.trunc(Number(query.publish?.completed_time_nanos) / 1_000_000),
+ ),
+ );
+ }, [query.publish]);
+
+ const getDiffDuration = () => {
+ if (!slotDateTime) return;
+ return slowDateTimeNow.diff(slotDateTime).rescale();
+ };
+
+ const diffDuration = getDiffDuration();
+
+ return {
+ slotDateTime,
+ timeAgoText: diffDuration
+ ? `${getDurationText(diffDuration, options)} ago`
+ : undefined,
+ };
+}
diff --git a/src/index.css b/src/index.css
index 9d8a599d..055645ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,8 +15,6 @@
body {
margin: 0;
- /* display: flex; */
- /* place-items: center; */
min-width: 320px;
min-height: 100vh;
}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index d229268f..3c08b034 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,9 +1,16 @@
import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { lazy } from "react";
-import Header from "../features/Header";
-import { Container } from "@radix-ui/themes";
+import { lazy, useEffect } from "react";
+import { Box, Flex } from "@radix-ui/themes";
import StartupProgress from "../features/StartupProgress";
import Toast from "../features/Toast";
+import Navigation from "../features/Navigation";
+import Header from "../features/Header";
+import { useMedia } from "react-use";
+import { isNavCollapsedAtom } from "../atoms";
+import { useAtom } from "jotai";
+import { headerSpacing, narrowNavMedia, slotsNavSpacing } from "../consts";
+import NavBlur from "../features/Navigation/NavBlur";
+
// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -19,16 +26,58 @@ const TanStackRouterDevtools =
})),
);
-export const Route = createRootRoute({
- component: () => (
+export const Route = createRootRoute({ component: Root });
+
+function Root() {
+ return (
<>
-
+
-
-
+
+
+
+
+
+
- ),
-});
+ );
+}
+
+function OutletContainer() {
+ const isNarrow = useMedia(narrowNavMedia);
+ const [isNavCollapsed, setIsNavCollapsed] = useAtom(isNavCollapsedAtom);
+
+ useEffect(() => {
+ // automatically open / close on narrow switch
+ setIsNavCollapsed(isNarrow);
+ }, [isNarrow, setIsNavCollapsed]);
+
+ return (
+
+
+ {isNarrow && !isNavCollapsed && }
+
+ );
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index f9c5c437..988f9c23 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,13 +1,6 @@
import { createFileRoute } from "@tanstack/react-router";
import Overview from "../features/Overview";
-import { z } from "zod";
-import { fallback, zodValidator } from "@tanstack/zod-adapter";
-
-const searchParamsSchema = z.object({
- slot: fallback(z.number().optional(), undefined),
-});
export const Route = createFileRoute("/")({
- validateSearch: zodValidator(searchParamsSchema),
component: Overview,
});
diff --git a/src/uplotReact/UplotReact.tsx b/src/uplotReact/UplotReact.tsx
index 57297d5d..9b4573da 100644
--- a/src/uplotReact/UplotReact.tsx
+++ b/src/uplotReact/UplotReact.tsx
@@ -149,6 +149,10 @@ export default function UplotReact({
}
return target ? null : (
-
+
);
}
diff --git a/src/uplotReact/UplotTooltip.tsx b/src/uplotReact/UplotTooltip.tsx
index 38dd41c2..3ffd25a6 100644
--- a/src/uplotReact/UplotTooltip.tsx
+++ b/src/uplotReact/UplotTooltip.tsx
@@ -1,5 +1,9 @@
import type { PropsWithChildren } from "react";
+import { Portal } from "radix-ui";
+
import styles from "./uplotTooltip.module.css";
+import { containerElAtom } from "../atoms";
+import { useAtomValue } from "jotai";
interface UplotTooltipProps {
elId: string;
@@ -8,9 +12,11 @@ export default function UplotTooltip({
elId,
children,
}: PropsWithChildren) {
+ const containerEl = useAtomValue(containerElAtom);
+
return (
-
+
);
}
diff --git a/src/uplotReact/baseTooltipPlugin.ts b/src/uplotReact/baseTooltipPlugin.ts
index 3ff4cf1f..6f66206c 100644
--- a/src/uplotReact/baseTooltipPlugin.ts
+++ b/src/uplotReact/baseTooltipPlugin.ts
@@ -1,10 +1,15 @@
import type uPlot from "uplot";
import placement from "../uplot/placement";
import { xScaleKey } from "../features/Overview/SlotPerformance/ComputeUnitsCard/consts";
+import { throttle } from "lodash";
// Persisted tooltip function should persist across charts, only 1 shown tooltip at a time
let persistTooltip = false;
+function getScrollContainer() {
+ return document.getElementById("scroll-container") ?? document.body;
+}
+
export function baseTooltipPlugin({
elId,
showOnCursor,
@@ -56,6 +61,11 @@ export function baseTooltipPlugin({
}
}
+ const tClosePersistedTooltip = throttle(closePersistedTooltip, 100, {
+ leading: true,
+ trailing: true,
+ });
+
function setCursorPointer() {
if (!showPointer) return;
@@ -98,15 +108,10 @@ export function baseTooltipPlugin({
overlay.style.display = "none";
overlay.style.pointerEvents = "none";
- // overlay.style.zIndex = "10000"
-
over = u.over;
-
- // bound = over;
bound = document.body;
over.onmouseenter = () => {
- // overlay.style.display = "block";
isCurrentlyHovered = true;
};
@@ -117,14 +122,21 @@ export function baseTooltipPlugin({
unsetCursorPointer();
persistTooltip = false;
};
+
+ getScrollContainer().addEventListener("scroll", tClosePersistedTooltip);
},
destroy: () => {
over.onmouseenter = null;
over.onmouseleave = null;
unsetCursorPointer();
closePersistedTooltip();
+
+ getScrollContainer().removeEventListener(
+ "scroll",
+ tClosePersistedTooltip,
+ );
},
- setSize: (u) => {
+ setSize: () => {
syncBounds();
},
syncRect: () => {
@@ -140,7 +152,7 @@ export function baseTooltipPlugin({
if (left === undefined || top === undefined || idx == null) return;
const xVal = u.posToVal(left ?? 0, xScaleKey);
- const anchor = { left: left + bLeft + 5, top: top + bTop + 5 };
+ const anchor = { left: left + bLeft + 5, top: top + bTop };
const showTooltip = showOnCursor(u, xVal, idx);
if (showTooltip) {
diff --git a/src/utils.ts b/src/utils.ts
index 2653dedf..d13e7d22 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,7 +1,16 @@
import type { Duration } from "luxon";
import { DateTime } from "luxon";
-import type { Epoch, Peer } from "./api/types";
+import type { Cluster, Epoch, Peer, SlotTransactions } from "./api/types";
import { lamportsPerSol, slotsPerLeader } from "./consts";
+import {
+ clusterMainnetBetaColor,
+ clusterTestnetColor,
+ clusterDevelopmentColor,
+ clusterDevnetColor,
+ clusterPythnetColor,
+ clusterPythtestColor,
+ clusterUnknownColor,
+} from "./colors";
export function getLeaderSlots(epoch: Epoch, pubkey: string) {
return epoch.leader_slots.reduce((leaderSlots, pubkeyIndex, i) => {
@@ -11,56 +20,70 @@ export function getLeaderSlots(epoch: Epoch, pubkey: string) {
}, []);
}
-export function getTimeTillText(
- duration?: Duration,
- options: { showSeconds: boolean } = { showSeconds: true },
-) {
- if (!duration) return "Never";
-
- if (duration.toMillis() < 0) return "0s";
-
- let text = "";
+export function getSlotGroupLeader(slot: number) {
+ return slot - (slot % slotsPerLeader);
+}
- if (duration.years) {
- if (text) text += " ";
- text += `${duration.years}y`;
- }
+const descendingUnits = [
+ { unit: "years", suffix: "y" },
+ { unit: "months", suffix: "m" },
+ { unit: "weeks", suffix: "w" },
+ { unit: "days", suffix: "d" },
+ { unit: "hours", suffix: "h" },
+ { unit: "minutes", suffix: "m" },
+ { unit: "seconds", suffix: "s" },
+] as const;
+
+export interface DurationOptions {
+ showOnlyTwoSignificantUnits?: boolean;
+ omitSeconds?: boolean;
+}
- if (duration.months) {
- if (text) text += " ";
- text += `${duration.months}m`;
+function getUnitValues(
+ duration: Duration,
+ options?: DurationOptions,
+): [number, string][] {
+ if (options?.showOnlyTwoSignificantUnits) {
+ const firstUnitIndex = descendingUnits.findIndex(
+ ({ unit }) => !!duration[unit],
+ );
+ return descendingUnits
+ .slice(firstUnitIndex, firstUnitIndex + 2)
+ .map(({ unit, suffix }) => [duration[unit], suffix]);
}
- if (duration.weeks) {
- if (text) text += " ";
- text += `${duration.weeks}w`;
- }
+ return descendingUnits
+ .filter(({ unit }) => {
+ if (options?.omitSeconds && unit === "seconds") return false;
- if (duration.days) {
- if (text) text += " ";
- text += `${duration.days}d`;
- }
+ // drop zero values
+ return !!duration[unit];
+ })
+ .map(({ unit, suffix }) => [duration[unit], suffix]);
+}
- if (duration.hours) {
- if (text) text += " ";
- text += `${duration.hours}h`;
- }
+export function getDurationValues(
+ duration?: Duration,
+ options?: DurationOptions,
+): [number, string][] | undefined {
+ if (!duration) return;
- if (duration.minutes) {
- if (text) text += " ";
- text += `${duration.minutes}m`;
- }
+ if (duration.toMillis() < 1000) return [[0, "s"]];
- if (duration.seconds && options.showSeconds) {
- if (text) text += " ";
- text += `${duration.seconds}s`;
- }
+ const units = getUnitValues(duration, options);
+ return units.length ? units : [[0, "s"]];
+}
- if (!text) {
- text = "0s";
- }
+export function getDurationText(
+ duration?: Duration,
+ options?: DurationOptions,
+) {
+ const values = getDurationValues(duration, options);
+ if (!values) return "Never";
- return text;
+ return values.reduce((acc, valSuffix) => {
+ return `${acc} ${valSuffix.join("")}`;
+ }, "");
}
export let slowDateTimeNow = DateTime.now();
@@ -82,24 +105,30 @@ export function getStake(peer: Peer) {
);
}
-export function getFmtStake(stake?: bigint) {
- if (stake === undefined) return;
+export function getSolString(lamportAmount?: bigint) {
+ if (lamportAmount === undefined) return;
- let value = "";
- const solAmount = Number(stake) / lamportsPerSol;
+ const solAmount = Number(lamportAmount) / lamportsPerSol;
if (solAmount < 1) {
- value = solAmount.toLocaleString();
- } else if (solAmount < 100) {
- value = solAmount.toLocaleString(undefined, {
+ return solAmount.toLocaleString();
+ }
+
+ if (solAmount < 100) {
+ return solAmount.toLocaleString(undefined, {
maximumFractionDigits: 2,
});
- } else {
- value = solAmount.toLocaleString(undefined, {
- maximumFractionDigits: 0,
- });
}
- return `${value}\xa0SOL`;
+ return solAmount.toLocaleString(undefined, {
+ maximumFractionDigits: 0,
+ });
+}
+
+export function getFmtStake(stake?: bigint) {
+ const solString = getSolString(stake);
+ if (solString === undefined) return;
+
+ return `${solString}\xa0SOL`;
}
/** Dumb workaround for Array.isArray type checking with eslint for readonly arrays */
@@ -141,3 +170,43 @@ export function copyToClipboard(copyValue: string) {
document.body.removeChild(copyEl);
}
}
+
+export function getClusterColor(cluster?: Cluster) {
+ switch (cluster) {
+ case "mainnet-beta":
+ return clusterMainnetBetaColor;
+ case "testnet":
+ return clusterTestnetColor;
+ case "development":
+ return clusterDevelopmentColor;
+ case "devnet":
+ return clusterDevnetColor;
+ case "pythnet":
+ return clusterPythnetColor;
+ case "pythtest":
+ return clusterPythtestColor;
+ case "unknown":
+ case undefined:
+ return clusterUnknownColor;
+ }
+}
+
+export function isElementFullyInView(el: HTMLElement) {
+ const rect = el.getBoundingClientRect();
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <=
+ (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ );
+}
+
+export function getIncome(transactions: SlotTransactions, txnIdx: number) {
+ const feesAndTips =
+ transactions.txn_priority_fee[txnIdx] +
+ transactions.txn_transaction_fee[txnIdx] +
+ transactions.txn_tips[txnIdx];
+
+ return Number(feesAndTips);
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe2..b1f45c78 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
///
+///
diff --git a/tsconfig.json b/tsconfig.json
index a6ece48d..660aedcb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,6 +18,8 @@
"strict": true,
"noFallthroughCasesInSwitch": true,
+ "verbatimModuleSyntax": true,
+
"plugins": [
{
"name": "typescript-plugin-css-modules",
diff --git a/vite.config.ts b/vite.config.ts
index 7e5caed1..84d43943 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@ import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
import license from "rollup-plugin-license";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
+import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
@@ -36,6 +37,7 @@ export default defineConfig({
},
plugins: [
react(),
+ svgr(),
TanStackRouterVite(),
wasm(),
topLevelAwait(),