@maestro_io/maestro-web-sdk 4.0.0-beta.4 → 4.0.0

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

@@ -1,989 +0,0 @@
-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;