diff --git a/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx b/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx index 2facbdc4..09685567 100644 --- a/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx +++ b/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx @@ -80,7 +80,7 @@ export function InfoTab({ processor, executionDetail }: InfoTabProps) { - +
diff --git a/ui/src/components/ProcessDiagram/NodeToolbar.tsx b/ui/src/components/ProcessDiagram/NodeToolbar.tsx index b5cefa0b..28ebfa47 100644 --- a/ui/src/components/ProcessDiagram/NodeToolbar.tsx +++ b/ui/src/components/ProcessDiagram/NodeToolbar.tsx @@ -1,10 +1,10 @@ import { useCallback, useRef, useState } from 'react'; import { Search, Footprints, Droplets, Ellipsis } from 'lucide-react'; -import type { LucideIcon } from 'lucide-react'; -import type { NodeAction } from './types'; +import type { NodeAction, NodeConfig } from './types'; import styles from './ProcessDiagram.module.css'; const HIDE_DELAY = 150; +const TRACE_ACTIVE_COLOR = '#1A7F8E'; interface NodeToolbarProps { nodeId: string; @@ -14,18 +14,16 @@ interface NodeToolbarProps { onAction: (nodeId: string, action: NodeAction) => void; onMouseEnter: () => void; onMouseLeave: () => void; + /** Current config for this node (trace/tap state) */ + nodeConfig?: NodeConfig; } -const ACTIONS: { Icon: LucideIcon; action: NodeAction; title: string }[] = [ - { Icon: Search, action: 'inspect', title: 'Inspect' }, - { Icon: Footprints, action: 'toggle-trace', title: 'Toggle tracing' }, - { Icon: Droplets, action: 'configure-tap', title: 'Configure tap' }, - { Icon: Ellipsis, action: 'copy-id', title: 'Copy ID' }, -]; - export function NodeToolbar({ - nodeId, screenX, screenY, onAction, onMouseEnter, onMouseLeave, + nodeId, screenX, screenY, onAction, onMouseEnter, onMouseLeave, nodeConfig, }: NodeToolbarProps) { + const traceActive = !!nodeConfig?.traceEnabled; + const tapActive = !!nodeConfig?.tapExpression; + return (
- {ACTIONS.map(a => ( - - ))} + + + +
); } diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css index 72652a76..3703b30c 100644 --- a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css +++ b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css @@ -171,6 +171,10 @@ color: var(--text-primary, #1A1612); } +.nodeToolbarBtnActive { + background: var(--bg-hover, #F5F0EA); +} + .iterationStepper { display: flex; align-items: center; diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx index 8ff191c2..d612ef45 100644 --- a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx +++ b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx @@ -395,6 +395,7 @@ export function ProcessDiagram({ onAction={handleNodeAction} onMouseEnter={toolbar.onToolbarEnter} onMouseLeave={toolbar.onToolbarLeave} + nodeConfig={nodeConfigs?.get(toolbar.hoveredNodeId!)} /> ); })()}