+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 0% | +0/4 | +0% | +0/2 | +0% | +0/2 | +0% | +0/4 | +
| src/components | +
+
+ |
+ 0% | +0/47 | +0% | +0/28 | +0% | +0/21 | +0% | +0/43 | +
| src/components/Logging | +
+
+ |
+ 0% | +0/161 | +0% | +0/69 | +0% | +0/52 | +0% | +0/144 | +
| src/pages/ConnectedRobots | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
| src/pages/Home | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +0% | +0/1 | +0% | +0/1 | +
| src/pages/MonitoringPage | +
+
+ |
+ 0% | +0/55 | +0% | +0/50 | +0% | +0/19 | +0% | +0/50 | +
| src/pages/Robot | +
+
+ |
+ 0% | +0/42 | +0% | +0/20 | +0% | +0/16 | +0% | +0/33 | +
| src/pages/SimpleProgram | +
+
+ |
+ 0% | +0/41 | +0% | +0/24 | +0% | +0/17 | +0% | +0/35 | +
| src/pages/TemplatePage | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +0% | +0/1 | +0% | +0/1 | +
| src/pages/VisProgPage | +
+
+ |
+ 0% | +0/47 | +0% | +0/12 | +0% | +0/19 | +0% | +0/40 | +
| src/pages/VisProgPage/visualProgrammingUI | +
+
+ |
+ 0% | +0/180 | +0% | +0/50 | +0% | +0/76 | +0% | +0/148 | +
| src/pages/VisProgPage/visualProgrammingUI/components | +
+
+ |
+ 0% | +0/253 | +0% | +0/134 | +0% | +0/85 | +0% | +0/232 | +
| src/pages/VisProgPage/visualProgrammingUI/nodes | +
+
+ |
+ 0% | +0/232 | +0% | +0/134 | +0% | +0/87 | +0% | +0/191 | +
| src/utils | +
+
+ |
+ 0% | +0/84 | +0% | +0/30 | +0% | +0/28 | +0% | +0/69 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Routes, Route, Link } from 'react-router'
+import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
+import Home from './pages/Home/Home.tsx'
+import Robot from './pages/Robot/Robot.tsx';
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
+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);
+
+ return (
+ <>
+ <header>
+ <Link to={"/"}>Home</Link>
+ <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
+ </header>
+ <div className={"flex-row justify-center flex-1 min-height-0"}>
+ <main className={"flex-col align-center flex-1 scroll-y"}>
+ <Routes>
+ <Route path="/" element={<Home />} />
+ <Route path="/template" element={<TemplatePage />} />
+ <Route path="/editor" element={<VisProg />} />
+ <Route path="/robot" element={<Robot />} />
+ <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
+ </Routes>
+ </main>
+ {showLogs && <Logging />}
+ </div>
+ </>
+ );
+}
+
+export default App
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {useEffect, useRef, useState} from "react";
+
+import type {LogFilterPredicate} from "./useLogs.ts";
+
+import styles from "./Filters.module.css";
+
+/**
+ * A generic setter type compatible with React's state setters.
+ */
+type Setter<T> = (value: T | ((prev: T) => T)) => void;
+
+/**
+ * Mapping of log level names to their corresponding numeric severity.
+ * Used for comparison in log filtering predicates.
+ */
+const optionMapping = new Map([
+ ["ALL", 0],
+ ["LLM", 9],
+ ["DEBUG", 10],
+ ["INFO", 20],
+ ["WARNING", 30],
+ ["ERROR", 40],
+ ["CRITICAL", 50],
+ ["NONE", 999_999_999_999], // It is technically possible to have a higher level, but this is fine
+]);
+
+/**
+ * Renders a single log-level selector (dropdown) for a specific filter target.
+ *
+ * Used by both the global filter and agent-specific filters.
+ *
+ * @param name - The display name or identifier for the filter target.
+ * @param level - The currently selected log level.
+ * @param setLevel - Function to update the selected log level.
+ * @param onDelete - Optional callback for deleting this filter element.
+ * @returns A JSX element that renders a labeled dropdown for selecting log levels.
+ */
+function LevelPredicateElement({
+ name,
+ level,
+ setLevel,
+ onDelete,
+}: {
+ name: string;
+ level: string;
+ setLevel: (level: string) => void;
+ onDelete?: () => void;
+}) {
+ const normalizedName = name.split(".").pop() || name;
+
+ return <div className={"flex-row gap-sm align-center"}>
+ <label
+ htmlFor={`log_level_${name}`}
+ className={"font-small"}
+ >
+ {onDelete
+ ? <button
+ className={`no-button ${styles.deletable}`}
+ onClick={onDelete}
+ >{normalizedName}:</button>
+ : normalizedName + ':'
+ }
+ </label>
+ <select
+ id={`log_level_${name}`}
+ value={level}
+ onChange={(e) => setLevel(e.target.value)}
+ >
+ {Array.from(optionMapping.keys()).map((key) => (
+ <option key={key} value={key}>{key}</option>
+ ))}
+ </select>
+ </div>
+}
+
+/** Key used for the global log-level predicate in the filter map. */
+const GLOBAL_LOG_LEVEL_PREDICATE_KEY = "global_log_level";
+
+/**
+ * Renders and manages the **global log-level filter**.
+ *
+ * This component defines a baseline log level that all logs must meet or exceed
+ * to be displayed, unless overridden by per-agent filters.
+ *
+ * @param filterPredicates - Map of current log filter predicates.
+ * @param setFilterPredicates - Setter function to update the filter predicates map.
+ * @returns A JSX element rendering the global log-level selector.
+ */
+function GlobalLevelFilter({
+ filterPredicates,
+ setFilterPredicates,
+}: {
+ filterPredicates: Map<string, LogFilterPredicate>;
+ setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+}) {
+ const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
+ const setSelected = (selected: string | null) => {
+ if (!selected || !optionMapping.has(selected)) return;
+
+ setFilterPredicates((curr) => {
+ const next = new Map(curr);
+ next.set(GLOBAL_LOG_LEVEL_PREDICATE_KEY, {
+ predicate: (record) => record.levelno >= optionMapping.get(selected)!,
+ priority: 0,
+ value: selected,
+ });
+ return next;
+ });
+ }
+
+ // Initialize default global level on mount.
+ useEffect(() => {
+ if (filterPredicates.has(GLOBAL_LOG_LEVEL_PREDICATE_KEY)) return;
+ setSelected("INFO");
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []); // Run only once when the component mounts, not when anything changes
+
+ return <LevelPredicateElement
+ name={"Global"}
+ level={selected}
+ setLevel={setSelected}
+ />;
+}
+
+/** Prefix for agent-specific log-level predicate keys in the filter map. */
+const AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX = "agent_log_level_";
+
+/**
+ * Renders and manages **per-agent log-level filters**.
+ *
+ * Allows the user to set specific log levels for individual agents, overriding
+ * the global filter for those agents. Includes functionality to add, edit,
+ * or remove agent-level filters.
+ *
+ * @param filterPredicates - Map of current log filter predicates.
+ * @param setFilterPredicates - Setter function to update the filter predicates map.
+ * @param agentNames - Set of agent names available for filtering.
+ * @returns A JSX element rendering agent-level filters and a dropdown to add new ones.
+ */
+function AgentLevelFilters({
+ filterPredicates,
+ setFilterPredicates,
+ agentNames,
+}: {
+ filterPredicates: Map<string, LogFilterPredicate>;
+ setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+ agentNames: Set<string>;
+}) {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [open, setOpen] = useState(false);
+
+ // Close dropdown or panels when clicking outside or pressing Escape.
+ useEffect(() => {
+ if (!open) return;
+ const onDocClick = (e: MouseEvent) => {
+ if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+ };
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key !== "Escape") return;
+ setOpen(false);
+ e.preventDefault(); // Don't exit fullscreen mode
+ };
+ document.addEventListener("mousedown", onDocClick);
+ document.addEventListener("keydown", onKey);
+ return () => {
+ document.removeEventListener("mousedown", onDocClick);
+ document.removeEventListener("keydown", onKey);
+ };
+ }, [open]);
+
+ // Identify which predicates correspond to agents.
+ const agentPredicates = [...filterPredicates.keys()].filter((key) =>
+ key.startsWith(AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX));
+
+ /**
+ * Creates or updates the log filter predicate for a specific agent.
+ * Falls back to the global log level if no level is specified.
+ *
+ * @param agentName - The name of the agent to filter.
+ * @param level - Optional log level to apply; defaults to the global level.
+ */
+ const setAgentPredicate = (agentName: string, level?: string ) => {
+ level = level ?? filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
+ setFilterPredicates((prev) => {
+ const next = new Map(prev);
+ next.set(AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX + agentName, {
+ predicate: (record) => record.name === agentName
+ ? record.levelno >= optionMapping.get(level!)!
+ : null,
+ priority: 1,
+ value: {agentName, level},
+ });
+ return next;
+ });
+ }
+
+ /**
+ * Deletes the log filter predicate for a specific agent.
+ *
+ * @param agentName - The name of the agent whose filter should be removed.
+ */
+ const deleteAgentPredicate = (agentName: string) => {
+ setFilterPredicates((curr) => {
+ const fullName = AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX + agentName;
+ if (!curr.has(fullName)) return curr; // Return unchanged, no re-render
+ const next = new Map(curr);
+ next.delete(fullName);
+ return next;
+ });
+ }
+
+ return <>
+ {agentPredicates.map((key) => {
+ const {agentName, level} = filterPredicates.get(key)!.value;
+
+ return <LevelPredicateElement
+ key={key}
+ name={agentName}
+ level={level}
+ setLevel={(level) => setAgentPredicate(agentName, level)}
+ onDelete={() => deleteAgentPredicate(agentName)}
+ />;
+ })}
+ <div className={"flex-row gap-sm align-center"}>
+ <label htmlFor={"add_agent"} className={"font-small"}>Add:</label>
+ <select
+ id={"add_agent"}
+ value={""}
+ onChange={(e) => !!e.target.value && setAgentPredicate(e.target.value)}
+ >
+ {["", ...agentNames.keys()].map((key) => (
+ <option key={key} value={key}>{key.split(".").pop()}</option>
+ ))}
+ </select>
+ </div>
+ </>;
+}
+
+/**
+ * Main Filters component that aggregates global and per-agent log filters.
+ *
+ * Combines the global log-level filter and agent-specific filters into a unified UI.
+ * Updates a shared `Map<string, LogFilterPredicate>` to determine which logs are shown.
+ *
+ * @param filterPredicates - The map of all active log filter predicates.
+ * @param setFilterPredicates - Setter to update the map of predicates.
+ * @param agentNames - Set of available agent names to display filters for.
+ * @returns A React component that renders all log filter controls.
+ */
+export default function Filters({
+ filterPredicates,
+ setFilterPredicates,
+ agentNames,
+}: {
+ filterPredicates: Map<string, LogFilterPredicate>;
+ setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+ agentNames: Set<string>;
+}) {
+ return <div className={"flex-1 flex-row flex-wrap gap-md align-center"}>
+ <GlobalLevelFilter filterPredicates={filterPredicates} setFilterPredicates={setFilterPredicates} />
+ <AgentLevelFilters filterPredicates={filterPredicates} setFilterPredicates={setFilterPredicates} agentNames={agentNames} />
+ </div>;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {useEffect, useRef, useState} from "react";
+import {create} from "zustand";
+
+import formatDuration from "../../utils/formatDuration.ts";
+import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
+import Filters from "./Filters.tsx";
+import {type Cell, useCell} from "../../utils/cellStore.ts";
+
+import styles from "./Logging.module.css";
+
+
+/**
+ * Zustand store definition for managing user preferences related to logging.
+ *
+ * Includes flags for toggling relative timestamps and automatic scroll behavior.
+ */
+type LoggingSettings = {
+ /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
+ showRelativeTime: boolean;
+ /** Updates the `showRelativeTime` setting. */
+ setShowRelativeTime: (showRelativeTime: boolean) => void;
+ /** Whether the log view should automatically scroll to the newest entry. */
+ scrollToBottom: boolean;
+ /** Updates the `scrollToBottom` setting. */
+ setScrollToBottom: (scrollToBottom: boolean) => void;
+};
+
+/**
+ * Global Zustand store for logging UI preferences.
+ */
+const useLoggingSettings = create<LoggingSettings>((set) => ({
+ showRelativeTime: false,
+ setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+ scrollToBottom: true,
+ setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
+}));
+
+/**
+ * Renders a single log message entry with colored level indicators and timestamp formatting.
+ *
+ * This component automatically re-renders when the underlying log record (`recordCell`)
+ * changes. It also triggers the `onUpdate` callback whenever the record updates (e.g., for auto-scrolling).
+ *
+ * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
+ * @param onUpdate - Optional callback triggered when the log entry updates.
+ * @returns A JSX element displaying a formatted log message.
+ */
+function LogMessage({
+ recordCell,
+ onUpdate,
+}: {
+ recordCell: Cell<LogRecord>,
+ onUpdate?: () => void,
+}) {
+ const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+ const record = useCell(recordCell);
+
+ /**
+ * Normalizes the log level number to a multiple of 10,
+ * for which there are CSS styles. (e.g., INFO = 20, ERROR = 40).
+ */
+ const normalizedLevelNo = (() => {
+ // By default, the highest level is 50 (CRITICAL). Custom levels can be higher, but we don't have more critical color.
+ if (record.levelno >= 50) return 50;
+
+ return Math.round(record.levelno / 10) * 10;
+ })();
+
+ /** Simplifies the logger name by showing only the last path segment. */
+ const normalizedName = record.name.split(".").pop() || record.name;
+
+ // Notify parent component (e.g. for scroll updates) when this record changes.
+ useEffect(() => {
+ if (onUpdate) onUpdate();
+ }, [record, onUpdate]);
+
+ return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
+ <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
+ <span className={"mono bold"}>{record.levelname}</span>
+ <span className={"mono clickable font-small"}
+ onClick={() => setShowRelativeTime(!showRelativeTime)}
+ >{showRelativeTime
+ ? formatDuration(record.relativeCreated)
+ : new Date(record.created * 1000).toLocaleTimeString()
+ }</span>
+ </div>
+ <div className={"flex-col flex-1 padding-sm"}>
+ <span className={"mono"}>{normalizedName}</span>
+ <span>{record.message}</span>
+ </div>
+ </div>;
+}
+
+/**
+ * Displays a scrollable list of log messages.
+ *
+ * Handles:
+ * - Auto-scrolling when new messages arrive.
+ * - Allowing users to scroll manually and disable auto-scroll.
+ * - A floating "Scroll to bottom" button when not at the bottom.
+ *
+ * @param recordCells - Array of reactive log records to display.
+ * @returns A scrollable log list component.
+ */
+function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
+ const scrollableRef = useRef<HTMLDivElement>(null);
+ const lastElementRef = useRef<HTMLLIElement>(null)
+ const { scrollToBottom, setScrollToBottom } = useLoggingSettings();
+
+ // Disable auto-scroll if the user manually scrolls.
+ useEffect(() => {
+ if (!scrollableRef.current) return;
+ const currentScrollableRef = scrollableRef.current;
+
+ const handleScroll = () => setScrollToBottom(false);
+
+ currentScrollableRef.addEventListener("wheel", handleScroll);
+ currentScrollableRef.addEventListener("touchmove", handleScroll);
+
+ return () => {
+ currentScrollableRef.removeEventListener("wheel", handleScroll);
+ currentScrollableRef.removeEventListener("touchmove", handleScroll);
+ }
+ }, [scrollableRef, setScrollToBottom]);
+
+ /**
+ * Scrolls the last log message into view if auto-scroll is enabled,
+ * or if forced (e.g., user clicks "Scroll to bottom").
+ *
+ * @param force - If true, forces scrolling even if `scrollToBottom` is false.
+ */
+ function scrollLastElementIntoView(force = false) {
+ if ((!scrollToBottom && !force) || !lastElementRef.current) return;
+ lastElementRef.current.scrollIntoView({ behavior: "smooth" });
+ }
+
+ return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
+ <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
+ {recordCells.map((recordCell, i) => (
+ <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
+ <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
+ </li>
+ ))}
+ <li ref={lastElementRef}></li>
+ </ol>
+ {!scrollToBottom && <button
+ className={styles.floatingButton}
+ onClick={() => {
+ setScrollToBottom(true);
+ scrollLastElementIntoView(true);
+ }}
+ >
+ Scroll to bottom
+ </button>}
+ </div>;
+}
+
+/**
+ * Top-level logging panel component.
+ *
+ * Combines:
+ * - The `Filters` component for adjusting log visibility.
+ * - The `LogMessages` component for displaying filtered logs.
+ * - Zustand-managed UI settings (auto-scroll, timestamp display).
+ *
+ * This component uses the `useLogs` hook to fetch and filter logs based on
+ * active predicates, and re-renders automatically as new logs arrive.
+ *
+ * @returns The complete logging UI as a React element.
+ */
+export default function Logging() {
+ const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
+ const { filteredLogs, distinctNames } = useLogs(filterPredicates)
+
+ return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
+ <div className={"flex-row gap-lg justify-between align-center"}>
+ <h2 className={"margin-0"}>Logs</h2>
+ <Filters
+ filterPredicates={filterPredicates}
+ setFilterPredicates={setFilterPredicates}
+ agentNames={distinctNames}
+ />
+ </div>
+ <LogMessages recordCells={filteredLogs} />
+ </div>;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Filters.tsx | +
+
+ |
+ 0% | +0/64 | +0% | +0/27 | +0% | +0/25 | +0% | +0/58 | +
| Logging.tsx | +
+
+ |
+ 0% | +0/40 | +0% | +0/18 | +0% | +0/15 | +0% | +0/34 | +
| useLogs.ts | +
+
+ |
+ 0% | +0/57 | +0% | +0/24 | +0% | +0/12 | +0% | +0/52 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {useCallback, useEffect, useRef, useState} from "react";
+
+import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
+import {cell, type Cell} from "../../utils/cellStore.ts";
+
+/**
+ * Represents a single log record emitted by the backend logging system.
+ *
+ * @property name - The name of the logger or source (e.g., `"agent.core"`).
+ * @property message - The message content of the log record.
+ * @property levelname - The human-readable severity level (e.g., `"INFO"`, `"ERROR"`).
+ * @property levelno - The numeric severity value corresponding to `levelname`.
+ * @property created - The UNIX timestamp (in seconds) when this record was created.
+ * @property relativeCreated - The time (in milliseconds) since the logging system started.
+ * @property reference - (Optional) A reference identifier linking related log messages.
+ * @property firstCreated - Timestamp of the first log in this reference group.
+ * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
+ */
+export type LogRecord = {
+ name: string;
+ message: string;
+ levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+ levelno: number;
+ created: number;
+ relativeCreated: number;
+ reference?: string;
+ firstCreated: number;
+ firstRelativeCreated: number;
+};
+
+/**
+ * A log filter predicate with priority support, used to determine whether
+ * a log record should be displayed.
+ *
+ * This extends a general `PriorityFilterPredicate` and includes an optional
+ * `value` field for UI metadata (e.g., selected log level or agent).
+ *
+ * @template T - The type of record being filtered (here, `LogRecord`).
+ */
+export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ value: any };
+
+ /**
+ * React hook that manages the lifecycle of log records, including:
+ * - Receiving live log messages via Server-Sent Events (SSE),
+ * - Applying priority-based filtering rules,
+ * - Managing distinct logger names and reference-linked messages.
+ *
+ * Returns both the filtered logs (as reactive `Cell<LogRecord>` objects)
+ * and a set of distinct logger names for use in UI components (e.g., Filters).
+ *
+ * @param filterPredicates - A `Map` of log filter predicates, keyed by ID or type.
+ * @returns An object containing:
+ * - `filteredLogs`: The currently visible (filtered) log messages.
+ * - `distinctNames`: A set of all distinct logger names encountered.
+ *
+ * @example
+ * ```ts
+ * const { filteredLogs, distinctNames } = useLogs(activeFilters);
+ * ```
+ */
+export function useLogs(filterPredicates: Map<string, LogFilterPredicate>) {
+ /** Distinct logger names encountered across all logs. */
+ const [distinctNames, setDistinctNames] = useState<Set<string>>(new Set());
+ /** Filtered logs that pass all active predicates, stored as reactive cells. */
+ const [filtered, setFiltered] = useState<Cell<LogRecord>[]>([]);
+
+ /** Persistent reference to the active EventSource connection. */
+ const sseRef = useRef<EventSource | null>(null);
+ /** Keeps a stable reference to the current filter map (avoids re-renders). */
+ const filtersRef = useRef(filterPredicates);
+ /** Stores all received logs (the unfiltered full history). */
+ const logsRef = useRef<LogRecord[]>([]);
+
+ /** Map to store the first message for each reference, instance can be updated to change contents. */
+ const firstByRefRef = useRef<Map<string, Cell<LogRecord>>>(new Map());
+
+ /**
+ * Apply all active filter predicates to a log record.
+ * @param log The log record to apply the filters to.
+ * @returns `true` if the record passes all filters; otherwise `false`.
+ */
+ const applyFilters = useCallback((log: LogRecord) =>
+ applyPriorityPredicates(log, [...filtersRef.current.values()]), []);
+
+ /**
+ * Fully recomputes the filtered log list based on the current
+ * filter predicates and historical logs.
+ *
+ * Should be invoked whenever the filter map changes.
+ */
+ const recomputeFiltered = useCallback(() => {
+ const newFiltered: Cell<LogRecord>[] = [];
+ firstByRefRef.current = new Map();
+
+ for (const message of logsRef.current) {
+ const messageCell = cell<LogRecord>({
+ ...message,
+ firstCreated: message.created,
+ firstRelativeCreated: message.relativeCreated,
+ });
+
+ // Handle reference grouping: update the first message in the group.
+ if (message.reference) {
+ const first = firstByRefRef.current.get(message.reference);
+ if (first) {
+ // Update the first's contents
+ first.set((prev) => ({
+ ...message,
+ firstCreated: prev.firstCreated ?? prev.created,
+ firstRelativeCreated: prev.firstRelativeCreated ?? prev.relativeCreated,
+ }));
+
+ continue; // Don't add it to the list again (it's a duplicate).
+ } else {
+ // Add the first message with this reference to the registry
+ firstByRefRef.current.set(message.reference, messageCell);
+ }
+ }
+
+ // Include only if it passes current filters.
+ if (applyFilters(message)) {
+ newFiltered.push(messageCell);
+ }
+ }
+
+ setFiltered(newFiltered);
+ }, [applyFilters, setFiltered]);
+
+ // Re-filter all logs whenever filter predicates change.
+ useEffect(() => {
+ filtersRef.current = filterPredicates;
+ recomputeFiltered();
+ }, [filterPredicates, recomputeFiltered]);
+
+ /**
+ * Handles a newly received log record.
+ * Updates the full log history, distinct names set, and filtered log list.
+ *
+ * @param message - The new log record to process.
+ */
+ const handleNewMessage = useCallback((message: LogRecord) => {
+ // Store in complete history for future refiltering.
+ logsRef.current.push(message);
+
+ // Track distinct logger names.
+ setDistinctNames((prev) => {
+ if (prev.has(message.name)) return prev;
+ const newSet = new Set(prev);
+ newSet.add(message.name);
+ return newSet;
+ });
+
+ // Wrap in a reactive cell for UI binding.
+ const messageCell = cell<LogRecord>({
+ ...message,
+ firstCreated: message.created,
+ firstRelativeCreated: message.relativeCreated,
+ });
+
+ // Handle reference-linked updates.
+ if (message.reference) {
+ const first = firstByRefRef.current.get(message.reference);
+ if (first) {
+ // Update the first's contents
+ first.set((prev) => ({
+ ...message,
+ firstCreated: prev.firstCreated ?? prev.created,
+ firstRelativeCreated: prev.firstRelativeCreated ?? prev.relativeCreated,
+ }));
+
+ return; // Do not duplicate reference group entries.
+ } else {
+ firstByRefRef.current.set(message.reference, messageCell);
+ }
+ }
+
+ // Only append if message passes filters.
+ if (applyFilters(message)) {
+ setFiltered((curr) => [...curr, messageCell]);
+ }
+ }, [applyFilters, setFiltered]);
+
+ /**
+ * Initializes the SSE (Server-Sent Events) stream for real-time logs.
+ *
+ * Subscribes to messages from the backend logging endpoint and
+ * dispatches each message to `handleNewMessage`.
+ *
+ * Cleans up the EventSource connection when the component unmounts.
+ */
+ useEffect(() => {
+ // Only create one SSE connection for the lifetime of the hook.
+ if (sseRef.current) return;
+
+ const es = new EventSource("http://localhost:8000/logs/stream");
+ sseRef.current = es;
+
+ es.onmessage = (event) => {
+ const data: LogRecord = JSON.parse(event.data);
+ handleNewMessage(data);
+ };
+
+ return () => {
+ es.close();
+ sseRef.current = null;
+ };
+ }, [handleNewMessage]);
+
+ return {filteredLogs: filtered, distinctNames};
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | 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 ?? ""}
+ `}
+ />
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 | + + + + + + + + + + + + + + + + + + + + + + | import {useEffect, useRef} from "react";
+
+/**
+ * A React component that automatically scrolls itself into view whenever rendered.
+ *
+ * This component is especially useful in scrollable containers to keep the most
+ * recent content visible (e.g., chat applications, live logs, or notifications).
+ *
+ * It uses the browser's `Element.scrollIntoView()` API with smooth scrolling behavior.
+ *
+ * @returns A `<div>` element that scrolls into view when mounted or updated.
+ */
+export default function ScrollIntoView() {
+ /** Ref to the DOM element that will be scrolled into view. */
+ const elementRef = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ if (elementRef.current) elementRef.current.scrollIntoView({ behavior: "smooth" });
+ });
+
+ return <div ref={elementRef} />;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {useEffect, useState} from "react";
+import styles from "./TextField.module.css";
+
+/**
+ * A styled text input that updates its value **in real time** at every keystroke.
+ *
+ * Automatically toggles between read-only and editable modes to integrate with
+ * drag-based UIs (like React Flow). Calls `onCommit` when editing is completed.
+ *
+ * @param props - Component properties.
+ * @param props.value - The current text input value.
+ * @param props.setValue - Callback invoked on every keystroke to update the value.
+ * @param props.onCommit - Callback invoked when editing is finalized (on blur or Enter).
+ * @param props.placeholder - Optional placeholder text displayed when the input is empty.
+ * @param props.className - Optional additional CSS class names.
+ * @param props.id - Optional unique HTML `id` for the input element.
+ * @param props.ariaLabel - Optional ARIA label for accessibility.
+ * @param props.invalid - If true, applies error styling to indicate invalid input.
+ *
+ * @returns A styled `<input>` element that updates its value in real time.
+ */
+export function RealtimeTextField({
+ value = "",
+ setValue,
+ onCommit,
+ placeholder,
+ className,
+ id,
+ ariaLabel,
+ invalid = false,
+} : {
+ value: string,
+ setValue: (value: string) => void,
+ onCommit: () => void,
+ placeholder?: string,
+ className?: string,
+ id?: string,
+ ariaLabel?: string,
+ invalid?: boolean,
+}) {
+ /** Tracks whether the input is currently read-only (for drag compatibility). */
+ const [readOnly, setReadOnly] = useState(true);
+
+ /** Finalizes editing and calls `onCommit` when the user exits the field. */
+ const updateData = () => {
+ setReadOnly(true);
+ onCommit();
+ };
+
+ /** Handles the Enter key — commits the input by triggering a blur event. */
+ const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+ if (event.key === "Enter")
+ (event.target as HTMLInputElement).blur(); };
+
+ return <input
+ type={"text"}
+ placeholder={placeholder}
+ value={value}
+ onChange={(e) => setValue(e.target.value)}
+ onFocus={() => setReadOnly(false)}
+ onBlur={updateData}
+ onKeyDown={updateOnEnter}
+ readOnly={readOnly}
+ id={id}
+ // ReactFlow uses the "drag" / "nodrag" classes to enable / disable dragging of nodes
+ className={`${readOnly ? "drag" : "nodrag"} flex-1 ${styles.textField} ${invalid ? styles.invalid : ""} ${className}`}
+ aria-label={ariaLabel}
+ />;
+}
+
+/**
+ * A styled text input that updates its value **only on commit** (when the user
+ * presses Enter or clicks outside the input).
+ *
+ * Internally wraps `RealtimeTextField` and buffers input changes locally,
+ * calling `setValue` only once editing is complete.
+ *
+ * @param props - Component properties.
+ * @param props.value - The current text input value.
+ * @param props.setValue - Callback invoked when the user commits the change.
+ * @param props.placeholder - Optional placeholder text displayed when the input is empty.
+ * @param props.className - Optional additional CSS class names.
+ * @param props.id - Optional unique HTML `id` for the input element.
+ * @param props.ariaLabel - Optional ARIA label for accessibility.
+ * @param props.invalid - If true, applies error styling to indicate invalid input.
+ *
+ * @returns A styled `<input>` element that updates its parent state only on commit.
+ */
+export function TextField({
+ value = "",
+ setValue,
+ placeholder,
+ className,
+ id,
+ ariaLabel,
+ invalid = false,
+} : {
+ value: string,
+ setValue: (value: string) => void,
+ placeholder?: string,
+ className?: string,
+ id?: string,
+ ariaLabel?: string,
+ invalid?: boolean,
+}) {
+ const [inputValue, setInputValue] = useState(value);
+
+ useEffect(() => {
+ setInputValue(value);
+ }, [value]);
+
+ const onCommit = () => setValue(inputValue);
+
+ return <RealtimeTextField
+ placeholder={placeholder}
+ value={inputValue}
+ setValue={setInputValue}
+ onCommit={onCommit}
+ id={id}
+ className={className}
+ ariaLabel={ariaLabel}
+ invalid={invalid}
+ />;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | + + + + + + + + + + + + + + + + + + + + + + + + | import { 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)
+
+ return (
+ <div className="card">
+ <button onClick={() => setCount((count) => count + 1)}>
+ count is {count}
+ </button>
+ <button className='reset' onClick={() => setCount(0)}>
+ Reset Counter
+ </button>
+ </div>
+ )
+}
+export default Counter |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| MultilineTextField.tsx | +
+
+ |
+ 0% | +0/21 | +0% | +0/16 | +0% | +0/7 | +0% | +0/20 | +
| ScrollIntoView.tsx | +
+
+ |
+ 0% | +0/5 | +0% | +0/2 | +0% | +0/2 | +0% | +0/4 | +
| TextField.tsx | +
+
+ |
+ 0% | +0/16 | +0% | +0/10 | +0% | +0/8 | +0% | +0/15 | +
| components.tsx | +
+
+ |
+ 0% | +0/5 | +100% | +0/0 | +0% | +0/4 | +0% | +0/4 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | + + + + + + + + + + + + + | import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ </StrictMode>,
+)
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useState } from 'react'
+
+/**
+ * Displays the current connection status of a robot in real time.
+ *
+ * Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
+ * simple boolean JSON messages (`true` or `false`). Updates automatically when
+ * the robot connects or disconnects.
+ *
+ * @returns A React element showing the current robot connection status.
+ */
+export default function ConnectedRobots() {
+
+ /**
+ * The current connection state:
+ * - `true`: Robot is connected.
+ * - `false`: Robot is not connected.
+ * - `null`: Connection status is unknown (initial check in progress).
+ */
+ const [connected, setConnected] = useState<boolean | null>(null);
+
+ useEffect(() => {
+ // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+ // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+ const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
+ eventSource.onmessage = (event) => {
+
+ // Expecting messages in JSON format: `true` or `false`
+ console.log("received message:", event.data);
+ try {
+ const data = JSON.parse(event.data);
+
+ try {
+ setConnected(data)
+ }
+ catch {
+ console.log("couldnt extract connected from incoming ping data")
+ }
+
+ } catch {
+ console.log("Ping message not in correct format:", event.data);
+ }
+ };
+
+ // Clean up the SSE connection when the component unmounts.
+ return () => eventSource.close();
+ }, []);
+
+ return (
+ <div>
+ <h1>Is robot currently connected?</h1>
+ <div>
+ <h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
+ <h3>
+ {connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
+ </h3>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ConnectedRobots.tsx | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Link } from 'react-router'
+import pepperLogo from '../../assets/pepper_transp2_small.svg'
+import styles from './Home.module.css'
+
+/**
+ * The home page component providing navigation and project branding.
+ *
+ * Renders the Pepper logo and a set of navigational links
+ * implemented via React Router.
+ *
+ * @returns A JSX element representing the app’s home page.
+ */
+function Home() {
+ return (
+ <div className={`flex-col ${styles.gapXl}`}>
+ <div className="logoPepperScaling">
+ <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+ <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
+ </a>
+ </div>
+ <div className={styles.links}>
+ <Link to={"/robot"}>Robot Interaction →</Link>
+ <Link to={"/editor"}>Editor →</Link>
+ <Link to={"/template"}>Template →</Link>
+ <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
+ </div>
+ </div>
+ )
+}
+
+export default Home |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Home.tsx | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +0% | +0/1 | +0% | +0/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useEffect, useState } from 'react';
+import styles from './MonitoringPage.module.css';
+import { sendAPICall } from './MonitoringPageAPI';
+
+// --- GESTURE COMPONENT ---
+export const GestureControls: React.FC = () => {
+ const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
+
+ const gestures = [
+ { label: "Wave", value: "animations/Stand/Gestures/Hey_1" },
+ { label: "Think", value: "animations/Stand/Emotions/Neutral/Puzzled_1" },
+ { label: "Explain", value: "animations/Stand/Gestures/Explain_4" },
+ { label: "You", value: "animations/Stand/Gestures/You_1" },
+ { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
+ { label: "Laugh", value: "animations/Stand/Emotions/Positive/Laugh_2" },
+ { label: "Lonely", value: "animations/Stand/Emotions/Neutral/Lonely_1" },
+ { label: "Suprise", value: "animations/Stand/Emotions/Negative/Surprise_1" },
+ { label: "Hurt", value: "animations/Stand/Emotions/Negative/Hurt_2" },
+ { label: "Angry", value: "animations/Stand/Emotions/Negative/Angry_4" },
+ ];
+ return (
+ <div className={styles.gestures}>
+ <h4>Gestures</h4>
+ <div className={styles.gestureInputGroup}>
+ <select
+ value={selectedGesture}
+ onChange={(e) => setSelectedGesture(e.target.value)}
+ >
+ {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
+ </select>
+ <button onClick={() => sendAPICall("gesture", selectedGesture)}>
+ Actuate
+ </button>
+ </div>
+ </div>
+ );
+};
+
+// --- PRESET SPEECH COMPONENT ---
+export const SpeechPresets: React.FC = () => {
+ const phrases = [
+ { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
+ { label: "Repeat please", text: "Could you repeat that please" },
+ { label: "About yourself", text: "Tell me something about yourself" },
+ ];
+
+ return (
+ <div className={styles.speech}>
+ <h4>Speech Presets</h4>
+ <ul>
+ {phrases.map((phrase, i) => (
+ <li key={i}>
+ <button
+ className={styles.speechBtn}
+ onClick={() => sendAPICall("speech", phrase.text)}
+ >
+ "{phrase.label}"
+ </button>
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+};
+
+// --- DIRECT SPEECH (INPUT) COMPONENT ---
+export const DirectSpeechInput: React.FC = () => {
+ const [text, setText] = useState("");
+
+ const handleSend = () => {
+ if (!text.trim()) return;
+ sendAPICall("speech", text);
+ setText(""); // Clear after sending
+ };
+
+ return (
+ <div className={styles.directSpeech}>
+ <h4>Direct Pepper Speech</h4>
+ <div className={styles.speechInput}>
+ <input
+ type="text"
+ value={text}
+ onChange={(e) => setText(e.target.value)}
+ placeholder="Type message..."
+ onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+ />
+ <button onClick={handleSend}>Send</button>
+ </div>
+ </div>
+ );
+};
+
+// --- interface for goals/triggers/norms/conditional norms ---
+type StatusItem = {
+ id?: string | number;
+ achieved?: boolean;
+ description?: string;
+ label?: string;
+ norm?: string;
+ name?: string;
+};
+
+interface StatusListProps {
+ title: string;
+ items: StatusItem[];
+ type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
+ activeIds: Record<string, boolean>;
+ setActiveIds?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+ currentGoalIndex?: number;
+}
+
+// --- STATUS LIST COMPONENT ---
+export const StatusList: React.FC<StatusListProps> = ({
+ title,
+ items,
+ type,
+ activeIds,
+ setActiveIds,
+ currentGoalIndex // Destructure this prop
+}) => {
+ return (
+ <section className={styles.phaseBox}>
+ <h3>{title}</h3>
+ <ul>
+ {items.map((item, idx) => {
+ if (item.id === undefined) return null;
+ const isActive = !!activeIds[item.id];
+ const showIndicator = type !== 'norm';
+ const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
+ const canOverride = (showIndicator && !isActive) || (type === 'cond_norm' && isActive);
+
+
+
+ const handleOverrideClick = () => {
+ if (!canOverride) return;
+ if (type === 'cond_norm' && isActive){
+ {/* Unachieve conditional norm */}
+ sendAPICall("override_unachieve", String(item.id));
+ }
+ else {
+ if(type === 'goal')
+ if(setActiveIds)
+ {setActiveIds(prev => ({ ...prev, [String(item.id)]: true }));}
+
+ sendAPICall("override", String(item.id));
+ }
+ };
+
+ return (
+ <li key={item.id ?? idx} className={styles.statusItem}>
+ {showIndicator && (
+ <span
+ className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
+ onClick={handleOverrideClick}
+ >
+ {isActive ? "✔️" : "❌"}
+ </span>
+ )}
+ <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.name || item.norm}
+ {isCurrentGoal && " (Current)"}
+ </span>
+ </li>
+ );
+ })}
+ </ul>
+ </section>
+ );
+};
+
+
+// --- Robot Connected ---
+export const RobotConnected = () => {
+
+ /**
+ * The current connection state:
+ * - `true`: Robot is connected.
+ * - `false`: Robot is not connected.
+ * - `null`: Connection status is unknown (initial check in progress).
+ */
+ const [connected, setConnected] = useState<boolean | null>(null);
+
+ useEffect(() => {
+ // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+ // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+ const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
+ eventSource.onmessage = (event) => {
+
+ // Expecting messages in JSON format: `true` or `false`
+ //commented out this log as it clutters console logs, but might be useful to debug
+ //console.log("received message:", event.data);
+ try {
+ const data = JSON.parse(event.data);
+
+ try {
+ setConnected(data)
+ }
+ catch {
+ console.log("couldnt extract connected from incoming ping data")
+ }
+
+ } catch {
+ console.log("Ping message not in correct format:", event.data);
+ }
+ };
+
+ // Clean up the SSE connection when the component unmounts.
+ return () => eventSource.close();
+ }, []);
+
+ return (
+ <div>
+ <h3>Connection:</h3>
+ <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
+ </div>
+ )
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| MonitoringPageComponents.tsx | +
+
+ |
+ 0% | +0/55 | +0% | +0/50 | +0% | +0/19 | +0% | +0/50 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect, useRef } from 'react'
+
+/**
+ * Displays a live robot interaction panel with user input, conversation history,
+ * and real-time updates from the robot backend via Server-Sent Events (SSE).
+ *
+ * @returns A React element rendering the interactive robot UI.
+ */
+export default function Robot() {
+ /** The text message currently entered by the user. */
+ const [message, setMessage] = useState('');
+
+ /** Whether the robot’s microphone or listening mode is currently active. */
+ const [listening, setListening] = useState(false);
+ /** The ongoing conversation history as a sequence of user/assistant messages. */
+ const [conversation, setConversation] = useState<
+ {"role": "user" | "assistant", "content": string}[]>([])
+ /** Reference to the scrollable conversation container for auto-scrolling. */
+ const conversationRef = useRef<HTMLDivElement | null>(null);
+ /**
+ * Index used to force refresh the SSE connection or clear conversation.
+ * Incrementing this value triggers a reset of the live data stream.
+ */
+ const [conversationIndex, setConversationIndex] = useState(0);
+
+ /**
+ * Sends a message to the robot backend.
+ *
+ * Makes a POST request to `/message` with the user’s text.
+ * The backend may respond with confirmation or error information.
+ */
+ const sendMessage = async () => {
+ try {
+ const response = await fetch("http://localhost:8000/message", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ message }),
+ });
+ const data = await response.json();
+ console.log(data);
+ } catch (error) {
+ console.error("Error sending message: ", error);
+ }
+ };
+
+ /**
+ * Establishes a persistent Server-Sent Events (SSE) connection
+ * to receive real-time updates from the robot backend.
+ *
+ * Handles three event types:
+ * - `voice_active`: whether the robot is currently listening.
+ * - `speech`: recognized user speech input.
+ * - `llm_response`: the robot’s language model-generated reply.
+ *
+ * The connection resets whenever `conversationIndex` changes.
+ */
+ useEffect(() => {
+ const eventSource = new EventSource("http://localhost:8000/sse");
+
+ eventSource.onmessage = (event) => {
+ try {
+ const data = JSON.parse(event.data);
+ if ("voice_active" in data) setListening(data.voice_active);
+ if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
+ if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
+ } catch {
+ console.log("Unparsable SSE message:", event.data);
+ }
+ };
+
+ return () => {
+ eventSource.close();
+ };
+ }, [conversationIndex]);
+
+ /**
+ * Automatically scrolls the conversation view to the bottom
+ * whenever a new message is added.
+ */
+ useEffect(() => {
+ if (!conversationRef || !conversationRef.current) return;
+ conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+ }, [conversation]);
+
+ return (
+ <>
+ <h1>Robot interaction</h1>
+ <h2>Force robot speech</h2>
+ <div className={"flex-row gap-md justify-center"}>
+ <input
+ type="text"
+ value={message}
+ onChange={(e) => setMessage(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
+ placeholder="Enter a message"
+ />
+ <button onClick={sendMessage}>Speak</button>
+ </div>
+ <div className={"flex-col gap-lg align-center"}>
+ <h2>Conversation</h2>
+ <p>Listening {listening ? "🟢" : "🔴"}</p>
+ <div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
+ {conversation.map((item, i) => (
+ <p key={i}
+ style={{
+ backgroundColor: item["role"] == "user"
+ ? "color-mix(in oklab, canvas, blue 20%)"
+ : "color-mix(in oklab, canvas, gray 20%)",
+ whiteSpace: "pre-line",
+ }}
+ className={"round-md padding-md"}
+ >{item["content"]}</p>
+ ))}
+ </div>
+ <div className={"flex-row gap-md justify-center"}>
+ <button onClick={() => {
+ setConversationIndex((conversationIndex) => conversationIndex + 1)
+ setConversation([])
+ }}>Reset</button>
+ <button onClick={() => {
+ setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
+ setConversation([])
+ }}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
+ </div>
+ </div>
+ </>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Robot.tsx | +
+
+ |
+ 0% | +0/42 | +0% | +0/20 | +0% | +0/16 | +0% | +0/33 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import styles from "./SimpleProgram.module.css";
+import useProgramStore from "../../utils/programStore.ts";
+
+/**
+ * Generic container box with a header and content area.
+ */
+type BoxProps = {
+ title: string;
+ children: React.ReactNode;
+};
+
+const Box: React.FC<BoxProps> = ({ title, children }) => (
+ <div className={styles.box}>
+ <div className={styles.boxHeader}>{title}</div>
+ <div className={styles.boxContent}>{children}</div>
+ </div>
+);
+
+/**
+ * Renders a list of goals for a phase.
+ * Expects goal-like objects from the program store.
+ */
+const GoalList: React.FC<{ goals: unknown[] }> = ({ goals }) => {
+ if (!goals.length) {
+ return <p className={styles.empty}>No goals defined.</p>;
+ }
+
+ return (
+ <ul className={styles.iconList}>
+ {goals.map((g, idx) => {
+ const goal = g as {
+ id?: string;
+ description?: string;
+ achieved?: boolean;
+ };
+
+ return (
+ <li key={goal.id ?? idx}>
+ <span
+ className={
+ goal.achieved ? styles.successIcon : styles.failIcon
+ }
+ >
+ {goal.achieved ? "✔" : "✖"}
+ </span>
+ {goal.description ?? "Unnamed goal"}
+ </li>
+ );
+ })}
+ </ul>
+ );
+};
+
+/**
+ * Renders a list of triggers for a phase.
+ */
+const TriggerList: React.FC<{ triggers: unknown[] }> = ({ triggers }) => {
+ if (!triggers.length) {
+ return <p className={styles.empty}>No triggers defined.</p>;
+ }
+
+ return (
+ <ul className={styles.iconList}>
+ {triggers.map((t, idx) => {
+ const trigger = t as {
+ id?: string;
+ label?: string;
+ };
+
+ return (
+ <li key={trigger.id ?? idx}>
+ <span className={styles.failIcon}>✖</span>
+ {trigger.label ?? "Unnamed trigger"}
+ </li>
+ );
+ })}
+ </ul>
+ );
+};
+
+/**
+ * Renders a list of norms for a phase.
+ */
+const NormList: React.FC<{ norms: unknown[] }> = ({ norms }) => {
+ if (!norms.length) {
+ return <p className={styles.empty}>No norms defined.</p>;
+ }
+
+ return (
+ <ul className={styles.bulletList}>
+ {norms.map((n, idx) => {
+ const norm = n as {
+ id?: string;
+ norm?: string;
+ };
+
+ return <li key={norm.id ?? idx}>{norm.norm ?? "Unnamed norm"}</li>;
+ })}
+ </ul>
+ );
+};
+
+/**
+ * Displays all phase-related information in a grid layout.
+ */
+type PhaseGridProps = {
+ norms: unknown[];
+ goals: unknown[];
+ triggers: unknown[];
+};
+
+const PhaseGrid: React.FC<PhaseGridProps> = ({
+ norms,
+ goals,
+ triggers,
+}) => (
+ <div className={styles.phaseGrid}>
+ <Box title="Norms">
+ <NormList norms={norms} />
+ </Box>
+
+ <Box title="Triggers">
+ <TriggerList triggers={triggers} />
+ </Box>
+
+ <Box title="Goals">
+ <GoalList goals={goals} />
+ </Box>
+
+ <Box title="Conditional Norms">
+ <p className={styles.empty}>No conditional norms defined.</p>
+ </Box>
+ </div>
+);
+
+/**
+ * Main program viewer.
+ * Reads all data from the program store and allows
+ * navigating between phases.
+ */
+const SimpleProgram: React.FC = () => {
+ const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+ const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+ const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+ const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+ const phaseIds = getPhaseIds();
+ const [phaseIndex, setPhaseIndex] = React.useState(0);
+
+ if (phaseIds.length === 0) {
+ return <p className={styles.empty}>No program loaded.</p>;
+ }
+
+ const phaseId = phaseIds[phaseIndex];
+
+ return (
+ <div className={styles.container}>
+ <header className={styles.header}>
+ <h2>
+ Phase {phaseIndex + 1} / {phaseIds.length}
+ </h2>
+
+ <div className={styles.controls}>
+ <button
+ disabled={phaseIndex === 0}
+ onClick={() => setPhaseIndex((i) => i - 1)}
+ >
+ ◀ Prev
+ </button>
+
+ <button
+ disabled={phaseIndex === phaseIds.length - 1}
+ onClick={() => setPhaseIndex((i) => i + 1)}
+ >
+ Next ▶
+ </button>
+ </div>
+ </header>
+
+ <div className={styles.content}>
+ <PhaseGrid
+ norms={getNormsInPhase(phaseId)}
+ goals={getGoalsInPhase(phaseId)}
+ triggers={getTriggersInPhase(phaseId)}
+ />
+ </div>
+ </div>
+ );
+};
+
+export default SimpleProgram;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| SimpleProgram.tsx | +
+
+ |
+ 0% | +0/41 | +0% | +0/24 | +0% | +0/17 | +0% | +0/35 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | + + + + + + + + + + | import Counter from '../../components/components.tsx' + +function TemplatePage() { + return ( + <> + <Counter /> + </> + ) +} + +export default TemplatePage |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Template.tsx | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +0% | +0/1 | +0% | +0/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ Background,
+ Controls,
+ Panel,
+ ReactFlow,
+ ReactFlowProvider,
+ MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {type CSSProperties, 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'
+import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
+import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
+import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
+
+// --| config starting params for flow |--
+
+
+/**
+ * defines how the default edge looks inside the editor
+ */
+const DEFAULT_EDGE_OPTIONS = {
+ type: 'default',
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ color: '#505050',
+ },
+};
+
+
+/**
+ * defines what functions in the FlowState store map to which names,
+ * @param state
+ */
+const selector = (state: FlowState) => ({
+ nodes: state.nodes,
+ edges: state.edges,
+ onNodesChange: state.onNodesChange,
+ onEdgesDelete: state.onEdgesDelete,
+ onEdgesChange: state.onEdgesChange,
+ onConnect: state.onConnect,
+ onReconnectStart: state.onReconnectStart,
+ onReconnectEnd: state.onReconnectEnd,
+ onReconnect: state.onReconnect,
+ undo: state.undo,
+ redo: state.redo,
+ beginBatchAction: state.beginBatchAction,
+ endBatchAction: state.endBatchAction,
+ scrollable: state.scrollable
+});
+
+// --| define ReactFlow editor |--
+
+/**
+ * Defines the ReactFlow visual programming editor component
+ * any implementations of editor logic should be encapsulated where possible
+ * so the Component definition stays as readable as possible
+ * @constructor
+ */
+const VisProgUI = () => {
+ const {
+ nodes, edges,
+ onNodesChange,
+ onEdgesDelete,
+ onEdgesChange,
+ onConnect,
+ onReconnect,
+ onReconnectStart,
+ onReconnectEnd,
+ undo,
+ redo,
+ beginBatchAction,
+ endBatchAction,
+ scrollable
+ } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
+ const [zoom, setZoom] = useState(1);
+ // adds ctrl+z and ctrl+y support to respectively undo and redo actions
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ if (e.ctrlKey && e.key === 'z') undo();
+ if (e.ctrlKey && e.key === 'y') redo();
+ };
+ window.addEventListener('keydown', handler);
+ return () => window.removeEventListener('keydown', handler);
+ });
+
+ return (
+ <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
+ <ReactFlow
+ nodes={nodes}
+ edges={edges}
+ defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+ nodeTypes={NodeTypes}
+ onNodesChange={onNodesChange}
+ onEdgesDelete={onEdgesDelete}
+ onEdgesChange={onEdgesChange}
+ onReconnect={onReconnect}
+ onReconnectStart={onReconnectStart}
+ onReconnectEnd={onReconnectEnd}
+ onConnect={onConnect}
+ onNodeDragStart={beginBatchAction}
+ onNodeDragStop={endBatchAction}
+ preventScrolling={scrollable}
+ onMove={(_, viewport) => setZoom(viewport.zoom)}
+ snapToGrid
+ fitView
+ proOptions={{hideAttribution: true}}
+ >
+ <Panel position="top-center" className={styles.dndPanel}>
+ <DndToolbar/> {/* contains the drag and drop panel for nodes */}
+ </Panel>
+ <Panel position = "bottom-left" className={styles.saveLoadPanel}>
+ <SaveLoadPanel></SaveLoadPanel>
+ </Panel>
+ <Panel position="bottom-center">
+ <button onClick={() => undo()}>undo</button>
+ <button onClick={() => redo()}>Redo</button>
+ </Panel>
+ <Controls/>
+ <Background/>
+ </ReactFlow>
+ </div>
+ );
+};
+
+/**
+ * Places the VisProgUI component inside a ReactFlowProvider
+ *
+ * Wrapping the editor component inside a ReactFlowProvider
+ * allows us to access and interact with the components inside the editor, outside the editor definition,
+ * thus facilitating the addition of node specific functions inside their node definitions
+ */
+function VisualProgrammingUI() {
+ return (
+ <ReactFlowProvider>
+ <VisProgUI/>
+ </ReactFlowProvider>
+ );
+}
+
+// currently outputs the prepared program to the console
+export function runProgramm() {
+ const phases = graphReducer();
+ const program = {phases}
+ console.log(JSON.stringify(program, null, 2));
+ fetch(
+ "http://localhost:8000/program",
+ {
+ method: "POST",
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify(program),
+ }
+ ).then((res) => {
+ if (!res.ok) throw new Error("Failed communicating with the backend.")
+ console.log("Successfully sent the program to the backend.");
+
+ // store reduced program in global program store for further use in the UI
+ // when the program was sent to the backend successfully:
+ useProgramStore.getState().setProgramState(structuredClone(program));
+ }).catch(() => console.log("Failed to send program to the backend."));
+ console.log(program);
+}
+
+/**
+ * Reduces the graph into its phases' information and recursively calls their reducing function
+ */
+export function graphReducer() {
+ const { nodes } = useFlowStore.getState();
+ 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
+ * @constructor
+ */
+function VisProgPage() {
+ const [showSimpleProgram, setShowSimpleProgram] = useState(false);
+ const setProgramState = useProgramStore((state) => state.setProgramState);
+
+ const runProgram = () => {
+ const phases = graphReducer(); // reduce graph
+ setProgramState({ phases }); // <-- save to store
+ setShowSimpleProgram(true); // show SimpleProgram
+ runProgramm(); // send to backend if needed
+ };
+
+ if (showSimpleProgram) {
+ return (
+ <div>
+ <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
+ Back to Editor ◀
+ </button>
+ <MonitoringPage/>
+ </div>
+ );
+ }
+
+ return (
+ <>
+ <VisualProgrammingUI/>
+ <button onClick={runProgram}>run program</button>
+ </>
+ )
+}
+
+export default VisProgPage
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| VisProg.tsx | +
+
+ |
+ 0% | +0/47 | +0% | +0/12 | +0% | +0/19 | +0% | +0/40 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import type {Edge, Node} from "@xyflow/react";
+import type {StateCreator, StoreApi } from 'zustand/vanilla';
+import type {FlowState} from "./VisProgTypes.tsx";
+
+export type FlowSnapshot = {
+ nodes: Node[];
+ edges: Edge[];
+}
+
+/**
+ * A reduced version of the flowState type,
+ * This removes the functions that are provided by UndoRedo from the expected input type
+ */
+type BaseFlowState = Omit<FlowState, 'undo' | 'redo' | 'pushSnapshot' | 'beginBatchAction' | 'endBatchAction'>;
+
+
+/**
+ * UndoRedo is implemented as a middleware for the FlowState store,
+ * this allows us to keep the undo redo logic separate from the flowState,
+ * and thus from the internal editor logic
+ *
+ * Allows users to undo and redo actions in the visual programming editor
+ *
+ * @param {(set: StoreApi<FlowState>["setState"], get: () => FlowState, api: StoreApi<FlowState>) => BaseFlowState} config
+ * @returns {StateCreator<FlowState>}
+ * @constructor
+ */
+export const UndoRedo = (
+ config: (
+ set: StoreApi<FlowState>['setState'],
+ get: () => FlowState,
+ api: StoreApi<FlowState>
+ ) => BaseFlowState ) : StateCreator<FlowState> => (set, get, api) => {
+ let batchTimeout: number | null = null;
+
+ /**
+ * Captures the current state for
+ *
+ * @param {BaseFlowState} state - the current state of the editor
+ * @returns {FlowSnapshot} - returns a snapshot of the current editor state
+ */
+ const getSnapshot = (state : BaseFlowState) : FlowSnapshot => (structuredClone({
+ nodes: state.nodes,
+ edges: state.edges
+ }));
+
+ const initialState = config(set, get, api);
+
+ return {
+ ...initialState,
+
+ /**
+ * Adds a snapshot of the current state to the undo history
+ */
+ pushSnapshot: () => {
+ const state = get();
+ // we don't add new snapshots during an ongoing batch action
+ if (!state.isBatchAction) {
+ set({
+ past: [...state.past, getSnapshot(state)],
+ future: []
+ });
+ }
+
+ },
+
+ /**
+ * Undoes the last action from the editor,
+ * The state before undoing is added to the future for potential redoing
+ */
+ undo: () => {
+ const state = get();
+ if (!state.past.length) return;
+
+ const snapshot = state.past.pop()!; // pop last snapshot
+ const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+ set({
+ nodes: snapshot.nodes,
+ edges: snapshot.edges,
+ });
+
+ state.future.push(currentSnapshot); // push current to redo
+ },
+
+ /**
+ * redoes the last undone action,
+ * The state before redoing is added to the past for potential undoing
+ */
+ redo: () => {
+ const state = get();
+ if (!state.future.length) return;
+
+ const snapshot = state.future.pop()!; // pop last redo
+ const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+ set({
+ nodes: snapshot.nodes,
+ edges: snapshot.edges,
+ });
+
+ state.past.push(currentSnapshot); // push current to undo
+ },
+
+ /**
+ * Begins a batched action
+ *
+ * An example of a batched action is dragging a node in the editor,
+ * where we want the entire action of moving a node to a different position
+ * to be covered by one undoable snapshot
+ */
+ beginBatchAction: () => {
+ get().pushSnapshot();
+ set({ isBatchAction: true });
+ if (batchTimeout) clearTimeout(batchTimeout);
+ },
+
+ /**
+ * Ends a batched action,
+ * a very short timeout is used to prevent new snapshots from being added
+ * until we are certain that the batch event is finished
+ */
+ endBatchAction: () => {
+ batchTimeout = window.setTimeout(() => {
+ set({ isBatchAction: false });
+ }, 10);
+ }
+ }
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +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);
+ };
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | 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");
+ }
+
+
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import EndNode, {
+ EndConnectionTarget,
+ EndConnectionSource,
+ EndDisconnectionTarget,
+ EndDisconnectionSource,
+ EndReduce,
+ EndTooltip
+} from "./nodes/EndNode";
+import { EndNodeDefaults } from "./nodes/EndNode.default";
+import StartNode, {
+ StartConnectionTarget,
+ StartConnectionSource,
+ StartDisconnectionTarget,
+ StartDisconnectionSource,
+ StartReduce,
+ StartTooltip
+} from "./nodes/StartNode";
+import { StartNodeDefaults } from "./nodes/StartNode.default";
+import PhaseNode, {
+ PhaseConnectionTarget,
+ PhaseConnectionSource,
+ PhaseDisconnectionTarget,
+ PhaseDisconnectionSource,
+ PhaseReduce,
+ PhaseTooltip
+} from "./nodes/PhaseNode";
+import { PhaseNodeDefaults } from "./nodes/PhaseNode.default";
+import NormNode, {
+ NormConnectionTarget,
+ NormConnectionSource,
+ NormDisconnectionTarget,
+ NormDisconnectionSource,
+ NormReduce,
+ NormTooltip
+} from "./nodes/NormNode";
+import { NormNodeDefaults } from "./nodes/NormNode.default";
+import GoalNode, {
+ GoalConnectionTarget,
+ GoalConnectionSource,
+ GoalDisconnectionTarget,
+ GoalDisconnectionSource,
+ GoalReduce,
+ GoalTooltip
+} from "./nodes/GoalNode";
+import { GoalNodeDefaults } from "./nodes/GoalNode.default";
+import TriggerNode, {
+ TriggerConnectionTarget,
+ TriggerConnectionSource,
+ TriggerDisconnectionTarget,
+ TriggerDisconnectionSource,
+ TriggerReduce,
+ TriggerTooltip
+} from "./nodes/TriggerNode";
+import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
+import InferredBeliefNode, {
+ InferredBeliefConnectionTarget,
+ InferredBeliefConnectionSource,
+ InferredBeliefDisconnectionTarget,
+ InferredBeliefDisconnectionSource,
+ InferredBeliefReduce, InferredBeliefTooltip
+} from "./nodes/InferredBeliefNode";
+import { InferredBeliefNodeDefaults } from "./nodes/InferredBeliefNode.default";
+import BasicBeliefNode, {
+ BasicBeliefConnectionSource,
+ BasicBeliefConnectionTarget,
+ BasicBeliefDisconnectionSource,
+ BasicBeliefDisconnectionTarget,
+ BasicBeliefReduce
+,
+ BasicBeliefTooltip
+} from "./nodes/BasicBeliefNode.tsx";
+import { BasicBeliefNodeDefaults } from "./nodes/BasicBeliefNode.default.ts";
+
+/**
+ * Registered node types in the visual programming system.
+ *
+ * Key: the node type string used in the flow graph.
+ * Value: the corresponding React component for rendering the node.
+ */
+export const NodeTypes = {
+ start: StartNode,
+ end: EndNode,
+ phase: PhaseNode,
+ norm: NormNode,
+ goal: GoalNode,
+ trigger: TriggerNode,
+ basic_belief: BasicBeliefNode,
+ inferred_belief: InferredBeliefNode,
+};
+
+/**
+ * Default data and settings for each node type.
+ * These are defined in the <node>.default.ts files.
+ * These defaults are used when a new node is created to initialize its properties.
+ */
+export const NodeDefaults = {
+ start: StartNodeDefaults,
+ end: EndNodeDefaults,
+ phase: PhaseNodeDefaults,
+ norm: NormNodeDefaults,
+ goal: GoalNodeDefaults,
+ trigger: TriggerNodeDefaults,
+ basic_belief: BasicBeliefNodeDefaults,
+ inferred_belief: InferredBeliefNodeDefaults,
+};
+
+
+/**
+ * Reduce functions for each node type.
+ *
+ * A reduce function extracts the relevant data from a node and its children.
+ * Used during graph evaluation or export.
+ */
+export const NodeReduces = {
+ start: StartReduce,
+ end: EndReduce,
+ phase: PhaseReduce,
+ norm: NormReduce,
+ goal: GoalReduce,
+ trigger: TriggerReduce,
+ basic_belief: BasicBeliefReduce,
+ inferred_belief: InferredBeliefReduce,
+}
+
+
+/**
+ * Connection functions for each node type.
+ *
+ * These functions define any additional actions a node may perform
+ * when a new connection is made
+ */
+export const NodeConnections = {
+ Targets: {
+ start: StartConnectionTarget,
+ end: EndConnectionTarget,
+ phase: PhaseConnectionTarget,
+ norm: NormConnectionTarget,
+ goal: GoalConnectionTarget,
+ trigger: TriggerConnectionTarget,
+ basic_belief: BasicBeliefConnectionTarget,
+ inferred_belief: InferredBeliefConnectionTarget,
+ },
+ Sources: {
+ start: StartConnectionSource,
+ end: EndConnectionSource,
+ phase: PhaseConnectionSource,
+ norm: NormConnectionSource,
+ goal: GoalConnectionSource,
+ trigger: TriggerConnectionSource,
+ basic_belief: BasicBeliefConnectionSource,
+ inferred_belief: InferredBeliefConnectionSource,
+ }
+}
+
+/**
+ * Disconnection functions for each node type.
+ *
+ * These functions define any additional actions a node may perform
+ * when a connection is disconnected
+ */
+export const NodeDisconnections = {
+ Targets: {
+ start: StartDisconnectionTarget,
+ end: EndDisconnectionTarget,
+ phase: PhaseDisconnectionTarget,
+ norm: NormDisconnectionTarget,
+ goal: GoalDisconnectionTarget,
+ trigger: TriggerDisconnectionTarget,
+ basic_belief: BasicBeliefDisconnectionTarget,
+ inferred_belief: InferredBeliefDisconnectionTarget,
+ },
+ Sources: {
+ start: StartDisconnectionSource,
+ end: EndDisconnectionSource,
+ phase: PhaseDisconnectionSource,
+ norm: NormDisconnectionSource,
+ goal: GoalDisconnectionSource,
+ trigger: TriggerDisconnectionSource,
+ basic_belief: BasicBeliefDisconnectionSource,
+ inferred_belief: InferredBeliefDisconnectionSource,
+ },
+}
+
+/**
+ * Defines whether a node type can be deleted.
+ *
+ * Returns a function per node type. Nodes not explicitly listed are deletable by default.
+ */
+export const NodeDeletes = {
+ start: () => false,
+ end: () => false,
+}
+
+/**
+ * Defines which node types are considered variables in a phase node.
+ *
+ * Any node type not listed here is automatically treated as part of a phase.
+ * This allows the system to dynamically group nodes under a phase node.
+ */
+export const NodesInPhase = {
+ start: () => false,
+ end: () => false,
+ phase: () => false,
+ basic_belief: () => false,
+ inferred_belief: () => false,
+}
+
+/**
+ * Collects the tooltips for all nodeTypes so they can be accessed by the tooltip component
+ */
+export const NodeTooltips = {
+ start: StartTooltip,
+ end: EndTooltip,
+ phase: PhaseTooltip,
+ norm: NormTooltip,
+ goal: GoalTooltip,
+ trigger: TriggerTooltip,
+ basic_belief: BasicBeliefTooltip,
+ inferred_belief: InferredBeliefTooltip,
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { create } from 'zustand';
+import {
+ applyNodeChanges,
+ applyEdgeChanges,
+ addEdge,
+ reconnectEdge,
+ type Node,
+ type Edge,
+ type XYPosition,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { FlowState } from './VisProgTypes';
+import {
+ NodeDefaults,
+ NodeConnections as NodeCs,
+ NodeDisconnections as NodeDs,
+ NodeDeletes
+} from './NodeRegistry';
+import { UndoRedo } from "./EditorUndoRedo.ts";
+
+
+/**
+ * A Function to create a new node with the correct default data and properties.
+ *
+ * @param id - The unique ID of the node.
+ * @param type - The type of node to create (must exist in NodeDefaults).
+ * @param position - The XY position of the node in the flow canvas.
+ * @param data - The data object to initialize the node with.
+ * @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]
+ return {
+ id,
+ type,
+ position,
+ deletable,
+ data: {
+ ...JSON.parse(JSON.stringify(defaultData)),
+ ...data,
+ },
+ }
+}
+
+ //* 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: 110, y: 100}, {label: "Start"}, false)
+ const endNode = createNode('end', 'end', {x: 590, y: 100}, {label: "End"}, false)
+ const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:235, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null})
+
+ 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[] = [];
+
+
+/**
+ * useFlowStore contains the implementation for all editor functionality
+ * and stores the current state of the visual programming editor
+ *
+ * * Provides:
+ * - Node and edge state management
+ * - Node creation, deletion, and updates
+ * - Custom connection handling via NodeConnects
+ * - Edge reconnection handling
+ * - Undo Redo functionality through custom middleware
+ */
+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)}),
+
+ 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;
+
+ const sourceNode = nodes.find((n) => n.id == edge.source);
+ const targetNode = nodes.find((n) => n.id == edge.target);
+
+ if (sourceNode) { NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target); }
+ if (targetNode) { NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source); }
+ });
+ },
+ /**
+ * Handles changes to edges triggered by ReactFlow.
+ */
+ onEdgesChange: (changes) => {
+ set({ edges: applyEdgeChanges(changes, get().edges) })
+ },
+
+ /**
+ * Handles creating a new connection between nodes.
+ * Updates edges and calls the node-specific connection functions.
+ */
+ onConnect: (connection) => {
+ get().pushSnapshot();
+ set({edges: addEdge(connection, get().edges)});
+
+ // We make sure to perform any required data updates on the newly connected nodes
+ const nodes = get().nodes;
+
+ const sourceNode = nodes.find((n) => n.id == connection.source);
+ const targetNode = nodes.find((n) => n.id == connection.target);
+
+ if (sourceNode) { NodeCs.Sources[sourceNode.type as keyof typeof NodeCs.Sources](sourceNode, connection.target); }
+ if (targetNode) { NodeCs.Targets[targetNode.type as keyof typeof NodeCs.Targets](targetNode, connection.source); }
+ },
+
+ /**
+ * Handles reconnecting an edge between nodes.
+ */
+ onReconnect: (oldEdge, newConnection) => {
+ get().edgeReconnectSuccessful = true;
+ set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
+
+ // We make sure to perform any required data updates on the newly reconnected nodes
+ const nodes = get().nodes;
+
+ const oldSourceNode = nodes.find((n) => n.id == oldEdge.source)!;
+ const oldTargetNode = nodes.find((n) => n.id == oldEdge.target)!;
+ const newSourceNode = nodes.find((n) => n.id == newConnection.source)!;
+ const newTargetNode = nodes.find((n) => n.id == newConnection.target)!;
+
+ if (oldSourceNode === newSourceNode && oldTargetNode === newTargetNode) return;
+
+ NodeCs.Sources[newSourceNode.type as keyof typeof NodeCs.Sources](newSourceNode, newConnection.target);
+ NodeCs.Targets[newTargetNode.type as keyof typeof NodeCs.Targets](newTargetNode, newConnection.source);
+
+ NodeDs.Sources[oldSourceNode.type as keyof typeof NodeDs.Sources](oldSourceNode, oldEdge.target);
+ NodeDs.Targets[oldTargetNode.type as keyof typeof NodeDs.Targets](oldTargetNode, oldEdge.source);
+ },
+
+ onReconnectStart: () => {
+ get().pushSnapshot();
+ set({ edgeReconnectSuccessful: false })
+ },
+
+ /**
+ * handles potential dropping (deleting) of an edge
+ * if it is not reconnected to a node after detaching it
+ *
+ * @param _evt - the event
+ * @param edge - the described edge
+ */
+ onReconnectEnd: (_evt, edge) => {
+ if (!get().edgeReconnectSuccessful) {
+ // delete the edge from the flowState
+ set({ edges: get().edges.filter((e) => e.id !== edge.id) });
+
+ // update node data to reflect the dropped edge
+ const nodes = get().nodes;
+
+ const sourceNode = nodes.find((n) => n.id == edge.source)!;
+ const targetNode = nodes.find((n) => n.id == edge.target)!;
+
+ NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target);
+ NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source);
+ }
+ set({ edgeReconnectSuccessful: true });
+ },
+
+ /**
+ * Deletes a node by ID, respecting NodeDeletes rules.
+ * Also removes all edges connected to that node.
+ */
+ deleteNode: (nodeId) => {
+ get().pushSnapshot();
+
+ // Let's find our node to check if they have a special deletion function
+ const ourNode = get().nodes.find((n)=>n.id==nodeId);
+ const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]
+
+ // If there's no function, OR, our function tells us we can delete it, let's do so...
+ if (ourFunction == undefined || ourFunction()) {
+ set({
+ nodes: get().nodes.filter((n) => n.id !== nodeId),
+ edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
+ })}
+ },
+
+ /**
+ * Replaces the entire nodes array in the store.
+ */
+ setNodes: (nodes) => set({ nodes }),
+
+ /**
+ * Replaces the entire edges array in the store.
+ */
+ setEdges: (edges) => set({ edges }),
+
+ /**
+ * Updates the data of a node by merging new data with existing data.
+ */
+ updateNodeData: (nodeId, data) => {
+ get().pushSnapshot();
+ set({
+ nodes: get().nodes.map((node) => {
+ if (node.id === nodeId) {
+ node = { ...node, data: { ...node.data, ...data }};
+ }
+ return node;
+ }),
+ });
+ },
+
+ /**
+ * Adds a new node to the flow store.
+ */
+ addNode: (node: Node) => {
+ get().pushSnapshot();
+ set({ nodes: [...get().nodes, node] });
+ },
+
+ // undo redo default values
+ 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 };
+ })
+ }
+ }))
+);
+
+export default useFlowStore;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | 22x + + + + + + + +22x + + + + + + +13x + + + + + +13x + + + + + + + +22x | import {
+ Handle,
+ useNodeConnections,
+ type HandleType,
+ type Position
+} from '@xyflow/react';
+
+
+const LimitedConnectionCountHandle = (props: {
+ node_id: string,
+ type: HandleType,
+ position: Position,
+ connection_count: number,
+ id?: string
+}) => {
+ const connections = useNodeConnections({
+ id: props.node_id,
+ handleType: props.type,
+ handleId: props.id,
+ });
+
+ return (
+ <Handle
+ {...props}
+ isConnectable={connections.length < props.connection_count}
+ />
+ );
+};
+
+export default LimitedConnectionCountHandle; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useDraggable } from '@neodrag/react';
+import { useReactFlow, type XYPosition } from '@xyflow/react';
+import { type ReactNode, useCallback, useRef, useState } from 'react';
+import useFlowStore from '../VisProgStores';
+import styles from '../../VisProg.module.css';
+import { NodeDefaults, type NodeTypes} from '../NodeRegistry'
+import {Tooltip} from "./NodeComponents.tsx";
+
+/**
+ * Props for a draggable node within the drag-and-drop toolbar.
+ *
+ * @property className - Optional custom CSS classes for styling.
+ * @property children - The visual content or label rendered inside the draggable node.
+ * @property nodeType - The type of node represented (key from `NodeTypes`).
+ * @property onDrop - Function called when the node is dropped on the flow pane.
+ */
+interface DraggableNodeProps {
+ className?: string;
+ children: ReactNode;
+ nodeType: keyof typeof NodeTypes;
+ onDrop: (nodeType: keyof typeof NodeTypes, position: XYPosition) => void;
+}
+
+/**
+ * A draggable node element used in the drag-and-drop toolbar.
+ *
+ * Integrates with the NeoDrag library to handle drag events.
+ * On drop, it calls the provided `onDrop` function with the node type and drop position.
+ *
+ * @param props - The draggable node configuration.
+ * @returns A React element representing a draggable node.
+ */
+function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
+ const draggableRef = useRef<HTMLDivElement>(null);
+ const [position, setPosition] = useState<XYPosition>({ x: 0, y: 0 });
+
+ // The NeoDrag hook enables smooth drag functionality for this element.
+ // @ts-expect-error: NeoDrag typing incompatibility — safe to ignore.
+ useDraggable(draggableRef, {
+ position,
+ onDrag: ({ offsetX, offsetY }) => {
+ setPosition({ x: offsetX, y: offsetY });
+ },
+ onDragEnd: ({ event }) => {
+ setPosition({ x: 0, y: 0 });
+ onDrop(nodeType, { x: event.clientX, y: event.clientY });
+ },
+ });
+
+ return (
+ <Tooltip nodeType={nodeType}>
+ <div>
+ <div className={className}
+ ref={draggableRef}
+ id={`draggable-${nodeType}`}
+ data-testid={`draggable-${nodeType}`}
+ >
+ {children}
+ </div>
+ </div>
+ </Tooltip>)
+}
+
+/**
+ * Adds a new node to the flow graph.
+ *
+ * Handles:
+ * - Automatic node ID generation based on existing nodes of the same type.
+ * - Loading of default data from the `NodeDefaults` registry.
+ * - Integration with the flow store to update global node state.
+ *
+ * @param nodeType - The type of node to create (from `NodeTypes`).
+ * @param position - The XY position in the flow canvas where the node will appear.
+ */
+function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+ const { addNode } = useFlowStore.getState();
+
+ // Load any predefined data for this node type.
+ const defaultData = NodeDefaults[nodeType] ?? {}
+ const id = crypto.randomUUID();
+
+ // Create new node
+ const newNode = {
+ id: id,
+ type: nodeType,
+ position,
+ data: JSON.parse(JSON.stringify(defaultData))
+ }
+ addNode(newNode);
+}
+
+/**
+ * The drag-and-drop toolbar component for the visual programming interface.
+ *
+ * Displays draggable node templates based on entries in `NodeDefaults`.
+ * Each droppable node can be dragged into the flow pane to instantiate it.
+ *
+ * Automatically filters nodes whose `droppable` flag is set to `true`.
+ *
+ * @returns A React element representing the drag-and-drop toolbar.
+ */
+export function DndToolbar() {
+ const { screenToFlowPosition } = useReactFlow();
+
+ /**
+ * Handles dropping a node onto the flow pane.
+ * Translates screen coordinates into flow coordinates using React Flow utilities.
+ */
+ const handleNodeDrop = useCallback(
+ (nodeType: keyof typeof NodeTypes, screenPosition: XYPosition) => {
+ const flow = document.querySelector('.react-flow');
+ const flowRect = flow?.getBoundingClientRect();
+
+ // Only add the node if it is inside the flow canvas area.
+ const isInFlow =
+ flowRect &&
+ screenPosition.x >= flowRect.left &&
+ screenPosition.x <= flowRect.right &&
+ screenPosition.y >= flowRect.top &&
+ screenPosition.y <= flowRect.bottom;
+
+ if (isInFlow) {
+ const position = screenToFlowPosition(screenPosition);
+ addNodeToFlow(nodeType, position);
+ }
+ },
+ [screenToFlowPosition],
+ );
+
+
+ // Map over the default nodes to get all nodes that can be dropped from the toolbar.
+ const droppableNodes = Object.entries(NodeDefaults)
+ .filter(([, data]) => data.droppable)
+ .map(([type, data]) => ({
+ type: type as DraggableNodeProps['nodeType'],
+ data
+ }));
+
+ return (
+ <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`} id={"draggable-sidebar"}>
+ <div className="description">
+ You can drag these nodes to the pane to create new nodes.
+ </div>
+ <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
+ {/* Maps over all the nodes that are droppable, and puts them in the panel */}
+ {droppableNodes.map(({type, data}) => (
+ <DraggableNode
+ key={type}
+ className={styles[`draggable-node-${type}`]} // Our current style signature for nodes
+ nodeType={type}
+ onDrop={handleNodeDrop}
+ >
+ {data.label}
+ </DraggableNode>
+ ))}
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +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>
+ );
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {NodeToolbar} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {type JSX, useState} from "react";
+import {createPortal} from "react-dom";
+import styles from "../../VisProg.module.css";
+import {NodeTooltips} from "../NodeRegistry.ts";
+import useFlowStore from "../VisProgStores.tsx";
+
+
+/**
+ * Props for the Toolbar component.
+ *
+ * @property nodeId - The ID of the node this toolbar is attached to.
+ * @property allowDelete - If `true`, the delete button is enabled; otherwise disabled.
+ */
+type ToolbarProps = {
+ nodeId: string;
+ allowDelete: boolean;
+};
+
+/**
+ * Node Toolbar definition:
+ * Handles: node deleting functionality
+ * Can be integrated to any custom node component as a React component
+ *
+ * @param {string} nodeId - The ID of the node for which the toolbar is rendered.
+ * @param {boolean} allowDelete - Enables or disables the delete functionality.
+ * @returns {React.JSX.Element} A JSX element representing the toolbar.
+ * @constructor
+ */
+export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
+ const {nodes, deleteNode} = useFlowStore();
+
+
+ const deleteParentNode = () => {
+ deleteNode(nodeId);
+ };
+
+ const nodeType = nodes.find((node) => node.id === nodeId)?.type as keyof typeof NodeTooltips;
+ return (
+ <NodeToolbar className={"flex-row align-center"}>
+ <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
+ <Tooltip nodeType={nodeType}>
+ <div className={styles.nodeToolbarTooltip}>i</div>
+ </Tooltip>
+ </NodeToolbar>);
+}
+
+
+type TooltipProps = {
+ nodeType?: keyof typeof NodeTooltips;
+ children: JSX.Element;
+};
+
+
+/**
+ * A general tooltip component, that can be used as a wrapper for any component
+ * that has a nodeType and a corresponding nodeTooltip.
+ *
+ * currently used to show tooltips for draggable-nodes and nodes inside the editor
+ *
+ * @param {"start" | "end" | "phase" | "norm" | "goal" | "trigger" | "basic_belief" | undefined} nodeType
+ * @param {React.JSX.Element} children
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function Tooltip({ nodeType, children }: TooltipProps) {
+ const [showTooltip, setShowTooltip] = useState(false);
+ const [disabled , setDisabled] = useState(false);
+ const [coords, setCoords] = useState({ top: 0, left: 0 });
+
+ const updateTooltipPos = () => {
+ const rect = document.getElementById("draggable-sidebar")!.getBoundingClientRect();
+ setCoords({
+ // Position exactly below the bottom edge of the draggable sidebar (plus a small gap)
+ top: rect.bottom + 10,
+ left: rect.left + rect.width / 2, // Keep it horizontally centered
+ });
+ };
+
+ return nodeType ?
+ (<div>
+ <div
+ onMouseDown={() => {
+ updateTooltipPos();
+ setShowTooltip(false);
+ setDisabled(true);
+ }}
+ onMouseUp={() => {
+ setDisabled(false);
+ }}
+ onMouseOver={() => {
+ if (!disabled) {
+ updateTooltipPos();
+ setShowTooltip(true);
+ }
+ }}
+ onMouseLeave={ () => setShowTooltip(false)}
+ >
+ {children}
+ </div>
+ {showTooltip && createPortal(
+ <div
+ className={"flex-row"}
+ style={{
+ pointerEvents: 'none',
+ position: 'fixed',
+ top: `${coords.top}px`,
+ left: `${coords.left}px`,
+ transform: 'translateX(-50%)', // Center based on the midpoint
+ }}
+ >
+ <span className={styles.customTooltipHeader}>{nodeType}</span>
+ <span className={styles.customTooltip}>
+ {NodeTooltips[nodeType] || "Available for drag"}
+ </span>
+ </div>,
+ document.body
+ )}
+ </div>
+ ) : children
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 | + + + + + + | import type { Plan, PlanElement } from "./Plan";
+
+export const defaultPlan: Plan = {
+ name: "Default Plan",
+ id: "-1",
+ steps: [] as PlanElement[],
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { type Node } from "@xyflow/react"
+import { GoalReduce } from "../nodes/GoalNode"
+
+
+export type Plan = {
+ name: string,
+ id: string,
+ steps: PlanElement[],
+}
+
+export type PlanElement = Goal | Action
+
+export type Goal = {
+ id: string // we let the reducer figure out the rest dynamically
+ 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(_nodes: Node[], plan?: Plan, ) {
+ if (!plan) return ""
+ return {
+ id: plan.id,
+ steps: plan.steps.map((x) => StepReduce(x, _nodes))
+ }
+}
+
+
+// Extract the wanted information from a plan element.
+function StepReduce(planElement: PlanElement, _nodes: Node[]) : Record<string, unknown> {
+ // We have different types of plan elements, requiring differnt types of output
+ const nodes = _nodes
+ const thisNode = _nodes.find((x) => x.id === planElement.id)
+ 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 thisNode ? GoalReduce(thisNode, nodes) : {}
+ }
+}
+
+/**
+ * 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( _nodes: Node[], 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 ||
+ (
+ // Find the goal node of this step
+ plan.steps.filter((step) => step.type == "goal").map((goalStep) => {
+ const goalId = goalStep.id;
+ const goalNode = _nodes.find((x) => x.id === goalId);
+ // In case we don't find any valid plan, this node doesn't iterate
+ if (!goalNode || !goalNode.data.plan) return false;
+ // Otherwise, check if this node can fail - if so, we should have the option to iterate
+ return (goalNode && goalNode.data.plan && goalNode.data.can_fail)
+ })
+ ).includes(true);
+}
+
+/**
+ * Checks if any of the plan's goal steps has its can_fail value set to true.
+ * @param plan: plan to check
+ * @param _nodes: nodes in flow store.
+ */
+export function HasCheckingSubGoal(plan: Plan, _nodes: Node[]) {
+ const goalSteps = plan.steps.filter((x) => x.type == "goal");
+ return goalSteps.map((goalStep) => {
+ // Find the goal node and check its can_fail data boolean.
+ const goalId = goalStep.id;
+ const goalNode = _nodes.find((x) => x.id === goalId);
+ return (goalNode && goalNode.data.can_fail)
+ }).includes(true);
+}
+
+/**
+ * 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:
+ }
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // This file is to avoid sharing both functions and components which eslint dislikes. :)
+import type { GoalNode } from "../nodes/GoalNode"
+import type { Goal, Plan } from "./Plan"
+
+/**
+ * Inserts a goal into a plan
+ * @param plan: plan to insert goal into
+ * @param goalNode: the goal node to insert into the plan.
+ * @returns: a new plan with the goal inside.
+ */
+export function insertGoalInPlan(plan: Plan, goalNode: GoalNode): Plan {
+ const planElement : Goal = {
+ id: goalNode.id,
+ type: "goal",
+ }
+
+ return {
+ ...plan,
+ steps: [...plan.steps, planElement],
+ }
+}
+
+
+/**
+ * Deletes a goal from a plan
+ * @param plan: plan to delete goal from
+ * @param goalID: the goal node to delete.
+ * @returns: a new plan with the goal removed.
+ */
+export function deleteGoalInPlanByID(plan: Plan, goalID: string) {
+ const updatedPlan = {...plan,
+ steps: plan.steps.filter((x) => x.id !== goalID)
+ }
+ return updatedPlan.steps.length == 0 ? undefined : updatedPlan
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | 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 [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
+ const { setScrollable } = useFlowStore();
+ const nodes = useFlowStore().nodes;
+
+ //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();
+ setHasInteractedWithPlan(true)
+ 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 && !hasInteractedWithPlan) && (<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}>
+ {
+ // This just tries to find the goals name, i know it looks ugly:(
+ step.type === "goal"
+ ? ((nodes.find(x => x.id === step.id)?.data.name as string) == "" ?
+ "unnamed goal": (nodes.find(x => x.id === step.id)?.data.name as string))
+ : (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>
+ </>
+);
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | 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}
+ />
+ );
+}
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {type ChangeEvent, useRef, useState} from "react";
+import useFlowStore from "../VisProgStores";
+import visProgStyles from "../../VisProg.module.css";
+import styles from "./SaveLoadPanel.module.css";
+import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";
+
+export default function SaveLoadPanel() {
+ const nodes = useFlowStore((s) => s.nodes);
+ const edges = useFlowStore((s) => s.edges);
+ const setNodes = useFlowStore((s) => s.setNodes);
+ const setEdges = useFlowStore((s) => s.setEdges);
+
+ const [saveUrl, setSaveUrl] = useState<string | null>(null);
+
+ // ref to the file input
+ const inputRef = useRef<HTMLInputElement | null>(null);
+
+ const onSave = async (nameGuess = "visual-program") => {
+ const blob = makeProjectBlob(nameGuess, nodes, edges);
+ const url = URL.createObjectURL(blob);
+ setSaveUrl(url);
+ };
+
+ // input change handler updates the graph with a parsed JSON file
+ const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ try {
+ const text = await file.text();
+ const parsed = JSON.parse(text) as SavedProject;
+ if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
+ setNodes(parsed.nodes);
+ setEdges(parsed.edges);
+ } catch (e) {
+ console.error(e);
+ alert("Loading failed. See console.");
+ } finally {
+ // allow re-selecting same file next time
+ if (inputRef.current) inputRef.current.value = "";
+ }
+ };
+
+ const defaultName = "visual-program";
+ return (
+ <div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
+ <div className="description">You can save and load your graph here.</div>
+ <div className={`flex-row gap-lg justify-center`}>
+ <a
+ href={saveUrl ?? "#"}
+ onClick={() => onSave(defaultName)}
+ download={`${defaultName}.json`}
+ className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
+ >
+ Save Graph
+ </a>
+
+ <label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
+ <input
+ ref={inputRef}
+ type="file"
+ accept=".visprog.json,.json,.txt,application/json,text/plain"
+ onChange={handleFileChange}
+ />
+ Load Graph
+ </label>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| DragDropSidebar.tsx | +
+
+ |
+ 0% | +0/25 | +0% | +0/9 | +0% | +0/9 | +0% | +0/25 | +
| GestureValueEditor.tsx | +
+
+ |
+ 0% | +0/55 | +0% | +0/23 | +0% | +0/20 | +0% | +0/53 | +
| NodeComponents.tsx | +
+
+ |
+ 0% | +0/21 | +0% | +0/8 | +0% | +0/9 | +0% | +0/20 | +
| Plan.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| Plan.tsx | +
+
+ |
+ 0% | +0/37 | +0% | +0/27 | +0% | +0/14 | +0% | +0/29 | +
| PlanEditingFunctions.tsx | +
+
+ |
+ 0% | +0/5 | +0% | +0/2 | +0% | +0/3 | +0% | +0/5 | +
| PlanEditor.tsx | +
+
+ |
+ 0% | +0/59 | +0% | +0/44 | +0% | +0/18 | +0% | +0/56 | +
| RuleBasedHandle.tsx | +
+
+ |
+ 0% | +0/18 | +0% | +0/10 | +0% | +0/4 | +0% | +0/18 | +
| SaveLoadPanel.tsx | +
+
+ |
+ 0% | +0/32 | +0% | +0/11 | +0% | +0/8 | +0% | +0/25 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| EditorUndoRedo.ts | +
+
+ |
+ 0% | +0/30 | +0% | +0/8 | +0% | +0/9 | +0% | +0/26 | +
| HandleRuleLogic.ts | +
+
+ |
+ 0% | +0/21 | +0% | +0/8 | +0% | +0/9 | +0% | +0/18 | +
| HandleRules.ts | +
+
+ |
+ 0% | +0/12 | +0% | +0/8 | +0% | +0/9 | +0% | +0/8 | +
| NodeRegistry.ts | +
+
+ |
+ 0% | +0/15 | +100% | +0/0 | +0% | +0/7 | +0% | +0/15 | +
| VisProgStores.tsx | +
+
+ |
+ 0% | +0/102 | +0% | +0/26 | +0% | +0/42 | +0% | +0/81 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 | + + + + + + + + + + + | import type { BasicBeliefNodeData } from "./BasicBeliefNode.tsx";
+
+
+/**
+ * Default data for this node
+ */
+export const BasicBeliefNodeDefaults: BasicBeliefNodeData = {
+ label: "Belief",
+ droppable: true,
+ belief: {type: "keyword", id: "", value: "", label: "Keyword said:"},
+ hasReduce: true,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 | 22x + + + + + +22x +22x +22x +22x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + +22x + + + + + + + + +22x + + + + + + + + +22x + + + + + + + + +22x +28x +28x +28x +28x + + + + +4x + + + + + + + + + + +28x + + +28x +28x +28x + +17x +17x +17x + +5x +5x +5x + +2x +2x + + + +4x +4x + + + + +28x + + + + + + + + + +4x + + + + + + + + + + + +1x + + +16x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +22x + + + + + + + + + + + + + + +22x + | import {
+ Handle,
+ type NodeProps,
+ Position,
+ type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { TextField } from '../../../../components/TextField';
+
+/**
+ * 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 | Object | Emotion
+type Keyword = { type: "keyword", id: string, value: string, label: "Keyword said:"};
+type Semantic = { type: "semantic", id: string, value: string, label: "Detected with LLM:"};
+type Object = { 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,
+ },
+ });
+ }
+
+
+ // 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 = "word..."
+ 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>
+ <Handle type="source" position={Position.Right} id="source"/>
+ </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;
+ return {
+ id: node.id,
+ type: data.belief.type,
+ value: data.belief.value
+ }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type (BasicBelief)
+ * @param _thisNode the node of this node type which function is called
+ * @param _otherNode the other node which was part of the connection
+ * @param _isThisSource whether this instance of the node was the source in the connection, true = yes.
+ */
+export function BasicBeliefConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {getOutgoers, type Node} from '@xyflow/react';
+import {type HandleRule, type RuleResult, ruleResult} from "../HandleRuleLogic.ts";
+import useFlowStore from "../VisProgStores.tsx";
+import {BasicBeliefReduce} from "./BasicBeliefNode.tsx";
+import {type InferredBeliefNodeData, InferredBeliefReduce} from "./InferredBeliefNode.tsx";
+
+export function BeliefGlobalReduce(beliefNode: Node, nodes: Node[]) {
+ switch (beliefNode.type) {
+ case 'basic_belief':
+ return BasicBeliefReduce(beliefNode, nodes);
+ case 'inferred_belief':
+ return InferredBeliefReduce(beliefNode, nodes);
+ }
+}
+
+export const noMatchingLeftRightBelief : HandleRule = (connection, _)=> {
+ const { nodes } = useFlowStore.getState();
+ const thisNode = nodes.find(node => node.id === connection.target && node.type === 'inferred_belief');
+ if (!thisNode) return ruleResult.satisfied;
+
+ const iBelief = (thisNode.data as InferredBeliefNodeData).inferredBelief;
+ return (iBelief.left === connection.source || iBelief.right === connection.source)
+ ? ruleResult.notSatisfied("Connecting one belief to both input handles of an inferred belief node is not allowed")
+ : ruleResult.satisfied;
+}
+/**
+ * makes it impossible to connect Inferred belief nodes
+ * if the connection would create a cyclical connection between inferred beliefs
+ */
+export const noBeliefCycles: HandleRule = (connection, _): RuleResult => {
+ const {nodes, edges} = useFlowStore.getState();
+ const defaultErrorMessage = "Cyclical connection exists between inferred beliefs";
+
+ /**
+ * recursively checks for cyclical connections between InferredBelief nodes
+ *
+ * to check for a cycle provide the source of an attempted connection as the targetNode for the cycle check,
+ * the currentNodeId should be initialised with the id of the targetNode of the attempted connection.
+ *
+ * @param {string} targetNodeId - the id of the node we are looking for as the endpoint of a cyclical connection
+ * @param {string} currentNodeId - the id of the node we are checking for outgoing connections to the provided target node
+ * @returns {RuleResult}
+ */
+ function checkForCycle(targetNodeId: string, currentNodeId: string): RuleResult {
+ const outgoingBeliefs = getOutgoers({id: currentNodeId}, nodes, edges)
+ .filter(node => node.type === 'inferred_belief');
+
+ if (outgoingBeliefs.length === 0) return ruleResult.satisfied;
+ if (outgoingBeliefs.some(node => node.id === targetNodeId)) return ruleResult
+ .notSatisfied(defaultErrorMessage);
+
+ const next = outgoingBeliefs.map(node => checkForCycle(targetNodeId, node.id))
+ .find(result => !result.isSatisfied);
+
+ return next
+ ? next
+ : ruleResult.satisfied;
+ }
+
+ return connection.source === connection.target
+ ? ruleResult.notSatisfied(defaultErrorMessage)
+ : checkForCycle(connection.source, connection.target);
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | + + + + + + + + + | import type { EndNodeData } from "./EndNode";
+
+/**
+ * Default data for this node.
+ */
+export const EndNodeDefaults: EndNodeData = {
+ label: "End Node",
+ droppable: false,
+ hasReduce: true
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ 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";
+
+
+
+/**
+ * The typing of this node's data
+ */
+export type EndNodeData = {
+ label: string;
+ droppable: boolean;
+ hasReduce: boolean;
+};
+
+export type EndNode = Node<EndNodeData>
+
+/**
+ * Default function to render an end node given its properties
+ * @param props the node's properties
+ * @returns React.JSX.Element
+ */
+export default function EndNode(props: NodeProps<EndNode>) {
+ return (
+ <>
+ <Toolbar nodeId={props.id} allowDelete={false}/>
+ <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
+ <div className={"flex-row gap-sm"}>
+ End
+ </div>
+ <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
+ allowOnlyConnectionsFromType(["phase"])
+ ]}/>
+ </div>
+ </>
+ );
+}
+
+/**
+ * Functionality for reducing this node into its more compact json program
+ * @param node the node to reduce
+ * @param _nodes all nodes present
+ * @returns Dictionary, {id: node.id}
+ */
+export function EndReduce(node: Node, _nodes: Node[]) {
+ // Replace this for nodes functionality
+ return {
+ id: node.id
+ }
+}
+
+export const EndTooltip = `
+ The end node signifies the endpoint of your program;
+ the output of the final phase of your program should connect to the end node`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function EndConnectionTarget(_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 EndConnectionSource(_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 EndDisconnectionTarget(_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 EndDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | + + + + + + + + + + + + + | import type { GoalNodeData } from "./GoalNode";
+
+/**
+ * Default data for this node
+ */
+export const GoalNodeDefaults: GoalNodeData = {
+ label: "Goal Node",
+ name: "",
+ droppable: true,
+ description: "",
+ achieved: false,
+ hasReduce: true,
+ can_fail: false,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ type NodeProps,
+ Position,
+ type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
+import useFlowStore from '../VisProgStores';
+import {DoesPlanIterate, HasCheckingSubGoal, PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';
+import { MultilineTextField } from '../../../../components/MultilineTextField';
+import { defaultPlan } from '../components/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+
+/**
+ * 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 - 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>
+
+
+/**
+ * Defines how a Goal node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function GoalNode({id, data}: NodeProps<GoalNode>) {
+ const {updateNodeData} = useFlowStore();
+ const _nodes = useFlowStore().nodes;
+
+ const text_input_id = `goal_${id}_text_input`;
+ const checkbox_id = `goal_${id}_checkbox`;
+ const planIterate = DoesPlanIterate(_nodes, data.plan);
+ const hasCheckSubGoal = data.plan !== undefined && HasCheckingSubGoal(data.plan, _nodes)
+
+ const setDescription = (value: string) => {
+ updateNodeData(id, {...data, description: value});
+ }
+
+ const setName= (value: string) => {
+ updateNodeData(id, {...data, name: value})
+ }
+
+ const setFailable = (value: boolean) => {
+ updateNodeData(id, {...data, can_fail: value});
+ }
+
+ return <>
+ <Toolbar nodeId={id} allowDelete={true}/>
+ <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+ <div className={"flex-row gap-md"}>
+ <label htmlFor={text_input_id}>Goal:</label>
+ <TextField
+ id={text_input_id}
+ value={data.name}
+ setValue={(val) => setName(val)}
+ placeholder={"To ..."}
+ />
+ </div>
+
+ {(data.can_fail || hasCheckSubGoal) && (<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"}
+ disabled={!planIterate || (data.plan && HasCheckingSubGoal(data.plan, _nodes))}
+ checked={!planIterate || data.can_fail || (data.plan && HasCheckingSubGoal(data.plan, _nodes))}
+ onChange={(e) => planIterate ? setFailable(e.target.checked) : setFailable(false)}
+ />
+ </div>
+)}
+
+ <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"}]),
+ ]}/>
+
+ <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[allowOnlyConnectionsFromType(["goal"])]}/>
+
+
+ </div>
+ </>;
+}
+
+
+/**
+ * Reduces each Goal, including its children down into its relevant data.
+ * @param node The Node Properties of this node.
+ * @param _nodes all the nodes in the graph
+ */
+export function GoalReduce(node: Node, _nodes: Node[]) {
+ const data = node.data as GoalNodeData;
+ return {
+ id: node.id,
+ name: data.name,
+ description: data.description,
+ can_fail: data.can_fail || (data.plan && HasCheckingSubGoal(data.plan, _nodes)),
+ plan: data.plan ? PlanReduce(_nodes, data.plan) : "",
+ }
+}
+
+
+export const GoalTooltip = `
+ The goal node allows you to set goals that Pepper has to achieve
+ before moving to the next phase of your program`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function GoalConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ // Goals should only be targeted by other goals, for them to be part of our plan.
+ const nodes = useFlowStore.getState().nodes;
+ const otherNode = nodes.find((x) => x.id === _sourceNodeId)
+ if (!otherNode || otherNode.type !== "goal") return;
+
+ const data = _thisNode.data as GoalNodeData
+
+ // First, let's see if we have a plan currently. If not, let's create a default plan with this goal inside.:)
+ if (!data.plan) {
+ data.plan = insertGoalInPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()} as Plan, otherNode as GoalNode)
+ }
+
+ // Else, lets just insert this goal into our current plan.
+ else {
+ data.plan = insertGoalInPlan(structuredClone(data.plan), otherNode as GoalNode)
+ }
+}
+
+/**
+ * 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 GoalConnectionSource(_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 GoalDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ // We should probably check if our disconnection was by a goal, since it would mean we have to remove it from our plan list.
+ const data = _thisNode.data as GoalNodeData
+ data.plan = deleteGoalInPlanByID(structuredClone(data.plan) as Plan, _sourceNodeId)
+}
+
+/**
+ * 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 GoalDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + + + + + + + + + + | import type { InferredBeliefNodeData } from "./InferredBeliefNode.tsx";
+
+
+/**
+ * Default data for this node
+ */
+export const InferredBeliefNodeDefaults: InferredBeliefNodeData = {
+ label: "Inferred Belief",
+ droppable: true,
+ inferredBelief: {
+ left: undefined,
+ operator: true,
+ right: undefined
+ },
+ hasReduce: true,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {getConnectedEdges, type Node, type NodeProps, Position} from '@xyflow/react';
+import {useState} from "react";
+import styles from '../../VisProg.module.css';
+import {Toolbar} from '../components/NodeComponents.tsx';
+import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
+import useFlowStore from "../VisProgStores.tsx";
+import {BeliefGlobalReduce, noBeliefCycles, noMatchingLeftRightBelief} from "./BeliefGlobals.ts";
+import switchStyles from './InferredBeliefNode.module.css';
+
+
+/**
+ * The default data structure for an InferredBelief node
+ */
+export type InferredBeliefNodeData = {
+ label: string;
+ droppable: boolean;
+ inferredBelief: InferredBelief;
+ hasReduce: boolean;
+};
+
+/**
+ * stores a boolean to represent the operator
+ * and a left and right BeliefNode (can be both an inferred and a basic belief)
+ * in the form of their corresponding id's
+ */
+export type InferredBelief = {
+ left: string | undefined,
+ operator: boolean,
+ right: string | undefined,
+}
+
+export type InferredBeliefNode = Node<InferredBeliefNodeData>;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function InferredBeliefConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ const data = _thisNode.data as InferredBeliefNodeData;
+
+ if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId
+ && ['basic_belief', 'inferred_belief'].includes(node.type!)))
+ ) {
+ const connectedEdges = getConnectedEdges([_thisNode], useFlowStore.getState().edges);
+ switch(connectedEdges.find(edge => edge.source === _sourceNodeId)?.targetHandle){
+ case 'beliefLeft': data.inferredBelief.left = _sourceNodeId; break;
+ case 'beliefRight': data.inferredBelief.right = _sourceNodeId; break;
+ }
+ }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function InferredBeliefConnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function InferredBeliefDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ const data = _thisNode.data as InferredBeliefNodeData;
+
+ if (_sourceNodeId === data.inferredBelief.left) data.inferredBelief.left = undefined;
+ if (_sourceNodeId === data.inferredBelief.right) data.inferredBelief.right = undefined;
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function InferredBeliefDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+}
+
+export const InferredBeliefTooltip = `
+ Combines two beliefs into a single belief using logical inference,
+ the node can be toggled between using "AND" and "OR" mode for inference`;
+/**
+ * Defines how an InferredBelief node should be rendered
+ * @param {NodeProps<InferredBeliefNode>} props - Node properties provided by React Flow, including `id` and `data`.
+ * @returns The rendered InferredBeliefNode React element. (React.JSX.Element)
+ */
+export default function InferredBeliefNode(props: NodeProps<InferredBeliefNode>) {
+ const data = props.data;
+ const { updateNodeData } = useFlowStore();
+ // start of as an AND operator, true: "AND", false: "OR"
+ const [enforceAllBeliefs, setEnforceAllBeliefs] = useState(true);
+
+ // used to toggle operator
+ function onToggle() {
+ const newOperator = !enforceAllBeliefs; // compute the new value
+ setEnforceAllBeliefs(newOperator);
+
+ updateNodeData(props.id, {
+ ...data,
+ inferredBelief: {
+ ...data.inferredBelief,
+ operator: enforceAllBeliefs,
+ }
+ });
+ }
+
+ return (
+ <>
+ <Toolbar nodeId={props.id} allowDelete={true}/>
+ <div className={`${styles.defaultNode} ${styles.nodeInferredBelief}`}>
+ {/* The checkbox used to toggle the operator between 'AND' and 'OR' */}
+ <label className={switchStyles.operatorSwitch}>
+ <input
+ type="checkbox"
+ checked={data.inferredBelief.operator}
+ onChange={onToggle}
+ />
+ <div className={switchStyles.switchVisual}></div>
+ <div className={switchStyles.switchLabels}>
+ <span title={"Belief is fulfilled if either of the supplied beliefs is true"}>OR</span>
+ <span title={"Belief is fulfilled if all of the supplied beliefs are true"}>AND</span>
+ </div>
+ </label>
+
+
+ {/* outgoing connections */}
+ <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
+ allowOnlyConnectionsFromType(["norm", "trigger"]),
+ noBeliefCycles,
+ noMatchingLeftRightBelief
+ ]}/>
+
+ {/* incoming connections */}
+ <SingleConnectionHandle type="target" position={Position.Left} style={{top: '30%'}} id="beliefLeft" rules={[
+ allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
+ noBeliefCycles,
+ noMatchingLeftRightBelief
+ ]}/>
+ <SingleConnectionHandle type="target" position={Position.Left} style={{top: '70%'}} id="beliefRight" rules={[
+ allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
+ noBeliefCycles,
+ noMatchingLeftRightBelief
+ ]}/>
+ </div>
+ </>
+ );
+};
+
+/**
+ * Reduces each BasicBelief, including its children down into its core data.
+ * @param {Node} node - The BasicBelief node to reduce.
+ * @param {Node[]} nodes - The list of all nodes in the current flow graph.
+ * @returns A simplified object containing the node label and its list of BasicBeliefs.
+ */
+export function InferredBeliefReduce(node: Node, nodes: Node[]) {
+ const data = node.data as InferredBeliefNodeData;
+ const leftBelief = nodes.find((node) => node.id === data.inferredBelief.left);
+ const rightBelief = nodes.find((node) => node.id === data.inferredBelief.right);
+
+ if (!leftBelief) { throw new Error("No Left belief found")}
+ if (!rightBelief) { throw new Error("No Right Belief found")}
+
+ const result: Record<string, unknown> = {
+ id: node.id,
+ left: BeliefGlobalReduce(leftBelief, nodes),
+ operator: data.inferredBelief.operator ? "AND" : "OR",
+ right: BeliefGlobalReduce(rightBelief, nodes),
+ };
+
+ return result
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | + + + + + + + + + + + + | import type { NormNodeData } from "./NormNode";
+
+/**
+ * Default data for this node
+ */
+export const NormNodeDefaults: NormNodeData = {
+ label: "Norm Node",
+ droppable: true,
+ condition: undefined,
+ norm: "",
+ hasReduce: true,
+ critical: false,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ type NodeProps,
+ Position,
+ type Node,
+} from '@xyflow/react';
+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 {BeliefGlobalReduce} from "./BeliefGlobals.ts";
+
+/**
+ * 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 norm: list of strings of norms for this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
+ */
+export type NormNodeData = {
+ label: string;
+ droppable: boolean;
+ condition?: string; // id of this node's belief.
+ norm: string;
+ hasReduce: boolean;
+ critical: boolean;
+};
+
+export type NormNode = Node<NormNodeData>
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function NormNode(props: NodeProps<NormNode>) {
+ const data = props.data;
+ const {updateNodeData} = useFlowStore();
+
+ const text_input_id = `norm_${props.id}_text_input`;
+ const checkbox_id = `goal_${props.id}_checkbox`;
+
+ const setValue = (value: string) => {
+ updateNodeData(props.id, {norm: value});
+ }
+
+ const setCritical = (value: boolean) => {
+ updateNodeData(props.id, {...data, critical: value});
+ }
+
+ return <>
+ <Toolbar nodeId={props.id} allowDelete={true}/>
+ <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
+ <div className={"flex-row gap-sm"}>
+ <label htmlFor={text_input_id}>Norm :</label>
+ <TextField
+ id={text_input_id}
+ value={data.norm}
+ setValue={(val) => setValue(val)}
+ placeholder={"Pepper should ..."}
+ />
+ </div>
+ <div className={"flex-row gap-md align-center"}>
+ <label htmlFor={checkbox_id}>Critical:</label>
+ <input
+ id={checkbox_id}
+ type={"checkbox"}
+ checked={data.critical || false}
+ onChange={(e) => setCritical(e.target.checked)}
+ />
+ </div>
+
+
+ {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="NormBeliefs" rules={[
+ allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"])
+ ]}/>
+ </div>
+ </>;
+};
+
+
+/**
+ * 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
+ */
+export function NormReduce(node: Node, nodes: Node[]) {
+ const data = node.data as NormNodeData;
+
+ // 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 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"] = BeliefGlobalReduce(conditionNode, nodes)
+ }
+ return result
+}
+
+export const NormTooltip = `
+ A norm describes a behavioral rule Pepper must follow during the connected phase(-s),
+ for example: "respond using formal language"`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ const data = _thisNode.data as NormNodeData;
+ // If we got a belief connected, this is the condition for the norm.
+ if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && ['basic_belief', 'inferred_belief'].includes(node.type!)))) {
+ data.condition = _sourceNodeId;
+ }
+}
+
+/**
+ * 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 NormConnectionSource(_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 NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ const data = _thisNode.data as NormNodeData;
+ // remove if the target of disconnection was our condition
+ if (_sourceNodeId == data.condition) data.condition = undefined
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function NormDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | + + + + + + + + + + + + | import type { PhaseNodeData } from "./PhaseNode";
+
+/**
+ * Default data for this node
+ */
+export const PhaseNodeDefaults: PhaseNodeData = {
+ label: "Phase Node",
+ droppable: true,
+ children: [],
+ hasReduce: true,
+ nextPhaseId: null,
+ isFirstPhase: false,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ 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';
+
+/**
+ * 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 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>
+
+/**
+ * Defines how a phase node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function PhaseNode(props: NodeProps<PhaseNode>) {
+ const data = props.data;
+ const {updateNodeData} = useFlowStore();
+ const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
+ const label_input_id = `phase_${props.id}_label_input`;
+
+ return (
+ <>
+ <Toolbar nodeId={props.id} allowDelete={true}/>
+ <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
+ <div className={"flex-row gap-sm"}>
+ <label htmlFor={label_input_id}>Name:</label>
+ <TextField
+ id={label_input_id}
+ value={data.label}
+ setValue={updateLabel}
+ placeholder={"Phase ..."}
+ />
+ </div>
+ <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>
+ </>
+ );
+};
+
+/**
+ * Reduces each phase, including its children down into its relevant data.
+ * @param node the node which is being reduced
+ * @param nodes all the nodes currently in the flow.
+ * @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;
+
+ // node typings that are not in phase
+ const nodesNotInPhase: string[] = Object.entries(NodesInPhase)
+ .filter(([, f]) => !f())
+ .map(([t]) => t);
+
+ // node typings that then are in phase
+ const nodesInPhase: string[] = Object.entries(NodeTypes)
+ .filter(([t]) => !nodesNotInPhase.includes(t))
+ .map(([t]) => t);
+
+ // children nodes - make sure to check for empty arrays
+ let childrenNodes: Node[] = [];
+ if (data.children)
+ childrenNodes = nodes.filter((node) => data.children.includes(node.id));
+
+ // Build the result object
+ const result: Record<string, unknown> = {
+ id: thisNode.id,
+ name: data.label,
+ };
+
+ nodesInPhase.forEach((type) => {
+ const typedChildren = childrenNodes.filter((child) => child.type == type);
+ const reducer = NodeReduces[type as keyof typeof NodeReduces];
+ if (!reducer) {
+ console.warn(`No reducer found for node type ${type}`);
+ result[type + "s"] = [];
+ } else {
+ result[type + "s"] = [];
+ for (const typedChild of typedChildren) {
+ (result[type + "s"] as object[]).push(reducer(typedChild, nodes))
+ }
+ }
+ });
+
+ return result;
+}
+
+export const PhaseTooltip = `
+ A phase is a single stage of the program, during a phase Pepper will behave
+ in accordance with any connected norms, goals and triggers`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ 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;
+ }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) {
+ 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;
+ }
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+ 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;
+ }
+
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function PhaseDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ 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;
+ }
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | + + + + + + + + + | import type { StartNodeData } from "./StartNode";
+
+/**
+ * Default data for this node.
+ */
+export const StartNodeDefaults: StartNodeData = {
+ label: "Start Node",
+ droppable: false,
+ hasReduce: true
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ 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 = {
+ label: string;
+ droppable: boolean;
+ hasReduce: boolean;
+};
+
+
+export type StartNode = Node<StartNodeData>
+
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function StartNode(props: NodeProps<StartNode>) {
+ return (
+ <>
+ <Toolbar nodeId={props.id} allowDelete={false}/>
+ <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
+ <div className={"flex-row gap-sm"}>
+ Start
+ </div>
+ <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
+ allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
+ ]}/>
+ </div>
+ </>
+ );
+}
+
+/**
+ * The reduce function for this node type.
+ * @param node this node
+ * @param _nodes all the nodes in the graph
+ * @returns a reduced structure of this node
+ */
+export function StartReduce(node: Node, _nodes: Node[]) {
+ // Replace this for nodes functionality
+ return {
+ id: node.id
+ }
+}
+
+export const StartTooltip = `
+ The start node acts as the starting point for a program,
+ it should be connected to the left handle of the first phase of your program`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function StartConnectionTarget(_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 StartConnectionSource(_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 StartDisconnectionTarget(_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 StartDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | + + + + + + + + + + | import type { TriggerNodeData } from "./TriggerNode";
+
+/**
+ * Default data for this node
+ */
+export const TriggerNodeDefaults: TriggerNodeData = {
+ label: "Trigger Node",
+ name: "",
+ droppable: true,
+ hasReduce: true,
+}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {
+ type NodeProps,
+ Position,
+ type Node,
+} 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 {PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';
+import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
+import type { GoalNode } from './GoalNode.tsx';
+import { defaultPlan } from '../components/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+import { TextField } from '../../../../components/TextField.tsx';
+
+/**
+ * The default data structure for a Trigger 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 Trigger node.
+ * @property droppable: Whether this node can be dropped from the toolbar (default: true).
+ * @property hasReduce - Whether this node supports reduction logic.
+ */
+export type TriggerNodeData = {
+ label: string;
+ name: string;
+ droppable: boolean;
+ condition?: string; // id of the belief
+ plan?: Plan;
+ hasReduce: boolean;
+};
+
+
+export type TriggerNode = Node<TriggerNodeData>
+
+/**
+ * Defines how a Trigger node should be rendered
+ * @param props - Node properties provided by React Flow, including `id` and `data`.
+ * @returns The rendered TriggerNode React element (React.JSX.Element).
+ */
+export default function TriggerNode(props: NodeProps<TriggerNode>) {
+ const data = props.data;
+ const {updateNodeData} = useFlowStore();
+
+ const setName= (value: string) => {
+ updateNodeData(props.id, {...data, name: value})
+ }
+
+ return <>
+
+ <Toolbar nodeId={props.id} allowDelete={true}/>
+ <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+ <TextField
+ value={props.data.name}
+ setValue={(val) => setName(val)}
+ placeholder={"Name of this trigger..."}
+ />
+ <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="TriggerBeliefs"
+ style={{ left: '40%' }}
+ rules={[
+ allowOnlyConnectionsFromType(['basic_belief', "inferred_belief"]),
+ ]}
+ />
+
+ <MultiConnectionHandle
+ type="target"
+ position={Position.Bottom}
+ id="GoalTarget"
+ style={{ left: '60%' }}
+ rules={[
+ allowOnlyConnectionsFromType(['goal']),
+ ]}
+ />
+
+ <PlanEditorDialog
+ plan={data.plan}
+ onSave={(plan) => {
+ updateNodeData(props.id, {
+ ...data,
+ plan,
+ });
+ }}
+ />
+ </div>
+ </>;
+}
+
+/**
+ * Reduces each Trigger, including its children down into its core data.
+ * @param node - The Trigger node to reduce.
+ * @param nodes - The list of all nodes in the current flow graph.
+ * @returns A simplified object containing the node label and its list of triggers.
+ */
+export function TriggerReduce(node: Node, nodes: Node[]) {
+ const data = node.data as TriggerNodeData;
+ const conditionNode = data.condition ? nodes.find((n)=>n.id===data.condition) : undefined
+ const conditionData = conditionNode ? BeliefGlobalReduce(conditionNode, nodes) : ""
+ return {
+ id: node.id,
+ name: node.data.name,
+ condition: conditionData, // Make sure we have a condition before reducing, or default to ""
+ plan: !data.plan ? "" : PlanReduce(nodes, data.plan), // Make sure we have a plan when reducing, or default to ""
+ }
+
+}
+
+
+export const TriggerTooltip = `
+ A trigger node is used to make Pepper execute a predefined plan -
+ consisting of one or more actions - when the connected beliefs are met`;
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+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.
+ const nodes = useFlowStore.getState().nodes;
+ const otherNode = nodes.find((x) => x.id === _sourceNodeId)
+ if (!otherNode) return;
+
+ if (otherNode.type === 'basic_belief'||'inferred_belief') {
+ data.condition = _sourceNodeId;
+ }
+
+ else if (otherNode.type === 'goal') {
+ // First, let's see if we have a plan currently. If not, let's create a default plan with this goal inside.:)
+ if (!data.plan) {
+ data.plan = insertGoalInPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()} as Plan, otherNode as GoalNode)
+ }
+
+ // Else, lets just insert this goal into our current plan.
+ else {
+ data.plan = insertGoalInPlan(structuredClone(data.plan), otherNode as GoalNode)
+ }
+ }
+}
+
+/**
+ * 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 TriggerConnectionSource(_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 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
+
+ data.plan = deleteGoalInPlanByID(structuredClone(data.plan) as Plan, _sourceNodeId)
+}
+
+/**
+ * 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 TriggerDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+ // no additional connection logic exists yet
+}
+
+// Definitions for the possible triggers, being keywords and emotions
+
+/** Represents a single keyword trigger entry. */
+type Keyword = { id: string, keyword: string };
+
+/** Properties for an emotion-type trigger node. */
+export type EmotionTriggerNodeProps = {
+ type: "emotion";
+ value: string;
+}
+
+/** Props for a keyword-type trigger node. */
+export type KeywordTriggerNodeProps = {
+ type: "keywords";
+ value: Keyword[];
+}
+
+/** Union type for all possible Trigger node configurations. */
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| BasicBeliefNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| BeliefGlobals.ts | +
+
+ |
+ 0% | +0/26 | +0% | +0/18 | +0% | +0/9 | +0% | +0/20 | +
| EndNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| EndNode.tsx | +
+
+ |
+ 0% | +0/3 | +100% | +0/0 | +0% | +0/6 | +0% | +0/3 | +
| GoalNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| GoalNode.tsx | +
+
+ |
+ 0% | +0/30 | +0% | +0/35 | +0% | +0/13 | +0% | +0/28 | +
| InferredBeliefNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| InferredBeliefNode.tsx | +
+
+ |
+ 0% | +0/34 | +0% | +0/16 | +0% | +0/11 | +0% | +0/24 | +
| NormNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| NormNode.tsx | +
+
+ |
+ 0% | +0/28 | +0% | +0/14 | +0% | +0/12 | +0% | +0/24 | +
| PhaseNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| PhaseNode.tsx | +
+
+ |
+ 0% | +0/71 | +0% | +0/23 | +0% | +0/19 | +0% | +0/56 | +
| StartNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| StartNode.tsx | +
+
+ |
+ 0% | +0/3 | +100% | +0/0 | +0% | +0/6 | +0% | +0/3 | +
| TriggerNode.default.ts | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| TriggerNode.tsx | +
+
+ |
+ 0% | +0/29 | +0% | +0/28 | +0% | +0/11 | +0% | +0/25 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 | +2x +2x + + + + + + +2x +6x + + +6x + + +10x + +6x + +2x +2x +2x +2x + + +6x + + +6x + + + + + + + +6x + | import type { XYPosition } from "@xyflow/react";
+import { NodeDefaults, type NodeTypes } from "../NodeRegistry";
+import useFlowStore from "../VisProgStores";
+
+
+/**
+ * addNode — adds a new node to the flow using the unified class-based system.
+ * Keeps numbering logic for phase/norm nodes.
+ */
+export default function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+ const { nodes, setNodes } = useFlowStore.getState();
+
+ // Find out if there's any default data about our ndoe
+ 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}`;
+
+ // Create new node
+ const newNode = {
+ id: id,
+ type: nodeType,
+ position,
+ // Deep copy using JSON because thats how things work:
+ // Ref: https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy
+ data: JSON.parse(JSON.stringify(defaultData))
+ }
+ setNodes([...nodes, newNode]);
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AddNode.ts | +
+
+ |
+ 100% | +15/15 | +66.66% | +4/6 | +100% | +3/3 | +100% | +14/14 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | + + + + + + + + + + + + + + + + + + | import {type Edge, type Node } from "@xyflow/react";
+
+export type SavedProject = {
+ name: string;
+ savedASavedProject: string; // ISO timestamp
+ nodes: Node[];
+ edges: Edge[];
+};
+
+// Creates a JSON Blob containing the current visual program (nodes + edges)
+export function makeProjectBlob(name: string, nodes: Node[], edges: Edge[]): Blob {
+ const payload = {
+ name,
+ savedAt: new Date().toISOString(),
+ nodes,
+ edges,
+ };
+ return new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {useSyncExternalStore} from "react";
+
+type Unsub = () => void;
+
+
+/**
+ * A simple reactive state container that holds a value of type `T` that provides methods to get, set, and subscribe.
+ */
+export type Cell<T> = {
+ /**
+ * Returns the current value stored in the cell.
+ */
+ get: () => T;
+ /**
+ * Updates the cell's value, pass either a direct value or an updater function.
+ *
+ * @example
+ * ```ts
+ * count.set(5);
+ * count.set(prev => prev + 1);
+ * ```
+ */
+ set: (next: T | ((prev: T) => T)) => void;
+
+ /**
+ * Subscribe to changes in the cell's value, meaning the provided callback is called whenever the value changes.
+ * Returns an unsubscribe function.
+ *
+ * @example
+ * ```ts
+ * const unsubscribe = count.subscribe(() => console.log(count.get()));
+ * // later:
+ * unsubscribe();
+ * ```
+ */
+ subscribe: (callback: () => void) => Unsub;
+};
+
+/**
+ * Creates a new reactive state container (`Cell`) with an initial value.
+ *
+ * This function allows you to store and mutate state outside of React,
+ * while still supporting subscriptions for reactivity.
+ *
+ * @param initial - The initial value for the cell.
+ * @returns A Cell object with `get`, `set`, and `subscribe` methods.
+ *
+ * @example
+ * ```ts
+ * const count = cell(0);
+ * count.set(10);
+ * console.log(count.get()); // 10
+ * ```
+ */
+export function cell<T>(initial: T): Cell<T> {
+ let value = initial;
+ const listeners = new Set<() => void>();
+ return {
+ get: () => value,
+ set: (next) => {
+ value = typeof next === "function" ? (next as (v: T) => T)(value) : next;
+ for (const l of listeners) l();
+ },
+ subscribe: (callback) => {
+ listeners.add(callback);
+ return () => listeners.delete(callback);
+ },
+ };
+}
+
+/**
+ * React hook that subscribes a component to a Cell.
+ *
+ * Automatically re-renders the component whenever the Cell's value changes.
+ * Uses React’s built-in `useSyncExternalStore` for correct subscription behavior.
+ *
+ * @param c - The cell to subscribe to.
+ * @returns The current value of the cell.
+ *
+ * @example
+ * ```tsx
+ * const count = cell(0);
+ *
+ * function Counter() {
+ * const value = useCell(count);
+ * return (
+ * <button onClick={() => count.set(v => v + 1)}>
+ * Count: {value}
+ * </button>
+ * );
+ * }
+ * ```
+ */
+export function useCell<T>(c: Cell<T>) {
+ return useSyncExternalStore(c.subscribe, c.get, c.get);
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + + + + + + + + + + + + + + + + + + + | /** + * Find the indices of all elements that occur more than once. + * + * @param array The array to search for duplicates. + * @returns An array of indices where an element occurs more than once, in no particular order. + */ +export default function duplicateIndices<T>(array: T[]): number[] { + const positions = new Map<T, number[]>(); + + array.forEach((value, i) => { + if (!positions.has(value)) positions.set(value, []); + positions.get(value)!.push(i); + }); + + // flatten all index lists with more than one element + return Array.from(positions.values()) + .filter(idxs => idxs.length > 1) + .flat(); +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | + + + + + + + + + + + + + + + + + + + + + | /** + * Format a time duration like `HH:MM:SS.mmm`. + * + * @param durationMs time duration in milliseconds. + * @return formatted time string. + */ +export default function formatDuration(durationMs: number): string { + const isNegative = durationMs < 0; + if (isNegative) durationMs = -durationMs; + + const hours = Math.floor(durationMs / 3600000); + const minutes = Math.floor((durationMs % 3600000) / 60000); + const seconds = Math.floor((durationMs % 60000) / 1000); + const milliseconds = Math.floor(durationMs % 1000); + + return (isNegative ? '-' : '') + + `${hours.toString().padStart(2, '0')}:` + + `${minutes.toString().padStart(2, '0')}:` + + `${seconds.toString().padStart(2, '0')}.` + + `${milliseconds.toString().padStart(3, '0')}`; +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| SaveLoad.ts | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| cellStore.ts | +
+
+ |
+ 0% | +0/11 | +0% | +0/2 | +0% | +0/6 | +0% | +0/9 | +
| duplicateIndices.ts | +
+
+ |
+ 0% | +0/7 | +0% | +0/2 | +0% | +0/3 | +0% | +0/6 | +
| formatDuration.ts | +
+
+ |
+ 0% | +0/8 | +0% | +0/4 | +0% | +0/1 | +0% | +0/7 | +
| orderPhaseNodes.ts | +
+
+ |
+ 0% | +0/18 | +0% | +0/8 | +0% | +0/3 | +0% | +0/15 | +
| priorityFiltering.ts | +
+
+ |
+ 0% | +0/12 | +0% | +0/8 | +0% | +0/1 | +0% | +0/10 | +
| programStore.ts | +
+
+ |
+ 0% | +0/26 | +0% | +0/6 | +0% | +0/13 | +0% | +0/20 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +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;
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | + + + + + + + + + + + + + + + + + + + + + + + + | export type PriorityFilterPredicate<T> = {
+ priority: number;
+ predicate: (element: T) => boolean | null; // The predicate and its priority are ignored if it returns null.
+}
+
+/**
+ * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true.
+ * @param element The element to apply the predicates to.
+ * @param predicates The list of predicates to apply.
+ */
+export function applyPriorityPredicates<T>(element: T, predicates: PriorityFilterPredicate<T>[]): boolean {
+ let highestPriority = -1;
+ let highestKeep = true;
+ for (const predicate of predicates) {
+ if (predicate.priority >= highestPriority) {
+ const predicateKeep = predicate.predicate(element);
+ if (predicateKeep === null) continue; // This predicate doesn't care about the element, so skip it
+ if (predicate.priority > highestPriority) highestKeep = true;
+ highestPriority = predicate.priority;
+ highestKeep = highestKeep && predicateKeep;
+ }
+ }
+ return highestKeep;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import {create} from "zustand";
+
+// the type of a reduced program
+export type ReducedProgram = { phases: Record<string, unknown>[] };
+
+/**
+ * the type definition of the programStore
+ */
+export type ProgramState = {
+ // Basic store functionality:
+ currentProgram: ReducedProgram;
+ setProgramState: (state: ReducedProgram) => void;
+ getProgramState: () => ReducedProgram;
+
+ // Utility functions:
+ // to avoid having to manually go through the entire state for every instance where data is required
+ getPhaseIds: () => string[];
+ getPhaseNames: () => string[];
+ getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+ getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+ getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+ // if more specific utility functions are needed they can be added here:
+}
+
+/**
+ * the ProgramStore can be used to access all information of the most recently sent program,
+ * it contains basic functions to set and get the current program.
+ * And it contains some utility functions that allow you to easily gain access
+ * to the norms, triggers and goals of a specific phase.
+ */
+const useProgramStore = create<ProgramState>((set, get) => ({
+ currentProgram: { phases: [] as Record<string, unknown>[]},
+ /**
+ * sets the current program by cloning the provided program using a structuredClone
+ */
+ setProgramState: (program: ReducedProgram) => set({currentProgram: structuredClone(program)}),
+ /**
+ * gets the current program
+ */
+ getProgramState: () => get().currentProgram,
+
+ // utility functions:
+ /**
+ * gets the ids of all phases in the program
+ */
+ getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
+ /**
+ * gets the names of all phases in the program
+ */
+ getPhaseNames: () => get().currentProgram.phases.map((entry) => (entry["name"] as string)),
+ /**
+ * gets the norms for the provided phase
+ */
+ getNormsInPhase: (currentPhaseId) => {
+ const program = get().currentProgram;
+ const phase = program.phases.find(val => val["id"] === currentPhaseId);
+ if (phase) {
+ return phase["norms"] as Record<string, unknown>[];
+ }
+ throw new Error(`phase with id:"${currentPhaseId}" not found`)
+ },
+ /**
+ * gets the goals for the provided phase
+ */
+ getGoalsInPhase: (currentPhaseId) => {
+ const program = get().currentProgram;
+ const phase = program.phases.find(val => val["id"] === currentPhaseId);
+ if (phase) {
+ return phase["goals"] as Record<string, unknown>[];
+ }
+ throw new Error(`phase with id:"${currentPhaseId}" not found`)
+ },
+ /**
+ * gets the triggers for the provided phase
+ */
+ getTriggersInPhase: (currentPhaseId) => {
+ const program = get().currentProgram;
+ const phase = program.phases.find(val => val["id"] === currentPhaseId);
+ if (phase) {
+ return phase["triggers"] as Record<string, unknown>[];
+ }
+ throw new Error(`phase with id:"${currentPhaseId}" not found`)
+ }
+}));
+
+export default useProgramStore; |