Test the data state before you style the market dashboard

A market dashboard may display incorrect information, such as an inaccurate symbol or stale data, while still appearing functional. These issues arise from data contract failures, which CSS cannot resolve. The article introduces a JavaScript example for testing the boundary between incoming data snapshots and their user interface. It is a design demonstration, not derived from a production system or trading signal.

To fully identify a row in the data, it should include a symbol name, source identifier, instrument identifier, and timeframe. The user interface should be aware of this combination. If a user switches tabs while a request is still processing, a late response should not replace the new one automatically. Timestamps with documented units should be used to track when data observations occur.

In the example, observedAtMs represents the source observation time in Unix milliseconds, and nowMs is a separate clock used for comparison. These are not derived from when a component renders.

A function named classifySnapshot is provided to determine the state of a snapshot based on its properties and policy settings. This function returns various states, including CONFIRMED, LIVE_PREVIEW, STALE, CONTEXT_MISMATCH, and INVALID, depending on the conditions met. These states help determine how the UI should display the data and handle potential errors.

It is crucial to test the function with various inputs, including negative policy values, blank identities, and missing snapshots, to ensure it behaves correctly in all scenarios. By mapping each state to a clear interface, the dashboard can provide accurate and useful information to the user while handling potential data contract failures effectively.