Struggling to Modify and Visualize State Variables

[f1bug]

Hi,

Amazing work! I've spent the last two days reviewing and trying to understand how everything functions. I tested it on my own computer to get a better grasp, but I still have several questions.

From what I gathered, the crates folder handles everything related to the connection and data extraction, while the dash folder contains the frontend. In particular, the file dash/src/types/state.type.ts defines the State type, which seems to be the most commonly used variable on the frontend.

I noticed that RaceControlMessages and TeamRadio not only hold the current message or radio, but also the past ones. To better understand how this works, I've been using console.log(state) in dash/src/app/(socket)/dashboard/page.tsx to check the output of these variables.

However, I feel like I'm missing something. For instance, when I try to change the name of a variable in state, such as renaming heartbeat?: Heartbeat; to heartbeatX?: Heartbeat;, and then log it with console.log(state.heartbeatX), it shows as undefined.

I searched the entire repository for the term heartbeat, and it only appears in dash/src/types/state.type.ts and crates/client/src/consts.rs. I'm not sure how useSocket() retrieves the value of state. Could you help me understand where the value is assigned and how I can change or add variables to the State type and see them in console.log(state)?

[slowlydev]

Thank you!

Yes you are correct. In crates folder you will find the rust part of f1-dash which are 2 backends, 2 utilities and some shared components between these 4 programs.

I see you have also found the state type and variable which is a key part of the dashboard. When there's an f1 session going on, state contained all the data f1 sends to us. Which are race control messages, team radios, driver timings and more.

Thats why you can't change the state type, as it's the type for the data we receive from f1.

So for example if u rename heartbeat to heartbeatX in the state, typescript will now say there's heartbeatX and heartbeat is gone but in reality f1 still sends heartbeat and not heartbeatX.

useSocket is a react context, and in the SocketContext.tsx file we connect to our backend which sends us the data from f1. There's also some code which enables us to delay the whole dashboard.

The crates/client/src/consts.rs file is part of the rust backend code which connects to f1. In the consts file where you found the heartbeat we define which topics we want to the data for. In our case we pretty much want everything.

I hope this helps, feel free to ask again if there are any more questions.

[f1bug]

Last Sunday, I used the tool saver to record the race, (unfortunately, I started recording from lap 17) so now I have a file with the following content:

{"C":"d-C899D72E-B,0|Id,0|Ie,13|p,5D|y,55C|x,55D|H,0|I,2CF|Z,0|v,E5|u,EE|K,18|w,0|r,3F|s,0|o,0|0,D|G,D|1,33CE|t,9|BE,19","M":[{"H":"Streaming","M":"feed","A":["TeamRadio",{"Captures":{"22":{"Utc":"2024-09-15T11:48:19.526Z","RacingNumber":"1","Path":"TeamRadio/MAXVER01_1_20240915_134808.mp3"}}},"2024-09-15T11:48:14.965Z"]}]}
{"C":"d-C899D72E-B,0|Id,0|Ie,13|p,5D|y,55A|x,55B|H,0|I,2CE|Z,0|v,E5|u,EE|K,18|w,0|r,3F|s,0|o,0|0,D|G,D|1,33BD|t,8|BE,19","M":[{"H":"Streaming","M":"feed","A":["Heartbeat",{"Utc":"2024-09-15T11:48:18.4877092Z","_kf":true},"2024-09-15T11:48:16.335Z"]}]}

Initially, I thought this was the exact format in which F1 transfers data, but based on your last post, I’m starting to doubt that. For example:

• console.log(state.heartbeat) returns a UTC timestamp.
• console.log(state.team) returns an array of radios.

and both are streamed as individual lines. How could I make an array of heartbeats?

Additionally, I noticed something strange. If I remove the content of the state.type.ts file and launch the simulator, API, live, and dash components, the app runs properly. This makes me wonder: Is state.type.ts a useless file?
Perhaps this is why, when I change the property from heartbeat?: Heartbeat; to heartbeatX?: Heartbeat; and log console.log(state.heartbeatX), the output is undefined...

Please correct me if I am wrong

[slowlydev]

Yes when recording a session we get the direct raw data from f1. In the beginning we get a message with an object that has a property named R. This message is the initial state f1 sends us. Every message after this first initial state is a partial update.

In the live backend saves the initial state and applies all the updates. In the process we format the JSON from PascalCase to camalCase. And we send the initial state and then the updates to the frontend.

These updates get applied via the merge functions in both the backend and frontend.

dash/src/lib/merge.ts - frontend
crates/data/src/merge.rs - backend

Initially, I thought this was the exact format in which F1 transfers data, but based on your last post, I’m starting to doubt that. For example:

• console.log(state.heartbeat) returns a UTC timestamp.
• console.log(state.team) returns an array of radios.

Because of how these merge functions are coded and how the data of f1 is structured things like team radios are arrays and heartbeats are not arrays.

and both are streamed as individual lines. How could I make an array of heartbeats?

So to make heartbeats arrays it would involve some changes in the merge functions or changes in the frontend when saving the state received from the live backend.

Additionally, I noticed something strange. If I remove the content of the state.type.ts file and launch the simulator, API, live, and dash components, the app runs properly. This makes me wonder: Is state.type.ts a useless file? Perhaps this is why, when I change the property from heartbeat?: Heartbeat; to heartbeatX?: Heartbeat; and log console.log(state.heartbeatX), the output is undefined...

Please correct me if I am wrong

The state.type.ts file is not useless. Without it you would not know what properties the state variables can have, at least not without trail and error. Also I am pretty sure if you were to build the frontend dashboard it would show you an error.

Also if you have more questions about these types and how they are relevant and what they are for you might want to look into TypeScript. My bad if you already know it.

[f1bug]

Thanks for your answer, i will investigate:
dash/src/lib/merge.ts - frontend
crates/data/src/merge.rs - backend