ui/src/components/Metric.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-refresh/only-export-components */
 import { ComponentProps } from "react";
 import { cva, cx } from "cva";
 
@@ -29,12 +28,7 @@ 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,
@@ -42,12 +36,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 nowSeconds = Math.floor(Date.now() / 1000);
+  const now = Math.floor(Date.now() / 1000);
 
   // We want 120 data points, in the chart.
-  const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120);
+  const firstDate = Math.min(next.value?.[0] ?? now, now - 120);
 
-  for (let t = firstDate; t < nowSeconds; t++) {
+  for (let t = firstDate; t < now; t++) {
     while (!next.done && next.value[0] < t) next = iter.next();
     const has = !next.done && next.value[0] === t;
 
@@ -61,18 +55,6 @@ 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",
@@ -140,9 +122,17 @@ 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[];
 
-  // Compute the average value of the metric.
+  // Average the recent values
-  const referenceValue = computeReferenceValue(dataFinal);
+  const computedReferenceValue =
+    recent.length > 0
+      ? Math.round(
+          recent.reduce((sum, x) => sum + (x.metric as number), 0) / recent.length,
+        )
+      : undefined;
 
   return (
     <div className="space-y-2">
@@ -166,7 +156,7 @@ export function Metric<T, K extends keyof T>({
               data={dataFinal}
               domain={domain}
               unit={unit}
-              referenceValue={referenceValue}
+              referenceValue={computedReferenceValue}
             />
           ) : (
             <div className="flex flex-col items-center space-y-1">

ui/src/components/sidebar/connectionStats.tsx

@@ -29,10 +29,6 @@ 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;
@@ -73,22 +69,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 prevCountEmitted =
+    const prevEmitted =
       (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
-    const currCountEmitted =
+    const currEmitted =
       (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
 
     if (
       prevDelay == null ||
       currDelay == null ||
-      prevCountEmitted == null ||
+      prevEmitted == null ||
-      currCountEmitted == null
+      currEmitted == null
     ) {
       return { date: d.date, metric: null };
     }
 
     const deltaDelay = currDelay - prevDelay;
-    const deltaEmitted = currCountEmitted - prevCountEmitted;
+    const deltaEmitted = currEmitted - prevEmitted;
 
     // Guard counter resets or no emitted frames
     if (deltaDelay < 0 || deltaEmitted <= 0) {