+
+
{
return (
@@ -382,31 +382,29 @@ const SelfLoadingSubApplicationContainer = (props: {
autoRefresh: boolean;
depth: number;
}) => {
- const { data } = useQuery(
- ['steps', props.projectID, props.appID, props.partitionKey],
- () =>
+ const { data } = useQuery({
+ queryKey: ['steps', props.projectID, props.appID, props.partitionKey],
+ queryFn: () =>
DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(
props.projectId as string,
props.appID as string,
props.partitionKey !== null ? props.partitionKey : '__none__'
),
- {
- // TODO -- decide how we want to auto-refresh with lots of nested stuff?
- // Really, we'll want a bulk API but this is OK for now...
- refetchInterval: props.autoRefresh ? REFRESH_INTERVAL : false,
- enabled: true
- }
- );
+ // TODO -- decide how we want to auto-refresh with lots of nested stuff?
+ // Really, we'll want a bulk API but this is OK for now...
+ refetchInterval: props.autoRefresh ? REFRESH_INTERVAL : false,
+ enabled: true
+ });
// TODO -- use a skiptoken to bypass annotation loading if we don't need them
- const { data: annotationsData } = useQuery(
- ['annotations', props.projectID, props.appID, props.partitionKey],
- () =>
+ const { data: annotationsData } = useQuery({
+ queryKey: ['annotations', props.projectID, props.appID, props.partitionKey],
+ queryFn: () =>
DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(
props.projectId as string,
props.appID as string,
props.partitionKey !== null ? props.partitionKey : '__none__'
)
- );
+ });
const [traceExpandedActions, setTraceExpandedActions] = useState([]);
const [linksExpandedActions, setLinksExpandedActions] = useState([]);
diff --git a/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx b/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx
new file mode 100644
index 000000000..6637a1022
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react';
+
+type BuilderEdgeData = {
+ condition: string;
+ onConditionChange: (condition: string) => void;
+};
+
+export const BuilderEdgeComponent = ({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ markerEnd,
+ data
+}: EdgeProps) => {
+ const edgeData = data as BuilderEdgeData;
+ const [edgePath] = getBezierPath({
+ sourceX,
+ sourceY,
+ sourcePosition,
+ targetX,
+ targetY,
+ targetPosition
+ });
+
+ const label = edgeData?.condition === 'default' ? '' : edgeData?.condition || '';
+
+ return (
+ ;
+};
+
+const BuilderGraphInner = (props: BuilderGraphProps) => {
+ const { fitView } = useReactFlow();
+
+ useEffect(() => {
+ const timer = setTimeout(() => fitView({ padding: 0.3 }), 50);
+ return () => clearTimeout(timer);
+ }, [props.layoutGraph, fitView]);
+
+ const flowNodes = useMemo(() => {
+ return props.layoutGraph.nodes.map((node) => {
+ if (node.type === BurrNodeType.STEP) {
+ const stepData = node.data as BurrStepNode['data'];
+ return {
+ ...node,
+ data: {
+ ...stepData,
+ isSelected: stepData.stepId === props.selectedNodeId,
+ unresolvedReads: props.unresolvedReads.get(stepData.name) || [],
+ onSelect: () => props.onSelectNode(stepData.stepId)
+ }
+ };
+ }
+ if (node.type === BurrNodeType.BIG_ADD_BUTTON) {
+ return {
+ ...node,
+ data: { ...node.data, onInsert: props.onInsert }
+ };
+ }
+ return node;
+ });
+ }, [props.layoutGraph.nodes, props.selectedNodeId, props.unresolvedReads, props.onSelectNode]);
+
+ const flowEdges = useMemo(() => {
+ return props.layoutGraph.edges.map((edge) => ({
+ ...edge,
+ data: { ...edge.data, onInsert: props.onInsert }
+ }));
+ }, [props.layoutGraph.edges, props.onInsert]);
+
+ return (
+ props.onSelectNode(null)}
+ fitView
+ maxZoom={2}
+ minZoom={0.1}
+ >
+
+ );
+};
+
+export const BuilderGraph = (props: BuilderGraphProps) => {
+ return (
+
+
+ );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderNode.tsx b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
new file mode 100644
index 000000000..1ab7d568d
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 { Handle, Position } from '@xyflow/react';
+import { Chip } from '../../common/chip';
+import {
+ ExclamationTriangleIcon,
+ BoltIcon,
+ ArrowDownTrayIcon,
+ FlagIcon,
+ SparklesIcon,
+ GlobeAltIcon,
+ CodeBracketIcon,
+ SignalIcon,
+ ArrowPathIcon,
+ ArrowsRightLeftIcon
+} from '@heroicons/react/24/outline';
+import { NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const NODE_ICONS: Record> = {
+ action: BoltIcon,
+ input: ArrowDownTrayIcon,
+ result: FlagIcon,
+ llm_call: SparklesIcon,
+ api_call: GlobeAltIcon,
+ code: CodeBracketIcon,
+ streaming: SignalIcon,
+ loop: ArrowPathIcon,
+ router: ArrowsRightLeftIcon
+};
+
+type BuilderNodeData = {
+ label: string;
+ nodeType: NodeType;
+ reads: string[];
+ writes: string[];
+ inputs: string[];
+ isSelected: boolean;
+ unresolvedReads: string[];
+ onSelect: () => void;
+};
+
+export const BuilderNodeComponent = (props: { data: BuilderNodeData }) => {
+ const { label, nodeType, reads, writes, inputs, isSelected, unresolvedReads, onSelect } =
+ props.data;
+ const meta = NODE_TYPE_META[nodeType];
+ const Icon = NODE_ICONS[nodeType];
+
+ return (
+ <>
+ ([]);
+ const [showOpenDialog, setShowOpenDialog] = useState(false);
+ const addBtnRef = useRef(null);
+ const fileMenuRef = useRef(null);
+
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (fileMenuRef.current && !fileMenuRef.current.contains(e.target as Node)) {
+ setFileMenuOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
+ }, []);
+
+ const loadProjects = async () => {
+ const projects = await workspaceApi.listBuilderProjects();
+ setSavedProjects(projects);
+ setShowOpenDialog(true);
+ setFileMenuOpen(false);
+ };
+
+ const handleOpen = async (id: string) => {
+ const project = await workspaceApi.getBuilderProject(id);
+ props.onProjectNameChange(project.name);
+ props.onLoad(project.graph_json);
+ setShowOpenDialog(false);
+ };
+
+ const handleDelete = async (id: string) => {
+ await workspaceApi.deleteBuilderProject(id);
+ setSavedProjects((prev) => prev.filter((p) => p.id !== id));
+ };
+
+ return (
+ <>
+ ([]);
+ const [wsSubFiles, setWsSubFiles] = useState>({});
+
+ useEffect(() => {
+ if (props.workspacePath && wsExpanded) {
+ workspaceApi.getFileTree(props.workspacePath).then(setWsFiles);
+ }
+ }, [props.workspacePath, wsExpanded]);
+
+ const loadSubDir = async (path: string) => {
+ if (!props.workspacePath || wsSubFiles[path]) return;
+ const entries = await workspaceApi.getFileTree(props.workspacePath, path);
+ setWsSubFiles((prev) => ({ ...prev, [path]: entries }));
+ };
+
+ const openWsFile = async (entry: FileEntry) => {
+ if (!props.workspacePath || entry.is_dir) return;
+ const data = await workspaceApi.getFileContent(props.workspacePath, entry.path);
+ props.onOpenFile({
+ name: entry.name,
+ language: data.language,
+ content: data.content,
+ source: 'workspace',
+ path: entry.path
+ });
+ };
+
+ return (
+ >({});
+ const debounceRef = useRef | null>(null);
+ const [parseError, setParseError] = useState(null);
+
+ // Cleanup debounce on unmount
+ useEffect(() => {
+ return () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ };
+ }, []);
+
+ // Open tabs
+ const [openTabs, setOpenTabs] = useState([]);
+ const [activeTabName, setActiveTabName] = useState(null);
+
+ // Workspace link
+ const { data: linkInfo } = useQuery({
+ queryKey: ['workspace-link', projectId],
+ queryFn: () => workspaceApi.getWorkspaceLink(projectId!),
+ enabled: !!projectId
+ });
+ const workspacePath = linkInfo?.workspace_path || null;
+
+ const { data: appData } = useQuery({
+ queryKey: ['steps', appId],
+ queryFn: () =>
+ DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(projectId!, appId!, '__none__'),
+ enabled: !!projectId && !!appId
+ });
+
+ const [imported, setImported] = useState(false);
+ useEffect(() => {
+ if (appData && !imported) {
+ builder.importFromApplication(appData.application);
+ setImported(true);
+ }
+ }, [appData, imported, builder]);
+
+ // Auto-open actions.py on first load
+ useEffect(() => {
+ if (builder.projectFiles.length > 0 && openTabs.length === 0) {
+ const actionsFile = builder.projectFiles[0];
+ const tab: OpenTab = {
+ name: actionsFile.name,
+ language: actionsFile.language,
+ content: actionsFile.content,
+ source: 'generated'
+ };
+ setOpenTabs([tab]);
+ setActiveTabName(tab.name);
+ }
+ }, [builder.projectFiles]);
+
+ const handleAddNode = useCallback(
+ (nodeType: NodeType) => {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ builder.addNode({ x: 0, y: 0 }, nodeType);
+ },
+ [builder]
+ );
+
+ const handleSave = useCallback(async () => {
+ const graphJson = JSON.stringify(builder.rootNode);
+ await workspaceApi.saveBuilderProject(projectName, graphJson);
+ }, [builder.rootNode, projectName]);
+
+ const handleLoad = useCallback(
+ (graphJson: string) => {
+ try {
+ const parsed = JSON.parse(graphJson);
+ builder.setRootNode(parsed);
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ setOpenTabs([]);
+ setActiveTabName(null);
+ } catch {
+ // invalid JSON
+ }
+ },
+ [builder]
+ );
+
+ const handleNew = useCallback(() => {
+ builder.setRootNode(null);
+ setProjectName('Untitled Project');
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ setOpenTabs([]);
+ setActiveTabName(null);
+ }, [builder]);
+
+ // Ctrl+S to save
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+ e.preventDefault();
+ handleSave();
+ }
+ };
+ document.addEventListener('keydown', handler);
+ return () => document.removeEventListener('keydown', handler);
+ }, [handleSave]);
+
+ const getTabKey = (t: OpenTab) => t.path || t.name;
+
+ const openFile = useCallback((tab: OpenTab) => {
+ const key = getTabKey(tab);
+ setOpenTabs((prev) => {
+ const exists = prev.find((t) => getTabKey(t) === key);
+ if (exists) return prev;
+ return [...prev, tab];
+ });
+ setActiveTabName(key);
+ }, []);
+
+ const closeTab = useCallback(
+ (key: string) => {
+ setOpenTabs((prev) => {
+ const filtered = prev.filter((t) => getTabKey(t) !== key);
+ if (activeTabName === key) {
+ setActiveTabName(filtered.length > 0 ? getTabKey(filtered[filtered.length - 1]) : null);
+ }
+ return filtered;
+ });
+ },
+ [activeTabName]
+ );
+
+ const activeTab = openTabs.find((t) => getTabKey(t) === activeTabName);
+
+ // Get content for active tab (generated files update from graph)
+ const getTabContent = (tab: OpenTab): string => {
+ if (tab.source === 'generated') {
+ if (editSourceRef.current === 'editor' && editorOverrides[tab.name] !== undefined) {
+ return editorOverrides[tab.name];
+ }
+ const gen = builder.projectFiles.find((f) => f.name === tab.name);
+ return gen?.content || tab.content;
+ }
+ return editorOverrides[getTabKey(tab)] ?? tab.content;
+ };
+
+ const getTabLanguage = (tab: OpenTab): string => {
+ if (tab.source === 'generated') {
+ return builder.projectFiles.find((f) => f.name === tab.name)?.language || tab.language;
+ }
+ return tab.language;
+ };
+
+ const handleEditorChange = useCallback(
+ (value: string | undefined) => {
+ if (!value || !activeTabName) return;
+ editSourceRef.current = 'editor';
+ setEditorOverrides((prev) => ({ ...prev, [activeTabName]: value }));
+
+ // Parse for graph sync only on generated Python files
+ const tab = openTabs.find((t) => t.name === activeTabName);
+ if (!tab || tab.source !== 'generated') return;
+ if (activeTabName !== 'actions.py' && activeTabName !== 'app.py') return;
+
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ debounceRef.current = setTimeout(() => {
+ const actionsCode =
+ activeTabName === 'actions.py'
+ ? value
+ : editorOverrides['actions.py'] ||
+ builder.projectFiles.find((f) => f.name === 'actions.py')?.content ||
+ '';
+ const appCode =
+ activeTabName === 'app.py'
+ ? value
+ : editorOverrides['app.py'] ||
+ builder.projectFiles.find((f) => f.name === 'app.py')?.content ||
+ '';
+
+ const parsed = parsePythonCode(actionsCode + '\n\n' + appCode);
+ if (parsed.error || parsed.actions.length === 0) {
+ setParseError(parsed.error || null);
+ return;
+ }
+ setParseError(null);
+ const tree = buildTreeFromParsed(parsed);
+ if (tree) builder.setRootFromCode(tree);
+ }, 1000);
+ },
+ [activeTabName, builder, editorOverrides, openTabs]
+ );
+
+ const handleEditorMount: OnMount = (editor) => {
+ editor.onDidFocusEditorText(() => {
+ editSourceRef.current = 'editor';
+ });
+ editor.onDidBlurEditorText(() => {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ });
+ };
+
+ return (
+
-
diff --git a/telemetry/ui/src/components/routes/AdminView.tsx b/telemetry/ui/src/components/routes/AdminView.tsx
index 287af2123..950f57c65 100644
--- a/telemetry/ui/src/components/routes/AdminView.tsx
+++ b/telemetry/ui/src/components/routes/AdminView.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../common/table';
import { DefaultService } from '../../api';
import { Loading } from '../common/loading';
@@ -53,13 +53,15 @@ const RecordsHeader = (props: {
export const AdminView = () => {
const [displayZeroCount, setDisplayZeroCount] = useState(false);
- const { data, isLoading } = useQuery(['indexingJobs', displayZeroCount], () =>
- DefaultService.getIndexingJobsApiV0IndexingJobsGet(
- 0, // TODO -- add pagination
- 100,
- !displayZeroCount
- )
- );
+ const { data, isLoading } = useQuery({
+ queryKey: ['indexingJobs', displayZeroCount],
+ queryFn: () =>
+ DefaultService.getIndexingJobsApiV0IndexingJobsGet(
+ 0, // TODO -- add pagination
+ 100,
+ !displayZeroCount
+ )
+ });
if (isLoading) {
return {props.children}
+
+
{props.children}
Error loading projects
;
if (data === undefined || backendSpec === undefined) return
+
+
+
+
+ {reads.length > 0 && (
+
+ {reads.map((r) => (
+
+ )}
+ {writes.length > 0 && (
+
+ {writes.map((w) => (
+
+ )}
+ {inputs.length > 0 && (
+
+ {inputs.map((i) => (
+
+ )}
+
+ {/* File menu */}
+
+
+ {/* Open Project Dialog */}
+ {showOpenDialog && (
+
+
+ {fileMenuOpen && (
+
+
+
+
+ {/* Project name */}
+ props.onProjectNameChange(e.target.value)}
+ className="px-2 py-1 text-sm font-medium text-gray-700 bg-transparent border-b border-transparent hover:border-gray-300 focus:border-blue-500 outline-none w-40"
+ placeholder="Untitled Project"
+ />
+
+
+
+ {/* Add Node */}
+
+
+
+
+
+ +
+ )}
+ + +
+
+ {pickerOpen && (
+ }
+ onSelect={(type) => props.onAddNode(type)}
+ onClose={() => setPickerOpen(false)}
+ />
+ )}
+
+
+ {/* Validation */}
+
+
+
+ )}
+
+ );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderView.tsx b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
new file mode 100644
index 000000000..d6bd98161
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
@@ -0,0 +1,507 @@
+/*
+ * 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import Editor, { OnMount } from '@monaco-editor/react';
+import {
+ DocumentTextIcon,
+ XMarkIcon,
+ ChevronRightIcon,
+ FolderIcon,
+ FolderOpenIcon
+} from '@heroicons/react/24/outline';
+import { DefaultService } from '../../../api';
+import { useBuilderState } from '../../../hooks/useBuilderState';
+import { BuilderGraph } from './BuilderGraph';
+import { BuilderToolbar } from './BuilderToolbar';
+import { NodeEditor } from './NodeEditor';
+import { NodeType, ProjectFile } from '../../../utils/codeGenerator';
+import { parsePythonCode, buildTreeFromParsed } from '../../../utils/codeParser';
+import { FileEntry, workspaceApi } from '../../../api/workspaceApi';
+
+type OpenTab = {
+ name: string;
+ language: string;
+ content: string;
+ source: 'generated' | 'workspace';
+ path?: string; // workspace relative path
+ modified?: boolean;
+};
+
+// Mini file explorer for the editor sidebar
+const EditorFileExplorer = (props: {
+ generatedFiles: ProjectFile[];
+ workspacePath: string | null;
+ onOpenFile: (tab: OpenTab) => void;
+}) => {
+ const [expanded, setExpanded] = useState(true);
+ const [wsExpanded, setWsExpanded] = useState(false);
+ const [wsFiles, setWsFiles] = useState
+
+
+
+ Open Project
+ +
+ {savedProjects.length === 0 && (
+
+ No saved projects
+ )}
+ {savedProjects.map((p) => (
+
+
+
+
+ ))}
+
+ {/* Generated files */}
+
+ {expanded &&
+ props.generatedFiles.map((f) => (
+
+ ))}
+
+ {/* Workspace files */}
+ {props.workspacePath && (
+ <>
+
+ {wsExpanded &&
+ wsFiles.map((entry) =>
+ entry.is_dir ? (
+
+ );
+};
+
+export const BuilderView = () => {
+ const { projectId, appId } = useParams<{ projectId?: string; appId?: string }>();
+ const [projectName, setProjectName] = useState('Untitled Project');
+
+ const builder = useBuilderState();
+
+ const editSourceRef = useRef<'graph' | 'editor'>('graph');
+ const [editorOverrides, setEditorOverrides] = useState
+
+ {wsSubFiles[entry.path]?.map((sub) =>
+ !sub.is_dir ? (
+
+ ) : null
+ )}
+
+ ) : (
+
+ )
+ )}
+
+ )}
+
+ {}}
+ validationCount={builder.validationErrors.size}
+ projectName={projectName}
+ onProjectNameChange={setProjectName}
+ onSave={handleSave}
+ onLoad={handleLoad}
+ onNew={handleNew}
+ />
+
+
+ );
+};
diff --git a/telemetry/ui/src/components/routes/builder/CodePreview.tsx b/telemetry/ui/src/components/routes/builder/CodePreview.tsx
new file mode 100644
index 000000000..ae759b418
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/CodePreview.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { base16AteliersulphurpoolLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export const CodePreview = (props: { code: string }) => {
+ const copyToClipboard = () => {
+ navigator.clipboard.writeText(props.code);
+ };
+
+ return (
+
+ {/* Left: Visual Builder */}
+
+
+ {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ builder.updateNode(builder.selectedNode!.id, updates);
+ }}
+ onDelete={() => {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ builder.removeNode(builder.selectedNode!.id);
+ }}
+ unresolvedReads={builder.validationErrors.get(builder.selectedNode.name) || []}
+ />
+ )}
+
+
+ {/* Right: VS Code-style editor */}
+
+ {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ builder.setSelectedNodeId(id);
+ }}
+ onInsert={(nodeType, ctx) => {
+ editSourceRef.current = 'graph';
+ setEditorOverrides({});
+ builder.handleInsert(nodeType, ctx);
+ }}
+ unresolvedReads={builder.validationErrors}
+ />
+
+
+ {builder.selectedNode && (
+
+ {/* Mini file explorer */}
+
+
+ {/* Tabs */}
+
+
+ {openTabs.map((tab) => {
+ const key = getTabKey(tab);
+ return (
+
+
+ {/* Monaco Editor */}
+ setActiveTabName(key)}
+ className={`flex items-center gap-1 px-3 py-1.5 text-xs cursor-pointer border-r border-gray-200 shrink-0 select-none ${
+ key === activeTabName
+ ? 'bg-white text-gray-900 font-medium border-b-2 border-b-blue-500'
+ : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
+ }`}
+ >
+
+ );
+ })}
+
+ {parseError && Parse error}
+
+ {activeTab ? (
+
+
+ Open a file from the explorer
+
+ )}
+
+
+ );
+};
diff --git a/telemetry/ui/src/components/routes/builder/NodeEditor.tsx b/telemetry/ui/src/components/routes/builder/NodeEditor.tsx
new file mode 100644
index 000000000..c572f2761
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/NodeEditor.tsx
@@ -0,0 +1,359 @@
+/*
+ * 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 { useState } from 'react';
+import { BuilderNode, NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
+import { TrashIcon } from '@heroicons/react/24/outline';
+
+const TagInput = (props: {
+ label: string;
+ values: string[];
+ onChange: (values: string[]) => void;
+ colorClass: string;
+}) => {
+ const [input, setInput] = useState('');
+
+ const addTag = () => {
+ const trimmed = input.trim();
+ if (trimmed && !props.values.includes(trimmed)) {
+ props.onChange([...props.values, trimmed]);
+ setInput('');
+ }
+ };
+
+ return (
+
+ Generated Python
+
+
+
+
+ {props.code}
+
+
+
+
+
+ );
+};
+
+const TextInput = (props: {
+ label: string;
+ value: string;
+ onChange: (v: string) => void;
+ placeholder?: string;
+ mono?: boolean;
+}) => (
+
+ {props.values.map((v) => (
+
+ {v}
+
+
+ ))}
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ addTag();
+ }
+ }}
+ placeholder={`Add ${props.label.toLowerCase()}...`}
+ className="border border-gray-200 rounded px-2 py-1 text-sm"
+ />
+
+
+ props.onChange(e.target.value)}
+ placeholder={props.placeholder}
+ className={`border border-gray-200 rounded px-2 py-1 text-sm ${props.mono ? 'font-mono' : ''}`}
+ />
+
+);
+
+const SelectInput = (props: {
+ label: string;
+ value: string;
+ onChange: (v: string) => void;
+ options: { value: string; label: string }[];
+}) => (
+
+
+
+
+);
+
+const CodeInput = (props: { label: string; value: string; onChange: (v: string) => void }) => (
+
+
+