feat: added an inferred belief node to the editor

src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts

@@ -1,4 +1,4 @@
-import type { BasicBeliefNodeData } from "./BasicBeliefNode";
+import type { BasicBeliefNodeData } from "./BasicBeliefNode.tsx";
 
 
 /**

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

@@ -3,13 +3,14 @@ import {
   Position,
   type Node,
 } from '@xyflow/react';
-import { Toolbar } from '../components/NodeComponents';
+import { Toolbar } from '../components/NodeComponents.tsx';
 import styles from '../../VisProg.module.css';
 import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
-import useFlowStore from '../VisProgStores';
-import { TextField } from '../../../../components/TextField';
-import { MultilineTextField } from '../../../../components/MultilineTextField';
+import useFlowStore from '../VisProgStores.tsx';
+import { TextField } from '../../../../components/TextField.tsx';
+import { MultilineTextField } from '../../../../components/MultilineTextField.tsx';
+import {noMatchingLeftRightBelief} from "./BeliefGlobals.ts";
 
 /**
  * The default data structure for a BasicBelief node
@@ -31,7 +32,7 @@ export type BasicBeliefNodeData = {
 };
 
 // These are all the types a basic belief could be.
-type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
+export type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
 type Keyword = { type: "keyword", id: string, value: string, label: "Keyword said:"};
 type Semantic = { type: "semantic", id: string, value: string, description: string, label: "Detected with LLM:"};
 type DetectedObject = { type: "object", id: string, value: string, label: "Object found:"};
@@ -189,7 +190,8 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
           </div>
           )}
         <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
-        allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
+          noMatchingLeftRightBelief,
+          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
         ]}/>
       </div>
     </>

src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.ts

@@ -0,0 +1,63 @@
+import {getOutgoers, type Node} from '@xyflow/react';
+import {type HandleRule, type RuleResult, ruleResult} from "../HandleRuleLogic.ts";
+import useFlowStore from "../VisProgStores.tsx";
+import {BasicBeliefReduce} from "./BasicBeliefNode.tsx";
+import {type InferredBeliefNodeData, InferredBeliefReduce} from "./InferredBeliefNode.tsx";
+
+export function BeliefGlobalReduce(beliefNode: Node, nodes: Node[]) {
+  switch (beliefNode.type) {
+    case 'basic_belief':
+      return BasicBeliefReduce(beliefNode, nodes);
+    case 'inferred_belief':
+      return InferredBeliefReduce(beliefNode, nodes);
+  }
+}
+
+export const noMatchingLeftRightBelief : HandleRule = (connection, _)=> {
+  const { nodes } = useFlowStore.getState();
+  const thisNode = nodes.find(node => node.id === connection.target && node.type === 'inferred_belief');
+  if (!thisNode) return ruleResult.satisfied;
+
+  const iBelief = (thisNode.data as InferredBeliefNodeData).inferredBelief;
+  return (iBelief.left === connection.source || iBelief.right === connection.source)
+    ? ruleResult.notSatisfied("Connecting one belief to both input handles of an inferred belief node is not allowed")
+    : ruleResult.satisfied;
+}
+/**
+ * makes it impossible to connect Inferred belief nodes
+ * if the connection would create a cyclical connection between inferred beliefs
+ */
+export const noBeliefCycles: HandleRule = (connection, _): RuleResult => {
+  const {nodes, edges} = useFlowStore.getState();
+  const defaultErrorMessage = "Cyclical connection exists between inferred beliefs";
+
+  /**
+   * recursively checks for cyclical connections between InferredBelief nodes
+   *
+   * to check for a cycle provide the source of an attempted connection as the targetNode for the cycle check,
+   * the currentNodeId should be initialised with the id of the targetNode of the attempted connection.
+   *
+   * @param {string} targetNodeId - the id of the node we are looking for as the endpoint of a cyclical connection
+   * @param {string} currentNodeId - the id of the node we are checking for outgoing connections to the provided target node
+   * @returns {RuleResult}
+   */
+  function checkForCycle(targetNodeId: string, currentNodeId: string): RuleResult {
+    const outgoingBeliefs = getOutgoers({id: currentNodeId}, nodes, edges)
+      .filter(node => node.type === 'inferred_belief');
+
+    if (outgoingBeliefs.length === 0) return ruleResult.satisfied;
+    if (outgoingBeliefs.some(node => node.id === targetNodeId)) return ruleResult
+      .notSatisfied(defaultErrorMessage);
+
+    const next = outgoingBeliefs.map(node => checkForCycle(targetNodeId, node.id))
+      .find(result => !result.isSatisfied);
+
+    return next
+      ? next
+      : ruleResult.satisfied;
+  }
+
+  return connection.source === connection.target
+    ? ruleResult.notSatisfied(defaultErrorMessage)
+    : checkForCycle(connection.source, connection.target);
+};

