feat: drill-down into sub-routes with breadcrumb navigation

Double-click a DIRECT or SEDA node to navigate into that route's diagram. Breadcrumbs show the route stack and allow clicking back to any level. Escape key goes back one level. Route ID resolution handles camelCase endpoint URIs mapping to kebab-case route IDs (e.g. direct:callGetProduct → call-get-product) using the catalog's known route IDs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 16:58:35 +01:00
parent f6220a9f89
commit eb9c20e734
7 changed files with 174 additions and 24 deletions
--- a/ui/src/components/ProcessDiagram/CompoundNode.tsx
+++ b/ui/src/components/ProcessDiagram/CompoundNode.tsx
@@ -18,6 +18,7 @@ interface CompoundNodeProps {
  hoveredNodeId: string | null;
  nodeConfigs?: Map<string, NodeConfig>;
  onNodeClick: (nodeId: string) => void;
+  onNodeDoubleClick?: (nodeId: string) => void;
  onNodeEnter: (nodeId: string) => void;
  onNodeLeave: () => void;
 }
@@ -25,7 +26,7 @@ interface CompoundNodeProps {
 export function CompoundNode({
  node, edges, parentX = 0, parentY = 0,
  selectedNodeId, hoveredNodeId, nodeConfigs,
-  onNodeClick, onNodeEnter, onNodeLeave,
+  onNodeClick, onNodeDoubleClick, onNodeEnter, onNodeLeave,
 }: CompoundNodeProps) {
  const x = (node.x ?? 0) - parentX;
  const y = (node.y ?? 0) - parentY;
@@ -102,6 +103,7 @@ export function CompoundNode({
              hoveredNodeId={hoveredNodeId}
              nodeConfigs={nodeConfigs}
              onNodeClick={onNodeClick}
+              onNodeDoubleClick={onNodeDoubleClick}
              onNodeEnter={onNodeEnter}
              onNodeLeave={onNodeLeave}
            />
@@ -119,6 +121,7 @@ export function CompoundNode({
            isSelected={selectedNodeId === child.id}
            config={child.id ? nodeConfigs?.get(child.id) : undefined}
            onClick={() => child.id && onNodeClick(child.id)}
+            onDoubleClick={() => child.id && onNodeDoubleClick?.(child.id)}
            onMouseEnter={() => child.id && onNodeEnter(child.id)}
            onMouseLeave={onNodeLeave}
          />
--- a/ui/src/components/ProcessDiagram/DiagramNode.tsx
+++ b/ui/src/components/ProcessDiagram/DiagramNode.tsx
@@ -12,12 +12,13 @@ interface DiagramNodeProps {
  isSelected: boolean;
  config?: NodeConfig;
  onClick: () => void;
+  onDoubleClick?: () => void;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
 }

 export function DiagramNode({
-  node, isHovered, isSelected, config, onClick, onMouseEnter, onMouseLeave,
+  node, isHovered, isSelected, config, onClick, onDoubleClick, onMouseEnter, onMouseLeave,
 }: DiagramNodeProps) {
  const x = node.x ?? 0;
  const y = node.y ?? 0;
@@ -35,6 +36,7 @@ export function DiagramNode({
      data-node-id={node.id}
      transform={`translate(${x}, ${y})`}
      onClick={(e) => { e.stopPropagation(); onClick(); }}
+      onDoubleClick={(e) => { e.stopPropagation(); onDoubleClick?.(); }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={{ cursor: 'pointer' }}
--- a/ui/src/components/ProcessDiagram/ErrorSection.tsx
+++ b/ui/src/components/ProcessDiagram/ErrorSection.tsx
@@ -17,6 +17,7 @@ interface ErrorSectionProps {
  hoveredNodeId: string | null;
  nodeConfigs?: Map<string, NodeConfig>;
  onNodeClick: (nodeId: string) => void;
+  onNodeDoubleClick?: (nodeId: string) => void;
  onNodeEnter: (nodeId: string) => void;
  onNodeLeave: () => void;
 }
@@ -28,7 +29,7 @@ const VARIANT_COLORS: Record<string, string> = {

 export function ErrorSection({
  section, totalWidth, selectedNodeId, hoveredNodeId, nodeConfigs,
-  onNodeClick, onNodeEnter, onNodeLeave,
+  onNodeClick, onNodeDoubleClick, onNodeEnter, onNodeLeave,
 }: ErrorSectionProps) {
  const color = VARIANT_COLORS[section.variant ?? 'error'] ?? VARIANT_COLORS.error;
  const boxHeight = useMemo(() => {
@@ -99,6 +100,7 @@ export function ErrorSection({
                  hoveredNodeId={hoveredNodeId}
                  nodeConfigs={nodeConfigs}
                  onNodeClick={onNodeClick}
+                  onNodeDoubleClick={onNodeDoubleClick}
                  onNodeEnter={onNodeEnter}
                  onNodeLeave={onNodeLeave}
                />
@@ -112,6 +114,7 @@ export function ErrorSection({
                isSelected={selectedNodeId === node.id}
                config={node.id ? nodeConfigs?.get(node.id) : undefined}
                onClick={() => node.id && onNodeClick(node.id)}
+                onDoubleClick={() => node.id && onNodeDoubleClick?.(node.id)}
                onMouseEnter={() => node.id && onNodeEnter(node.id)}
                onMouseLeave={onNodeLeave}
              />
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
@@ -78,6 +78,50 @@
  font-variant-numeric: tabular-nums;
 }

+.breadcrumbs {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  background: var(--bg-surface, #FFFFFF);
+  border: 1px solid var(--border, #E4DFD8);
+  border-radius: var(--radius-sm, 5px);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(44, 37, 32, 0.06));
+  z-index: 10;
+  font-size: 12px;
+}
+
+.breadcrumbItem {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumbSep {
+  margin: 0 6px;
+  color: var(--text-muted, #9C9184);
+}
+
+.breadcrumbLink {
+  background: none;
+  border: none;
+  color: var(--running, #1A7F8E);
+  cursor: pointer;
+  padding: 0;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.breadcrumbLink:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbCurrent {
+  color: var(--text-primary, #1A1612);
+  font-weight: 600;
+}
+
 .nodeToolbar {
  position: absolute;
  display: flex;
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { ProcessDiagramProps } from './types';
+import type { DiagramNode as DiagramNodeType } from '../../api/queries/diagrams';
 import { useDiagramData } from './useDiagramData';
 import { useZoomPan } from './useZoomPan';
 import { useToolbarHover, NodeToolbar } from './NodeToolbar';
@@ -13,6 +14,33 @@ import styles from './ProcessDiagram.module.css';

 const PADDING = 40;

+/** Types that support drill-down — double-click navigates to the target route */
+const DRILLDOWN_TYPES = new Set(['DIRECT', 'SEDA']);
+
+/** Extract the target endpoint name from a node's label */
+function extractTargetEndpoint(node: DiagramNodeType): string | null {
+  // Labels like "to: direct:orderProcessing" or "direct:orderProcessing"
+  const label = node.label ?? '';
+  const match = label.match(/(?:to:\s*)?(?:direct|seda):(\S+)/i);
+  return match ? match[1] : null;
+}
+
+/** Convert camelCase to kebab-case: "callGetProduct" → "call-get-product" */
+function camelToKebab(s: string): string {
+  return s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Resolve a direct/seda endpoint name to a routeId.
+ * Tries: exact match, kebab-case conversion, then gives up.
+ */
+function resolveRouteId(endpoint: string, knownRouteIds: Set<string>): string | null {
+  if (knownRouteIds.has(endpoint)) return endpoint;
+  const kebab = camelToKebab(endpoint);
+  if (knownRouteIds.has(kebab)) return kebab;
+  return null;
+}
+
 export function ProcessDiagram({
  application,
  routeId,
@@ -21,10 +49,21 @@ export function ProcessDiagram({
  onNodeSelect,
  onNodeAction,
  nodeConfigs,
+  knownRouteIds,
  className,
 }: ProcessDiagramProps) {
+  // Route stack for drill-down navigation
+  const [routeStack, setRouteStack] = useState<string[]>([routeId]);
+
+  // Reset stack when the external routeId prop changes
+  useEffect(() => {
+    setRouteStack([routeId]);
+  }, [routeId]);
+
+  const currentRouteId = routeStack[routeStack.length - 1];
+
  const { sections, totalWidth, totalHeight, isLoading, error } = useDiagramData(
-    application, routeId, direction,
+    application, currentRouteId, direction,
  );

  const zoom = useZoomPan();
@@ -33,18 +72,43 @@ export function ProcessDiagram({
  const contentWidth = totalWidth + PADDING * 2;
  const contentHeight = totalHeight + PADDING * 2;

-  // Reset to 100% at top-left on first data load
+  // Reset to 100% at top-left when route changes
  useEffect(() => {
    if (totalWidth > 0 && totalHeight > 0) {
      zoom.resetView();
    }
-  }, [totalWidth, totalHeight]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [totalWidth, totalHeight, currentRouteId]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleNodeClick = useCallback(
    (nodeId: string) => { onNodeSelect?.(nodeId); },
    [onNodeSelect],
  );

+  const handleNodeDoubleClick = useCallback(
+    (nodeId: string) => {
+      const node = findNodeById(sections, nodeId);
+      if (!node || !DRILLDOWN_TYPES.has(node.type ?? '')) return;
+      const endpoint = extractTargetEndpoint(node);
+      if (!endpoint) return;
+      const resolved = knownRouteIds
+        ? resolveRouteId(endpoint, knownRouteIds)
+        : endpoint;
+      if (resolved) {
+        onNodeSelect?.('');
+        setRouteStack(prev => [...prev, resolved]);
+      }
+    },
+    [sections, onNodeSelect, knownRouteIds],
+  );
+
+  const handleBreadcrumbClick = useCallback(
+    (index: number) => {
+      onNodeSelect?.('');
+      setRouteStack(prev => prev.slice(0, index + 1));
+    },
+    [onNodeSelect],
+  );
+
  const handleNodeAction = useCallback(
    (nodeId: string, action: import('./types').NodeAction) => {
      if (action === 'inspect') onNodeSelect?.(nodeId);
@@ -56,12 +120,17 @@ export function ProcessDiagram({
  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Escape') {
-        onNodeSelect?.('');
+        if (routeStack.length > 1) {
+          // Go back one level
+          setRouteStack(prev => prev.slice(0, -1));
+        } else {
+          onNodeSelect?.('');
+        }
        return;
      }
      zoom.onKeyDown(e, contentWidth, contentHeight);
    },
-    [onNodeSelect, zoom, contentWidth, contentHeight],
+    [onNodeSelect, zoom, contentWidth, contentHeight, routeStack.length],
  );

  if (isLoading) {
@@ -89,13 +158,34 @@ export function ProcessDiagram({
  }

  const mainSection = sections[0];
-  const errorSections = sections.slice(1);
+  const handlerSections = sections.slice(1);

  return (
    <div
      ref={zoom.containerRef}
      className={`${styles.container} ${className ?? ''}`}
    >
+      {/* Breadcrumb bar — only shown when drilled down */}
+      {routeStack.length > 1 && (
+        <div className={styles.breadcrumbs}>
+          {routeStack.map((route, i) => (
+            <span key={i} className={styles.breadcrumbItem}>
+              {i > 0 && <span className={styles.breadcrumbSep}>/</span>}
+              {i < routeStack.length - 1 ? (
+                <button
+                  className={styles.breadcrumbLink}
+                  onClick={() => handleBreadcrumbClick(i)}
+                >
+                  {route}
+                </button>
+              ) : (
+                <span className={styles.breadcrumbCurrent}>{route}</span>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+
      <svg
        className={styles.svg}
        onWheel={zoom.onWheel}
@@ -140,6 +230,7 @@ export function ProcessDiagram({
                    hoveredNodeId={toolbar.hoveredNodeId}
                    nodeConfigs={nodeConfigs}
                    onNodeClick={handleNodeClick}
+                    onNodeDoubleClick={handleNodeDoubleClick}
                    onNodeEnter={toolbar.onNodeEnter}
                    onNodeLeave={toolbar.onNodeLeave}
                  />
@@ -153,6 +244,7 @@ export function ProcessDiagram({
                  isSelected={selectedNodeId === node.id}
                  config={node.id ? nodeConfigs?.get(node.id) : undefined}
                  onClick={() => node.id && handleNodeClick(node.id)}
+                  onDoubleClick={() => node.id && handleNodeDoubleClick(node.id)}
                  onMouseEnter={() => node.id && toolbar.onNodeEnter(node.id)}
                  onMouseLeave={toolbar.onNodeLeave}
                />
@@ -162,16 +254,17 @@ export function ProcessDiagram({

          {/* Toolbar rendered as HTML overlay below */}

-          {/* Error handler sections */}
-          {errorSections.map((section, i) => (
+          {/* Handler sections (completion, then error) */}
+          {handlerSections.map((section, i) => (
            <ErrorSection
-              key={`error-${i}`}
+              key={`handler-${i}`}
              section={section}
              totalWidth={totalWidth}
              selectedNodeId={selectedNodeId}
              hoveredNodeId={toolbar.hoveredNodeId}
              nodeConfigs={nodeConfigs}
              onNodeClick={handleNodeClick}
+              onNodeDoubleClick={handleNodeDoubleClick}
              onNodeEnter={toolbar.onNodeEnter}
              onNodeLeave={toolbar.onNodeLeave}
            />
@@ -183,7 +276,6 @@ export function ProcessDiagram({
      {toolbar.hoveredNodeId && onNodeAction && (() => {
        const hNode = findNodeById(sections, toolbar.hoveredNodeId!);
        if (!hNode) return null;
-        // Convert SVG coordinates to screen-space using zoom transform
        const nodeCenter = (hNode.x ?? 0) + (hNode.width ?? 160) / 2;
        const nodeTop = hNode.y ?? 0;
        const screenX = nodeCenter * zoom.state.scale + zoom.state.translateX;
@@ -213,7 +305,7 @@ export function ProcessDiagram({
 function findNodeById(
  sections: import('./types').DiagramSection[],
  nodeId: string,
-): import('../../api/queries/diagrams').DiagramNode | undefined {
+): DiagramNodeType | undefined {
  for (const section of sections) {
    for (const node of section.nodes) {
      if (node.id === nodeId) return node;
@@ -227,9 +319,9 @@ function findNodeById(
 }

 function findInChildren(
-  nodes: import('../../api/queries/diagrams').DiagramNode[],
+  nodes: DiagramNodeType[],
  nodeId: string,
-): import('../../api/queries/diagrams').DiagramNode | undefined {
+): DiagramNodeType | undefined {
  for (const n of nodes) {
    if (n.id === nodeId) return n;
    if (n.children) {
@@ -240,12 +332,10 @@ function findInChildren(
  return undefined;
 }

-/** Returns true if the edge connects two top-level nodes (not inside any compound). */
 function topLevelEdge(
  edge: import('../../api/queries/diagrams').DiagramEdge,
-  nodes: import('../../api/queries/diagrams').DiagramNode[],
+  nodes: DiagramNodeType[],
 ): boolean {
-  // Collect all IDs that are children of compound nodes (at any depth)
  const compoundChildIds = new Set<string>();
  for (const n of nodes) {
    if (n.children && n.children.length > 0) {
@@ -255,10 +345,7 @@ function topLevelEdge(
  return !compoundChildIds.has(edge.sourceId) && !compoundChildIds.has(edge.targetId);
 }

-function collectDescendantIds(
-  nodes: import('../../api/queries/diagrams').DiagramNode[],
-  set: Set<string>,
-) {
+function collectDescendantIds(nodes: DiagramNodeType[], set: Set<string>) {
  for (const n of nodes) {
    if (n.id) set.add(n.id);
    if (n.children) collectDescendantIds(n.children, set);
--- a/ui/src/components/ProcessDiagram/types.ts
+++ b/ui/src/components/ProcessDiagram/types.ts
@@ -23,5 +23,7 @@ export interface ProcessDiagramProps {
  onNodeSelect?: (nodeId: string) => void;
  onNodeAction?: (nodeId: string, action: NodeAction) => void;
  nodeConfigs?: Map<string, NodeConfig>;
+  /** Known route IDs for this application (enables drill-down resolution) */
+  knownRouteIds?: Set<string>;
  className?: string;
 }
--- a/ui/src/pages/DevDiagram/DevDiagram.tsx
+++ b/ui/src/pages/DevDiagram/DevDiagram.tsx
@@ -33,6 +33,14 @@ export default function DevDiagram() {
    return { apps: appArr, routes: filtered };
  }, [catalog, selectedApp]);

+  // All route IDs for the selected app (for drill-down resolution)
+  const knownRouteIds = useMemo(() => {
+    if (!catalog || !selectedApp) return new Set<string>();
+    const app = (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
+      .find(a => a.appId === selectedApp);
+    return new Set((app?.routes ?? []).map(r => r.routeId));
+  }, [catalog, selectedApp]);
+
  // Mock node configs for testing
  const nodeConfigs = useMemo(() => {
    const map = new Map<string, NodeConfig>();
@@ -85,6 +93,7 @@ export default function DevDiagram() {
              onNodeSelect={setSelectedNodeId}
              onNodeAction={handleNodeAction}
              nodeConfigs={nodeConfigs}
+              knownRouteIds={knownRouteIds}
            />
          ) : (
            <div className={styles.placeholder}>