T
Travis Bement

Nuclear Reactor Core UI Design

MudBlazor Reactor Dashboard that renders a reactor core grid, event log, MudSlider controls for power and control rods, and MudProgressCircular/Linear status indicators using MudBlazor components.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Interactive reactor core grid with selectable cells (core designer) and per-cell icons. - Event log with recent messages and capped history. - Primary controls: SCRAM button, MudSlider controls for power setpoint and control rod position. - System monitoring: circular and linear progress gauges for Temperature, Pressure and PowerOutput. - Tool palette using MudRadioGroup to place FuelRod, ControlRod, or Empty into grid cells. - Background simulation driven by a Timer that updates telemetry and triggers automatic SCRAM on limits. ## Key components - Layout and chrome: MudLayout, MudAppBar, MudContainer, MudPaper, MudGrid, MudItem. - Controls: MudButton, MudSlider, MudRadioGroup, MudRadio, MudChip, MudIcon. - Monitoring: MudProgressCircular, MudProgressLinear. - Lists and logs: MudList, MudListItem. - Data & interaction: @bind-Value on MudSlider and MudRadioGroup, Timer, InvokeAsync(StateHasChanged). ## How it works - Core state is held in a CoreCellModel[,] array and a CoreComponentType enum; clicking a cell assigns SelectedTool. - Two-way binding (@bind-Value) updates PowerLevel and ControlRodPosition immediately; UI reacts via StateHasChanged invoked from the Timer. - SimulateReactor calculates PowerOutput, Temperature and Pressure on a 1s Timer; safety conditions call Scram() to set safe values and add log entries. - EventLogs is a simple in-memory List<string> with a max size; log entries are displayed in reverse order. - CSS classes (GetCellCss) drive per-cell visuals and conditional styles; GetCellIcon/Color select icons and tints. ## Styling - Uses MudBlazor component styling and theming for layout, spacing and controls. - Additional local CSS (component-scoped .razor.css) implements a dark reactor grid, per-cell colors and hover states. - Responsive grid via MudGrid/MudItem breakpoints (xs/md/lg); reactor core uses CSS grid with dynamic grid-template-columns based on GridSize. ## Reuse steps 1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); 2. Import MudBlazor namespaces in _Imports.razor and add MudBlazor CSS/theme to index.html (or _Host.cshtml) as documented by MudBlazor. 3. Copy CoreCellModel and CoreComponentType into the project and place the .razor and .razor.css files in a Pages or Components folder. 4. Ensure Program.cs registers any required services and that the component is reachable via routing (@page). 5. Replace the in-memory Timer/simulation with application services or SignalR for real data and persist core design/state as needed. ## Limitations & next steps - This is a single-page UI generated by Instruct UI and focuses on client-side interaction; it does not include persistence, authentication, role-based authorization, or real telemetry integration. - The Timer runs in-memory; consider moving simulation to a hosted service or server-side actor for multi-user scenarios and to avoid timer drift. - Add validation, confirmation dialogs before destructive actions (SCRAM), and audit logs if persistence is required. - Expand accessibility (ARIA labels) and keyboard interaction for the grid and controls.