Build a File-Driven Data Visualization and Replay UI

Build a small web app that loads a data file and visualizes its contents. Include controls to replay the visible data over time. ### Constraints & Assumptions The source says “reply” a data file with visualization, which may mean replay; it supplies no file schema or exact UI. Replay is an explicit practice interpretation, not a confirmed source detail. Use React and this replacement contract: - The user selects a local UTF-8 CSV file, at most 1 MB, with header `time,value`, followed by at most 10000 rows. Time is an integer from 0 through 9007199254740991 milliseconds, bounded by JavaScript Number.MAX_SAFE_INTEGER; value is a finite number between -1e12 and 1e12. Quoted fields and extra columns are excluded. - Sort records by time, preserving input order for equal times. Display a line chart with a slider for elapsed time from the first record, and Play/Pause controls that reveal records up to the cursor. - Validate empty and malformed files, handle a single timestamp, and prevent an older asynchronous file read from replacing a newer selection. - Process the file locally in the component; no backend or upload service is required for this practice version. ### Clarifying Questions What does the original replay operation mean? What file format and scale must be supported? Should playback follow recorded timing or a selectable speed? What information must the visualization communicate? ### What a Strong Answer Covers A stated data contract, validation, safe asynchronous loading, time-based state, a responsive visualization, and clear loading/error/playback controls. ### Follow-up Questions How would you support much larger files without blocking the UI? How should missing samples or multiple series be represented? What would you change if the file format or intended operation differs from the practice assumptions?