feat(ui): add quantity metadata to operator statistics

domains/query_engine/analyzer/src/plain/legacy/operator.rs

@@ -71,7 +71,15 @@ impl OperatorEntity for Operator {
             custom_statistics: s
                 .custom_attributes
                 .iter()
-                .map(|DynamicAttribute { key, value }| (key.clone(), value.clone()))
+                .map(|DynamicAttribute { key, value }| {
+                    (
+                        key.clone(),
+                        ui::OperatorStatistic {
+                            value: value.clone(),
+                            quantity: None,
+                        },
+                    )
+                })
                 .collect(),
         });
 

domains/query_engine/ui/src/lib.rs

@@ -164,10 +164,19 @@ pub struct Plan {
     pub edges: Vec<Edge>,
 }
 
+#[derive(TS, Debug, Serialize)]
+pub struct OperatorStatistic {
+    /// The value of this statistic.
+    pub value: Option<DynamicValue>,
+    /// The key of the [`QuantitySpec`] in [`QueryBundle::quantity_specs`] used
+    /// to display this statistic.
+    pub quantity: Option<String>,
+}
+
 #[derive(TS, Debug, Serialize)]
 pub struct OperatorStatistics {
-    /// Custom statistics
-    pub custom_statistics: HashMap<String, Option<DynamicValue>>,
+    /// Custom statistics.
+    pub custom_statistics: HashMap<String, OperatorStatistic>,
 }
 
 #[derive(TS, Debug, Serialize)]
