dashboard-build

CRITICAL Guidelines for Dashboard Building

• Ideally, do NOT skip Phase 1 (dashboard-design skill) as that ensures a much smoother build process. If the user just wants to build it, explain the value of a design phase first. Check if there is any existing /spec directory from Phase 1. If yes, use that to guide your build.
• Use your native tools to understand the data well, especially if you build custom charts or when you use specific selectors.
• If the user asks for an example, simply copy the example app and run it. Do not include your own data or change the example.
• When executing any script mentioned below for the first time, it may take a while to install dependencies. Plan accordingly before taking any rash actions.
• When iterating on the dashboard after completing all steps, do not forget key points from below, especially regarding spec compliance and updating and terminal handling: always keep all specs up to date, and always check if terminal output is clean after each iteration.
• Execute all scripts from this skill, and the app.py you will create, with uv run <script_name>.py or uv run app.py - this will ensure you use the correct dependencies and versions.
• ABSOLUTELY NEVER type ANY commands (including sleep, echo, or anything else) in the terminal where the dashboard app is running, even if you started it with isBackground=true. This WILL kill the dashboard process. The dashboard startup takes time - be patient and let it run undisturbed.

Spec Files: Documenting Decisions

IMPORTANT: Each step produces a spec file in the spec/ directory to document reasoning, enable collaboration, and allow resumption in future sessions. Create the spec/ directory if it is not already present at the root of the project.

Step 1: Build dashboard

1. You MUST ALWAYS copy the example app over, and modify it - this ensures less errors!
2. Investigate about the Vizro model by executing the schema fetching script. ALWAYS DO this for all models that you need - do NOT assume you know it. Execute the script like so: uv run ./scripts/get_model_json_schema.py <model_name> <model_name2> ... where <model_name> is the name of the model you want to get the schema for. You can get an overview of what is available by calling the overview script like so: uv run ./scripts/get_overview_vizro_models.py. This will print out all available models and their brief descriptions.
3. Build the dashboard config by changing the copied example app. Important: Very often normal plotly express charts will not suffice as they are too simple. In that case, refer to the custom charts guide to create more complex charts. These MUST be added to the correct section in the python app. Call the custom chart function from the Graph model in your dashboard app.