fix(dashboard): unified solid edges, hide FALLBACK labels, conditional cursor (#247 Phase 1)

What: Restore graph visual preferences — all edges solid, FALLBACK labels hidden,
inactive nodes not clickable.

Why: Visual consistency and cleaner graph appearance per design preferences.

Changes:
- condition-edge.tsx: remove strokeDasharray, unify stroke color, hide FALLBACK labels
- role-node.tsx: cursor-pointer only on non-default state nodes

Ref: #247, closes #248
This commit is contained in:
2026-05-14 11:39:51 +08:00
parent 9b23e6f85a
commit 8cae114c7e
2 changed files with 5 additions and 6 deletions
@@ -78,9 +78,8 @@ export function ConditionEdge(props: EdgeProps) {
defaultLabelY = result[2];
}
const stroke = isFallback ? "var(--color-text-muted)" : "var(--color-accent)";
const strokeDasharray = isFallback ? "5 4" : undefined;
const label = edgeData?.condition ?? "";
const stroke = "var(--color-accent)";
const label = isFallback ? "" : (edgeData?.condition ?? "");
// Use pre-computed label position if available, otherwise fall back to default
const labelX = edgeData?.labelX ?? defaultLabelX;
@@ -92,7 +91,7 @@ export function ConditionEdge(props: EdgeProps) {
id={id}
path={path}
markerEnd={markerEnd}
style={{ stroke, strokeWidth: 1.5, strokeDasharray }}
style={{ stroke, strokeWidth: 1.5 }}
/>
{label !== "" && (
<EdgeLabelRenderer>
@@ -102,7 +101,7 @@ export function ConditionEdge(props: EdgeProps) {
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
background: "var(--color-surface)",
border: "1px solid var(--color-border)",
color: isFallback ? "var(--color-text-muted)" : "var(--color-text)",
color: "var(--color-text)",
whiteSpace: "nowrap",
zIndex: 10,
}}
@@ -31,7 +31,7 @@ export function RoleNode(props: NodeProps) {
return (
<div
className={`px-3 py-2 rounded-md border-2 text-xs font-medium cursor-pointer ${isActive ? "wf-node-pulse" : ""}`}
className={`px-3 py-2 rounded-md border-2 text-xs font-medium ${t.state !== "default" ? "cursor-pointer" : ""} ${isActive ? "wf-node-pulse" : ""}`}
style={{
width: 180,
height: 60,