chore(DATAGO-122599): update activity diagram styling#1056
chore(DATAGO-122599): update activity diagram styling#1056jessieli-ux wants to merge 39 commits intomainfrom
Conversation
…yout and accessibility
… and expanded states
…ayout and condition display
…ndling and improved rendering logic
…etter workflow visualization
…y in LoopNode and MapNode components
…header layout for consistency
…lapsing unnecessary code
…ng and improved layout
…nd layout consistency
…-styling Resolved merge conflicts in activity diagram components: - Updated color styling to use CSS variables (pillColorClasses) - Maintained connector styling consistency with CONNECTOR_SIZES and CONNECTOR_LINE_CLASSES - Updated WorkflowDetailPanel to use NavItem component - Aligned with main branch styling standards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
WhiteSource Policy Violation Summary✅︎ No Blocking Whitesource Policy Violations found in solaceai/solace-agent-mesh-ui-pr-1056! |
…mproved code clarity
…oopNode, MapNode, and WorkflowGroup components in dark mode
jessieli-ux
changed the title
jessieli-ux
changed the title
jessieli-ux
changed the title
…Group components to enhance visual consistency and improve dark mode support
…mproved visual consistency
lgh-solace
left a comment
lgh-solace
left a comment
There was a problem hiding this comment.
Thanks Jessie! Looks clean with perhaps a couple things to tidy. Also, just wondering f the contrast between the colours is strong enough?
They are looking very close to me. Thoughts?
| // Render parallel block - children displayed side-by-side with bounding box | ||
| return ( | ||
| <div key={child.id} className="flex flex-row items-start gap-4 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/50 p-4 dark:border-gray-600 dark:bg-gray-800/50"> | ||
| <div key={child.id} className="flex flex-row items-start gap-4 rounded border-1 border-dashed border-(--color-secondary-w40) bg-(--color-stateLayer-w10) p-4 dark:border-(--color-secondary-w70) dark:bg-[#FFFFFF1a]"> |
There was a problem hiding this comment.
I am adding the dark theme soon and will try to remember to correct this...
| {/* Pill label */} | ||
| <div | ||
| className={`cursor-pointer rounded-full border-2 px-4 py-2 shadow-sm transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-md ${pillColorClasses} ${isSelected ? "ring-2 ring-blue-500" : ""}`} | ||
| className={`${ACTIVITY_NODE_BASE_STYLES.PILL} ${pillColorClasses} ${isSelected ? ACTIVITY_NODE_SELECTED_CLASS : ""}`} |
There was a problem hiding this comment.
It's slightly more efficient to use this pattern if you could use that? I will update the best practices document.
className={cn(ACTIVITY_NODE_BASE_STYLES.PILL, pillColorClasses, isSelected && ACTIVITY_NODE_SELECTED_CLASS)}
| // Format condition for display (truncate if too long) | ||
| const formatCondition = (condition?: string) => { | ||
| if (!condition) return null; | ||
| const maxLen = 30; |
There was a problem hiding this comment.
Pull this constant out too (with LOOP_WIDTH)?
| } | ||
| }; | ||
| // Layout constants | ||
| const HEADER_HEIGHT = 44; |
There was a problem hiding this comment.
If there are enough of them and they are broadly shared across files, we could consider having some kind of layoutConstants.ts file where they can kept together and exported.
| }} | ||
| > | ||
| <div className="flex items-center gap-2 px-4 py-2"> | ||
| <Wrench className="h-4 w-4 flex-shrink-0 text-cyan-600 dark:text-cyan-400" /> |
There was a problem hiding this comment.
Could we pick a theme accent colour for this cyan?
| * Shared styling constants for Activity Flow Chart nodes | ||
| * Aligned with workflow visualization design patterns | ||
| * Based on Figma Card component design (resting state) | ||
| */ |
There was a problem hiding this comment.
Likely don't need this top comment. And, we could add and export a layout object here with constants?
| isExpanded: isManuallyExpanded, | ||
| }, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Code here seems a bit repetitive. It looks like all 4 returns could be simplified to something like...
if (node.type === "map" || node.type === "loop") {
const collapsedChildren = node.children.length > 0 ? node.children.map(child => collapseNestedAgents(child, nestingLevel + 1, expandedNodeIds)) : undefined;
return {
...node,
children: collapsedChildren,
data: {
...node.data,
isExpanded: isManuallyExpanded,
},
};
};
}
|
One other small thing - not sure if it came in this PR or is pre-existing, but the arrow heads and kind of lost under these. 
|
…in AgentNode and MapNode components
…de, and WorkflowGroup components
|
2 participants
What is the purpose of this change?
Modernize the activity diagram visualization to improve visual consistency, enhance dark mode support, and better integrate with the application's design system. The previous implementation used inconsistent styling patterns, hardcoded colors, and had significant code duplication across node components.
How was this change implemented?
Extracted Node Styles
nodeStyles.tswith centralized style constants (RECTANGULAR,RECTANGULAR_COMPACT,PILL,CONTAINER_HEADER) to be consistent with how Workflow visualization handles itRedesigned AgentNode Component
AgentHeadercomponent to eliminate duplicationUnified Container Nodes (Loop, Map, WorkflowGroup)
stateLayer-w10variable for light mode backgrounds and applied temporary hex value (#FFFFFF1a) for dark mode (to be replaced with theme mapping)Enhanced Tool & LLM Nodes
flex-col justify-centerRefactored Edge Rendering
Theme Integration
Key Design Decisions
AgentNode Container Design
Chose solid container with divider over dotted overlay because:
Temporary Dark Mode Hex Values
Used
dark:bg-[#FFFFFF1a]forstateLayerbackgrounds because:Shared Style Constants
Extracted common patterns to
nodeStyles.tsbecause:How was this change tested?
stateLayerbackgrounds use temporary hex values pending theme mapping updateIs there anything the reviewers should focus on/be aware of?
Temporary Dark Mode Colors
Several components use
dark:bg-[#FFFFFF1a]as a temporary solution. Look for comments marked with "Dark mode background colour should be removed once the stateLayer-w10 is mapped to its correct dark mode value." These should be replaced oncestateLayer-w10andstateLayer-w20are properly mapped inthemeMapping.ts.Badge Component Import
ToolNode now imports the Badge component. Ensure this doesn't introduce any unexpected styling conflicts or bundle size issues.