QAQC Dashboard

Wendi's awesome QAQC Dashboard that will display all the information you need for RCA QAQC Data!

The dashboard application lives in the dashboard/ directory. See dashboard/README.md for setup, deployment, configuration, and architecture documentation.

See the documentation for all the components/repository to deploy the QAQC Dashboard.

Repositories

• rca-data-tools: contains the majority of the code to perform the creation of png plots and csv plots for the dashboard.
• QAQC_dashboard: contains the dashboard application (Nuxt SSR with SQLite auth and S3 archive system).

Setup

1. Install uv and a modern version of NodeJS, with version 24 or higher being recommended.

2. Install Python packages and create a virtual environment.

   uv sync

3. Activate the new environment at .venv.

4. Download a subset of QAQC images and the image index from the RCA QAQC s3 bucket. Images should live at QAQC_dashboad/dashboard/public/QAQC_plots/

   python ./dev/setup_dev_images.py

5. Go to the dashboard folder, install packages, build and serve.

   cd dashboard
   npm install
   npm run build
   npm run serve

Development

To run the app in development mode with hot-reloading, while in the dashboard directory, execute:

Running

npm run dev

For additional commands, see ./dashboard/README.md.

Debugging

When debugging the app, the plot display list can be accessed via useStore().plotList.

The following launch.json will hit breakpoints in the app code but not node_modules:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug in Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/dashboard",
      "sourceMaps": true,
      "skipFiles": ["${webRoot}/node_modules/**"]
    }
  ]
}