From 9fb835348b0f687775a85930f9a3810ce512d418 Mon Sep 17 00:00:00 2001
From: William Wolff <wolff.william@pm.me>
Date: Wed, 22 Jan 2025 10:51:08 +0000
Subject: [PATCH] docs(sim-ui): added d2

---
 ui/docs/component.d2 | 90 ++++++++++++++++++++++++++++++++++++++++++++
 ui/docs/container.d2 | 74 ++++++++++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 ui/docs/component.d2
 create mode 100644 ui/docs/container.d2

diff --git a/ui/docs/component.d2 b/ui/docs/component.d2
new file mode 100644
index 00000000..21493439
--- /dev/null
+++ b/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"
diff --git a/ui/docs/container.d2 b/ui/docs/container.d2
new file mode 100644
index 00000000..0a2bb6ab
--- /dev/null
+++ b/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"