src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.ts

@@ -0,0 +1,16 @@
+import type { InferredBeliefNodeData } from "./InferredBeliefNode.tsx";
+
+
+/**
+ * Default data for this node
+ */
+export const InferredBeliefNodeDefaults: InferredBeliefNodeData = {
+  label: "AND/OR",
+  droppable: true,
+  inferredBelief: {
+    left: undefined,
+    operator: true,
+    right: undefined
+  },
+  hasReduce: true,
+};

src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css

@@ -0,0 +1,80 @@
+.operator-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    cursor: pointer;
+    font-family: sans-serif;
+    /* Change this font-size to scale the whole component */
+    font-size: 12px;
+}
+
+/* hide the default checkbox */
+.operator-switch input {
+    display: none;
+}
+
+/* The Track */
+.switch-visual {
+    position: relative;
+    /* height is now 3x the font size */
+    height: 3em;
+    aspect-ratio: 1 / 2;
+    background-color: ButtonFace;
+    border-radius: 2em;
+    transition: 0.2s;
+}
+
+/* The Knob */
+.switch-visual::after {
+    content: "";
+    position: absolute;
+    top: 0.1em;
+    left: 0.1em;
+    width: 1em;
+    height: 1em;
+    background: Canvas;
+    border: 0.175em solid mediumpurple;
+    border-radius: 50%;
+    transition: transform 0.2s ease-in-out, border-color 0.2s;
+}
+
+/* Labels */
+.switch-labels {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 3em; /* Matches the track height */
+    font-weight: 800;
+    color: Canvas;
+    line-height: 1.4;
+    padding: 0.2em 0;
+}
+
+.operator-switch input:checked + .switch-visual::after {
+    /* Moves the slider down */
+    transform: translateY(1.4em);
+}
+
+/*change the colours to highlight the selected operator*/
+.operator-switch input:checked ~ .switch-labels{
+    :first-child {
+        transition: ease-in-out color 0.2s;
+        color: ButtonFace;
+    }
+    :last-child {
+        transition: ease-in-out color 0.2s;
+        color: mediumpurple;
+    }
+}
+
+.operator-switch input:not(:checked) ~ .switch-labels{
+    :first-child {
+        transition: ease-in-out color 0.2s;
+        color: mediumpurple;
+    }
+    :last-child {
+        transition: ease-in-out color 0.2s;
+        color: ButtonFace;
+    }
+
+}

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

