diff --git a/diagram-editor/dist.tar.gz b/diagram-editor/dist.tar.gz index ef16ad1b..03daa75a 100644 Binary files a/diagram-editor/dist.tar.gz and b/diagram-editor/dist.tar.gz differ diff --git a/diagram-editor/frontend/diagram-editor.tsx b/diagram-editor/frontend/diagram-editor.tsx index 792af950..3f57119d 100644 --- a/diagram-editor/frontend/diagram-editor.tsx +++ b/diagram-editor/frontend/diagram-editor.tsx @@ -120,7 +120,6 @@ interface ProvidersProps { loadContext: LoadContext | null; nodeManager: NodeManager; edges: DiagramEditorEdge[]; - diagramProperties: DiagramProperties; } function Providers({ @@ -128,7 +127,6 @@ function Providers({ loadContext, nodeManager, edges, - diagramProperties, children, }: React.PropsWithChildren) { return ( @@ -136,7 +134,7 @@ function Providers({ - + {children} @@ -619,7 +617,6 @@ function DiagramEditor() { loadContext={loadContext} nodeManager={nodeManager} edges={edges} - diagramProperties={diagramProperties} > (EmptyExampleInput); + const [newInputExample, setNewInputExample] = + React.useState(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({ { 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({ { 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}))} /> Description @@ -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}))} /> @@ -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={} - disabled={exampleInputInvalid} + disabled={inputExampleInvalid} > Add diff --git a/diagram-editor/frontend/diagram-properties-provider.tsx b/diagram-editor/frontend/diagram-properties-provider.tsx index da3b1592..35689cb4 100644 --- a/diagram-editor/frontend/diagram-properties-provider.tsx +++ b/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 = [ diff --git a/diagram-editor/frontend/nodes/node-node.test.tsx b/diagram-editor/frontend/nodes/node-node.test.tsx index 5049720f..e4e6101c 100644 --- a/diagram-editor/frontend/nodes/node-node.test.tsx +++ b/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, diff --git a/diagram-editor/frontend/utils/export-diagram.test.ts b/diagram-editor/frontend/utils/export-diagram.test.ts index b14ed6d0..19b5e280 100644 --- a/diagram-editor/frontend/utils/export-diagram.test.ts +++ b/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'); }); diff --git a/diagram-editor/frontend/utils/load-diagram.ts b/diagram-editor/frontend/utils/load-diagram.ts index ecc9b4bf..31e37931 100644 --- a/diagram-editor/frontend/utils/load-diagram.ts +++ b/diagram-editor/frontend/utils/load-diagram.ts @@ -151,13 +151,18 @@ const validate = getSchema('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[] = [];