feat: startup snapshot writing card

Author: asuzuki-jumptrading

src/api/entities.ts

@@ -85,6 +85,7 @@ export const tileTypeSchema = z.enum([
   "snapld",
   "snapdc",
   "snapin",
+  "snapwr",
 
   // shred tiles
   "netlnk",
@@ -338,6 +339,15 @@ export const bootProgressSchema = z.object({
     .nullable()
     .optional(),
   loading_full_snapshot_insert_accounts: z.number().nullable().optional(),
+  loading_full_snapshot_snapwr_in_bytes_decompressed: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_full_snapshot_snapwr_out_bytes_decompressed: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_full_snapshot_snapwr_accounts: z.number().nullable().optional(),
 
   loading_incremental_snapshot_elapsed_seconds: z
     .number()
@@ -370,6 +380,20 @@ export const bootProgressSchema = z.object({
     .number()
     .nullable()
     .optional(),
+  loading_incremental_snapshot_snapwr_in_bytes_decompressed: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_snapwr_out_bytes_decompressed: z.coerce
+    .number()
+    .nullable()
+    .optional(),
+  loading_incremental_snapshot_snapwr_accounts: z
+    .number()
+    .nullable()
+    .optional(),
+
+  accounts_database_path: z.string().nullable().optional(),
 
   wait_for_supermajority_bank_hash: z.string().nullable().optional(),
   wait_for_supermajority_shred_version: z.string().nullable().optional(),

src/features/Overview/SlotPerformance/atoms.ts

@@ -133,7 +133,7 @@ export const groupedLiveIdlePerTileAtom = atom((get) => {
 export const snapshotTimerIndicesAtom = atom(
   (get): [TileType, number[]][] | undefined => {
     const tiles = get(tilesAtom);
-    const tileTypes: TileType[] = ["snapld", "snapdc", "snapin"];
+    const tileTypes: TileType[] = ["snapld", "snapdc", "snapin", "snapwr"];
 
     if (!tiles) return;
 

src/features/StartupProgress/Firedancer/Snapshot/SnapshotBarsCard.tsx

@@ -5,35 +5,39 @@ import { Bars } from "../Bars";
 import { useValuePerSecond } from "../useValuePerSecond";
 import { bootProgressPhaseAtom } from "../../atoms";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo } from "react";
+import { memo, useEffect, useMemo } from "react";
 import StorageIcon from "@material-design-icons/svg/filled/storage.svg?react";
 import { compactSingleDecimalFormatter } from "../../../../numUtils";
 import type { FormattedBytes } from "../../../../utils";
 
+const gap = "4px";
+
 interface SnapshotBarsCardProps {
+  title: string;
   headerContent: JSX.Element;
   footer?: JSX.Element;
   throughput: number | null | undefined;
-  containerClassName: string;
   maxThroughput: number;
 }
 export function SnapshotBarsCard({
+  title,
   headerContent,
   footer,
   throughput,
-  containerClassName,
   maxThroughput,
 }: SnapshotBarsCardProps) {
   return (
-    <Card className={clsx(styles.card, styles.barsCard, containerClassName)}>
+    <Card className={clsx(styles.card, styles.barsCard)}>
       <Flex
         justify="between"
-        align="center"
-        wrap="wrap"
-        gapX="4"
+        wrap="nowrap"
+        gap={gap}
         className={styles.cardHeader}
       >
-        {headerContent}
+        <SnapshotTitle text={title} />
+        <Flex gap={gap} minWidth="0" className={styles.headerRightSection}>
+          {headerContent}
+        </Flex>
       </Flex>
 
       <Bars value={throughput ?? 0} max={maxThroughput} />
@@ -53,21 +57,16 @@ function ValueUnitText({
   return (
     <>
       <Text>{value ?? "--"}</Text>
-      {unit && (
-        <>
-          {" "}
-          <Text className={styles.secondaryColor}>{unit}</Text>
-        </>
-      )}
+      {unit && <Text className={styles.secondaryColor}> {unit}</Text>}
     </>
   );
 }
 
 interface SnapshotTitleProps {
   text: string;
 }
-export function SnapshotTitle({ text }: SnapshotTitleProps) {
-  return <Text className={clsx(styles.title, styles.ellipsis)}>{text}</Text>;
+function SnapshotTitle({ text }: SnapshotTitleProps) {
+  return <Text className={clsx(styles.leftColumn, styles.title)}>{text}</Text>;
 }
 
 interface AccountsRateProps {
@@ -94,7 +93,7 @@ export function AccountsRate({ cumulativeAccounts }: AccountsRateProps) {
   }, [accountsPerSecond, cumulativeAccounts]);
 
   return (
-    <div className={styles.accountsRate}>
+    <div className={styles.rightColumn}>
       <ValueUnitText value={value} unit="Accounts / sec" />
     </div>
   );
@@ -109,13 +108,13 @@ export function SnapshotTotalComplete({
   total,
 }: SnapshotTotalCompleteProps) {
   return (
-    <div className={styles.total}>
+    <Flex className={styles.centerColumn}>
       <ValueUnitText value={completed?.value} unit={completed?.unit} />
 
       <Text> / </Text>
 
       <ValueUnitText value={total?.value} unit={total?.unit} />
-    </div>
+    </Flex>
   );
 }
 
@@ -128,27 +127,30 @@ export function SnapshotThroughput({
   throughput,
 }: SnapshotThroughputProps) {
   return (
-    <div className={clsx(styles.throughput, { [styles.withPrefix]: !!prefix })}>
+    <div className={styles.rightColumn}>
       {prefix && <Text className={styles.secondaryColor}>{prefix} </Text>}
       <ValueUnitText value={throughput?.value} unit={throughput?.unit} />
       <Text className={styles.secondaryColor}>/sec</Text>
     </div>
   );
 }
 
-interface SnapshotReadPathProps {
-  readPath?: string | null;
+interface SnapshotPathProps {
+  path?: string | null;
 }
-export function SnapshotReadPath({ readPath }: SnapshotReadPathProps) {
+export const MSnapshotPath = memo(function SnapshotPath({
+  path,
+}: SnapshotPathProps) {
+  if (!path) return;
   return (
     <Flex
       align="center"
       gap="10px"
       wrap="nowrap"
-      className={styles.readPathContainer}
+      className={styles.pathContainer}
     >
       <StorageIcon />
-      <Text className={clsx(styles.readPath, styles.ellipsis)}>{readPath}</Text>
+      <Text className={clsx(styles.path, styles.ellipsis)}>{path}</Text>
     </Flex>
   );
-}
+});

src/features/StartupProgress/Firedancer/Snapshot/SnapshotDecompressingCard.tsx

@@ -4,12 +4,9 @@ import { useEffect } from "react";
 import {
   SnapshotBarsCard,
   SnapshotThroughput,
-  SnapshotTitle,
   SnapshotTotalComplete,
 } from "./SnapshotBarsCard";
-import { Flex } from "@radix-ui/themes";
 import { formatBytes } from "../../../../utils";
-import styles from "./snapshot.module.css";
 import { useEma } from "../../../../hooks/useEma";
 
 interface SnapshotDecompressingCardProps {
@@ -36,10 +33,6 @@ export function SnapshotDecompressingCard({
     resetDecompressed();
   }, [phase, resetCompressed, resetDecompressed]);
 
-  const compressedThroughputObj =
-    compressedThroughput == null
-      ? undefined
-      : formatBytes(compressedThroughput);
   const decompressedThroughputObj =
     decompressedThroughput == null
       ? undefined
@@ -52,33 +45,14 @@ export function SnapshotDecompressingCard({
 
   return (
     <SnapshotBarsCard
-      containerClassName={styles.decompressingCard}
+      title="Decompressing"
       headerContent={
         <>
-          <Flex
-            flexGrow="1"
-            justify="between"
-            align="center"
-            className={styles.decompressingCardLeft}
-          >
-            <SnapshotTitle text="Decompressing" />
-            <SnapshotTotalComplete completed={completedObj} total={totalObj} />
-          </Flex>
-          <Flex
-            gapX="30px"
-            justify="end"
-            flexGrow="1"
-            className={styles.decompressingCardRight}
-          >
-            <SnapshotThroughput
-              prefix="Input"
-              throughput={compressedThroughputObj}
-            />
-            <SnapshotThroughput
-              prefix="Output"
-              throughput={decompressedThroughputObj}
-            />
-          </Flex>
+          <SnapshotTotalComplete completed={completedObj} total={totalObj} />
+          <SnapshotThroughput
+            prefix="Output"
+            throughput={decompressedThroughputObj}
+          />
         </>
       }
       throughput={compressedThroughput}

src/features/StartupProgress/Firedancer/Snapshot/SnapshotInsertingCard.tsx

@@ -1,12 +1,9 @@
 import {
   AccountsRate,
   SnapshotBarsCard,
-  SnapshotThroughput,
-  SnapshotTitle,
   SnapshotTotalComplete,
 } from "./SnapshotBarsCard";
 import { formatBytes } from "../../../../utils";
-import styles from "./snapshot.module.css";
 
 interface SnapshotInsertingCardProps {
   decompressedThroughput?: number;
@@ -20,26 +17,19 @@ export function SnapshotInsertingCard({
   decompressedTotal,
   cumulativeAccounts,
 }: SnapshotInsertingCardProps) {
-  const throughputObj =
-    decompressedThroughput == null
-      ? undefined
-      : formatBytes(decompressedThroughput);
   const completedObj =
     decompressedCompleted == null
       ? undefined
       : formatBytes(decompressedCompleted);
   const totalObj =
     decompressedTotal == null ? undefined : formatBytes(decompressedTotal);
-
   return (
     <SnapshotBarsCard
-      containerClassName={styles.insertingCard}
+      title="Inserting"
       headerContent={
         <>
-          <SnapshotTitle text="Inserting" />
-          <AccountsRate cumulativeAccounts={cumulativeAccounts} />
           <SnapshotTotalComplete completed={completedObj} total={totalObj} />
-          <SnapshotThroughput throughput={throughputObj} />
+          <AccountsRate cumulativeAccounts={cumulativeAccounts} />
         </>
       }
       throughput={decompressedThroughput}

src/features/StartupProgress/Firedancer/Snapshot/SnapshotReadingCard.tsx

@@ -1,26 +1,24 @@
 import { bootProgressPhaseAtom } from "../../atoms";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import {
   SnapshotBarsCard,
-  SnapshotReadPath,
+  MSnapshotPath,
   SnapshotThroughput,
-  SnapshotTitle,
   SnapshotTotalComplete,
 } from "./SnapshotBarsCard";
 import { formatBytes } from "../../../../utils";
-import styles from "./snapshot.module.css";
 import { useEma } from "../../../../hooks/useEma";
 
 interface SnapshotReadingCardProps {
   compressedCompleted?: number | null;
   compressedTotal?: number | null;
-  readPath?: string | null;
+  path?: string | null;
 }
 export function SnapshotReadingCard({
   compressedCompleted: completed,
   compressedTotal: total,
-  readPath,
+  path,
 }: SnapshotReadingCardProps) {
   const phase = useAtomValue(bootProgressPhaseAtom);
   const { ema: throughput, reset } = useEma(completed);
@@ -35,21 +33,16 @@ export function SnapshotReadingCard({
   const completedObj = completed == null ? undefined : formatBytes(completed);
   const totalObj = total == null ? undefined : formatBytes(total);
 
-  const footer = useMemo(() => {
-    return <SnapshotReadPath readPath={readPath} />;
-  }, [readPath]);
-
   return (
     <SnapshotBarsCard
-      containerClassName={styles.readingCard}
+      title="Reading"
       headerContent={
         <>
-          <SnapshotTitle text="Reading" />
           <SnapshotTotalComplete completed={completedObj} total={totalObj} />
           <SnapshotThroughput throughput={throughputObj} />
         </>
       }
-      footer={footer}
+      footer={<MSnapshotPath path={path} />}
       throughput={throughput}
       maxThroughput={800_000_000}
     />

src/features/StartupProgress/Firedancer/Snapshot/SnapshotWritingCard.tsx

@@ -0,0 +1,46 @@
+import {
+  SnapshotBarsCard,
+  MSnapshotPath,
+  SnapshotThroughput,
+  SnapshotTotalComplete,
+} from "./SnapshotBarsCard";
+import { formatBytes } from "../../../../utils";
+
+interface SnapshotWritingCardProps {
+  decompressedThroughput?: number;
+  decompressedCompleted?: number | null;
+  decompressedTotal?: number | null;
+  path?: string | null;
+}
+export function SnapshotWritingCard({
+  decompressedThroughput,
+  decompressedCompleted,
+  decompressedTotal,
+  path,
+}: SnapshotWritingCardProps) {
+  const throughputObj =
+    decompressedThroughput == null
+      ? undefined
+      : formatBytes(decompressedThroughput);
+  const completedObj =
+    decompressedCompleted == null
+      ? undefined
+      : formatBytes(decompressedCompleted);
+  const totalObj =
+    decompressedTotal == null ? undefined : formatBytes(decompressedTotal);
+
+  return (
+    <SnapshotBarsCard
+      title="Writing"
+      headerContent={
+        <>
+          <SnapshotTotalComplete completed={completedObj} total={totalObj} />
+          <SnapshotThroughput prefix="Writing" throughput={throughputObj} />
+        </>
+      }
+      footer={<MSnapshotPath path={path} />}
+      throughput={decompressedThroughput}
+      maxThroughput={3_500_000_000}
+    />
+  );
+}