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,44 +5,69 @@ 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";
+import Progress from "../../../../components/Progress";
+
+const gap = "4px";
 
 interface SnapshotBarsCardProps {
+  title: string;
   headerContent: JSX.Element;
   footer?: JSX.Element;
   throughput: number | null | undefined;
-  containerClassName: string;
   maxThroughput: number;
+  progressPct: number | undefined;
 }
 export function SnapshotBarsCard({
+  title,
   headerContent,
   footer,
   throughput,
-  containerClassName,
   maxThroughput,
+  progressPct,
 }: SnapshotBarsCardProps) {
   return (
-    <Card className={clsx(styles.card, styles.barsCard, containerClassName)}>
-      <Flex
-        justify="between"
-        align="center"
-        wrap="wrap"
-        gapX="4"
-        className={styles.cardHeader}
-      >
-        {headerContent}
+    <Card className={clsx(styles.card, styles.barsCard)}>
+      <Flex direction="column" gap="2px">
+        <ProgressBar pct={progressPct} />
+        <Flex
+          justify="between"
+          wrap="nowrap"
+          gap={gap}
+          className={styles.cardHeader}
+        >
+          <SnapshotTitle text={title} />
+          <Flex gap={gap} minWidth="0" className={styles.headerRightSection}>
+            {headerContent}
+          </Flex>
+        </Flex>
       </Flex>
-
       <Bars value={throughput ?? 0} max={maxThroughput} />
 
       {footer}
     </Card>
   );
 }
 
+interface ProgressBarProps {
+  pct: number | undefined;
+}
+function ProgressBar({ pct }: ProgressBarProps) {
+  const bootPhase = useAtomValue(bootProgressPhaseAtom);
+  // jump to inital value on phase change
+  return (
+    <Flex key={bootPhase} gap="10px" align="center">
+      <Progress className={styles.progressBar} value={pct ?? 0} />
+      <Text className={clsx(styles.secondaryColor, styles.progressPctText)}>
+        {pct == null ? "-" : pct.toFixed(0)}%
+      </Text>
+    </Flex>
+  );
+}
+
 function ValueUnitText({
   value,
   unit,
@@ -53,21 +78,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 +114,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 +129,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 +148,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
@@ -49,36 +42,22 @@ export function SnapshotDecompressingCard({
     compressedCompleted == null ? undefined : formatBytes(compressedCompleted);
   const totalObj =
     compressedTotal == null ? undefined : formatBytes(compressedTotal);
+  const progressPct =
+    compressedCompleted == null || !compressedTotal
+      ? undefined
+      : (compressedCompleted / compressedTotal) * 100;
 
   return (
     <SnapshotBarsCard
-      containerClassName={styles.decompressingCard}
+      title="Decompressing"
+      progressPct={progressPct}
       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,26 @@ 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);
 
+  const progressPct =
+    decompressedCompleted == null || !decompressedTotal
+      ? undefined
+      : (decompressedCompleted / decompressedTotal) * 100;
+
   return (
     <SnapshotBarsCard
-      containerClassName={styles.insertingCard}
+      title="Inserting"
+      progressPct={progressPct}
       headerContent={
         <>
-          <SnapshotTitle text="Inserting" />
-          <AccountsRate cumulativeAccounts={cumulativeAccounts} />
           <SnapshotTotalComplete completed={completedObj} total={totalObj} />
-          <SnapshotThroughput throughput={throughputObj} />
+          <AccountsRate cumulativeAccounts={cumulativeAccounts} />
         </>
       }
       throughput={decompressedThroughput}