feat(central-ui): FlowGraphView External lane, outbound status pills, async/spawn connectors
Four lanes (LaneCount 4; External sublabel = distinct targets, three then +n); ApiCall/DbCall/Notify nodes carry a status pill (Ok/Pending/Parked/Failed — pending pulses, reduced-motion aware) plus a sync/cached/notify mode; folded lifecycles show '+4.1 s' submit→terminal wall time. Async edges are dashed and routed through the inter-lane strip with a gutter tag; spawn edges use a bolt marker. Predicted async edges (Task 6's PredictedEdge.Async) render the same way. de-DE height pinned at 319.2 = (4×110+16)×0.7. Claude-Session: https://claude.ai/code/session_01NcMG6xXdsJbmD2wYAgkK29
This commit is contained in:
Joseph Doherty
@@ -2,9 +2,10 @@
|
||||
@using ZB.MOM.WW.ScadaBridge.Commons.Types.Debugging
|
||||
@using ZB.MOM.WW.ScadaBridge.ScriptAnalysis
|
||||
|
||||
@* Flow Debugger swimlane (design 2026-09-05 §4). Dependency-free inline SVG:
|
||||
three fixed lanes, one node per step, orthogonal connectors. All coordinate
|
||||
math lives in the code-behind (InvariantCulture throughout). *@
|
||||
@* Flow Debugger swimlane (design 2026-09-05 §4; External lane, status pills and async/spawn
|
||||
connectors per the 2026-09-06 outbound-calls plan). Dependency-free inline SVG: four fixed
|
||||
lanes, one node per step, orthogonal connectors. All coordinate math lives in the
|
||||
code-behind (InvariantCulture throughout). *@
|
||||
|
||||
<div class="fg-wrap" data-test="flow-graph">
|
||||
<svg width="@RenderedWidth" height="@RenderedHeight" viewBox="@ViewBox"
|
||||
@@ -16,10 +17,14 @@
|
||||
<marker id="fg-arrow-accent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" class="fg-arrowhead accent" />
|
||||
</marker>
|
||||
@* Trigger spawn (plan D9): a small bolt in place of the arrowhead — this write fired a value-change script. *@
|
||||
<marker id="fg-arrow-spawn" viewBox="0 0 12 14" refX="10" refY="7" markerWidth="12" markerHeight="14" orient="auto-start-reverse">
|
||||
<path d="M 5 1 l -4 6 h 5 l -3 6 l 7 -8 h -5 l 3 -4 z" class="fg-arrowhead spawn" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
@* Lanes *@
|
||||
@for (var lane = 0; lane < 3; lane++)
|
||||
@for (var lane = 0; lane < LaneCount; lane++)
|
||||
{
|
||||
var i = lane;
|
||||
<g class="fg-lane" data-lane="@LaneName(i)">
|
||||
@@ -47,6 +52,11 @@
|
||||
@foreach (var e in _layout.Edges)
|
||||
{
|
||||
<path d="@e.Path" class="@EdgeClass(e)" marker-end="@MarkerFor(e)" data-test="flow-edge" data-from="@e.From" data-to="@e.To" />
|
||||
@if (AsyncTagFor(e) is { } tag)
|
||||
{
|
||||
@* Names the branch where it lands: the run carried on without waiting for this. *@
|
||||
@SvgText(tag.X, tag.Y, "fg-edge-tag", "async", dataTest: "flow-edge-tag")
|
||||
}
|
||||
}
|
||||
|
||||
@* Nodes *@
|
||||
@@ -69,7 +79,18 @@
|
||||
<span class="fg-duration">@Duration(node)</span>
|
||||
</div>
|
||||
<div class="fg-title" data-test="flow-node-title">@WrapHints(node.DisplayTitle)</div>
|
||||
<div class="fg-subtitle" data-test="flow-node-subtitle">@node.DisplaySubtitle</div>
|
||||
@if (HasPill(node))
|
||||
{
|
||||
@* Outbound kinds: the folded outcome as a pill, then the call mode (node anatomy: "● Ok · sync"). *@
|
||||
<div class="fg-status" data-test="flow-node-status">
|
||||
<span class="@PillClass(node.Step!.Outcome)" data-test="flow-node-pill">@PillText(node.Step.Outcome)</span>
|
||||
<span class="fg-mode">· @OutboundMode(node.Kind, node.Subtitle)</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="fg-subtitle" data-test="flow-node-subtitle">@node.DisplaySubtitle</div>
|
||||
}
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
|
||||
@@ -54,7 +54,9 @@ public sealed record FlowLayoutNode(
|
||||
/// <param name="CrossesBoundary">Accent colour — a central↔site hop.</param>
|
||||
/// <param name="External">Dashed — an external actor (the tag source responding).</param>
|
||||
/// <param name="PredictedOnly">Light — an edge of the prediction, not of a run.</param>
|
||||
public sealed record FlowLayoutEdge(string From, string To, string Path, bool CrossesBoundary, bool External, bool PredictedOnly);
|
||||
/// <param name="Async">Dashed — a fire-and-forget branch (cached call / notification) the source never waited for (plan D4).</param>
|
||||
/// <param name="Spawn">Bolt marker — the target is the first step of a trigger-spawned child execution (plan D9).</param>
|
||||
public sealed record FlowLayoutEdge(string From, string To, string Path, bool CrossesBoundary, bool External, bool PredictedOnly, bool Async = false, bool Spawn = false);
|
||||
|
||||
/// <summary>A computed swimlane layout.</summary>
|
||||
/// <param name="Nodes">Nodes with coordinates.</param>
|
||||
@@ -76,12 +78,13 @@ public sealed record FlowLayout(
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Custom-SVG swimlane renderer for the Flow Debugger (design 2026-09-05 §4). Three fixed lanes
|
||||
/// (Central / Site / Tags), columns from a topological pass over the graph's edges, orthogonal
|
||||
/// connectors. Renders a real <see cref="FlowGraph"/>, a <see cref="PredictedFlow"/>, or both —
|
||||
/// in which case predicted nodes the run never produced are greyed. The layout is a pure
|
||||
/// function (<see cref="ComputeLayout"/>) so it is unit-tested without rendering; every
|
||||
/// coordinate string is <see cref="CultureInfo.InvariantCulture"/>-formatted.
|
||||
/// Custom-SVG swimlane renderer for the Flow Debugger (design 2026-09-05 §4). Four fixed lanes
|
||||
/// (Central / Site / Tags / External — the fourth added by the 2026-09-06 outbound-calls plan, D2),
|
||||
/// columns from a topological pass over the graph's edges, orthogonal connectors. Renders a real
|
||||
/// <see cref="FlowGraph"/>, a <see cref="PredictedFlow"/>, or both — in which case predicted nodes
|
||||
/// the run never produced are greyed. The layout is a pure function (<see cref="ComputeLayout"/>)
|
||||
/// so it is unit-tested without rendering; every coordinate string is
|
||||
/// <see cref="CultureInfo.InvariantCulture"/>-formatted.
|
||||
/// </summary>
|
||||
public partial class FlowGraphView : ComponentBase
|
||||
{
|
||||
@@ -100,7 +103,10 @@ public partial class FlowGraphView : ComponentBase
|
||||
/// <summary>Right-hand canvas padding.</summary>
|
||||
public const double RightPad = 20;
|
||||
|
||||
private const int LaneCount = 3;
|
||||
/// <summary>Number of swimlanes (<see cref="FlowLane"/> members, in order).</summary>
|
||||
public const int LaneCount = 4;
|
||||
/// <summary>Most distinct targets the External gutter names before folding the rest into <c>+n</c>.</summary>
|
||||
public const int ExternalSublabelTargets = 3;
|
||||
|
||||
/// <summary>The real graph (from a run or a replay); null before a run.</summary>
|
||||
[Parameter] public FlowGraph? Graph { get; set; }
|
||||
@@ -160,6 +166,8 @@ public partial class FlowGraphView : ComponentBase
|
||||
case FlowStepOutcome.Failed: sb.Append(" failed"); break;
|
||||
case FlowStepOutcome.TimedOut: sb.Append(" timed-out"); break;
|
||||
case FlowStepOutcome.NotTraced: sb.Append(" not-traced"); break;
|
||||
case FlowStepOutcome.Pending: sb.Append(" pending"); break;
|
||||
case FlowStepOutcome.Parked: sb.Append(" parked"); break;
|
||||
}
|
||||
|
||||
return sb.ToString();
|
||||
@@ -170,12 +178,57 @@ public partial class FlowGraphView : ComponentBase
|
||||
var sb = new StringBuilder("fg-edge");
|
||||
if (e.CrossesBoundary) sb.Append(" boundary");
|
||||
if (e.External) sb.Append(" external");
|
||||
if (e.Async) sb.Append(" async");
|
||||
if (e.Spawn) sb.Append(" spawn");
|
||||
if (e.PredictedOnly) sb.Append(" predicted");
|
||||
return sb.ToString();
|
||||
}
|
||||
|
||||
private static string MarkerFor(FlowLayoutEdge e)
|
||||
=> e.CrossesBoundary ? "url(#fg-arrow-accent)" : "url(#fg-arrow)";
|
||||
=> e.Spawn ? "url(#fg-arrow-spawn)" : e.CrossesBoundary ? "url(#fg-arrow-accent)" : "url(#fg-arrow)";
|
||||
|
||||
/// <summary>True for a real outbound step (API call / database / notification) — the kinds that carry a status pill instead of a subtitle line.</summary>
|
||||
private static bool HasPill(FlowLayoutNode n)
|
||||
=> n.Step != null && n.Kind is FlowStepKind.ApiCall or FlowStepKind.DbCall or FlowStepKind.Notify;
|
||||
|
||||
/// <summary>Pill wording for an outbound step's folded outcome (plan D3: the latest lifecycle row decides).</summary>
|
||||
public static string PillText(FlowStepOutcome outcome) => outcome switch
|
||||
{
|
||||
FlowStepOutcome.Ok => "Ok",
|
||||
FlowStepOutcome.Pending => "Pending",
|
||||
FlowStepOutcome.Parked => "Parked",
|
||||
FlowStepOutcome.Failed => "Failed",
|
||||
FlowStepOutcome.TimedOut => "Timed out",
|
||||
FlowStepOutcome.NotTraced => "Not traced",
|
||||
_ => outcome.ToString(),
|
||||
};
|
||||
|
||||
private static string PillClass(FlowStepOutcome outcome) => outcome switch
|
||||
{
|
||||
FlowStepOutcome.Ok => "fg-pill ok",
|
||||
FlowStepOutcome.Pending => "fg-pill pending",
|
||||
FlowStepOutcome.Parked => "fg-pill parked",
|
||||
FlowStepOutcome.Failed or FlowStepOutcome.TimedOut => "fg-pill failed",
|
||||
_ => "fg-pill",
|
||||
};
|
||||
|
||||
/// <summary>
|
||||
/// The text after the pill: <c>sync</c> / <c>cached</c> / <c>notify</c> per the node anatomy, with a
|
||||
/// sync database call's operation detail (<c>write · 3 rows</c>) kept in front of it. The projector's
|
||||
/// subtitle already leads with the audit status, which the pill now carries, so that head is dropped.
|
||||
/// </summary>
|
||||
public static string OutboundMode(FlowStepKind kind, string? subtitle)
|
||||
{
|
||||
if (kind == FlowStepKind.Notify) return "notify";
|
||||
var detail = subtitle ?? string.Empty;
|
||||
// Strip a leading "{AuditStatus} · " / a bare status word (the pill says it).
|
||||
var head = detail.Split(" · ", 2, StringSplitOptions.None);
|
||||
if (head.Length > 0 && Enum.TryParse<Commons.Types.Enums.AuditStatus>(head[0], ignoreCase: false, out _))
|
||||
detail = head.Length == 2 ? head[1] : string.Empty;
|
||||
if (detail is "cached" or "sync") return detail;
|
||||
if (detail.EndsWith(" · cached", StringComparison.Ordinal) || detail.EndsWith(" · sync", StringComparison.Ordinal)) return detail;
|
||||
return detail.Length == 0 ? "sync" : detail + " · sync";
|
||||
}
|
||||
|
||||
private static string Eyebrow(FlowLayoutNode n) => n.Kind switch
|
||||
{
|
||||
@@ -191,8 +244,21 @@ public partial class FlowGraphView : ComponentBase
|
||||
_ => "STEP",
|
||||
};
|
||||
|
||||
private static string Duration(FlowLayoutNode n)
|
||||
=> n.Step?.DurationMs is int ms ? ms.ToString(CultureInfo.InvariantCulture) + " ms" : (n.PredictedOnly ? "predicted" : string.Empty);
|
||||
/// <summary>
|
||||
/// The head-row duration: a step's own milliseconds, or — for a folded outbound lifecycle of more
|
||||
/// than one row — the submit→terminal wall time with a leading <c>+</c> (<c>+4.1 s</c>), since that
|
||||
/// span is elapsed time downstream of the script, not time the script spent (node anatomy).
|
||||
/// </summary>
|
||||
public static string Duration(FlowLayoutNode n)
|
||||
{
|
||||
if (n.Step?.DurationMs is not int ms)
|
||||
return n.PredictedOnly ? "predicted" : string.Empty;
|
||||
if (n.Step.Lifecycle is { Count: > 1 })
|
||||
return ms < 1000
|
||||
? "+" + ms.ToString(CultureInfo.InvariantCulture) + " ms"
|
||||
: "+" + (ms / 1000.0).ToString("0.#", CultureInfo.InvariantCulture) + " s";
|
||||
return ms.ToString(CultureInfo.InvariantCulture) + " ms";
|
||||
}
|
||||
|
||||
/// <summary>Clips a gutter label to what fits, keeping the full text in a <c>title</c>.</summary>
|
||||
public static string Clip(string? text, int max)
|
||||
@@ -274,6 +340,17 @@ public partial class FlowGraphView : ComponentBase
|
||||
return new MarkupString(sb.ToString());
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Where an async branch's <c>async</c> tag sits: just right of the drop into the target's top, in
|
||||
/// the strip between lanes (mirrors the mockup). Null for every non-async edge.
|
||||
/// </summary>
|
||||
private (string X, string Y)? AsyncTagFor(FlowLayoutEdge e)
|
||||
{
|
||||
if (!e.Async) return null;
|
||||
var b = _layout.Nodes.FirstOrDefault(n => n.Key == e.To);
|
||||
return b is null ? null : (F(b.X + 22), F(b.Y - 4));
|
||||
}
|
||||
|
||||
private Task SelectAsync(FlowLayoutNode n)
|
||||
=> n.Step != null && OnSelect.HasDelegate ? OnSelect.InvokeAsync(n.Step) : Task.CompletedTask;
|
||||
|
||||
@@ -299,7 +376,8 @@ public partial class FlowGraphView : ComponentBase
|
||||
var keys = new List<string>();
|
||||
var lane = new Dictionary<string, FlowLane>(StringComparer.Ordinal);
|
||||
var preds = new Dictionary<string, List<string>>(StringComparer.Ordinal);
|
||||
var rawEdges = new List<(string From, string To, bool Crosses, bool External, bool PredictedOnly)>();
|
||||
var rawEdges = new List<(string From, string To, bool Crosses, bool External, bool PredictedOnly, bool Async, bool Spawn)>();
|
||||
var externalTargets = new List<string>();
|
||||
var stepByKey = new Dictionary<string, FlowStep>(StringComparer.Ordinal);
|
||||
var predByKey = new Dictionary<string, PredictedNode>(StringComparer.Ordinal);
|
||||
var ghostKeys = new HashSet<string>(StringComparer.Ordinal);
|
||||
@@ -316,14 +394,18 @@ public partial class FlowGraphView : ComponentBase
|
||||
sublabels[(int)FlowLane.Site] = JoinLabel(s.SiteId, s.Instance);
|
||||
if (s.Lane == FlowLane.Tags && string.IsNullOrEmpty(sublabels[(int)FlowLane.Tags]))
|
||||
sublabels[(int)FlowLane.Tags] = s.Instance ?? string.Empty;
|
||||
if (s.Lane == FlowLane.External && !string.IsNullOrWhiteSpace(s.Target) && !externalTargets.Contains(s.Target, StringComparer.Ordinal))
|
||||
externalTargets.Add(s.Target);
|
||||
}
|
||||
|
||||
sublabels[(int)FlowLane.External] = ExternalSublabel(externalTargets);
|
||||
|
||||
foreach (var e in graph.Edges)
|
||||
{
|
||||
var from = "e:" + e.FromEventId.ToString("N");
|
||||
var to = "e:" + e.ToEventId.ToString("N");
|
||||
if (lane.ContainsKey(from) && lane.ContainsKey(to))
|
||||
rawEdges.Add((from, to, e.CrossesBoundary, e.External, false));
|
||||
rawEdges.Add((from, to, e.CrossesBoundary, e.External, false, e.Async, e.Spawn));
|
||||
}
|
||||
|
||||
if (hasPredicted)
|
||||
@@ -365,11 +447,11 @@ public partial class FlowGraphView : ComponentBase
|
||||
var from = "p:" + e.From;
|
||||
var to = "p:" + e.To;
|
||||
if (lane.ContainsKey(from) && lane.ContainsKey(to))
|
||||
rawEdges.Add((from, to, e.CrossesBoundary, false, true));
|
||||
rawEdges.Add((from, to, e.CrossesBoundary, false, true, e.Async, false));
|
||||
}
|
||||
}
|
||||
|
||||
foreach (var (from, to, _, _, _) in rawEdges)
|
||||
foreach (var (from, to, _, _, _, _, _) in rawEdges)
|
||||
{
|
||||
if (!preds.TryGetValue(to, out var list))
|
||||
preds[to] = list = [];
|
||||
@@ -444,11 +526,12 @@ public partial class FlowGraphView : ComponentBase
|
||||
}
|
||||
|
||||
var byKey = nodes.ToDictionary(n => n.Key, StringComparer.Ordinal);
|
||||
foreach (var (from, to, crosses, external, predictedOnly) in rawEdges)
|
||||
foreach (var (from, to, crosses, external, predictedOnly, isAsync, spawn) in rawEdges)
|
||||
{
|
||||
var a = byKey[from];
|
||||
var b = byKey[to];
|
||||
edges.Add(new FlowLayoutEdge(from, to, OrthogonalPath(a, b), crosses, external, predictedOnly));
|
||||
var path = isAsync ? AsyncPath(a, b) : OrthogonalPath(a, b);
|
||||
edges.Add(new FlowLayoutEdge(from, to, path, crosses, external, predictedOnly, isAsync, spawn));
|
||||
}
|
||||
|
||||
var width = ColumnOrigin + (maxCol + 1) * ColumnPitch + RightPad;
|
||||
@@ -463,6 +546,36 @@ public partial class FlowGraphView : ComponentBase
|
||||
private static string JoinLabel(string? a, string? b)
|
||||
=> string.IsNullOrEmpty(a) ? b ?? string.Empty : string.IsNullOrEmpty(b) ? a : $"{a} · {b}";
|
||||
|
||||
/// <summary>
|
||||
/// The External gutter: the distinct targets touched, in first-seen order, joined with <c>·</c> —
|
||||
/// up to <see cref="ExternalSublabelTargets"/> named, the rest folded into <c>+n</c>
|
||||
/// (<c>Delmia.AckRecipe · MesDb · Planners +1</c>). Empty when the lane is unused.
|
||||
/// </summary>
|
||||
public static string ExternalSublabel(IReadOnlyList<string> distinctTargets)
|
||||
{
|
||||
if (distinctTargets.Count == 0) return string.Empty;
|
||||
var shown = string.Join(" · ", distinctTargets.Take(ExternalSublabelTargets));
|
||||
var rest = distinctTargets.Count - ExternalSublabelTargets;
|
||||
return rest > 0 ? $"{shown} +{rest.ToString(CultureInfo.InvariantCulture)}" : shown;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Connector for an async branch (cached call / notification): leaves the source's bottom-centre,
|
||||
/// runs along the strip above the target's lane and drops into the target's top — so it never
|
||||
/// crosses a node sitting between the two lanes. Falls back to <see cref="OrthogonalPath"/> when
|
||||
/// the target is not below the source.
|
||||
/// </summary>
|
||||
public static string AsyncPath(FlowLayoutNode a, FlowLayoutNode b)
|
||||
{
|
||||
if (b.Y <= a.Y)
|
||||
return OrthogonalPath(a, b);
|
||||
var x1 = a.X + NodeWidth / 2;
|
||||
var y1 = a.Y + NodeHeight;
|
||||
var strip = b.Y - LanePad / 2;
|
||||
var x2 = b.X + 16;
|
||||
return $"M {F(x1)} {F(y1)} V {F(strip)} H {F(x2)} V {F(b.Y)}";
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Orthogonal connector from the right-middle of <paramref name="a"/> to the left-middle
|
||||
/// of <paramref name="b"/>: straight when in the same lane, otherwise right-down/up-right
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
.fg-node.failed .fg-node-box,
|
||||
.fg-node.timed-out .fg-node-box { stroke: var(--bs-danger, #c0392b); }
|
||||
.fg-node.not-traced .fg-node-box { stroke-dasharray: 1 3; }
|
||||
.fg-node.parked .fg-node-box { stroke: var(--warn, var(--bs-warning, #e8920c)); }
|
||||
|
||||
/* Node body: HTML inside a foreignObject so text is measured by the browser. */
|
||||
.fg-body {
|
||||
@@ -77,6 +78,40 @@
|
||||
.fg-node.failed .fg-eyebrow,
|
||||
.fg-node.timed-out .fg-eyebrow { color: var(--bs-danger, #c0392b); }
|
||||
|
||||
/* Outbound nodes (API call / database / notify): the folded outcome as a status pill, then the
|
||||
call mode. Kit status tokens first (dark mode follows via site.css), Bootstrap's as fallback. */
|
||||
.fg-status { margin-top: auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
|
||||
.fg-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
color: var(--ink-soft);
|
||||
background: var(--rule);
|
||||
}
|
||||
.fg-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
|
||||
.fg-pill.ok { color: var(--ok, var(--bs-success, #2f9e44)); background: var(--ok-bg, rgba(var(--bs-success-rgb, 25, 135, 84), 0.12)); }
|
||||
.fg-pill.pending { color: var(--warn, var(--bs-warning, #e8920c)); background: var(--warn-bg, rgba(var(--bs-warning-rgb, 255, 193, 7), 0.15)); }
|
||||
.fg-pill.parked { color: var(--warn, var(--bs-warning, #e8920c)); background: var(--warn-bg, rgba(var(--bs-warning-rgb, 255, 193, 7), 0.15)); }
|
||||
.fg-pill.failed { color: var(--bad, var(--bs-danger, #e03131)); background: var(--bad-bg, rgba(var(--bs-danger-rgb, 220, 53, 69), 0.12)); }
|
||||
.fg-mode { color: var(--ink-soft); font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* A pending pill pulses while the page keeps refreshing outcomes after a Live run. */
|
||||
.fg-node.pending .fg-pill { animation: fg-pulse 1.6s ease-in-out infinite; }
|
||||
@keyframes fg-pulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--warn-bg, rgba(var(--bs-warning-rgb, 255, 193, 7), 0.15)); }
|
||||
50% { opacity: 0.6; box-shadow: 0 0 0 4px var(--warn-bg, rgba(var(--bs-warning-rgb, 255, 193, 7), 0.15)); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fg-node.pending .fg-pill { animation: none; }
|
||||
}
|
||||
|
||||
/* Connectors */
|
||||
.fg-edge {
|
||||
fill: none;
|
||||
@@ -85,6 +120,12 @@
|
||||
}
|
||||
.fg-edge.boundary { stroke: var(--accent); }
|
||||
.fg-edge.external { stroke-dasharray: 5 4; }
|
||||
/* Async branch (cached call / notification): same dash as the echo edge, its own class — the run
|
||||
carried on without waiting. Spawn: solid line ending in the bolt marker (a trigger cascade). */
|
||||
.fg-edge.async { stroke-dasharray: 5 4; }
|
||||
.fg-edge.spawn { stroke: var(--ink-soft); }
|
||||
.fg-edge.predicted { stroke-opacity: 0.5; stroke-dasharray: 3 3; }
|
||||
.fg-arrowhead { fill: var(--ink-faint); }
|
||||
.fg-arrowhead.accent { fill: var(--accent); }
|
||||
.fg-arrowhead.spawn { fill: var(--ink-soft); }
|
||||
.fg-wrap ::deep .fg-edge-tag { fill: var(--ink-faint); font-size: 0.6rem; font-family: var(--mono); }
|
||||
|
||||
Reference in New Issue
Block a user