fix

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<TabFunctionProps> = ({ id }) => {
+  const kind = useFunctionKind(id);
   const graphActions = useDecisionGraphActions();
   const onFunctionReady = useDecisionGraphListeners((s) => s.onFunctionReady);
   const [monaco, setMonaco] = useState<Monaco>();
@@ -68,11 +70,16 @@ export const TabFunction: React.FC<TabFunctionProps> = ({ id }) => {
     <Suspense fallback={<Spin />}>
       <Function
         onMonacoReady={(monaco) => 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;
           });
         }}

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<NodeFunctionData> = {
   type: NodeKind.Function,
@@ -18,15 +23,22 @@ export const functionSpecification: NodeSpecification<NodeFunctionData> = {
   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 (
       <GraphNode
         id={id}
-        specification={specification}
+        specification={{
+          ...specification,
+          displayName:
+            kind === FunctionKind.Stable ? specification.displayName : `${specification.displayName} - Deprecated`,
+        }}
         name={data.name}
         isSelected={selected}
         actions={[
@@ -38,3 +50,18 @@ export const functionSpecification: NodeSpecification<NodeFunctionData> = {
     );
   },
 };
+
+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;
+};