Implement Server-Side Calorie Estimation and Display (#1531)

* feat: Implement server-side calorie estimation and display

This commit introduces a new feature to calculate and display real-time calorie expenditure based on user heart rate and age.

Key changes include:
- **Server-Side Calculation:** Added stateful calorie accumulation logic to `utils/socketManager.ts`. The calculation runs on the server to ensure consistency and uses a standard metabolic formula with default weight and age values.
- **Updated Data Structures:** Added a `calories` field to the `HrmData` interface in `types/websocket.ts` and `types/index.ts`.
- **UI Integration:** Modified the `HrTile.tsx` component to display the new calorie data (KCAL) alongside the BPM. The parent `HrmTiles.tsx` component now passes the `calories` prop.
- **Bug Fix:** Corrected a bug in the `WebSocketContext.tsx` reducer where a calorie value of `0` was being improperly handled, preventing the UI from resetting correctly. Also added a default `calories` prop to the `HrTile` component to prevent `NaN` from being displayed.

* feat: implement server-side calorie estimation

Implements server-side calorie estimation based on heart rate and age.

- Adds a `calories` field to the `HrmData` interface.
- Defines metabolic constants for calorie calculation.
- Implements `calculateCalories` logic in `utils/socketManager.ts`.
- Updates the `HrTile` component to display the accumulated calories.
- Fixes a bug in the WebSocket context reducer that was dropping the calories field.
- Addresses all PR feedback, including linting, styling, and type safety improvements.

* fix: resolve build failure by making calories prop optional

The previous commit introduced a build failure because the `HrTile` component was used in `app/client/connect/ConnectView.tsx` without the newly required `calories` prop.

This commit resolves the issue by making the `calories` prop optional in the `HrTileProps` interface. The component already provides a default value of 0, so this change is safe and prevents build failures in places where the calorie data is not relevant.

* chore: update visual regression snapshots

Updates the visual regression snapshots to match the UI changes introduced by the new calorie estimation feature. The `HrTile` component now displays the calorie count, which required updating the corresponding snapshot.

* chore: finalize calorie estimation feature

This marks the completion of the server-side calorie estimation feature.

- Implemented calorie calculation logic on the server.
- Updated frontend components to display calories.
- Fixed build errors and client-side state management bugs.
- Updated visual regression snapshots to reflect UI changes.
- All pull request feedback has been addressed.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

components/HrTile.tsx

@@ -32,6 +32,7 @@ const HrTile = ({
   name,
   bpm,
   percentMax,
+  calories = 0, // Default to 0 to prevent NaN
   isConnected = true, // Default to connected
   isAlerting = false,
   alertMessage = 'Checking signal...',
@@ -43,7 +44,7 @@ const HrTile = ({
     ? alertMessage
     : !isConnected
       ? 'Disconnected - Showing last known value'
-      : `Name: ${name}, BPM: ${bpm}, % Max HR: ${percentMax}%`
+      : `Name: ${name}, BPM: ${bpm}, Kcal: ${calories}, % Max HR: ${percentMax}%`
 
   return (
     <Tooltip title={tooltipTitle} arrow>
@@ -113,18 +114,38 @@ const HrTile = ({
             >
               {percentMax}%
             </Typography>
-            <Typography
-              data-testid="live-hr-value"
-              variant="h6"
+            <Box
               sx={{
-                fontWeight: 600,
-                fontSize: { xs: '1.2rem', sm: '1.4rem', md: '1.6rem' },
-                transition:
-                  'font-size 0.3s ease-in-out, color 0.3s ease-in-out',
+                display: 'flex',
+                justifyContent: 'space-around',
+                alignItems: 'center',
+                mt: 1,
               }}
             >
-              {bpm} BPM
-            </Typography>
+              {/* BPM Display */}
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                {bpm}{' '}
+                <Typography
+                  variant="caption"
+                  component="span"
+                  sx={{ opacity: 0.8 }}
+                >
+                  BPM
+                </Typography>
+              </Typography>
+
+              {/* Calorie Display */}
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                {Math.floor(calories)}{' '}
+                <Typography
+                  variant="caption"
+                  component="span"
+                  sx={{ opacity: 0.8 }}
+                >
+                  KCAL
+                </Typography>
+              </Typography>
+            </Box>
             {name && !/^(user|new user)$/i.test(name) && (
               <Typography
                 variant="subtitle1"
@@ -154,6 +175,7 @@ const arePropsEqual = (prevProps: HrTileProps, nextProps: HrTileProps) => {
     prevProps.name === nextProps.name &&
     prevProps.bpm === nextProps.bpm &&
     prevProps.percentMax === nextProps.percentMax &&
+    prevProps.calories === nextProps.calories &&
     prevProps.isConnected === nextProps.isConnected &&
     prevProps.isAlerting === nextProps.isAlerting &&
     prevProps.alertMessage === nextProps.alertMessage

components/HrmTiles.tsx

@@ -42,6 +42,7 @@ const HrmTiles = () => {
               name={user.name || ''}
               bpm={user.value}
               percentMax={hrZoneProps.percentage}
+              calories={user.calories || 0} // Pass calories
               isAlerting={!!matchingAlert}
               // Conditionally add alertMessage to avoid passing `undefined`
               {...(matchingAlert && { alertMessage: matchingAlert.message })}

context/WebSocketContext.tsx

@@ -110,19 +110,18 @@ export const WebSocketProvider = ({
 
         // Create a new state array by merging existing and new data
         const mergedHrmData = state.hrmData.map((existingUser) => {
-          // If the user is in the new payload, update their data and mark as connected
           if (incomingClients.has(existingUser.clientId)) {
             const updatedUser = payload.find(
               (newUser) => newUser.clientId === existingUser.clientId
             )
-            // If updatedUser is found, always use its data and mark as connected.
-            // The 'value > 0' check is not relevant for determining if a *connected* device's data should be used.
             return updatedUser
-              ? { ...updatedUser, isConnected: true }
-              : { ...existingUser, isConnected: true } // Fallback, though updatedUser should always exist if incomingClients.has(clientId)
+              ? {
+                  ...existingUser,
+                  ...updatedUser,
+                  isConnected: true,
+                }
+              : { ...existingUser, isConnected: true }
           }
-          // If the user is NOT in the new payload, they have disconnected.
-          // Keep their last known data but mark as disconnected.
           return { ...existingUser, isConnected: false }
         })
 

tests/playwright/visual-regression.spec.ts-snapshots/hr-tiles-section-chromium-linux.png

@@ -5,6 +5,7 @@ export interface HrTileProps {
   name: string
   bpm: number
   percentMax: number // 0-100
+  calories?: number
   isConnected?: boolean
 
   // NEW: Flag to trigger the visual diagnostic state

types/index.ts

@@ -12,6 +12,7 @@ export interface HrmData {
   maxHr: number
   name?: string
   age?: number
+  calories: number // Added field
 }
 
 export type TimerMode = 'STOPWATCH' | 'TABATA'

types/websocket.ts

@@ -50,3 +50,16 @@ export const HEART_RATE_ZONES: HeartRateZoneConfig[] = [
   { name: 'Zone 2', minPercent: 60, maxPercent: 70, color: '#2196F3' },
   { name: 'Zone 1', minPercent: 50, maxPercent: 60, color: '#9E9E9E' },
 ]
+
+// --- Calorie Calculation Constants ---
+// Based on standard metabolic formulas (e.g., Keytel)
+export const CALORIE_DEFAULTS = {
+  WEIGHT_KG: 75, // Default weight if not provided
+  // Simplified Factors (Male/Female average or specific)
+  // Formula: Calories/min = (-55.0969 + 0.6309 x HR + 0.1988 x Weight + 0.2017 x Age) / 4.184
+  FACTOR_HR: 0.6309,
+  FACTOR_WEIGHT: 0.1988,
+  FACTOR_AGE: 0.2017,
+  INTERCEPT: 55.0969,
+  JOULE_CONVERSION: 4.184,
+}