feat: added node-tooltips to the editor

src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx

@@ -39,6 +39,10 @@ type Emotion = { type: "emotion", id: string, value: string, label: "Emotion rec
 
 export type BasicBeliefNode = Node<BasicBeliefNodeData>
 
+// update the tooltip to reflect newly added connection options for a belief
+export const BasicBeliefTooltip = `
+  A belief describes a condition that must be met
+  in order for a connected norm to be activated`;
 
 /**
  * This function is called whenever a connection is made with this node type as the target

src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx

@@ -55,6 +55,10 @@ export function EndReduce(node: Node, _nodes: Node[]) {
   }
 }
 
+export const EndTooltip = `
+  The end node signifies the endpoint of your program; 
+  the output of the final phase of your program should connect to the end node`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target
  * @param _thisNode the node of this node type which function is called

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -136,6 +136,11 @@ export function GoalReduce(node: Node, _nodes: Node[]) {
     }
 }
 
+
+export const GoalTooltip = `
+  The goal node allows you to set goals that Pepper has to achieve
+  before moving to the next phase of your program`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target
  * @param _thisNode the node of this node type which function is called

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -114,6 +114,10 @@ export function NormReduce(node: Node, nodes: Node[]) {
   return result
 }
 
+export const NormTooltip = `
+  A norm describes a behavioral rule Pepper must follow during the connected phase(-s),
+  for example: "respond using formal language"`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target
  * @param _thisNode the node of this node type which function is called

src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx

@@ -115,6 +115,10 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
     return result;
 }
 
+export const PhaseTooltip = `
+  A phase is a single stage of the program, during a phase Pepper will behave
+  in accordance with any connected norms, goals and triggers`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target (phase)
  * @param _thisNode the node of this node type which function is called

src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx

@@ -53,6 +53,10 @@ export function StartReduce(node: Node, _nodes: Node[]) {
   }
 }
 
+export const StartTooltip = `
+  The start node acts as the starting point for a program, 
+  it should be connected to the left handle of the first phase of your program`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target
  * @param _thisNode the node of this node type which function is called

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -101,6 +101,11 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
   
 }
 
+
+export const TriggerTooltip = `
+  A trigger node is used to make Pepper execute a predefined plan -
+  consisting of one or more actions - when the connected beliefs are met`;
+
 /**
  * This function is called whenever a connection is made with this node type as the target
  * @param _thisNode the node of this node type which function is called