@maestro_io/maestro-web-sdk 4.0.0-beta.5 → 4.0.1

package/dist/src/modules/stats/view-model/StatsViewModel.js

@@ -0,0 +1,989 @@
+import { Observable } from '../../../helpers/Observable';
+import { ViewModel } from '../../../view-models/ViewModel';
+import { MOCK_STATS_API_PRE_GAME_RESPONSE } from '../mocks';
+import StatsService from '@/services/StatsService';
+import { formatLastPlayMarquee, parseDriveDescription, } from '../utils/driveSummaryUtils';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { setImageDimensions } from '@/helpers/url';
+import SDK from '@/index';
+import { captureException } from '@/sentry';
+import { stringHashCode } from '@/helpers/strings';
+const STATS_ERROR_STATE = {
+    NONE: 'none',
+    TAB_LOAD_FAILURE: 'tabLoadFailure',
+};
+// Constants for configuration
+const DEFAULT_POLLING_INTERVAL = 10000; // 10 seconds
+const SMART_POLLING_DELAY = 1000; // 1 second delay after smart polling immediate call
+// The interval for polling stats data (in milliseconds)
+const STATS_ITEM_TYPE_CARD_MAP = {
+    activeAthletes: 'activeAthletes',
+    driveSummary: 'drives',
+    gameLeaders: 'leaders',
+    headerTeam: 'header',
+    matchPredictor: 'predictor',
+    promotion: 'promotion',
+    recentGames: 'previousGames',
+    scoringSummary: 'scoringSummary',
+    teamStats: 'entities',
+    winProbability: 'winProbability',
+    penalties: 'penaltySummary',
+};
+export class StatsViewModel extends ViewModel {
+    constructor(eventId, delegate, options = {}) {
+        super();
+        Object.defineProperty(this, "isDataLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(true)
+        });
+        Object.defineProperty(this, "hasEverSuccessfullyLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "eventId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "statsItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "errorState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('none')
+        });
+        Object.defineProperty(this, "currentGameState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('')
+        });
+        Object.defineProperty(this, "statsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // Properties
+        Object.defineProperty(this, "useMockData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "lastResponseHash", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Enhanced timecode-related properties
+        Object.defineProperty(this, "currentPlayerTimeCode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "timecodePollingTask", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "smartPollingTimeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "timecodePollingState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                isActive: false,
+                currentUrl: null,
+                lastUpdateTime: 0,
+            }
+        });
+        Object.defineProperty(this, "onEngage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (type) => {
+                this.analyticsService.panelClick({
+                    type: 'espnStats',
+                    name: 'stats_item_clicked',
+                    metadata: {
+                        card: [STATS_ITEM_TYPE_CARD_MAP[type]],
+                        game_state: [this.currentGameState.value],
+                    },
+                });
+            }
+        });
+        this.eventId = eventId;
+        this.useMockData = options.useMockData || false;
+        this.statsService = new StatsService(delegate);
+        this.analyticsService = new AnalyticsService();
+    }
+    /**
+     * Sets panel-specific data configuration
+     * @param panelData - Object containing panel configuration
+     */
+    setDataToPanel(panelData) {
+        if ('overrideUrl' in panelData) {
+            const overrideUrl = panelData.overrideUrl;
+            if (typeof overrideUrl === 'string' && overrideUrl.length > 0) {
+                console.log('[StatsViewModel] Setting overrideUrl:', overrideUrl);
+                this.statsService.overrideUrl = overrideUrl;
+            }
+        }
+    }
+    /**
+     * Initialize the ViewModel and start data fetching
+     */
+    async init() {
+        if (this.useMockData) {
+            await this.fetchMockData();
+        }
+        else {
+            // Get the current timecode from MaestroEventViewModel instead of defaulting to null
+            // This ensures we don't override the current timecode when switching tabs
+            const currentTimeCode = this.getCurrentTimeCode();
+            this.onUpdatePlayerTimeCode(currentTimeCode);
+            this.analyticsService.panelView('espnStats');
+        }
+    }
+    /**
+     * Get the current timecode from the MaestroEventViewModel
+     * This prevents the stats panel from always defaulting to real-time data
+     */
+    getCurrentTimeCode() {
+        try {
+            // Access the MaestroEventViewModel through the imported SDK to get current timecode
+            const maestroEventViewModel = SDK.getMaestroEventViewModel();
+            if (maestroEventViewModel &&
+                typeof maestroEventViewModel.getPlayerTimeCode === 'function') {
+                return maestroEventViewModel.getPlayerTimeCode();
+            }
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'StatsViewModel.getCurrentTimeCode',
+            });
+            console.warn('Could not get current timecode from MaestroEventViewModel:', error);
+        }
+        // Fallback to null (real-time) if we can't get the current timecode
+        return null;
+    }
+    /**
+     * Clean up resources when the ViewModel is no longer needed
+     */
+    cleanup() {
+        this.stopTimecodePolling();
+        this.clearSmartPollingTimeout();
+        this.resetTimecodePollingState();
+    }
+    /**
+     * Handle player timecode updates with enhanced logging and validation
+     *
+     * @param playerTimeCode - The timecode in milliseconds, or null for live
+     */
+    onUpdatePlayerTimeCode(playerTimeCode) {
+        this.currentPlayerTimeCode = playerTimeCode;
+        if (this.useMockData) {
+            return;
+        }
+        try {
+            this.performSmartPolling(playerTimeCode);
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'StatsViewModel.onUpdatePlayerTimeCode',
+            });
+            console.error('Error handling player timecode update:', error);
+            this.handleTimecodeError('Error handling player timecode update', error);
+        }
+    }
+    clearTabLoadFailure() {
+        this.errorState.value = 'none';
+        const currentTimeCode = this.getCurrentTimeCode();
+        this.onUpdatePlayerTimeCode(currentTimeCode);
+    }
+    /**
+     * Implement smart polling strategy: immediate API call + delayed polling resumption
+     *
+     * @param playerTimeCode - The timecode in milliseconds, or null
+     */
+    async performSmartPolling(playerTimeCode) {
+        this.clearSmartPollingTimeout();
+        this.stopTimecodePolling();
+        try {
+            const immediateStats = await this.statsService.getStatsByUrl(playerTimeCode);
+            if (!immediateStats) {
+                throw new Error('API returned undefined or null response');
+            }
+            this.processPolledData(immediateStats);
+            this.smartPollingTimeout = window.setTimeout(() => {
+                this.startTimecodePolling(playerTimeCode);
+                this.smartPollingTimeout = null;
+            }, SMART_POLLING_DELAY);
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'StatsViewModel.performSmartPolling',
+            });
+            console.error('Error during smart polling immediate call:', error);
+            this.handleTimecodeError('Error during smart polling immediate call', error);
+            this.stopTimecodePolling();
+            this.startTimecodePolling(playerTimeCode);
+        }
+    }
+    /**
+     * Enhanced error handling for timecode-related operations
+     *
+     * @param context - Description of where the error occurred
+     * @param error - The error that occurred
+     */
+    handleTimecodeError(context, error) {
+        const errorDetails = {
+            context,
+            errorType: error?.constructor?.name || 'Unknown',
+            errorMessage: error instanceof Error ? error.message : String(error),
+            timestamp: new Date().toISOString(),
+            currentTimecode: this.currentPlayerTimeCode,
+            hasExistingData: this.statsItems.value.length > 0,
+            lastResponseHash: this.lastResponseHash,
+            url: this.timecodePollingState.currentUrl,
+        };
+        console.error(`${context}:`, errorDetails);
+        if (!this.hasEverSuccessfullyLoaded.value) {
+            this.errorState.value = 'tabLoadFailure';
+        }
+    }
+    /**
+     * Clear any pending smart polling timeout
+     */
+    clearSmartPollingTimeout() {
+        if (this.smartPollingTimeout) {
+            clearTimeout(this.smartPollingTimeout);
+            this.smartPollingTimeout = null;
+        }
+    }
+    /**
+     * Reset timecode polling state
+     */
+    resetTimecodePollingState() {
+        this.timecodePollingState = {
+            isActive: false,
+            currentUrl: null,
+            lastUpdateTime: 0,
+        };
+    }
+    /**
+     * Start timecode-based polling with enhanced logging
+     *
+     * @param playerTimeCode - The timecode in milliseconds, or null
+     */
+    startTimecodePolling(playerTimeCode) {
+        this.stopTimecodePolling();
+        try {
+            this.timecodePollingTask = this.statsService.pollStatsByUrl(playerTimeCode, DEFAULT_POLLING_INTERVAL, (data) => {
+                this.processPolledData(data);
+            }, (error) => {
+                console.error('Timecode polling error:', error);
+                this.handleTimecodeError('Timecode polling error', error);
+            });
+            this.timecodePollingState.isActive = true;
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'StatsViewModel.startTimecodePolling',
+            });
+            console.error('Error setting up timecode-based Stats polling:', error);
+            this.handleTimecodeError('Error setting up timecode-based Stats polling', error);
+        }
+    }
+    /**
+     * Stop timecode-based polling with enhanced logging
+     */
+    stopTimecodePolling() {
+        if (this.timecodePollingTask) {
+            this.timecodePollingTask.stop();
+            this.timecodePollingTask = null;
+        }
+        this.timecodePollingState.isActive = false;
+    }
+    /**
+     * Fetch mock data for testing
+     */
+    async fetchMockData() {
+        this.processData(MOCK_STATS_API_PRE_GAME_RESPONSE);
+        this.hasEverSuccessfullyLoaded.value = true;
+        this.isDataLoading.value = false;
+    }
+    /**
+     * Process polled data with hash comparison to avoid unnecessary re-renders
+     * Enhanced with comprehensive logging to show data changes
+     *
+     * @param data - The stats data received from the API
+     */
+    processPolledData(data) {
+        const responseString = JSON.stringify(data);
+        const currentHash = stringHashCode(responseString);
+        if (this.hasEverSuccessfullyLoaded.value &&
+            currentHash === this.lastResponseHash) {
+            return;
+        }
+        this.lastResponseHash = currentHash;
+        this.hasEverSuccessfullyLoaded.value = true;
+        this.errorState.value = 'none';
+        this.processData(data);
+        if (data.gameState === 'post') {
+            this.stopTimecodePolling();
+        }
+    }
+    processData(data) {
+        const statsItems = [];
+        const headerTeam = this.parseHeaderTeams(data);
+        if (headerTeam) {
+            statsItems.push(headerTeam);
+        }
+        const matchPredictor = this.parseMatchPredictor(data);
+        if (matchPredictor) {
+            statsItems.push(matchPredictor);
+        }
+        const driveSummary = this.parseDriveSummary(data);
+        if (driveSummary.length > 0) {
+            statsItems.push(...driveSummary);
+        }
+        const activeAthletes = this.parseActiveAthletes(data);
+        if (activeAthletes) {
+            statsItems.push(activeAthletes);
+        }
+        const scoringSummary = this.parseScoringSummary(data);
+        if (scoringSummary) {
+            statsItems.push(scoringSummary);
+        }
+        const penalties = this.parsePenalties(data);
+        if (penalties) {
+            statsItems.push(penalties);
+        }
+        const gameLeaders = this.parseGameLeaders(data);
+        if (gameLeaders) {
+            statsItems.push(gameLeaders);
+        }
+        const recentGames = this.parseRecentGames(data);
+        if (recentGames) {
+            statsItems.push(recentGames);
+        }
+        const winProbability = this.parseWinProbability(data);
+        if (winProbability) {
+            statsItems.push(winProbability);
+        }
+        const teamsStatistics = this.parseTeamsStatistics(data);
+        if (teamsStatistics) {
+            statsItems.push(teamsStatistics);
+        }
+        const promotion = this.parsePromotion(data);
+        if (promotion) {
+            statsItems.push(promotion);
+        }
+        // Update the stats items observable
+        this.statsItems.value = statsItems;
+        this.currentGameState.value = data.gameState;
+    }
+    parseDriveSummary(data) {
+        const teams = data.entities?.teams;
+        const drives = data.drives;
+        if (!teams || !drives || drives.length === 0) {
+            return [];
+        }
+        const result = [];
+        for (const drive of drives) {
+            if (!drive?.team?.$key) {
+                continue;
+            }
+            const plays = [...(drive.plays || [])].reverse();
+            const lastPlay = plays[plays.length - 1] || null;
+            let lastPlayMarquee = '';
+            if (lastPlay) {
+                lastPlayMarquee = formatLastPlayMarquee(lastPlay);
+            }
+            const { plays: playsQuantity, time, yards } = parseDriveDescription(drive.description || '');
+            const team = teams[drive.team.$key];
+            if (!team) {
+                continue;
+            }
+            result.push({
+                id: drive.id,
+                lastPlayMarquee,
+                plays,
+                playsQuantity,
+                team,
+                time,
+                type: 'driveSummary',
+                yards,
+            });
+        }
+        return result;
+    }
+    parseTeamsStatistics(data) {
+        const teams = data.entities?.teams;
+        if (!teams) {
+            return null;
+        }
+        const awayTeam = Object.values(teams).find((team) => team.homeAway === 'away');
+        const homeTeam = Object.values(teams).find((team) => team.homeAway === 'home');
+        if (!awayTeam || !homeTeam) {
+            return null;
+        }
+        // Ensure both teams have statistics
+        if (!awayTeam.statistics || !homeTeam.statistics) {
+            return null;
+        }
+        const statistics = [];
+        for (let i = 0; i < awayTeam.statistics.length; i++) {
+            const awayStat = awayTeam.statistics[i];
+            const homeStat = homeTeam.statistics[i];
+            statistics.push({
+                awayTeamDisplayValue: awayStat?.displayValue || '0',
+                displayName: awayStat.displayName || '',
+                homeTeamDisplayValue: homeStat?.displayValue || '0',
+                awayTeamValue: awayStat?.value || 0,
+                homeTeamValue: homeStat?.value || 0,
+            });
+        }
+        return {
+            type: 'teamStats',
+            awayTeam: {
+                logo: awayTeam.logo,
+                displayName: awayTeam.displayName || '',
+                color: awayTeam.color || '',
+                abbreviation: awayTeam.abbreviation || '',
+            },
+            homeTeam: {
+                logo: homeTeam.logo,
+                displayName: homeTeam.displayName || '',
+                color: homeTeam.color || '',
+                abbreviation: homeTeam.abbreviation || '',
+            },
+            statistics,
+        };
+    }
+    parseMatchPredictor(data) {
+        const teams = data.entities?.teams;
+        const predictor = data.predictor;
+        if (!teams || !predictor || !predictor.homeTeam || !predictor.awayTeam) {
+            return null;
+        }
+        // Get team data
+        const homeTeam = teams[predictor.homeTeam.team.$key];
+        const awayTeam = teams[predictor.awayTeam.team.$key];
+        if (!homeTeam || !awayTeam) {
+            return null;
+        }
+        // Parse percentages
+        const homePercentage = parseFloat(predictor.homeTeam.gameProjection);
+        const awayPercentage = parseFloat(predictor.awayTeam.gameProjection);
+        return {
+            type: 'matchPredictor',
+            header: predictor.header,
+            imageUrl: predictor.imageUrl,
+            awayTeam: {
+                percentage: awayPercentage,
+                abbreviation: awayTeam.abbreviation,
+                logo: awayTeam.logo,
+                displayName: awayTeam.displayName || '',
+            },
+            homeTeam: {
+                percentage: homePercentage,
+                abbreviation: homeTeam.abbreviation,
+                logo: homeTeam.logo,
+                displayName: homeTeam.displayName || '',
+            },
+        };
+    }
+    parsePromotion(response) {
+        const promotion = response.promotion;
+        if (!promotion) {
+            return null;
+        }
+        return {
+            type: 'promotion',
+            title: promotion.title || '',
+            description: promotion.description || '',
+            logo: promotion.logo || '',
+            qrCode: promotion.qrCode || '',
+            backgroundImage: promotion.backgroundImage || '',
+        };
+    }
+    parseHeaderTeams(response) {
+        const teams = response.entities?.teams;
+        if (!teams || !response.header?.teams) {
+            return null;
+        }
+        const homeTeamHeader = response.header.teams.find((t) => {
+            const team = teams[t.$key];
+            return team && team.homeAway === 'home';
+        });
+        const awayTeamHeader = response.header.teams.find((t) => {
+            const team = teams[t.$key];
+            return team && team.homeAway === 'away';
+        });
+        if (!homeTeamHeader || !awayTeamHeader) {
+            return null;
+        }
+        const homeTeam = teams[homeTeamHeader.$key];
+        const awayTeam = teams[awayTeamHeader.$key];
+        if (!homeTeam || !awayTeam) {
+            return null;
+        }
+        const statistics = [];
+        const statisticsSet = new Set();
+        const awayStatistics = awayTeam.statistics || [];
+        const homeStatistics = homeTeam.statistics || [];
+        [...awayStatistics, ...homeStatistics].forEach((st) => {
+            statisticsSet.add(st.$key);
+        });
+        // Ensure all statistics from both teams are included
+        statisticsSet.forEach((statKey) => {
+            const awayStat = awayStatistics.find((st) => st.$key === statKey);
+            const homeStat = homeStatistics.find((st) => st.$key === statKey);
+            statistics.push({
+                displayName: awayStat?.displayName || homeStat?.displayName || '',
+                awayTeamValue: awayStat?.value || 0,
+                homeTeamValue: homeStat?.value || 0,
+                awayTeamDisplayValue: awayStat?.displayValue || '0',
+                homeTeamDisplayValue: homeStat?.displayValue || '0',
+            });
+        });
+        return {
+            type: 'headerTeam',
+            linescoresHeader: response.header.linescoresHeader || [],
+            isLive: response.gameState === 'in' || response.gameState === 'post',
+            statistics,
+            awayTeam: {
+                abbreviation: awayTeam.abbreviation,
+                color: awayTeam.color,
+                id: awayTeam.id,
+                linescores: awayTeamHeader?.linescores?.map((l) => l.displayValue) || [
+                    awayTeamHeader.score || '0',
+                ],
+                logo: awayTeam.logo,
+                name: awayTeam.name,
+                record: awayTeam.record,
+            },
+            homeTeam: {
+                abbreviation: homeTeam.abbreviation,
+                color: homeTeam.color,
+                id: homeTeam.id,
+                linescores: homeTeamHeader?.linescores?.map((l) => l.displayValue) || [
+                    homeTeamHeader.score || '0',
+                ],
+                logo: homeTeam.logo,
+                name: homeTeam.name,
+                record: homeTeam.record,
+            },
+        };
+    }
+    parseRecentGames(response) {
+        const teams = response.entities?.teams;
+        const previousGames = response.previousGames;
+        if (!teams || !previousGames || previousGames.length === 0) {
+            return null;
+        }
+        const awayTeamPreviousGame = previousGames.find((game) => game?.displayOrder === 1);
+        const homeTeamPreviousGame = previousGames.find((game) => game?.displayOrder === 2);
+        if (!awayTeamPreviousGame || !homeTeamPreviousGame) {
+            return null;
+        }
+        if (!awayTeamPreviousGame.events || !homeTeamPreviousGame.events) {
+            return null;
+        }
+        if (!awayTeamPreviousGame.team?.$key || !homeTeamPreviousGame.team?.$key) {
+            return null;
+        }
+        const awayTeam = teams[awayTeamPreviousGame.team.$key];
+        const homeTeam = teams[homeTeamPreviousGame.team.$key];
+        if (!awayTeam || !homeTeam) {
+            return null;
+        }
+        const previousGame = {
+            type: 'recentGames',
+            awayTeam: {
+                events: [...awayTeamPreviousGame.events]
+                    .reverse()
+                    .filter((event) => event?.team?.$key)
+                    .map((event) => {
+                    const eventTeam = teams[event.team.$key];
+                    return {
+                        gameResult: event.gameResult,
+                        homeAway: event.team.homeAway,
+                        score: event.score,
+                        teamLogo: eventTeam?.logo,
+                    };
+                }),
+                logo: awayTeam.logo,
+                name: awayTeam.shortDisplayName,
+            },
+            homeTeam: {
+                events: [...homeTeamPreviousGame.events]
+                    .reverse()
+                    .filter((event) => event?.team?.$key)
+                    .map((event) => {
+                    const eventTeam = teams[event.team.$key];
+                    return {
+                        gameResult: event.gameResult,
+                        homeAway: event.team.homeAway,
+                        score: event.score,
+                        teamLogo: eventTeam?.logo,
+                    };
+                }),
+                logo: homeTeam.logo,
+                name: homeTeam.shortDisplayName,
+            },
+        };
+        return previousGame;
+    }
+    parseWinProbability(response) {
+        const winProbability = response.winProbability;
+        if (!winProbability ||
+            !winProbability.homeTeam ||
+            !winProbability.awayTeam) {
+            return null;
+        }
+        const teams = response.entities?.teams;
+        if (!teams) {
+            return null;
+        }
+        const homeTeam = teams[winProbability.homeTeam.team.$key];
+        const awayTeam = teams[winProbability.awayTeam.team.$key];
+        if (!homeTeam || !awayTeam) {
+            return null;
+        }
+        return {
+            type: 'winProbability',
+            chartImageUrl: winProbability.imageUrl,
+            awayTeam: {
+                id: awayTeam.id,
+                abbreviation: awayTeam.abbreviation,
+                logo: awayTeam.logo,
+                winPercentage: winProbability.awayTeam.winPercentage,
+            },
+            homeTeam: {
+                id: homeTeam.id,
+                abbreviation: homeTeam.abbreviation,
+                logo: homeTeam.logo,
+                winPercentage: winProbability.homeTeam.winPercentage,
+            },
+        };
+    }
+    parseGameLeaders(response) {
+        if (!response.entities?.athletes || !response.entities?.teams) {
+            return null;
+        }
+        const leaders = response.leaders;
+        const isPre = response.gameState === 'pre';
+        if (!leaders || leaders.length === 0) {
+            return null;
+        }
+        const items = [];
+        for (const leader of leaders) {
+            if (!leader.away || !leader.home) {
+                continue;
+            }
+            if (!leader.away?.athlete?.$key || !leader.home?.athlete?.$key) {
+                continue;
+            }
+            const awayAthlete = response.entities.athletes[leader.away.athlete.$key];
+            const homeAthlete = response.entities.athletes[leader.home.athlete.$key];
+            if (!awayAthlete || !homeAthlete) {
+                continue;
+            }
+            const awayAthleteStatistics = leader.away.athlete.statistics || [];
+            const homeAthleteStatistics = leader.home.athlete.statistics || [];
+            const value = {
+                displayName: leader.displayName,
+                awayAthlete: {
+                    id: awayAthlete.id,
+                    displayName: awayAthlete.displayName,
+                    headshot: awayAthlete.headshot
+                        ? setImageDimensions(awayAthlete.headshot, 256, 144)
+                        : '',
+                    position: awayAthlete.position?.abbreviation || '-',
+                    shortName: awayAthlete.shortName,
+                    jersey: awayAthlete.jersey,
+                    statistics: awayAthleteStatistics,
+                },
+                homeAthlete: {
+                    id: homeAthlete.id,
+                    displayName: homeAthlete.displayName,
+                    headshot: homeAthlete.headshot
+                        ? setImageDimensions(homeAthlete.headshot, 256, 144)
+                        : '',
+                    position: homeAthlete.position?.abbreviation || '-',
+                    shortName: homeAthlete.shortName,
+                    jersey: homeAthlete.jersey,
+                    statistics: homeAthleteStatistics,
+                },
+            };
+            items.push(value);
+        }
+        if (!items.length) {
+            return null;
+        }
+        return {
+            type: 'gameLeaders',
+            items,
+            displayText: isPre ? 'Season Leaders' : 'Game Leaders',
+        };
+    }
+    parseActiveAthletes(response) {
+        const activeAthletes = response.activeAthletes;
+        const { awayTeam, homeTeam } = this.getActiveAthletesTeamInfo(response);
+        const athletes = [];
+        if (!response.entities?.athletes ||
+            !activeAthletes ||
+            awayTeam.index === -1 ||
+            homeTeam.index === -1) {
+            return null;
+        }
+        for (let i = 0; i < activeAthletes.teams[awayTeam.index].athletes.length; i++) {
+            const awayAthlete = activeAthletes.teams[awayTeam.index].athletes[i];
+            const homeAthlete = activeAthletes.teams[homeTeam.index].athletes[i];
+            if (!awayAthlete?.$key || !homeAthlete?.$key) {
+                continue;
+            }
+            const awayAthleteInfo = response.entities.athletes[awayAthlete.$key];
+            const homeAthleteInfo = response.entities.athletes[homeAthlete.$key];
+            if (!awayAthleteInfo || !homeAthleteInfo) {
+                continue;
+            }
+            const awayAthleteStatistics = [];
+            const homeAthleteStatistics = [];
+            const awayStatLine = awayAthlete.statLine || '';
+            const homeStatLine = homeAthlete.statLine || '';
+            awayStatLine
+                .trim()
+                .split(',')
+                .forEach((st, index) => {
+                const [awayDisplayValue, awayAbbreviation] = st.trim().split(' ');
+                const homeStats = homeStatLine.trim().split(',')[index];
+                if (!homeStats) {
+                    return;
+                }
+                const [homeDisplayValue, homeAbbreviation] = homeStats
+                    .trim()
+                    .split(' ');
+                awayAthleteStatistics.push({
+                    displayValue: awayDisplayValue || '0',
+                    abbreviation: awayAbbreviation || '-',
+                    value: parseFloat(awayDisplayValue) || 0,
+                });
+                homeAthleteStatistics.push({
+                    displayValue: homeDisplayValue || '0',
+                    abbreviation: homeAbbreviation || '-',
+                    value: parseFloat(homeDisplayValue) || 0,
+                });
+            });
+            athletes.push({
+                awayAthlete: {
+                    id: awayAthleteInfo.id,
+                    displayName: awayAthleteInfo.displayName,
+                    headshot: awayAthleteInfo.headshot
+                        ? setImageDimensions(awayAthleteInfo.headshot, 256, 144)
+                        : '',
+                    position: awayAthleteInfo.position?.abbreviation || '-',
+                    shortName: awayAthleteInfo.shortName,
+                    jersey: awayAthleteInfo.jersey,
+                    statistics: awayAthleteStatistics,
+                    minifiedStatistics: awayAthlete.statLine,
+                },
+                homeAthlete: {
+                    id: homeAthleteInfo.id,
+                    displayName: homeAthleteInfo.displayName,
+                    headshot: homeAthleteInfo.headshot
+                        ? setImageDimensions(homeAthleteInfo.headshot, 256, 144)
+                        : '',
+                    position: homeAthleteInfo.position?.abbreviation || '-',
+                    shortName: homeAthleteInfo.shortName,
+                    jersey: homeAthleteInfo.jersey,
+                    statistics: homeAthleteStatistics,
+                    minifiedStatistics: homeAthlete.statLine,
+                },
+            });
+        }
+        if (!athletes.length) {
+            return null;
+        }
+        return {
+            type: 'activeAthletes',
+            awayTeam,
+            homeTeam,
+            athletes,
+            displayText: activeAthletes.displayText,
+        };
+    }
+    getActiveAthletesTeamInfo(data) {
+        const teams = data.activeAthletes?.teams || [];
+        let awayTeam = {
+            index: -1,
+            id: '',
+            logo: '',
+            name: '-',
+        };
+        let homeTeam = {
+            index: -1,
+            id: '',
+            logo: '',
+            name: '-',
+        };
+        const entitiesTeams = data.entities?.teams;
+        if (!entitiesTeams) {
+            return { awayTeam, homeTeam };
+        }
+        for (let i = 0; i < teams.length; i++) {
+            const teamInfo = teams[i];
+            const team = entitiesTeams[teamInfo.team.$key];
+            if (!team) {
+                continue;
+            }
+            if (team.homeAway === 'away') {
+                awayTeam = {
+                    index: i,
+                    id: team.id,
+                    logo: team.logo,
+                    name: team.name || '-',
+                };
+            }
+            else if (team.homeAway === 'home') {
+                homeTeam = {
+                    index: i,
+                    id: team.id,
+                    logo: team.logo,
+                    name: team.name || '-',
+                };
+            }
+        }
+        return { awayTeam, homeTeam };
+    }
+    parseScoringSummary(data) {
+        const scoringSummary = data.scoringSummary;
+        if (!scoringSummary || !scoringSummary.sections) {
+            return null;
+        }
+        const teams = data.entities?.teams;
+        const athletes = data.entities?.athletes;
+        const sections = scoringSummary.sections.map((section) => {
+            const scores = section.items
+                .filter((item) => item?.team?.$key && item?.athlete?.$key)
+                .map((item) => {
+                const team = teams?.[item.team.$key];
+                const athlete = athletes?.[item.athlete.$key];
+                const [athleteNumber, ...athleteNameWithAssists] = item.title.split(' ');
+                let athleteAssists = '';
+                let athleteName = '';
+                if (athleteNameWithAssists.length > 0) {
+                    athleteAssists =
+                        athleteNameWithAssists[athleteNameWithAssists.length - 1];
+                    athleteName = athleteNameWithAssists.slice(0, -1).join(' ');
+                }
+                return {
+                    teamLogo: team?.logo,
+                    teamName: team?.abbreviation,
+                    athletePosition: athlete?.position?.abbreviation || '',
+                    athleteNumber,
+                    athleteName,
+                    athleteAssists,
+                    athleteThumbnail: athlete?.headshot
+                        ? setImageDimensions(athlete.headshot, 200, 144)
+                        : undefined,
+                    description: item.description,
+                    clock: item.clock,
+                };
+            });
+            return {
+                title: section.title,
+                scores,
+            };
+        });
+        if (!sections.length || sections.every((s) => s.scores.length === 0)) {
+            return null;
+        }
+        return {
+            type: 'scoringSummary',
+            title: scoringSummary.title,
+            sections,
+        };
+    }
+    parsePenalties(data) {
+        const penalties = data.penaltySummary;
+        if (!penalties || !penalties.sections) {
+            return null;
+        }
+        const teams = data.entities?.teams;
+        const athletes = data.entities?.athletes;
+        const sections = penalties.sections.map((section) => {
+            const scores = section.items
+                .filter((item) => item?.team?.$key && item?.athlete?.$key)
+                .map((item) => {
+                const team = teams?.[item.team.$key];
+                const athlete = athletes?.[item.athlete.$key];
+                const [athleteNumber, ...athleteName] = item.title.split(' ');
+                return {
+                    teamLogo: team?.logo,
+                    teamName: team?.abbreviation,
+                    athletePosition: athlete?.position?.abbreviation || '',
+                    athleteNumber,
+                    athleteName: athleteName.join(' '),
+                    athleteThumbnail: athlete?.headshot
+                        ? setImageDimensions(athlete.headshot, 200, 144)
+                        : undefined,
+                    description: item.description,
+                    clock: item.clock,
+                };
+            });
+            return {
+                title: section.title,
+                scores,
+            };
+        });
+        if (!sections.length || sections.every((s) => s.scores.length === 0)) {
+            return null;
+        }
+        return {
+            type: 'penalties',
+            title: penalties.title,
+            sections,
+        };
+    }
+    /**
+     * Simulate a use case using mock StatsApiResponse data
+     */
+    simulateUseCase(_useCase, testData) {
+        if (testData) {
+            this.processData(testData);
+            this.hasEverSuccessfullyLoaded.value = true;
+            this.errorState.value = 'none';
+            this.isDataLoading.value = false;
+        }
+    }
+}
+export default StatsViewModel;