src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -19,20 +19,20 @@ export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNode
 
 // Node Toolbar definition, contains node delete functionality
 
-type ToolbarProps= {
+type ToolbarProps = {
   nodeId: string;
   allowDelete: boolean;
 };
 
-export function Toolbar({nodeId, allowDelete}:ToolbarProps) {
-    const { setNodes, setEdges } = useReactFlow();
+export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
+  const {setNodes, setEdges} = useReactFlow();
 
   const handleDelete = () => {
     setNodes((nds) => nds.filter((n) => n.id !== nodeId));
     setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
   };
   return (
-        <NodeToolbar >
+    <NodeToolbar>
       <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
     </NodeToolbar>);
 }
@@ -47,13 +47,13 @@ type StartNodeProps = {
   data: startNodeData;
 };
 
-export const StartNode= ({ id, data }: StartNodeProps) => {
+export const StartNode = ({id, data}: StartNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
       <div className="default-node__start">
         <div> data test {data.label} </div>
-                <Handle type="source" position={Position.Right} id="start" />
+        <Handle type="source" position={Position.Right} id="start"/>
       </div>
     </>
   );
@@ -67,13 +67,13 @@ type EndNodeProps = {
   data: endNodeData;
 };
 
-export const EndNode= ({ id, data }: EndNodeProps) => {
+export const EndNode = ({id, data}: EndNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
       <div className="default-node__end">
         <div> {data.label} </div>
-                <Handle type="target" position={Position.Left} id="end" />
+        <Handle type="target" position={Position.Left} id="end"/>
       </div>
     </>
   );
@@ -87,15 +87,15 @@ type PhaseNodeProps = {
   data: phaseNodeData;
 };
 
-export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
+export const PhaseNode = ({id, data}: PhaseNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
       <div className="default-node__phase">
         <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" />
+        <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>
     </>
   );
@@ -109,13 +109,13 @@ type NormNodeProps = {
   data: normNodeData;
 };
 
-export const NormNode= ({ id, data }: NormNodeProps) => {
+export const NormNode = ({id, data}: NormNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
       <div className="default-node__norm">
         <div> Norm {data.label} </div>
-                <Handle type="source" position={Position.Right} id="NormSource" />
+        <Handle type="source" position={Position.Right} id="NormSource"/>
       </div>
     </>
   );