QAQC Dashboard

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

The Vue based frontend code can be found in dashboard directory.

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

Repositories

The code for the infrastructure, backend, and frontend are hosted in 3 separate repositories: rca-data-tools, QAQC_dashboard, and cloud-infrastructure (private) within the OOI-CabledArray organization.

• 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 frontend code for the dashboard.
• cloud-infrastructure: contains terraform code for deploying the underlying infrastructure such as Virtual Private Cloud (VPC), CDN, Elastic Container Service (ECS) Tasks, Identity Access Management (IAM), and S3 Buckets.

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/**"]
    }
  ]
}