scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-09-07 08:27:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Dynamically color special DOT nodes by shape in applyTheme

Browse source 
Add colorSpecialNodes() that injects fill/border/font colors based on
node shape (teal for Mdiamond/Msquare, amber for hexagon/diamond),
removing the need to hardcode colors in workflow DOT data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-02-28 16:45:29 -05:00
parent 854f637b60
commit 664dc91bf5
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/arc-web/app/routes/run-overview.tsx
View file

@ -65,8 +65,22 @@ const THEME_ATTRS = `
]
`;
function colorSpecialNodes(dot: string): string {
// Mdiamond / Msquare → teal start/exit nodes
dot = dot.replace(
/(\bshape\s*=\s*M(?:diamond|square)\b[^\]]*)\]/g,
'$1, fillcolor="#0d4f4f", color="#14b8a6", fontcolor="#5eead4"]',
);
// hexagon / diamond (but not Mdiamond) → amber gate nodes
dot = dot.replace(
/(\bshape\s*=\s*(?:hexagon|(?<!M)diamond)\b[^\]]*)\]/g,
'$1, fillcolor="#1a2030", color="#f59e0b", fontcolor="#fbbf24"]',
);
return dot;
}
function applyTheme(dot: string): string {
return dot.replace(/\{/, `{\n${THEME_ATTRS}\n`);
return colorSpecialNodes(dot.replace(/\{/, `{\n${THEME_ATTRS}\n`));
}
function stripGraphTitle(svg: SVGSVGElement) {