dohertj2/ScadaBridge
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(flow-debugger): vertical trace list view alongside the swimlane (ScadaBridge#53)

Browse Source 
Direction B: the same FlowGraph steps as a filterable list (lane column, lane filter,
failures-only), toggled from the flow panel toolbar. The mockup canvas is not in the repo,
so this is the minimal faithful version.

Claude-Session: https://claude.ai/code/session_01GT67AEHd2Acv1YPwGfXEoV
This commit is contained in:
Joseph Doherty
2026-11-09 15:31:11 -05:00
parent 62fe1e685d
commit 0ce6633270
6 changed files with 274 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Deployment/FlowDebugger.razor
+16 -2
View File
@@ -310,13 +310,27 @@
<span data-test="flow-site-not-traced">Site not traced — the site returned no trace rows for the routed call (older site build or an untraced call).</span>
}
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Zoom">
<div class="btn-group btn-group-sm me-2" role="group" aria-label="View">
<button type="button" class="btn @(_listView ? "btn-outline-secondary" : "btn-secondary")" data-test="flow-view-swimlane"
aria-pressed="@(!_listView)" @onclick="() => _listView = false">Swimlane</button>
<button type="button" class="btn @(_listView ? "btn-secondary" : "btn-outline-secondary")" data-test="flow-view-list"
aria-pressed="@_listView" @onclick="() => _listView = true">Vertical trace</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Zoom" hidden="@_listView">
<button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = Math.Max(0.4, _zoom - 0.1)" aria-label="Zoom out">−</button>
<button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = 1.0" aria-label="Fit">Fit</button>
<button type="button" class="btn btn-outline-secondary" @onclick="() => _zoom = Math.Min(2.0, _zoom + 0.1)" aria-label="Zoom in">+</button>
</div>
</div>
<FlowGraphView Graph="_graph" Predicted="_predicted" SelectedEventId="_selected?.EventId" OnSelect="OnSelectStep" Zoom="_zoom" />
@if (_listView)
{
@* Direction B: the same steps as a vertical list; a prediction-only graph has no real steps, so it shows in the swimlane only. *@
<FlowTraceList Graph="_graph" SelectedEventId="_selected?.EventId" OnSelect="OnSelectStep" />
}
else
{
<FlowGraphView Graph="_graph" Predicted="_predicted" SelectedEventId="_selected?.EventId" OnSelect="OnSelectStep" Zoom="_zoom" />
}
</div>
@* ── Detail panel ──────────────────────────────────────────────────── *@