Minor renames and type fixes

diagram-editor/frontend/diagram-editor.tsx

@@ -120,23 +120,21 @@ interface ProvidersProps {
   loadContext: LoadContext | null;
   nodeManager: NodeManager;
   edges: DiagramEditorEdge[];
-  diagramProperties: DiagramProperties;
 }
 
 function Providers({
   editorModeContext,
   loadContext,
   nodeManager,
   edges,
-  diagramProperties,
   children,
 }: React.PropsWithChildren<ProvidersProps>) {
   return (
     <EditorModeProvider value={editorModeContext}>
       <LoadContextProvider value={loadContext}>
         <NodeManagerProvider value={nodeManager}>
           <EdgesProvider value={edges}>
-            <DiagramPropertiesProvider value={diagramProperties}>
+            <DiagramPropertiesProvider>
               {children}
             </DiagramPropertiesProvider>
           </EdgesProvider>
@@ -619,7 +617,6 @@ function DiagramEditor() {
       loadContext={loadContext}
       nodeManager={nodeManager}
       edges={edges}
-      diagramProperties={diagramProperties}
     >
       <ReactFlow
         nodes={nodes}

diagram-editor/frontend/diagram-properties-drawer.tsx

@@ -23,10 +23,10 @@ import React from 'react';
 import { useDiagramProperties } from './diagram-properties-provider';
 import { useLoadContext } from './load-context-provider';
 import { RunButton } from './run-button';
-import type { ExampleInput } from './types/api';
+import type { InputExample } from './types/api';
 
 const DrawerWidth = '20vw';
-const EmptyExampleInput: ExampleInput = {
+const EmptyInputExample: InputExample = {
   description: '',
   value: undefined,
 };
@@ -47,8 +47,8 @@ function DiagramPropertiesDrawer({
     React.useState('Copy this input example into clipboard');
   const [openAddExampleDialog, setOpenAddExampleDialog] =
     React.useState(false);
-  const [newExampleInput, setNewExampleInput] =
-    React.useState<ExampleInput>(EmptyExampleInput);
+  const [newInputExample, setNewInputExample] =
+    React.useState<InputExample>(EmptyInputExample);
 
   React.useEffect(() => {
     setDiagramProperties({
@@ -57,11 +57,11 @@ function DiagramPropertiesDrawer({
     });
   }, [loadContext]);
 
-  const exampleInputInvalid = React.useMemo(() => {
-    return newExampleInput.description === '' ||
-      newExampleInput.value === undefined ||
-      newExampleInput.value === '';
-  }, [newExampleInput]);
+  const inputExampleInvalid = React.useMemo(() => {
+    return newInputExample.description === '' ||
+      newInputExample.value === undefined ||
+      newInputExample.value === '';
+  }, [newInputExample]);
 
   return (
     <>
@@ -162,15 +162,15 @@ function DiagramPropertiesDrawer({
                                   <IconButton
                                     onClick={() => {
                                       setDiagramProperties((prev) => {
-                                        const prevExampleInputs = prev.input_examples ?? [];
-                                        if (index >= prevExampleInputs.length) {
+                                        const prevInputExamples = prev.input_examples ?? [];
+                                        if (index >= prevInputExamples.length) {
                                           return prev;
                                         }
                                         return {
                                           ...prev,
                                           input_examples: [
-                                            ...prevExampleInputs.slice(0, index),
-                                            ...prevExampleInputs.slice(index + 1),
+                                            ...prevInputExamples.slice(0, index),
+                                            ...prevInputExamples.slice(index + 1),
                                           ],
                                         };
                                       });
@@ -236,7 +236,7 @@ function DiagramPropertiesDrawer({
       <Dialog
         onClose={() => {
           setOpenAddExampleDialog(false);
-          setNewExampleInput(EmptyExampleInput);
+          setNewInputExample(EmptyInputExample);
         }}
         open={openAddExampleDialog}
         fullWidth
@@ -253,8 +253,8 @@ function DiagramPropertiesDrawer({
               multiline
               rows={6}
               variant='outlined'
-              value={newExampleInput.value}
-              onChange={(e) => setNewExampleInput((prev) =>
+              value={newInputExample.value}
+              onChange={(e) => setNewInputExample((prev) =>
                 ({ ...prev, value: e.target.value as string}))}
             />
             <Typography variant="body1">Description</Typography>
@@ -263,8 +263,8 @@ function DiagramPropertiesDrawer({
               multiline
               rows={3}
               variant='outlined'
-              value={newExampleInput.description}
-              onChange={(e) => setNewExampleInput((prev) =>
+              value={newInputExample.description}
+              onChange={(e) => setNewInputExample((prev) =>
                 ({ ...prev, description: e.target.value}))}
             />
           </Stack>
@@ -274,20 +274,20 @@ function DiagramPropertiesDrawer({
             variant='contained'
             onClick={() => {
               setDiagramProperties((prev) => {
-                const prevExampleInputs = prev.input_examples ?? [];
+                const prevInputExamples = prev.input_examples ?? [];
                 return {
                   ...prev,
                   input_examples: [
-                    ...prevExampleInputs,
-                    newExampleInput
+                    ...prevInputExamples,
+                    newInputExample
                   ],
                 };
               });
               setOpenAddExampleDialog(false);
-              setNewExampleInput(EmptyExampleInput);
+              setNewInputExample(EmptyInputExample);
             }}
             startIcon={<MaterialSymbol symbol="add" />}
-            disabled={exampleInputInvalid}
+            disabled={inputExampleInvalid}
           >
             Add
           </Button>

diagram-editor/frontend/diagram-properties-provider.tsx

@@ -1,9 +1,9 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
-import type { ExampleInput } from './types/api';
+import type { InputExample } from './types/api';
 
 export interface DiagramProperties {
   description?: string;
-  input_examples?: ExampleInput[];
+  input_examples?: InputExample[];
 }
 
 export type DiagramPropertiesContext = [

diagram-editor/frontend/nodes/node-node.test.tsx

@@ -72,19 +72,24 @@ describe('NodeNode', () => {
     );
     const nodeProps = createOperationNodeProps(nodeNode);
     const registry: DiagramElementMetadata = {
-      messages: {},
+      messages: [],
       nodes: {
         test_builder: {
           config_schema: true,
           default_display_text: 'test',
-          request: 'request',
-          response: 'response',
+          request: 0,
+          response: 1,
           streams: {
-            test_stream: 'stream_type',
+            test_stream: 3,
           },
           config_examples: [],
         },
       },
+      reverse_message_lookup: {
+        result: [],
+        split: [],
+        unzip: [],
+      },
       schemas: {},
       sections: {},
       trace_supported: false,

diagram-editor/frontend/utils/export-diagram.test.ts

@@ -17,8 +17,13 @@ import testDiagram from './test-data/test-diagram.json';
 import testDiagramScope from './test-data/test-diagram-scope.json';
 
 const stubRegistry: DiagramElementMetadata = {
-  messages: {},
+  messages: [],
   nodes: {},
+  reverse_message_lookup: {
+    result: [],
+    split: [],
+    unzip: [],
+  },
   schemas: {},
   sections: {},
   trace_supported: false,
@@ -36,6 +41,7 @@ test('export diagram', async () => {
     new NodeManager(nodes),
     edges,
     {},
+    {},
   );
   expect(diagram).toEqual(testDiagram);
 });
@@ -47,7 +53,7 @@ test('export diagram with scope', async () => {
       graph: { nodes, edges },
     },
   ] = await loadDiagramJson(JSON.stringify(testDiagramScope));
-  let diagram = exportDiagram(stubRegistry, new NodeManager(nodes), edges, {});
+  let diagram = exportDiagram(stubRegistry, new NodeManager(nodes), edges, {}, {});
   expect(diagram).toEqual(testDiagramScope);
 
   const nodeManager = new NodeManager(nodes);
@@ -69,7 +75,7 @@ test('export diagram with scope', async () => {
     joinNamespaces(ROOT_NAMESPACE, 'scope'),
     'mul4',
   ).id;
-  diagram = exportDiagram(stubRegistry, nodeManager, edges, {});
+  diagram = exportDiagram(stubRegistry, nodeManager, edges, {}, {});
   expect(diagram.ops.scope.start).toBe('mul4');
 });
 

diagram-editor/frontend/utils/load-diagram.ts

@@ -151,13 +151,18 @@ const validate = getSchema<Diagram>('Diagram');
 
 export function loadTemplate(template: SectionTemplate): Graph {
   const stubRegistry: DiagramElementMetadata = {
-    messages: {},
+    messages: [],
     nodes: {},
+    reverse_message_lookup: {
+      result: [],
+      split: [],
+      unzip: [],
+    },
     schemas: {},
     sections: {},
     trace_supported: false,
   };
-  const stubDiagram = exportDiagram(stubRegistry, new NodeManager([]), [], {});
+  const stubDiagram = exportDiagram(stubRegistry, new NodeManager([]), [], {}, {});
   stubDiagram.ops = template.ops;
   const initialNodes: DiagramEditorNode[] = [];