Skip to content

chore: slot detail stats density and layout #158

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: amliu/navigation1
Choose a base branch
from
Open

chore: slot detail stats density and layout #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ export const slotDetailsSelectedColor = "#e3efff";
export const slotDetailsDisabledSlotBorderColor = "#484D53B2";
export const slotDetailsStatsPrimary = "var(--gray-11)";
export const slotDetailsStatsSecondary = "var(--gray-10)";
export const slotDetailsStatsTertiary = "var(--gray-12)";

// slots list
export const slotsListSlotBackgroundColor = "#070A13";
Expand Down
9 changes: 6 additions & 3 deletions src/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@ import type { PropsWithChildren, HTMLAttributes } from "react";

interface CardProps {
hideChildren?: boolean;
includeBg?: boolean;
isNarrow?: boolean;
}

export default function Card({
children,
hideChildren,
includeBg = true,
isNarrow = false,
...props
}: PropsWithChildren<CardProps & HTMLAttributes<HTMLDivElement>>) {
return (
<div className={clsx(styles.card, { [styles.bg]: includeBg })} {...props}>
<div
{...props}
className={clsx(styles.card, isNarrow && styles.narrow, props.className)}
>
{!hideChildren && children}
</div>
);
Expand Down
7 changes: 4 additions & 3 deletions src/components/card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.card {
padding: 10px;
border-radius: 8px;
border: 1px solid var(--container-border-color);
padding: 8px 16px;
background: var(--container-background-color);

&.bg {
Copy link
Collaborator

@asuzuki-jumptrading asuzuki-jumptrading Nov 29, 2025

Choose a reason for hiding this comment

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

Does this mean all cards will have this background? Are there any cases where we didn't want the bg?

background: var(--container-background-color);
&.narrow {
padding: 4px;
}
}
2 changes: 1 addition & 1 deletion src/consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const txnErrorCodeMap: Record<string, string> = {
export const nonBreakingSpace = "\u00A0";

export const clusterIndicatorHeight = 5;
export const slotNavHeight = 29;
export const slotNavHeight = 30;

export const headerHeight = 48;
export const headerSpacing = 13;
Expand Down
16 changes: 11 additions & 5 deletions src/features/Overview/SlotPerformance/TileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import TileSparkLineExpandedContainer from "./TileSparkLineExpandedContainer";
import { useMeasure } from "react-use";
import type React from "react";
import { useLastDefinedValue, useTileSparkline } from "./useTileSparkline";
import clsx from "clsx";

interface TileCardProps {
header: string;
Expand All @@ -23,7 +24,8 @@ interface TileCardProps {
sparklineHeight?: number;
isExpanded?: boolean;
setIsExpanded?: (isExpanded: boolean) => void;
includeBg?: boolean;
isDark?: boolean;
isNarrow?: boolean;
}

export default function TileCard({
Expand All @@ -37,7 +39,8 @@ export default function TileCard({
sparklineHeight,
isExpanded = false,
setIsExpanded = () => {},
includeBg = true,
isDark = false,
isNarrow,
}: TileCardProps) {
const [ref, { width }] = useMeasure<HTMLDivElement>();

Expand All @@ -60,7 +63,10 @@ export default function TileCard({

return (
<Flex ref={ref}>
<Card includeBg={includeBg} style={{ width: "100%" }}>
<Card
className={clsx(styles.fullWidth, isDark && styles.dark)}
isNarrow={isNarrow}
>
<Flex direction="column" justify="between" height="100%" gap="1">
<TileHeader
header={header}
Expand All @@ -73,7 +79,7 @@ export default function TileCard({
value={avgBusy}
queryBusy={aggQueryBusyPerTs}
height={sparklineHeight}
includeBg={includeBg}
background={isDark ? "#0000001F" : undefined}
/>
<TileSparkLineExpandedContainer
tileCountArr={tileCountArr}
Expand All @@ -100,7 +106,7 @@ export default function TileCard({
key={i}
className={styles.tile}
style={{
background: `gray`,
background: isDark ? "#232A38" : "gray",
}}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions src/features/Overview/SlotPerformance/TileSparkLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ interface TileParkLineProps {
value?: number;
queryBusy?: number[];
height?: number;
includeBg?: boolean;
background?: string;
}

export default function TileSparkLine({
value,
queryBusy,
height = 24,
includeBg = true,
background,
}: TileParkLineProps) {
const [svgRef, { width }] = useMeasure<SVGSVGElement>();

Expand All @@ -50,7 +50,7 @@ export default function TileSparkLine({
scaledDataPoints={scaledDataPoints}
range={range}
height={height}
background={includeBg ? undefined : "unset"}
background={background}
pxPerTick={pxPerTick}
tickMs={chartTickMs}
isLive={isLive}
Expand Down
9 changes: 9 additions & 0 deletions src/features/Overview/SlotPerformance/tileCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
color: var(--dropdown-button-text-color);
}

.full-width {
width: 100%;
}

.dark {
background: #171b24;
border-color: transparent;
}

.subHeader {
color: var(--tile-sub-header-color);
font-size: 12px;
Expand Down
8 changes: 7 additions & 1 deletion src/features/SlotDetails/DetailedSlotStats/ComputeSection/BusyAccounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useSlotQueryResponseDetailed } from "../../../../hooks/useSlotQuery";
import { selectedSlotAtom } from "../../../Overview/SlotPerformance/atoms";
import PctBarRow from "../PctBarRow";
import { SlotDetailsSubSection } from "../SlotDetailsSubSection";
import { gridGapX, gridGapY } from "../consts";

export default function BusyAccounts() {
const selectedSlot = useAtomValue(selectedSlotAtom);
Expand All @@ -14,7 +15,11 @@ export default function BusyAccounts() {

return (
<SlotDetailsSubSection title="Top 5 Busy Accounts">
<Grid columns="repeat(5, auto) minmax(80px, 200px)" gapX="2" gapY="1">
<Grid
columns="repeat(5, auto) minmax(80px, 200px)"
gapX={gridGapX}
gapY={gridGapY}
>
{limits.used_account_write_costs.map(({ account, cost }) => (
<PctBarRow
key={account}
Expand All @@ -23,6 +28,7 @@ export default function BusyAccounts() {
total={limits.max_account_write_cost}
valueColor="#30A46C"
numeratorColor={false}
pctColor={true}
/>
))}
</Grid>
Expand Down
30 changes: 15 additions & 15 deletions src/features/SlotDetails/DetailedSlotStats/ComputeSection/ComputeUnitStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
computeUnitsColor,
headerColor,
nonVoteColor,
slotDetailsStatsPrimary,
slotDetailsStatsSecondary,
votesColor,
} from "../../../../colors";
import { SlotDetailsSubSection } from "../SlotDetailsSubSection";
import styles from "../detailedSlotStats.module.css";
import { gridGapX, gridGapY } from "../consts";

const bundleColor = headerColor;

Expand Down Expand Up @@ -53,7 +53,11 @@ export default function ComputeUnitStats() {

return (
<SlotDetailsSubSection title="Consumed Compute Units">
<Grid columns="repeat(5, auto) minmax(80px, auto)" gapX="2" gapY="1">
<Grid
columns="repeat(5, auto) minmax(80px, auto)"
gapX={gridGapX}
gapY={gridGapY}
>
<CuStatRow
label="Vote"
cus={stats.vote}
Expand Down Expand Up @@ -89,23 +93,19 @@ function CuStatRow({ label, cus, totalCus, pctColor }: CuStatRowProps) {

return (
<>
<Text wrap="nowrap" style={{ color: slotDetailsStatsSecondary }}>
{label}
</Text>
<Text wrap="nowrap" style={{ color: pctColor }} align="right">
<Text className={styles.label}>{label}</Text>
<Text className={styles.value} style={{ color: pctColor }} align="right">
{cus.toLocaleString()}
</Text>
<Text wrap="nowrap" style={{ color: slotDetailsStatsPrimary }}>
/
</Text>
<Text wrap="nowrap" style={{ color: computeUnitsColor }} align="right">
{totalCus.toLocaleString()}
</Text>
<Text className={styles.value}>/</Text>
<Text
wrap="nowrap"
style={{ color: slotDetailsStatsPrimary }}
className={styles.value}
style={{ color: computeUnitsColor }}
align="right"
>
{totalCus.toLocaleString()}
</Text>
<Text className={styles.value} align="right">
{cuPctFromTotal}%
</Text>
<svg
Expand Down
41 changes: 27 additions & 14 deletions src/features/SlotDetails/DetailedSlotStats/ComputeSection/CumulativeExecutionTimeStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import { getDurationWithUnits } from "../../../Overview/SlotPerformance/Transact
import type { SlotTransactions } from "../../../../api/types";
import PctBar from "../PctBar";
import { SlotDetailsSubSection } from "../SlotDetailsSubSection";
import { slotDetailsStatsPrimary } from "../../../../colors";
import styles from "../detailedSlotStats.module.css";
import clsx from "clsx";
import MonoText from "../../../../components/MonoText";
import { gridGapX, gridGapY } from "../consts";

const initDurations = {
preLoading: 0,
Expand Down Expand Up @@ -93,15 +96,15 @@ export default function CumulativeExecutionTimeStats() {

return (
<SlotDetailsSubSection title="Cumulative Execution Time">
<Grid columns="repeat(7, auto)" gapX="2" gapY="1">
<Grid columns="repeat(7, auto)" gapX={gridGapX} gapY={gridGapY}>
<div />
<Text style={{ color: slotDetailsStatsPrimary, gridColumn: "span 2" }}>
<Text className={styles.tableHeader} style={{ gridColumn: "span 2" }}>
Success+Landed
</Text>
<Text style={{ color: slotDetailsStatsPrimary, gridColumn: "span 2" }}>
<Text className={styles.tableHeader} style={{ gridColumn: "span 2" }}>
Failed+Landed
</Text>
<Text style={{ color: slotDetailsStatsPrimary, gridColumn: "span 2" }}>
<Text className={styles.tableHeader} style={{ gridColumn: "span 2" }}>
Unlanded
</Text>
<Row
Expand Down Expand Up @@ -169,8 +172,6 @@ function Row({
max,
isTotal,
}: RowProps) {
const labelColor = isTotal ? "var(--gray-12)" : "var(--gray-11)";
const valueColor = isTotal ? "var(--gray-11)" : "var(--gray-10)";
const landedSuccessColor = isTotal ? "#28684A" : "#174933";
const landedFailedColor = isTotal ? "#8C333A" : "#611623";
const unlandedColor = isTotal ? "#12677E" : "#004558";
Expand All @@ -181,23 +182,35 @@ function Row({

return (
<>
<Text wrap="nowrap" style={{ color: labelColor }}>
<Text className={clsx(styles.tableRowLabel, isTotal && styles.total)}>
{label}
</Text>
<Text wrap="nowrap" style={{ color: valueColor }} align="right">
{`${landedSuccessUnits.value} ${landedSuccessUnits.unit}`}
<Text
className={clsx(styles.tableCellValue, isTotal && styles.total)}
align="right"
>
{landedSuccessUnits.value}
<MonoText>{landedSuccessUnits.unit}</MonoText>
</Text>
<PctBar
value={landedSuccess}
total={max}
valueColor={landedSuccessColor}
/>
<Text wrap="nowrap" style={{ color: valueColor }} align="right">
{`${landedFailedUnits.value} ${landedFailedUnits.unit}`}
<Text
className={clsx(styles.tableCellValue, isTotal && styles.total)}
align="right"
>
{landedFailedUnits.value}
<MonoText>{landedFailedUnits.unit}</MonoText>
</Text>
<PctBar value={landedFailed} total={max} valueColor={landedFailedColor} />
<Text wrap="nowrap" style={{ color: valueColor }} align="right">
{`${unlandedUnits.value} ${unlandedUnits.unit}`}
<Text
className={clsx(styles.tableCellValue, isTotal && styles.total)}
align="right"
>
{unlandedUnits.value}
<MonoText>{unlandedUnits.unit}</MonoText>
</Text>
<PctBar value={unlanded} total={max} valueColor={unlandedColor} />
</>
Expand Down
26 changes: 11 additions & 15 deletions src/features/SlotDetails/DetailedSlotStats/ComputeSection/ExecutionTime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,12 @@ import { useAtomValue } from "jotai";
import { useMemo } from "react";
import { useSlotQueryResponseTransactions } from "../../../../hooks/useSlotQuery";
import { selectedSlotAtom } from "../../../Overview/SlotPerformance/atoms";
import {
nonVoteColor,
slotDetailsStatsSecondary,
votesColor,
} from "../../../../colors";
import { nonVoteColor, votesColor } from "../../../../colors";
import { getDurationWithUnits } from "../../../Overview/SlotPerformance/TransactionBarsCard/chartUtils";
import { SlotDetailsSubSection } from "../SlotDetailsSubSection";
import MonoText from "../../../../components/MonoText";
import styles from "../detailedSlotStats.module.css";
import { gridGapX, gridGapY } from "../consts";

export default function ExecutionTime() {
const selectedSlot = useAtomValue(selectedSlotAtom);
Expand Down Expand Up @@ -113,7 +111,7 @@ export default function ExecutionTime() {

return (
<SlotDetailsSubSection title="Execution Time (min / avg / max)">
<Grid columns="repeat(7, auto)" gapX="3" gapY="1">
<Grid columns="repeat(7, auto)" gapX={gridGapX} gapY={gridGapY}>
<Row
label="Vote"
value={durations.vote}
Expand Down Expand Up @@ -170,25 +168,23 @@ function Row({ label, value, max, minValue, maxValue }: RowProps) {

return (
<>
<Text wrap="nowrap" style={{ color: slotDetailsStatsSecondary }}>
{label}
</Text>
<Text wrap="nowrap" style={{ color: "#6E56CF" }} align="right">
<Text className={styles.label}>{label}</Text>
<Text className={styles.value} style={{ color: "#6E56CF" }} align="right">
{minFormatted.value}
<MonoText>{minFormatted.unit}</MonoText>
</Text>
<Text>/</Text>
<Text wrap="nowrap" style={{ color: "#BAA7FF" }} align="right">
<Text className={styles.value}>/</Text>
<Text className={styles.value} style={{ color: "#BAA7FF" }} align="right">
{formatted.value}
<MonoText>{formatted.unit}</MonoText>
</Text>
<Text>/</Text>
<Text wrap="nowrap" style={{ color: "#6E56CF" }} align="right">
<Text className={styles.value}>/</Text>
<Text className={styles.value} style={{ color: "#6E56CF" }} align="right">
{maxFormatted.value}
<MonoText>{maxFormatted.unit}</MonoText>
</Text>
<svg
height="16"
height="13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ alignSelf: "center", width: "100%" }}
Expand Down
Loading