e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaner look for the outcomes

Browse Source
This commit is contained in:
Colin Dawson 2026-02-26 12:40:10 +00:00
parent fcd0de35ea
commit 64dd818a62
1 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
View File

@ -689,20 +689,60 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
});
});
// Detect overlapping connections to the same target and offset them
const targetGroups = new Map<string, typeof connections>();
connections.forEach((conn) => {
const key = conn.targetGuid;
const group = targetGroups.get(key) ?? [];
// Separate leftward and rightward curves for different grouping strategies
const leftwardCurves = connections.filter(
(conn) => conn.sourceY > conn.targetY,
);
const rightwardCurves = connections.filter(
(conn) => conn.sourceY <= conn.targetY,
);
// Group leftward curves by target (multiple sources converging to same target)
const leftwardTargetGroups = new Map<string, typeof connections>();
leftwardCurves.forEach((conn) => {
const group = leftwardTargetGroups.get(conn.targetGuid) ?? [];
group.push(conn);
targetGroups.set(key, group);
leftwardTargetGroups.set(conn.targetGuid, group);
});
// Assign offsets to overlapping connections
targetGroups.forEach((group) => {
// Group rightward curves by source (multiple diverging from same source)
const rightwardSourceGroups = new Map<string, typeof connections>();
rightwardCurves.forEach((conn) => {
const group = rightwardSourceGroups.get(conn.sourceGuid) ?? [];
group.push(conn);
rightwardSourceGroups.set(conn.sourceGuid, group);
});
// Assign offsets to leftward curves (grouped by target)
leftwardTargetGroups.forEach((group) => {
if (group.length > 1) {
// Longer spans closer to center (first in array gets negative offset)
group.sort((a, b) => {
const distanceA = Math.abs(a.sourceY - a.targetY);
const distanceB = Math.abs(b.sourceY - b.targetY);
return distanceB - distanceA; // Descending: longer first
});
group.forEach((conn, idx) => {
const totalOffsets = group.length;
const offsetStep = CURVE_OFFSET_STEP;
const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;
conn.curveOffset = baseOffset + idx * offsetStep;
});
}
});
// Assign offsets to rightward curves (grouped by source)
rightwardSourceGroups.forEach((group) => {
if (group.length > 1) {
// Shorter spans closer to center (first in array gets negative offset)
group.sort((a, b) => {
const distanceA = Math.abs(a.sourceY - a.targetY);
const distanceB = Math.abs(b.sourceY - b.targetY);
return distanceA - distanceB; // Ascending: shorter first
});
group.forEach((conn, idx) => {
// Spread offsets: -10, 0, 10 for 3 connections, etc.
const totalOffsets = group.length;
const offsetStep = CURVE_OFFSET_STEP;
const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;