refactor: rename variables for clarity

ui/src/components/Metric.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { ComponentProps } from "react";
 import { cva, cx } from "cva";
 
@@ -28,7 +29,12 @@ interface MetricProps<T, K extends keyof T> {
   badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
 }
 
-/* eslint-disable-next-line */
+/**
+ * Creates a chart array from a metrics map and a metric name.
+ *
+ * @param metrics - Expected to be ordered from oldest to newest.
+ * @param metricName - Name of the metric to create a chart array for.
+ */
 export function createChartArray<T, K extends keyof T>(
   metrics: Map<number, T>,
   metricName: K,
@@ -36,12 +42,12 @@ export function createChartArray<T, K extends keyof T>(
   const result: { date: number; metric: number | null }[] = [];
   const iter = metrics.entries();
   let next = iter.next() as IteratorResult<[number, T]>;
-  const now = Math.floor(Date.now() / 1000);
+  const nowSeconds = Math.floor(Date.now() / 1000);
 
   // We want 120 data points, in the chart.
-  const firstDate = Math.min(next.value?.[0] ?? now, now - 120);
+  const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120);
 
-  for (let t = firstDate; t < now; t++) {
+  for (let t = firstDate; t < nowSeconds; t++) {
     while (!next.done && next.value[0] < t) next = iter.next();
     const has = !next.done && next.value[0] === t;
 
@@ -55,6 +61,18 @@ export function createChartArray<T, K extends keyof T>(
   return result;
 }
 
+function computeReferenceValue(points: ChartPoint[]): number | undefined {
+  const values = points
+    .filter(p => p.metric != null && Number.isFinite(p.metric))
+    .map(p => Number(p.metric));
+
+  if (values.length === 0) return undefined;
+
+  const sum = values.reduce((acc, v) => acc + v, 0);
+  const mean = sum / values.length;
+  return Math.round(mean);
+}
+
 const theme = {
   light:
     "bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
@@ -122,17 +140,9 @@ export function Metric<T, K extends keyof T>({
 
   // If the consumer provides a map function, we apply it to the raw data.
   const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
-  const recent = dataFinal
-    .slice(-(raw.length - 1))
-    .filter(x => x.metric != null) as ChartPoint[];
 
-  // Average the recent values
-  const computedReferenceValue =
-    recent.length > 0
-      ? Math.round(
-          recent.reduce((sum, x) => sum + (x.metric as number), 0) / recent.length,
-        )
-      : undefined;
+  // Compute the average value of the metric.
+  const referenceValue = computeReferenceValue(dataFinal);
 
   return (
     <div className="space-y-2">
@@ -156,7 +166,7 @@ export function Metric<T, K extends keyof T>({
               data={dataFinal}
               domain={domain}
               unit={unit}
-              referenceValue={computedReferenceValue}
+              referenceValue={referenceValue}
             />
           ) : (
             <div className="flex flex-col items-center space-y-1">

ui/src/components/sidebar/connectionStats.tsx

@@ -29,6 +29,10 @@ export default function ConnectionStatsSidebar() {
   useInterval(function collectWebRTCStats() {
     (async () => {
       if (!mediaStream) return;
+
+      const videoTrack = mediaStream.getVideoTracks()[0];
+      if (!videoTrack) return;
+
       const stats = await peerConnection?.getStats();
       let successfulLocalCandidateId: string | null = null;
       let successfulRemoteCandidateId: string | null = null;
@@ -69,22 +73,22 @@ export default function ConnectionStatsSidebar() {
     if (idx === 0) return { date: d.date, metric: null };
     const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
     const currDelay = d.metric as number | null | undefined;
-    const prevEmitted =
+    const prevCountEmitted =
       (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
-    const currEmitted =
+    const currCountEmitted =
       (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
 
     if (
       prevDelay == null ||
       currDelay == null ||
-      prevEmitted == null ||
-      currEmitted == null
+      prevCountEmitted == null ||
+      currCountEmitted == null
     ) {
       return { date: d.date, metric: null };
     }
 
     const deltaDelay = currDelay - prevDelay;
-    const deltaEmitted = currEmitted - prevEmitted;
+    const deltaEmitted = currCountEmitted - prevCountEmitted;
 
     // Guard counter resets or no emitted frames
     if (deltaDelay < 0 || deltaEmitted <= 0) {