docs: add basic diagram & README

Author: will-break-it

ui/README.md

@@ -1,2 +1,48 @@
-# leios-visual
-Visualizations for Leios data.
+# Rust Simulation UI - Web App
+
+This UI web app is designed to read and display simulation traces generated by
+the `sim-rs` project.
+
+## Prerequisites
+
+Before you can run the UI, ensure you have the following installed:
+
+- [Bun](https://bun.sh/) - A fast JavaScript runtime.
+
+## Setup Instructions
+
+1. **Install Bun**
+
+   Follow the instructions on the [Bun website](https://bun.sh/) to install Bun
+   on your system.
+
+2. **Generate a Trace**
+
+   Before running the UI, you need to generate a trace using the `sim-rs`
+   simulation. Navigate to the `sim-rs` directory and run the following command:
+
+   ```bash
+   cargo run --release test_data/thousand.toml output/messages.jsonl -s 30
+   ```
+
+   This command will generate a trace file at `output/messages.jsonl`.
+
+3. **Run the UI**
+
+   With Bun installed and the trace generated, navigate to the UI project
+   directory and start the development server:
+
+   ```bash
+   bun dev
+   ```
+
+   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.

ui/docs/component.d2

@@ -0,0 +1,90 @@
+title: {
+  label: "UI Web App - Component Diagram"
+  near: top-center
+  shape: text
+  style.font-size: 24
+  style.bold: true
+}
+
+# Styles
+classes: {
+  component: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  container: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#f5f5f5"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  subcomponent: {
+    style: {
+      stroke: "#666666"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 5
+      shadow: false
+    }
+  }
+}
+
+# Main Containers
+ui-app: {
+  class: container
+  label: "UI Web App"
+
+  frontend: {
+    class: component
+    label: "Frontend\n- React Components\n- State Management\n- UI Rendering"
+
+    components: {
+      class: subcomponent
+      label: "UI Components\n- Buttons\n- Charts\n- Tables"
+    }
+
+    state: {
+      class: subcomponent
+      label: "State Management\n- Redux\n- Context API"
+    }
+  }
+
+  backend: {
+    class: component
+    label: "Backend API\n- Data Fetching\n- Trace Processing"
+
+    api_routes: {
+      class: subcomponent
+      label: "API Routes\n- /api/messages\n- /api/trace"
+    }
+
+    data_processing: {
+      class: subcomponent
+      label: "Data Processing\n- JSON Parsing\n- Data Transformation"
+    }
+  }
+}
+
+external-systems: {
+  class: container
+  label: "Rust Simulation"
+
+  sim-rs: {
+    class: component
+    label: "sim-rs\n- Trace Generation\n- Simulation Engine"
+  }
+}
+
+# Relationships
+ui-app.frontend -> ui-app.backend: "Fetches data from"
+ui-app.backend -> external-systems.sim-rs: "Reads trace data from"
+ui-app.frontend.components -> ui-app.frontend.state: "Uses for state management"
+ui-app.backend.api_routes -> ui-app.backend.data_processing: "Processes data for"

ui/docs/container.d2

@@ -0,0 +1,74 @@
+title: {
+  label: "UI Web App - Container Diagram"
+  near: top-center
+  shape: text
+  style.font-size: 24
+  style.bold: true
+}
+
+# Styles
+classes: {
+  container: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#f5f5f5"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  component: {
+    style: {
+      stroke: "#2a2a2a"
+      fill: "#ffffff"
+      font-color: "#2a2a2a"
+      border-radius: 10
+      shadow: true
+    }
+  }
+  external: {
+    style: {
+      stroke: "#666666"
+      fill: "#e0e0e0"
+      font-color: "#2a2a2a"
+      border-radius: 5
+      shadow: false
+    }
+  }
+}
+
+# Main Containers
+ui-web-app: {
+  class: container
+  label: "UI Web App"
+
+  browser: {
+    class: component
+    label: "Web Browser\n- User Interface\n- Data Visualization"
+  }
+
+  server: {
+    class: component
+    label: "Backend Server\n- API Endpoints\n- Data Processing"
+  }
+}
+
+external-systems: {
+  class: container
+  label: "Rust Simulation"
+
+  sim-rs: {
+    class: external
+    label: "sim-rs\n- Trace Generation"
+  }
+
+  trace-file: {
+    class: external
+    label: "Trace File\n- messages.jsonl"
+  }
+}
+
+# Relationships
+ui-web-app.browser -> ui-web-app.server: "Requests data from"
+ui-web-app.server -> external-systems.trace-file: "Reads data from"
+external-systems.sim-rs -> external-systems.trace-file: "Generates"