chore: slot detail stats density and layout

Author: amliu-jumptrading

src/colors.ts

@@ -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";

src/components/Card.tsx

@@ -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>
   );

src/components/card.module.css

@@ -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 {
-    background: var(--container-background-color);
+  &.narrow {
+    padding: 4px;
   }
 }

src/consts.ts

@@ -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;

src/features/Overview/SlotPerformance/TileCard.tsx

@@ -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;
@@ -23,7 +24,8 @@ interface TileCardProps {
   sparklineHeight?: number;
   isExpanded?: boolean;
   setIsExpanded?: (isExpanded: boolean) => void;
-  includeBg?: boolean;
+  isDark?: boolean;
+  isNarrow?: boolean;
 }
 
 export default function TileCard({
@@ -37,7 +39,8 @@ export default function TileCard({
   sparklineHeight,
   isExpanded = false,
   setIsExpanded = () => {},
-  includeBg = true,
+  isDark = false,
+  isNarrow,
 }: TileCardProps) {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
 
@@ -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}
@@ -73,7 +79,7 @@ export default function TileCard({
             value={avgBusy}
             queryBusy={aggQueryBusyPerTs}
             height={sparklineHeight}
-            includeBg={includeBg}
+            background={isDark ? "#0000001F" : undefined}
           />
           <TileSparkLineExpandedContainer
             tileCountArr={tileCountArr}
@@ -100,7 +106,7 @@ export default function TileCard({
                       key={i}
                       className={styles.tile}
                       style={{
-                        background: `gray`,
+                        background: isDark ? "#232A38" : "gray",
                       }}
                     />
                   );

src/features/Overview/SlotPerformance/TileSparkLine.tsx

@@ -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>();
 
@@ -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}

src/features/Overview/SlotPerformance/tileCard.module.css

@@ -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;

src/features/SlotDetails/DetailedSlotStats/ComputeSection/BusyAccounts.tsx

@@ -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);
@@ -14,15 +15,21 @@ 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, 100%)"
+        gapX={gridGapX}
+        gapY={gridGapY}
+      >
         {limits.used_account_write_costs.map(({ account, cost }) => (
           <PctBarRow
             key={account}
-            label={`${account.substring(0, 8)}...`}
+            label={account}
+            labelWidth="80px"
             value={cost}
             total={limits.max_account_write_cost}
             valueColor="#30A46C"
             numeratorColor={false}
+            pctColor={true}
           />
         ))}
       </Grid>

src/features/SlotDetails/DetailedSlotStats/ComputeSection/ComputeUnitStats.tsx

@@ -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;
 
@@ -50,26 +50,34 @@ export default function ComputeUnitStats() {
   if (!stats) return;
 
   const totalCus = stats.vote + stats.bundle + stats.other;
+  const maxCus = Math.max(stats.vote, stats.bundle, stats.other);
 
   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, 100%)"
+        gapX={gridGapX}
+        gapY={gridGapY}
+      >
         <CuStatRow
           label="Vote"
           cus={stats.vote}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={votesColor}
         />
         <CuStatRow
           label="Bundle"
           cus={stats.bundle}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={bundleColor}
         />
         <CuStatRow
           label="Other"
           cus={stats.other}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={nonVoteColor}
         />
       </Grid>
@@ -81,31 +89,29 @@ interface CuStatRowProps {
   label: string;
   cus: number;
   totalCus: number;
+  maxCus: number;
   pctColor: string;
 }
 
-function CuStatRow({ label, cus, totalCus, pctColor }: CuStatRowProps) {
+function CuStatRow({ label, cus, totalCus, maxCus, pctColor }: CuStatRowProps) {
   const cuPctFromTotal = Math.round(totalCus ? (cus / totalCus) * 100 : 0);
+  const cuPctFromMax = Math.round(maxCus ? (cus / maxCus) * 100 : 0);
 
   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
@@ -117,7 +123,7 @@ function CuStatRow({ label, cus, totalCus, pctColor }: CuStatRowProps) {
       >
         <rect
           height="8"
-          width={`${cuPctFromTotal}%`}
+          width={`${cuPctFromMax}%`}
           opacity={0.6}
           fill={pctColor}
         />

src/features/SlotDetails/DetailedSlotStats/ComputeSection/CumulativeExecutionTimeStats.tsx

@@ -6,7 +6,10 @@ import { useMemo } from "react";
 import { getDurationWithUnits } from "../../../Overview/SlotPerformance/TransactionBarsCard/chartUtils";
 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";
 import {
   getTxnBundleStats,
   getTxnStateDurations,
@@ -85,15 +88,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
@@ -161,8 +164,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";
@@ -173,23 +174,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} />
     </>