diff --git a/packages/jdm-editor/src/components/decision-graph/graph/tab-function.tsx b/packages/jdm-editor/src/components/decision-graph/graph/tab-function.tsx index 28598fa..9a1bb5f 100644 --- a/packages/jdm-editor/src/components/decision-graph/graph/tab-function.tsx +++ b/packages/jdm-editor/src/components/decision-graph/graph/tab-function.tsx @@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useState } from 'react'; import { P, match } from 'ts-pattern'; import { useDecisionGraphActions, useDecisionGraphListeners, useDecisionGraphState } from '../context/dg-store.context'; +import { FunctionKind, useFunctionKind } from '../nodes/specifications/function.specification'; import type { SimulationTrace, SimulationTraceDataFunction } from '../types/simulation.types'; const Function = React.lazy(async () => { @@ -16,6 +17,7 @@ export type TabFunctionProps = { }; export const TabFunction: React.FC = ({ id }) => { + const kind = useFunctionKind(id); const graphActions = useDecisionGraphActions(); const onFunctionReady = useDecisionGraphListeners((s) => s.onFunctionReady); const [monaco, setMonaco] = useState(); @@ -68,11 +70,16 @@ export const TabFunction: React.FC = ({ id }) => { }> setMonaco(monaco)} - value={typeof content === 'string' ? content : ''} + value={kind === FunctionKind.Stable ? content.source : content} error={nodeError ?? undefined} onChange={(val) => { graphActions.updateNode(id, (draft) => { - draft.content = val; + if (kind === FunctionKind.Stable) { + draft.content = { source: val }; + } else { + draft.content = val; + } + return draft; }); }} diff --git a/packages/jdm-editor/src/components/decision-graph/nodes/specifications/function.specification.tsx b/packages/jdm-editor/src/components/decision-graph/nodes/specifications/function.specification.tsx index 6afa89a..1230db3 100644 --- a/packages/jdm-editor/src/components/decision-graph/nodes/specifications/function.specification.tsx +++ b/packages/jdm-editor/src/components/decision-graph/nodes/specifications/function.specification.tsx @@ -1,14 +1,19 @@ import { FunctionOutlined } from '@ant-design/icons'; import { Button } from 'antd'; import React from 'react'; +import { P, match } from 'ts-pattern'; import { defaultFunctionValue } from '../../../function/helpers/libs'; -import { useDecisionGraphActions } from '../../context/dg-store.context'; +import { useDecisionGraphActions, useDecisionGraphState } from '../../context/dg-store.context'; import { GraphNode } from '../graph-node'; import type { NodeSpecification } from './specification-types'; import { NodeKind } from './specification-types'; -export type NodeFunctionData = string; +export type NodeFunctionData = + | string + | { + source: string; + }; export const functionSpecification: NodeSpecification = { type: NodeKind.Function, @@ -18,15 +23,22 @@ export const functionSpecification: NodeSpecification = { shortDescription: 'Javascript lambda', generateNode: ({ index }) => ({ name: `function${index}`, - content: defaultFunctionValue, + content: { + source: defaultFunctionValue, + }, }), renderNode: ({ id, data, selected, specification }) => { const graphActions = useDecisionGraphActions(); + const kind = useFunctionKind(id); return ( = { ); }, }; + +export enum FunctionKind { + Deprecated, + Stable, +} + +export const useFunctionKind = (id: string) => { + const { kind } = useDecisionGraphState((s) => ({ + kind: match(s.decisionGraph.nodes.find((n) => n.id === id)?.content) + .with(P.string, () => FunctionKind.Deprecated) + .otherwise(() => FunctionKind.Stable), + })); + + return kind; +};