@@ -0,0 +1,176 @@
+import {getConnectedEdges, type Node, type NodeProps, Position} from '@xyflow/react';
+import {useState} from "react";
+import styles from '../../VisProg.module.css';
+import {Toolbar} from '../components/NodeComponents.tsx';
+import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
+import useFlowStore from "../VisProgStores.tsx";
+import {BeliefGlobalReduce, noBeliefCycles, noMatchingLeftRightBelief} from "./BeliefGlobals.ts";
+import switchStyles from './InferredBeliefNode.module.css';
+
+
+/**
+ * The default data structure for an InferredBelief node
+ */
+export type InferredBeliefNodeData = {
+  label: string;
+  droppable: boolean;
+  inferredBelief: InferredBelief;
+  hasReduce: boolean;
+};
+
+/**
+ * stores a boolean to represent the operator
+ * and a left and right BeliefNode (can be both an inferred and a basic belief)
+ * in the form of their corresponding id's
+ */
+export type InferredBelief = {
+  left: string | undefined,
+  operator: boolean,
+  right: string | undefined,
+}
+
+export type InferredBeliefNode = Node<InferredBeliefNodeData>;
+
+/**
+ * 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
+ * @param _sourceNodeId the source of the received connection
+ */
+export function InferredBeliefConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  const data = _thisNode.data as InferredBeliefNodeData;
+
+  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId
+    && ['basic_belief', 'inferred_belief'].includes(node.type!)))
+  ) {
+    const connectedEdges = getConnectedEdges([_thisNode], useFlowStore.getState().edges);
+    switch(connectedEdges.find(edge => edge.source === _sourceNodeId)?.targetHandle){
+      case 'beliefLeft': data.inferredBelief.left = _sourceNodeId; break;
+      case 'beliefRight': data.inferredBelief.right = _sourceNodeId; break;
+    }
+  }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function InferredBeliefConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function InferredBeliefDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  const data = _thisNode.data as InferredBeliefNodeData;
+
+  if (_sourceNodeId === data.inferredBelief.left) data.inferredBelief.left = undefined;
+  if (_sourceNodeId === data.inferredBelief.right) data.inferredBelief.right = undefined;
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function InferredBeliefDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+export const InferredBeliefTooltip = `
+  Combines two beliefs into a single belief using logical inference, 
+  the node can be toggled between using "AND" and "OR" mode for inference`;
+/**
+ * Defines how an InferredBelief node should be rendered
+ * @param {NodeProps<InferredBeliefNode>} props - Node properties provided by React Flow, including `id` and `data`.
+ * @returns The rendered InferredBeliefNode React element. (React.JSX.Element)
+ */
+export default function InferredBeliefNode(props: NodeProps<InferredBeliefNode>) {
+  const data = props.data;
+  const { updateNodeData } = useFlowStore();
+  // start of as an AND operator, true: "AND", false: "OR"
+  const [enforceAllBeliefs, setEnforceAllBeliefs] = useState(true);
+
+  // used to toggle operator
+  function onToggle() {
+    const newOperator = !enforceAllBeliefs; // compute the new value
+    setEnforceAllBeliefs(newOperator);
+
+    updateNodeData(props.id, {
+      ...data,
+      inferredBelief: {
+        ...data.inferredBelief,
+        operator: enforceAllBeliefs,
+      }
+    });
+  }
+
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodeInferredBelief}`}>
+        {/* The checkbox used to toggle the operator between 'AND' and 'OR' */}
+        <label className={switchStyles.operatorSwitch}>
+          <input
+            type="checkbox"
+            checked={data.inferredBelief.operator}
+            onChange={onToggle}
+          />
+          <div className={switchStyles.switchVisual}></div>
+          <div className={switchStyles.switchLabels}>
+            <span title={"Belief is fulfilled if either of the supplied beliefs is true"}>OR</span>
+            <span title={"Belief is fulfilled if all of the supplied beliefs are true"}>AND</span>
+          </div>
+        </label>
+
+
+        {/* outgoing connections */}
+        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromType(["norm", "trigger"]),
+          noBeliefCycles,
+          noMatchingLeftRightBelief
+        ]}/>
+
+        {/* incoming connections */}
+        <SingleConnectionHandle type="target" position={Position.Left} style={{top: '30%'}} id="beliefLeft" rules={[
+          allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
+          noBeliefCycles,
+          noMatchingLeftRightBelief
+        ]}/>
+        <SingleConnectionHandle type="target" position={Position.Left} style={{top: '70%'}} id="beliefRight" rules={[
+          allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
+          noBeliefCycles,
+          noMatchingLeftRightBelief
+        ]}/>
+      </div>
+    </>
+  );
+};
+
+/**
+ * Reduces each BasicBelief, including its children down into its core data.
+ * @param {Node} node - The BasicBelief node to reduce.
+ * @param {Node[]} nodes - The list of all nodes in the current flow graph.
+ * @returns A simplified object containing the node label and its list of BasicBeliefs.
+ */
+export function InferredBeliefReduce(node: Node, nodes: Node[]) {
+  const data = node.data as InferredBeliefNodeData;
+  const leftBelief = nodes.find((node) => node.id === data.inferredBelief.left);
+  const rightBelief = nodes.find((node) => node.id === data.inferredBelief.right);
+
+  if (!leftBelief) { throw new Error("No Left belief found")}
+  if (!rightBelief) { throw new Error("No Right Belief found")}
+
+  const result: Record<string, unknown> = {
+    id: node.id,
+    left: BeliefGlobalReduce(leftBelief, nodes),
+    operator: data.inferredBelief.operator ? "AND" : "OR",
+    right: BeliefGlobalReduce(rightBelief, nodes),
+  };
+
+  return result
+}

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

@@ -9,7 +9,7 @@ import { TextField } from '../../../../components/TextField';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import { BasicBeliefReduce } from './BasicBeliefNode';
+import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
 
 /**
  * The default data dot a phase node
@@ -81,7 +81,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
         allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
       ]}/>
       <SingleConnectionHandle type="target" position={Position.Bottom} id="NormBeliefs" rules={[
-        allowOnlyConnectionsFromType(["basic_belief"])
+        allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"])
       ]}/>
     </div>
   </>;
@@ -105,11 +105,10 @@ export function NormReduce(node: Node, nodes: Node[]) {
   };
 
   if (data.condition) {
-    const reducer = BasicBeliefReduce; // TODO: also add inferred.
     const conditionNode = nodes.find((node) => node.id === data.condition);
     // In case something went wrong, and our condition doesn't actually exist;
     if (conditionNode == undefined) return result;
-    result["condition"] = reducer(conditionNode, nodes)
+    result["condition"] = BeliefGlobalReduce(conditionNode, nodes)
   }
   return result
 }
@@ -126,7 +125,7 @@ export const NormTooltip = `
 export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
   const data = _thisNode.data as NormNodeData;
   // If we got a belief connected, this is the condition for the norm.
