Merge pull request #622 from input-output-hk/ch1bo/revive-ui

Revive Leios visualization

Author: ch1bo

.gitattributes

@@ -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

.github/workflows/docs.yaml

@@ -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

nix/outputs.nix

@@ -19,5 +19,7 @@ in
         pkgs.nodePackages.prettier
       ];
     };
+
+    devShells.ui = import ../ui/shell.nix { inherit pkgs; };
   }
 ]

ui/.gitignore

@@ -23,5 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-# files used for debugging
-public/traces/*.jsonl
+# Lots of data
+public/traces/*

ui/README.md

@@ -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