@@ -298,7 +307,7 @@ pub struct QueryBundle<E> {
     /// A list of unique operator type names.
     pub unique_operator_names: Vec<String>,
 
-    /// Quantity specifications for capacity display, keyed by capacity name.
+    /// Quantity specifications for displaying values, keyed by quantity name.
     pub quantity_specs: HashMap<String, QuantitySpec>,
 
     /// The number of nanoseconds passed since the Unix epoch at which the

examples/simulator/analyzer/src/lib.rs

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+use quent_dynamic_attributes::DynamicValue;
 use quent_events::Event;
 pub use quent_query_engine_analyzer::QueryEngineModel;
 use quent_query_engine_analyzer::{
@@ -67,11 +68,77 @@ pub mod view;
 const MEASURE_TASKS: &str = "tasks";
 /// Data-flow measure summing memory bytes held in each (state, location) cell.
 const MEASURE_BYTES: &str = "bytes";
+const QUANTITY_BYTES: &str = "bytes";
+const QUANTITY_SECONDS: &str = "seconds";
+const BYTE_OPERATOR_STATISTICS: &[&str] = &[
+    "average_partition_size_bytes",
+    "avg_key_length_bytes",
+    "bloom_filter_size_bytes",
+    "build_side_bytes",
+    "bytes_read",
+    "bytes_written",
+    "hash_table_size_bytes",
+    "input_bytes",
+    "network_bytes_sent",
+    "output_bytes",
+    "peak_memory_bytes",
+    "per_file_bytes_read",
+    "probe_side_bytes",
+    "spill_bytes",
+];
+const SECOND_OPERATOR_STATISTICS: &[&str] = &[
+    "build_time_ns",
+    "cpu_time_ns",
+    "decompress_time_ns",
+    "flush_time_ns",
+    "hash_time_ns",
+    "io_wait_ns",
+    "merge_time_ns",
+    "network_time_ns",
+    "partition_time_ns",
+    "predicate_filter_time_ns",
+    "probe_time_ns",
+    "serialization_time_ns",
+    "wall_time_ns",
+];
 /// Data-flow dimension key for states that hold no memory resource.
 const DIMENSION_NONE: &str = "none";
 /// Type name of stdlib memory resources as recorded by the model.
 const MEMORY_TYPE_NAME: &str = "memory";
 
+fn operator_statistic_quantity(name: &str) -> Option<&'static str> {
+    BYTE_OPERATOR_STATISTICS
+        .contains(&name)
+        .then_some(QUANTITY_BYTES)
+}
+
+fn scale_operator_statistic(name: &str, value: &Option<DynamicValue>) -> Option<DynamicValue> {
+    if !SECOND_OPERATOR_STATISTICS.contains(&name) {
+        return None;
+    }
+    match value {
+        Some(DynamicValue::U64(nanoseconds)) => {
+            let seconds = *nanoseconds as f64 / 1_000_000_000.0;
+            Some(DynamicValue::F64(seconds))
+        }
+        _ => None,
+    }
+}
+
+fn scaled_operator_statistic_name(name: String) -> String {
+    name.strip_suffix("_ns").unwrap_or(&name).to_owned()
+}
+
+fn quantity_specs() -> StdHashMap<String, QuantitySpec> {
+    [
+        ("capacity_bytes".into(), QuantitySpec::bytes()),
+        (QUANTITY_BYTES.into(), QuantitySpec::bytes()),
+        (QUANTITY_SECONDS.into(), QuantitySpec::seconds()),
+        ("unit".into(), QuantitySpec::unit()),
+    ]
+    .into()
+}
+
 pub struct SimulatorUiAnalyzer {
     pub model: SimulatorModel,
 }
@@ -205,7 +272,33 @@ impl UiAnalyzer for SimulatorUiAnalyzer {
         let query = query.to_ui()?;
         let workers = view.workers().map(|w| (w.id(), w.to_ui(epoch))).collect();
         let plans = view.plans().map(|p| (p.id(), p.to_ui())).collect();
-        let operators = view.operators().map(|o| (o.id(), o.to_ui(epoch))).collect();
+        let operators = view
+            .operators()
+            .map(|operator| {
+                let mut ui_operator = operator.to_ui(epoch);
+                if let Some(statistics) = &mut ui_operator.statistics {
+                    statistics.custom_statistics =
+                        std::mem::take(&mut statistics.custom_statistics)
+                            .into_iter()
+                            .map(|(name, mut statistic)| {
+                                let name = if let Some(value) =
+                                    scale_operator_statistic(&name, &statistic.value)
+                                {
+                                    statistic.value = Some(value);
+                                    statistic.quantity = Some(QUANTITY_SECONDS.to_owned());
+                                    scaled_operator_statistic_name(name)
+                                } else {
+                                    statistic.quantity =
+                                        operator_statistic_quantity(&name).map(str::to_owned);
+                                    name
+                                };
+                                (name, statistic)
+                            })
+                            .collect();
+                }
+                (operator.id(), ui_operator)
+            })
+            .collect();
         let ports = view.ports().map(|p| (p.id(), p.to_ui(epoch))).collect();
         let unique_operator_names = view
             .operators()
@@ -278,11 +371,7 @@ impl UiAnalyzer for SimulatorUiAnalyzer {
             plan_tree,
             resource_tree,
             unique_operator_names,
-            quantity_specs: [
-                ("capacity_bytes".into(), QuantitySpec::bytes()),
-                ("unit".into(), QuantitySpec::unit()),
-            ]
-            .into(),
+            quantity_specs: quantity_specs(),
             start_time_unix_ns,
             duration_s,
         })

ui/packages/@quent/components/src/dag/DAGChart.tsx

@@ -48,8 +48,12 @@ import type { DAGData } from '../services/query-plan/types';
 import { QueryPlanNode, type QueryPlanNodeData } from '../query-plan/QueryPlanNode';
 import { DAGLegend } from './DAGLegend';
 import { parseCustomStatistics } from '../lib/queryBundle.utils';
-import { continuousColor, getOperationTypeColor, buildOperatorColorMap } from '@quent/utils';
-import { inferFieldFormatter } from '@quent/utils';
+import {
+  continuousColor,
+  getOperationTypeColor,
+  buildOperatorColorMap,
+  inferFieldFormatter,
+} from '@quent/utils';
 
 // Edge geometry constants
 const EDGE_STROKE_WIDTH_DEFAULT = 1.5;
@@ -338,6 +342,7 @@ const FlowLayout = ({
           isDark,
           baseColor: operatorColorMap.get(node.type.toLowerCase()),
           flowBarVisible,
+          quantitySpecs: data.quantitySpecs,
         },
         style: {
           width: NODE_LAYOUT_WIDTH,

ui/packages/@quent/components/src/dag/DAGNodeInfoPanel.tsx

@@ -11,10 +11,16 @@ import {
 } from '@quent/hooks';
 import { DataText } from '../ui/data-text';
 import { thinScrollbarClass } from '../ui/thin-scroll';
-import { inferFieldFormatter, isNumericValue } from '@quent/utils';
+import { formatStatWithQuantity, type QuantitySpec } from '@quent/utils';
 import { DataFlowMatrix } from './DataFlowMatrix';
 
-export const DAGNodeInfoPanel = ({ isDark = false }: { isDark?: boolean }) => {
+export const DAGNodeInfoPanel = ({
+  isDark = false,
+  quantitySpecs,
+}: {
+  isDark?: boolean;
+  quantitySpecs?: { [key: string]: QuantitySpec | undefined };
+}) => {
   const selectedNodeData = useSelectedNodeData();
   const dataFlowEnabled = useDataFlowEnabled();
   const dataFlowMeta = useDataFlowMeta();
@@ -78,7 +84,7 @@ export const DAGNodeInfoPanel = ({ isDark = false }: { isDark?: boolean }) => {
                 {selectedNodeData.nodeId}
               </DataText>
             </div>
-            {selectedNodeData.statistics?.map(({ key, value }) => (
+            {selectedNodeData.statistics?.map(({ key, value, quantity }) => (
               <div key={key} className="text-xs">
                 {Array.isArray(value) ? (
                   <div className="flex items-center justify-between gap-0.5">
@@ -95,7 +101,13 @@ export const DAGNodeInfoPanel = ({ isDark = false }: { isDark?: boolean }) => {
                   <div className="flex items-center justify-between">
                     <DataText className="capitalize">{key.replace(/_/g, ' ')}:</DataText>
                     <DataText className="text-muted-foreground ml-1">
-                      {isNumericValue(value) ? inferFieldFormatter(key)(value) : String(value)}
+                      {typeof value === 'number'
+                        ? formatStatWithQuantity(
+                            value,
+                            key,
+                            quantity && quantitySpecs ? quantitySpecs[quantity] : undefined
+                          )
+                        : String(value)}
                     </DataText>
                   </div>
                 )}

ui/packages/@quent/components/src/lib/queryBundle.utils.test.ts

@@ -66,7 +66,17 @@ function makeTagged(variant: string, value: unknown) {
 
 function makeOperator(custom_statistics: Record<string, unknown> | undefined) {
   return {
-    statistics: custom_statistics !== undefined ? { custom_statistics } : undefined,
+    statistics:
+      custom_statistics !== undefined
+        ? {
+            custom_statistics: Object.fromEntries(
+              Object.entries(custom_statistics).map(([key, value]) => [
+                key,
+                { value, quantity: null },
+              ])
+            ),
+          }
+        : undefined,
   };
 }
 
@@ -90,6 +100,17 @@ describe('parseCustomStatistics', () => {
     expect(result).toEqual([{ key: 'rows', value: 42 }]);
   });
 
+  it('preserves a quantity key', () => {
+    const op = {
+      statistics: {
+        custom_statistics: {
+          bytes: { value: makeTagged('UInt64', 1024), quantity: 'bytes' },
+        },
+      },
+    };
+    expect(parseCustomStatistics(op)).toEqual([{ key: 'bytes', value: 1024, quantity: 'bytes' }]);
+  });
+
   it('unwraps a string tagged value', () => {
     const op = makeOperator({ label: makeTagged('String', 'hello') });
     expect(parseCustomStatistics(op)).toEqual([{ key: 'label', value: 'hello' }]);

ui/packages/@quent/components/src/lib/queryBundle.utils.ts

@@ -27,16 +27,20 @@ export function entityRefToEntitiesKey(entityRef: EntityRefKey): keyof QueryEnti
   return ENTITY_REF_TO_ENTITIES_KEY[entityRef];
 }
 
-export function parseCustomStatistics(rawNode: unknown): Array<{ key: string; value: StatValue }> {
+export function parseCustomStatistics(
+  rawNode: unknown
+): Array<{ key: string; value: StatValue; quantity?: string }> {
   const statistics = (rawNode as Operator)?.statistics?.custom_statistics;
   if (!statistics) return [];
 
-  return Object.entries(statistics).map(([key, tagged]) => ({
-    key,
-    value: tagged
-      ? unwrapTaggedValue(Object.values(tagged as unknown as Record<string, unknown>)[0])
-      : null,
-  }));
+  return Object.entries(statistics).map(([key, statistic]) => {
+    const { value, quantity } = statistic;
+    return {
+      key,
+      value: value ? unwrapTaggedValue(value) : null,
+      ...(quantity !== null ? { quantity } : {}),
+    };
+  });
 }
 
 export function parsePortStatistics(rawPort: unknown): Array<{ key: string; value: StatValue }> {

ui/packages/@quent/components/src/operator-timeline/types.ts

@@ -20,5 +20,5 @@ export type OperatorActiveSpanEntry = {
   /** Plan ID this operator belongs to. */
   planId: string;
   /** Pre-computed custom statistics for the operator popup. */
-  statistics: Array<{ key: string; value: StatValue }>;
+  statistics: Array<{ key: string; value: StatValue; quantity?: string }>;
 };

ui/packages/@quent/components/src/pivot-table/PivotedStatTable.tsx

@@ -181,6 +181,7 @@ function DataCell({ row, stat }: DataCellProps<PivotedRow>) {
     onMouseEnter: () => interaction.setHoveredStat(derived.buildHoveredStatInfo(stat)),
     onMouseLeave: () => interaction.setHoveredStat(null),
   };
+  const fmt = display.formatNumericValue;
   if (!display.isAggregating) {
     const val = row.values.get(stat) ?? null;
     return (
@@ -189,7 +190,7 @@ function DataCell({ row, stat }: DataCellProps<PivotedRow>) {
         style={{ backgroundColor: bg, boxShadow: cellHighlight }}
         {...statCellProps}
       >
-        {formatStatValue(val, stat)}
+        {typeof val === 'number' && fmt ? fmt(val, stat) : formatStatValue(val, stat)}
       </td>
     );
   }
@@ -212,7 +213,9 @@ function DataCell({ row, stat }: DataCellProps<PivotedRow>) {
       style={{ backgroundColor: bg, boxShadow: cellHighlight }}
       {...statCellProps}
     >
-      {formatNumericStat(displayVal, stat)}
+      {fmt && typeof displayVal === 'number'
+        ? fmt(displayVal, stat)
+        : formatNumericStat(displayVal, stat)}
     </td>
   );
 }
@@ -247,6 +250,8 @@ interface PivotedStatTableProps<TRow> {
   /** Optional controlled sort state, forwarded to the underlying GroupedDataTable. */
   sorting?: SortingState;
   onSortingChange?: OnChangeFn<SortingState>;
+  /** Optional formatter for numeric stat values; falls back to inferFieldFormatter when absent. */
+  formatNumericValue?: (value: number, statName: string) => string;
 }
 
 export function PivotedStatTable<TRow>({
@@ -267,6 +272,7 @@ export function PivotedStatTable<TRow>({
   onReorderStat,
   sorting,
   onSortingChange,
+  formatNumericValue,
 }: PivotedStatTableProps<TRow>) {
   const [nodePalette] = useNodeColorPalette();
   const rowRefs = useRef<Map<string, HTMLTableRowElement>>(new Map());
@@ -518,8 +524,9 @@ export function PivotedStatTable<TRow>({
       aggMode,
       colorPalette: nodePalette,
       darkMode: isDark,
+      formatNumericValue,
     }),
-    [isAggregating, aggMode, nodePalette, isDark]
+    [isAggregating, aggMode, nodePalette, isDark, formatNumericValue]
   );
   const dndContextValue = useMemo(
     () => ({

ui/packages/@quent/components/src/pivot-table/types.ts

@@ -86,6 +86,8 @@ export interface PivotTableDisplayConfig {
   aggMode: AggMode;
   colorPalette: ContinuousPaletteName;
   darkMode: boolean;
+  /** Optional formatter for numeric stat values; falls back to inferFieldFormatter when absent. */
+  formatNumericValue?: (value: number, statName: string) => string;
 }
 
 // --- PivotedStatTable types ---