Merge branch 'feat/monitoringpage-pim' into feat/monitoringpage
This commit is contained in:
Pim Hutting
@@ -248,3 +248,11 @@ button.no-button {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center-x {
|
||||
display: flex;
|
||||
justify-content: center; /* horizontal centering */
|
||||
text-align: center; /* center multi-line text */
|
||||
width: 100%; /* allow it to stretch */
|
||||
flex-wrap: wrap; /* optional: let text wrap naturally */
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import VisProg from "./pages/VisProgPage/VisProg.tsx";
|
||||
import {useState} from "react";
|
||||
import Logging from "./components/Logging/Logging.tsx";
|
||||
|
||||
|
||||
function App(){
|
||||
const [showLogs, setShowLogs] = useState(false);
|
||||
|
||||
|
||||
75
src/components/MultilineTextField.tsx
Normal file
75
src/components/MultilineTextField.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import styles from "./TextField.module.css";
|
||||
|
||||
export function MultilineTextField({
|
||||
value = "",
|
||||
setValue,
|
||||
placeholder,
|
||||
className,
|
||||
id,
|
||||
ariaLabel,
|
||||
invalid = false,
|
||||
minRows = 3,
|
||||
}: {
|
||||
value: string;
|
||||
setValue: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
id?: string;
|
||||
ariaLabel?: string;
|
||||
invalid?: boolean;
|
||||
minRows?: number;
|
||||
}) {
|
||||
const [readOnly, setReadOnly] = useState(true);
|
||||
const [inputValue, setInputValue] = useState(value);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(value);
|
||||
}, [value]);
|
||||
|
||||
// Auto-grow logic
|
||||
useEffect(() => {
|
||||
const el = textareaRef.current;
|
||||
if (!el) return;
|
||||
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${el.scrollHeight}px`;
|
||||
}, [inputValue]);
|
||||
|
||||
const onCommit = () => {
|
||||
setReadOnly(true);
|
||||
setValue(inputValue);
|
||||
};
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
(e.target as HTMLTextAreaElement).blur();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
rows={minRows}
|
||||
placeholder={placeholder}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onFocus={() => setReadOnly(false)}
|
||||
onBlur={onCommit}
|
||||
onKeyDown={onKeyDown}
|
||||
readOnly={readOnly}
|
||||
id={id}
|
||||
aria-label={ariaLabel}
|
||||
className={`
|
||||
${readOnly ? "drag" : "nodrag"}
|
||||
flex-1
|
||||
${styles.textField}
|
||||
${styles.multiline}
|
||||
${invalid ? styles.invalid : ""}
|
||||
${className ?? ""}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,8 @@
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5pt;
|
||||
padding: 4px 8px;
|
||||
max-width: 50vw;
|
||||
min-width: 10vw;
|
||||
outline: none;
|
||||
background-color: canvas;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
@@ -25,3 +27,13 @@
|
||||
.text-field:read-only:hover:not(.invalid) {
|
||||
border-color: color-mix(in srgb, canvas, #777 10%);
|
||||
}
|
||||
|
||||
.multiline {
|
||||
resize: none; /* no manual resizing */
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden; /* needed for auto-grow */
|
||||
max-width: 100%;
|
||||
width: 95%;
|
||||
min-width: 95%;
|
||||
}
|
||||
@@ -63,7 +63,7 @@ export function RealtimeTextField({
|
||||
readOnly={readOnly}
|
||||
id={id}
|
||||
// ReactFlow uses the "drag" / "nodrag" classes to enable / disable dragging of nodes
|
||||
className={`${readOnly ? "drag" : "nodrag"} ${styles.textField} ${invalid ? styles.invalid : ""} ${className}`}
|
||||
className={`${readOnly ? "drag" : "nodrag"} flex-1 ${styles.textField} ${invalid ? styles.invalid : ""} ${className}`}
|
||||
aria-label={ariaLabel}
|
||||
/>;
|
||||
}
|
||||
|
||||
@@ -1,25 +1,113 @@
|
||||
import { useState } from 'react'
|
||||
import React, { useState } from 'react';
|
||||
|
||||
/**
|
||||
* A minimal counter component that demonstrates basic React state handling.
|
||||
*
|
||||
* Maintains an internal count value and provides buttons to increment and reset it.
|
||||
*
|
||||
* @returns A JSX element rendering the counter UI.
|
||||
*/
|
||||
function Counter() {
|
||||
/** The current counter value. */
|
||||
const [count, setCount] = useState(0)
|
||||
export default function Counter() {
|
||||
const [customText, setCustomText] = useState("");
|
||||
const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
|
||||
|
||||
// Reusable helper to talk to the backend
|
||||
const send = async (type: string, context: string) => {
|
||||
try {
|
||||
await fetch("http://localhost:8000/button_pressed", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ type, context }),
|
||||
});
|
||||
// Backticks restored here:
|
||||
console.log(`Sent ${type}: ${context}`);
|
||||
} catch (err) {
|
||||
// Backticks restored here:
|
||||
console.error(`Error sending ${type}:`, err);
|
||||
}
|
||||
};
|
||||
|
||||
function list_generator(header: string, items: string[]) {
|
||||
return (
|
||||
<div style={{ flex: 1, minWidth: '200px' }}>
|
||||
<strong style={{ display: 'block', marginBottom: '10px', borderBottom: '1px solid #eee' }}>{header}</strong>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
{items.map((item, index) => (
|
||||
<li key={index} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '8px',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
<span>{item}</span>
|
||||
<button
|
||||
onClick={() => send("override", "2")}
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
padding: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px'
|
||||
}}
|
||||
title="Send Override 2"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<button className='reset' onClick={() => setCount(0)}>
|
||||
Reset Counter
|
||||
</button>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
|
||||
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={customText}
|
||||
onChange={(e) => setCustomText(e.target.value)}
|
||||
placeholder="Type something for Pepper to say..."
|
||||
style={{ padding: '8px', flex: 1 }}
|
||||
/>
|
||||
<button onClick={() => send("speech", customText)} style={{ padding: '8px 16px' }}>
|
||||
Say Custom Text
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button onClick={() => send("speech", "Hello, I'm Pepper")}>
|
||||
"Hello, I'm Pepper"
|
||||
</button>
|
||||
<button onClick={() => send("speech", "Could you repeat that please")}>
|
||||
"Repeat please"
|
||||
</button>
|
||||
<button onClick={() => send("speech", "Tell me something about yourself")}>
|
||||
"About yourself"
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
|
||||
<label htmlFor="gesture-select">Select Gesture:</label>
|
||||
<select
|
||||
id="gesture-select"
|
||||
value={selectedGesture}
|
||||
onChange={(e) => setSelectedGesture(e.target.value)}
|
||||
style={{ padding: '8px', borderRadius: '4px', flex: 1 }}
|
||||
>
|
||||
<option value="animations/Stand/BodyTalk/Speaking/BodyTalk_1">Body Talk 1</option>
|
||||
<option value="animations/Stand/Gestures/Thinking_8">Thinking "8"</option>
|
||||
<option value="animations/Stand/Gestures/Thinking_1">Thinking "1"</option>
|
||||
<option value="animations/Stand/Emotions/Positive/Happy_1">Happy</option>
|
||||
</select>
|
||||
<button onClick={() => send("gesture", selectedGesture)} style={{ padding: '8px 16px' }}>
|
||||
Actuate Gesture
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
|
||||
{list_generator("Goals to complete:", ["Greet user", "Introduce self", "Ask for name"])}
|
||||
{list_generator("Conditional norms:", ["If {user_tired}, be less energetic", "If {play_mundo}, go where you please"])}
|
||||
{list_generator("Activate triggers:", ["If {user_thirsty}, offer drink", "If {name == Karen}, be triggered"])}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Counter
|
||||
);
|
||||
}
|
||||
@@ -70,8 +70,21 @@ button:focus-visible {
|
||||
background-color: #ffffff;
|
||||
|
||||
--accent-color: #00AAAA;
|
||||
--select-color: rgba(gray);
|
||||
|
||||
--dropdown-menu-background-color: rgb(247, 247, 247);
|
||||
--dropdown-menu-border: rgba(207, 207, 207, 0.986);
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #ffffff;
|
||||
--select-color: rgba(gray);
|
||||
--dropdown-menu-background-color: rgba(39, 39, 39, 0.986);
|
||||
--dropdown-menu-border: rgba(65, 65, 65, 0.986);
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import styles from './MonitoringPage.module.css';
|
||||
|
||||
/**
|
||||
* HELPER: Unified sender function
|
||||
* In a real app, you might move this to a /services or /hooks folder
|
||||
*/
|
||||
const sendUserInterrupt = async (type: string, context: string) => {
|
||||
try {
|
||||
@@ -115,42 +114,64 @@ interface StatusListProps {
|
||||
title: string;
|
||||
items: StatusItem[];
|
||||
type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
|
||||
activeIds: Record<string, boolean>;
|
||||
currentGoalIndex?: number;
|
||||
}
|
||||
|
||||
// --- STATUS LIST COMPONENT ---
|
||||
export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
|
||||
export const StatusList: React.FC<StatusListProps> = ({
|
||||
title,
|
||||
items,
|
||||
type,
|
||||
activeIds,
|
||||
currentGoalIndex // Destructure this prop
|
||||
}) => {
|
||||
return (
|
||||
<section className={styles.phaseBox}>
|
||||
<h3>{title}</h3>
|
||||
<ul>
|
||||
{items.length > 0 ? (
|
||||
items.map((item, idx) => {
|
||||
const isAchieved = item.achieved;
|
||||
const showIndicator = type !== 'norm';
|
||||
const canOverride = showIndicator && !isAchieved;
|
||||
{items.map((item, idx) => {
|
||||
const isActive = !!activeIds[item.id];
|
||||
const showIndicator = type !== 'norm';
|
||||
const canOverride = showIndicator && !isActive;
|
||||
|
||||
return (
|
||||
<li key={item.id ?? idx} className={styles.statusItem}>
|
||||
{showIndicator && (
|
||||
<span
|
||||
className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
|
||||
onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
|
||||
title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
|
||||
style={{ cursor: canOverride ? 'pointer' : 'default' }}
|
||||
>
|
||||
{isAchieved ? "✔️" : "❌"}
|
||||
</span>
|
||||
)}
|
||||
// HIGHLIGHT LOGIC:
|
||||
// If this is the "Goals" list, check if the current index matches
|
||||
const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
|
||||
|
||||
<span className={styles.itemDescription}>
|
||||
{item.description || item.label || item.norm}
|
||||
const handleOverrideClick = () => {
|
||||
if (!canOverride) return;
|
||||
sendUserInterrupt("override", String(item.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<li key={item.id ?? idx} className={styles.statusItem}>
|
||||
{showIndicator && (
|
||||
<span
|
||||
className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
|
||||
onClick={handleOverrideClick}
|
||||
>
|
||||
{isActive ? "✔️" : "❌"}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
|
||||
)}
|
||||
)}
|
||||
<span
|
||||
className={styles.itemDescription}
|
||||
style={{
|
||||
// Visual Feedback
|
||||
textDecoration: isCurrentGoal ? 'underline' : 'none',
|
||||
fontWeight: isCurrentGoal ? 'bold' : 'normal',
|
||||
color: isCurrentGoal ? '#007bff' : 'inherit',
|
||||
backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
|
||||
padding: isCurrentGoal ? '2px 4px' : '0',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
{item.description || item.label || item.norm}
|
||||
{isCurrentGoal && " (Current)"}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -106,8 +106,31 @@
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--panel-shadow);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
|
||||
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.phaseBox ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.phaseBox ul::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.phaseBox ul::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.phaseOverviewText {
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
import React, { use } from 'react';
|
||||
import styles from './MonitoringPage.module.css';
|
||||
import useProgramStore from "../../utils/programStore.ts";
|
||||
import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './Components';
|
||||
import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
|
||||
|
||||
type Goal = { id?: string | number; description?: string; achieved?: boolean };
|
||||
type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
|
||||
type Norm = { id?: string | number; norm?: string };
|
||||
import { nextPhase, useExperimentLogger, pauseExperiment, playExperiment, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
|
||||
|
||||
import type { GoalNodeData } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx';
|
||||
import type { TriggerNodeData } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx';
|
||||
import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx';
|
||||
|
||||
const MonitoringPage: React.FC = () => {
|
||||
const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
|
||||
@@ -17,10 +16,72 @@ const MonitoringPage: React.FC = () => {
|
||||
|
||||
// Can be used to block actions until feedback from CB.
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [activeIds, setActiveIds] = React.useState<Record<string, boolean>>({});
|
||||
const [goalIndex, setGoalIndex] = React.useState(0);
|
||||
const [isPlaying, setIsPlaying] = React.useState(false);
|
||||
|
||||
const phaseIds = getPhaseIds();
|
||||
const [phaseIndex, _] = React.useState(0);
|
||||
|
||||
const [phaseIndex, setPhaseIndex] = React.useState(0);
|
||||
|
||||
const isFinished = phaseIndex >= phaseIds.length; //determines if experiment is over
|
||||
|
||||
const handleStreamUpdate = React.useCallback((data: any) => {
|
||||
// Check for phase updates
|
||||
if (data.type === 'phase_update' && data.phase_id) {
|
||||
const allIds = getPhaseIds();
|
||||
const newIndex = allIds.indexOf(data.phase_id);
|
||||
if (newIndex !== -1) {
|
||||
setPhaseIndex(newIndex);
|
||||
setGoalIndex(0); //when phase change we reset the index
|
||||
}
|
||||
}
|
||||
else if (data.type === 'goal_update') {
|
||||
const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as any[];
|
||||
const gIndex = currentPhaseGoals.findIndex((g: any) => g.id === data.id);
|
||||
|
||||
if (gIndex !== -1) {
|
||||
//set current goal to the goal that is just started
|
||||
setGoalIndex(gIndex);
|
||||
|
||||
// All previous goals are set to "active" which means they are achieved
|
||||
setActiveIds((prev) => {
|
||||
const nextState = { ...prev };
|
||||
|
||||
// We loop until i is LESS than gIndex.
|
||||
// This leaves currentPhaseGoals[gIndex] as isActive: false.
|
||||
for (let i = 0; i < gIndex; i++) {
|
||||
nextState[currentPhaseGoals[i].id ] = true;
|
||||
}
|
||||
|
||||
return nextState;
|
||||
});
|
||||
|
||||
console.log(`Now pursuing goal: ${data.id}. Previous goals marked achieved.`);
|
||||
}
|
||||
}
|
||||
|
||||
else if (data.type === 'trigger_update') {
|
||||
setActiveIds((prev) => ({
|
||||
...prev,
|
||||
[data.id]: data.achieved // data.id is de key, achieved is true/false
|
||||
}));
|
||||
}
|
||||
else if (data.type === 'cond_norms_state_update') {
|
||||
setActiveIds((prev) => {
|
||||
const nextState = { ...prev };
|
||||
|
||||
data.norms.forEach((normUpdate: { id: string; active: boolean }) => {
|
||||
nextState[normUpdate.id] = normUpdate.active;
|
||||
});
|
||||
|
||||
return nextState;
|
||||
});
|
||||
console.log("Updated conditional norms state:", data.norms);
|
||||
}
|
||||
}, [getPhaseIds]);
|
||||
|
||||
useExperimentLogger(handleStreamUpdate);
|
||||
|
||||
if (phaseIds.length === 0) {
|
||||
return <p className={styles.empty}>No program loaded.</p>;
|
||||
@@ -28,9 +89,72 @@ const MonitoringPage: React.FC = () => {
|
||||
|
||||
const phaseId = phaseIds[phaseIndex];
|
||||
|
||||
const goals = getGoalsInPhase(phaseId) as Goal[];
|
||||
const triggers = getTriggersInPhase(phaseId) as Trigger[];
|
||||
const norms = getNormsInPhase(phaseId) as Norm[];
|
||||
const goals = (getGoalsInPhase(phaseId) as any[]).map(g => ({
|
||||
...g,
|
||||
label: g.name,
|
||||
achieved: activeIds[g.id] ?? false
|
||||
}));
|
||||
|
||||
|
||||
const triggers = (getTriggersInPhase(phaseId) as any[]).map(t => ({
|
||||
...t,
|
||||
label: (() => {
|
||||
|
||||
let prefix = "";
|
||||
if (t.condition?.keyword) {
|
||||
prefix = `if keywords said: "${t.condition.keyword}"`;
|
||||
} else if (t.condition?.name) {
|
||||
prefix = `if LLM belief: ${t.condition.name}`;
|
||||
} else { //fallback
|
||||
prefix = t.label || "Trigger";
|
||||
}
|
||||
|
||||
|
||||
const stepLabels = t.plan?.steps?.map((step: any) => {
|
||||
if (step.text) {
|
||||
return `say: "${step.text}"`;
|
||||
}
|
||||
if (step.gesture) {
|
||||
return `perform gesture: ${step.gesture.name || step.gesture.type}`;
|
||||
}
|
||||
if (step.goal) {
|
||||
return `perform LLM: ${step.goal}`;
|
||||
}
|
||||
return "Action"; // Fallback
|
||||
}) || [];
|
||||
|
||||
const planText = stepLabels.length > 0
|
||||
? `➔ Do: ${stepLabels.join(", ")}`
|
||||
: "➔ (No actions set)";
|
||||
|
||||
return `${prefix} ${planText}`;
|
||||
})(),
|
||||
isActive: activeIds[t.id] ?? false
|
||||
}));
|
||||
|
||||
const norms = (getNormsInPhase(phaseId) as NormNodeData[])
|
||||
.filter(n => !n.condition)
|
||||
.map(n => ({
|
||||
...n,
|
||||
label: n.norm,
|
||||
}));
|
||||
const conditionalNorms = (getNormsInPhase(phaseId) as any[])
|
||||
.filter(n => !!n.condition) // Only items with a condition
|
||||
.map(n => ({
|
||||
...n,
|
||||
label: (() => {
|
||||
let prefix = "";
|
||||
if (n.condition?.keyword) {
|
||||
prefix = `if keywords said: "${n.condition.keyword}"`;
|
||||
} else if (n.condition?.name) {
|
||||
prefix = `if LLM belief: ${n.condition.name}`;
|
||||
}
|
||||
|
||||
|
||||
return `${prefix} ➔ Norm: ${n.norm}`;
|
||||
})(),
|
||||
achieved: activeIds[n.id] ?? false
|
||||
}));
|
||||
|
||||
// Handle logic of 'next' button.
|
||||
|
||||
@@ -67,13 +191,19 @@ const MonitoringPage: React.FC = () => {
|
||||
<header className={styles.experimentOverview}>
|
||||
<div className={styles.phaseName}>
|
||||
<h2>Experiment Overview</h2>
|
||||
<p><strong>Phase name:</strong> Rhyming fish</p>
|
||||
<p><strong>Phase</strong> {` ${phaseIndex + 1}`} </p>
|
||||
<div className={styles.phaseProgress}>
|
||||
<span className={`${styles.phase} ${styles.completed}`}>1</span>
|
||||
<span className={`${styles.phase} ${styles.completed}`}>2</span>
|
||||
<span className={`${styles.phase} ${styles.current}`}>3</span>
|
||||
<span className={styles.phase}>4</span>
|
||||
<span className={styles.phase}>5</span>
|
||||
{phaseIds.map((id, index) => (
|
||||
<span
|
||||
key={id}
|
||||
className={`${styles.phase} ${
|
||||
index < phaseIndex ? styles.completed :
|
||||
index === phaseIndex ? styles.current : ""
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -140,15 +270,18 @@ const MonitoringPage: React.FC = () => {
|
||||
<section className={styles.phaseOverviewText}>
|
||||
<h3>Phase Overview</h3>
|
||||
</section>
|
||||
|
||||
<StatusList title="Goals" items={goals} type="goal" />
|
||||
<StatusList title="Triggers" items={triggers} type="trigger" />
|
||||
<StatusList title="Norms" items={norms} type="norm" />
|
||||
<StatusList
|
||||
title="Conditional Norms"
|
||||
items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]}
|
||||
type="cond_norm"
|
||||
/>
|
||||
{isFinished ? (
|
||||
<div className={styles.finishedMessage}>
|
||||
<p> All phases have been successfully completed.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} currentGoalIndex={goalIndex} />
|
||||
<StatusList title="Triggers" items={triggers} type="trigger" activeIds={activeIds} />
|
||||
<StatusList title="Norms" items={norms} type="norm" activeIds={activeIds} />
|
||||
<StatusList title="Conditional Norms" items={conditionalNorms} type="cond_norm" activeIds={activeIds} />
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* LOGS */}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
|
||||
|
||||
|
||||
@@ -62,3 +63,35 @@ export async function playExperiment(): Promise<void> {
|
||||
const context = "false"
|
||||
sendAPICall(type, context)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A hook that listens to the experiment stream and logs data to the console.
|
||||
* It does not render anything.
|
||||
*/
|
||||
export function useExperimentLogger(onUpdate?: (data: any) => void) {
|
||||
useEffect(() => {
|
||||
const eventSource = new EventSource(`${API_BASE}`);
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const parsedData = JSON.parse(event.data);
|
||||
if (onUpdate) {
|
||||
console.log(event.data);
|
||||
onUpdate(parsedData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("Stream parse error:", err);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
console.error("SSE Connection Error:", err);
|
||||
eventSource.close();
|
||||
};
|
||||
|
||||
return () => {
|
||||
eventSource.close();
|
||||
};
|
||||
}, [onUpdate]);
|
||||
}
|
||||
@@ -71,6 +71,11 @@
|
||||
filter: drop-shadow(0 0 0.25rem red);
|
||||
}
|
||||
|
||||
.node-basic_belief {
|
||||
outline: plum solid 2pt;
|
||||
filter: drop-shadow(0 0 0.25rem plum);
|
||||
}
|
||||
|
||||
.draggable-node {
|
||||
padding: 3px 10px;
|
||||
background-color: canvas;
|
||||
@@ -127,6 +132,19 @@
|
||||
filter: drop-shadow(0 0 0.25rem red);
|
||||
}
|
||||
|
||||
.draggable-node-basic_belief {
|
||||
padding: 3px 10px;
|
||||
background-color: canvas;
|
||||
border-radius: 5pt;
|
||||
outline: plum solid 2pt;
|
||||
filter: drop-shadow(0 0 0.25rem plum);
|
||||
}
|
||||
|
||||
.planNoIterate {
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.backButton {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--panel-shadow);
|
||||
|
||||
@@ -9,8 +9,10 @@ import {
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import {useEffect, useState} from "react";
|
||||
import {useShallow} from 'zustand/react/shallow';
|
||||
import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
|
||||
import useProgramStore from "../../utils/programStore.ts";
|
||||
import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
|
||||
import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.tsx";
|
||||
import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
|
||||
import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
|
||||
import styles from './VisProg.module.css'
|
||||
@@ -50,7 +52,8 @@ const selector = (state: FlowState) => ({
|
||||
undo: state.undo,
|
||||
redo: state.redo,
|
||||
beginBatchAction: state.beginBatchAction,
|
||||
endBatchAction: state.endBatchAction
|
||||
endBatchAction: state.endBatchAction,
|
||||
scrollable: state.scrollable
|
||||
});
|
||||
|
||||
// --| define ReactFlow editor |--
|
||||
@@ -74,7 +77,8 @@ const VisProgUI = () => {
|
||||
undo,
|
||||
redo,
|
||||
beginBatchAction,
|
||||
endBatchAction
|
||||
endBatchAction,
|
||||
scrollable
|
||||
} = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
|
||||
|
||||
// adds ctrl+z and ctrl+y support to respectively undo and redo actions
|
||||
@@ -103,6 +107,7 @@ const VisProgUI = () => {
|
||||
onConnect={onConnect}
|
||||
onNodeDragStart={beginBatchAction}
|
||||
onNodeDragStop={endBatchAction}
|
||||
preventScrolling={scrollable}
|
||||
snapToGrid
|
||||
fitView
|
||||
proOptions={{hideAttribution: true}}
|
||||
@@ -166,14 +171,15 @@ function runProgramm() {
|
||||
*/
|
||||
function graphReducer() {
|
||||
const { nodes } = useFlowStore.getState();
|
||||
return nodes
|
||||
.filter((n) => n.type == 'phase')
|
||||
return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
|
||||
.map((n) => {
|
||||
const reducer = NodeReduces['phase'];
|
||||
return reducer(n, nodes)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* houses the entire page, so also UI elements
|
||||
* that are not a part of the Visual Programming UI
|
||||
|
||||
@@ -39,10 +39,10 @@ export const UndoRedo = (
|
||||
* @param {BaseFlowState} state - the current state of the editor
|
||||
* @returns {FlowSnapshot} - returns a snapshot of the current editor state
|
||||
*/
|
||||
const getSnapshot = (state : BaseFlowState) : FlowSnapshot => ({
|
||||
const getSnapshot = (state : BaseFlowState) : FlowSnapshot => (structuredClone({
|
||||
nodes: state.nodes,
|
||||
edges: state.edges
|
||||
});
|
||||
}));
|
||||
|
||||
const initialState = config(set, get, api);
|
||||
|
||||
|
||||
110
src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
Normal file
110
src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import {type Connection} from "@xyflow/react";
|
||||
import {useEffect} from "react";
|
||||
import useFlowStore from "./VisProgStores.tsx";
|
||||
|
||||
export type ConnectionContext = {
|
||||
connectionCount: number;
|
||||
source: {
|
||||
id: string;
|
||||
handleId: string;
|
||||
}
|
||||
target: {
|
||||
id: string;
|
||||
handleId: string;
|
||||
}
|
||||
}
|
||||
|
||||
export type HandleRule = (
|
||||
connection: Connection,
|
||||
context: ConnectionContext
|
||||
) => RuleResult;
|
||||
|
||||
/**
|
||||
* A RuleResult describes the outcome of validating a HandleRule
|
||||
*
|
||||
* if a rule is not satisfied, the RuleResult includes a message that is used inside a tooltip
|
||||
* that tells the user why their attempted connection is not possible
|
||||
*/
|
||||
export type RuleResult =
|
||||
| { isSatisfied: true }
|
||||
| { isSatisfied: false, message: string };
|
||||
|
||||
/**
|
||||
* default RuleResults, can be used to create more readable handleRule definitions
|
||||
*/
|
||||
export const ruleResult = {
|
||||
satisfied: { isSatisfied: true } as RuleResult,
|
||||
unknownError: {isSatisfied: false, message: "Unknown Error" } as RuleResult,
|
||||
notSatisfied: (message: string) : RuleResult => { return {isSatisfied: false, message: message } }
|
||||
}
|
||||
|
||||
|
||||
const evaluateRules = (
|
||||
rules: HandleRule[],
|
||||
connection: Connection,
|
||||
context: ConnectionContext
|
||||
) : RuleResult => {
|
||||
// evaluate the rules and check if there is at least one unsatisfied rule
|
||||
const failedRule = rules
|
||||
.map(rule => rule(connection, context))
|
||||
.find(result => !result.isSatisfied);
|
||||
|
||||
return failedRule ? ruleResult.notSatisfied(failedRule.message) : ruleResult.satisfied;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* !DOCUMENTATION NOT FINISHED!
|
||||
*
|
||||
* - The output is a single RuleResult, meaning we only show one error message.
|
||||
* Error messages are prioritised by listOrder; Thus, if multiple HandleRules evaluate to false,
|
||||
* we only send the error message of the first failed rule in the target's registered list of rules.
|
||||
*
|
||||
* @param {string} nodeId
|
||||
* @param {string} handleId
|
||||
* @param type
|
||||
* @param {HandleRule[]} rules
|
||||
* @returns {(c: Connection) => RuleResult} a function that validates an attempted connection
|
||||
*/
|
||||
export function useHandleRules(
|
||||
nodeId: string,
|
||||
handleId: string,
|
||||
type: "source" | "target",
|
||||
rules: HandleRule[],
|
||||
) : (c: Connection) => RuleResult {
|
||||
const edges = useFlowStore.getState().edges;
|
||||
const registerRules = useFlowStore((state) => state.registerRules);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
registerRules(nodeId, handleId, rules);
|
||||
// the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,
|
||||
// however this would result in an infinite loop because it would change one of its own dependencies
|
||||
// so we only use those dependencies that we don't change ourselves
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [handleId, nodeId, registerRules]);
|
||||
|
||||
return (connection: Connection) => {
|
||||
// inside this function we consider the target to be the target of the isValidConnection event
|
||||
// and not the target in the actual connection
|
||||
const { target, targetHandle } = type === "source"
|
||||
? connection
|
||||
: { target: connection.source, targetHandle: connection.sourceHandle };
|
||||
|
||||
if (!targetHandle) {throw new Error("No target handle was provided");}
|
||||
|
||||
const targetConnections = edges.filter(edge => edge.target === target && edge.targetHandle === targetHandle);
|
||||
|
||||
|
||||
// we construct the connectionContext
|
||||
const context: ConnectionContext = {
|
||||
connectionCount: targetConnections.length,
|
||||
source: {id: nodeId, handleId: handleId},
|
||||
target: {id: target, handleId: targetHandle},
|
||||
};
|
||||
const targetRules = useFlowStore.getState().getTargetRules(target, targetHandle);
|
||||
|
||||
// finally we return a function that evaluates all rules using the created context
|
||||
return evaluateRules(targetRules, connection, context);
|
||||
};
|
||||
}
|
||||
45
src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
Normal file
45
src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import {
|
||||
type HandleRule,
|
||||
ruleResult
|
||||
} from "./HandleRuleLogic.ts";
|
||||
import useFlowStore from "./VisProgStores.tsx";
|
||||
|
||||
|
||||
/**
|
||||
* this specifies what types of nodes can make a connection to a handle that uses this rule
|
||||
*/
|
||||
export function allowOnlyConnectionsFromType(nodeTypes: string[]) : HandleRule {
|
||||
return ((_, {source}) => {
|
||||
const sourceType = useFlowStore.getState().nodes.find(node => node.id === source.id)!.type!;
|
||||
return nodeTypes.find(type => sourceType === type)
|
||||
? ruleResult.satisfied
|
||||
: ruleResult.notSatisfied(`the target doesn't allow connections from nodes with type: ${sourceType}`);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* similar to allowOnlyConnectionsFromType,
|
||||
* this is a more specific variant that allows you to restrict connections to specific handles on each nodeType
|
||||
*/
|
||||
//
|
||||
export function allowOnlyConnectionsFromHandle(handles: {nodeType: string, handleId: string}[]) : HandleRule {
|
||||
return ((_, {source}) => {
|
||||
const sourceNode = useFlowStore.getState().nodes.find(node => node.id === source.id)!;
|
||||
return handles.find(handle => sourceNode.type === handle.nodeType && source.handleId === handle.handleId)
|
||||
? ruleResult.satisfied
|
||||
: ruleResult.notSatisfied(`the target doesn't allow connections from nodes with type: ${sourceNode.type}`);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* This rule prevents a node from making a connection between its own handles
|
||||
*/
|
||||
export const noSelfConnections : HandleRule =
|
||||
(connection, _) => {
|
||||
return connection.source !== connection.target
|
||||
? ruleResult.satisfied
|
||||
: ruleResult.notSatisfied("nodes are not allowed to connect to themselves");
|
||||
}
|
||||
|
||||
|
||||
@@ -46,6 +46,8 @@ import TriggerNode, {
|
||||
TriggerReduce
|
||||
} from "./nodes/TriggerNode";
|
||||
import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
|
||||
import BasicBeliefNode, { BasicBeliefConnectionSource, BasicBeliefConnectionTarget, BasicBeliefDisconnectionSource, BasicBeliefDisconnectionTarget, BasicBeliefReduce } from "./nodes/BasicBeliefNode";
|
||||
import { BasicBeliefNodeDefaults } from "./nodes/BasicBeliefNode.default";
|
||||
|
||||
/**
|
||||
* Registered node types in the visual programming system.
|
||||
@@ -60,6 +62,7 @@ export const NodeTypes = {
|
||||
norm: NormNode,
|
||||
goal: GoalNode,
|
||||
trigger: TriggerNode,
|
||||
basic_belief: BasicBeliefNode,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -74,6 +77,7 @@ export const NodeDefaults = {
|
||||
norm: NormNodeDefaults,
|
||||
goal: GoalNodeDefaults,
|
||||
trigger: TriggerNodeDefaults,
|
||||
basic_belief: BasicBeliefNodeDefaults,
|
||||
};
|
||||
|
||||
|
||||
@@ -90,6 +94,7 @@ export const NodeReduces = {
|
||||
norm: NormReduce,
|
||||
goal: GoalReduce,
|
||||
trigger: TriggerReduce,
|
||||
basic_belief: BasicBeliefReduce,
|
||||
}
|
||||
|
||||
|
||||
@@ -107,6 +112,7 @@ export const NodeConnections = {
|
||||
norm: NormConnectionTarget,
|
||||
goal: GoalConnectionTarget,
|
||||
trigger: TriggerConnectionTarget,
|
||||
basic_belief: BasicBeliefConnectionTarget,
|
||||
},
|
||||
Sources: {
|
||||
start: StartConnectionSource,
|
||||
@@ -115,6 +121,7 @@ export const NodeConnections = {
|
||||
norm: NormConnectionSource,
|
||||
goal: GoalConnectionSource,
|
||||
trigger: TriggerConnectionSource,
|
||||
basic_belief: BasicBeliefConnectionSource
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,6 +139,7 @@ export const NodeDisconnections = {
|
||||
norm: NormDisconnectionTarget,
|
||||
goal: GoalDisconnectionTarget,
|
||||
trigger: TriggerDisconnectionTarget,
|
||||
basic_belief: BasicBeliefDisconnectionTarget,
|
||||
},
|
||||
Sources: {
|
||||
start: StartDisconnectionSource,
|
||||
@@ -140,6 +148,7 @@ export const NodeDisconnections = {
|
||||
norm: NormDisconnectionSource,
|
||||
goal: GoalDisconnectionSource,
|
||||
trigger: TriggerDisconnectionSource,
|
||||
basic_belief: BasicBeliefDisconnectionSource,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -151,7 +160,6 @@ export const NodeDisconnections = {
|
||||
export const NodeDeletes = {
|
||||
start: () => false,
|
||||
end: () => false,
|
||||
test: () => false, // Used for coverage of universal/ undefined nodes
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -164,5 +172,5 @@ export const NodesInPhase = {
|
||||
start: () => false,
|
||||
end: () => false,
|
||||
phase: () => false,
|
||||
test: () => false, // Used for coverage of universal/ undefined nodes
|
||||
basic_belief: () => false,
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
type Edge,
|
||||
type XYPosition,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import type { FlowState } from './VisProgTypes';
|
||||
import {
|
||||
NodeDefaults,
|
||||
@@ -28,31 +29,31 @@ import { UndoRedo } from "./EditorUndoRedo.ts";
|
||||
* @param deletable - Optional flag to indicate if the node can be deleted (can be deleted by default).
|
||||
* @returns A fully initialized Node object ready to be added to the flow.
|
||||
*/
|
||||
function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable? : boolean) {
|
||||
const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
|
||||
const newData = {
|
||||
id: id,
|
||||
type: type,
|
||||
position: position,
|
||||
data: data,
|
||||
deletable: deletable,
|
||||
}
|
||||
return {...defaultData, ...newData}
|
||||
function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable?: boolean) {
|
||||
const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
|
||||
return {
|
||||
id,
|
||||
type,
|
||||
position,
|
||||
deletable,
|
||||
data: {
|
||||
...JSON.parse(JSON.stringify(defaultData)),
|
||||
...data,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
//* Initial nodes, created by using createNode. */
|
||||
const initialNodes : Node[] = [
|
||||
createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
|
||||
createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
|
||||
createNode('phase-1', 'phase', {x:200, y:100}, {label: "Phase 1", children : []}),
|
||||
createNode('norms-1', 'norm', {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}),
|
||||
];
|
||||
//* Initial nodes, created by using createNode. */
|
||||
// Start and End don't need to apply the UUID, since they are technically never compiled into a program.
|
||||
const startNode = createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false)
|
||||
const endNode = createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false)
|
||||
const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:200, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null})
|
||||
|
||||
// * Initial edges * /
|
||||
const initialEdges: Edge[] = [
|
||||
{ id: 'start-phase-1', source: 'start', target: 'phase-1' },
|
||||
{ id: 'phase-1-end', source: 'phase-1', target: 'end' },
|
||||
];
|
||||
const initialNodes : Node[] = [startNode, endNode, initialPhaseNode,];
|
||||
|
||||
// Initial edges, leave empty as setting initial edges...
|
||||
// ...breaks logic that is dependent on connection events
|
||||
const initialEdges: Edge[] = [];
|
||||
|
||||
|
||||
/**
|
||||
@@ -70,14 +71,24 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
|
||||
nodes: initialNodes,
|
||||
edges: initialEdges,
|
||||
edgeReconnectSuccessful: true,
|
||||
scrollable: true,
|
||||
|
||||
/**
|
||||
* handles changing the scrollable state of the editor,
|
||||
* this is used to control if scrolling is captured by the editor
|
||||
* or if it's available to other components within the reactFlowProvider
|
||||
* @param {boolean} val - the desired state
|
||||
*/
|
||||
setScrollable: (val) => set({scrollable: val}),
|
||||
|
||||
/**
|
||||
* Handles changes to nodes triggered by ReactFlow.
|
||||
*/
|
||||
onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
|
||||
|
||||
onEdgesDelete: (edges) => {
|
||||
onNodesDelete: (nodes) => nodes.forEach(node => get().unregisterNodeRules(node.id)),
|
||||
|
||||
onEdgesDelete: (edges) => {
|
||||
// we make sure any affected nodes get updated to reflect removal of edges
|
||||
edges.forEach((edge) => {
|
||||
const nodes = get().nodes;
|
||||
@@ -223,6 +234,79 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
|
||||
past: [],
|
||||
future: [],
|
||||
isBatchAction: false,
|
||||
|
||||
// handleRuleRegistry definitions
|
||||
/**
|
||||
* stores registered rules for handle connection validation
|
||||
*/
|
||||
ruleRegistry: new Map(),
|
||||
|
||||
/**
|
||||
* gets the rules registered by that handle described by the given node and handle ids
|
||||
*
|
||||
* @param {string} targetNodeId
|
||||
* @param {string} targetHandleId
|
||||
* @returns {HandleRule[]}
|
||||
*/
|
||||
getTargetRules: (targetNodeId, targetHandleId) => {
|
||||
const key = `${targetNodeId}:${targetHandleId}`;
|
||||
const rules = get().ruleRegistry.get(key);
|
||||
|
||||
// helper function that handles a situation where no rules were registered
|
||||
const missingRulesResponse = () => {
|
||||
console.warn(
|
||||
`No rules were registered for the following handle "${key}"!
|
||||
returning and empty handleRule[] to avoid crashing`);
|
||||
return []
|
||||
}
|
||||
|
||||
return rules
|
||||
? rules
|
||||
: missingRulesResponse()
|
||||
},
|
||||
|
||||
/**
|
||||
* registers a handle's connection rules
|
||||
*
|
||||
* @param {string} nodeId
|
||||
* @param {string} handleId
|
||||
* @param {HandleRule[]} rules
|
||||
*/
|
||||
registerRules: (nodeId, handleId, rules) => {
|
||||
const registry = get().ruleRegistry;
|
||||
registry.set(`${nodeId}:${handleId}`, rules);
|
||||
set({ ruleRegistry: registry }) ;
|
||||
},
|
||||
|
||||
/**
|
||||
* unregisters a handles connection rules
|
||||
*
|
||||
* @param {string} nodeId
|
||||
* @param {string} handleId
|
||||
*/
|
||||
unregisterHandleRules: (nodeId, handleId) => {
|
||||
set( () => {
|
||||
const registry = get().ruleRegistry;
|
||||
registry.delete(`${nodeId}:${handleId}`);
|
||||
return { ruleRegistry: registry };
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* unregisters connection rules for all handles on the given node
|
||||
* used for cleaning up rules on node deletion
|
||||
*
|
||||
* @param {string} nodeId
|
||||
*/
|
||||
unregisterNodeRules: (nodeId) => {
|
||||
set(() => {
|
||||
const registry = get().ruleRegistry;
|
||||
registry.forEach((_,key) => {
|
||||
if (key.startsWith(`${nodeId}:`)) registry.delete(key)
|
||||
})
|
||||
return { ruleRegistry: registry };
|
||||
})
|
||||
}
|
||||
}))
|
||||
);
|
||||
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
// VisProgTypes.ts
|
||||
import type {Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node, OnEdgesDelete} from '@xyflow/react';
|
||||
import type {
|
||||
Edge,
|
||||
OnNodesChange,
|
||||
OnEdgesChange,
|
||||
OnConnect,
|
||||
OnReconnect,
|
||||
Node,
|
||||
OnEdgesDelete,
|
||||
OnNodesDelete
|
||||
} from '@xyflow/react';
|
||||
import type {HandleRule} from "./HandleRuleLogic.ts";
|
||||
import type { NodeTypes } from './NodeRegistry';
|
||||
import type {FlowSnapshot} from "./EditorUndoRedo.ts";
|
||||
|
||||
@@ -23,10 +33,16 @@ export type FlowState = {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
edgeReconnectSuccessful: boolean;
|
||||
scrollable: boolean;
|
||||
|
||||
/** Handler for managing scrollable state */
|
||||
setScrollable: (value: boolean) => void;
|
||||
|
||||
/** Handler for changes to nodes triggered by ReactFlow */
|
||||
onNodesChange: OnNodesChange;
|
||||
|
||||
onNodesDelete: OnNodesDelete;
|
||||
|
||||
onEdgesDelete: OnEdgesDelete;
|
||||
|
||||
/** Handler for changes to edges triggered by ReactFlow */
|
||||
@@ -78,7 +94,9 @@ export type FlowState = {
|
||||
* @param node - the Node object to add
|
||||
*/
|
||||
addNode: (node: Node) => void;
|
||||
} & UndoRedoState & HandleRuleRegistry;
|
||||
|
||||
export type UndoRedoState = {
|
||||
// UndoRedo Types
|
||||
past: FlowSnapshot[];
|
||||
future: FlowSnapshot[];
|
||||
@@ -88,4 +106,27 @@ export type FlowState = {
|
||||
endBatchAction: () => void;
|
||||
undo: () => void;
|
||||
redo: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
export type HandleRuleRegistry = {
|
||||
ruleRegistry: Map<string, HandleRule[]>;
|
||||
|
||||
getTargetRules: (
|
||||
targetNodeId: string,
|
||||
targetHandleId: string
|
||||
) => HandleRule[];
|
||||
|
||||
registerRules: (
|
||||
nodeId: string,
|
||||
handleId: string,
|
||||
rules: HandleRule[]
|
||||
) => void;
|
||||
|
||||
unregisterHandleRules: (
|
||||
nodeId: string,
|
||||
handleId: string
|
||||
) => void;
|
||||
|
||||
// cleans up all registered rules of all handles of the provided node
|
||||
unregisterNodeRules: (nodeId: string) => void
|
||||
}
|
||||
@@ -69,23 +69,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
|
||||
* @param position - The XY position in the flow canvas where the node will appear.
|
||||
*/
|
||||
function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
|
||||
const { nodes, addNode } = useFlowStore.getState();
|
||||
const { addNode } = useFlowStore.getState();
|
||||
|
||||
// Load any predefined data for this node type.
|
||||
const defaultData = NodeDefaults[nodeType] ?? {}
|
||||
|
||||
// Currently, we find out what the Id is by checking the last node and adding one.
|
||||
const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
|
||||
const nextNumber =
|
||||
sameTypeNodes.length > 0
|
||||
? (() => {
|
||||
const lastNode = sameTypeNodes[sameTypeNodes.length - 1];
|
||||
const parts = lastNode.id.split('-');
|
||||
const lastNum = Number(parts[1]);
|
||||
return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
|
||||
})()
|
||||
: 1;
|
||||
const id = `${nodeType}-${nextNumber}`;
|
||||
const id = crypto.randomUUID();
|
||||
|
||||
// Create new node
|
||||
const newNode = {
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
|
||||
.gestureEditor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modeSelector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modeLabel {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toggleContainer {
|
||||
display: flex;
|
||||
background: rgba(78, 78, 78, 0.411);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
padding: 6px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.toggleButton.active {
|
||||
box-shadow: 0 0 1px 0 rgba(9, 255, 0, 0.733);
|
||||
}
|
||||
|
||||
.valueEditor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textInput {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.textInput:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.tagSelector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tagSelect {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background-color: rgba(135, 135, 135, 0.296);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tagSelect:focus {
|
||||
outline: none;
|
||||
border-color: rgb(0, 149, 25);
|
||||
}
|
||||
|
||||
.tagList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
||||
border-radius: 4px;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.tagButton {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid gray;
|
||||
border-radius: 4px;
|
||||
background: var(--primary-rgb);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tagButton:hover {
|
||||
background: gray;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
.tagButton.selected {
|
||||
background: rgba(var(--primary-rgb), 0.5);
|
||||
color: var(--primary-rgb);
|
||||
border-color: rgb(27, 223, 60);
|
||||
}
|
||||
|
||||
.suggestionsDropdownLeft {
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
top: 120px;
|
||||
|
||||
width: 200px;
|
||||
max-height: 20vh;
|
||||
overflow-y: auto;
|
||||
|
||||
background: var(--dropdown-menu-background-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px var(--dropdown-menu-border);
|
||||
}
|
||||
|
||||
.suggestionsDropdownLeft::before {
|
||||
content: "Gesture Suggestions";
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.suggestionItem {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.suggestionItem:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestionItem:hover {
|
||||
background-color: var(--background-hover);
|
||||
}
|
||||
|
||||
.suggestionItem:active {
|
||||
background-color: var(--primary-color-light);
|
||||
}
|
||||
@@ -0,0 +1,611 @@
|
||||
import { useState, useRef } from "react";
|
||||
import styles from './GestureValueEditor.module.css'
|
||||
|
||||
/**
|
||||
* Props for the GestureValueEditor component.
|
||||
* - value: current gesture value (controlled by parent)
|
||||
* - setValue: callback to update the gesture value in parent state
|
||||
* - placeholder: optional placeholder text for the input field
|
||||
*/
|
||||
type GestureValueEditorProps = {
|
||||
value: string;
|
||||
setValue: (value: string) => void;
|
||||
setType: (value: boolean) => void;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* List of high-level gesture "tags".
|
||||
* These are human-readable categories or semantic labels.
|
||||
* In a real app, these would likely be loaded from an external source.
|
||||
*/
|
||||
const GESTURE_TAGS = ["above", "affirmative", "afford", "agitated", "all", "allright", "alright", "any",
|
||||
"assuage", "attemper", "back", "bashful", "beg", "beseech", "blank",
|
||||
"body language", "bored", "bow", "but", "call", "calm", "choose", "choice", "cloud",
|
||||
"cogitate", "cool", "crazy", "disappointed", "down", "earth", "empty", "embarrassed",
|
||||
"enthusiastic", "entire", "estimate", "except", "exalted", "excited", "explain", "far",
|
||||
"field", "floor", "forlorn", "friendly", "front", "frustrated", "gentle", "gift",
|
||||
"give", "ground", "happy", "hello", "her", "here", "hey", "hi", "him", "hopeless",
|
||||
"hysterical", "I", "implore", "indicate", "joyful", "me", "meditate", "modest",
|
||||
"negative", "nervous", "no", "not know", "nothing", "offer", "ok", "once upon a time",
|
||||
"oppose", "or", "pacify", "pick", "placate", "please", "present", "proffer", "quiet",
|
||||
"reason", "refute", "reject", "rousing", "sad", "select", "shamefaced", "show",
|
||||
"show sky", "sky", "soothe", "sun", "supplicate", "tablet", "tall", "them", "there",
|
||||
"think", "timid", "top", "unless", "up", "upstairs", "void", "warm", "winner", "yeah",
|
||||
"yes", "yoo-hoo", "you", "your", "zero", "zestful"];
|
||||
|
||||
/**
|
||||
* List of concrete gesture animation paths.
|
||||
* These represent specific animation assets and are used in "single" mode
|
||||
* with autocomplete-style selection, also would be loaded from an external source.
|
||||
*/
|
||||
const GESTURE_SINGLES = [
|
||||
"animations/Stand/BodyTalk/Listening/Listening_1",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_2",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_3",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_4",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_5",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_6",
|
||||
"animations/Stand/BodyTalk/Listening/Listening_7",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_1",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_10",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_11",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_12",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_13",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_14",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_15",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_16",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_2",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_3",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_4",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_5",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_6",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_7",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_8",
|
||||
"animations/Stand/BodyTalk/Speaking/BodyTalk_9",
|
||||
"animations/Stand/BodyTalk/Thinking/Remember_1",
|
||||
"animations/Stand/BodyTalk/Thinking/Remember_2",
|
||||
"animations/Stand/BodyTalk/Thinking/Remember_3",
|
||||
"animations/Stand/BodyTalk/Thinking/ThinkingLoop_1",
|
||||
"animations/Stand/BodyTalk/Thinking/ThinkingLoop_2",
|
||||
"animations/Stand/Emotions/Negative/Angry_1",
|
||||
"animations/Stand/Emotions/Negative/Angry_2",
|
||||
"animations/Stand/Emotions/Negative/Angry_3",
|
||||
"animations/Stand/Emotions/Negative/Angry_4",
|
||||
"animations/Stand/Emotions/Negative/Anxious_1",
|
||||
"animations/Stand/Emotions/Negative/Bored_1",
|
||||
"animations/Stand/Emotions/Negative/Bored_2",
|
||||
"animations/Stand/Emotions/Negative/Disappointed_1",
|
||||
"animations/Stand/Emotions/Negative/Exhausted_1",
|
||||
"animations/Stand/Emotions/Negative/Exhausted_2",
|
||||
"animations/Stand/Emotions/Negative/Fear_1",
|
||||
"animations/Stand/Emotions/Negative/Fear_2",
|
||||
"animations/Stand/Emotions/Negative/Fearful_1",
|
||||
"animations/Stand/Emotions/Negative/Frustrated_1",
|
||||
"animations/Stand/Emotions/Negative/Humiliated_1",
|
||||
"animations/Stand/Emotions/Negative/Hurt_1",
|
||||
"animations/Stand/Emotions/Negative/Hurt_2",
|
||||
"animations/Stand/Emotions/Negative/Late_1",
|
||||
"animations/Stand/Emotions/Negative/Sad_1",
|
||||
"animations/Stand/Emotions/Negative/Sad_2",
|
||||
"animations/Stand/Emotions/Negative/Shocked_1",
|
||||
"animations/Stand/Emotions/Negative/Sorry_1",
|
||||
"animations/Stand/Emotions/Negative/Surprise_1",
|
||||
"animations/Stand/Emotions/Negative/Surprise_2",
|
||||
"animations/Stand/Emotions/Negative/Surprise_3",
|
||||
"animations/Stand/Emotions/Neutral/Alienated_1",
|
||||
"animations/Stand/Emotions/Neutral/AskForAttention_1",
|
||||
"animations/Stand/Emotions/Neutral/AskForAttention_2",
|
||||
"animations/Stand/Emotions/Neutral/AskForAttention_3",
|
||||
"animations/Stand/Emotions/Neutral/Cautious_1",
|
||||
"animations/Stand/Emotions/Neutral/Confused_1",
|
||||
"animations/Stand/Emotions/Neutral/Determined_1",
|
||||
"animations/Stand/Emotions/Neutral/Embarrassed_1",
|
||||
"animations/Stand/Emotions/Neutral/Hesitation_1",
|
||||
"animations/Stand/Emotions/Neutral/Innocent_1",
|
||||
"animations/Stand/Emotions/Neutral/Lonely_1",
|
||||
"animations/Stand/Emotions/Neutral/Mischievous_1",
|
||||
"animations/Stand/Emotions/Neutral/Puzzled_1",
|
||||
"animations/Stand/Emotions/Neutral/Sneeze",
|
||||
"animations/Stand/Emotions/Neutral/Stubborn_1",
|
||||
"animations/Stand/Emotions/Neutral/Suspicious_1",
|
||||
"animations/Stand/Emotions/Positive/Amused_1",
|
||||
"animations/Stand/Emotions/Positive/Confident_1",
|
||||
"animations/Stand/Emotions/Positive/Ecstatic_1",
|
||||
"animations/Stand/Emotions/Positive/Enthusiastic_1",
|
||||
"animations/Stand/Emotions/Positive/Excited_1",
|
||||
"animations/Stand/Emotions/Positive/Excited_2",
|
||||
"animations/Stand/Emotions/Positive/Excited_3",
|
||||
"animations/Stand/Emotions/Positive/Happy_1",
|
||||
"animations/Stand/Emotions/Positive/Happy_2",
|
||||
"animations/Stand/Emotions/Positive/Happy_3",
|
||||
"animations/Stand/Emotions/Positive/Happy_4",
|
||||
"animations/Stand/Emotions/Positive/Hungry_1",
|
||||
"animations/Stand/Emotions/Positive/Hysterical_1",
|
||||
"animations/Stand/Emotions/Positive/Interested_1",
|
||||
"animations/Stand/Emotions/Positive/Interested_2",
|
||||
"animations/Stand/Emotions/Positive/Laugh_1",
|
||||
"animations/Stand/Emotions/Positive/Laugh_2",
|
||||
"animations/Stand/Emotions/Positive/Laugh_3",
|
||||
"animations/Stand/Emotions/Positive/Mocker_1",
|
||||
"animations/Stand/Emotions/Positive/Optimistic_1",
|
||||
"animations/Stand/Emotions/Positive/Peaceful_1",
|
||||
"animations/Stand/Emotions/Positive/Proud_1",
|
||||
"animations/Stand/Emotions/Positive/Proud_2",
|
||||
"animations/Stand/Emotions/Positive/Proud_3",
|
||||
"animations/Stand/Emotions/Positive/Relieved_1",
|
||||
"animations/Stand/Emotions/Positive/Shy_1",
|
||||
"animations/Stand/Emotions/Positive/Shy_2",
|
||||
"animations/Stand/Emotions/Positive/Sure_1",
|
||||
"animations/Stand/Emotions/Positive/Winner_1",
|
||||
"animations/Stand/Emotions/Positive/Winner_2",
|
||||
"animations/Stand/Gestures/Angry_1",
|
||||
"animations/Stand/Gestures/Angry_2",
|
||||
"animations/Stand/Gestures/Angry_3",
|
||||
"animations/Stand/Gestures/BowShort_1",
|
||||
"animations/Stand/Gestures/BowShort_2",
|
||||
"animations/Stand/Gestures/BowShort_3",
|
||||
"animations/Stand/Gestures/But_1",
|
||||
"animations/Stand/Gestures/CalmDown_1",
|
||||
"animations/Stand/Gestures/CalmDown_2",
|
||||
"animations/Stand/Gestures/CalmDown_3",
|
||||
"animations/Stand/Gestures/CalmDown_4",
|
||||
"animations/Stand/Gestures/CalmDown_5",
|
||||
"animations/Stand/Gestures/CalmDown_6",
|
||||
"animations/Stand/Gestures/Choice_1",
|
||||
"animations/Stand/Gestures/ComeOn_1",
|
||||
"animations/Stand/Gestures/Confused_1",
|
||||
"animations/Stand/Gestures/Confused_2",
|
||||
"animations/Stand/Gestures/CountFive_1",
|
||||
"animations/Stand/Gestures/CountFour_1",
|
||||
"animations/Stand/Gestures/CountMore_1",
|
||||
"animations/Stand/Gestures/CountOne_1",
|
||||
"animations/Stand/Gestures/CountThree_1",
|
||||
"animations/Stand/Gestures/CountTwo_1",
|
||||
"animations/Stand/Gestures/Desperate_1",
|
||||
"animations/Stand/Gestures/Desperate_2",
|
||||
"animations/Stand/Gestures/Desperate_3",
|
||||
"animations/Stand/Gestures/Desperate_4",
|
||||
"animations/Stand/Gestures/Desperate_5",
|
||||
"animations/Stand/Gestures/DontUnderstand_1",
|
||||
"animations/Stand/Gestures/Enthusiastic_3",
|
||||
"animations/Stand/Gestures/Enthusiastic_4",
|
||||
"animations/Stand/Gestures/Enthusiastic_5",
|
||||
"animations/Stand/Gestures/Everything_1",
|
||||
"animations/Stand/Gestures/Everything_2",
|
||||
"animations/Stand/Gestures/Everything_3",
|
||||
"animations/Stand/Gestures/Everything_4",
|
||||
"animations/Stand/Gestures/Everything_6",
|
||||
"animations/Stand/Gestures/Excited_1",
|
||||
"animations/Stand/Gestures/Explain_1",
|
||||
"animations/Stand/Gestures/Explain_10",
|
||||
"animations/Stand/Gestures/Explain_11",
|
||||
"animations/Stand/Gestures/Explain_2",
|
||||
"animations/Stand/Gestures/Explain_3",
|
||||
"animations/Stand/Gestures/Explain_4",
|
||||
"animations/Stand/Gestures/Explain_5",
|
||||
"animations/Stand/Gestures/Explain_6",
|
||||
"animations/Stand/Gestures/Explain_7",
|
||||
"animations/Stand/Gestures/Explain_8",
|
||||
"animations/Stand/Gestures/Far_1",
|
||||
"animations/Stand/Gestures/Far_2",
|
||||
"animations/Stand/Gestures/Far_3",
|
||||
"animations/Stand/Gestures/Follow_1",
|
||||
"animations/Stand/Gestures/Give_1",
|
||||
"animations/Stand/Gestures/Give_2",
|
||||
"animations/Stand/Gestures/Give_3",
|
||||
"animations/Stand/Gestures/Give_4",
|
||||
"animations/Stand/Gestures/Give_5",
|
||||
"animations/Stand/Gestures/Give_6",
|
||||
"animations/Stand/Gestures/Great_1",
|
||||
"animations/Stand/Gestures/HeSays_1",
|
||||
"animations/Stand/Gestures/HeSays_2",
|
||||
"animations/Stand/Gestures/HeSays_3",
|
||||
"animations/Stand/Gestures/Hey_1",
|
||||
"animations/Stand/Gestures/Hey_10",
|
||||
"animations/Stand/Gestures/Hey_2",
|
||||
"animations/Stand/Gestures/Hey_3",
|
||||
"animations/Stand/Gestures/Hey_4",
|
||||
"animations/Stand/Gestures/Hey_6",
|
||||
"animations/Stand/Gestures/Hey_7",
|
||||
"animations/Stand/Gestures/Hey_8",
|
||||
"animations/Stand/Gestures/Hey_9",
|
||||
"animations/Stand/Gestures/Hide_1",
|
||||
"animations/Stand/Gestures/Hot_1",
|
||||
"animations/Stand/Gestures/Hot_2",
|
||||
"animations/Stand/Gestures/IDontKnow_1",
|
||||
"animations/Stand/Gestures/IDontKnow_2",
|
||||
"animations/Stand/Gestures/IDontKnow_3",
|
||||
"animations/Stand/Gestures/IDontKnow_4",
|
||||
"animations/Stand/Gestures/IDontKnow_5",
|
||||
"animations/Stand/Gestures/IDontKnow_6",
|
||||
"animations/Stand/Gestures/Joy_1",
|
||||
"animations/Stand/Gestures/Kisses_1",
|
||||
"animations/Stand/Gestures/Look_1",
|
||||
"animations/Stand/Gestures/Look_2",
|
||||
"animations/Stand/Gestures/Maybe_1",
|
||||
"animations/Stand/Gestures/Me_1",
|
||||
"animations/Stand/Gestures/Me_2",
|
||||
"animations/Stand/Gestures/Me_4",
|
||||
"animations/Stand/Gestures/Me_7",
|
||||
"animations/Stand/Gestures/Me_8",
|
||||
"animations/Stand/Gestures/Mime_1",
|
||||
"animations/Stand/Gestures/Mime_2",
|
||||
"animations/Stand/Gestures/Next_1",
|
||||
"animations/Stand/Gestures/No_1",
|
||||
"animations/Stand/Gestures/No_2",
|
||||
"animations/Stand/Gestures/No_3",
|
||||
"animations/Stand/Gestures/No_4",
|
||||
"animations/Stand/Gestures/No_5",
|
||||
"animations/Stand/Gestures/No_6",
|
||||
"animations/Stand/Gestures/No_7",
|
||||
"animations/Stand/Gestures/No_8",
|
||||
"animations/Stand/Gestures/No_9",
|
||||
"animations/Stand/Gestures/Nothing_1",
|
||||
"animations/Stand/Gestures/Nothing_2",
|
||||
"animations/Stand/Gestures/OnTheEvening_1",
|
||||
"animations/Stand/Gestures/OnTheEvening_2",
|
||||
"animations/Stand/Gestures/OnTheEvening_3",
|
||||
"animations/Stand/Gestures/OnTheEvening_4",
|
||||
"animations/Stand/Gestures/OnTheEvening_5",
|
||||
"animations/Stand/Gestures/Please_1",
|
||||
"animations/Stand/Gestures/Please_2",
|
||||
"animations/Stand/Gestures/Please_3",
|
||||
"animations/Stand/Gestures/Reject_1",
|
||||
"animations/Stand/Gestures/Reject_2",
|
||||
"animations/Stand/Gestures/Reject_3",
|
||||
"animations/Stand/Gestures/Reject_4",
|
||||
"animations/Stand/Gestures/Reject_5",
|
||||
"animations/Stand/Gestures/Reject_6",
|
||||
"animations/Stand/Gestures/Salute_1",
|
||||
"animations/Stand/Gestures/Salute_2",
|
||||
"animations/Stand/Gestures/Salute_3",
|
||||
"animations/Stand/Gestures/ShowFloor_1",
|
||||
"animations/Stand/Gestures/ShowFloor_2",
|
||||
"animations/Stand/Gestures/ShowFloor_3",
|
||||
"animations/Stand/Gestures/ShowFloor_4",
|
||||
"animations/Stand/Gestures/ShowFloor_5",
|
||||
"animations/Stand/Gestures/ShowSky_1",
|
||||
"animations/Stand/Gestures/ShowSky_10",
|
||||
"animations/Stand/Gestures/ShowSky_11",
|
||||
"animations/Stand/Gestures/ShowSky_12",
|
||||
"animations/Stand/Gestures/ShowSky_2",
|
||||
"animations/Stand/Gestures/ShowSky_3",
|
||||
"animations/Stand/Gestures/ShowSky_4",
|
||||
"animations/Stand/Gestures/ShowSky_5",
|
||||
"animations/Stand/Gestures/ShowSky_6",
|
||||
"animations/Stand/Gestures/ShowSky_7",
|
||||
"animations/Stand/Gestures/ShowSky_8",
|
||||
"animations/Stand/Gestures/ShowSky_9",
|
||||
"animations/Stand/Gestures/ShowTablet_1",
|
||||
"animations/Stand/Gestures/ShowTablet_2",
|
||||
"animations/Stand/Gestures/ShowTablet_3",
|
||||
"animations/Stand/Gestures/Shy_1",
|
||||
"animations/Stand/Gestures/Stretch_1",
|
||||
"animations/Stand/Gestures/Stretch_2",
|
||||
"animations/Stand/Gestures/Surprised_1",
|
||||
"animations/Stand/Gestures/TakePlace_1",
|
||||
"animations/Stand/Gestures/TakePlace_2",
|
||||
"animations/Stand/Gestures/Take_1",
|
||||
"animations/Stand/Gestures/Thinking_1",
|
||||
"animations/Stand/Gestures/Thinking_2",
|
||||
"animations/Stand/Gestures/Thinking_3",
|
||||
"animations/Stand/Gestures/Thinking_4",
|
||||
"animations/Stand/Gestures/Thinking_5",
|
||||
"animations/Stand/Gestures/Thinking_6",
|
||||
"animations/Stand/Gestures/Thinking_7",
|
||||
"animations/Stand/Gestures/Thinking_8",
|
||||
"animations/Stand/Gestures/This_1",
|
||||
"animations/Stand/Gestures/This_10",
|
||||
"animations/Stand/Gestures/This_11",
|
||||
"animations/Stand/Gestures/This_12",
|
||||
"animations/Stand/Gestures/This_13",
|
||||
"animations/Stand/Gestures/This_14",
|
||||
"animations/Stand/Gestures/This_15",
|
||||
"animations/Stand/Gestures/This_2",
|
||||
"animations/Stand/Gestures/This_3",
|
||||
"animations/Stand/Gestures/This_4",
|
||||
"animations/Stand/Gestures/This_5",
|
||||
"animations/Stand/Gestures/This_6",
|
||||
"animations/Stand/Gestures/This_7",
|
||||
"animations/Stand/Gestures/This_8",
|
||||
"animations/Stand/Gestures/This_9",
|
||||
"animations/Stand/Gestures/WhatSThis_1",
|
||||
"animations/Stand/Gestures/WhatSThis_10",
|
||||
"animations/Stand/Gestures/WhatSThis_11",
|
||||
"animations/Stand/Gestures/WhatSThis_12",
|
||||
"animations/Stand/Gestures/WhatSThis_13",
|
||||
"animations/Stand/Gestures/WhatSThis_14",
|
||||
"animations/Stand/Gestures/WhatSThis_15",
|
||||
"animations/Stand/Gestures/WhatSThis_16",
|
||||
"animations/Stand/Gestures/WhatSThis_2",
|
||||
"animations/Stand/Gestures/WhatSThis_3",
|
||||
"animations/Stand/Gestures/WhatSThis_4",
|
||||
"animations/Stand/Gestures/WhatSThis_5",
|
||||
"animations/Stand/Gestures/WhatSThis_6",
|
||||
"animations/Stand/Gestures/WhatSThis_7",
|
||||
"animations/Stand/Gestures/WhatSThis_8",
|
||||
"animations/Stand/Gestures/WhatSThis_9",
|
||||
"animations/Stand/Gestures/Whisper_1",
|
||||
"animations/Stand/Gestures/Wings_1",
|
||||
"animations/Stand/Gestures/Wings_2",
|
||||
"animations/Stand/Gestures/Wings_3",
|
||||
"animations/Stand/Gestures/Wings_4",
|
||||
"animations/Stand/Gestures/Wings_5",
|
||||
"animations/Stand/Gestures/Yes_1",
|
||||
"animations/Stand/Gestures/Yes_2",
|
||||
"animations/Stand/Gestures/Yes_3",
|
||||
"animations/Stand/Gestures/YouKnowWhat_1",
|
||||
"animations/Stand/Gestures/YouKnowWhat_2",
|
||||
"animations/Stand/Gestures/YouKnowWhat_3",
|
||||
"animations/Stand/Gestures/YouKnowWhat_4",
|
||||
"animations/Stand/Gestures/YouKnowWhat_5",
|
||||
"animations/Stand/Gestures/YouKnowWhat_6",
|
||||
"animations/Stand/Gestures/You_1",
|
||||
"animations/Stand/Gestures/You_2",
|
||||
"animations/Stand/Gestures/You_3",
|
||||
"animations/Stand/Gestures/You_4",
|
||||
"animations/Stand/Gestures/You_5",
|
||||
"animations/Stand/Gestures/Yum_1",
|
||||
"animations/Stand/Reactions/EthernetOff_1",
|
||||
"animations/Stand/Reactions/EthernetOn_1",
|
||||
"animations/Stand/Reactions/Heat_1",
|
||||
"animations/Stand/Reactions/Heat_2",
|
||||
"animations/Stand/Reactions/LightShine_1",
|
||||
"animations/Stand/Reactions/LightShine_2",
|
||||
"animations/Stand/Reactions/LightShine_3",
|
||||
"animations/Stand/Reactions/LightShine_4",
|
||||
"animations/Stand/Reactions/SeeColor_1",
|
||||
"animations/Stand/Reactions/SeeColor_2",
|
||||
"animations/Stand/Reactions/SeeColor_3",
|
||||
"animations/Stand/Reactions/SeeSomething_1",
|
||||
"animations/Stand/Reactions/SeeSomething_3",
|
||||
"animations/Stand/Reactions/SeeSomething_4",
|
||||
"animations/Stand/Reactions/SeeSomething_5",
|
||||
"animations/Stand/Reactions/SeeSomething_6",
|
||||
"animations/Stand/Reactions/SeeSomething_7",
|
||||
"animations/Stand/Reactions/SeeSomething_8",
|
||||
"animations/Stand/Reactions/ShakeBody_1",
|
||||
"animations/Stand/Reactions/ShakeBody_2",
|
||||
"animations/Stand/Reactions/ShakeBody_3",
|
||||
"animations/Stand/Reactions/TouchHead_1",
|
||||
"animations/Stand/Reactions/TouchHead_2",
|
||||
"animations/Stand/Reactions/TouchHead_3",
|
||||
"animations/Stand/Reactions/TouchHead_4",
|
||||
"animations/Stand/Waiting/AirGuitar_1",
|
||||
"animations/Stand/Waiting/BackRubs_1",
|
||||
"animations/Stand/Waiting/Bandmaster_1",
|
||||
"animations/Stand/Waiting/Binoculars_1",
|
||||
"animations/Stand/Waiting/BreathLoop_1",
|
||||
"animations/Stand/Waiting/BreathLoop_2",
|
||||
"animations/Stand/Waiting/BreathLoop_3",
|
||||
"animations/Stand/Waiting/CallSomeone_1",
|
||||
"animations/Stand/Waiting/Drink_1",
|
||||
"animations/Stand/Waiting/DriveCar_1",
|
||||
"animations/Stand/Waiting/Fitness_1",
|
||||
"animations/Stand/Waiting/Fitness_2",
|
||||
"animations/Stand/Waiting/Fitness_3",
|
||||
"animations/Stand/Waiting/FunnyDancer_1",
|
||||
"animations/Stand/Waiting/HappyBirthday_1",
|
||||
"animations/Stand/Waiting/Helicopter_1",
|
||||
"animations/Stand/Waiting/HideEyes_1",
|
||||
"animations/Stand/Waiting/HideHands_1",
|
||||
"animations/Stand/Waiting/Innocent_1",
|
||||
"animations/Stand/Waiting/Knight_1",
|
||||
"animations/Stand/Waiting/KnockEye_1",
|
||||
"animations/Stand/Waiting/KungFu_1",
|
||||
"animations/Stand/Waiting/LookHand_1",
|
||||
"animations/Stand/Waiting/LookHand_2",
|
||||
"animations/Stand/Waiting/LoveYou_1",
|
||||
"animations/Stand/Waiting/Monster_1",
|
||||
"animations/Stand/Waiting/MysticalPower_1",
|
||||
"animations/Stand/Waiting/PlayHands_1",
|
||||
"animations/Stand/Waiting/PlayHands_2",
|
||||
"animations/Stand/Waiting/PlayHands_3",
|
||||
"animations/Stand/Waiting/Relaxation_1",
|
||||
"animations/Stand/Waiting/Relaxation_2",
|
||||
"animations/Stand/Waiting/Relaxation_3",
|
||||
"animations/Stand/Waiting/Relaxation_4",
|
||||
"animations/Stand/Waiting/Rest_1",
|
||||
"animations/Stand/Waiting/Robot_1",
|
||||
"animations/Stand/Waiting/ScratchBack_1",
|
||||
"animations/Stand/Waiting/ScratchBottom_1",
|
||||
"animations/Stand/Waiting/ScratchEye_1",
|
||||
"animations/Stand/Waiting/ScratchHand_1",
|
||||
"animations/Stand/Waiting/ScratchHead_1",
|
||||
"animations/Stand/Waiting/ScratchLeg_1",
|
||||
"animations/Stand/Waiting/ScratchTorso_1",
|
||||
"animations/Stand/Waiting/ShowMuscles_1",
|
||||
"animations/Stand/Waiting/ShowMuscles_2",
|
||||
"animations/Stand/Waiting/ShowMuscles_3",
|
||||
"animations/Stand/Waiting/ShowMuscles_4",
|
||||
"animations/Stand/Waiting/ShowMuscles_5",
|
||||
"animations/Stand/Waiting/ShowSky_1",
|
||||
"animations/Stand/Waiting/ShowSky_2",
|
||||
"animations/Stand/Waiting/SpaceShuttle_1",
|
||||
"animations/Stand/Waiting/Stretch_1",
|
||||
"animations/Stand/Waiting/Stretch_2",
|
||||
"animations/Stand/Waiting/TakePicture_1",
|
||||
"animations/Stand/Waiting/Taxi_1",
|
||||
"animations/Stand/Waiting/Think_1",
|
||||
"animations/Stand/Waiting/Think_2",
|
||||
"animations/Stand/Waiting/Think_3",
|
||||
"animations/Stand/Waiting/Think_4",
|
||||
"animations/Stand/Waiting/Waddle_1",
|
||||
"animations/Stand/Waiting/Waddle_2",
|
||||
"animations/Stand/Waiting/WakeUp_1",
|
||||
"animations/Stand/Waiting/Zombie_1"]
|
||||
|
||||
|
||||
/**
|
||||
* Returns a gesture value editor component.
|
||||
* @returns JSX.Element
|
||||
*/
|
||||
export default function GestureValueEditor({
|
||||
value,
|
||||
setValue,
|
||||
setType,
|
||||
placeholder = "Gesture name",
|
||||
}: GestureValueEditorProps) {
|
||||
|
||||
/** Input mode: semantic tag vs concrete animation path */
|
||||
const [mode, setMode] = useState<"single" | "tag">("tag");
|
||||
|
||||
/** Raw text value for single-gesture input */
|
||||
const [customValue, setCustomValue] = useState("");
|
||||
|
||||
/** Autocomplete dropdown state */
|
||||
const [showSuggestions, setShowSuggestions] = useState(true);
|
||||
const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
|
||||
|
||||
/** Reserved for future click-outside / positioning logic */
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
/** Switch between tag and single input modes */
|
||||
const handleModeChange = (newMode: "single" | "tag") => {
|
||||
setMode(newMode);
|
||||
|
||||
if (newMode === "single") {
|
||||
setValue(customValue || value);
|
||||
setType(false);
|
||||
setFilteredSuggestions(GESTURE_SINGLES);
|
||||
setShowSuggestions(true);
|
||||
} else {
|
||||
// Clear value if it does not match a valid tag
|
||||
setType(true);
|
||||
const isValidTag = GESTURE_TAGS.some(
|
||||
tag => tag.toLowerCase() === value.toLowerCase()
|
||||
);
|
||||
if (!isValidTag) setValue("");
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
};
|
||||
|
||||
/** Select a semantic gesture tag */
|
||||
const handleTagSelect = (tag: string) => {
|
||||
setValue(tag);
|
||||
};
|
||||
|
||||
/** Update single-gesture input and filter suggestions */
|
||||
const handleCustomChange = (newValue: string) => {
|
||||
setCustomValue(newValue);
|
||||
setValue(newValue);
|
||||
|
||||
if (newValue.trim() === "") {
|
||||
setFilteredSuggestions(GESTURE_SINGLES);
|
||||
setShowSuggestions(true);
|
||||
} else {
|
||||
const filtered = GESTURE_SINGLES.filter(single =>
|
||||
single.toLowerCase().includes(newValue.toLowerCase())
|
||||
);
|
||||
setFilteredSuggestions(filtered);
|
||||
setShowSuggestions(filtered.length > 0);
|
||||
}
|
||||
};
|
||||
|
||||
/** Commit autocomplete selection */
|
||||
const handleSuggestionSelect = (suggestion: string) => {
|
||||
setCustomValue(suggestion);
|
||||
setValue(suggestion);
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
/** Refresh suggestions on refocus */
|
||||
const handleInputFocus = () => {
|
||||
if (!customValue.trim()) return;
|
||||
|
||||
const filtered = GESTURE_SINGLES.filter(single =>
|
||||
single.toLowerCase().includes(customValue.toLowerCase())
|
||||
);
|
||||
setFilteredSuggestions(filtered);
|
||||
setShowSuggestions(filtered.length > 0);
|
||||
};
|
||||
|
||||
/** Exists to allow delayed blur handling if needed */
|
||||
const handleInputBlur = (_e: React.FocusEvent) => {};
|
||||
|
||||
|
||||
/** Build the JSX component */
|
||||
return (
|
||||
<div className={styles.gestureEditor} ref={containerRef}>
|
||||
{/* Mode toggle */}
|
||||
<div className={styles.modeSelector}>
|
||||
<label className={styles.modeLabel}>Input Mode:</label>
|
||||
<div className={styles.toggleContainer}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.toggleButton} ${mode === "single" ? styles.active : ""}`}
|
||||
onClick={() => handleModeChange("single")}
|
||||
>
|
||||
Single
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.toggleButton} ${mode === "tag" ? styles.active : ""}`}
|
||||
onClick={() => handleModeChange("tag")}
|
||||
>
|
||||
Tag
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.valueEditor} data-testid={"valueEditorTestID"}>
|
||||
{mode === "single" ? (
|
||||
<div className={styles.autocompleteContainer}>
|
||||
{showSuggestions && (
|
||||
<div className={styles.suggestionsDropdownLeft}>
|
||||
{filteredSuggestions.map((suggestion) => (
|
||||
<div
|
||||
key={suggestion}
|
||||
className={styles.suggestionItem}
|
||||
onClick={() => handleSuggestionSelect(suggestion)}
|
||||
onMouseDown={(e) => e.preventDefault()} // prevent blur before click
|
||||
>
|
||||
{suggestion}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
value={customValue}
|
||||
onChange={(e) => handleCustomChange(e.target.value)}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
placeholder={placeholder}
|
||||
className={`${styles.textInput} ${showSuggestions ? styles.textInputWithSuggestions : ''}`}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.tagSelector}>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => handleTagSelect(e.target.value)}
|
||||
className={styles.tagSelect}
|
||||
data-testid={"tagSelectorTestID"}
|
||||
>
|
||||
<option value="" >Select a gesture tag...</option>
|
||||
{GESTURE_TAGS.map((tag) => (
|
||||
<option key={tag} value={tag}>{tag}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className={styles.tagList}>
|
||||
{GESTURE_TAGS.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
className={`${styles.tagButton} ${value === tag ? styles.selected : ""}`}
|
||||
onClick={() => handleTagSelect(tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import type { Plan } from "./Plan";
|
||||
|
||||
export const defaultPlan: Plan = {
|
||||
name: "Default Plan",
|
||||
id: "-1",
|
||||
steps: [],
|
||||
}
|
||||
101
src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
Normal file
101
src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
export type Plan = {
|
||||
name: string,
|
||||
id: string,
|
||||
steps: PlanElement[],
|
||||
}
|
||||
|
||||
export type PlanElement = Goal | Action
|
||||
|
||||
export type Goal = {
|
||||
id: string,
|
||||
name: string,
|
||||
plan: Plan,
|
||||
can_fail: boolean,
|
||||
type: "goal"
|
||||
}
|
||||
|
||||
// Actions
|
||||
export type Action = SpeechAction | GestureAction | LLMAction
|
||||
export type SpeechAction = { id: string, text: string, type:"speech" }
|
||||
export type GestureAction = { id: string, gesture: string, isTag: boolean, type:"gesture" }
|
||||
export type LLMAction = { id: string, goal: string, type:"llm" }
|
||||
|
||||
export type ActionTypes = "speech" | "gesture" | "llm";
|
||||
|
||||
|
||||
// Extract the wanted information from a plan within the reducing of nodes
|
||||
export function PlanReduce(plan?: Plan) {
|
||||
if (!plan) return ""
|
||||
return {
|
||||
id: plan.id,
|
||||
steps: plan.steps.map((x) => StepReduce(x))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Extract the wanted information from a plan element.
|
||||
function StepReduce(planElement: PlanElement) {
|
||||
// We have different types of plan elements, requiring differnt types of output
|
||||
switch (planElement.type) {
|
||||
case ("speech"):
|
||||
return {
|
||||
id: planElement.id,
|
||||
text: planElement.text,
|
||||
}
|
||||
case ("gesture"):
|
||||
return {
|
||||
id: planElement.id,
|
||||
gesture: {
|
||||
type: planElement.isTag ? "tag" : "single",
|
||||
name: planElement.gesture
|
||||
},
|
||||
}
|
||||
case ("llm"):
|
||||
return {
|
||||
id: planElement.id,
|
||||
goal: planElement.goal,
|
||||
}
|
||||
case ("goal"):
|
||||
return {
|
||||
id: planElement.id,
|
||||
plan: planElement.plan,
|
||||
can_fail: planElement.can_fail,
|
||||
};
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds out whether the plan can iterate multiple times, or always stops after one action.
|
||||
* This comes down to checking if the plan only has speech/ gesture actions, or others as well.
|
||||
* @param plan: the plan to check
|
||||
* @returns: a boolean
|
||||
*/
|
||||
export function DoesPlanIterate(plan?: Plan) : boolean {
|
||||
// TODO: should recursively check plans that have goals (and thus more plans) in them.
|
||||
if (!plan) return false
|
||||
return plan.steps.filter((step) => step.type == "llm").length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the value of the action.
|
||||
* Since typescript can't polymorphicly access the value field,
|
||||
* we need to switch over the types and return the correct field.
|
||||
* @param action: action to retrieve the value from
|
||||
* @returns string | undefined
|
||||
*/
|
||||
export function GetActionValue(action: Action) {
|
||||
let returnAction;
|
||||
switch (action.type) {
|
||||
case "gesture":
|
||||
returnAction = action as GestureAction
|
||||
return returnAction.gesture;
|
||||
case "speech":
|
||||
returnAction = action as SpeechAction
|
||||
return returnAction.text;
|
||||
case "llm":
|
||||
returnAction = action as LLMAction
|
||||
return returnAction.goal;
|
||||
default:
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.planDialog {
|
||||
overflow:visible;
|
||||
width: 80vw;
|
||||
max-width: 900px;
|
||||
transition: width 0.25s ease;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
|
||||
.planDialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.planEditor {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.planEditorLeft {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.planEditorRight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
border-left: 1px solid var(--border-color, #ccc);
|
||||
padding-left: 1rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.planStep {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: text-decoration 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.planStep:hover {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.stepType {
|
||||
opacity: 0.7;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
|
||||
.stepIndex {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.emptySteps {
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.stepSuggestion {
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
import {useRef, useState} from "react";
|
||||
import useFlowStore from "../VisProgStores.tsx";
|
||||
import styles from './PlanEditor.module.css';
|
||||
import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
|
||||
import { defaultPlan } from "../components/Plan.default";
|
||||
import { TextField } from "../../../../components/TextField";
|
||||
import GestureValueEditor from "./GestureValueEditor";
|
||||
|
||||
type PlanEditorDialogProps = {
|
||||
plan?: Plan;
|
||||
onSave: (plan: Plan | undefined) => void;
|
||||
description? : string;
|
||||
};
|
||||
|
||||
export default function PlanEditorDialog({
|
||||
plan,
|
||||
onSave,
|
||||
description,
|
||||
}: PlanEditorDialogProps) {
|
||||
// UseStates and references
|
||||
const dialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
|
||||
const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
|
||||
const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
|
||||
const [newActionValue, setNewActionValue] = useState("");
|
||||
const { setScrollable } = useFlowStore();
|
||||
|
||||
//Button Actions
|
||||
const openCreate = () => {
|
||||
setScrollable(false);
|
||||
setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
|
||||
dialogRef.current?.showModal();
|
||||
};
|
||||
|
||||
const openCreateWithDescription = () => {
|
||||
setScrollable(false);
|
||||
setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
|
||||
setNewActionType("llm")
|
||||
setNewActionValue(description!)
|
||||
dialogRef.current?.showModal();
|
||||
}
|
||||
|
||||
const openEdit = () => {
|
||||
setScrollable(false);
|
||||
if (!plan) return;
|
||||
setDraftPlan(structuredClone(plan));
|
||||
dialogRef.current?.showModal();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setScrollable(true);
|
||||
dialogRef.current?.close();
|
||||
setDraftPlan(null);
|
||||
};
|
||||
|
||||
const buildAction = (): Action => {
|
||||
const id = crypto.randomUUID();
|
||||
switch (newActionType) {
|
||||
case "speech":
|
||||
return { id, text: newActionValue, type: "speech" };
|
||||
case "gesture":
|
||||
return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
|
||||
case "llm":
|
||||
return { id, goal: newActionValue, type: "llm" };
|
||||
}
|
||||
};
|
||||
|
||||
return (<>
|
||||
{/* Create and edit buttons */}
|
||||
{!plan && (
|
||||
<button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
|
||||
Create Plan
|
||||
</button>
|
||||
)}
|
||||
{plan && (
|
||||
<button className={styles.nodeButton} onClick={openEdit}>
|
||||
Edit Plan
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Start of dialog (plan editor) */}
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
className={`${styles.planDialog}`}
|
||||
//onWheel={(e) => e.stopPropagation()}
|
||||
data-testid={"PlanEditorDialogTestID"}
|
||||
>
|
||||
<form method="dialog" className="flex-col gap-md">
|
||||
<h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
|
||||
{/* Plan name text field */}
|
||||
{draftPlan && (
|
||||
<TextField
|
||||
value={draftPlan.name}
|
||||
setValue={(name) =>
|
||||
setDraftPlan({ ...draftPlan, name })}
|
||||
placeholder="Plan name"
|
||||
data-testid="name_text_field"/>
|
||||
)}
|
||||
|
||||
{/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
|
||||
{draftPlan && (<div className={styles.planEditor}>
|
||||
<div className={styles.planEditorLeft}>
|
||||
{/* Left Side (Action Adder) */}
|
||||
<h4>Add Action</h4>
|
||||
{(!plan && description && draftPlan.steps.length === 0) && (<div className={styles.stepSuggestion}>
|
||||
<label> Filled in as a suggestion! </label>
|
||||
<label> Feel free to change! </label>
|
||||
</div>)}
|
||||
<label>
|
||||
Action Type <wbr />
|
||||
{/* Type selection */}
|
||||
<select
|
||||
value={newActionType}
|
||||
onChange={(e) => {
|
||||
setNewActionType(e.target.value as ActionTypes);
|
||||
// Reset value when action type changes
|
||||
setNewActionValue("");
|
||||
}}>
|
||||
<option value="speech">Speech Action</option>
|
||||
<option value="gesture">Gesture Action</option>
|
||||
<option value="llm">LLM Action</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* Action value editor*/}
|
||||
{newActionType === "gesture" ? (
|
||||
// Gesture get their own editor component
|
||||
<GestureValueEditor
|
||||
value={newActionValue}
|
||||
setValue={setNewActionValue}
|
||||
setType={setNewActionGestureType}
|
||||
placeholder="Gesture name"
|
||||
/>
|
||||
) : (
|
||||
<TextField
|
||||
value={newActionValue}
|
||||
setValue={setNewActionValue}
|
||||
placeholder={
|
||||
newActionType === "speech" ? "Speech text"
|
||||
: "LLM goal"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Adding steps */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!newActionValue}
|
||||
onClick={() => {
|
||||
if (!draftPlan) return;
|
||||
// Add action to steps
|
||||
const action = buildAction();
|
||||
setDraftPlan({
|
||||
...draftPlan,
|
||||
steps: [...draftPlan.steps, action],});
|
||||
|
||||
// Reset current action building
|
||||
setNewActionValue("");
|
||||
setNewActionType("speech");
|
||||
}}>
|
||||
Add Step
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right Side (Steps shown) */}
|
||||
<div className={styles.planEditorRight}>
|
||||
<h4>Steps</h4>
|
||||
|
||||
{/* Show if there are no steps yet */}
|
||||
{draftPlan.steps.length === 0 && (
|
||||
<div className={styles.emptySteps}>
|
||||
No steps yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Map over all steps */}
|
||||
{draftPlan.steps.map((step, index) => (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
key={step.id}
|
||||
className={styles.planStep}
|
||||
// Extra logic for screen readers to access using keyboard
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
setDraftPlan({
|
||||
...draftPlan,
|
||||
steps: draftPlan.steps.filter((s) => s.id !== step.id),});
|
||||
}}}
|
||||
onClick={() => {
|
||||
setDraftPlan({
|
||||
...draftPlan,
|
||||
steps: draftPlan.steps.filter((s) => s.id !== step.id),});
|
||||
}}>
|
||||
|
||||
<span className={styles.stepIndex}>{index + 1}.</span>
|
||||
<span className={styles.stepType}>{step.type}:</span>
|
||||
<span className={styles.stepName}>{
|
||||
step.type == "goal" ? ""/* TODO: Add support for goals */
|
||||
: GetActionValue(step)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex-row gap-md">
|
||||
{/* Close button */}
|
||||
<button type="button" onClick={close}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
{/* Confirm/ Create button */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!draftPlan}
|
||||
onClick={() => {
|
||||
if (!draftPlan) return;
|
||||
onSave(draftPlan);
|
||||
close();
|
||||
}}>
|
||||
{draftPlan?.id === plan?.id ? "Confirm" : "Create"}
|
||||
</button>
|
||||
|
||||
{/* Reset button */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!draftPlan}
|
||||
onClick={() => {
|
||||
onSave(undefined);
|
||||
close();
|
||||
}}>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
:global(.react-flow__handle.connected) {
|
||||
background: lightgray;
|
||||
border-color: green;
|
||||
filter: drop-shadow(0 0 0.25rem green);
|
||||
}
|
||||
|
||||
:global(.singleConnectionHandle.connected) {
|
||||
background: #55dd99;
|
||||
}
|
||||
|
||||
:global(.react-flow__handle.unconnected){
|
||||
background: lightgray;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
:global(.singleConnectionHandle.unconnected){
|
||||
background: lightsalmon;
|
||||
border-color: #ff6060;
|
||||
filter: drop-shadow(0 0 0.25rem #ff6060);
|
||||
}
|
||||
|
||||
:global(.react-flow__handle.connectingto) {
|
||||
background: #ff6060;
|
||||
border-color: coral;
|
||||
filter: drop-shadow(0 0 0.25rem coral);
|
||||
}
|
||||
|
||||
:global(.react-flow__handle.valid) {
|
||||
background: #55dd99;
|
||||
border-color: green;
|
||||
filter: drop-shadow(0 0 0.25rem green);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import {
|
||||
Handle,
|
||||
type HandleProps,
|
||||
type Connection,
|
||||
useNodeId, useNodeConnections
|
||||
} from '@xyflow/react';
|
||||
import {useState} from 'react';
|
||||
import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
|
||||
import "./RuleBasedHandle.module.css";
|
||||
|
||||
|
||||
|
||||
export function MultiConnectionHandle({
|
||||
id,
|
||||
type,
|
||||
rules = [],
|
||||
...otherProps
|
||||
} : HandleProps & { rules?: HandleRule[]}) {
|
||||
let nodeId = useNodeId();
|
||||
// this check is used to make sure that the handle code doesn't break when used inside a test,
|
||||
// since useNodeId would be undefined if the handle is not used inside a node
|
||||
nodeId = nodeId ? nodeId : "mockId";
|
||||
const validate = useHandleRules(nodeId, id!, type!, rules);
|
||||
|
||||
|
||||
const connections = useNodeConnections({
|
||||
id: nodeId,
|
||||
handleType: type,
|
||||
handleId: id!
|
||||
})
|
||||
|
||||
// initialise the handles state with { isValid: true } to show that connections are possible
|
||||
const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
|
||||
|
||||
return (
|
||||
<Handle
|
||||
{...otherProps}
|
||||
id={id}
|
||||
type={type}
|
||||
className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
|
||||
isValidConnection={(connection) => {
|
||||
const result = validate(connection as Connection);
|
||||
setHandleState(result);
|
||||
return result.isSatisfied;
|
||||
}}
|
||||
title={handleState.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SingleConnectionHandle({
|
||||
id,
|
||||
type,
|
||||
rules = [],
|
||||
...otherProps
|
||||
} : HandleProps & { rules?: HandleRule[]}) {
|
||||
let nodeId = useNodeId();
|
||||
// this check is used to make sure that the handle code doesn't break when used inside a test,
|
||||
// since useNodeId would be undefined if the handle is not used inside a node
|
||||
nodeId = nodeId ? nodeId : "mockId";
|
||||
const validate = useHandleRules(nodeId, id!, type!, rules);
|
||||
|
||||
const connections = useNodeConnections({
|
||||
id: nodeId,
|
||||
handleType: type,
|
||||
handleId: id!
|
||||
})
|
||||
|
||||
// initialise the handles state with { isValid: true } to show that connections are possible
|
||||
const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
|
||||
|
||||
return (
|
||||
<Handle
|
||||
{...otherProps}
|
||||
id={id}
|
||||
type={type}
|
||||
className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
|
||||
isConnectable={connections.length === 0}
|
||||
isValidConnection={(connection) => {
|
||||
const result = validate(connection as Connection);
|
||||
setHandleState(result);
|
||||
return result.isSatisfied;
|
||||
}}
|
||||
title={handleState.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import type { BasicBeliefNodeData } from "./BasicBeliefNode";
|
||||
|
||||
|
||||
/**
|
||||
* Default data for this node
|
||||
*/
|
||||
export const BasicBeliefNodeDefaults: BasicBeliefNodeData = {
|
||||
label: "Belief",
|
||||
droppable: true,
|
||||
belief: {type: "keyword", id: "", value: "", label: "Keyword said:"},
|
||||
hasReduce: true,
|
||||
};
|
||||
@@ -0,0 +1,225 @@
|
||||
import {
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node,
|
||||
} from '@xyflow/react';
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
|
||||
import useFlowStore from '../VisProgStores';
|
||||
import { TextField } from '../../../../components/TextField';
|
||||
import { MultilineTextField } from '../../../../components/MultilineTextField';
|
||||
|
||||
/**
|
||||
* The default data structure for a BasicBelief node
|
||||
*
|
||||
* Represents configuration for a node that activates when a specific condition is met,
|
||||
* such as keywords being spoken or emotions detected.
|
||||
*
|
||||
* @property label: the display label of this BasicBelief node.
|
||||
* @property droppable: Whether this node can be dropped from the toolbar (default: true).
|
||||
* @property BasicBeliefType - The type of BasicBelief ("keywords" or a custom string).
|
||||
* @property BasicBeliefs - The list of keyword BasicBeliefs (if applicable).
|
||||
* @property hasReduce - Whether this node supports reduction logic.
|
||||
*/
|
||||
export type BasicBeliefNodeData = {
|
||||
label: string;
|
||||
droppable: boolean;
|
||||
belief: BasicBeliefType;
|
||||
hasReduce: boolean;
|
||||
};
|
||||
|
||||
// These are all the types a basic belief could be.
|
||||
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:"};
|
||||
type Emotion = { type: "emotion", id: string, value: string, label: "Emotion recognised:"};
|
||||
|
||||
export type BasicBeliefNode = Node<BasicBeliefNodeData>
|
||||
|
||||
|
||||
/**
|
||||
* 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 BasicBeliefConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 BasicBeliefConnectionSource(_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 BasicBeliefDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 BasicBeliefDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines how a BasicBelief node should be rendered
|
||||
* @param props - Node properties provided by React Flow, including `id` and `data`.
|
||||
* @returns The rendered BasicBeliefNode React element (React.JSX.Element).
|
||||
*/
|
||||
export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
|
||||
const data = props.data;
|
||||
const {updateNodeData} = useFlowStore();
|
||||
const updateValue = (value: string) => updateNodeData(props.id, {...data, belief: {...data.belief, value: value}});
|
||||
const label_input_id = `basic_belief_${props.id}_label_input`;
|
||||
|
||||
type BeliefString = BasicBeliefType["type"];
|
||||
|
||||
function updateBeliefType(newType: BeliefString) {
|
||||
updateNodeData(props.id, {
|
||||
...data,
|
||||
belief: {
|
||||
...data.belief,
|
||||
type: newType,
|
||||
value:
|
||||
newType === "emotion"
|
||||
? emotionOptions[0]
|
||||
: data.belief.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const setBeliefDescription = (value: string) => {
|
||||
updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
|
||||
}
|
||||
|
||||
// Use this
|
||||
const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]
|
||||
|
||||
|
||||
let placeholder = ""
|
||||
let wrapping = ""
|
||||
switch (props.data.belief.type) {
|
||||
case ("keyword"):
|
||||
placeholder = "keyword..."
|
||||
wrapping = '"'
|
||||
break;
|
||||
case ("semantic"):
|
||||
placeholder = "description..."
|
||||
wrapping = '"'
|
||||
break;
|
||||
case ("object"):
|
||||
placeholder = "object..."
|
||||
break;
|
||||
case ("emotion"):
|
||||
// TODO: emotion should probably be a drop-down menu rather than a string
|
||||
// So this placeholder won't hold for always
|
||||
placeholder = "emotion..."
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toolbar nodeId={props.id} allowDelete={true}/>
|
||||
<div className={`${styles.defaultNode} ${styles.nodeBasicBelief /*TODO: Change this*/}`}>
|
||||
<div className={"flex-center-x gap-sm"}>
|
||||
<label htmlFor={label_input_id}>Belief:</label>
|
||||
</div>
|
||||
<div className={"flex-row gap-sm"}>
|
||||
<select
|
||||
value={data.belief.type}
|
||||
onChange={(e) => updateBeliefType(e.target.value as BeliefString)}
|
||||
>
|
||||
<option value="keyword">Keyword said:</option>
|
||||
<option value="semantic">Detected with LLM:</option>
|
||||
<option value="object">Object found:</option>
|
||||
<option value="emotion">Emotion recognised:</option>
|
||||
</select>
|
||||
{wrapping}
|
||||
{data.belief.type === "emotion" && (
|
||||
<select
|
||||
value={data.belief.value}
|
||||
onChange={(e) => updateValue(e.target.value)}
|
||||
>
|
||||
{emotionOptions.map((emotion) => (
|
||||
<option key={emotion} value={emotion.toLowerCase()}>
|
||||
{emotion}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{data.belief.type !== "emotion" &&
|
||||
(<TextField
|
||||
id={label_input_id}
|
||||
value={data.belief.value}
|
||||
setValue={updateValue}
|
||||
placeholder={placeholder}
|
||||
/>)}
|
||||
{wrapping}
|
||||
</div>
|
||||
{data.belief.type === "semantic" && (
|
||||
<div className={"flex-wrap padding-sm"}>
|
||||
<MultilineTextField
|
||||
value={data.belief.description}
|
||||
setValue={setBeliefDescription}
|
||||
placeholder={"Describe the desciption of this LLM belief..."}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
|
||||
allowOnlyConnectionsFromType(["norm", "trigger"]),
|
||||
]}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reduces each BasicBelief, including its children down into its core data.
|
||||
* @param node - The BasicBelief node to reduce.
|
||||
* @param _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 BasicBeliefReduce(node: Node, _nodes: Node[]) {
|
||||
const data = node.data as BasicBeliefNodeData;
|
||||
const result: Record<string, unknown> = {
|
||||
id: node.id,
|
||||
};
|
||||
|
||||
switch (data.belief.type) {
|
||||
case "emotion":
|
||||
result["emotion"] = data.belief.value;
|
||||
break;
|
||||
case "keyword":
|
||||
result["keyword"] = data.belief.value;
|
||||
break;
|
||||
case "object":
|
||||
result["object"] = data.belief.value;
|
||||
break;
|
||||
case "semantic":
|
||||
result["name"] = data.belief.value;
|
||||
result["description"] = data.belief.description;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return result
|
||||
}
|
||||
@@ -1,11 +1,13 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node,
|
||||
} from '@xyflow/react';
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
|
||||
|
||||
|
||||
|
||||
/**
|
||||
@@ -32,7 +34,9 @@ export default function EndNode(props: NodeProps<EndNode>) {
|
||||
<div className={"flex-row gap-sm"}>
|
||||
End
|
||||
</div>
|
||||
<Handle type="target" position={Position.Left} id="target"/>
|
||||
<SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
|
||||
allowOnlyConnectionsFromType(["phase"])
|
||||
]}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -5,8 +5,10 @@ import type { GoalNodeData } from "./GoalNode";
|
||||
*/
|
||||
export const GoalNodeDefaults: GoalNodeData = {
|
||||
label: "Goal Node",
|
||||
name: "",
|
||||
droppable: true,
|
||||
description: "The robot will strive towards this goal",
|
||||
description: "",
|
||||
achieved: false,
|
||||
hasReduce: true,
|
||||
can_fail: false,
|
||||
};
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node,
|
||||
@@ -7,21 +6,31 @@ import {
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import { TextField } from '../../../../components/TextField';
|
||||
import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
|
||||
import useFlowStore from '../VisProgStores';
|
||||
import { DoesPlanIterate, PlanReduce, type Plan } from '../components/Plan';
|
||||
import PlanEditorDialog from '../components/PlanEditor';
|
||||
import { MultilineTextField } from '../../../../components/MultilineTextField';
|
||||
|
||||
/**
|
||||
* The default data dot a phase node
|
||||
* @param label: the label of this phase
|
||||
* @param droppable: whether this node is droppable from the drop bar (initialized as true)
|
||||
* @param desciption: description of the goal
|
||||
* @param desciption: description of the goal - this will be checked for completion
|
||||
* @param hasReduce: whether this node has reducing functionality (true by default)
|
||||
* @param can_fail: whether this plan should be checked- this plan could possible fail
|
||||
* @param plan: The (possible) attached plan to this goal
|
||||
*/
|
||||
export type GoalNodeData = {
|
||||
label: string;
|
||||
name: string;
|
||||
description: string;
|
||||
droppable: boolean;
|
||||
achieved: boolean;
|
||||
hasReduce: boolean;
|
||||
can_fail: boolean;
|
||||
plan?: Plan;
|
||||
};
|
||||
|
||||
export type GoalNode = Node<GoalNodeData>
|
||||
@@ -37,13 +46,18 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
|
||||
|
||||
const text_input_id = `goal_${id}_text_input`;
|
||||
const checkbox_id = `goal_${id}_checkbox`;
|
||||
const planIterate = DoesPlanIterate(data.plan);
|
||||
|
||||
const setDescription = (value: string) => {
|
||||
updateNodeData(id, {...data, description: value});
|
||||
}
|
||||
|
||||
const setAchieved = (value: boolean) => {
|
||||
updateNodeData(id, {...data, achieved: value});
|
||||
const setName= (value: string) => {
|
||||
updateNodeData(id, {...data, name: value})
|
||||
}
|
||||
|
||||
const setFailable = (value: boolean) => {
|
||||
updateNodeData(id, {...data, can_fail: value});
|
||||
}
|
||||
|
||||
return <>
|
||||
@@ -53,21 +67,54 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
|
||||
<label htmlFor={text_input_id}>Goal:</label>
|
||||
<TextField
|
||||
id={text_input_id}
|
||||
value={data.description}
|
||||
setValue={(val) => setDescription(val)}
|
||||
value={data.name}
|
||||
setValue={(val) => setName(val)}
|
||||
placeholder={"To ..."}
|
||||
/>
|
||||
</div>
|
||||
<div className={"flex-row gap-md align-center"}>
|
||||
<label htmlFor={checkbox_id}>Achieved:</label>
|
||||
|
||||
{data.can_fail && (<div>
|
||||
<label htmlFor={text_input_id}>Description/ Condition of goal:</label>
|
||||
<div className={"flex-wrap"}>
|
||||
<MultilineTextField
|
||||
id={text_input_id}
|
||||
value={data.description}
|
||||
setValue={setDescription}
|
||||
placeholder={"Describe the condition of this goal..."}
|
||||
/>
|
||||
</div>
|
||||
</div>)}
|
||||
<div>
|
||||
<label> {!data.plan ? "No plan set to execute while goal is not reached. 🔴" : "Will follow plan '" + data.plan.name + "' until all steps complete. 🟢"} </label>
|
||||
</div>
|
||||
{data.plan && (<div className={"flex-row gap-md align-center " + (planIterate ? "" : styles.planNoIterate)}>
|
||||
{planIterate ? "" : <s></s>}
|
||||
<label htmlFor={checkbox_id}>{!planIterate ? "This plan always succeeds!" : "Check if this plan fails"}:</label>
|
||||
<input
|
||||
id={checkbox_id}
|
||||
type={"checkbox"}
|
||||
checked={data.achieved || false}
|
||||
onChange={(e) => setAchieved(e.target.checked)}
|
||||
disabled={!planIterate}
|
||||
checked={!planIterate || data.can_fail}
|
||||
onChange={(e) => planIterate ? setFailable(e.target.checked) : setFailable(false)}
|
||||
/>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} id="GoalSource"/>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<PlanEditorDialog
|
||||
plan={data.plan}
|
||||
onSave={(plan) => {
|
||||
updateNodeData(id, {
|
||||
...data,
|
||||
plan,
|
||||
});
|
||||
}}
|
||||
description={data.name}
|
||||
/>
|
||||
</div>
|
||||
<MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
|
||||
allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
|
||||
]}/>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
@@ -80,11 +127,12 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
|
||||
*/
|
||||
export function GoalReduce(node: Node, _nodes: Node[]) {
|
||||
const data = node.data as GoalNodeData;
|
||||
return {
|
||||
return {
|
||||
id: node.id,
|
||||
label: data.label,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
achieved: data.achieved,
|
||||
can_fail: data.can_fail,
|
||||
plan: data.plan ? PlanReduce(data.plan) : "",
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { NormNodeData } from "./NormNode";
|
||||
export const NormNodeDefaults: NormNodeData = {
|
||||
label: "Norm Node",
|
||||
droppable: true,
|
||||
condition: undefined,
|
||||
norm: "",
|
||||
hasReduce: true,
|
||||
critical: false,
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node,
|
||||
@@ -7,7 +6,10 @@ import {
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
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';
|
||||
|
||||
/**
|
||||
* The default data dot a phase node
|
||||
@@ -19,6 +21,7 @@ import useFlowStore from '../VisProgStores';
|
||||
export type NormNodeData = {
|
||||
label: string;
|
||||
droppable: boolean;
|
||||
condition?: string; // id of this node's belief.
|
||||
norm: string;
|
||||
hasReduce: boolean;
|
||||
critical: boolean;
|
||||
@@ -67,7 +70,19 @@ export default function NormNode(props: NodeProps<NormNode>) {
|
||||
onChange={(e) => setCritical(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} id="norms"/>
|
||||
|
||||
|
||||
{data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">
|
||||
<label htmlFor={checkbox_id}>Condition/ Belief attached.</label>
|
||||
</div>)}
|
||||
|
||||
|
||||
<MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
|
||||
allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
|
||||
]}/>
|
||||
<SingleConnectionHandle type="target" position={Position.Bottom} id="beliefs" rules={[
|
||||
allowOnlyConnectionsFromType(["basic_belief"])
|
||||
]}/>
|
||||
</div>
|
||||
</>;
|
||||
};
|
||||
@@ -76,16 +91,27 @@ export default function NormNode(props: NodeProps<NormNode>) {
|
||||
/**
|
||||
* Reduces each Norm, including its children down into its relevant data.
|
||||
* @param node The Node Properties of this node.
|
||||
* @param _nodes all the nodes in the graph
|
||||
* @param nodes all the nodes in the graph
|
||||
*/
|
||||
export function NormReduce(node: Node, _nodes: Node[]) {
|
||||
export function NormReduce(node: Node, nodes: Node[]) {
|
||||
const data = node.data as NormNodeData;
|
||||
return {
|
||||
id: node.id,
|
||||
label: data.label,
|
||||
norm: data.norm,
|
||||
critical: data.critical,
|
||||
}
|
||||
|
||||
// conditions nodes - make sure to check for empty arrays
|
||||
const result: Record<string, unknown> = {
|
||||
id: node.id,
|
||||
label: data.label,
|
||||
norm: data.norm,
|
||||
critical: data.critical,
|
||||
};
|
||||
|
||||
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)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -94,7 +120,11 @@ export function NormReduce(node: Node, _nodes: Node[]) {
|
||||
* @param _sourceNodeId the source of the received connection
|
||||
*/
|
||||
export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
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 */))) {
|
||||
data.condition = _sourceNodeId;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -112,7 +142,9 @@ export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) {
|
||||
* @param _sourceNodeId the source of the disconnected connection
|
||||
*/
|
||||
export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
const data = _thisNode.data as NormNodeData;
|
||||
// remove if the target of disconnection was our condition
|
||||
if (_sourceNodeId == data.condition) data.condition = undefined
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -8,4 +8,6 @@ export const PhaseNodeDefaults: PhaseNodeData = {
|
||||
droppable: true,
|
||||
children: [],
|
||||
hasReduce: true,
|
||||
nextPhaseId: null,
|
||||
isFirstPhase: false,
|
||||
};
|
||||
@@ -1,11 +1,12 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node
|
||||
} from '@xyflow/react';
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromType, noSelfConnections} from "../HandleRules.ts";
|
||||
import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
|
||||
import useFlowStore from '../VisProgStores';
|
||||
import { TextField } from '../../../../components/TextField';
|
||||
@@ -16,12 +17,15 @@ import { TextField } from '../../../../components/TextField';
|
||||
* @param droppable: whether this node is droppable from the drop bar (initialized as true)
|
||||
* @param children: ID's of children of this node
|
||||
* @param hasReduce: whether this node has reducing functionality (true by default)
|
||||
* @param nextPhaseId:
|
||||
*/
|
||||
export type PhaseNodeData = {
|
||||
label: string;
|
||||
droppable: boolean;
|
||||
children: string[];
|
||||
hasReduce: boolean;
|
||||
nextPhaseId: string | "end" | null;
|
||||
isFirstPhase: boolean;
|
||||
};
|
||||
|
||||
export type PhaseNode = Node<PhaseNodeData>
|
||||
@@ -50,9 +54,17 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
|
||||
placeholder={"Phase ..."}
|
||||
/>
|
||||
</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"/>
|
||||
<SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
|
||||
noSelfConnections,
|
||||
allowOnlyConnectionsFromType(["phase", "start"]),
|
||||
]}/>
|
||||
<MultiConnectionHandle type="target" position={Position.Bottom} id="data" rules={[
|
||||
allowOnlyConnectionsFromType(["norm", "goal", "trigger"])
|
||||
]}/>
|
||||
<SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
|
||||
noSelfConnections,
|
||||
allowOnlyConnectionsFromType(["phase", "end"]),
|
||||
]}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -65,8 +77,8 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
|
||||
* @returns A collection of all reduced nodes in this phase, starting with this phases' reduced data.
|
||||
*/
|
||||
export function PhaseReduce(node: Node, nodes: Node[]) {
|
||||
const thisnode = node as PhaseNode;
|
||||
const data = thisnode.data as PhaseNodeData;
|
||||
const thisNode = node as PhaseNode;
|
||||
const data = thisNode.data as PhaseNodeData;
|
||||
|
||||
// node typings that are not in phase
|
||||
const nodesNotInPhase: string[] = Object.entries(NodesInPhase)
|
||||
@@ -85,8 +97,8 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
|
||||
|
||||
// Build the result object
|
||||
const result: Record<string, unknown> = {
|
||||
id: thisnode.id,
|
||||
label: data.label,
|
||||
id: thisNode.id,
|
||||
name: data.label,
|
||||
};
|
||||
|
||||
nodesInPhase.forEach((type) => {
|
||||
@@ -109,13 +121,19 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
|
||||
* @param _sourceNodeId the source of the received connection
|
||||
*/
|
||||
export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
const node = _thisNode as PhaseNode
|
||||
const data = node.data as PhaseNodeData
|
||||
// we only add none phase nodes to the children
|
||||
if (!(useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'phase'))) {
|
||||
data.children.push(_sourceNodeId)
|
||||
}
|
||||
const data = _thisNode.data as PhaseNodeData
|
||||
|
||||
const nodes = useFlowStore.getState().nodes;
|
||||
const sourceNode = nodes.find((node) => node.id === _sourceNodeId)!
|
||||
switch (sourceNode.type) {
|
||||
case "phase": break;
|
||||
case "start": data.isFirstPhase = true; break;
|
||||
// we only add none phase or start nodes to the children
|
||||
// endNodes cannot be the source of an outgoing connection
|
||||
// so we don't need to cover them with a special case
|
||||
// before handling the default behavior
|
||||
default: data.children.push(_sourceNodeId); break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -124,7 +142,19 @@ export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
* @param _targetNodeId the target of the created connection
|
||||
*/
|
||||
export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
const data = _thisNode.data as PhaseNodeData
|
||||
const nodes = useFlowStore.getState().nodes;
|
||||
|
||||
const targetNode = nodes.find((node) => node.id === _targetNodeId)
|
||||
if (!targetNode) {throw new Error("Source node not found")}
|
||||
|
||||
// we set the nextPhaseId to the next target's id if the target is a phaseNode,
|
||||
// or "end" if the target node is the end node
|
||||
switch (targetNode.type) {
|
||||
case 'phase': data.nextPhaseId = _targetNodeId; break;
|
||||
case 'end': data.nextPhaseId = "end"; break;
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -133,9 +163,23 @@ export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) {
|
||||
* @param _sourceNodeId the source of the disconnected connection
|
||||
*/
|
||||
export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
const node = _thisNode as PhaseNode
|
||||
const data = node.data as PhaseNodeData
|
||||
data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; });
|
||||
const data = _thisNode.data as PhaseNodeData
|
||||
|
||||
const nodes = useFlowStore.getState().nodes;
|
||||
const sourceNode = nodes.find((node) => node.id === _sourceNodeId)
|
||||
const sourceType = sourceNode ? sourceNode.type : "deleted";
|
||||
switch (sourceType) {
|
||||
case "phase": break;
|
||||
case "start": data.isFirstPhase = false; break;
|
||||
// we only add none phase or start nodes to the children
|
||||
// endNodes cannot be the source of an outgoing connection
|
||||
// so we don't need to cover them with a special case
|
||||
// before handling the default behavior
|
||||
default:
|
||||
data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; });
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -144,5 +188,12 @@ export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string)
|
||||
* @param _targetNodeId the target of the diconnected connection
|
||||
*/
|
||||
export function PhaseDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
const data = _thisNode.data as PhaseNodeData
|
||||
const nodes = useFlowStore.getState().nodes;
|
||||
|
||||
// if the target is a phase or end node set the nextPhaseId to null,
|
||||
// as we are no longer connected to a subsequent phaseNode or to the endNode
|
||||
if (nodes.some((node) => node.id === _targetNodeId && ['phase', 'end'].includes(node.type!))){
|
||||
data.nextPhaseId = null;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Node,
|
||||
} from '@xyflow/react';
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
|
||||
|
||||
|
||||
export type StartNodeData = {
|
||||
@@ -31,7 +32,9 @@ export default function StartNode(props: NodeProps<StartNode>) {
|
||||
<div className={"flex-row gap-sm"}>
|
||||
Start
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} id="source"/>
|
||||
<SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
|
||||
allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
|
||||
]}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,5 @@ import type { TriggerNodeData } from "./TriggerNode";
|
||||
export const TriggerNodeDefaults: TriggerNodeData = {
|
||||
label: "Trigger Node",
|
||||
droppable: true,
|
||||
triggers: [],
|
||||
triggerType: "keywords",
|
||||
hasReduce: true,
|
||||
};
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
Handle,
|
||||
type NodeProps,
|
||||
Position,
|
||||
type Connection,
|
||||
@@ -8,10 +7,12 @@ import {
|
||||
} from '@xyflow/react';
|
||||
import { Toolbar } from '../components/NodeComponents';
|
||||
import styles from '../../VisProg.module.css';
|
||||
import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||
import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
|
||||
import useFlowStore from '../VisProgStores';
|
||||
import { useState } from 'react';
|
||||
import { RealtimeTextField, TextField } from '../../../../components/TextField';
|
||||
import duplicateIndices from '../../../../utils/duplicateIndices';
|
||||
import { PlanReduce, type Plan } from '../components/Plan';
|
||||
import PlanEditorDialog from '../components/PlanEditor';
|
||||
import { BasicBeliefReduce } from './BasicBeliefNode';
|
||||
|
||||
/**
|
||||
* The default data structure for a Trigger node
|
||||
@@ -21,15 +22,13 @@ import duplicateIndices from '../../../../utils/duplicateIndices';
|
||||
*
|
||||
* @property label: the display label of this Trigger node.
|
||||
* @property droppable: Whether this node can be dropped from the toolbar (default: true).
|
||||
* @property triggerType - The type of trigger ("keywords" or a custom string).
|
||||
* @property triggers - The list of keyword triggers (if applicable).
|
||||
* @property hasReduce - Whether this node supports reduction logic.
|
||||
*/
|
||||
export type TriggerNodeData = {
|
||||
label: string;
|
||||
droppable: boolean;
|
||||
triggerType: "keywords" | string;
|
||||
triggers: Keyword[] | never;
|
||||
condition?: string; // id of the belief
|
||||
plan?: Plan;
|
||||
hasReduce: boolean;
|
||||
};
|
||||
|
||||
@@ -42,6 +41,7 @@ export type TriggerNode = Node<TriggerNodeData>
|
||||
*
|
||||
* @param connection - The connection or edge being attempted to connect towards.
|
||||
* @returns `true` if the connection is defined; otherwise, `false`.
|
||||
*
|
||||
*/
|
||||
export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
|
||||
return (connection != undefined);
|
||||
@@ -55,24 +55,30 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
|
||||
export default function TriggerNode(props: NodeProps<TriggerNode>) {
|
||||
const data = props.data;
|
||||
const {updateNodeData} = useFlowStore();
|
||||
|
||||
const setKeywords = (keywords: Keyword[]) => {
|
||||
updateNodeData(props.id, {...data, triggers: keywords});
|
||||
}
|
||||
|
||||
|
||||
return <>
|
||||
<Toolbar nodeId={props.id} allowDelete={true}/>
|
||||
<div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
|
||||
{data.triggerType === "emotion" && (
|
||||
<div className={"flex-row gap-md"}>Emotion?</div>
|
||||
)}
|
||||
{data.triggerType === "keywords" && (
|
||||
<Keywords
|
||||
keywords={data.triggers}
|
||||
setKeywords={setKeywords}
|
||||
/>
|
||||
)}
|
||||
<Handle type="source" position={Position.Right} id="TriggerSource"/>
|
||||
<div className={"flex-row gap-md"}>Triggers when the condition is met.</div>
|
||||
<div className={"flex-row gap-md"}>Condition/ Belief is currently {data.condition ? "" : "not"} set. {data.condition ? "🟢" : "🔴"}</div>
|
||||
<div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
|
||||
<MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
|
||||
allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
|
||||
]}/>
|
||||
<SingleConnectionHandle type="target" position={Position.Bottom} id="beliefs" rules={[
|
||||
allowOnlyConnectionsFromType(["basic_belief"])
|
||||
]}/>
|
||||
|
||||
|
||||
<PlanEditorDialog
|
||||
plan={data.plan}
|
||||
onSave={(plan) => {
|
||||
updateNodeData(props.id, {
|
||||
...data,
|
||||
plan,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
@@ -83,22 +89,16 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
|
||||
* @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;
|
||||
switch (data.triggerType) {
|
||||
case "keywords":
|
||||
return {
|
||||
id: node.id,
|
||||
type: "keywords",
|
||||
label: data.label,
|
||||
keywords: data.triggers,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
...data,
|
||||
id: node.id,
|
||||
};
|
||||
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) : ""
|
||||
return {
|
||||
id: node.id,
|
||||
condition: conditionData, // Make sure we have a condition before reducing, or default to ""
|
||||
plan: !data.plan ? "" : PlanReduce(data.plan), // Make sure we have a plan when reducing, or default to ""
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -108,6 +108,11 @@ export function TriggerReduce(node: Node, _nodes: Node[]) {
|
||||
*/
|
||||
export function TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
const data = _thisNode.data as TriggerNodeData;
|
||||
// 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 */))) {
|
||||
data.condition = _sourceNodeId;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -126,6 +131,9 @@ export function TriggerConnectionSource(_thisNode: Node, _targetNodeId: string)
|
||||
*/
|
||||
export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
||||
// no additional connection logic exists yet
|
||||
const data = _thisNode.data as TriggerNodeData;
|
||||
// remove if the target of disconnection was our condition
|
||||
if (_sourceNodeId == data.condition) data.condition = undefined
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -155,92 +163,4 @@ export type KeywordTriggerNodeProps = {
|
||||
}
|
||||
|
||||
/** Union type for all possible Trigger node configurations. */
|
||||
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
|
||||
|
||||
/**
|
||||
* Renders an input element that allows users to add new keyword triggers.
|
||||
*
|
||||
* When the input is committed, the `addKeyword` callback is called with the new keyword.
|
||||
*
|
||||
* @param param0 - An object containing the `addKeyword` function.
|
||||
* @returns A React element(React.JSX.Element) providing an input for adding keywords.
|
||||
*/
|
||||
function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
|
||||
const [input, setInput] = useState("");
|
||||
|
||||
const text_input_id = "keyword_adder_input";
|
||||
|
||||
return <div className={"flex-row gap-md"}>
|
||||
<label htmlFor={text_input_id}>New Keyword:</label>
|
||||
<RealtimeTextField
|
||||
id={text_input_id}
|
||||
value={input}
|
||||
setValue={setInput}
|
||||
onCommit={() => {
|
||||
if (!input) return;
|
||||
addKeyword(input);
|
||||
setInput("");
|
||||
}}
|
||||
placeholder={"..."}
|
||||
className={"flex-1"}
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays and manages a list of keyword triggers for a Trigger node.
|
||||
* Handles adding, editing, and removing keywords, as well as detecting duplicate entries.
|
||||
*
|
||||
* @param keywords - The current list of keyword triggers.
|
||||
* @param setKeywords - A callback to update the keyword list in the parent node.
|
||||
* @returns A React element(React.JSX.Element) for editing keyword triggers.
|
||||
*/
|
||||
function Keywords({
|
||||
keywords,
|
||||
setKeywords,
|
||||
}: {
|
||||
keywords: Keyword[];
|
||||
setKeywords: (keywords: Keyword[]) => void;
|
||||
}) {
|
||||
type Interpolatable = string | number | boolean | bigint | null | undefined;
|
||||
|
||||
const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
|
||||
|
||||
/** Indices of duplicates in the keyword array. */
|
||||
const [duplicates, setDuplicates] = useState<number[]>([]);
|
||||
|
||||
function replace(id: string, value: string) {
|
||||
value = value.trim();
|
||||
const newKeywords = value === ""
|
||||
? keywords.filter((kw) => kw.id != id)
|
||||
: keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
|
||||
setKeywords(newKeywords);
|
||||
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
|
||||
}
|
||||
|
||||
function add(value: string) {
|
||||
value = value.trim();
|
||||
if (value === "") return;
|
||||
const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
|
||||
setKeywords(newKeywords);
|
||||
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
|
||||
}
|
||||
|
||||
return <>
|
||||
<span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
|
||||
{[...keywords].map(({id, keyword}, index) => {
|
||||
return <div key={id} className={"flex-row gap-md"}>
|
||||
<label htmlFor={inputElementId(id)}>Keyword:</label>
|
||||
<TextField
|
||||
id={inputElementId(id)}
|
||||
value={keyword}
|
||||
setValue={(val) => replace(id, val)}
|
||||
placeholder={"..."}
|
||||
className={"flex-1"}
|
||||
invalid={duplicates.includes(index)}
|
||||
/>
|
||||
</div>;
|
||||
})}
|
||||
<KeywordAdder addKeyword={add} />
|
||||
</>;
|
||||
}
|
||||
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
|
||||
40
src/utils/orderPhaseNodes.ts
Normal file
40
src/utils/orderPhaseNodes.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import type {PhaseNode} from "../pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";
|
||||
|
||||
/**
|
||||
* takes an array of phaseNodes and orders them according to their nextPhaseId attributes,
|
||||
* starting with the phase that has isFirstPhase = true
|
||||
*
|
||||
* @param {PhaseNode[]} nodes an unordered phaseNode array
|
||||
* @returns {PhaseNode[]} the ordered phaseNode array
|
||||
*/
|
||||
export default function orderPhaseNodeArray(nodes: PhaseNode[]) : PhaseNode[] {
|
||||
// find the first phaseNode of the sequence
|
||||
const start = nodes.find(node => node.data.isFirstPhase);
|
||||
if (!start) {
|
||||
throw new Error('No phaseNode with isFirstObject = true found');
|
||||
}
|
||||
|
||||
// prepare for ordering of phaseNodes
|
||||
const orderedPhaseNodes: PhaseNode[] = [];
|
||||
const IdMap = new Map(nodes.map(node => [node.id, node]));
|
||||
let currentNode: PhaseNode | undefined = start;
|
||||
|
||||
// populate orderedPhaseNodes array with the phaseNodes in the correct order
|
||||
while (currentNode) {
|
||||
orderedPhaseNodes.push(currentNode);
|
||||
|
||||
if (!currentNode.data.nextPhaseId) {
|
||||
throw new Error("Incomplete phase sequence, program does not reach the end node");
|
||||
}
|
||||
|
||||
if (currentNode.data.nextPhaseId === "end") break;
|
||||
|
||||
currentNode = IdMap.get(currentNode.data.nextPhaseId);
|
||||
|
||||
if (!currentNode) {
|
||||
throw new Error(`Incomplete phase sequence, phaseNode with id "${orderedPhaseNodes.at(-1)?.data.nextPhaseId}" not found`);
|
||||
}
|
||||
}
|
||||
|
||||
return orderedPhaseNodes;
|
||||
}
|
||||
Reference in New Issue
Block a user