Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
bac570e
Start a shell.nix for ui/
ch1bo Nov 13, 2025
279f1b9
Just use npm
ch1bo Nov 13, 2025
aff87fb
Render node stats top right corner
ch1bo Nov 13, 2025
dd06106
Add note about git lfs
ch1bo Nov 14, 2025
7e96d14
Simplify getting started
ch1bo Nov 14, 2025
98d386c
Create an example scenario and topology
ch1bo Nov 14, 2025
89c0ea7
Format with prettier
ch1bo Nov 17, 2025
4b1638d
Simplify worker/ui interface and store all events for full timeline c…
ch1bo Nov 17, 2025
3107f81
Drop batchSize and restructure ui elements
ch1bo Nov 17, 2025
1f90df8
Include transactions if wanted
ch1bo Nov 17, 2025
241676a
Re-organize scenario loading and playback controls
ch1bo Nov 18, 2025
c618d2f
Migrate whole data aggregation to reducers
ch1bo Nov 18, 2025
172a604
Use aggregated data from reduced state
ch1bo Nov 18, 2025
c9d45b9
Render EB messages traveling (constant speed)
ch1bo Nov 18, 2025
51ecd6e
Enumerate through message types in Stats
ch1bo Nov 18, 2025
dffaf30
Add RB visualization and reset node color after no activity
ch1bo Nov 18, 2025
0fe1043
Stepwise controls
ch1bo Nov 18, 2025
f51ecc0
Use topology latencies when available
ch1bo Nov 18, 2025
2e51688
Add transaction visualization
ch1bo Nov 18, 2025
4481cb4
Cache latencies when aggregating
ch1bo Nov 18, 2025
d1f3785
Inline event counting
ch1bo Nov 18, 2025
2327be2
Update github workflow to build visualizer
ch1bo Nov 19, 2025
ecfe5a3
Drop block and transactions views
ch1bo Nov 19, 2025
7bcb83c
Rename types and use them more
ch1bo Nov 19, 2025
92f3a57
Drop support for visualizing IBs
ch1bo Nov 19, 2025
5aa66b3
Drop remaining aggregated data stream code
ch1bo Nov 19, 2025
3c51ed2
Fixe speed modifier and refactor a bit
ch1bo Nov 19, 2025
c4cd04c
Recreate included scenarios
ch1bo Nov 19, 2025
555066f
Improve layout and button appearance
ch1bo Nov 19, 2025
f533a38
Unify message coloring between graph and pie charts
ch1bo Nov 19, 2025
cf0069d
Seek using left/right buttons. Also add key bindings
ch1bo Nov 19, 2025
b53bfd4
Cleanup remaining todos and unused code
ch1bo Nov 19, 2025
8fde837
Focus buttons when using key bindings
ch1bo Nov 19, 2025
89d563e
Style buttons and dropdowns more consistently
ch1bo Nov 19, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
ui/public/traces/1xsummary.jsonl.gz filter=lfs diff=lfs merge=lfs -text
ui/public/traces/100xsummary.jsonl.gz filter=lfs diff=lfs merge=lfs -text
ui/public/traces/10xsummary.jsonl.gz filter=lfs diff=lfs merge=lfs -text
ui/public/traces/example.jsonl.gz filter=lfs diff=lfs merge=lfs -text
ui/public/traces/small-1txkbs-nocpu.jsonl.gz filter=lfs diff=lfs merge=lfs -text
ui/public/traces/small-200txkbs-nocpu.jsonl.gz filter=lfs diff=lfs merge=lfs -text
11 changes: 3 additions & 8 deletions .github/workflows/docs.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -111,20 +111,15 @@ jobs:
fetch-depth: 2

- name: 🛠️ Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: "yarn"
cache-dependency-path: ./ui/yarn.lock
uses: actions/setup-node@v6

- name: 📦 Install dependencies
working-directory: ui
run: yarn install
run: npm install

