Mochi HPC Experiments Dashboard

This project uses Observable Framework to present performance information from benchmarks running on multiple supercomputers.

Project Structure

.
├── src/
│   ├── index.md                    # Main page with supercomputer list
│   ├── supercomputers/             # Individual supercomputer folders
│   │   └── polaris/                # Example: Polaris supercomputer
│   └── data/                       # Data loaders for benchmark data
├── observablehq.config.js          # Framework configuration
└── package.json                    # Dependencies and scripts

Getting Started

Install Dependencies

npm install

Development

Start the local development server:

npm run dev

This will start a local server at http://localhost:3000 where you can preview your site.

Build

Build the static site:

npm run build

The built site will be in the dist/ directory.

Adding a New Supercomputer

To add a new supercomputer:

1. Create a new markdown file in src/supercomputers/ (e.g., my-system.md)
2. Add the system to the list in src/index.md
3. Add performance data visualization using Observable Plot
4. Optionally create data loaders in src/data/ for loading benchmark results

Data Loading

Observable Framework supports data loaders that can fetch and process data at build time. Place data loaders in the src/data/ directory. They can be:

• JavaScript/TypeScript files (.js, .ts)
• Python scripts (.py)
• Shell scripts (.sh)
• Any executable that outputs JSON, CSV, or other supported formats

Example data loader (src/data/system-metrics.json.js):

import fs from "fs";

// Fetch or generate your data
const data = await fetchBenchmarkData();

// Output as JSON
process.stdout.write(JSON.stringify(data));

Deployment

For GitHub Pages deployment:

npm run build

Then commit and push the dist/ directory, or configure GitHub Actions to build and deploy automatically.

Learn More

• Observable Framework Documentation
• Observable Plot
• Observable Inputs