+
+
void;
+ onConfirm: () => void;
+ exampleTitle: string;
+ hasExistingContent: boolean;
+}
+
+const ConfirmLoadExampleDialog: React.FC = ({
+ open,
+ onClose,
+ onConfirm,
+ exampleTitle,
+ hasExistingContent
+}) => {
+ if (!open) return null;
+
+ return (
+ {
+ condition?: string;
+ isConditional?: boolean;
+ label?: string;
+ onLabelChange?: (edgeId: string, newLabel: string) => void;
+}
+
+type CustomEdgeType = Edge;
+
+const CustomEdge: React.FC> = ({
+ id,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ style = {},
+ data,
+ markerEnd,
+ selected
+}) => {
+ const [isEditing, setIsEditing] = useState(false);
+
+ const isConditional = data?.isConditional || (data?.condition && data.condition !== 'default');
+ const displayLabel = isConditional ? data?.label || 'condition' : '';
+ const [labelValue, setLabelValue] = useState(displayLabel);
+
+ React.useEffect(() => {
+ const newDisplayLabel = isConditional ? data?.label || 'condition' : '';
+ setLabelValue(newDisplayLabel);
+ }, [data?.label, data?.condition, isConditional]);
+
+ const [edgePath, labelX, labelY] = getBezierPath({
+ sourceX,
+ sourceY,
+ sourcePosition,
+ targetX,
+ targetY,
+ targetPosition
+ });
+
+ const edgeStyle: React.CSSProperties = {
+ strokeWidth: selected ? 4 : 2,
+ stroke:
+ (style as React.CSSProperties)?.stroke ||
+ (data?.condition === 'default' ? '#94a3b8' : '#429dbce6'),
+ ...(style as React.CSSProperties)
+ };
+
+ if (isConditional) {
+ edgeStyle.strokeDasharray = '8,4';
+ edgeStyle.animation = 'dash 2s linear infinite';
+ }
+
+ const handleLabelClick = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation();
+ setIsEditing(true);
+ }, []);
+
+ const handleLabelChange = useCallback((event: React.ChangeEvent) => {
+ setLabelValue(event.target.value);
+ }, []);
+
+ const handleLabelBlur = useCallback(() => {
+ setIsEditing(false);
+ if (data?.onLabelChange) {
+ data.onLabelChange(id, labelValue);
+ }
+ }, [data, id, labelValue]);
+
+ const handleLabelKeyDown = useCallback(
+ (event: React.KeyboardEvent) => {
+ event.stopPropagation();
+
+ if (event.key === 'Enter') {
+ handleLabelBlur();
+ } else if (event.key === 'Escape') {
+ setLabelValue(data?.label || data?.condition || '');
+ setIsEditing(false);
+ }
+ },
+ [data?.label, data?.condition, handleLabelBlur]
+ );
+
+ return (
+ <>
+
+
+
+ {isConditional && (
+
+
+ );
+};
+
+export default CustomEdge;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx b/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx
new file mode 100644
index 000000000..c78661108
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx
@@ -0,0 +1,230 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
+import { Handle, Position, NodeProps, Node } from '@xyflow/react';
+
+const pastelColors = [
+ { border: '#FF6B6B', background: '#FFE5E5' },
+ { border: '#4ECDC4', background: '#E5F9F6' },
+ { border: '#45B7D1', background: '#E5F4FD' },
+ { border: '#96CEB4', background: '#F0F9F4' },
+ { border: '#FFEAA7', background: '#FFFCF0' },
+ { border: '#DDA0DD', background: '#F5F0F5' },
+ { border: '#98D8C8', background: '#F0FAF7' },
+ { border: '#F7DC6F', background: '#FEFBF0' },
+ { border: '#BB8FCE', background: '#F4F1F7' },
+ { border: '#85C1E9', background: '#F0F8FF' }
+];
+
+export interface CustomNodeData extends Record {
+ label: string;
+ description?: string;
+ nodeType: string;
+ isAsync?: boolean;
+ isStreaming?: boolean;
+ icon: string;
+ colorIndex?: number;
+ onDelete?: (nodeId: string) => void;
+ onLabelChange?: (nodeId: string, newLabel: string) => void;
+ onToggleProperty?: (nodeId: string, property: 'isAsync' | 'isStreaming') => void;
+}
+
+type CustomNodeType = Node;
+
+const CustomNode: React.FC> = ({ id, data, selected }) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [labelValue, setLabelValue] = useState(data.label);
+ const [fixedWidth, setFixedWidth] = useState(null);
+ const [fixedHeight, setFixedHeight] = useState(null);
+ const paperRef = useRef(null);
+
+ useEffect(() => {
+ setLabelValue(data.label);
+ }, [data.label]);
+
+ const colorIndex = data.colorIndex ?? parseInt(id.replace(/\D/g, '')) % pastelColors.length;
+ const colors = pastelColors[colorIndex];
+
+ const handleLabelClick = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (paperRef.current) {
+ setFixedWidth(paperRef.current.offsetWidth);
+ setFixedHeight(paperRef.current.offsetHeight);
+ }
+ setIsEditing(true);
+ }, []);
+
+ const handleLabelChange = useCallback((event: React.ChangeEvent) => {
+ setLabelValue(event.target.value);
+ }, []);
+
+ const handleLabelBlur = useCallback(() => {
+ setIsEditing(false);
+ setFixedWidth(null);
+ setFixedHeight(null);
+ if (data.onLabelChange && labelValue.trim() !== data.label) {
+ data.onLabelChange(id, labelValue.trim() || data.label);
+ }
+ }, [data, id, labelValue]);
+
+ const handleLabelKeyDown = useCallback(
+ (event: React.KeyboardEvent) => {
+ event.stopPropagation();
+
+ if (event.key === 'Enter') {
+ handleLabelBlur();
+ } else if (event.key === 'Escape') {
+ setLabelValue(data.label);
+ setIsEditing(false);
+ setFixedWidth(null);
+ setFixedHeight(null);
+ }
+ },
+ [data.label, handleLabelBlur]
+ );
+
+ const isInputNode = data.nodeType === 'input';
+
+ return (
+ = ({ examples, onLoadExample }) => {
+ return (
+ = ({ initialGraph }) => {
+ const nodeIdCounter = useRef(0);
+ const [leftOpen, setLeftOpen] = useState(true);
+ const [rightOpen, setRightOpen] = useState(true);
+ const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[]);
+ const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
+ const [reactFlowInstance, setReactFlowInstance] = useState(null);
+ const [nodeDialog, setNodeDialog] = useState(false);
+ const [selectedEdge, setSelectedEdge] = useState(null);
+ const [selectedNode, setSelectedNode] = useState(null);
+ const [colorPickerOpen, setColorPickerOpen] = useState(false);
+ const [colorPickerAnchor, setColorPickerAnchor] = useState(null);
+ const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+ const [selectedExample, setSelectedExample] = useState(null);
+ const [nodeDialogData, setNodeDialogData] = useState({
+ label: '',
+ description: '',
+ nodeType: 'action',
+ icon: 'settings'
+ });
+ const [tabIndex, setTabIndex] = useState(0);
+ const [copied, setCopied] = useState<'python' | 'json' | null>(null);
+ const [showExamplePicker, setShowExamplePicker] = useState(false);
+
+ const edgeColors = [
+ '#429dbce6',
+ '#ef4444',
+ '#10b981',
+ '#f59e0b',
+ '#8b5cf6',
+ '#ec4899',
+ '#6b7280'
+ ];
+
+ const handleDeleteNode = useCallback(
+ (nodeId: string) => {
+ setNodes((nds) => nds.filter((node) => node.id !== nodeId));
+ setEdges((eds) => eds.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
+ setSelectedNode(null);
+ },
+ [setNodes, setEdges]
+ );
+
+ const handleLabelChange = useCallback(
+ (nodeId: string, newLabel: string) => {
+ setNodes((nds) =>
+ nds.map((node) =>
+ node.id === nodeId ? { ...node, data: { ...node.data, label: newLabel } } : node
+ )
+ );
+ },
+ [setNodes]
+ );
+
+ const handleToggleProperty = useCallback(
+ (nodeId: string, property: 'isAsync' | 'isStreaming') => {
+ setNodes((nds) =>
+ nds.map((node) =>
+ node.id === nodeId
+ ? { ...node, data: { ...node.data, [property]: !node.data[property] } }
+ : node
+ )
+ );
+ },
+ [setNodes]
+ );
+
+ const handleEdgeLabelChange = useCallback(
+ (edgeId: string, newLabel: string) => {
+ setEdges((eds) =>
+ eds.map((edge) =>
+ edge.id === edgeId
+ ? { ...edge, data: { ...edge.data, label: newLabel, condition: newLabel } }
+ : edge
+ )
+ );
+ },
+ [setEdges]
+ );
+
+ // Shared helper: convert BurrGraphJSON into ReactFlow nodes/edges and load them
+ const loadGraphIntoCanvas = useCallback(
+ (graphJson: BurrGraphJSON) => {
+ const newNodes: Node[] = graphJson.nodes.map((n, i) => ({
+ id: n.id,
+ type: 'custom',
+ position: n.position,
+ data: {
+ label: n.label,
+ description: n.description || '',
+ nodeType: n.nodeType,
+ isAsync: n.isAsync || false,
+ isStreaming: n.isStreaming || false,
+ icon: 'settings',
+ colorIndex: i % 10,
+ onDelete: handleDeleteNode,
+ onLabelChange: handleLabelChange,
+ onToggleProperty: handleToggleProperty
+ }
+ }));
+
+ const newEdges: Edge[] = graphJson.edges.map((e) => ({
+ id: e.id,
+ source: e.source,
+ target: e.target,
+ type: 'custom',
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ width: 15,
+ height: 15,
+ color: '#429dbce6'
+ },
+ data: {
+ condition: e.condition,
+ isConditional: e.isConditional,
+ label: e.condition,
+ onLabelChange: handleEdgeLabelChange
+ }
+ }));
+
+ // Update nodeIdCounter to be higher than any existing node's numeric suffix
+ const maxId = graphJson.nodes.reduce((max, n) => {
+ const match = n.id.match(/(\d+)$/);
+ return match ? Math.max(max, parseInt(match[1], 10)) : max;
+ }, 0);
+ nodeIdCounter.current = Math.max(nodeIdCounter.current, maxId);
+
+ setNodes(newNodes);
+ setEdges(newEdges);
+ },
+ [
+ handleDeleteNode,
+ handleLabelChange,
+ handleToggleProperty,
+ handleEdgeLabelChange,
+ setNodes,
+ setEdges
+ ]
+ );
+
+ // Load initialGraph prop if provided, otherwise restore from localStorage
+ useEffect(() => {
+ if (initialGraph) {
+ loadGraphIntoCanvas(initialGraph);
+ return;
+ }
+
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (saved) {
+ const parsed = JSON.parse(saved) as BurrGraphJSON;
+ if (parsed.nodes && parsed.nodes.length > 0) {
+ loadGraphIntoCanvas(parsed);
+ }
+ }
+ } catch {
+ // Corrupted data — ignore and start fresh
+ }
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const onPaneClick = useCallback(
+ (event: React.MouseEvent) => {
+ if (event.metaKey || event.ctrlKey) {
+ const isRightClick = event.button === 2 || event.type === 'contextmenu';
+ const nodeType = isRightClick ? 'input' : 'action';
+ const nodeLabel = isRightClick ? `Input ${nodes.length + 1}` : `Node ${nodes.length + 1}`;
+
+ let position;
+ if (reactFlowInstance) {
+ position = reactFlowInstance.screenToFlowPosition({
+ x: event.clientX,
+ y: event.clientY
+ });
+ } else {
+ const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+ position = {
+ x: event.clientX - rect.left,
+ y: event.clientY - rect.top
+ };
+ }
+
+ const newNode: Node = {
+ id: `node_${++nodeIdCounter.current}`,
+ type: 'custom',
+ position,
+ data: {
+ label: nodeLabel,
+ description: '',
+ nodeType: nodeType,
+ isAsync: false,
+ isStreaming: false,
+ icon: 'settings',
+ colorIndex: nodes.length % 10,
+ onDelete: handleDeleteNode,
+ onLabelChange: handleLabelChange,
+ onToggleProperty: handleToggleProperty
+ }
+ };
+
+ setNodes((nds) => [...nds, newNode]);
+
+ if (isRightClick) {
+ event.preventDefault();
+ }
+ }
+ },
+ [
+ nodes.length,
+ setNodes,
+ handleDeleteNode,
+ handleLabelChange,
+ handleToggleProperty,
+ reactFlowInstance
+ ]
+ );
+
+ const onPaneContextMenu = useCallback(
+ (event: React.MouseEvent | MouseEvent) => {
+ const reactEvent = event as React.MouseEvent;
+ if (reactEvent.metaKey || reactEvent.ctrlKey) {
+ onPaneClick(reactEvent);
+ }
+ },
+ [onPaneClick]
+ );
+
+ const onKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const target = event.target as HTMLElement;
+ const isInputFocused =
+ target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+ if ((event.key === 'Backspace' || event.key === 'Delete') && !isInputFocused) {
+ if (selectedNode) {
+ setNodes((nds) => nds.filter((node) => node.id !== selectedNode));
+ setEdges((eds) =>
+ eds.filter((edge) => edge.source !== selectedNode && edge.target !== selectedNode)
+ );
+ setSelectedNode(null);
+ } else if (selectedEdge) {
+ setEdges((eds) => {
+ const filteredEdges = eds.filter((edge) => edge.id !== selectedEdge);
+
+ const deletedEdge = eds.find((edge) => edge.id === selectedEdge);
+ if (deletedEdge) {
+ const sourceEdges = filteredEdges.filter(
+ (edge) => edge.source === deletedEdge.source
+ );
+ const shouldBeConditional = sourceEdges.length > 1;
+
+ return filteredEdges.map((edge) => {
+ if (edge.source === deletedEdge.source) {
+ const preservedLabel = shouldBeConditional
+ ? deletedEdge.data?.label || edge.data?.label || 'condition'
+ : undefined;
+ return {
+ ...edge,
+ data: {
+ ...edge.data,
+ isConditional: shouldBeConditional,
+ label: preservedLabel,
+ onLabelChange: handleEdgeLabelChange
+ }
+ };
+ }
+ return edge;
+ });
+ }
+
+ return filteredEdges;
+ });
+ setSelectedEdge(null);
+ }
+ }
+ },
+ [selectedNode, selectedEdge, setNodes, setEdges, handleEdgeLabelChange]
+ );
+
+ useEffect(() => {
+ document.addEventListener('keydown', onKeyDown);
+ return () => {
+ document.removeEventListener('keydown', onKeyDown);
+ };
+ }, [onKeyDown]);
+
+ const onConnect = useCallback(
+ (params: Connection) => {
+ const sourceEdges = edges.filter((edge) => edge.source === params.source);
+ const willBeConditional = sourceEdges.length > 0;
+
+ const targetNode = nodes.find((node) => node.id === params.target);
+ const targetLabel = targetNode?.data?.label || params.target;
+ const conditionString = `condition="${targetLabel}"`;
+
+ const newEdge = {
+ ...params,
+ type: 'custom',
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ width: 15,
+ height: 15,
+ color: '#429dbce6'
+ },
+ data: {
+ condition: willBeConditional ? conditionString : undefined,
+ isConditional: willBeConditional,
+ label: willBeConditional ? conditionString : undefined,
+ onLabelChange: handleEdgeLabelChange
+ }
+ };
+
+ setEdges((eds) => addEdge(newEdge, eds));
+ },
+ [setEdges, edges, nodes, handleEdgeLabelChange]
+ );
+
+ const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
+ setSelectedNode(node.id);
+ setSelectedEdge(null);
+ setColorPickerOpen(false);
+ setColorPickerAnchor(null);
+ }, []);
+
+ const onEdgeClick = useCallback((_event: React.MouseEvent, edge: Edge) => {
+ setSelectedEdge(edge.id);
+ setSelectedNode(null);
+ setColorPickerAnchor(_event.currentTarget as HTMLElement);
+ setColorPickerOpen(true);
+ }, []);
+
+ const handleEdgeColorChange = useCallback(
+ (color: string) => {
+ if (selectedEdge) {
+ setEdges((eds) =>
+ eds.map((edge) =>
+ edge.id === selectedEdge ? { ...edge, style: { ...edge.style, stroke: color } } : edge
+ )
+ );
+ }
+ setColorPickerOpen(false);
+ setColorPickerAnchor(null);
+ },
+ [selectedEdge, setEdges]
+ );
+
+ const handleToggleConditional = useCallback(() => {
+ if (!selectedEdge) return;
+ setEdges((eds) => {
+ const targetEdge = eds.find((e) => e.id === selectedEdge);
+ if (!targetEdge) return eds;
+ const source = targetEdge.source;
+ const target = targetEdge.target;
+ const groupEdges = eds.filter((e) => e.source === source);
+ const toggledIsConditional = !targetEdge.data?.isConditional;
+
+ const targetNode = nodes.find((node) => node.id === target);
+ const targetLabel = targetNode?.data?.label || target;
+ const conditionString = `condition="${targetLabel}"`;
+
+ return eds.map((edge) => {
+ if (edge.id === selectedEdge) {
+ return {
+ ...edge,
+ data: {
+ ...edge.data,
+ isConditional: toggledIsConditional,
+ condition: toggledIsConditional ? conditionString : undefined,
+ label: toggledIsConditional ? conditionString : undefined
+ }
+ };
+ }
+ if (edge.source === source && edge.id !== selectedEdge) {
+ if (!toggledIsConditional) {
+ const stillConditional =
+ groupEdges.filter((e) => e.id !== selectedEdge && e.data?.isConditional).length > 1;
+ return {
+ ...edge,
+ data: {
+ ...edge.data,
+ isConditional: stillConditional
+ }
+ };
+ }
+ }
+ return edge;
+ });
+ });
+ setColorPickerOpen(false);
+ setColorPickerAnchor(null);
+ }, [selectedEdge, setEdges, nodes]);
+
+ const handleAddNode = useCallback(() => {
+ setNodeDialog(true);
+ }, []);
+
+ const [confirmClearOpen, setConfirmClearOpen] = useState(false);
+ const handleClearCanvas = useCallback(() => {
+ setNodes([]);
+ setEdges([]);
+ setSelectedNode(null);
+ setSelectedEdge(null);
+ nodeIdCounter.current = 0;
+ setConfirmClearOpen(false);
+ try {
+ localStorage.removeItem(STORAGE_KEY);
+ } catch {
+ // ignore
+ }
+ }, [setNodes, setEdges]);
+
+ const handleCreateNode = useCallback(() => {
+ const newNode: Node = {
+ id: `node_${++nodeIdCounter.current}`,
+ type: 'custom',
+ position: { x: Math.random() * 500 + 100, y: Math.random() * 500 + 100 },
+ data: {
+ label: nodeDialogData.label,
+ description: nodeDialogData.description,
+ nodeType: nodeDialogData.nodeType,
+ isAsync: false,
+ isStreaming: false,
+ icon: nodeDialogData.icon,
+ colorIndex: nodes.length % 10,
+ onDelete: handleDeleteNode,
+ onLabelChange: handleLabelChange,
+ onToggleProperty: handleToggleProperty
+ }
+ };
+
+ setNodes((nds) => [...nds, newNode]);
+ setNodeDialog(false);
+ setNodeDialogData({
+ label: '',
+ description: '',
+ nodeType: 'action',
+ icon: 'settings'
+ });
+ }, [
+ nodeDialogData,
+ setNodes,
+ nodes.length,
+ handleDeleteNode,
+ handleLabelChange,
+ handleToggleProperty
+ ]);
+
+ const graphData = useMemo(() => GraphExporter.exportToJSON(nodes, edges), [nodes, edges]);
+ const pythonCode = useMemo(
+ () => BurrGraphCodeGenerator.generatePythonCode(graphData),
+ [graphData]
+ );
+ const jsonCode = useMemo(() => JSON.stringify(graphData, null, 2), [graphData]);
+
+ // Auto-save graph to localStorage (debounced to avoid writing on every drag frame)
+ const saveTimerRef = useRef | null>(null);
+ useEffect(() => {
+ if (saveTimerRef.current) {
+ clearTimeout(saveTimerRef.current);
+ }
+ saveTimerRef.current = setTimeout(() => {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(graphData));
+ } catch {
+ // Storage full or unavailable — silently skip
+ }
+ }, 500);
+ return () => {
+ if (saveTimerRef.current) {
+ clearTimeout(saveTimerRef.current);
+ }
+ };
+ }, [graphData]);
+
+ const hasExistingContent = nodes.length > 0 || edges.length > 0;
+
+ const handleLoadExample = useCallback((example: ExampleGraph) => {
+ setSelectedExample(example);
+ setConfirmDialogOpen(true);
+ }, []);
+
+ const handleConfirmLoadExample = useCallback(() => {
+ if (!selectedExample) return;
+
+ const errors = ExampleLoader.validateExample(selectedExample);
+ if (errors.length > 0) {
+ return;
+ }
+
+ const { nodes: newNodes, edges: newEdges } = ExampleLoader.convertToReactFlow(selectedExample);
+
+ const nodesWithHandlers = newNodes.map((node) => ({
+ ...node,
+ data: {
+ ...node.data,
+ onDelete: handleDeleteNode,
+ onLabelChange: handleLabelChange,
+ onToggleProperty: handleToggleProperty
+ }
+ }));
+
+ const edgesWithHandlers = newEdges.map((edge) => ({
+ ...edge,
+ data: {
+ ...edge.data,
+ onLabelChange: handleEdgeLabelChange
+ }
+ }));
+
+ setNodes(nodesWithHandlers);
+ setEdges(edgesWithHandlers);
+ setConfirmDialogOpen(false);
+ setSelectedExample(null);
+
+ setTimeout(() => {
+ if (reactFlowInstance) {
+ reactFlowInstance.fitView({ padding: 0.1 });
+ }
+ }, 100);
+ }, [
+ selectedExample,
+ handleDeleteNode,
+ handleLabelChange,
+ handleToggleProperty,
+ handleEdgeLabelChange,
+ setNodes,
+ setEdges,
+ reactFlowInstance
+ ]);
+
+ const handleCancelLoadExample = useCallback(() => {
+ setConfirmDialogOpen(false);
+ setSelectedExample(null);
+ }, []);
+
+ return (
+
-
diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx b/telemetry/ui/src/components/routes/app/GraphView.tsx
index 31a5f37e3..e2ecf5ab1 100644
--- a/telemetry/ui/src/components/routes/app/GraphView.tsx
+++ b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -21,7 +21,8 @@ import { ActionModel, ApplicationModel, Step } from '../../../api';
import dagre from 'dagre';
import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
-import ReactFlow, {
+import {
+ ReactFlow,
BaseEdge,
Controls,
EdgeProps,
@@ -30,14 +31,12 @@ import ReactFlow, {
Position,
ReactFlowProvider,
getBezierPath,
- useNodes,
useReactFlow
-} from 'reactflow';
+} from '@xyflow/react';
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
import { backgroundColorsForIndex } from './AppView';
import { getActionStatus } from '../../../utils';
-import { getSmartEdge } from '@tisoap/react-flow-smart-edge';
const dagreGraph = new dagre.graphlib.Graph();
@@ -149,38 +148,26 @@ export const ActionActionEdge = ({
markerEnd,
data
}: EdgeProps) => {
- const nodes = useNodes();
- data = data as EdgeData;
+ const edgeData = data as EdgeData | undefined;
const { highlightedActions: previousActions, currentAction } =
React.useContext(NodeStateProvider);
const allActionsInPath = [...(previousActions || []), ...(currentAction ? [currentAction] : [])];
const containsFrom = allActionsInPath.some(
- (action) => action.step_start_log.action === data.from
+ (action) => action.step_start_log.action === edgeData?.from
+ );
+ const containsTo = allActionsInPath.some(
+ (action) => action.step_start_log.action === edgeData?.to
);
- const containsTo = allActionsInPath.some((action) => action.step_start_log.action === data.to);
const shouldHighlight = containsFrom && containsTo;
- const getSmartEdgeResponse = getSmartEdge({
- sourcePosition,
- targetPosition,
+
+ const [edgePath] = getBezierPath({
sourceX,
sourceY,
+ sourcePosition,
targetX,
targetY,
- nodes
+ targetPosition
});
- let edgePath = null;
- if (getSmartEdgeResponse !== null) {
- edgePath = getSmartEdgeResponse.svgPathString;
- } else {
- edgePath = getBezierPath({
- sourceX,
- sourceY,
- sourcePosition,
- targetX,
- targetY,
- targetPosition
- })[0];
- }
const style = {
markerColor: shouldHighlight ? 'black' : 'gray',
@@ -188,7 +175,7 @@ export const ActionActionEdge = ({
};
return (
<>
- {props.children}
+
+
{props.children}
+
+ );
+};
+
+export default ConfirmLoadExampleDialog;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx b/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx
new file mode 100644
index 000000000..f6e2447ba
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx
@@ -0,0 +1,161 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+ BaseEdge,
+ EdgeLabelRenderer,
+ EdgeProps,
+ getBezierPath,
+ MarkerType,
+ Edge
+} from '@xyflow/react';
+
+export interface CustomEdgeData extends Record
+
+
+
+
+ Load Example Graph
+
+
+
+ + Are you sure you want to load the "{exampleTitle}" example? +
+ + {hasExistingContent && ( +
+
+ )}
+
+ + This will replace your current graph. Any unsaved changes will be lost. +
+
+ You can always export your current work as JSON or Python code before loading the
+ example.
+
+
+
+
+
+
+ {isEditing ? (
+ e.stopPropagation()}
+ autoFocus
+ className="border border-gray-300 rounded-xl px-2 py-1 text-xs bg-white min-w-16 text-center focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+ ) : (
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default memo(CustomNode);
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx b/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx
new file mode 100644
index 000000000..89d49cd71
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx
@@ -0,0 +1,71 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { PlayIcon } from '@heroicons/react/24/outline';
+import { Button } from '../../../common/button';
+import { ExampleGraph } from '../data/examples';
+
+interface ExampleGalleryProps {
+ examples: ExampleGraph[];
+ onLoadExample: (example: ExampleGraph) => void;
+}
+
+const ExampleGallery: React.FC
+ {selected && !isInputNode && (
+
+
+
+
+
+
+ )}
+
+ {isEditing ? (
+ e.stopPropagation()}
+ autoFocus
+ className={`
+ border-none outline-none bg-transparent text-sm font-bold font-inherit
+ w-full box-border p-0 m-0 leading-normal block
+ ${isInputNode ? 'text-center text-gray-600' : 'text-left'}
+ `}
+ style={{
+ color: isInputNode ? '#666' : colors.border,
+ marginBottom: data.description ? '8px' : 0,
+ paddingRight: selected ? '24px' : 0
+ }}
+ />
+ ) : (
+
+ {labelValue || click to name}
+
+ )}
+
+ {data.description && (
+
+ {data.description}
+
+ )}
+
+
+ );
+};
+
+export default ExampleGallery;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
new file mode 100644
index 000000000..08c921cea
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
@@ -0,0 +1,1306 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+ ReactFlow,
+ Node,
+ Edge,
+ addEdge,
+ Connection,
+ useNodesState,
+ useEdgesState,
+ Controls,
+ MiniMap,
+ Background,
+ BackgroundVariant,
+ NodeTypes,
+ EdgeTypes,
+ ReactFlowInstance,
+ MarkerType
+} from '@xyflow/react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Button } from '../../../common/button';
+import {
+ PlusIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ClipboardDocumentIcon,
+ QuestionMarkCircleIcon,
+ TrashIcon
+} from '@heroicons/react/24/outline';
+
+import '@xyflow/react/dist/style.css';
+import CustomNode from './CustomNode';
+import CustomEdge from './CustomEdge';
+import ExampleGallery from './ExampleGallery';
+import ConfirmLoadExampleDialog from './ConfirmLoadExampleDialog';
+import { GraphExporter, BurrGraphJSON } from '../utils/GraphExporter';
+import { BurrGraphCodeGenerator } from '../utils/BurrCodeGenerator';
+import { ExampleLoader } from '../utils/ExampleLoader';
+import { examples } from '../data/examples';
+import type { ExampleGraph } from '../data/examples';
+
+const nodeTypes: NodeTypes = {
+ custom: CustomNode as NodeTypes['custom']
+};
+
+const edgeTypes: EdgeTypes = {
+ custom: CustomEdge as EdgeTypes['custom']
+};
+
+const defaultEdgeOptions = {
+ type: 'custom',
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ width: 15,
+ height: 15,
+ color: '#429dbce6'
+ }
+};
+
+const STORAGE_KEY = 'burr-graph-builder-state';
+
+const nodeTemplates = [
+ { type: 'action', label: 'Action' },
+ { type: 'input', label: 'Input' }
+];
+
+interface NodeDialogData {
+ label: string;
+ description: string;
+ nodeType: string;
+ icon: string;
+}
+
+/**
+ * Visual graph builder for Burr applications.
+ *
+ * Accepts an optional initialGraph to pre-populate the canvas - this enables
+ * future flows like loading from the tracking API or from Pyodide-based
+ * Python AST parsing.
+ */
+interface GraphBuilderProps {
+ initialGraph?: BurrGraphJSON;
+}
+
+const GraphBuilder: React.FCExample Graphs
++ Load pre-built examples to explore the graph builder +
+ + {examples.map((example) => ( +
+
+ ))}
+
+ {examples.length === 0 && (
+
+
+ {example.title}
+{example.description}
+
+
+ {example.nodes.length} nodes
+
+
+ {example.edges.length} edges
+
+
+
+
+
+ No examples available yet.
+ )} +
+ {/* Left sidebar with help & instructions */}
+
+
+
+ {/* Main content area */}
+
+ {leftOpen ? (
+
+
+ {/* Intro */}
+
+ ) : (
+
+
+
+ {/* Quick Start */}
+ Graph Builder
++ Visually design Burr application graphs, then export as Python code or JSON. +
+
+
+
+ {/* Creating */}
+ + Quick Start +
+-
+
- Add action nodes to the canvas +
- Connect them by dragging between handles +
- + Switch to the Python tab to see generated + code + +
+
+
+ {/* Editing */}
+ + Creating +
+
+
+
+
+
+
+ {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Click
+
+
+
+ Add an action node at that position
+
+
+
+
+
+ {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Right-click
+
+
+ Add an input node
+
+
+
+
+ Drag
+
+
+
+ From bottom handle to top handle to create an edge (transition)
+
+
+
+
+
+ +
+
+
+
+ Use the button at the bottom-right to add a node via dialog
+
+
+
+
+ {/* Deleting */}
+ + Editing +
+
+
+
+
+
+ Click label
+
+ Edit a node's name inline
+
+
+
+ Click edge label
+
+
+ Edit a conditional edge's condition text
+
+
+
+
+ Select node
+
+
+ Toggle action/streaming type via the badge in the top-right corner
+
+
+
+
+ Click edge
+
+
+ Pick a color or toggle conditional/default
+
+
+
+
+ {/* Concepts */}
+ + Deleting +
+
+
+
+
+ {navigator.platform?.includes('Mac') ? '\u232b' : 'Backspace'}
+
+
+ Delete the selected node or edge
+
+
+
+ {/* Node Flags */}
+ + Node Types +
+
+
+
+
+
+
+ Action
+
+
+ A step decorated with{' '}
+ @action
+
+
+
+
+ Input
+
+ + External input passed into an action at runtime +
+
+
+
+ {/* Edge Types */}
+ + Action Flags +
++ Select a node to toggle these independently: +
+
+
+
+
+ async
+
+
+
+ Makes the function async def
+
+
+ stream
+
+
+
+ Uses @streaming_action and
+ yields results
+
+
+ + Edge Types +
+
+
+
+
+
+
+ Default
+
+
+ Unconditional transition (uses{' '}
+ default)
+
+
+
+
+ Conditional
+
+
+ Guarded transition (uses{' '}
+ when()). Created
+ automatically when a node has multiple outgoing edges.
+
+
+ )}
+
+
+
+
+ {/* Tab navigation */}
+
+
+ {/* Right panel: ExampleGallery */}
+
+
+
+
+ {/* Tab content */}
+
+ {tabIndex === 0 && (
+
+
+
+
+
+ {/* Empty state overlay */}
+ {nodes.length === 0 && (
+
+ )}
+ {tabIndex === 1 && (
+
+
+ )}
+
+
+
+ + Design your Burr graph +
++ Build application graphs visually and export as Python code. +
+ +
+
+
+
+
+ {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Click
+
+ Add an action node
+
+
+
+ Drag handle
+
+ Connect nodes with edges
+
+
+
+
+
+
+ {hasExistingContent && (
+
+ )}
+
+
+
+
+ )}
+ {tabIndex === 2 && (
+
+
+
+
+
+ {pythonCode}
+
+
+
+
+ )}
+
+
+
+
+
+ {jsonCode}
+
+
+
+
+
+ {/* Add Node Dialog */}
+ {nodeDialog && (
+
+ {rightOpen ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+ setNodeDialog(false)}
+ >
+
e.stopPropagation()}
+ >
+
Add New Node
+
+
+
+ setNodeDialogData({ ...nodeDialogData, label: e.target.value })}
+ className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+