- name: 🏗️ Build visualizer
working-directory: ui
run: |
yarn build
run: npm run build

- name: 🚢 Upload visualizer static site
id: upload_viz
Expand Down
2 changes: 2 additions & 0 deletions nix/outputs.nix
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,7 @@ in
pkgs.nodePackages.prettier
];
};

devShells.ui = import ../ui/shell.nix { inherit pkgs; };
}
]
4 changes: 2 additions & 2 deletions ui/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ dist-ssr
*.sln
*.sw?

# files used for debugging
public/traces/*.jsonl
# Lots of data
public/traces/*
101 changes: 51 additions & 50 deletions ui/README.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,69 @@
# Rust Simulation UI - Web App
# Leios visualization UI

This UI web app is designed to read and display simulation traces generated by
the `sim-rs` project.
User interface to display Leios traffic in traces produced by simulations,
prototypes and node implementations.

## Prerequisites
## Getting started

Before you can run the UI, ensure you have the following installed:
Example traces are available via Git LFS. Fetch them first:

- [Bun](https://bun.sh/) - A fast JavaScript runtime.
```bash
git lfs fetch
git lfs checkout
```

## Setup Instructions
Install dependencies and build the project with:

1. **Install Bun**
```bash
npm install
npm run build
```

Follow the instructions on the [Bun website](https://bun.sh/) to install Bun
on your system.
Or run the development server with:

2. **Generate a Trace**
```bash
npm start
```

Before running the UI, you need to prepare a scenario for it to visualize. Add the following to a file named `public/scenarios.json`:
## Add a scenario from sim-rs

```json
{
"scenarios": [
{
"name": "My Scenario",
"topology": "topologies/thousand.yaml",
"duration": 30.0,
"trace": "traces/myscenario.jsonl"
}
]
}
```
To prepare a scenario to visualize, find or add the topology to the public directory, for example:

Now add that topology to the public directory:
```sh
mkdir -p public/topologies
ln -sr ../sim-rs/test_data/small.yaml public/topologies/small.yaml
```

```sh
mkdir -p public/topologies
cp ../sim-rs/test-data/thousand.yaml public/topologies
```
And generate a trace to visualize using the built `sim-rs`, for example using the CIP scenario:

And generate a trace to visualize from the `sim-rs` directory:
```bash
mkdir -p public/traces
cat ../analysis/sims/cip/experiments/NA,0.200/config.yaml \
| jq '."tx-start-time" = 20' > public/traces/config-200txkbs.json
../sim-rs/target/release/sim-cli -p public/traces/config-200txkbs.json public/topologies/small.yaml public/traces/small-200txkbs.jsonl -s 120
```

```bash
mkdir -p ../ui/public/traces
cargo run --release test_data/thousand.yaml ../ui/public/traces/myscenario.jsonl -s 30
```
You might want to filter out `Cpu` events (not visualized) and, in case you want to store it, use gzip and git lfs:

3. **Run the UI**
```bash
grep -v 'Cpu' < public/traces/small-200txkbs.jsonl > public/traces/small-200txkbs-nocpu.jsonl
gzip public/traces/small-200txkbs-nocpu.jsonl
git lfs track public/traces/small-200txkbs-nocpu.jsonl.gz
```

With Bun installed and the trace generated, navigate to the UI project
directory and start the development server:
Then update `public/scenarios.json` accordingly:

```bash
bun dev
```
```json
{
"scenarios": [
{
"name": "200 TxkB/s",
"topology": "topologies/small.yaml",
"duration": 120,
"trace": "traces/small-200txkbs-nocpu.jsonl.gz"
}
]
}
```

This will launch the simulation in your browser.

## Additional Information

- Ensure that the path to the trace file (`output/messages.jsonl`) is correctly
set in the UI project. This is typically defined in a utility file such as
`ui/src/app/api/utils.ts`.

- If you encounter any issues, check the console for error messages and ensure
all dependencies are correctly installed.
Now add that
Loading