-  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) {
+  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && ['basic_belief', 'inferred_belief'].includes(node.type!)))) {
       data.condition = _sourceNodeId;
     }
 }

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

@@ -9,8 +9,8 @@ import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleB
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import {PlanReduce, type Plan } from '../components/Plan';
-import PlanEditorDialog from '../components/PlanEditor';  
-import { BasicBeliefReduce } from './BasicBeliefNode';
+import PlanEditorDialog from '../components/PlanEditor';
+import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
 import type { GoalNode } from './GoalNode.tsx';
 import { defaultPlan } from '../components/Plan.default.ts';
 import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
@@ -50,9 +50,9 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
   const setName= (value: string) => {
     updateNodeData(props.id, {...data, name: value})
   }
-  
+
   return <>
-  
+
     <Toolbar nodeId={props.id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
       <TextField
@@ -70,9 +70,9 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
         type="target"
         position={Position.Bottom}
         id="TriggerBeliefs"
-        style={{ left: '40%' }} 
+        style={{ left: '40%' }}
         rules={[
-          allowOnlyConnectionsFromType(['basic_belief']),
+          allowOnlyConnectionsFromType(["basic_belief","inferred_belief"]),
         ]}
       />
       
@@ -102,13 +102,13 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
 /**
  * Reduces each Trigger, including its children down into its core data.
  * @param node - The Trigger node to reduce.
- * @param _nodes - The list of all nodes in the current flow graph.
+ * @param nodes - The list of all nodes in the current flow graph.
  * @returns A simplified object containing the node label and its list of triggers.
  */
 export function TriggerReduce(node: Node, nodes: Node[]) {
   const data = node.data as TriggerNodeData;
   const conditionNode = data.condition ? nodes.find((n)=>n.id===data.condition) : undefined
-  const conditionData = conditionNode ? BasicBeliefReduce(conditionNode, nodes) : ""
+  const conditionData = conditionNode ? BeliefGlobalReduce(conditionNode, nodes) : ""
   return {
     id: node.id,
     name: node.data.name,
@@ -136,7 +136,7 @@ export function TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string)
   const otherNode = nodes.find((x) => x.id === _sourceNodeId)
   if (!otherNode) return;
 
-  if (otherNode.type === 'basic_belief' /* TODO: Add the option for an inferred belief */) {
+  if (['basic_belief', 'inferred_belief'].includes(otherNode.type!)) {
       data.condition = _sourceNodeId;
   }
 
@@ -172,7 +172,7 @@ export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: strin
   const data = _thisNode.data as TriggerNodeData;
     // remove if the target of disconnection was our condition
     if (_sourceNodeId == data.condition) data.condition = undefined
-    
+
   data.plan = deleteGoalInPlanByID(structuredClone(data.plan) as Plan, _sourceNodeId)
 }