src/visualProgrammingUI/VisProgUI.tsx

@@ -21,7 +21,8 @@ import '@xyflow/react/dist/style.css';
 import {
     StartNode,
     EndNode,
-    PhaseNode
+    PhaseNode,
+    NormNode
 } from "./components/NodeDefinitions.tsx";
 
 import { Sidebar } from './components/DragDropSidebar.tsx';
@@ -30,6 +31,7 @@ const nodeTypes = {
     start: StartNode,
     end: EndNode,
     phase: PhaseNode,
+    norm: NormNode
 };
 
 const initialNodes = [
@@ -67,8 +69,6 @@ const VisProgUI = ()=>  {
     const [nodes, , onNodesChange] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-
-
     const onConnect = useCallback(
         (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
         [setEdges],

src/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -95,6 +95,13 @@ export function Sidebar() {
                                 position,
                                 data: {label: `new end node`},
                             };
+                        case "norm":
+                            return {
+                                id: getId(),
+                                type: nodeType,
+                                position,
+                                data: {label: `new norm node`},
+                            };
                         default: {
                             return {
                                 id: getId(),
@@ -126,6 +133,9 @@ export function Sidebar() {
             <DraggableNode className="default" nodeType="phase" onDrop={handleNodeDrop}>
                 phase Node
             </DraggableNode>
+            <DraggableNode className="default" nodeType="norm" onDrop={handleNodeDrop}>
+                norm Node
+            </DraggableNode>
         </aside>
     );
 }

src/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -10,6 +10,7 @@ type defaultNodeData = {
 
 type startNodeData = defaultNodeData;
 type endNodeData = defaultNodeData;
+type normNodeData = defaultNodeData;
 type phaseNodeData = defaultNodeData & {
     number: number;
 };
@@ -85,9 +86,26 @@ export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
             <div className="default-node">
                 <div> phase {data.number} {data.label} </div>
                 <Handle type="target" position={Position.Left} id="target" />
+                <Handle type="target" position={Position.Bottom } id="norms" />
                 <Handle type="source" position={Position.Right} id="source" />
             </div>
         </>
     );
 };
 
+type NormNodeProps = {
+    id: string;
+    data: normNodeData;
+};
+
+export const NormNode= ({ id, data }: NormNodeProps) => {
+    return (
+        <>
+            <Toolbar nodeId={id} />
+            <div className="default-node">
+                <div> Norm {data.label} </div>
+                <Handle type="source" position={Position.Right} id="NormSource" />
+            </div>
+        </>
+    );
+};